From 7e9401bbfcdaef06a0a5747dab53cf49761dfe18 Mon Sep 17 00:00:00 2001
From: ISMAIL MASSERAN <ismail@koppkb.com>
Date: Mon, 19 Oct 2026 12:52:53 +0800
Subject: [PATCH] DONE: fix invoice not found issue, UI enhancement

---
 src/components/bid-record/BidRecordList.vue | 125 +++--
 src/components/cart/CartListNew.vue         | 542 ++++++++------------
 src/components/home/CurrentKarat.vue        |   9 +-
 src/components/home/LelongNext.vue          |  14 +-
 src/components/home/LelongToday.vue         |  16 +-
 src/components/layouts/TheHeader.vue        | 233 ++++-----
 src/components/list/ListItem.vue            |   2 +
 src/components/pay/SelectOutlet.vue         |  33 +-
 src/components/pay/ThePay.vue               |  48 +-
 src/components/pay/ThePayCdm.vue            |  82 +--
 src/components/result/ResultDetail.vue      | 399 ++++++--------
 src/components/result/ResultMain.vue        |  56 +-
 src/router/index.js                         |   6 +-
 src/store/modules/cart.js                   |  41 ++
 14 files changed, 672 insertions(+), 934 deletions(-)
 create mode 100644 src/store/modules/cart.js

diff --git a/src/components/bid-record/BidRecordList.vue b/src/components/bid-record/BidRecordList.vue
index c497544..8096136 100644
--- a/src/components/bid-record/BidRecordList.vue
+++ b/src/components/bid-record/BidRecordList.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-      <VueSidebarMenuAkahon />
+    <VueSidebarMenuAkahon />
   </div>
   <div v-if="isLoading" class="fadein animation-duration-400">
     <div class="flex align-items-center justify-content-center container-height">
@@ -16,24 +16,25 @@
           <template #title>
             <div class="grid justify-content-between">
               <div class="font-normal">Rekod Bidaan Hari Ini : <span class="white-space-nowrap">{{ date }}</span></div>
-              <div class="text-xs align-self-center fst-italic fw-lighter text-danger">*Sistem akan menjana pemenang setelah masa bidaan tamat pada {{lelongDetail.masatamat_lelong}}</div>
+              <div class="text-xs align-self-center fst-italic fw-lighter text-danger">*Sistem akan menjana pemenang
+                setelah masa bidaan tamat pada {{ lelongDetail.masatamat_lelong }}</div>
             </div>
           </template>
           <template #content>
-            <Accordion :multiple="true">
-              <AccordionTab v-for="bid in listBid" v-bind:key="bid">
+            <Accordion :multiple="true" class="bid-accordion">
+              <AccordionTab v-for="bid in listBid" :key="bid.caw_name || bid.id">
                 <template #header>
-                  <div class="flex justify-content-between w-100">
-                    <div class="align-self-center" style="margin: 5px">
+                  <div class="bid-accordion-header">
+                    <span class="bid-accordion-title">
                       {{ bid.caw_name }}
-                    </div>
-                    <div class="style-info">
+                    </span>
+                    <span class="style-info">
                       Jumlah RM{{
                         bid.total_bidaan
                           ?.toString()
                           .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                       }}
-                    </div>
+                    </span>
                   </div>
                 </template>
                 <div class="overflow-x-auto">
@@ -46,19 +47,12 @@
                         <td>Berat</td>
                         <td style="min-width: 120px">Harga Bida</td>
                       </tr>
-                      <tr
-                        v-for="(item, index) in bid.lelongbid"
-                        v-bind:key="item"
-                      >
+                      <tr v-for="(item, index) in bid.lelongbid" v-bind:key="item">
                         <td>{{ index + 1 }}</td>
                         <td>
-                          <a
-                            href="#"
-                            data-bs-toggle="modal"
-                            data-bs-target="#marhunModal"
-                            v-on:click="marhunModal(item)"
-                            >{{ item.norujukan }}</a
-                          >
+                          <a href="#" data-bs-toggle="modal" data-bs-target="#marhunModal"
+                            v-on:click="marhunModal(item)">{{
+                            item.norujukan }}</a>
                         </td>
                         <td>{{ item.masa_bidaan }}</td>
                         <td>{{ item.berat }}g</td>
@@ -91,9 +85,7 @@
       </div>
     </div>
     <div v-else>
-      <div
-        class="flex align-items-center justify-content-center container-height"
-      >
+      <div class="flex align-items-center justify-content-center container-height">
         <div class="grid justify-content-center">
           <div class="col-12 mb-4 text-center">
             <i class="pi pi-book text-8xl text-400"></i>
@@ -102,43 +94,28 @@
             <span class="text-400">Tiada Rekod Bidaan Hari Ini.</span>
           </div>
           <div class="col-12 text-center">
-            <span class="text-400"
-              >Sila rujuk halaman
+            <span class="text-400">Sila rujuk halaman
               <router-link v-bind:to="{ name: 'home' }">Utama</router-link>
-              untuk jadual lelongan.</span
-            >
+              untuk jadual lelongan.</span>
           </div>
         </div>
       </div>
     </div>
 
     <!-- MARHUN MODAL -->
-    <div
-      class="modal fade"
-      id="marhunModal"
-      tabindex="-1"
-      aria-labelledby="marhunModalLabel"
-      aria-hidden="true"
-      data-bs-backdrop="static"
-    >
+    <div class="modal fade" id="marhunModal" tabindex="-1" aria-labelledby="marhunModalLabel" aria-hidden="true"
+      data-bs-backdrop="static">
       <div class="modal-dialog modal-xl modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="marhunModalLabel">
               {{ theData.norujukan }}
             </h5>
-            <button
-              type="button"
-              class="btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
             <div class="grid">
-              <div
-                class="col-12 lg:col-6"
-                style="
+              <div class="col-12 lg:col-6" style="
                   display: flex;
                   justify-content: center;
                   align-items: center;
@@ -146,14 +123,10 @@
                   min-width: 300px;
                   max-height: 600px;
                   max-width: 600px;
-                "
-              >
-                <item-master-image-modal
-                  v-if="theData.filemarhun"
-                  v-bind:key="reloadImageComponent"
+                ">
+                <item-master-image-modal v-if="theData.filemarhun" v-bind:key="reloadImageComponent"
                   v-bind:norujukan="theData.norujukan"
-                  v-bind:filemarhun_id="theData.filemarhun[0].id"
-                ></item-master-image-modal>
+                  v-bind:filemarhun_id="theData.filemarhun[0].id"></item-master-image-modal>
                 <p v-else style="text-align: center; width: 100%">
                   Image Unavailable
                 </p>
@@ -169,10 +142,7 @@
                         <th style="min-width: 42px">Berat</th>
                         <th style="min-width: 102px">Harga Asas</th>
                       </tr>
-                      <tr
-                        v-for="(marhun, index) in theData.lelongbidmarhun"
-                        v-bind:key="marhun"
-                      >
+                      <tr v-for="(marhun, index) in theData.lelongbidmarhun" v-bind:key="marhun">
                         <td>{{ index + 1 }}</td>
                         <td>{{ marhun.marhun }}</td>
                         <td>{{ marhun.karat }}</td>
@@ -218,11 +188,7 @@
             </div>
           </div>
           <div class="modal-footer">
-            <Button
-              class="p-button-sm"
-              label="Kembali"
-              data-bs-dismiss="modal"
-            />
+            <Button class="p-button-sm" label="Kembali" data-bs-dismiss="modal" />
           </div>
         </div>
       </div>
@@ -304,17 +270,46 @@ export default {
   min-height: 70vh;
 }
 
+.bid-accordion :deep(.p-accordion-header-link) {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.bid-accordion :deep(.p-accordion-toggle-icon) {
+  flex-shrink: 0;
+  margin-right: 0;
+}
+
+.bid-accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 0.75rem;
+}
+
+.bid-accordion-title {
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .style-info {
   background: #e4f8f0;
   border: solid #1ea97c;
-  border-width: 0px;
+  border-width: 0.1px;
   color: #1ea97c;
-  font-size: 1rem;
+  font-size: 0.95rem;
   align-items: center;
-  display: flex;
-  padding: 0.4rem 0.9rem;
+  display: inline-flex;
+  padding: 0.35rem 0.75rem;
   margin: 0;
   border-radius: 6px;
-  font-weight: 400;
+  font-weight: 700;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/cart/CartListNew.vue b/src/components/cart/CartListNew.vue
index 577e41c..e6cd442 100644
--- a/src/components/cart/CartListNew.vue
+++ b/src/components/cart/CartListNew.vue
@@ -1,18 +1,12 @@
 <template>
   <div v-if="isLoading" class="fadein animation-duration-400">
-    <div
-      class="flex align-items-center justify-content-center container-height"
-    >
+    <div class="flex align-items-center justify-content-center container-height">
       <div class="spinner-border" role="status">
         <span class="visually-hidden">Loading...</span>
       </div>
     </div>
   </div>
-  <div
-    v-else
-    style="min-height: 70vh"
-    class="container fadein animation-duration-400"
-  >
+  <div v-else style="min-height: 70vh" class="container fadein animation-duration-400">
     <div v-if="isSuccess" class="row">
       <div class="col-12 lg:col-9">
         <Card>
@@ -20,24 +14,24 @@
             <div class="font-normal">Senarai Troli</div>
           </template>
           <template #content>
-            <Accordion :multiple="true">
-              <AccordionTab v-for="item in listItems" v-bind:key="item">
+            <Accordion :multiple="true" class="cart-accordion">
+              <AccordionTab v-for="item in listItems" :key="item.caw_name || item.id">
                 <template #header>
-                  <div class="flex justify-content-between w-100">
-                    <div class="align-self-center" style="margin: 5px">
+                  <div class="cart-accordion-header">
+                    <span class="cart-accordion-title">
                       {{ item.caw_name }}
-                    </div>
-                    <div class="style-info">
+                    </span>
+                    <span class="style-info">
                       Jumlah RM{{
                         item.total_bidaan
                           ?.toString()
                           .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                       }}
-                    </div>
+                    </span>
                   </div>
                 </template>
                 <div class="overflow-x-auto">
-                  <table class="table text-center table-bordered table-hover">
+                  <table class="table text-center table-bordered table-hover mb-0">
                     <tbody>
                       <tr class="table-light">
                         <td>Bil</td>
@@ -48,18 +42,11 @@
                         <td style="min-width: 170px">Tambahan Bidaan</td>
                         <td>Tindakan</td>
                       </tr>
-                      <tr
-                        v-for="(surat, index) in item.lelongbid"
-                        :key="surat.id"
-                      >
+                      <tr v-for="(surat, index) in item.lelongbid" :key="surat.id">
                         <td>{{ index + 1 }}</td>
                         <td>
-                          <a
-                            href="#"
-                            data-bs-toggle="modal"
-                            data-bs-target="#marhunModal"
-                            v-on:click="openModal(surat)"
-                          >
+                          <a href="#" data-bs-toggle="modal" data-bs-target="#marhunModal"
+                            v-on:click="openModal(surat)">
                             {{ surat.norujukan }}
                           </a>
                         </td>
@@ -78,28 +65,18 @@
                               .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                           }}
                         </td>
-                        <th>
+                        <td class="font-bold">
                           RM{{
                             surat.tambahanbidaan
                               ?.toString()
                               .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                           }}
-                        </th>
-                        <td>
-                          <Button
-                            icon="pi pi-trash"
-                            data-bs-toggle="modal"
-                            data-bs-target="#deleteModal"
-                            v-on:click="openModal(surat)"
-                            class="p-button-text p-button-danger"
-                          />
-                          <Button
-                            icon="pi pi-file-edit"
-                            data-bs-toggle="modal"
-                            data-bs-target="#editModal"
-                            v-on:click="openModal(surat)"
-                            class="p-button-warning p-button-text"
-                          />
+                        </td>
+                        <td class="white-space-nowrap">
+                          <Button icon="pi pi-trash" data-bs-toggle="modal" data-bs-target="#deleteModal"
+                            v-on:click="openModal(surat)" class="p-button-text p-button-danger" />
+                          <Button icon="pi pi-file-edit" data-bs-toggle="modal" data-bs-target="#editModal"
+                            v-on:click="openModal(surat)" class="p-button-warning p-button-text" />
                         </td>
                       </tr>
                       <tr style="text-transform: uppercase">
@@ -130,15 +107,11 @@
           </template>
           <template #content>
             <div>
-              <i class="pi pi-paperclip text-primary"
-                ><span class="ml-1">Jumlah Surat</span></i
-              >
+              <i class="pi pi-paperclip text-primary"><span class="ml-1">Jumlah Surat</span></i>
               <p>{{ masterTotalSurat }}</p>
             </div>
             <div>
-              <i class="pi pi-wallet text-primary"
-                ><span class="ml-1">Jumlah Kesuluruhan Bidaan</span></i
-              >
+              <i class="pi pi-wallet text-primary"><span class="ml-1">Jumlah Kesuluruhan Bidaan</span></i>
 
               <p class="font-bold text-xl">
                 RM{{
@@ -148,17 +121,10 @@
                 }}
               </p>
             </div>
-            <Button
-              label="Teruskan"
-              class="p-button-sm w-full"
-              v-on:click="openModalNew()"
-            />
+            <Button label="Teruskan" class="p-button-sm w-full" v-on:click="openModalNew()" />
             <div class="bounce-up-down">
               <div class="info-teruskan-icon">
-                <i
-                  class="pi pi-arrow-circle-up text-3xl"
-                  style="color: #ff5757"
-                ></i>
+                <i class="pi pi-arrow-circle-up text-3xl" style="color: #ff5757"></i>
               </div>
               <div class="info-teruskan">
                 Sila klik 'Teruskan' jika pasti untuk meneruskan bidaan ini.
@@ -169,9 +135,7 @@
       </div>
     </div>
     <div v-else>
-      <div
-        class="flex align-items-center justify-content-center container-height"
-      >
+      <div class="flex align-items-center justify-content-center container-height">
         <div class="grid justify-content-center">
           <div class="col-12 mb-4 text-center">
             <i class="pi pi-shopping-cart text-8xl text-400"></i>
@@ -180,43 +144,28 @@
             <span class="text-400">Tiada Data Dalam Troli.</span>
           </div>
           <div class="col-12 text-center">
-            <span class="text-400"
-              >Sila rujuk halaman
+            <span class="text-400">Sila rujuk halaman
               <router-link v-bind:to="{ name: 'list' }">Senarai</router-link>
-              untuk tambah item ke troli.</span
-            >
+              untuk tambah item ke troli.</span>
           </div>
         </div>
       </div>
     </div>
     <!-- MARHUN MODAL -->
-    <div
-      class="modal fade"
-      id="marhunModal"
-      tabindex="-1"
-      aria-labelledby="marhunModalLabel"
-      aria-hidden="true"
-      data-bs-backdrop="static"
-    >
+    <div class="modal fade" id="marhunModal" tabindex="-1" aria-labelledby="marhunModalLabel" aria-hidden="true"
+      data-bs-backdrop="static">
       <div class="modal-dialog modal-xl modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="marhunModalLabel">
               {{ theSurat.norujukan }}
             </h5>
-            <button
-              type="button"
-              class="btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
 
           <div class="modal-body">
             <div class="grid">
-              <div
-                class="col-12 lg:col-6"
-                style="
+              <div class="col-12 lg:col-6" style="
                   display: flex;
                   justify-content: center;
                   align-items: center;
@@ -224,14 +173,10 @@
                   min-width: 300px;
                   max-height: 600px;
                   max-width: 600px;
-                "
-              >
-                <item-master-image-modal
-                  v-if="theSurat.filemarhun"
-                  v-bind:key="reloadImageComponent"
+                ">
+                <item-master-image-modal v-if="theSurat.filemarhun" v-bind:key="reloadImageComponent"
                   v-bind:norujukan="theSurat.norujukan"
-                  v-bind:filemarhun_id="theSurat.filemarhun[0].id"
-                ></item-master-image-modal>
+                  v-bind:filemarhun_id="theSurat.filemarhun[0].id"></item-master-image-modal>
                 <p v-else style="text-align: center; width: 100%">
                   Image Unavailable
                 </p>
@@ -247,10 +192,7 @@
                         <td style="min-width: 42px">Berat</td>
                         <td style="min-width: 102px">Harga Asas</td>
                       </tr>
-                      <tr
-                        v-for="(data, index) in theSurat.lelongbidmarhun"
-                        v-bind:key="data"
-                      >
+                      <tr v-for="(data, index) in theSurat.lelongbidmarhun" v-bind:key="data">
                         <td>{{ index + 1 }}</td>
                         <td>{{ data.marhun }}</td>
                         <td>{{ data.karat }}</td>
@@ -292,59 +234,30 @@
                     </div>
                   </div>
                 </div>
-                <Button
-                  icon="pi pi-trash"
-                  label="Padam Surat"
-                  data-bs-toggle="modal"
-                  iconPos="right"
-                  data-bs-target="#deleteModal"
-                  v-on:click="openModal(theSurat)"
-                  class="p-button-text p-button-danger"
-                />
-                <Button
-                  icon="pi pi-file-edit"
-                  label="Ubah Bidaan"
-                  data-bs-toggle="modal"
-                  iconPos="right"
-                  data-bs-target="#editModal"
-                  v-on:click="openModal(theSurat)"
-                  class="p-button-warning p-button-text"
-                />
+                <Button icon="pi pi-trash" label="Padam Surat" data-bs-toggle="modal" iconPos="right"
+                  data-bs-target="#deleteModal" v-on:click="openModal(theSurat)"
+                  class="p-button-text p-button-danger" />
+                <Button icon="pi pi-file-edit" label="Ubah Bidaan" data-bs-toggle="modal" iconPos="right"
+                  data-bs-target="#editModal" v-on:click="openModal(theSurat)" class="p-button-warning p-button-text" />
               </div>
             </div>
           </div>
           <div class="modal-footer">
-            <Button
-              class="p-button-sm"
-              label="Kembali"
-              data-bs-dismiss="modal"
-            />
+            <Button class="p-button-sm" label="Kembali" data-bs-dismiss="modal" />
           </div>
         </div>
       </div>
     </div>
     <!-- EDIT MODAL -->
-    <div
-      class="modal fade"
-      id="editModal"
-      tabindex="-1"
-      aria-labelledby="editModalLabel"
-      aria-hidden="true"
-      data-bs-backdrop="static"
-    >
+    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true"
+      data-bs-backdrop="static">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="editModalLabel">
               {{ theSurat.norujukan }}
             </h5>
-            <button
-              type="button"
-              class="btn-close"
-              ref="editClose"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
+            <button type="button" class="btn-close" ref="editClose" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
 
           <div class="modal-body">
@@ -352,18 +265,13 @@
               <div class="col">
                 <div class="row justify-content-center">
                   <div class="col-6">
-                    <label class="col-form-label text-end"
-                      >Jumlah Harga Asas (A)</label
-                    >
+                    <label class="col-form-label text-end">Jumlah Harga Asas (A)</label>
                   </div>
                   <div class="col-6">
                     <div class="input-group mb-3">
                       <span class="input-group-text">RM</span>
-                      <div
-                        style="background-color: #e9ecef; padding-bottom: 0px"
-                        class="form-control text-start justify-content-start"
-                        disabled
-                      >
+                      <div style="background-color: #e9ecef; padding-bottom: 0px"
+                        class="form-control text-start justify-content-start" disabled>
                         {{
                           theSurat.hargaasas
                             ?.toString()
@@ -375,19 +283,12 @@
                 </div>
                 <div class="row justify-content-center">
                   <div class="col-6">
-                    <label class="col-form-label text-end"
-                      >Jumlah Harga Bida (B)</label
-                    >
+                    <label class="col-form-label text-end">Jumlah Harga Bida (B)</label>
                   </div>
                   <div class="col-6">
                     <div class="input-group mb-3">
                       <span class="input-group-text">RM</span>
-                      <input
-                        type="text"
-                        class="form-control"
-                        v-model="jumlahBidaan"
-                        v-on:keyup="calcDiff()"
-                      />
+                      <input type="text" class="form-control" v-model="jumlahBidaan" v-on:keyup="calcDiff()" />
                     </div>
                   </div>
                 </div>
@@ -422,43 +323,21 @@
             </div>
           </div>
           <div class="modal-footer">
-            <Button
-              class="p-button-sm p-button-danger m-1"
-              label="Batal"
-              data-bs-dismiss="modal"
-            />
-            <Button
-              class="p-button-sm p-button-success m-1"
-              icon="pi pi-file-edit"
-              iconPos="right"
-              label="Ubah"
-              :loading="isLoadingUbah"
-              @click="updateItem(theSurat)"
-            />
+            <Button class="p-button-sm p-button-danger m-1" label="Batal" data-bs-dismiss="modal" />
+            <Button class="p-button-sm p-button-success m-1" icon="pi pi-file-edit" iconPos="right" label="Ubah"
+              :loading="isLoadingUbah" @click="updateItem(theSurat)" />
           </div>
         </div>
       </div>
     </div>
     <!-- DELETE MODAL -->
-    <div
-      class="modal fade"
-      id="deleteModal"
-      tabindex="-1"
-      aria-labelledby="deleteModalLabel"
-      aria-hidden="true"
-      data-bs-backdrop="static"
-      data-bs-keyboard="false"
-    >
+    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true"
+      data-bs-backdrop="static" data-bs-keyboard="false">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content text-center">
           <div class="modal-header">
-            <button
-              type="button"
-              class="btn-close"
-              ref="deleteClose"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
+            <button type="button" class="btn-close" ref="deleteClose" data-bs-dismiss="modal"
+              aria-label="Close"></button>
           </div>
 
           <div class="modal-body">
@@ -491,44 +370,22 @@
             </p>
           </div>
           <div class="modal-footer">
-            <Button
-              class="p-button-sm p-button-danger mr-2"
-              label="Batal"
-              data-bs-dismiss="modal"
-            />
-            <Button
-              class="p-button-sm p-button-success"
-              icon="pi pi-trash"
-              iconPos="right"
-              label="Padam"
-              :loading="isLoadingPadam"
-              @click="deleteItem(theSurat)"
-            />
+            <Button class="p-button-sm p-button-danger mr-2" label="Batal" data-bs-dismiss="modal" />
+            <Button class="p-button-sm p-button-success" icon="pi pi-trash" iconPos="right" label="Padam"
+              :loading="isLoadingPadam" @click="deleteItem(theSurat)" />
           </div>
         </div>
       </div>
     </div>
     <!-- DAFTAR BIDAAN MODAL -->
-    <div
-      class="modal fade"
-      id="bidModal"
-      tabindex="-1"
-      aria-labelledby="bidModalLabel"
-      aria-hidden="true"
-      data-bs-backdrop="static"
-      data-bs-keyboard="false"
-    >
+    <div class="modal fade" id="bidModal" tabindex="-1" aria-labelledby="bidModalLabel" aria-hidden="true"
+      data-bs-backdrop="static" data-bs-keyboard="false">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content text-center">
           <div class="modal-header">
             <h5 class="modal-title" id="bidModalLabel">Daftar Bidaan</h5>
-            <button
-              type="button"
-              class="btn-close"
-              ref="daftarBidaanClose"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
+            <button type="button" class="btn-close" ref="daftarBidaanClose" data-bs-dismiss="modal"
+              aria-label="Close"></button>
           </div>
 
           <div class="modal-body">
@@ -541,11 +398,7 @@
                 jam 4:00pm hari ini.
                 <p>Jika tidak selesai, saya akan dibanned.</p>
               </div>
-              <div
-                class="alert alert-danger"
-                role="alert"
-                v-if="v$.akadLelong.$error"
-              >
+              <div class="alert alert-danger" role="alert" v-if="v$.akadLelong.$error">
                 Sila tick kotak akad lelong sebelum meneruskan.
               </div>
             </div>
@@ -554,36 +407,20 @@
             </p>
           </div>
           <div class="modal-footer">
-            <button
-              type="submit"
-              class="btn btn-danger me-2"
-              data-bs-dismiss="modal"
-            >
+            <button type="submit" class="btn btn-danger me-2" data-bs-dismiss="modal">
               Tidak
             </button>
-            <button
-              type="submit"
-              class="btn btn-success"
-              v-on:click="bidderSelectBidItem()"
-            >
+            <button type="submit" class="btn btn-success" v-on:click="bidderSelectBidItem()">
               Ya
             </button>
-            <p
-              class="fst-italic mt-3 fw-lighter"
-              style="text-align: right; font-size: small"
-            ></p>
+            <p class="fst-italic mt-3 fw-lighter" style="text-align: right; font-size: small"></p>
           </div>
         </div>
       </div>
     </div>
     <!-- DAFTAR BIDAAN MODAL - PRIMEVUE -->
-    <Dialog
-      header="Daftar Bidaan"
-      v-model:visible="displayModal"
-      :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
-      :style="{ width: '50vw' }"
-      :modal="true"
-    >
+    <Dialog header="Daftar Bidaan" v-model:visible="displayModal" :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+      :style="{ width: '50vw' }" :modal="true">
       <div class="text-center">
         <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
         <h3>ADAKAH ANDA PASTI?</h3>
@@ -610,14 +447,14 @@
           </table>
         </div>
         <div class="mt-3 mb-1">
-          <label>
+          <label class="akad-checkbox">
             <input type="checkbox" v-model="akadLelong" />
             Saya bersetuju untuk membayar kesemua bidaan yang menang.
           </label>
         </div>
-        <InlineMessage v-if="v$.akadLelong.$error"
-          >Anda mestilah bersetuju dengan akad lelong.</InlineMessage
-        >
+        <InlineMessage v-if="showAkadError" severity="error">
+          Anda mestilah bersetuju dengan akad lelong.
+        </InlineMessage>
       </div>
       <div class="text-center mt-5">
         <p class="text-danger">
@@ -625,42 +462,25 @@
         </p>
       </div>
       <template #footer>
-        <Button
-          label="Tidak"
-          icon="pi pi-times"
-          iconPos="right"
-          @click="closeModalNew()"
-          class="p-button-text"
-        />
+        <Button label="Tidak" icon="pi pi-times" iconPos="right" @click="closeModalNew()" class="p-button-text" />
         <Button
           label="Ya"
           icon="pi pi-check"
           iconPos="right"
           :loading="isLoadingDaftar"
+          :disabled="!akadLelong"
           v-on:click="bidderSelectBidItem()"
         />
       </template>
     </Dialog>
     <!-- GAGAL DAFTAR BIDAAN MODAL -->
-    <div
-      class="modal fade"
-      id="gagalDaftarBidaanModal"
-      tabindex="-1"
-      aria-labelledby="gagalDaftarBidaanModalLabel"
-      aria-hidden="true"
-      data-bs-backdrop="static"
-      data-bs-keyboard="false"
-    >
+    <div class="modal fade" id="gagalDaftarBidaanModal" tabindex="-1" aria-labelledby="gagalDaftarBidaanModalLabel"
+      aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="gagalDaftarBidaanModalLabel"></h5>
-            <button
-              type="button"
-              class="btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
             <h1><i class="bi bi-x-circle text-danger"></i></h1>
@@ -669,11 +489,7 @@
             <p>Sila tambah surat ke dalam troli anda.</p>
           </div>
           <div class="modal-footer">
-            <button
-              type="submit"
-              class="btn btn-secondary"
-              data-bs-dismiss="modal"
-            >
+            <button type="submit" class="btn btn-secondary" data-bs-dismiss="modal">
               Kembali
             </button>
           </div>
@@ -685,9 +501,10 @@
 
 <script>
 import { useAuthenticationUserStore } from "@/store/modules/authentication";
+import { useCartStore } from "@/store/modules/cart";
 import axios from "axios";
 import useVuelidate from "@vuelidate/core";
-import { required, integer, numeric, minValue } from "@vuelidate/validators";
+import { required, integer, numeric, minValue, sameAs } from "@vuelidate/validators";
 import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
 
 export default {
@@ -711,7 +528,8 @@ export default {
       tambahanBidaan: "",
       reloadImageComponent: 0,
       jumlahBidaan: "",
-      akadLelong: null,
+      akadLelong: false,
+      showAkadError: false,
       hargaAsas: "",
       formDelete: {
         userId: "",
@@ -732,19 +550,30 @@ export default {
   validations() {
     return {
       tambahanBidaan: { required, numeric, integer, minValue: minValue(1) },
-      akadLelong: { required },
+      akadLelong: { checked: sameAs(true) },
     };
   },
+  watch: {
+    akadLelong(value) {
+      if (value) {
+        this.showAkadError = false;
+      }
+    },
+  },
   mounted: function () {
     this.listCart();
   },
   methods: {
     openModalNew() {
       this.displayModal = true;
-      this.akadLelong = null;
+      this.akadLelong = false;
+      this.showAkadError = false;
+      this.isLoadingDaftar = false;
     },
     closeModalNew() {
       this.displayModal = false;
+      this.akadLelong = false;
+      this.showAkadError = false;
     },
     listCart() {
       this.isLoading = true;
@@ -799,6 +628,7 @@ export default {
               allowOutsideClick: false,
               allowEscapeKey: false,
             });
+            useCartStore().fetchCount();
             this.$emit("reloadComponent");
           } else if (response.data.success == false) {
             console.log(response);
@@ -812,6 +642,7 @@ export default {
               timer: 5000,
               timerProgressBar: true,
             });
+            useCartStore().fetchCount();
             this.$emit("reloadComponent");
           }
         })
@@ -875,67 +706,13 @@ export default {
       }
     },
     bidderSelectBidItem() {
-      if (this.isSuccess == true) {
-        this.v$.$validate();
-        if (!this.v$.akadLelong.$error) {
-          // this.loading = true;
-          this.isLoadingDaftar = true;
-          axios
-            .post("/bidder/biditem", this.formRegisterBid, {
-              headers: {
-                Authorization: "Bearer " + useAuthenticationUserStore().token,
-              },
-            })
-            .then((response) => {
-              // console.log("bidderSelectBidItem", response);
-              if (response.data.success == "success") {
-                this.isLoadingDaftar = false;
-                this.$refs.daftarBidaanClose.click();
-                this.$swal.fire({
-                  icon: "success",
-                  title: "Bidaan Berjaya Didaftarkan",
-                  text: "Sila ke halaman rekod untuk senarai rekod bidaan.",
-                  confirmButtonColor: "#344871",
-                  confirmButtonText: "OK",
-                  allowOutsideClick: false,
-                  allowEscapeKey: false,
-                });
-                // this.loading = false;
-                this.$emit("reloadComponent");
-              } else {
-                this.isLoadingDaftar = false;
-                console.log(response);
-                this.$swal.fire({
-                  toast: true,
-                  icon: "error",
-                  title: "Gagal! Sila refresh page semula.",
-                  animation: false,
-                  position: "bottom",
-                  showConfirmButton: false,
-                  timer: 5000,
-                  timerProgressBar: true,
-                });
-              }
-            })
-            .catch((error) => {
-              // this.$refs.daftarBidaanClose.click();
-              // this.loading = false;
-              console.log(error);
-              this.$swal.fire({
-                toast: true,
-                icon: "error",
-                title: "Gagal! Sila refresh page semula.",
-                animation: false,
-                position: "bottom",
-                showConfirmButton: false,
-                timer: 5000,
-                timerProgressBar: true,
-              });
-            });
-        } else {
-        }
-      } else {
-        this.$refs.daftarBidaanClose.click();
+      if (!this.akadLelong) {
+        this.showAkadError = true;
+        return;
+      }
+
+      if (this.isSuccess != true) {
+        this.closeModalNew();
         this.$swal.fire({
           icon: "error",
           title: "Gagal Daftar Bidaan",
@@ -945,7 +722,61 @@ export default {
           allowOutsideClick: false,
           allowEscapeKey: false,
         });
+        return;
       }
+
+      this.showAkadError = false;
+      this.isLoadingDaftar = true;
+      axios
+        .post("/bidder/biditem", this.formRegisterBid, {
+          headers: {
+            Authorization: "Bearer " + useAuthenticationUserStore().token,
+          },
+        })
+        .then((response) => {
+          // console.log("bidderSelectBidItem", response);
+          this.isLoadingDaftar = false;
+          if (response.data.success == "success") {
+            this.closeModalNew();
+            this.$swal.fire({
+              icon: "success",
+              title: "Bidaan Berjaya Didaftarkan",
+              text: "Sila ke halaman rekod untuk senarai rekod bidaan.",
+              confirmButtonColor: "#344871",
+              confirmButtonText: "OK",
+              allowOutsideClick: false,
+              allowEscapeKey: false,
+            });
+            useCartStore().fetchCount();
+            this.$emit("reloadComponent");
+          } else {
+            console.log(response);
+            this.$swal.fire({
+              toast: true,
+              icon: "error",
+              title: "Gagal! Sila refresh page semula.",
+              animation: false,
+              position: "bottom",
+              showConfirmButton: false,
+              timer: 5000,
+              timerProgressBar: true,
+            });
+          }
+        })
+        .catch((error) => {
+          this.isLoadingDaftar = false;
+          console.log(error);
+          this.$swal.fire({
+            toast: true,
+            icon: "error",
+            title: "Gagal! Sila refresh page semula.",
+            animation: false,
+            position: "bottom",
+            showConfirmButton: false,
+            timer: 5000,
+            timerProgressBar: true,
+          });
+        });
     },
   },
 };
@@ -956,6 +787,49 @@ export default {
   min-height: 70vh;
 }
 
+.cart-accordion :deep(.p-accordion-header-link) {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.cart-accordion :deep(.p-accordion-toggle-icon) {
+  flex-shrink: 0;
+  margin-right: 0;
+}
+
+.cart-accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 0.75rem;
+}
+
+.cart-accordion-title {
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.style-info {
+  background: #e4f8f0;
+  border: solid #1ea97c;
+  border-width: 0.1px;
+  color: #1ea97c;
+  font-size: 0.95rem;
+  align-items: center;
+  display: inline-flex;
+  padding: 0.35rem 0.75rem;
+  margin: 0;
+  border-radius: 6px;
+  font-weight: 700;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 .info-teruskan {
   background: #ffe7e6;
   border: solid #ff5757;
@@ -976,4 +850,16 @@ export default {
 .icon-color {
   color: #ff5757;
 }
+
+.akad-checkbox {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.akad-checkbox input {
+  margin-top: 0.25rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/home/CurrentKarat.vue b/src/components/home/CurrentKarat.vue
index 55bbca7..d609a46 100644
--- a/src/components/home/CurrentKarat.vue
+++ b/src/components/home/CurrentKarat.vue
@@ -1,7 +1,7 @@
 <template>
   <Card style="margin-bottom: 1em">
     <template #title>
-      <div class="flex justify-content-center flex-wrap card-container">
+      <div class="flex align-items-center justify-content-center flex-wrap gap-2 card-container">
         <div class="font-normal">Harga Emas Lelongan</div>
         <Button
           class="button-standard p-button-rounded p-button-outlined"
@@ -37,9 +37,10 @@ export default {
 </script>
 
 <style scoped>
+/* Shrink icon-only button; reset theme padding so the icon stays centered. */
 .button-standard {
-  height: 30px !important;
-  width: 30px !important;
-  margin-top: 3px !important;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
 }
 </style>
diff --git a/src/components/home/LelongNext.vue b/src/components/home/LelongNext.vue
index 74f84c4..e483973 100644
--- a/src/components/home/LelongNext.vue
+++ b/src/components/home/LelongNext.vue
@@ -1,14 +1,15 @@
 <template>
   <Card style="margin-bottom: 1em">
     <template #title>
-      <div class="flex justify-content-center flex-wrap card-container purple-container">
+      <div class="flex align-items-center justify-content-center flex-wrap gap-2 card-container purple-container">
         <div class="font-normal">Lelongan Seterusnya</div>
         <Button
           class="button-standard p-button-rounded p-button-outlined"
           icon="pi pi-refresh"
           @click="toggleReloadComponent()"
-        /></div
-    ></template>
+        />
+      </div>
+    </template>
     <template #content>
       <lelong-next-detail v-bind:key="componentKey"></lelong-next-detail>
     </template>
@@ -37,9 +38,10 @@ export default {
 </script>
 
 <style scoped>
+/* Shrink icon-only button; reset theme padding so the icon stays centered. */
 .button-standard {
-  height: 30px !important;
-  width: 30px !important;
-  margin-top: 3px !important;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/home/LelongToday.vue b/src/components/home/LelongToday.vue
index 9696f09..3263b0a 100644
--- a/src/components/home/LelongToday.vue
+++ b/src/components/home/LelongToday.vue
@@ -1,13 +1,10 @@
 <template>
   <Card style="margin-bottom: 1em">
     <template #title>
-      <div class="flex justify-content-center flex-wrap card-container">
+      <div class="flex align-items-center justify-content-center flex-wrap gap-2 card-container">
         <div class="font-semibold">Lelongan Hari Ini : <span class="white-space-nowrap">{{ date }}</span></div>
-        <Button
-          class="button-standard p-button-rounded p-button-outlined"
-          icon="pi pi-refresh"
-          @click="toggleReloadComponent()"
-        />
+        <Button class="button-standard p-button-rounded p-button-outlined" icon="pi pi-refresh"
+          @click="toggleReloadComponent()" />
       </div>
     </template>
     <template #content>
@@ -51,9 +48,10 @@ export default {
 </script>
 
 <style scoped>
+/* Shrink icon-only button; reset theme padding so the icon stays centered. */
 .button-standard {
-  height: 30px !important;
-  width: 30px !important;
-  margin-top: 3px !important;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index 56cf15a..4c9062e 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -1,65 +1,45 @@
 <template>
   <!-- Navbar for laptop screen size (width>992px) -->
   <div class="card sticky-top lg:flex hidden border-none">
-    <Toast :breakpoints="{ '992px': { display: 'none' },  }"/>
+    <Toast :breakpoints="{ '992px': { display: 'none' }, }" />
     <div class="flex justify-content-between px-3 md:px-6 h-3rem flex-wrap main-color">
       <div class="flex align-items-center justify-content-center">
         <div class="company-title" type="button" v-on:click="toHome()">
           <!-- <div class="logo-title">E-Rahn Lelong</div> -->
           <!-- <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" /> -->
-          <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()"/>
+          <img class="logo-img" src="/img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()" />
         </div>
       </div>
       <div class="flex align-items-center justify-content-center">
         <nav class="main-nav">
-          <router-link class="nav-button" v-bind:to="{ name: 'home' }"
-            >Utama</router-link
-          >
-          <router-link class="nav-button" v-bind:to="{ name: 'list' }"
-            >Senarai</router-link
-          >
-          <router-link class="nav-button" v-bind:to="{ name: 'cart' }"
-            >Troli</router-link
-          >
-          <router-link class="nav-button" v-bind:to="{ name: 'bid-record' }"
-            >Rekod</router-link
-          >
-          <router-link class="nav-button" v-bind:to="{ name: 'result' }"
-            >Keputusan</router-link
-          >
-          <router-link class="nav-button" v-bind:to="{ name: 'policy' }"
-            >Polisi</router-link
-          >
+          <router-link class="nav-button" v-bind:to="{ name: 'home' }">Utama</router-link>
+          <router-link class="nav-button" v-bind:to="{ name: 'list' }">Senarai</router-link>
+          <router-link class="nav-button cart-nav-link" v-bind:to="{ name: 'cart' }">
+            Troli
+            <span v-if="cartStore.hasItems" class="cart-count-badge">{{ cartStore.badgeLabel }}</span>
+          </router-link>
+          <router-link class="nav-button" v-bind:to="{ name: 'bid-record' }">Rekod</router-link>
+          <router-link class="nav-button" v-bind:to="{ name: 'result' }">Keputusan</router-link>
+          <router-link class="nav-button" v-bind:to="{ name: 'policy' }">Polisi</router-link>
         </nav>
       </div>
       <div class="flex align-items-center justify-content-center">
         <div class="profile-title hidden lg:flex">
           <div class="dropdown">
-            <div
-              class="dropdown-toggle"
-              type="button"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
+            <div class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               <i class="bi bi-person-circle me-1"></i>{{ username }}
             </div>
             <ul class="dropdown-menu">
               <li>
-                <div
-                  type="button"
-                  class="dropdown-item"
-                  v-on:click="toProfile()"
-                >
+                <div type="button" class="dropdown-item" v-on:click="toProfile()">
                   Profil <i class="bi bi-person-workspace"></i>
                 </div>
               </li>
-              <li><hr class="dropdown-divider" /></li>
               <li>
-                <div
-                  type="button"
-                  v-on:click="doLogout()"
-                  class="dropdown-item"
-                >
+                <hr class="dropdown-divider" />
+              </li>
+              <li>
+                <div type="button" v-on:click="doLogout()" class="dropdown-item">
                   Log Keluar <i class="bi bi-box-arrow-right"></i>
                 </div>
               </li>
@@ -71,8 +51,7 @@
   </div>
   <!-- Navbar for phone, tab screen size (width<992px) -->
   <div class="card sticky-top lg:hidden md:flex border-none">
-    <div
-      class="
+    <div class="
         flex
         justify-content-between
         px-3
@@ -80,14 +59,9 @@
         h-3rem
         flex-wrap
         main-color
-      "
-    >
+      ">
       <div class="flex align-items-center justify-content-center">
-        <i
-          class="pi pi-bars text-white lg:hidden mr-3"
-          style="cursor: pointer"
-          @click="visibleRight = true"
-        ></i>
+        <i class="pi pi-bars text-white lg:hidden mr-3" style="cursor: pointer" @click="visibleRight = true"></i>
         <div class="company-title" type="button" v-on:click="toHome()">
           <div class="logo-title">E-Rahn Lelong</div>
           <!-- <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" /> -->
@@ -95,34 +69,19 @@
       </div>
 
       <div class="flex align-items-center justify-content-center">
-        <!-- <i
-          class="pi pi-shopping-cart text-white lg:hidden"
-          style="cursor: pointer"
-          @click="visibleRight = true"
-        ></i> -->
-        <!-- <i
-          class="pi pi-shopping-cart mr-1 p-text-primary"
-          style="font-size: 1.5rem; color: #eaf0f9"
-          v-badge.success="itemInCart"
-          v-on:click="toCart()"
-          v-if="isSuccessCart"
-        ></i> -->
-        <i
-          class="pi pi-shopping-cart mr-1 p-text-primary"
-          style="font-size: 1.5rem; color: #eaf0f9"
-          v-on:click="toCart()"
-        ></i>
+        <span class="cart-nav-icon" v-on:click="toCart()">
+          <i class="pi pi-shopping-cart p-text-primary" style="font-size: 1.5rem; color: #eaf0f9"></i>
+          <span v-if="cartStore.hasItems" class="cart-count-badge">{{ cartStore.badgeLabel }}</span>
+        </span>
       </div>
     </div>
     <div v-if="lelongOnline != ''">
-      <div
-        class="
+      <div class="
           flex
           align-items-center
           justify-content-center
           notification-mobile
-        "
-      >
+        ">
         <i class="blink pi pi-info-circle mr-2"></i> Lelongan akan tamat pada
         {{ lelongOnline }}
       </div>
@@ -136,53 +95,29 @@
         </div>
       </div>
       <div class="col-12">
-        <router-link
-          class="main-nav-link main-nav-link-sidebar"
-          v-bind:to="{ name: 'home' }"
-          >Utama</router-link
-        >
+        <router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'home' }">Utama</router-link>
       </div>
       <div class="col-12">
-        <router-link
-          class="main-nav-link main-nav-link-sidebar"
-          v-bind:to="{ name: 'list' }"
-          >Senarai</router-link
-        >
+        <router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'list' }">Senarai</router-link>
       </div>
       <div class="col-12">
-        <router-link
-          class="main-nav-link main-nav-link-sidebar"
-          v-bind:to="{ name: 'cart' }"
-          >Troli</router-link
-        >
+        <router-link class="main-nav-link main-nav-link-sidebar cart-nav-link" v-bind:to="{ name: 'cart' }">
+          Troli
+          <span v-if="cartStore.hasItems" class="cart-count-badge cart-count-badge-sidebar">{{ cartStore.badgeLabel
+            }}</span>
+        </router-link>
       </div>
       <div class="col-12">
-        <router-link
-          class="main-nav-link main-nav-link-sidebar"
-          v-bind:to="{ name: 'bid-record' }"
-          >Rekod</router-link
-        >
+        <router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'bid-record' }">Rekod</router-link>
       </div>
       <div class="col-12">
-        <router-link
-          class="main-nav-link main-nav-link-sidebar"
-          v-bind:to="{ name: 'result' }"
-          >Keputusan</router-link
-        >
+        <router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'result' }">Keputusan</router-link>
       </div>
       <div class="col-12">
-        <router-link
-          class="main-nav-link main-nav-link-sidebar"
-          v-bind:to="{ name: 'policy' }"
-          >Polisi</router-link
-        >
+        <router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'policy' }">Polisi</router-link>
       </div>
       <div class="col-12">
-        <router-link
-          class="main-nav-link main-nav-link-sidebar"
-          v-bind:to="{ name: 'profile' }"
-          >Profil</router-link
-        >
+        <router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'profile' }">Profil</router-link>
       </div>
       <div class="col-12">
         <!-- <router-link
@@ -192,12 +127,8 @@
         > -->
       </div>
       <div class="col-12">
-        <a
-          class="main-nav-link main-nav-link-sidebar"
-          v-on:click="doLogout()"
-          href="#"
-          ><i class="bi bi-box-arrow-right me-1"></i> Log Keluar</a
-        >
+        <a class="main-nav-link main-nav-link-sidebar" v-on:click="doLogout()" href="#"><i
+            class="bi bi-box-arrow-right me-1"></i> Log Keluar</a>
       </div>
     </div>
   </Sidebar>
@@ -205,7 +136,8 @@
 
 <script>
 import axios from "axios";
-import { useAuthenticationUserStore } from "@/store/modules/authentication"
+import { useAuthenticationUserStore } from "@/store/modules/authentication";
+import { useCartStore } from "@/store/modules/cart";
 
 export default {
   data() {
@@ -213,18 +145,22 @@ export default {
       username: useAuthenticationUserStore().username,
       visibleRight: false,
       lelongOnline: "",
-      isSuccessCart: false,
-      itemInCart: 0,
     };
   },
   setup() {
-    const authenticationStore = useAuthenticationUserStore()
+    const authenticationStore = useAuthenticationUserStore();
+    const cartStore = useCartStore();
 
-    return { authenticationStore }
+    return { authenticationStore, cartStore };
   },
-  mounted: function () {
+  mounted() {
     this.getLelongOnline();
-    // this.getItemInCart();
+    this.cartStore.fetchCount();
+  },
+  watch: {
+    "$route.fullPath"() {
+      this.cartStore.fetchCount();
+    },
   },
   methods: {
     async doLogout() {
@@ -233,6 +169,7 @@ export default {
       } catch (error) {
         console.log(error);
       } finally {
+        this.cartStore.clear();
         this.authenticationStore.clearSession();
         this.$router.push({ name: "login" });
       }
@@ -270,31 +207,6 @@ export default {
           console.log(error);
         });
     },
-    getItemInCart() {
-      this.loading = true;
-      axios
-        .get("/itemInCart", {
-          headers: {
-            Authorization: "Bearer " + useAuthenticationUserStore().token,
-          },
-          params: {
-            user_id: useAuthenticationUserStore().id,
-          },
-        })
-
-        .then((response) => {
-          // console.log('getItemInCart', response);
-          if (response.data.success === true) {
-            this.isSuccessCart = true;
-            this.itemInCart = response.data.cart;
-          } else {
-            this.isSuccessCart = false;
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
   },
 };
 </script>
@@ -338,6 +250,7 @@ router-link:hover {
   height: 2.5rem;
   padding: 25px 10px;
 }
+
 .main-color {
   background-color: #0D908B;
 }
@@ -431,4 +344,44 @@ a.router-link-exact-active:hover {
 .arrow-logo {
   font-size: 0.5rem;
 }
+
+.cart-nav-link,
+.cart-nav-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.cart-nav-icon {
+  cursor: pointer;
+}
+
+.cart-count-badge {
+  position: absolute;
+  top: -0.45rem;
+  right: -0.7rem;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  padding: 0 0.3rem;
+  border-radius: 999px;
+  background: #ef4444;
+  color: #ffffff;
+  font-size: 0.7rem;
+  font-weight: 700;
+  line-height: 1.15rem;
+  text-align: center;
+  box-shadow: 0 0 0 1.5px #0d908b;
+  pointer-events: none;
+}
+
+.cart-count-badge-sidebar {
+  position: static;
+  margin-left: 0.5rem;
+  box-shadow: none;
+}
+
+a.router-link-exact-active .cart-count-badge {
+  box-shadow: 0 0 0 1.5px #fae79a;
+  color: #ffffff;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index eb9fa94..a6db7de 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -419,6 +419,7 @@ import { read } from "@popperjs/core";
 import ItemMasterImage from "./ItemMasterImage.vue";
 import ItemMultipleImage from "./ItemMultipleImage.vue";
 import ItemMasterImageModal from "./ItemMasterImageModal.vue";
+import { useCartStore } from "@/store/modules/cart";
 
 export default {
   components: {
@@ -555,6 +556,7 @@ export default {
             if (response.data.success == true) {
               this.$refs.tambahClose.click();
               this.$emit("reloadComponent");
+              useCartStore().fetchCount();
               this.$swal.fire({
                 toast: true,
                 icon: "success",
diff --git a/src/components/pay/SelectOutlet.vue b/src/components/pay/SelectOutlet.vue
index 0289a7f..5d47391 100644
--- a/src/components/pay/SelectOutlet.vue
+++ b/src/components/pay/SelectOutlet.vue
@@ -212,13 +212,16 @@
     :modal="true"
   >
     <div class="text-center">
-      <div>Lakukan bayaran ke akaun tersebut.</div>
+      <div>Lakukan bayaran ke akaun cawangan {{ cawanganPilihan }}.</div>
       <div class="div-card-bank">
         <div class="card-bank">
           <div>
-            <div>Koperasi Permodalan Kelantan Berhad</div>
-            <div>1102084986</div>
-            <div>BANK RAKYAT</div>
+            <div class="bank-label">Nama Bank</div>
+            <div>{{ cawanganBank.nama_bank || "-" }}</div>
+            <div class="bank-label">No Akaun Bank</div>
+            <div>{{ cawanganBank.bank_acc_no || "-" }}</div>
+            <div class="bank-label">Nama Akaun</div>
+            <div>{{ cawanganBank.bank_acc || "-" }}</div>
           </div>
         </div>
       </div>
@@ -290,6 +293,11 @@ export default {
       isDisplayFileUpload: false,
       isLoading: false,
       cawanganPilihan: "",
+      cawanganBank: {
+        nama_bank: "",
+        bank_acc: "",
+        bank_acc_no: "",
+      },
       hargaBidaanPilihan: "",
       hargaBidaanPilihanTambahFi: "",
       lelongDetails: "",
@@ -368,6 +376,11 @@ export default {
       // if (current_time < limit_datetime_bayaran === true) {
       this.isDisplayPaymentMethod = true;
       this.cawanganPilihan = value.cawangan;
+      this.cawanganBank = {
+        nama_bank: value.nama_bank || "",
+        bank_acc: value.bank_acc || "",
+        bank_acc_no: value.bank_acc_no || "",
+      };
       this.form.kodcaw = value.kodcaw;
       this.hargaBidaanPilihan = value.total_hargabida;
       let convertHargaBidaanPilihan =
@@ -488,8 +501,7 @@ export default {
       this.$router.push({
         name: "detail",
         params: {
-          lelongId: this.lelongIdProps,
-          statusPayment: null,
+          lelongId: String(this.lelongIdProps),
         },
       });
     },
@@ -533,10 +545,17 @@ export default {
   background: #2f68c51c;
   color: #2f68c5f2;
   width: 300px;
-  height: 125px;
+  min-height: 125px;
   border-radius: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 16px;
+}
+
+.bank-label {
+  margin-top: 8px;
+  font-size: 12px;
+  opacity: 0.7;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/pay/ThePay.vue b/src/components/pay/ThePay.vue
index 0137481..3dfe156 100644
--- a/src/components/pay/ThePay.vue
+++ b/src/components/pay/ThePay.vue
@@ -1,9 +1,7 @@
 <template>
   <the-template>
     <div v-if="isLoading" class="fadein animation-duration-400">
-      <div
-        class="flex align-items-center justify-content-center container-height"
-      >
+      <div class="flex align-items-center justify-content-center container-height">
         <div class="spinner-border" role="status">
           <span class="visually-hidden">Loading...</span>
         </div>
@@ -15,18 +13,14 @@
           <template #title>
             <div class="font-normal">
               <div class="flex">
-                <Button
-                  class="
+                <Button class="
                     p-button-sm
                     button-custom
                     p-button-secondary p-button-outlined
                     align-self-center
                     mr-2
-                  "
-                  icon="pi pi-arrow-left"
-                  v-on:click="clickCancelButton()"
-                />
-                Pembayaran Bidaan
+                  " icon="pi pi-arrow-left" v-on:click="clickCancelButton()" />
+                Pembayaran Bidaan 1
               </div>
             </div>
             <div class="font-normal text-base">
@@ -34,22 +28,17 @@
             </div>
           </template>
           <template #content>
-            <select-outlet
-              v-bind:namaCawangan="lists"
-              v-bind:lelongIdProps="lelongId"
-            ></select-outlet>
+            <select-outlet v-bind:namaCawangan="lists" v-bind:lelongIdProps="lelongId"></select-outlet>
           </template>
         </Card>
       </div>
       <div v-else>
-        <div
-          class="
+        <div class="
             flex
             align-items-center
             justify-content-center
             container-height
-          "
-        >
+          ">
           <div class="grid justify-content-center">
             <div class="col-12 mb-4 text-center">
               <i class="pi pi-book text-8xl text-400"></i>
@@ -58,13 +47,9 @@
               <span class="text-400">Tiada Data.</span>
             </div>
             <div class="col-12 text-center">
-              <span class="text-400"
-                >Sila rujuk halaman
-                <router-link v-bind:to="{ name: 'result' }"
-                  >Keputusan</router-link
-                >
-                untuk maklumat rekod bidaan menang.</span
-              >
+              <span class="text-400">Sila rujuk halaman
+                <router-link v-bind:to="{ name: 'result' }">Keputusan</router-link>
+                untuk maklumat rekod bidaan menang.</span>
             </div>
           </div>
         </div>
@@ -122,14 +107,14 @@ export default {
   methods: {
     liveData() {
       this.isLoading = true;
-      if(this.lelongId != null){
+      if (this.lelongId != null) {
         axios
           .get(
             "/bayarBaki/" +
-              useAuthenticationUserStore().id +
-              // "/1" ,
-              "/" +
-              this.lelongId,
+            useAuthenticationUserStore().id +
+            // "/1" ,
+            "/" +
+            this.lelongId,
             {
               headers: {
                 Authorization: "Bearer " + useAuthenticationUserStore().token,
@@ -158,8 +143,7 @@ export default {
       this.$router.push({
         name: "detail",
         params: {
-          lelongId: this.lelongId,
-          statusPayment: null,
+          lelongId: String(this.lelongId),
         },
       });
     },
diff --git a/src/components/pay/ThePayCdm.vue b/src/components/pay/ThePayCdm.vue
index 575593f..f1f3e08 100644
--- a/src/components/pay/ThePayCdm.vue
+++ b/src/components/pay/ThePayCdm.vue
@@ -1,9 +1,7 @@
 <template>
   <the-template>
     <div v-if="isLoading" class="fadein animation-duration-400">
-      <div
-        class="flex align-items-center justify-content-center container-height"
-      >
+      <div class="flex align-items-center justify-content-center container-height">
         <div class="spinner-border" role="status">
           <span class="visually-hidden">Loading...</span>
         </div>
@@ -14,17 +12,13 @@
         <Card>
           <template #title>
             <div class="flex">
-              <Button
-                class="
+              <Button class="
                   p-button-sm
                   button-custom
                   p-button-secondary p-button-outlined
                   align-self-center
                   mr-2
-                "
-                icon="pi pi-arrow-left"
-                v-on:click="clickCancelButton()"
-              />
+                " icon="pi pi-arrow-left" v-on:click="clickCancelButton()" />
               <div class="font-normal">Pembayaran Bidaan Menggunakan CDM</div>
             </div>
             <div class="font-normal text-base">
@@ -39,8 +33,7 @@
             <div class="font-medium p-0">No Account Bank: 1102084986 (BANK RAKYAT)</div>
             <span class="text-xs fst-italic text-danger">
               *Sila buat bayaran menggunakan nombor akaun ini sahaja dan muat
-              naik gambar resit dibawah.</span
-            >
+              naik gambar resit dibawah.</span>
 
             <div class="overflow-x-auto">
               <table class="mt-5 table text-center table-bordered">
@@ -67,26 +60,13 @@
                 </tbody>
               </table>
             </div>
-            <Button
-              class="p-button-sm mb-3"
-              label="Muat Naik Resit"
-              icon="pi pi-plus-circle"
-              iconPos="right"
-              @click="openModalFileUpload()"
-            />
-            <list-receipt
-              v-bind:key="componentKey"
-              v-bind:lelong_id="lelongId"
-              v-on:reloadComponent="toggleReloadComponent"
-            ></list-receipt>
+            <Button class="p-button-sm mb-3" label="Muat Naik Resit" icon="pi pi-plus-circle" iconPos="right"
+              @click="openModalFileUpload()" />
+            <list-receipt v-bind:key="componentKey" v-bind:lelong_id="lelongId"
+              v-on:reloadComponent="toggleReloadComponent"></list-receipt>
 
-            <Dialog
-              header="Muat Naik Resit Baharu"
-              v-model:visible="isDisplayFileUpload"
-              :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
-              :style="{ width: '50vw' }"
-              :modal="true"
-            >
+            <Dialog header="Muat Naik Resit Baharu" v-model:visible="isDisplayFileUpload"
+              :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :modal="true">
               <div class="text-center m-2">
                 <input class="form-control" type="file" accept="image/*" v-on:change="selectPhoto" />
                 <!-- <FileUpload
@@ -99,32 +79,21 @@
                 /> -->
               </div>
               <template #footer>
-                <Button
-                  class="p-button-sm p-button-secondary"
-                  label="Kembali"
-                  @click="closeModalFileUpload()"
-                />
-                <Button
-                  class="p-button-sm p-button-success"
-                  label="Simpan"
-                  icon="pi pi-check"
-                  iconPos="right"
-                  @click="addPhotoResit()"
-                />
+                <Button class="p-button-sm p-button-secondary" label="Kembali" @click="closeModalFileUpload()" />
+                <Button class="p-button-sm p-button-success" label="Simpan" icon="pi pi-check" iconPos="right"
+                  @click="addPhotoResit()" />
               </template>
             </Dialog>
           </template>
         </Card>
       </div>
       <div v-else>
-        <div
-          class="
+        <div class="
             flex
             align-items-center
             justify-content-center
             container-height
-          "
-        >
+          ">
           <div class="grid justify-content-center">
             <div class="col-12 mb-4 text-center">
               <i class="pi pi-book text-8xl text-400"></i>
@@ -133,13 +102,9 @@
               <span class="text-400">Tiada Data.</span>
             </div>
             <div class="col-12 text-center">
-              <span class="text-400"
-                >Sila rujuk halaman
-                <router-link v-bind:to="{ name: 'result' }"
-                  >Keputusan</router-link
-                >
-                untuk maklumat rekod bidaan menang.</span
-              >
+              <span class="text-400">Sila rujuk halaman
+                <router-link v-bind:to="{ name: 'result' }">Keputusan</router-link>
+                untuk maklumat rekod bidaan menang.</span>
             </div>
           </div>
         </div>
@@ -186,10 +151,10 @@ export default {
       axios
         .get(
           "/bayarBaki/" +
-            useAuthenticationUserStore().id +
-            // "/1" ,
-            "/" +
-            this.lelongId,
+          useAuthenticationUserStore().id +
+          // "/1" ,
+          "/" +
+          this.lelongId,
           {
             headers: {
               Authorization: "Bearer " + useAuthenticationUserStore().token,
@@ -267,8 +232,7 @@ export default {
       this.$router.push({
         name: "detail",
         params: {
-          lelongId: this.lelongId,
-          statusPayment: null,
+          lelongId: String(this.lelongId),
         },
       });
     },
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index f5e249d..c0afe0c 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -1,9 +1,6 @@
 <template>
   <the-template>
-    <div
-      v-if="loading"
-      style="min-height: 70vh; display: grid; place-items: center"
-    >
+    <div v-if="loading" style="min-height: 70vh; display: grid; place-items: center">
       <div class="spinner-border" role="status">
         <span class="visually-hidden">Loading...</span>
       </div>
@@ -15,21 +12,14 @@
             <template #title>
               <div class="grid justify-content-between">
                 <div class="flex">
-                  <Button
-                    class="
+                  <Button class="
                       p-button-sm
                       button-custom
                       p-button-secondary p-button-outlined
                       align-self-center
                       mr-2
-                    "
-                    icon="pi pi-arrow-left"
-                    v-on:click="clickBackButton()"
-                  />
-                  <div
-                    class="font-normal"
-                    style="font-size: 1.5rem; font-weight: 700"
-                  >
+                    " icon="pi pi-arrow-left" v-on:click="clickBackButton()" />
+                  <div class="font-normal" style="font-size: 1.5rem; font-weight: 700">
                     Keputusan Tarikh Lelongan: {{ tarikhLelong }}
                   </div>
                 </div>
@@ -42,95 +32,59 @@
                     :disabled="disabled == 1"
                     v-on:click="clickPayCdmButton(lelongId)"
                   /> -->
-                  <Button
-                    label="Pembayaran"
-                    icon="pi pi-dollar"
-                    iconPos="right"
-                    class="p-button-sm"
-                    :disabled="disabled == 1"
-                    v-on:click="clickPayButton(lelongId)"
-                  />
+                  <Button label="Pembayaran" icon="pi pi-dollar" iconPos="right" class="p-button-sm"
+                    :disabled="disabled == 1" v-on:click="clickPayButton(lelongId)" />
                 </div>
               </div>
               <div class="row" v-if="disabled != 1">
-                <div
-                  class="
+                <div class="
                     text-xs
                     align-self-center
                     fst-italic
                     fw-lighter
                     text-danger
                     md:text-right
-                  "
-                >
+                  ">
                   *Sila klik butang diatas untuk lakukan bayaran.
                 </div>
               </div>
             </template>
             <template #content>
-              <Accordion :multiple="true">
-                <AccordionTab v-for="list in lists" v-bind:key="list">
+              <Accordion :multiple="true" class="result-accordion">
+                <AccordionTab v-for="list in lists" :key="list.cawangan || list.kodcaw">
                   <template #header>
-                    <div class="flex justify-content-between w-100">
-                      <div class="align-self-center" style="margin: 5px">
+                    <div class="result-accordion-header">
+                      <span class="result-accordion-title">
                         {{ list.cawangan }}
-                        <span
-                          v-if="list.status_payment_cawangan.status === null"
-                        >
-                          <Tag
-                            value="Belum Bayar"
-                            icon="pi pi-times"
-                            severity="danger"
-                          ></Tag>
+                        <span v-if="list.status_payment_cawangan.status === null">
+                          <Tag value="Belum Bayar" icon="pi pi-times" severity="danger"></Tag>
                         </span>
-                        <span
-                          v-else-if="list.status_payment_cawangan.status == 9"
-                        >
-                          <Tag
-                            value="Tunggu Pengesahan"
-                            icon="pi pi-stopwatch"
-                            severity="warning"
-                          ></Tag>
+                        <span v-else-if="list.status_payment_cawangan.status == 9">
+                          <Tag value="Tunggu Pengesahan" icon="pi pi-stopwatch" severity="warning"></Tag>
                         </span>
-                        <span
-                          v-else-if="list.status_payment_cawangan.status == 1"
-                        >
-                          <Tag
-                            value="Selesai Bayar"
-                            icon="pi pi-check"
-                            severity="success"
-                          ></Tag>
+                        <span v-else-if="list.status_payment_cawangan.status == 1">
+                          <Tag value="Selesai Bayar" icon="pi pi-check" severity="success"></Tag>
                         </span>
-                      </div>
-                      <div class="style-info">
+                      </span>
+                      <span class="style-info">
                         Jumlah RM{{
                           list.total_hargabida
                             ?.toString()
                             .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                         }}
-                      </div>
+                      </span>
                     </div>
                   </template>
-                  <Button
-                    label="Surat Hak Kepemilikan Barang"
-                    icon="pi pi-verified"
-                    iconPos="right"
-                    class="p-button-sm mb-3"
-                    v-on:click="downloadPdf(list.kodcaw)"
-                    v-if="list.status_payment_cawangan.status == 1"
-                  />
-                  <div
-                    v-if="
-                      list.status_payment_cawangan.status == 1 ||
-                      list.status_payment_cawangan.status == 9
-                    "
-                  >
-                    <div
-                      class="m-2"
-                      v-if="
-                        list.status_payment_cawangan.payment_method_opt == 2
-                      "
-                    >
+                  <Button label="Surat Hak Kepemilikan Barang" icon="pi pi-verified" iconPos="right"
+                    class="p-button-sm mb-3" v-on:click="downloadPdf(list.kodcaw)"
+                    v-if="list.status_payment_cawangan.status == 1" />
+                  <div v-if="
+                    list.status_payment_cawangan.status == 1 ||
+                    list.status_payment_cawangan.status == 9
+                  ">
+                    <div class="m-2" v-if="
+                      list.status_payment_cawangan.payment_method_opt == 2
+                    ">
                       <div>
                         <div class="row">
                           <div>Cara Bayaran: FPX</div>
@@ -143,12 +97,9 @@
                         </div>
                       </div>
                     </div>
-                    <div
-                      class="m-2"
-                      v-else-if="
-                        list.status_payment_cawangan.payment_method_opt == 1
-                      "
-                    >
+                    <div class="m-2" v-else-if="
+                      list.status_payment_cawangan.payment_method_opt == 1
+                    ">
                       <div>
                         <div class="row">
                           <div>Cara Bayaran: TUNAI DI CAWANGAN</div>
@@ -161,36 +112,22 @@
                         </div>
                       </div>
                     </div>
-                    <div
-                      class="mt-2 mb-2"
-                      v-else-if="
-                        list.status_payment_cawangan.payment_method_opt == 3
-                      "
-                    >
+                    <div class="mt-2 mb-2" v-else-if="
+                      list.status_payment_cawangan.payment_method_opt == 3
+                    ">
                       <div>
                         <div class="row mb-3">
                           <div>Cara Bayaran: CDM</div>
                         </div>
-                        <div
-                          v-if="
-                            list.status_payment_cawangan.status == 9 &&
-                            list.status_payment_cawangan.file_resit.length < 15
-                          "
-                        >
-                          <Button
-                            class="p-button-sm mb-1"
-                            label="Tambah Resit Baharu"
-                            icon="pi pi-plus-circle"
-                            iconPos="right"
-                            @click="openModalFileUpload(list.kodcaw)"
-                          />
-                          <Dialog
-                            header="Muat Naik Resit Baharu"
-                            v-model:visible="isDisplayFileUpload"
-                            :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
-                            :style="{ width: '50vw' }"
-                            :modal="true"
-                          >
+                        <div v-if="
+                          list.status_payment_cawangan.status == 9 &&
+                          list.status_payment_cawangan.file_resit.length < 15
+                        ">
+                          <Button class="p-button-sm mb-1" label="Tambah Resit Baharu" icon="pi pi-plus-circle"
+                            iconPos="right" @click="openModalFileUpload(list.kodcaw)" />
+                          <Dialog header="Muat Naik Resit Baharu" v-model:visible="isDisplayFileUpload"
+                            :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }"
+                            :modal="true">
                             <div class="text-center">
                               <div>Lakukan bayaran ke akaun tersebut.</div>
                               <div class="div-card-bank">
@@ -203,62 +140,39 @@
                                 </div>
                               </div>
                             </div>
-                            <div class="mt-5">Sila muat naik gambar resit dalam bentuk <strong>PNG</strong> atau <strong>JPG</strong>.</div>
+                            <div class="mt-5">Sila muat naik gambar resit dalam bentuk <strong>PNG</strong> atau
+                              <strong>JPG</strong>.
+                            </div>
                             <div>Pastikan gambar yang dimuat naik adalah <strong>JELAS.</strong></div>
                             <div class="text-center m-2">
-                              <input
-                                class="form-control"
-                                type="file"
-                                accept="image/png, image/jpg, image/jpeg"
-                                v-on:change="selectPhoto"
-                              />
-                              <div
-                                style="font-size: 13px"
-                                class="fst-italic text-danger row"
-                                v-if="v$.fileSize.$error"
-                              >
+                              <input class="form-control" type="file" accept="image/png, image/jpg, image/jpeg"
+                                v-on:change="selectPhoto" />
+                              <div style="font-size: 13px" class="fst-italic text-danger row" v-if="v$.fileSize.$error">
                                 <div>
                                   Jenis gambar yang diterima adalah PNG dan JPG.
                                 </div>
                               </div>
                             </div>
                             <template #footer>
-                              <Button
-                                class="p-button-sm p-button-secondary"
-                                label="Kembali"
-                                @click="closeModalFileUpload()"
-                              />
-                              <Button
-                                class="p-button-sm p-button-success"
-                                label="Simpan"
-                                icon="pi pi-check"
-                                iconPos="right"
-                                :loading="isLoadingButton"
-                                @click="addPhotoResit()"
-                              />
+                              <Button class="p-button-sm p-button-secondary" label="Kembali"
+                                @click="closeModalFileUpload()" />
+                              <Button class="p-button-sm p-button-success" label="Simpan" icon="pi pi-check"
+                                iconPos="right" :loading="isLoadingButton" @click="addPhotoResit()" />
                             </template>
                           </Dialog>
                         </div>
                         <div class="card">
                           <div class="card-header">Gambar Resit</div>
-                          <div
-                            class="
+                          <div class="
                               card-body
                               d-flex
                               overflow-x-auto
                               align-items-center
-                            "
-                          >
-                            <div
-                              class="m-2"
-                              v-for="receipt in list.status_payment_cawangan
-                                .file_resit"
-                              v-bind:key="receipt"
-                            >
+                            ">
+                            <div class="m-2" v-for="receipt in list.status_payment_cawangan
+                              .file_resit" v-bind:key="receipt">
                               <div class="row text-center">
-                                <receipt-image
-                                  v-bind:fileResitId="receipt.id"
-                                ></receipt-image>
+                                <receipt-image v-bind:fileResitId="receipt.id"></receipt-image>
                                 <div>{{ receipt.masa_upload }}</div>
                               </div>
                             </div>
@@ -268,10 +182,7 @@
                     </div>
                   </div>
                   <div class="overflow-x-auto">
-                    <table
-                      ref="content"
-                      class="table text-center table-bordered"
-                    >
+                    <table ref="content" class="table text-center table-bordered">
                       <tbody>
                         <tr class="table-light font-bold">
                           <td>Bil</td>
@@ -281,12 +192,8 @@
                         <tr v-for="(data, index) in list.sag" :key="data">
                           <td>{{ index + 1 }}</td>
                           <td>
-                            <a
-                              href="#"
-                              data-bs-toggle="modal"
-                              data-bs-target="#marhunModal"
-                              v-on:click="marhunModal(data)"
-                            >
+                            <a href="#" data-bs-toggle="modal" data-bs-target="#marhunModal"
+                              v-on:click="marhunModal(data)">
                               {{ data.norujukan }}
                             </a>
                           </td>
@@ -316,29 +223,16 @@
               </Accordion>
             </template>
           </Card>
-          <div
-            class="modal fade"
-            id="marhunModal"
-            tabindex="-1"
-            aria-labelledby="marhunModalLabel"
-            aria-hidden="true"
-            data-bs-backdrop="static"
-          >
+          <div class="modal fade" id="marhunModal" tabindex="-1" aria-labelledby="marhunModalLabel" aria-hidden="true"
+            data-bs-backdrop="static">
             <div class="modal-dialog modal-xl modal-dialog-centered">
               <div class="modal-content">
                 <div class="modal-header">
-                  <button
-                    type="button"
-                    class="btn-close"
-                    data-bs-dismiss="modal"
-                    aria-label="Close"
-                  ></button>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                   <div class="grid">
-                    <div
-                      class="col-12 lg:col-6"
-                      style="
+                    <div class="col-12 lg:col-6" style="
                         display: flex;
                         justify-content: center;
                         align-items: center;
@@ -346,14 +240,10 @@
                         min-width: 300px;
                         max-height: 600px;
                         max-width: 600px;
-                      "
-                    >
-                      <item-master-image-modal
-                        v-if="theData.filemarhun"
-                        v-bind:key="reloadImageComponent"
+                      ">
+                      <item-master-image-modal v-if="theData.filemarhun" v-bind:key="reloadImageComponent"
                         v-bind:norujukan="theData.norujukan"
-                        v-bind:filemarhun_id="theData.filemarhun[0].id"
-                      ></item-master-image-modal>
+                        v-bind:filemarhun_id="theData.filemarhun[0].id"></item-master-image-modal>
                       <p v-else style="text-align: center; width: 100%">
                         Image Unavailable
                       </p>
@@ -369,10 +259,7 @@
                               <td style="min-width: 42px">Berat</td>
                               <td style="min-width: 102px">Harga Asas</td>
                             </tr>
-                            <tr
-                              v-for="(data, index) in theData.lelongbidmarhun"
-                              v-bind:key="data"
-                            >
+                            <tr v-for="(data, index) in theData.lelongbidmarhun" v-bind:key="data">
                               <td>{{ index + 1 }}</td>
                               <td>{{ data.marhun }}</td>
                               <td>{{ data.karat }}</td>
@@ -401,21 +288,16 @@
                       </div>
                       <div class="row justify-content-center font-bold">
                         <div class="col-6">
-                          <label class="col-form-label"
-                            >Jumlah Harga Bida</label
-                          >
+                          <label class="col-form-label">Jumlah Harga Bida</label>
                         </div>
                         <div class="col-6">
                           <div class="input-group mb-3">
                             <span class="input-group-text font-bold">RM</span>
-                            <span
-                              class="form-control input-group-text font-bold"
-                              >{{
-                                theData.hargabida
-                                  ?.toString()
-                                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
-                              }}</span
-                            >
+                            <span class="form-control input-group-text font-bold">{{
+                              theData.hargabida
+                                ?.toString()
+                                .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                            }}</span>
                           </div>
                         </div>
                       </div>
@@ -423,11 +305,7 @@
                   </div>
                 </div>
                 <div class="modal-footer">
-                  <Button
-                    class="p-button-sm"
-                    label="Kembali"
-                    data-bs-dismiss="modal"
-                  />
+                  <Button class="p-button-sm" label="Kembali" data-bs-dismiss="modal" />
                 </div>
               </div>
             </div>
@@ -435,14 +313,12 @@
         </div>
       </div>
       <div v-else>
-        <div
-          class="
+        <div class="
             flex
             align-items-center
             justify-content-center
             container-height
-          "
-        >
+          ">
           <div class="grid justify-content-center">
             <div class="col-12 mb-4 text-center">
               <i class="pi pi-book text-8xl text-400"></i>
@@ -451,40 +327,20 @@
               <span class="text-400">Tiada Data.</span>
             </div>
             <div class="col-12 text-center">
-              <span class="text-400"
-                >Sila rujuk halaman
-                <router-link v-bind:to="{ name: 'result' }"
-                  >Keputusan</router-link
-                >
-                untuk maklumat rekod bidaan menang.</span
-              >
+              <span class="text-400">Sila rujuk halaman
+                <router-link v-bind:to="{ name: 'result' }">Keputusan</router-link>
+                untuk maklumat rekod bidaan menang.</span>
             </div>
           </div>
         </div>
       </div>
-      <Dialog
-        header="Surat Hak Kepemilikan Barang"
-        v-model:visible="isDisplay"
-        :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
-        :style="{ width: '50vw' }"
-        :modal="true"
-        :show-layout="false"
-        :float-layout="true"
-        :enable-download="true"
-        :preview-modal="true"
-        :paginate-elements-by-height="1400"
-        filename="hee hee"
-        :pdf-quality="2"
-        :manual-pagination="false"
-        pdf-format="a4"
-        pdf-orientation="landscape"
-        pdf-content-width="800px"
-        @progress="onProgress($event)"
-        @hasStartedGeneration="hasStartedGeneration()"
-        @hasGenerated="hasGenerated($event)"
-        ref="html2Pdf"
-      >
-        <div class="text-center">
+      <Dialog header="Surat Hak Kepemilikan Barang" v-model:visible="isDisplay"
+        :breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :modal="true"
+        :show-layout="false" :float-layout="true" :enable-download="true" :preview-modal="true"
+        :paginate-elements-by-height="1400" filename="hee hee" :pdf-quality="2" :manual-pagination="false"
+        pdf-format="a4" pdf-orientation="landscape" pdf-content-width="800px" @progress="onProgress($event)"
+        @hasStartedGeneration="hasStartedGeneration()" @hasGenerated="hasGenerated($event)" ref="html2Pdf">
+        <div v-if="suratHak?.user" class="text-center">
           <p id="hakbarang">SURAT KETERANGAN KEPEMILIKAN BARANG</p>
           <p>
             Bahawasanya barang tersebut adalah hak milik
@@ -575,7 +431,7 @@ export default {
   },
   created() {
     this.lelongId = this.$route.params.lelongId;
-    this.statusPayment = this.$route.params.statusPayment;
+    this.statusPayment = this.$route.query.statusPayment ?? null;
   },
   mounted: function () {
     this.liveData();
@@ -591,7 +447,7 @@ export default {
     },
     liveData() {
       this.loading = true;
-      if(this.lelongId != null) {
+      if (this.lelongId) {
         axios
           .get("/bayar/" + useAuthenticationUserStore().id + "/" + this.lelongId, {
             headers: {
@@ -602,26 +458,27 @@ export default {
             // console.log("liveData", response);
             if (response.data.success == true) {
               this.isSuccess = true;
-              this.loading = false;
               this.lists = response.data.data;
               this.tarikhLelong = response.data.tarikh_lelong;
             } else {
               this.isSuccess = false;
             }
+            this.loading = false;
           })
           .catch((error) => {
             this.loading = false;
             console.log(error);
           });
       } else {
+        this.loading = false;
         this.$router.push({ name: "result" });
       }
     },
     clickPayButton(value) {
-      this.$router.push({ name: "pay", params: { lelongId: value } });
+      this.$router.push({ name: "pay", params: { lelongId: String(value) } });
     },
     clickPayCdmButton(value) {
-      this.$router.push({ name: "pay-cdm", params: { lelongId: value } });
+      this.$router.push({ name: "pay-cdm", params: { lelongId: String(value) } });
     },
     clickBackButton() {
       this.$router.push({ name: "result" });
@@ -709,9 +566,20 @@ export default {
           },
         })
         .then((response) => {
-          this.suratHak = response.data;
-          this.isDisplay = true;
-          this.isSuccessHak = true;
+          if (response.data?.success && response.data?.user) {
+            this.suratHak = response.data;
+            this.isSuccessHak = true;
+            this.isDisplay = true;
+          } else {
+            this.$swal?.fire({
+              toast: true,
+              icon: "error",
+              title: "Gagal memuatkan surat hak.",
+              position: "bottom",
+              showConfirmButton: false,
+              timer: 4000,
+            });
+          }
         })
         .catch((error) => {
           console.log(error);
@@ -779,6 +647,51 @@ export default {
   min-height: 70vh;
 }
 
+.result-accordion :deep(.p-accordion-header-link) {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.result-accordion :deep(.p-accordion-toggle-icon) {
+  flex-shrink: 0;
+  margin-right: 0;
+}
+
+.result-accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 0.75rem;
+}
+
+.result-accordion-title {
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.style-info {
+  background: #e4f8f0;
+  border: solid #1ea97c;
+  border-width: 0.1px;
+  color: #1ea97c;
+  font-size: 0.95rem;
+  align-items: center;
+  display: inline-flex;
+  padding: 0.35rem 0.75rem;
+  margin: 0;
+  border-radius: 6px;
+  font-weight: 700;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 .div-card-bank {
   display: flex;
   justify-content: center;
diff --git a/src/components/result/ResultMain.vue b/src/components/result/ResultMain.vue
index 3101f8f..cdb86d2 100644
--- a/src/components/result/ResultMain.vue
+++ b/src/components/result/ResultMain.vue
@@ -1,17 +1,10 @@
 <template>
-  <div
-    v-if="loading"
-    style="min-height: 70vh; display: grid; place-items: center"
-  >
+  <div v-if="loading" style="min-height: 70vh; display: grid; place-items: center">
     <div class="spinner-border" role="status">
       <span class="visually-hidden">Loading...</span>
     </div>
   </div>
-  <div
-    v-else
-    style="min-height: 70vh"
-    class="container fadein animation-duration-400"
-  >
+  <div v-else style="min-height: 70vh" class="container fadein animation-duration-400">
     <div v-if="isSuccess">
       <Card>
         <template #title>
@@ -39,7 +32,7 @@
                   <td v-on:click="selectDate(data)">
                     <span class="text-primary underline cursor-pointer">{{
                       data.tarikh_lelong
-                    }}</span>
+                      }}</span>
                   </td>
                   <td>
                     RM{{
@@ -49,29 +42,15 @@
                     }}
                   </td>
                   <td v-if="data.status == 1">
-                    <Tag
-                      value="Selesai"
-                      icon="pi pi-check"
-                      class="p-tag-rounded"
-                      severity="success"
-                    ></Tag>
+                    <Tag value="Selesai" icon="pi pi-check" class="p-tag-rounded" severity="success"></Tag>
                   </td>
                   <td v-else-if="data.status == 2">
-                      <Tag
-                        value="Tunggu Pengesahan"
-                        icon="pi pi-stopwatch"
-                        class="p-tag-rounded"
-                        severity="warning"
-                      ></Tag>
+                    <Tag value="Tunggu Pengesahan" icon="pi pi-stopwatch" class="p-tag-rounded" severity="warning">
+                    </Tag>
                   </td>
                   <td v-else-if="data.status == null">
                     <div class="blink">
-                      <Tag
-                        value="Belum Selesai"
-                        icon="pi pi-times"
-                        class="p-tag-rounded"
-                        severity="danger"
-                      ></Tag>
+                      <Tag value="Belum Selesai" icon="pi pi-times" class="p-tag-rounded" severity="danger"></Tag>
                     </div>
                   </td>
                   <!-- <td>
@@ -87,9 +66,7 @@
       </Card>
     </div>
     <div v-else>
-      <div
-        class="flex align-items-center justify-content-center container-height"
-      >
+      <div class="flex align-items-center justify-content-center container-height">
         <div class="grid justify-content-center">
           <div class="col-12 mb-4 text-center">
             <i class="pi pi-info-circle text-8xl text-400"></i>
@@ -98,11 +75,9 @@
             <span class="text-400">Tiada Data Dalam Keputusan.</span>
           </div>
           <div class="col-12 text-center">
-            <span class="text-400"
-              >Sila rujuk halaman
+            <span class="text-400">Sila rujuk halaman
               <router-link v-bind:to="{ name: 'home' }">Utama</router-link>
-              untuk jadual lelongan.</span
-            >
+              untuk jadual lelongan.</span>
           </div>
         </div>
       </div>
@@ -157,10 +132,15 @@ export default {
         });
     },
     selectDate(value) {
-      this.$router.push({
+      const route = {
         name: "detail",
-        params: { lelongId: value.id, statusPayment: value.status },
-      });
+        params: { lelongId: String(value.id) },
+      };
+      // Vue Router 4 only keeps params declared in the path; statusPayment is optional query
+      if (value.status != null) {
+        route.query = { statusPayment: String(value.status) };
+      }
+      this.$router.push(route);
     },
   },
 };
diff --git a/src/router/index.js b/src/router/index.js
index 6f539aa..2c4b3d1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -219,7 +219,7 @@ const routes = [
     meta: { requiresAuth: true },
   },
   {
-    path: "/result-detail",
+    path: "/result-detail/:lelongId",
     name: "detail",
     component: ResultDetail,
     meta: { requiresAuth: true },
@@ -231,13 +231,13 @@ const routes = [
     meta: { requiresAuth: true },
   },
   {
-    path: "/pay",
+    path: "/pay/:lelongId",
     name: "pay",
     component: ThePay,
     meta: { requiresAuth: true },
   },
   {
-    path: "/pay-cdm",
+    path: "/pay-cdm/:lelongId",
     name: "pay-cdm",
     component: ThePayCdm,
     meta: { requiresAuth: true },
diff --git a/src/store/modules/cart.js b/src/store/modules/cart.js
new file mode 100644
index 0000000..4457da5
--- /dev/null
+++ b/src/store/modules/cart.js
@@ -0,0 +1,41 @@
+import { defineStore } from "pinia";
+import axios from "axios";
+import { useAuthenticationUserStore } from "@/store/modules/authentication";
+
+export const useCartStore = defineStore("cart", {
+  state: () => ({
+    count: 0,
+  }),
+  getters: {
+    hasItems: (state) => state.count > 0,
+    badgeLabel: (state) => (state.count > 99 ? "99+" : String(state.count)),
+  },
+  actions: {
+    async fetchCount() {
+      const auth = useAuthenticationUserStore();
+      if (!auth.token || !auth.id) {
+        this.count = 0;
+        return;
+      }
+
+      try {
+        const response = await axios.get("/itemInCart", {
+          headers: {
+            Authorization: "Bearer " + auth.token,
+          },
+          params: {
+            user_id: auth.id,
+          },
+        });
+
+        this.count =
+          response.data.success === true ? Number(response.data.cart) || 0 : 0;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    clear() {
+      this.count = 0;
+    },
+  },
+});