From 9d94d8480fbd0d6f15008eb4e0317d2445a041d5 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Thu, 19 May 2022 11:57:57 +0800
Subject: [PATCH] fix pay, cart & profile loader

---
 src/components/Cart.vue            | 775 ++++++++++++++++++-----------
 src/components/Pay.vue             |  17 +-
 src/components/Profile.vue         |  14 +-
 src/components/dashboard/Todos.vue |  23 +
 4 files changed, 536 insertions(+), 293 deletions(-)
 create mode 100644 src/components/dashboard/Todos.vue

diff --git a/src/components/Cart.vue b/src/components/Cart.vue
index 822841a..9d6717f 100644
--- a/src/components/Cart.vue
+++ b/src/components/Cart.vue
@@ -3,280 +3,250 @@
   </div> -->
 
   <Navbar />
-  <div class="spinner-border" v-if="loading" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <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 class="container">
-    <button
-      class="btn btn-secondary float-start"
-      style="margin: 5px"
-      onclick="history.back()"
-    >
-      Back <i class="bi bi-backspace-fill"></i>
-    </button>
-    <div class="wrapper wrapper-content animated fadeInRight">
-      <h1>Cart <i class="bi bi-cart-fill"></i></h1>
-      <div class="row">
-        <div class="col-lg-9 col-sm-12" style="overflow-x: auto">
-          <div class="ibox">
-            <div class="table-responsive">
-              <div class="ibox-content">
-                <table class="table shoping-cart-table">
-                  <thead>
-                    <tr>
-                      <td>Maklumat Marhun</td>
-                      <td
-                        width="30"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        Harga Asas
-                        <!-- {{ countDown }} -->
-                      </td>
-                      <td
-                        width="120"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        Harga Bida
-                      </td>
-                      <td
-                        width="80"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        Tindakan
-                      </td>
-                    </tr>
-                  </thead>
-                </table>
-              </div>
-              <div
-                class="ibox-content"
-                v-for="senaraiCart in senaraiCarts"
-                :key="senaraiCart.id"
-              >
-                <table class="table shoping-cart-table">
-                  <tbody>
-                    <tr>
-                      <!-- <td width="90">
+    <div>
+      <button
+        class="btn btn-secondary float-start"
+        style="margin: 5px"
+        onclick="history.back()"
+      >
+        Back <i class="bi bi-backspace-fill"></i>
+      </button>
+      <div class="wrapper wrapper-content animated fadeInRight">
+        <h1>Cart <i class="bi bi-cart-fill"></i></h1>
+        <div class="row">
+          <div class="col-lg-9 col-sm-12" style="overflow-x: auto">
+            <div class="ibox">
+              <div class="table-responsive">
+                <div class="accordion-body">
+                  <div class="ibox-content" style="padding-bottom: none">
+                    <table class="table shoping-cart-table">
+                      <thead>
+                        <tr>
+                          <td>Maklumat Marhun</td>
+                          <td
+                            width="30"
+                            style="width: 145.82px; text-align: center"
+                          >
+                            Harga Asas
+                            <!-- {{ countDown }} -->
+                          </td>
+                          <td
+                            width="120"
+                            style="width: 145.82px; text-align: center"
+                          >
+                            Harga Bida
+                          </td>
+                          <td
+                            width="80"
+                            style="width: 145.82px; text-align: center"
+                          >
+                            Tindakan
+                          </td>
+                        </tr>
+                      </thead>
+                    </table>
+                  </div>
+                  <div
+                    class="ibox-content"
+                    v-for="senaraiCart in senaraiCarts.slice().reverse()"
+                    :key="senaraiCart.id"
+                    style="border-bottom: 1px solid #e7eaec"
+                  >
+                    <table class="table shoping-cart-table">
+                      <tbody>
+                        <tr>
+                          <!-- <td width="90">
                         <div class="cart-product-imitation"></div>
                       </td> -->
-                      <td class="desc">
-                        <h3 class="text-primary">
-                          {{ senaraiCart.datalelongbid.norujukan }}
-                        </h3>
-                        <!-- <p class="small">
+                          <td class="desc">
+                            <h3 class="text-primary">
+                              {{ senaraiCart.datalelongbid.norujukan }}
+                            </h3>
+                            <!-- <p class="small">
                           It is a long established fact that a reader will be
                           distracted by the readable content of a page when
                           looking at its layout. The point of using Lorem Ipsum
                           is
                         </p> -->
-                        <dl class="small m-b-none">
-                          <!-- <dt>Maklumat SAG</dt> -->
-                          <p>Marhun: {{ senaraiCart.datalelongbid.marhun }}</p>
-                          <p>Berat: {{ senaraiCart.datalelongbid.berat }}g</p>
-                          <p>
-                            Cawangan:
-                            {{ senaraiCart.datalelongbid.cawangan.caw_name }}
-                          </p>
-                        </dl>
+                            <dl class="small m-b-none">
+                              <!-- <dt>Maklumat SAG</dt> -->
+                              <p>
+                                Marhun:
+                                {{ senaraiCart.datalelongbid.marhun }}
+                              </p>
+                              <p>
+                                Berat:
+                                {{ senaraiCart.datalelongbid.berat }}g
+                              </p>
+                              <p>
+                                Cawangan:
+                                {{
+                                  senaraiCart.datalelongbid.cawangan.caw_name
+                                }}
+                              </p>
+                            </dl>
 
-                        <div class="m-t-sm">
-                          <!-- <a href="#" class="text-muted"
+                            <div class="m-t-sm">
+                              <!-- <a href="#" class="text-muted"
                             ><i class="fa fa-gift"></i> Add gift package</a
                           >
                           | -->
-                          <button
-                            class="btn btn-outline-danger"
-                            @click="deleteCart(senaraiCart.id)"
-                          >
-                            Padam Item
-                          </button>
-                          <!-- <p>{{ senaraiCart.datalelongbid.lelongbidmarhun }}</p> -->
-                        </div>
-                      </td>
+                              <button
+                                class="btn btn-outline-danger"
+                                data-bs-toggle="modal"
+                                data-bs-target="#deleteModal"
+                                @click="deleteModal(senaraiCart)"
+                              >
+                                Hapus
+                              </button>
+                              <!-- <p>{{ senaraiCart.datalelongbid.lelongbidmarhun }}</p> -->
+                            </div>
+                          </td>
 
-                      <td
-                        width="30"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        RM{{ senaraiCart.datalelongbid.hargaasas }}
-                        <!-- <s class="small text-muted">$230,00</s> -->
-                      </td>
-                      <td
-                        width="30"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        <h4>RM{{ senaraiCart.hargabida }}</h4>
-                      </td>
-                      <td
-                        width="120"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        <!-- <input
+                          <td
+                            width="30"
+                            style="width: 145.82px; text-align: center"
+                          >
+                            RM{{ senaraiCart.datalelongbid.hargaasas }}
+                            <!-- <s class="small text-muted">$230,00</s> -->
+                          </td>
+                          <td
+                            width="30"
+                            style="width: 145.82px; text-align: center"
+                          >
+                            <h4>RM{{ senaraiCart.hargabida }}</h4>
+                          </td>
+                          <td
+                            width="120"
+                            style="width: 145.82px; text-align: center"
+                          >
+                            <!-- <input
                           type="text"
                           class="form-control"
                           placeholder="+100.00"
                           disabled
                         /> -->
-                        <button
-                          class="btn btn-outline-warning"
-                          data-bs-toggle="modal"
-                          data-bs-target="#editModal"
-                          @click="editModal(senaraiCart)"
+                            <button
+                              class="btn btn-outline-warning"
+                              data-bs-toggle="modal"
+                              data-bs-target="#editModal"
+                              @click="editModal(senaraiCart)"
+                            >
+                              Ubah
+                            </button>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+               
+                <!-- <div class="ibox-footer">
+                  <table class="table shoping-cart-table">
+                    <thead>
+                      <tr>
+                        <td>Jumlah Bidaan</td>
+                        <td
+                          width="80"
+                          style="width: 145.82px; text-align: center"
                         >
-                          Ubah
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-              <div class="ibox-footer">
-                <table class="table shoping-cart-table">
-                  <thead>
-                    <tr>
-                      <td>Jumlah Bidaan</td>
-                      <td
-                        width="80"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        RM9009009
-                      </td>
-                    </tr>
-                  </thead>
-                </table>
+                          RM9009009
+                        </td>
+                      </tr>
+                    </thead>
+                  </table>
+                </div> -->
               </div>
             </div>
           </div>
-        </div>
 
-        <div class="col-3">
-          <div class="ibox" style="border: solid 0.5px">
-            <div class="ibox-title" style="padding: 20px">
-              <h5>Ringkasan Cart</h5>
-            </div>
-            <div class="ibox-content">
-              <!-- <span> Jumlah Bidaan </span>
-              <h2 class="font-bold">RM6,540.00</h2> -->
-
-              <!-- <span class="text-muted small">
-                <i
-                  >*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
-                  yang dimenanangi pembida.</i
-                >
-              </span> -->
-              <span> Yuran Bidaan </span>
-              <h2 class="font-bold">RM10.00</h2>
-
-              <!-- <span class="text-muted small">
-                <i
-                  >*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
-                  yang dimenanangi pembida.</i
-                >
-              </span> -->
-              <hr />
-              <span class="text-muted small">
-                <i
-                  >*Caj RM10.00 akan dikenakan untuk membuat pendaftaran bidaan.
-                  Sila klik butang dibawah untuk meneruskan.</i
-                >
-              </span>
-              <div class="m-t-sm">
-                <div class="btn-group">
-                  <!-- <a href="#" class="btn btn-white btn-sm"> Batal</a> -->
-                  <button
-                    @click="feePayment()"
-                    target="_blank"
-                    class="btn btn-primary"
+          <div class="col-3">
+            <div class="ibox" style="border: #e7eaec solid 1px">
+              <div class="ibox-title" style="padding: 20px">
+                <h5>Ringkasan Cart</h5>
+              </div>
+              <div class="ibox-content">
+                <div class="small m-t-xs">
+                  <div class="d-flex justify-content-between">
+                    <p class="mb-0">Jumlah Bilangan Surat</p>
+                    <p class="mb-0">{{ total_sag }}</p>
+                  </div>
+                </div>
+                <hr />
+                <div class="small m-t-xs">
+                  <div class="d-flex justify-content-between">
+                    <p class="mb-0">Jumlah Bidaan</p>
+                    <p class="mb-0">RM{{ total_bidaan }}</p>
+                  </div>
+                </div>
+                <hr />
+                <span> Yuran </span>
+                <h2 class="font-bold">RM10.00</h2>
+                <hr />
+                <span class="text-muted small">
+                  <i
+                    >*Caj yuran akan dikenakan untuk membuat pendaftaran
+                    bidaan.</i
                   >
-                    Daftar Bidaan <i class="fa fa-shopping-cart"></i>
-                  </button>
+                </span>
+                <div class="m-t-sm">
+                  <div class="btn-group">
+                    <!-- <a href="#" class="btn btn-white btn-sm"> Batal</a> -->
+                    <button
+                      data-bs-toggle="modal"
+                      data-bs-target="#payModal"
+                      class="btn btn-primary"
+                    >
+                      Teruskan <i class="fa fa-shopping-cart"></i>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <!-- <div class="ibox" style="border: solid 0.5px">
-            <div class="ibox-title">
-              <h5>Bayaran Pendaftaran</h5>
-            </div>
-            <div class="ibox-content">
-              <span> Jumlah Bidaan </span>
-              <h2 class="font-bold">RM10.00</h2>
-
-              <hr />
-              <span class="text-muted small">
-                <i
-                  >*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
-                  yang dimenanangi pembida.</i
-                >
-              </span>
-            </div>
-          </div> -->
-
-          <!-- <div class="ibox" style="border: solid 0.5px">
-            <div class="ibox-title">
-              <h5>Support</h5>
-            </div>
-            <div class="ibox-content text-center">
-              <h3><i class="fa fa-phone"></i> +43 100 783 001</h3>
-              <span class="small">
-                Please contact with us if you have any questions. We are
-                avalible 24h.
-              </span>
-            </div>
-          </div> -->
-
-          <div class="ibox" style="border: solid 0.5px">
-            <div class="ibox-content">
-              <p class="font-bold">Masa Tamat Lelongan</p>
-              <hr />
-              <div>
-                <!-- <a href="#" class="product-name"> Product 1</a> -->
-                <div class="small m-t-xs">
-                  <div class="d-flex justify-content-between">
-                    <p class="mb-0">Ar-Rahn Kota Bharu 2</p>
-                    <p class="mb-0">00:15:29</p>
-                  </div>
-                </div>
+            <!-- <div class="ibox" style="border: solid 0.5px">
+              <div class="ibox-content">
+                <p class="font-bold">Masa Tamat Lelongan</p>
                 <hr />
-                <div class="small m-t-xs">
-                  <div class="d-flex justify-content-between">
-                    <p class="mb-0">Ar-Rahn Rantau Panjang</p>
-                    <p class="mb-0">00:20:29</p>
+                <div> -->
+            <!-- <a href="#" class="product-name"> Product 1</a> -->
+            <!-- <div class="small m-t-xs">
+                    <div class="d-flex justify-content-between">
+                      <p class="mb-0">Ar-Rahn Kota Bharu 2</p>
+                      <p class="mb-0">00:15:29</p>
+                    </div>
+                  </div>
+                  <hr />
+                  <div class="small m-t-xs">
+                    <div class="d-flex justify-content-between">
+                      <p class="mb-0">Ar-Rahn Rantau Panjang</p>
+                      <p class="mb-0">00:20:29</p>
+                    </div>
+                  </div>
+                  <hr />
+                  <div class="small m-t-xs">
+                    <div class="d-flex justify-content-between">
+                      <p class="mb-0">Ar-Rahn OneStop</p>
+                      <p class="mb-0">00:15:29</p>
+                    </div>
                   </div>
                 </div>
-                <hr />
-                <div class="small m-t-xs">
-                  <div class="d-flex justify-content-between">
-                    <p class="mb-0">Ar-Rahn OneStop</p>
-                    <p class="mb-0">00:15:29</p>
-                  </div>
-                </div>
-                <!-- <div class="small m-t-xs">
-                  Masa Tamat Lelongan: 00:15:29
-                </div> -->
-                <!-- <div class="m-t text-righ">
-                  <a href="#" class="btn btn-xs btn-outline btn-primary"
-                    >Info <i class="fa fa-long-arrow-right"></i>
-                  </a>
-                </div> -->
               </div>
-              <!-- <hr /> -->
-              <!-- <div>
-                <a href="#" class="product-name"> Product 2</a>
-                <div class="small m-t-xs">
-                  Many desktop publishing packages and web page editors now.
-                </div>
-                <div class="m-t text-righ">
-                  <a href="#" class="btn btn-xs btn-outline btn-primary"
-                    >Info <i class="fa fa-long-arrow-right"></i>
-                  </a>
-                </div>
-              </div> -->
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
     </div>
+
+    <!-- modal ubah bidaan -->
     <div
       class="modal fade"
       id="editModal"
@@ -284,13 +254,13 @@
       aria-labelledby="editModalLabel"
       aria-hidden="true"
       data-bs-backdrop="static"
-      data-bs-keyboard="false"
     >
-      <!-- <form @submit.prevent="submit"> -->
       <div class="modal-dialog modal-lg modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
-            <!-- <h5 class="modal-title" id="editModalLabel">{{norujukan.datalelongbid.norujukan}}</h5> -->
+            <h5 class="modal-title" id="editModalLabel">
+              {{ test.norujukan }}
+            </h5>
             <button
               type="button"
               class="btn-close"
@@ -301,22 +271,104 @@
 
           <div class="modal-body">
             <div class="row m-2">
-              <!-- <div class="col-2 border"></div> -->
               <div class="col">
-                <table class="table">
-                  <thead>
+                <!-- <h5>No Rujukan: {{ test.norujukan }}</h5> -->
+                <p>Marhun: {{ test.marhun }}</p>
+                <p>Jumlah Berat: {{ test.berat }}g</p>
+                <table class="table table-bordered">
+                  <!-- <thead>
                     <tr>
                       <th scope="col">No</th>
                       <th scope="col">Jenis Marhun</th>
                       <th scope="col">Karat</th>
                       <th scope="col">Berat</th>
+                      <th scope="col">Nota</th>
                       <th scope="col">Harga Asas</th>
                     </tr>
-                  </thead>
-                  <tbody></tbody>
+                  </thead> -->
+                  <tbody>
+                    <tr class="table-light">
+                      <th scope="col">No</th>
+                      <th scope="col">Jenis Marhun</th>
+                      <th scope="col">Karat</th>
+                      <th scope="col">Berat</th>
+                      <th scope="col">Nota</th>
+                      <th scope="col">Harga Asas</th>
+                    </tr>
+                    <tr v-for="(data, index) in test2" :key="index.id">
+                      <td>{{ index + 1 }}</td>
+                      <td>{{ data.marhun }}</td>
+                      <td>{{ data.karat }}</td>
+                      <td>{{ data.berat }}g</td>
+                      <td>{{ data.nota }}</td>
+                      <td>RM{{ data.hargaasas }}</td>
+                    </tr>
+                  </tbody>
                 </table>
-                <p>harga bida: RM{{ norujukan.hargabida }}</p>
-                <div class="row">
+                <div class="row justify-content-center">
+                  <div class="col-5">
+                    <label class="col-form-label text-end"
+                      >Jumlah Harga Asas</label
+                    >
+                  </div>
+                  <div class="col-4">
+                    <div class="input-group mb-3">
+                      <span class="input-group-text">RM</span>
+                      <!-- <input
+                        type="text"
+                        class="form-control"
+                        disabled
+                      /> -->
+                      <div
+                        style="background-color: #e9ecef"
+                        class="form-control text-start justify-content-start"
+                        disabled
+                      >
+                        {{ test.hargaasas }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row justify-content-center">
+                  <div class="col-5">
+                    <label class="col-form-label">Tambahan Harga Bida</label>
+                  </div>
+                  <div class="col-4">
+                    <div class="input-group mb-3">
+                      <span class="input-group-text">RM</span>
+                      <input
+                        v-model="tambahan"
+                        type="text"
+                        id="tambahanbida"
+                        class="form-control"
+                        @change="calcTotal(tambahan)"
+                      />
+                      <div
+                        style="font-size: 10px"
+                        class="fst-italic text-danger"
+                      >
+                        *Minimum tambahan harga bida adalah RM1
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row justify-content-center">
+                  <div class="col-5">
+                    <label class="col-form-label">Jumlah Harga Bida</label>
+                  </div>
+                  <div class="col-4">
+                    <div class="input-group mb-3">
+                      <span class="input-group-text">RM</span>
+                      <input
+                        type="text"
+                        class="form-control"
+                        v-model="formEdit.hargabida"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                </div>
+                <!-- <div class="row">
                   <div class="input-group mb-3">
                     <label class="col-form-label me-2"
                       >Tambahan Harga Bida</label
@@ -333,10 +385,10 @@
                     <input
                       type="text"
                       class="form-control"
-                      v-model="form.hargabida"
+                      v-model="formEdit.hargabida"
                     />
                   </div>
-                </div>
+                </div> -->
               </div>
             </div>
           </div>
@@ -354,11 +406,142 @@
           </div>
         </div>
       </div>
-      <!-- </form> -->
     </div>
 
-    <Footer />
+    <!-- modal padam bidaan -->
+    <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">
+          <div class="modal-header">
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+
+          <div class="modal-body">
+            <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
+            <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>{{ test.norujukan }}</td>
+                  <td>RM{{ data.hargabida }}</td>
+                </tr>
+              </tbody>
+            </table>
+            <p class="text-danger text-sm mt-3">
+              <i>*Tindakan ini tidak dapat dikembalikan</i>
+            </p>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="submit"
+              class="btn btn-secondary me-2"
+              data-bs-dismiss="modal"
+            >
+              Kembali
+            </button>
+            <button
+              type="submit"
+              class="btn btn-danger"
+              @click="deleteCart(data.id)"
+            >
+              Padam
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- modal bayar yuran -->
+    <div
+      class="modal fade"
+      id="payModal"
+      tabindex="-1"
+      aria-labelledby="payModalLabel"
+      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="editModalLabel">Daftar Bidaan</h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+
+          <div class="modal-body">
+            <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
+            <p>ADAKAH ANDA PASTI?</p>
+            <h4 class="text-danger">
+              <i
+                >Caj yuran, RM10 akan dikenakan untuk setiap kali pendaftaran
+                bidaan.</i
+              >
+            </h4>
+
+            <table class="table table-bordered">
+              <tbody>
+                <tr class="bg-light">
+                  <th>Jumlah Surat</th>
+                  <th>Jumlah Bidaan</th>
+                </tr>
+                <tr>
+                  <td>{{ total_sag }}</td>
+                  <td>RM{{ total_bidaan }}</td>
+                </tr>
+              </tbody>
+            </table>
+            <!-- <p class="text-danger text-sm mt-3">
+              <i>*Tindakan ini tidak dapat dikembalikan</i>
+            </p> -->
+          </div>
+          <div class="modal-footer">
+            <button
+              type="submit"
+              class="btn btn-secondary me-2"
+              data-bs-dismiss="modal"
+            >
+              Kembali
+            </button>
+            <button type="submit" class="btn btn-success" @click="feePayment()">
+              Bayar
+            </button>
+            <p
+              class="fst-italic mt-3 fw-lighter"
+              style="text-align: right; font-size: small"
+            >
+              *Pelayar akan dialihkan ke halaman pembayaran jika butang 'Bayar'
+              ditekan.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
+  <Footer />
 </template>
 
 <script>
@@ -376,10 +559,13 @@ export default {
     return {
       loading: false,
       senaraiCarts: [],
-      dataLelongBids: [],
-      lelongBidMarhuns: [],
-      norujukan: "",
-      form: {
+      tambahan: "",
+      test: "",
+      test2: [],
+      // dataLelongBids: [],
+      // lelongBidMarhuns: [],
+      data: "",
+      formEdit: {
         id: "",
         hargabida: "",
       },
@@ -390,49 +576,69 @@ export default {
         user_id: "8",
         lelong_id: "20",
       },
+      // jumlah_sag: "",
     };
   },
+  computed: {
+    total_sag() {
+      localStorage.setItem("cart", this.senaraiCarts.length);
+      return this.senaraiCarts.length;
+    },
+    total_bidaan() {
+      let total = 0;
+      this.senaraiCarts.forEach((val) => {
+        total += parseFloat(val.hargabida);
+        //or if you pass float numbers , use parseFloat()
+      });
+      return total.toFixed(2);
+      // console.log(basket_total);
+    },
+  },
   mounted: function () {
     this.listCart();
   },
   methods: {
+    validate: function () {},
     listCart() {
       this.loading = true;
       axios
         .get("/cart/" + localStorage.getItem("id"))
         .then((response) => {
-          let ref = this;
+          // let ref = this;
           this.senaraiCarts = response.data;
 
-          this.senaraiCarts.forEach(function (senaraiCarts, index, arr) {
-            ref.dataLelongBids.push(arr[index].datalelongbid);
-          });
+          // this.senaraiCarts.forEach(function (senaraiCarts, index, arr) {
+          //   ref.dataLelongBids.push(arr[index].datalelongbid);
+          // });
 
-          this.dataLelongBids.forEach(function (dataLelongBids, index, arr2) {
-            ref.lelongBidMarhuns.push(arr2[index].lelongbidmarhun);
-          });
-          console.log(this.lelongBidMarhuns);
+          // this.dataLelongBids.forEach(function (dataLelongBids, index, arr2) {
+          //   ref.lelongBidMarhuns.push(arr2[index].lelongbidmarhun);
+          // });
+          // console.log(this.lelongBidMarhuns);
           this.loading = false;
         })
         .catch((error) => {
           console.log(error);
         });
     },
-    editModal(norujukan) {
-      this.norujukan = norujukan;
-      this.form.id = this.norujukan.id;
-      // this.marhuns = this.norujukan.lelongbidmarhun;
-      // this.form.lelongbid_id = this.norujukan.id;
-
-      // this.try = data().form.lelongbid_id
-      // let carName = this.try;
-      // document.getElementById("demo").innerHTML = carName;
-      // console.log(this.form.lelongbid_id);
-      console.log(norujukan);
+    calcTotal(value) {
+      this.formEdit.hargabida =
+        parseFloat(this.tambahan) + parseFloat(this.test.hargaasas);
+      // console.log(this.norujukan);
+      // console.log(value);
+    },
+    editModal(data) {
+      this.data = data;
+      this.test = this.data.datalelongbid;
+      this.test2 = this.data.datalelongbid.lelongbidmarhun;
+      this.formEdit.id = this.data.id;
+      this.tambahan = this.data.hargabida - this.test.hargaasas;
+      this.formEdit.hargabida = this.data.hargabida;
+      console.log(this.data.hargabida);
     },
     updateItem() {
       axios
-        .post("/updateItem", this.form, {
+        .post("/updateItem", this.formEdit, {
           headers: {
             Authorization: "Bearer " + localStorage.getItem("token"),
           },
@@ -440,24 +646,24 @@ export default {
         .then((response) => {
           console.log(response);
           location.reload();
-          // bidaModal.hide();
-          // call Cart component to refresh
         })
         .catch((error) => {
           console.log(error);
         });
     },
-    deleteCart(norujukan) {
+    deleteModal(data) {
+      this.data = data;
+      this.test = this.data.datalelongbid;
+      console.log(data.datalelongbid.norujukan);
+    },
+    deleteCart(id) {
       axios
-        .get("/deleteItem/" + norujukan, {
+        .get("/deleteItem/" + id, {
           headers: {
             Authorization: "Bearer " + localStorage.getItem("token"),
           },
         })
         .then((response) => {
-          // this.lelong_details = response.data[0];
-          // this.response = response.data[0].lelongbid;
-          // this.sags = this.response;
           console.log(response);
           location.reload();
         })
@@ -470,9 +676,6 @@ export default {
         .post("/feepayment", this.formPayment, {})
         .then((response) => {
           console.log(response);
-          // location.reload();
-          // bidaModal.hide();
-          // call Cart component to refresh
         })
         .catch((error) => {
           console.log(error);
diff --git a/src/components/Pay.vue b/src/components/Pay.vue
index f9986b4..51f9d22 100644
--- a/src/components/Pay.vue
+++ b/src/components/Pay.vue
@@ -3,8 +3,16 @@
   </div> -->
 
   <Navbar />
-  <div class="spinner-border modal-dialog modal-dialog-centered" v-if="loading" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <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 class="container">
     <button
@@ -15,7 +23,7 @@
       Back <i class="bi bi-backspace-fill"></i>
     </button>
     <div class="wrapper wrapper-content animated fadeInRight">
-      <h1>Pay</h1>
+      <h1>Bayar <i class="bi bi-credit-card-2-back-fill"></i></h1>
       <div class="row">
         <div class="col-lg-9 col-sm-12" style="overflow-x: auto">
           <div class="ibox">
@@ -189,9 +197,8 @@
         </div>
       </div>
     </div>
-  <Footer />
   </div>
-
+  <Footer />
 </template>
 
 <script>
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 4921371..7900d28 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -1,7 +1,15 @@
 <template>
   <Navbar />
+  <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 class="container">
+  <div v-else class="container">
     <button
       class="btn btn-secondary float-start"
       style="margin: 5px"
@@ -67,6 +75,7 @@ export default {
   data() {
     return {
       data: [],
+      loading: false
     };
   },
   mounted: function () {
@@ -74,7 +83,7 @@ export default {
   },
   methods: {
     profile() {
-      // this.loading = true;
+      this.loading = true;
       axios
         .get("/user/profile/" + localStorage.getItem("nokp"), {
           headers: {
@@ -85,6 +94,7 @@ export default {
           this.data = response.data[0];
           // this.total_hargabida = response.data[0].total_hargabida;
           console.log(response);
+          this.loading=false;
           // this.loading = false;
         })
         .catch((error) => {
diff --git a/src/components/dashboard/Todos.vue b/src/components/dashboard/Todos.vue
new file mode 100644
index 0000000..094e891
--- /dev/null
+++ b/src/components/dashboard/Todos.vue
@@ -0,0 +1,23 @@
+<template>
+  <div v-for="todo in allTodos" :key="todo.id">
+    <p>{{todo.masakemaskini_data}}</p>
+  </div>
+  <p>{{this.allTodos.length}}</p>
+  <!-- <p>asd</p> -->
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+  name: "Todos",
+  methods: {
+      ...mapActions(["fetchTodos"])
+  },
+  computed: mapGetters(["allTodos"]),
+  created() {
+      this.fetchTodos();
+  }
+
+};
+</script>
\ No newline at end of file