diff --git a/src/components/bid-record/BidRecordList.vue b/src/components/bid-record/BidRecordList.vue
index edc4102..35c4228 100644
--- a/src/components/bid-record/BidRecordList.vue
+++ b/src/components/bid-record/BidRecordList.vue
@@ -1,15 +1,82 @@
 <template>
-  <div
-    v-if="isLoading"
-    style="min-height: 70vh; display: grid; place-items: center"
-  >
-    <div class="spinner-border" role="status">
-      <span class="visually-hidden">Loading...</span>
+  <div v-if="isLoading" class="fadein animation-duration-400">
+    <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 class="">
-    <div class="container">
-      <div v-if="isSuccess" class="accordion" id="accordionExample">
+  <div
+    v-else
+    style="min-height: 70vh"
+    class="container fadein animation-duration-400"
+  >
+    <div v-if="isSuccess" class="grid justify-content-center">
+      <div class="col-12 lg:col-11">
+        <Card>
+          <template #title>
+            <div class="font-normal">Rekod Bidaan Hari Ini : {{ date }}</div>
+          </template>
+          <template #content>
+            <Accordion :multiple="true">
+              <AccordionTab v-for="bid in listBid" v-bind:key="bid">
+                <template #header>
+                  <span>{{ bid.caw_name }}</span>
+                </template>
+                <div class="overflow-x-scroll">
+                  <table class="table text-center table-bordered table-hover">
+                    <tbody>
+                      <tr class="table-light">
+                        <td>Bil</td>
+                        <td style="min-width: 240px">No Rujukan</td>
+                        <td style="min-width: 210px">Tarikh/Masa Bidaan</td>
+                        <td>Berat</td>
+                        <td style="min-width: 120px">Harga Bida</td>
+                      </tr>
+                      <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
+                          >
+                        </td>
+                        <td>{{ item.masa_bidaan }}</td>
+                        <td>{{ item.berat }}g</td>
+                        <td>
+                          RM{{
+                            item.hargabida
+                              ?.toString()
+                              .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                          }}
+                        </td>
+                      </tr>
+                      <tr style="text-transform: uppercase">
+                        <th colspan="3">Jumlah</th>
+                        <th>{{bid.total_berat}}g</th>
+                        <th>RM{{
+                            bid.total_bidaan
+                              ?.toString()
+                              .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                          }}</th>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </AccordionTab>
+            </Accordion>
+          </template>
+        </Card>
+      </div>
+      <!-- <div class="accordion" id="accordionExample">
         <div v-for="bid in listBid" v-bind:key="bid" class="accordion-item">
           <h2 class="accordion-header" id="headingOne">
             <button
@@ -54,7 +121,13 @@
                     </td>
                     <td>{{ item.masa_bidaan }}</td>
                     <td>{{ item.berat }}g</td>
-                    <td>RM{{ item.hargabida?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</td>
+                    <td>
+                      RM{{
+                        item.hargabida
+                          ?.toString()
+                          .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                      }}
+                    </td>
                   </tr>
                   <tr style="text-transform: uppercase">
                     <th colspan="3">Jumlah</th>
@@ -66,9 +139,27 @@
             </div>
           </div>
         </div>
-      </div>
-      <div v-else>
-        <p>Tiada Data</p>
+      </div> -->
+    </div>
+    <div v-else>
+      <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>
+          </div>
+          <div class="col-12 text-center">
+            <span class="text-400">Tiada Rekod Bidaan Hari Ini.</span>
+          </div>
+          <div class="col-12 text-center">
+            <span class="text-400"
+              >Sila rujuk halaman
+              <router-link v-bind:to="{ name: 'home' }">Utama</router-link>
+              untuk jadual lelong.</span
+            >
+          </div>
+        </div>
       </div>
     </div>
 
@@ -95,47 +186,63 @@
             ></button>
           </div>
           <div class="modal-body">
-            <div class="row p-2">
+            <div class="grid">
               <div
-                class="col"
+                class="col-12 lg:col-6"
                 style="
                   display: flex;
                   justify-content: center;
                   align-items: center;
                   border: 1px solid rgba(0, 0, 0, 0.125);
-                  min-height: 400px;
-                  min-width: 550px;
+                  min-height: 300px;
+                  min-width: 300px;
+                  max-height: 600px;
+                  max-width: 600px;
                 "
               >
                 -gambar marhun-
               </div>
-              <div class="col">
-                <table class="table table-bordered">
-                  <tbody>
-                    <tr class="table-light">
-                      <th scope="col">Bil</th>
-                      <th scope="col">Jenis</th>
-                      <th scope="col">Karat</th>
-                      <th scope="col">Berat</th>
-                      <th scope="col">Harga Asas</th>
-                    </tr>
-                    <tr
-                      v-for="(marhun, index) in theData.lelongbidmarhun"
-                      v-bind:key="marhun"
-                    >
-                      <td>{{ index + 1 }}</td>
-                      <td>{{ marhun.marhun }}</td>
-                      <td>{{ marhun.karat }}</td>
-                      <td>{{ marhun.berat }}g</td>
-                      <td>RM{{ marhun.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</td>
-                    </tr>
-                    <tr style="text-transform: uppercase">
-                      <th colspan="3">Jumlah</th>
-                      <th>{{ theData.berat }}g</th>
-                      <th>RM{{ theData.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</th>
-                    </tr>
-                  </tbody>
-                </table>
+              <div class="col-12 text-center lg:col-6">
+                <div class="overflow-x-scroll">
+                  <table class="table table-bordered">
+                    <tbody>
+                      <tr class="table-light">
+                        <td>Bil</td>
+                        <td style="min-width: 115px">Jenis Marhun</td>
+                        <td style="min-width: 42px">Karat</td>
+                        <td style="min-width: 42px">Berat</td>
+                        <td style="min-width: 102px">Harga Asas</td>
+                      </tr>
+                      <tr
+                        v-for="(marhun, index) in theData.lelongbidmarhun"
+                        v-bind:key="marhun"
+                      >
+                        <td>{{ index + 1 }}</td>
+                        <td>{{ marhun.marhun }}</td>
+                        <td>{{ marhun.karat }}</td>
+                        <td>{{ marhun.berat }}g</td>
+                        <td>
+                          RM{{
+                            marhun.hargaasas
+                              ?.toString()
+                              .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                          }}
+                        </td>
+                      </tr>
+                      <tr style="text-transform: uppercase">
+                        <td colspan="3">Jumlah</td>
+                        <td>{{ theData.berat }}g</td>
+                        <td>
+                          RM{{
+                            theData.hargaasas
+                              ?.toString()
+                              .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                          }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
                 <div class="row justify-content-center">
                   <div class="col-6">
                     <label class="col-form-label">Jumlah Harga Bida</label>
@@ -143,7 +250,11 @@
                   <div class="col-6">
                     <div class="input-group mb-3">
                       <span class="input-group-text">RM</span>
-                      <span class="form-control input-group-text">{{theData.hargabida?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ''}}</span>
+                      <span class="form-control font-bold input-group-text">{{
+                        theData.hargabida
+                          ?.toString()
+                          .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                      }}</span>
                     </div>
                   </div>
                 </div>
@@ -151,13 +262,11 @@
             </div>
           </div>
           <div class="modal-footer">
-            <button
-              type="button"
-              class="btn btn-secondary"
+            <Button
+              class="p-button-sm"
+              label="Kembali"
               data-bs-dismiss="modal"
-            >
-              Kembali
-            </button>
+            />
           </div>
         </div>
       </div>
@@ -182,8 +291,18 @@ export default {
   },
   mounted: function () {
     this.bidRecord();
+    this.getDate();
   },
   methods: {
+    getDate() {
+      var today = new Date();
+      var dd = String(today.getDate()).padStart(2, "0");
+      var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
+      var yyyy = today.getFullYear();
+
+      today = yyyy + "-" + mm + "-" + dd;
+      this.date = today;
+    },
     bidRecord() {
       this.isLoading = true;
       axios
@@ -200,7 +319,6 @@ export default {
             this.isLoading = false;
             this.isSuccess = true;
             this.listBid = response.data.lelongbidder;
-            console.log(response.data);
           } else {
             this.isLoading = false;
             this.isSuccess = false;
@@ -216,4 +334,10 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.container-height {
+  min-height: 70vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/bid-record/TheBidRecord.vue b/src/components/bid-record/TheBidRecord.vue
index 813c144..a4a9e29 100644
--- a/src/components/bid-record/TheBidRecord.vue
+++ b/src/components/bid-record/TheBidRecord.vue
@@ -1,6 +1,6 @@
 <template>
   <the-template>
-    <div class="container">
+    <!-- <div class="container">
       <div class="row justify-content-center">
         <div class="col-10">
           <h2>Rekod Bidaan Hari Ini : {{ date }}</h2>
@@ -16,7 +16,8 @@
           </base-card>
         </div>
       </div>
-    </div>
+    </div> -->
+    <bid-record-list v-bind:key="statusComponent"></bid-record-list>
   </the-template>
 </template>
 
diff --git a/src/components/cart/CartListNew.vue b/src/components/cart/CartListNew.vue
index 236f471..b66ad29 100644
--- a/src/components/cart/CartListNew.vue
+++ b/src/components/cart/CartListNew.vue
@@ -170,6 +170,18 @@
                           }}
                         </th>
                       </tr>
+                      <tr style="text-transform: uppercase">
+                        <td colspan="2">Jumlah</td>
+                        <td>{{ item.total_berat }}g</td>
+                        <td class="table-light"></td>
+                        <th>
+                          RM{{
+                            item.total_bidaan
+                              ?.toString()
+                              .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                          }}
+                        </th>
+                      </tr>
                     </tbody>
                   </table>
                 </div>
@@ -188,14 +200,20 @@
               <i class="pi pi-paperclip text-primary"
                 ><span class="ml-1">Jumlah Surat</span></i
               >
-              <p>126</p>
+              <p>{{ masterTotalSurat }}</p>
             </div>
             <div>
               <i class="pi pi-wallet text-primary"
                 ><span class="ml-1">Jumlah Bidaan</span></i
               >
 
-              <p class="font-bold text-xl">RM121,200.00</p>
+              <p class="font-bold text-xl">
+                RM{{
+                  masterTotalBidaan
+                    ?.toString()
+                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                }}
+              </p>
             </div>
             <!-- <Button
               label="Teruskan"
@@ -276,44 +294,46 @@
               <div class="col-12 text-center lg:col-6">
                 <!-- <p>Marhun: {{ theSurat.marhun }}</p>
                 <p>Jumlah Berat: {{ theSurat.berat }}g</p> -->
-                <table class="table table-bordered">
-                  <tbody>
-                    <tr class="table-light">
-                      <td scope="col">No</td>
-                      <td scope="col">Jenis Marhun</td>
-                      <td scope="col">Karat</td>
-                      <td scope="col">Berat</td>
-                      <td scope="col">Harga Asas</td>
-                    </tr>
-                    <tr
-                      v-for="(data, index) in theSurat.lelongbidmarhun"
-                      v-bind:key="data"
-                    >
-                      <td>{{ index + 1 }}</td>
-                      <td>{{ data.marhun }}</td>
-                      <td>{{ data.karat }}</td>
-                      <td>{{ data.berat }}g</td>
-                      <td>
-                        RM{{
-                          data.hargaasas
-                            ?.toString()
-                            .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
-                        }}
-                      </td>
-                    </tr>
-                    <tr style="text-transform: uppercase">
-                      <td colspan="3">Jumlah</td>
-                      <td>{{ theSurat.berat }}g</td>
-                      <td>
-                        RM{{
-                          theSurat.hargaasas
-                            ?.toString()
-                            .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
-                        }}
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
+                <div class="overflow-x-scroll">
+                  <table class="table table-bordered">
+                    <tbody>
+                      <tr class="table-light">
+                        <td>Bil</td>
+                        <td style="min-width: 115px">Jenis Marhun</td>
+                        <td style="min-width: 42px">Karat</td>
+                        <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"
+                      >
+                        <td>{{ index + 1 }}</td>
+                        <td>{{ data.marhun }}</td>
+                        <td>{{ data.karat }}</td>
+                        <td>{{ data.berat }}g</td>
+                        <td>
+                          RM{{
+                            data.hargaasas
+                              ?.toString()
+                              .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                          }}
+                        </td>
+                      </tr>
+                      <tr style="text-transform: uppercase">
+                        <td colspan="3">Jumlah</td>
+                        <td>{{ theSurat.berat }}g</td>
+                        <td>
+                          RM{{
+                            theSurat.hargaasas
+                              ?.toString()
+                              .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                          }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
                 <!-- <div class="row justify-content-center">
                   <div class="col-3">
                     <label class="col-form-label text-end"
@@ -602,24 +622,26 @@
             <h5>ADAKAH ANDA PASTI?</h5>
             <p>Padam item dalam troli.</p>
 
-            <table class="table table-bordered">
-              <tbody>
-                <tr class="bg-light">
-                  <th>SAG</th>
-                  <th>Harga Bida</th>
-                </tr>
-                <tr>
-                  <td>{{ theSurat.norujukan }}</td>
-                  <td>
-                    RM{{
-                      theSurat.hargabida
-                        ?.toString()
-                        .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
-                    }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+            <div class="overflow-x-scroll">
+              <table class="table table-bordered">
+                <tbody>
+                  <tr class="bg-light">
+                    <td style="min-width: 220px">SAG</td>
+                    <td style="min-width: 170px">Harga Bida</td>
+                  </tr>
+                  <tr>
+                    <td>{{ theSurat.norujukan }}</td>
+                    <th>
+                      RM{{
+                        theSurat.hargabida
+                          ?.toString()
+                          .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                      }}
+                    </th>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
             <p class="text-danger text-sm mt-3">
               <i>*Tindakan ini tidak dapat dikembalikan</i>
             </p>
@@ -753,6 +775,24 @@
         <h3>ADAKAH ANDA PASTI?</h3>
       </div>
       <div class="text-center">
+        <table class="table table-bordered">
+          <tbody>
+            <tr class="bg-light">
+              <td style="min-width: 220px">Jumlah Surat</td>
+              <td style="min-width: 170px">Jumlah Bidaan</td>
+            </tr>
+            <tr>
+              <td>{{ masterTotalSurat }}</td>
+              <th>
+                RM{{
+                  masterTotalBidaan
+                    ?.toString()
+                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                }}
+              </th>
+            </tr>
+          </tbody>
+        </table>
         <div class="mt-3 mb-1">
           <label>
             <input type="checkbox" v-model="akadLelong" />
@@ -843,6 +883,8 @@ export default {
       isLoadingDaftar: false,
       isLoading: false,
       isSuccess: false,
+      masterTotalBidaan: Number,
+      masterTotalSurat: integer,
       listItems: "",
       theSurat: "",
       tambahanBidaan: "",
@@ -893,8 +935,11 @@ export default {
         .then((response) => {
           this.isLoading = false;
           if (response.data.success == true) {
+            console.log(response);
             this.isSuccess = true;
             this.listItems = response.data.cart;
+            this.masterTotalSurat = response.data.master_total_surat;
+            this.masterTotalBidaan = response.data.master_total_bidaan;
           } else if (response.data.success == false) {
             this.isSuccess = false;
           }