feat: history purchases

app/Http/Controllers/CustomerController.php

@@ -2,9 +2,10 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Sale;
+use App\Models\Customer;
 use App\Http\Requests\Customer\StoreCustomerRequest;
 use App\Http\Requests\Customer\UpdateCustomerRequest;
-use App\Models\Customer;
 
 class CustomerController extends Controller
 {
@@ -70,7 +71,23 @@ class CustomerController extends Controller
      */
     public function show(Customer $customer)
     {
-        //
+        return inertia("Customers/Show", [
+            "customer" => $customer,
+            "historyPurchase" => $customer
+                ->sales()
+                ->latest()
+                ->paginate(10)
+                ->withQueryString()
+                ->through(
+                    fn($sale) => [
+                        "id" => $sale->id,
+                        "createdAt" => $sale->created_at,
+                        "number" => $sale->number,
+                        "status" => $sale->status,
+                        "ppn" => $sale->ppn,
+                    ]
+                ),
+        ]);
     }
 
     /**

resources/js/pages/Customers/Index.vue

@@ -76,20 +76,29 @@ const onDelete = (data) => {
 
       <Column>
         <template #body="{ data }">
-          <AppButtonLink
-            icon="pi pi-pencil"
-            class="p-button-icon-only p-button-rounded p-button-text"
-            v-tooltip.bottom="'Ubah Pelanggan'"
-            :href="route('customers.edit', data.id)"
-          />
+          <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"
+              v-tooltip.bottom="'Ubah Pelanggan'"
+              :href="route('customers.edit', data.id)"
+            />
 
-          <Button
-            v-if="!data.isUsed"
-            icon="pi pi-trash"
-            class="p-button-icon-only p-button-rounded p-button-text"
-            v-tooltip.bottom="'Hapus Pelanggan'"
-            @click="onDelete(data)"
-          />
+            <Button
+              v-if="!data.isUsed"
+              icon="pi pi-trash"
+              class="p-button-icon-only p-button-rounded p-button-text"
+              v-tooltip.bottom="'Hapus Pelanggan'"
+              @click="onDelete(data)"
+            />
+          </div>
         </template>
       </Column>
     </DataTable>

resources/js/pages/Customers/Show.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { detailTable } from './config'
+import AppButtonLink from '@/components/AppButtonLink.vue'
+import DashboardLayout from '@/layouts/Dashboard/DashboardLayout.vue'
+
+defineProps({
+  customer: Object,
+  historyPurchase: Object,
+})
+</script>
+
+<template>
+  <DashboardLayout title="">
+    <div class="grid">
+      <div class="col-12">
+        <Card>
+          <template #title>
+            <h2 class="text-2xl font-bold">History Pembelian</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>
+          </template>
+        </Card>
+      </div>
+
+      <div class="col-12">
+        <DataTable
+          responsiveLayout="scroll"
+          columnResizeMode="expand"
+          :value="historyPurchase.data"
+          :rowHover="true"
+          :stripedRows="true"
+          @row-click="detail($event.data)"
+        >
+          <Column
+            v-for="value in detailTable"
+            :key="value.field"
+            :field="value.field"
+            :header="value.header"
+          />
+
+          <Column>
+            <template #body="{ data }">
+              <AppButtonLink
+                icon="pi pi-eye"
+                class="p-button-icon-only p-button-rounded p-button-text"
+                v-tooltip.bottom="'Lihat Detail Penjualan'"
+                :href="route('sales.show', data.id)"
+              />
+            </template>
+          </Column>
+        </DataTable>
+      </div>
+    </div>
+  </DashboardLayout>
+</template>

resources/js/pages/Customers/config.js

@@ -4,3 +4,10 @@ export const indexTable = [
   { field: 'phone', header: 'No HP' },
   { field: 'npwp', header: 'NPWP' },
 ]
+
+export const detailTable = [
+  { field: 'createdAt', header: 'Tanggal' },
+  { field: 'number', header: 'Nomor Pembelian' },
+  { field: 'ppn', header: 'PPN' },
+  { field: 'status', header: 'Status' },
+]

resources/js/pages/Sales/Show.vue

@@ -29,7 +29,7 @@ const { cart, totalCartPrice } = useCart(form, props.saleDetail)
 </script>
 
 <template>
-  <DashboardLayout title="Lihat Pembelian">
+  <DashboardLayout title="Detail Penjualan">
     <DynamicDialog />
 
     <div class="grid">
@@ -38,7 +38,7 @@ const { cart, totalCartPrice } = useCart(form, props.saleDetail)
           <div class="col-12">
             <Card>
               <template #title>
-                <h2 class="text-2xl font-bold">Detail Pembelian</h2>
+                <h2 class="text-2xl font-bold">Detail Penjualan</h2>
               </template>
               <template #content>
                 <div class="grid">