app/Http/Controllers/CustomerController.php

@@ -2,6 +2,8 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Ppn;
+use App\Models\Sale;
 use App\Models\Customer;
 use App\Models\SaleDetail;
 use App\Exports\CustomerHistoryExport;
@@ -137,6 +139,28 @@ class CustomerController extends Controller
         return back()->with("success", __("messages.success.destroy.customer"));
     }
 
+    public function historyPurchase(Sale $sale)
+    {
+        return inertia("Customers/HistoryPurchase", [
+            "id" => $sale->id,
+            "number" => $sale->number,
+            "ppn" => Ppn::first()->ppn,
+            "status" => $sale->status,
+            "ppnChecked" => $sale->ppn ? true : false,
+            "customer" => $sale->customer,
+            "saleDetail" => $sale->saleDetail->transform(
+                fn($sale) => [
+                    "id" => $sale->id,
+                    "number" => $sale->product_number,
+                    "name" => $sale->product->name,
+                    "price" => $sale->getRawOriginal("price"),
+                    "qty" => $sale->qty,
+                    "unit" => $sale->product->unit,
+                ]
+            ),
+        ]);
+    }
+
     public function historyPurchaseExcel()
     {
         $this->authorize("viewAny", Customer::class);

resources/js/pages/Customers/HistoryPurchase.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { Link } from '@inertiajs/inertia-vue3'
+import { useForm } from '@/composables/useForm'
+import { IDRCurrencyFormat } from '@/utils/helpers'
+import { cartTable } from './config'
+import Cart from '@/pages/Components/Cart.vue'
+import { useCart } from '@/pages/Composables/useCart'
+import AppButtonLink from '@/components/AppButtonLink.vue'
+import DashboardLayout from '@/layouts/Dashboard/DashboardLayout.vue'
+
+const props = defineProps({
+  id: Number,
+  number: String,
+  ppn: Number,
+  status: String,
+  ppnChecked: Boolean,
+  customer: Object,
+  saleDetail: Array,
+})
+
+const form = useForm({
+  status: props.status,
+  customer: props.customer,
+  ppn: props.ppn,
+  checkedPpn: props.ppnChecked,
+})
+
+const { cart, totalCartPrice } = useCart(form, props.saleDetail)
+
+const back = () => history.back()
+</script>
+
+<template>
+  <DashboardLayout title="Detail Penjualan">
+    <DynamicDialog />
+
+    <div class="grid">
+      <div class="col-12 flex flex-column md:flex-row md:align-items-center">
+        <Link class="text-primary text-5xl font-bold" @click="back">
+          Pelanggan
+        </Link>
+
+        <span class="text-5xl font-bold mx-2"> / </span>
+
+        <span class="text-5xl font-bold">Detail Pembelian</span>
+      </div>
+
+      <div class="col-12">
+        <div class="grid">
+          <div class="col-12">
+            <Card>
+              <template #title>
+                <h2 class="text-2xl font-bold">Detail Penjualan</h2>
+              </template>
+              <template #content>
+                <div class="grid">
+                  <div class="col-12">
+                    <div class="grid">
+                      <div class="col">
+                        <h3 class="text-base">Nama</h3>
+                        <span>{{ customer.name }}</span>
+                      </div>
+                      <div class="col">
+                        <h3 class="text-base">Alamat</h3>
+                        <span>{{ customer.address }}</span>
+                      </div>
+                      <div class="col">
+                        <h3 class="text-base">No HP</h3>
+                        <span>{{ customer.phone }}</span>
+                      </div>
+                      <div class="col">
+                        <h3 class="text-base">NPWP</h3>
+                        <span>{{ customer.npwp }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <div class="grid">
+                      <div class="col">
+                        <h3 class="text-base">Nomor Pembelian</h3>
+                        <span>{{ number }}</span>
+                      </div>
+                      <div class="col">
+                        <h3 class="text-base">Status Pembelian</h3>
+                        <span>{{ status }}</span>
+                      </div>
+                      <div class="col">
+                        <h3 class="text-base">Total Harga</h3>
+                        <span>{{ IDRCurrencyFormat(totalCartPrice()) }}</span>
+                      </div>
+                      <div class="col"></div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </Card>
+          </div>
+          <div class="col-12">
+            <Cart
+              title="Keranjang Produk"
+              :cart="cart"
+              :header-table="cartTable"
+              :btn-ppn-disabled="true"
+              :btn-delete-show="false"
+              :btn-edit-show="false"
+              v-model:checked-ppn="form.checkedPpn"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 flex justify-content-end">
+        <AppButtonLink
+          label="Cetak Invoice"
+          icon="pi pi-print"
+          target="_blank"
+          :inertia-link="false"
+          :href="route('sales.pdf.invoice', id)"
+        />
+      </div>
+
+      <div class="col-12 flex justify-content-end">
+        <AppButtonLink
+          label="Cetak Delivery Order"
+          icon="pi pi-print"
+          target="_blank"
+          :inertia-link="false"
+          :href="route('sales.pdf.do', id)"
+        />
+      </div>
+    </div>
+  </DashboardLayout>
+</template>

resources/js/pages/Customers/Index.vue

@@ -74,13 +74,6 @@ const onDelete = (data) => {
       <Column>
         <template #body="{ data }">
           <div class="grid gap-2">
-            <AppButtonLink
-              icon="pi pi-list"
-              class="p-button-icon-only p-button-rounded p-button-text"
-              v-tooltip.bottom="'History Pembelian'"
-              :href="route('customers.show', data.id)"
-            />
-
             <AppButtonLink
               icon="pi pi-pencil"
               class="p-button-icon-only p-button-rounded p-button-text"
@@ -95,6 +88,13 @@ const onDelete = (data) => {
               v-tooltip.bottom="'Hapus Pelanggan'"
               @click="onDelete(data)"
             />
+
+            <AppButtonLink
+              icon="pi pi-chevron-right"
+              class="p-button-icon-only p-button-rounded p-button-text"
+              v-tooltip.bottom="'History Pembelian'"
+              :href="route('customers.show', data.id)"
+            />
           </div>
         </template>
       </Column>

resources/js/pages/Customers/Show.vue

@@ -26,7 +26,7 @@ const exportExcel = () => {
 </script>
 
 <template>
-  <DashboardLayout title="">
+  <DashboardLayout title="Detail Pembelian">
     <div class="grid">
       <div class="col-12">
         <Card>
@@ -113,10 +113,10 @@ const exportExcel = () => {
           <Column>
             <template #body="{ data }">
               <AppButtonLink
-                icon="pi pi-eye"
+                icon="pi pi-chevron-right"
                 class="p-button-icon-only p-button-rounded p-button-text"
                 v-tooltip.bottom="'Lihat Detail Penjualan'"
-                :href="route('sales.show', data.id)"
+                :href="route('customers.history-purchases', data.id)"
               />
             </template>
           </Column>

resources/js/pages/Customers/config.js

@@ -11,3 +11,11 @@ export const detailTable = [
   { field: 'ppn', header: 'PPN' },
   { field: 'status', header: 'Status' },
 ]
+
+export const cartTable = [
+  { field: 'number', header: 'Nomor Produk' },
+  { field: 'name', header: 'Produk' },
+  { field: 'price', header: 'Harga' },
+  { field: 'qty', header: 'Kuantitas' },
+  { field: 'unit', header: 'Satuan' },
+]

resources/js/pages/Purchases/Composables/useCart.js

@@ -1,109 +0,0 @@
-import { reactive } from 'vue'
-import { FormValidationError, ppn } from '@/utils/helpers'
-
-export function useCart(form, initialProducts = []) {
-  const cart = reactive(initialProducts)
-
-  const cartDeleted = reactive([])
-
-  const cartErrors = reactive([])
-
-  const cartValidation = () => {
-    onClearCartErrors()
-
-    const itemExists = cart.find(
-      (product) => product.number === form.product.number
-    )
-
-    if (itemExists) {
-      cartErrors.push({
-        message: 'Produk sudah ada dikeranjang',
-        field: 'product',
-      })
-    }
-
-    if (cartErrors.length) {
-      throw new FormValidationError('form error', cartErrors)
-    }
-  }
-
-  const onAddCart = () => {
-    try {
-      form.clearErrors('product', 'qty')
-
-      cartValidation()
-
-      cart.push({
-        label: 'add',
-        number: form.product.number,
-        name: form.product.name,
-        price: form.price,
-        qty: Number(form.qty),
-        unit: form.product.unit,
-      })
-
-      form.reset('product', 'price', 'qty')
-    } catch (e) {
-      e.errors.forEach((error) => {
-        form.setError(error.field, error.message)
-      })
-    }
-  }
-
-  const onDeleteCart = (index) => {
-    if (cart[index]?.id) {
-      cartDeleted.push({
-        ...cart[index],
-        label: 'delete',
-      })
-    }
-
-    cart.splice(index, 1)
-  }
-
-  const onClearCart = () => {
-    cart.splice(0)
-  }
-
-  const onClearCartDelete = () => {
-    cartDeleted.splice(0)
-  }
-
-  const onClearCartErrors = () => {
-    cartErrors.splice(0)
-  }
-
-  const totalCartPrice = () => {
-    const itemPrices = cart.map((product) => {
-      return form.checkedPpn
-        ? ppn(product.price, form.ppn) * product.qty
-        : product.price * product.qty
-    })
-
-    return itemPrices.reduce(
-      (prevPrice, currentPrice) => prevPrice + currentPrice,
-      0
-    )
-  }
-
-  const onEditCart = (event) => {
-    const { newData, index } = event
-
-    cart[index] = {
-      ...newData,
-      label: 'edit',
-    }
-  }
-
-  return {
-    cart,
-    cartDeleted,
-    cartErrors,
-    onClearCart,
-    onClearCartDelete,
-    onAddCart,
-    onEditCart,
-    onDeleteCart,
-    totalCartPrice,
-  }
-}

resources/js/pages/Purchases/Create.vue

@@ -2,9 +2,9 @@
 import { computed, provide } from 'vue'
 import { optionStatus } from './config'
 import { cartTable } from './config'
+import Cart from '@/pages/Components/Cart.vue'
+import { useCart } from '@/pages/Composables/useCart'
 import Details from './Components/Details.vue'
-import Cart from './Components/Cart.vue'
-import { useCart } from './Composables/useCart'
 import { useDialog } from './Composables/useDialog'
 import { useForm } from '@/composables/useForm'
 import HistoryProduct from './Components/HistoryProduct.vue'

resources/js/pages/Purchases/Edit.vue

@@ -2,9 +2,9 @@
 import { computed } from 'vue'
 import { optionStatus } from './config'
 import { cartTable } from './config'
+import Cart from '@/pages/Components/Cart.vue'
+import { useCart } from '@/pages/Composables/useCart'
 import Details from './Components/Details.vue'
-import Cart from './Components/Cart.vue'
-import { useCart } from './Composables/useCart'
 import { useDialog } from './Composables/useDialog'
 import { useForm } from '@/composables/useForm'
 import HistoryProduct from './Components/HistoryProduct.vue'

resources/js/pages/Purchases/Index.vue

@@ -64,7 +64,7 @@ defineProps({
 
           <AppButtonLink
             v-else
-            icon="pi pi-eye"
+            icon="pi pi-chevron-right"
             class="p-button-icon-only p-button-rounded p-button-text"
             v-tooltip.bottom="'Lihat Detail Pembelian'"
             :href="route('purchases.show', data.id)"

resources/js/pages/Purchases/Show.vue

@@ -2,8 +2,8 @@
 import { useForm } from '@/composables/useForm'
 import { IDRCurrencyFormat } from '@/utils/helpers'
 import { cartTable } from './config'
-import Cart from './Components/Cart.vue'
-import { useCart } from './Composables/useCart'
+import Cart from '@/pages/Components/Cart.vue'
+import { useCart } from '@/pages/Composables/useCart'
 import AppButtonLink from '@/components/AppButtonLink.vue'
 import DashboardLayout from '@/layouts/Dashboard/DashboardLayout.vue'
 

resources/js/pages/Sales/Components/Cart.vue

@@ -1,110 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import { IDRCurrencyFormat } from '@/utils/helpers'
-import AppInputNumber from '@/components/AppInputNumber.vue'
-import AppInputText from '@/components/AppInputText.vue'
-
-defineProps({
-  title: String,
-  headerTable: {
-    required: true,
-    type: Array,
-  },
-  cart: {
-    required: true,
-    type: Array,
-  },
-  btnEditShow: {
-    default: true,
-    type: Boolean,
-  },
-  btnDeleteShow: {
-    default: true,
-    type: Boolean,
-  },
-  btnPpnDisabled: {
-    default: false,
-    type: Boolean,
-  },
-  checkedPpn: Boolean,
-})
-
-const editingRows = ref([])
-</script>
-
-<template>
-  <DataTable
-    responsiveLayout="scroll"
-    columnResizeMode="expand"
-    edit-mode="row"
-    data-key="number"
-    :value="cart"
-    :rowHover="true"
-    :stripedRows="true"
-    v-model:editing-rows="editingRows"
-    @row-edit-save="$emit('edit', $event)"
-  >
-    <template #header>
-      <h2 class="text-2xl font-bold">{{ title }}</h2>
-
-      <div class="field-checkbox flex justify-content-end gap-2">
-        <label class="text-sm" for="ppn">
-          Semua produk dikenakan PPN {{ $page.props.ppn }}%
-        </label>
-        <input
-          type="checkbox"
-          id="ppn"
-          :disabled="btnPpnDisabled"
-          :checked="checkedPpn"
-          @input="$emit('update:checkedPpn', $event.target.checked)"
-        />
-      </div>
-    </template>
-
-    <Column
-      v-for="value in headerTable"
-      :key="value.field"
-      :field="value.field"
-      :header="value.header"
-    >
-      <template #body="{ data, field }">
-        <template v-if="field == 'price'">
-          {{ IDRCurrencyFormat(data[field]) }}
-        </template>
-
-        <template v-else> {{ data[field] }} </template>
-      </template>
-
-      <template #editor="{ data, field }">
-        <AppInputNumber
-          v-if="field == 'price'"
-          label="Harga"
-          placeholder="harga"
-          v-model="data[field]"
-        />
-
-        <AppInputText
-          v-if="field == 'qty'"
-          label="Kuantitas"
-          placeholder="kuantitas"
-          type="number"
-          v-model="data[field]"
-        />
-      </template>
-    </Column>
-
-    <Column v-if="btnEditShow" :row-editor="true" />
-
-    <Column>
-      <template #body="{ index }">
-        <Button
-          v-if="btnDeleteShow"
-          icon="pi pi-trash"
-          class="p-button-icon-only p-button-rounded p-button-text"
-          v-tooltip.bottom="'hapus'"
-          @click="$emit('delete', index)"
-        />
-      </template>
-    </Column>
-  </DataTable>
-</template>

resources/js/pages/Sales/Create.vue

@@ -3,9 +3,9 @@ import { computed, watchEffect } from 'vue'
 import { profit, ppn as ppnUtils } from '@/utils/helpers'
 import { optionStatus } from './config'
 import { cartTable } from './config'
+import Cart from '@/pages/Components/Cart.vue'
+import { useCart } from '@/pages/Composables/useCart'
 import Details from './Components/Details.vue'
-import Cart from './Components/Cart.vue'
-import { useCart } from './Composables/useCart'
 import { useDialog } from './Composables/useDialog'
 import { useForm } from '@/composables/useForm'
 import AppInputText from '@/components/AppInputText.vue'

resources/js/pages/Sales/Index.vue

@@ -55,7 +55,7 @@ defineProps({
       <Column>
         <template #body="{ data }">
           <AppButtonLink
-            icon="pi pi-eye"
+            icon="pi pi-chevron-right"
             class="p-button-icon-only p-button-rounded p-button-text"
             v-tooltip.bottom="'Lihat Detail Penjualan'"
             :href="route('sales.show', data.id)"

resources/js/pages/Sales/Show.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { Inertia } from '@inertiajs/inertia'
 import { useForm } from '@/composables/useForm'
 import { IDRCurrencyFormat } from '@/utils/helpers'
 import { cartTable } from './config'
-import Cart from './Components/Cart.vue'
-import { useCart } from './Composables/useCart'
+import Cart from '@/pages/Components/Cart.vue'
+import { useCart } from '@/pages/Composables/useCart'
 import AppButtonLink from '@/components/AppButtonLink.vue'
 import DashboardLayout from '@/layouts/Dashboard/DashboardLayout.vue'
 

routes/web.php

@@ -57,6 +57,11 @@ Route::middleware(["auth", "verified", "checkBlocked"])->group(function () {
         "historyPurchaseExcel",
     ])->name("customers.history-purchase.excel");
 
+    Route::get("/customers/history-purchase/{sale}", [
+        CustomerController::class,
+        "historyPurchase",
+    ])->name("customers.history-purchases");
+
     Route::resource("/customers", CustomerController::class);
 
     Route::get("/purchases/pdf/invoice/{purchase}", [