feat: breadcrumbs customer history purchase

resources/js/pages/Customers/HistoryPurchase.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { Link } from '@inertiajs/inertia-vue3'
 import { useForm } from '@/composables/useForm'
 import { IDRCurrencyFormat } from '@/utils/helpers'
 import { cartTable } from './config'
@@ -25,6 +26,8 @@ const form = useForm({
 })
 
 const { cart, totalCartPrice } = useCart(form, props.saleDetail)
+
+const back = () => history.back()
 </script>
 
 <template>
@@ -32,6 +35,16 @@ const { cart, totalCartPrice } = useCart(form, props.saleDetail)
     <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">

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-eye"
-              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

@@ -113,7 +113,7 @@ 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('customers.history-purchases', data.id)"

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/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)"