diff --git a/src/components/Login2.vue b/src/components/Login2.vue
deleted file mode 100644
index 38f2041..0000000
--- a/src/components/Login2.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template >
-  <!-- component -->
-  <div class="min-h-screen flex justify-center items-center bg-white">
-    <div
-      class="
-        p-10
-        border-[1px]
-        -mt-10
-        border-slate-200
-        rounded-md
-        flex flex-col
-        items-center
-        space-y-3
-      "
-    >
-      <form>
-        <div class="py-8">
-          <!-- <img
-          width="30"
-          class="-mt-10"
-          src="https://www.paypalobjects.com/images/shared/momgram@2x.png"
-        /> -->
-          <p class="font-bold text-[#0070ba]">Sistem Lelong</p>
-        </div>
-        <input
-          class="p-3 border-[1px] border-slate-500 rounded-sm w-80"
-          placeholder="E-Mail or Phone number"
-          id="username"
-          name="username"
-          model="form.username"
-        />
-        <!-- <form>
-        <v-text-field 
-        label="Email"
-        name="Login"
-        type="text"
-        class="p-3 border-[1px] border-slate-500 rounded-sm w-80"
-        > </v-text-field>
-      </form> -->
-        <div class="flex flex-col space-y-1">
-          <input
-            class="p-3 border-[1px] border-slate-500 rounded-sm w-80"
-            placeholder="Password"
-            id="password"
-            name="password"
-            model="form.password"
-          />
-          <p class="font-bold text-[#0070ba]">Forgot password?</p>
-        </div>
-      </form>
-
-      <div class="flex flex-col space-y-5 w-full">
-        <button
-          class="
-            w-full
-            bg-[#0070ba]
-            rounded-3xl
-            p-3
-            text-white
-            font-bold
-            transition
-            duration-200
-            hover:bg-[#003087]
-          "
-        >
-          Log in
-        </button>
-        <div
-          class="
-            flex
-            items-center
-            justify-center
-            border-t-[1px] border-t-slate-300
-            w-full
-            relative
-          "
-        >
-          <div class="-mt-1 font-bod bg-white px-5 absolute">Or</div>
-        </div>
-        <button
-          class="
-            w-full
-            border-blue-900
-            hover:border-[#003087] hover:border-[2px]
-            border-[1px]
-            rounded-3xl
-            p-3
-            text-[#0070ba]
-            font-bold
-            transition
-            duration-200
-          "
-        >
-          Sign Up
-        </button>
-      </div>
-      <!-- <div class="flex space-x-1 p-20 text-sm">
-        <p class="hover:underline cursor-pointer">German</p>
-        <div class="border-r-[1px] border-r-slate-300"></div>
-        <p class="font-bold hover:underline cursor-pointer">English</p>
-      </div> -->
-    </div>
-
-    <!-- <div
-      class="
-        absolute
-        bottom-0
-        w-full
-        p-3
-        bg-[#F7F9FA]
-        flex
-        justify-center
-        items-center
-        space-x-3
-        text-[14px]
-        font-medium
-        text-[#666]
-      "
-    >
-      <a
-        href="https://www.paypal.com/us/smarthelp/contact-us"
-        target="_blank"
-        class="hover:underline underline-offset-1 cursor-pointer"
-        >Contact Us</a
-      >
-      <a
-        href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full"
-        target="_blank"
-        class="hover:underline underline-offset-1 cursor-pointer"
-        >Privacy</a
-      >
-      <a
-        href="https://www.paypal.com/de/webapps/mpp/ua/legalhub-full"
-        target="_blank"
-        class="hover:underline underline-offset-1 cursor-pointer"
-        >Legal</a
-      >
-      <a
-        href="https://www.paypal.com/de/webapps/mpp/ua/upcoming-policies-full"
-        target="_blank"
-        class="hover:underline underline-offset-1 cursor-pointer"
-        >Policy
-      </a>
-      <a
-        href="https://www.paypal.com/de/webapps/mpp/country-worldwide"
-        target="_blank"
-        class="hover:underline underline-offset-1 cursor-pointer"
-        >Worldwide
-      </a>
-    </div> -->
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        username: "",
-        password: "",
-      },
-    };
-  },
-};
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/src/components/Register2.vue b/src/components/Register2.vue
deleted file mode 100644
index 9b12861..0000000
--- a/src/components/Register2.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<template>
-  <!-- component -->
-  <body class="font-mono bg-gray-400">
-    <!-- Container -->
-    <div class="container mx-auto">
-      <div class="flex justify-center px-6 my-12">
-        <!-- Row -->
-        <div class="w-full xl:w-1/2 lg:w-11/12 flex border-[1px]">
-          <!-- Col -->
-          <!-- <div
-            class="
-              w-full
-              h-auto
-              bg-gray-400
-              hidden
-              lg:block lg:w-5/12
-              bg-cover
-              rounded-l-lg
-            "
-            style="
-              background-image: url('https://source.unsplash.com/Mv9hjnEUHR4/600x800');
-            "
-          ></div> -->
-          <!-- Col -->
-          <div class="w-full bg-white p-5 rounded-lg lg:rounded-l-none">
-            <h3 class="pt-4 text-2xl text-center">Create an Account!</h3>
-            <form class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
-              <div class="mb-4 md:flex md:justify-between">
-                <div class="mb-4 md:mr-2 md:mb-0">
-                  <label
-                    class="block mb-2 text-sm font-bold text-gray-700"
-                    for="firstName"
-                  >
-                    First Name
-                  </label>
-                  <input
-                    class="
-                      w-full
-                      px-3
-                      py-2
-                      text-sm
-                      leading-tight
-                      text-gray-700
-                      border
-                      rounded
-                      shadow
-                      appearance-none
-                      focus:outline-none focus:shadow-outline
-                    "
-                    id="firstName"
-                    type="text"
-                    placeholder="First Name"
-                  />
-                </div>
-                <div class="md:ml-2">
-                  <label
-                    class="block mb-2 text-sm font-bold text-gray-700"
-                    for="lastName"
-                  >
-                    Last Name
-                  </label>
-                  <input
-                    class="
-                      w-full
-                      px-3
-                      py-2
-                      text-sm
-                      leading-tight
-                      text-gray-700
-                      border
-                      rounded
-                      shadow
-                      appearance-none
-                      focus:outline-none focus:shadow-outline
-                    "
-                    id="lastName"
-                    type="text"
-                    placeholder="Last Name"
-                  />
-                </div>
-              </div>
-              <div class="mb-4">
-                <label
-                  class="block mb-2 text-sm font-bold text-gray-700"
-                  for="email"
-                >
-                  Email
-                </label>
-                <input
-                  class="
-                    w-full
-                    px-3
-                    py-2
-                    mb-3
-                    text-sm
-                    leading-tight
-                    text-gray-700
-                    border
-                    rounded
-                    shadow
-                    appearance-none
-                    focus:outline-none focus:shadow-outline
-                  "
-                  id="email"
-                  type="email"
-                  placeholder="Email"
-                />
-              </div>
-              <div class="mb-4 md:flex md:justify-between">
-                <div class="mb-4 md:mr-2 md:mb-0">
-                  <label
-                    class="block mb-2 text-sm font-bold text-gray-700"
-                    for="password"
-                  >
-                    Password
-                  </label>
-                  <input
-                    class="
-                      w-full
-                      px-3
-                      py-2
-                      mb-3
-                      text-sm
-                      leading-tight
-                      text-gray-700
-                      border border-red-500
-                      rounded
-                      shadow
-                      appearance-none
-                      focus:outline-none focus:shadow-outline
-                    "
-                    id="password"
-                    type="password"
-                    placeholder="******************"
-                  />
-                  <p class="text-xs italic text-red-500">
-                    Please choose a password.
-                  </p>
-                </div>
-                <div class="md:ml-2">
-                  <label
-                    class="block mb-2 text-sm font-bold text-gray-700"
-                    for="c_password"
-                  >
-                    Confirm Password
-                  </label>
-                  <input
-                    class="
-                      w-full
-                      px-3
-                      py-2
-                      mb-3
-                      text-sm
-                      leading-tight
-                      text-gray-700
-                      border
-                      rounded
-                      shadow
-                      appearance-none
-                      focus:outline-none focus:shadow-outline
-                    "
-                    id="c_password"
-                    type="password"
-                    placeholder="******************"
-                  />
-                </div>
-              </div>
-              <div class="mb-6 text-center">
-                <button
-                  class="
-                    w-full
-                    px-4
-                    py-2
-                    font-bold
-                    text-white
-                    bg-blue-500
-                    rounded-full
-                    hover:bg-blue-700
-                    focus:outline-none focus:shadow-outline
-                  "
-                  type="button"
-                >
-                  Register Account
-                </button>
-              </div>
-              <hr class="mb-6 border-t" />
-              <div class="text-center">
-                <a
-                  class="
-                    inline-block
-                    text-sm text-blue-500
-                    align-baseline
-                    hover:text-blue-800
-                  "
-                  href="#"
-                >
-                  Forgot Password?
-                </a>
-              </div>
-              <div class="text-center">
-                <!-- <a
-                  class="
-                    inline-block
-                    text-sm text-blue-500
-                    align-baseline
-                    hover:text-blue-800
-                  "
-                  href="./index.html"
-                >
-                  Already have an account? Login!
-                </a> -->
-                <!-- <router-link to="/login">Login</router-link><br /> -->
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</template>
-<script>
-// import Login from './Login.vue'
-
-export default {
-  name: "Register",
-  // components: [
-  //   Login,
-  // ]
-};
-</script>
\ No newline at end of file
diff --git a/src/components/base/BaseDialog.vue b/src/components/base/BaseDialog.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/cart/CartList.vue b/src/components/cart/CartList.vue
new file mode 100644
index 0000000..697003f
--- /dev/null
+++ b/src/components/cart/CartList.vue
@@ -0,0 +1,931 @@
+<template>
+  <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">
+    <div>
+      <!-- <button
+        class="btn btn-secondary float-start"
+        style="margin: 5px"
+        onclick="history.back()"
+      >
+        Kembali <i class="bi bi-backspace-fill"></i>
+      </button> -->
+      <div class="wrapper wrapper-content animated fadeInRight">
+        <h1>Troli <i class="bi bi-cart3"></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
+                          </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 class="desc">
+                            <h3 class="text-primary">
+                              {{ senaraiCart.datalelongbid.norujukan }}
+                            </h3>
+
+                            <dl class="small m-b-none">
+                              <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">
+                              <button
+                                class="btn btn-danger"
+                                data-bs-toggle="modal"
+                                data-bs-target="#deleteModal"
+                                @click="deleteModal(senaraiCart)"
+                              >
+                                Hapus
+                              </button>
+                            </div>
+                          </td>
+
+                          <td
+                            width="30"
+                            style="width: 145.82px; text-align: center"
+                          >
+                            RM{{ senaraiCart.datalelongbid.hargaasas }}
+                          </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"
+                          >
+                            <button
+                              class="btn btn-warning"
+                              data-bs-toggle="modal"
+                              data-bs-target="#editModal"
+                              @click="editModal(senaraiCart)"
+                            >
+                              Ubah
+                            </button>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-3">
+            <div
+              class="ibox"
+              v-if="feeStatus == 2"
+              style="border: #e7eaec solid 1px"
+            >
+              <div class="ibox-title" style="padding: 20px">
+                <h5>Yuran</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-danger">
+                  <i>*Anda perlu membayar yuran sebelum membuat bidaan.</i>
+                </span>
+                <div class="m-t-sm">
+                  <!-- <div class="btn-group">
+                    <button
+                      data-bs-toggle="modal"
+                      data-bs-target="#payModal"
+                      class="btn btn-primary"
+                    >
+                      Teruskan <i class="fa fa-shopping-cart"></i>
+                    </button>
+                  </div> -->
+                  <div class="btn-group">
+                    <button
+                      data-bs-toggle="modal"
+                      data-bs-target="#payModal"
+                      class="btn btn-success"
+                    >
+                      Bayar Yuran
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ibox"
+              v-if="feeStatus == 1"
+              style="border: #e7eaec solid 1px"
+            >
+              <!-- <div class="ibox-title" style="padding: 20px">
+                <h5>Yuran</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> -->
+                <h4 class="text-success">
+                  Yuran Telah Berjaya Dibayar
+                  <i class="bi bi-check2-circle"></i>
+                </h4>
+                <hr />
+                <span class="fw-bold">
+                  <i>*Anda boleh membuat bidaan.</i>
+                </span>
+                <!-- <div class="m-t-sm">
+                  
+                  <div class="btn-group">
+                    <button
+                      data-bs-toggle="modal"
+                      data-bs-target="#payModal"
+                      class="btn btn-primary"
+                    >
+                      Bayar Yuran
+                    </button>
+                  </div>
+                </div> -->
+              </div>
+            </div>
+            <div class="ibox" style="border: #e7eaec solid 1px">
+              <div class="ibox-title" style="padding: 20px">
+                <h5>Ringkasan Troli</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
+                  >
+                </span> -->
+                <div v-if="feeStatus == 1" class="m-t-sm">
+                  <div class="btn-group">
+                    <button
+                      data-bs-toggle="modal"
+                      data-bs-target="#bidModal"
+                      class="btn btn-success mt-3"
+                    >
+                      Teruskan <i class="fa fa-shopping-cart"></i>
+                    </button>
+                  </div>
+                  <!-- <div class="btn-group">
+                    <button @click="feePayment()" class="btn btn-primary">
+                      try bavayar
+                    </button>
+                  </div> -->
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div>{{$store.state.cart}}</div> -->
+    <!-- <div>{{ myValue.lelong_id }}</div> -->
+
+    <!-- modal ubah bidaan -->
+    <div
+      class="modal fade"
+      id="editModal"
+      tabindex="-1"
+      aria-labelledby="editModalLabel"
+      aria-hidden="true"
+      data-bs-backdrop="static"
+    >
+      <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="editModalLabel">
+              {{ test.norujukan }}
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              ref="ubahClose"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+
+          <div class="modal-body">
+            <div class="row m-2">
+              <div class="col">
+                <!-- <p>Marhun: {{ test.marhun }}</p> -->
+                <p>Jumlah Berat: {{ test.berat }}g</p>
+                <table class="table table-bordered">
+                  <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>
+                <div class="row justify-content-center">
+                  <div class="col-3">
+                    <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>
+                      <div
+                        style="background-color: #e9ecef; padding-bottom: 0px"
+                        class="form-control text-start justify-content-start"
+                        disabled
+                      >
+                        {{ test.hargaasas }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row justify-content-center mb-3">
+                  <div class="col-3">
+                    <label class="col-form-label">Tambahan Harga Bida</label>
+                  </div>
+                  <div class="col-4">
+                    <div class="input-group">
+                      <span class="input-group-text">RM</span>
+                      <input
+                        v-model="tambahan"
+                        type="text"
+                        id="tambahanbida"
+                        class="form-control"
+                        @keyup="calcTotal()"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-7">
+                    <div
+                      style="font-size: 15px"
+                      class="fst-italic text-danger"
+                      v-if="v$.tambahan.$error"
+                    >
+                      <div class="text-end">
+                        *Minimum tambahan harga bida adalah RM1.
+                      </div>
+                      <div class="text-end">
+                        *Gandaan ringgit sahaja dibenarkan.
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row justify-content-center">
+                  <div class="col-3">
+                    <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>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="submit"
+              class="btn btn-danger me-2"
+              data-bs-dismiss="modal"
+            >
+              Batal
+            </button>
+            <button type="submit" class="btn btn-success" @click="updateItem()">
+              Terima
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 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"
+              ref="padamClose"
+              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 daftar bidaan -->
+    <div
+      class="modal fade"
+      id="bidModal"
+      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"
+              ref="daftarBidaanClose"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+
+          <div class="modal-body">
+            <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
+            <h3>ADAKAH ANDA PASTI?</h3>
+            <h6 class="text-danger">
+              <i>*Bidaan tidak dapat diubah selepas dihantar.</i>
+            </h6>
+
+            <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>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="submit"
+              class="btn btn-danger me-2"
+              data-bs-dismiss="modal"
+            >
+              Tidak
+            </button>
+            <button
+              type="submit"
+              class="btn btn-success"
+              @click="bidderSelectBidItem()"
+            >
+              Ya
+            </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>
+
+    <!-- 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">Bayar Yuran</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> -->
+          </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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import useVuelidate from "@vuelidate/core";
+import { required, integer, numeric, minValue } from "@vuelidate/validators";
+import { mapGetters, mapState } from "vuex";
+
+export default {
+  name: "Cart",
+  emits: ["reloadComponent"],
+  data() {
+    return {
+      v$: useVuelidate(),
+      loading: false,
+      senaraiCarts: [],
+      tambahan: "",
+      test: "",
+      test2: [],
+      abc: "",
+      data: "",
+      feeStatus: "2",
+      formEdit: {
+        id: "",
+        hargabida: "",
+      },
+      formPayment: {
+        email: localStorage.getItem("email"),
+        notel: localStorage.getItem("notelbimbit"),
+        name: localStorage.getItem("name"),
+        user_id: localStorage.getItem("id"),
+        lelong_id: localStorage.getItem("lelong_id"),
+      },
+      test: localStorage.getItem("id"),
+      formCheck: {
+        user_id: localStorage.getItem("id"),
+        lelong_id: localStorage.getItem("lelong_id"),
+      },
+      formRegisterBid: {
+        lelong_id: localStorage.getItem("lelong_id"),
+        user_id: localStorage.getItem("id"),
+        name: localStorage.getItem("name"),
+      },
+    };
+  },
+  validations() {
+    return {
+      tambahan: { required, numeric, integer, minValue: minValue(1) },
+    };
+  },
+  computed: {
+    total_sag() {
+      return this.senaraiCarts.length;
+    },
+    total_bidaan() {
+      let total = 0;
+      this.senaraiCarts.forEach((val) => {
+        total += parseFloat(val.hargabida);
+      });
+      return total.toFixed(2);
+    },
+    // ...mapGetters(["idLelong"])
+    // ...mapState(["idLelong"]),
+    ...mapGetters(["idLelong"]),
+    myValue() {
+      return this.$store.state.lelong_id;
+    },
+    count() {
+      return store.state.lelong_id;
+    },
+  },
+  mounted: function () {
+    this.checkFeePayment();
+    this.listCart();
+  },
+  methods: {
+    trybayar() {
+      axios
+        .post("/feepayment", this.formPayment)
+        .then((response) => {
+          console.log(response);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    listCart() {
+      this.loading = true;
+      axios
+        .get("/cart/" + localStorage.getItem("id"))
+        .then((response) => {
+          this.senaraiCarts = response.data;
+          this.loading = false;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    calcTotal() {
+      this.formEdit.hargabida =
+        parseFloat(this.tambahan) + parseFloat(this.test.hargaasas);
+    },
+    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() {
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        this.$refs.ubahClose.click();
+        this.loading = true;
+        axios
+          .post("/updateItem", this.formEdit, {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          })
+          .then((response) => {
+            console.log(response);
+            // this.$refs.ubahClose.click();
+            this.loading = false;
+            this.$emit("reloadComponent");
+            // location.reload();
+          })
+          .catch((error) => {
+            console.log(error);
+            this.loading = false;
+          });
+      } else {
+      }
+    },
+    deleteModal(data) {
+      this.data = data;
+      this.test = this.data.datalelongbid;
+      console.log(data.datalelongbid.norujukan);
+    },
+    deleteCart(id) {
+      this.$refs.padamClose.click();
+      this.loading = true;
+      axios
+        .get("/deleteItem/" + id, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          this.loading = false;
+          console.log(response);
+          this.$emit("reloadComponent");
+          //   location.reload();
+        })
+        .catch((error) => {
+          this.loading = false;
+          console.log(error);
+        });
+    },
+    feePayment() {
+      axios
+        .post("/feepayment", this.formPayment)
+        .then((response) => {
+          console.log(response);
+          // window.open(response.data.message + "?auto_submit=true");
+          window.location.href = response.data.message + "?auto_submit=true";
+          console.log(response);
+        })
+        .catch((error) => {
+          console.log(error);
+          alert(error);
+        });
+    },
+    checkFeePayment() {
+      axios
+        .get("/bidder/historyFeePay", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            user_id: localStorage.getItem("id"),
+            lelong_id: localStorage.getItem("lelong_id"),
+          },
+        })
+        // .post("/addToCart", this.form, {
+        //     headers: {
+        //       Authorization: "Bearer " + localStorage.getItem("token"),
+        //     },
+        //   }
+        .then((response) => {
+          this.feeStatus = response.data.status;
+          // console.log(this.idLelong);
+          // console.log(response.data.status);
+          // this.$refs.padamClose.click();
+          // location.reload();
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    bidderSelectBidItem() {
+      this.$refs.daftarBidaanClose.click();
+      this.loading = true;
+      axios
+        .post("/bidder/biditem", this.formRegisterBid, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          this.loading = false;
+          console.log(response);
+          this.$emit("reloadComponent");
+
+          //   location.reload();
+        })
+        .catch((error) => {
+          this.loading = false;
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
+
+<style >
+body {
+  margin-top: 20px;
+  background: #eee;
+}
+h3 {
+  font-size: 16px;
+}
+.text-navy {
+  color: #1ab394;
+}
+.cart-product-imitation {
+  text-align: center;
+  padding-top: 30px;
+  height: 80px;
+  width: 80px;
+  background-color: #f8f8f9;
+}
+.product-imitation.xl {
+  padding: 120px 0;
+}
+.product-desc {
+  padding: 20px;
+  position: relative;
+}
+.ecommerce .tag-list {
+  padding: 0;
+}
+.ecommerce .fa-star {
+  color: #d1dade;
+}
+.ecommerce .fa-star.active {
+  color: #f8ac59;
+}
+.ecommerce .note-editor {
+  border: 1px solid #e7eaec;
+}
+table.shoping-cart-table {
+  margin-bottom: 0;
+}
+table.shoping-cart-table tr td {
+  border: none;
+  text-align: right;
+}
+table.shoping-cart-table tr td.desc,
+table.shoping-cart-table tr td:first-child {
+  text-align: left;
+}
+table.shoping-cart-table tr td:last-child {
+  width: 80px;
+}
+.ibox {
+  clear: both;
+  margin-bottom: 25px;
+  margin-top: 0;
+  padding: 0;
+}
+.ibox.collapsed .ibox-content {
+  display: none;
+}
+.ibox:after,
+.ibox:before {
+  display: table;
+}
+.ibox-title {
+  -moz-border-bottom-colors: none;
+  -moz-border-left-colors: none;
+  -moz-border-right-colors: none;
+  -moz-border-top-colors: none;
+  background-color: #ffffff;
+  border-color: #e7eaec;
+  border-image: none;
+  border-style: solid solid none;
+  border-width: 3px 0 0;
+  color: inherit;
+  margin-bottom: 0;
+  padding: 14px 15px 7px;
+  min-height: 48px;
+}
+.ibox-content {
+  background-color: #ffffff;
+  color: inherit;
+  padding: 15px 20px 20px 20px;
+  border-color: #e7eaec;
+  border-image: none;
+  border-style: solid solid none;
+  border-width: 1px 0;
+}
+.ibox-footer {
+  color: inherit;
+  border-top: 1px solid #e7eaec;
+  font-size: 90%;
+  background: #ffffff;
+  padding: 10px 15px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/cart/TheCart.vue b/src/components/cart/TheCart.vue
index f90d1cf..1da76d3 100644
--- a/src/components/cart/TheCart.vue
+++ b/src/components/cart/TheCart.vue
@@ -1,939 +1,29 @@
 <template>
   <the-template>
     <base-card>
-      <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">
-        <div>
-          <!-- <button
-        class="btn btn-secondary float-start"
-        style="margin: 5px"
-        onclick="history.back()"
-      >
-        Kembali <i class="bi bi-backspace-fill"></i>
-      </button> -->
-          <div class="wrapper wrapper-content animated fadeInRight">
-            <h1>Troli <i class="bi bi-cart3"></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
-                              </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 class="desc">
-                                <h3 class="text-primary">
-                                  {{ senaraiCart.datalelongbid.norujukan }}
-                                </h3>
-
-                                <dl class="small m-b-none">
-                                  <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">
-                                  <button
-                                    class="btn btn-danger"
-                                    data-bs-toggle="modal"
-                                    data-bs-target="#deleteModal"
-                                    @click="deleteModal(senaraiCart)"
-                                  >
-                                    Hapus
-                                  </button>
-                                </div>
-                              </td>
-
-                              <td
-                                width="30"
-                                style="width: 145.82px; text-align: center"
-                              >
-                                RM{{ senaraiCart.datalelongbid.hargaasas }}
-                              </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"
-                              >
-                                <button
-                                  class="btn btn-warning"
-                                  data-bs-toggle="modal"
-                                  data-bs-target="#editModal"
-                                  @click="editModal(senaraiCart)"
-                                >
-                                  Ubah
-                                </button>
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="col-3">
-                <div
-                  class="ibox"
-                  v-if="feeStatus == 2"
-                  style="border: #e7eaec solid 1px"
-                >
-                  <div class="ibox-title" style="padding: 20px">
-                    <h5>Yuran</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-danger">
-                      <i>*Anda perlu membayar yuran sebelum membuat bidaan.</i>
-                    </span>
-                    <div class="m-t-sm">
-                      <!-- <div class="btn-group">
-                    <button
-                      data-bs-toggle="modal"
-                      data-bs-target="#payModal"
-                      class="btn btn-primary"
-                    >
-                      Teruskan <i class="fa fa-shopping-cart"></i>
-                    </button>
-                  </div> -->
-                      <div class="btn-group">
-                        <button
-                          data-bs-toggle="modal"
-                          data-bs-target="#payModal"
-                          class="btn btn-success"
-                        >
-                          Bayar Yuran
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="ibox"
-                  v-if="feeStatus == 1"
-                  style="border: #e7eaec solid 1px"
-                >
-                  <!-- <div class="ibox-title" style="padding: 20px">
-                <h5>Yuran</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> -->
-                    <h4 class="text-success">
-                      Yuran Telah Berjaya Dibayar
-                      <i class="bi bi-check2-circle"></i>
-                    </h4>
-                    <hr />
-                    <span class="fw-bold">
-                      <i>*Anda boleh membuat bidaan.</i>
-                    </span>
-                    <!-- <div class="m-t-sm">
-                  
-                  <div class="btn-group">
-                    <button
-                      data-bs-toggle="modal"
-                      data-bs-target="#payModal"
-                      class="btn btn-primary"
-                    >
-                      Bayar Yuran
-                    </button>
-                  </div>
-                </div> -->
-                  </div>
-                </div>
-                <div class="ibox" style="border: #e7eaec solid 1px">
-                  <div class="ibox-title" style="padding: 20px">
-                    <h5>Ringkasan Troli</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
-                  >
-                </span> -->
-                    <div v-if="feeStatus == 1" class="m-t-sm">
-                      <div class="btn-group">
-                        <button
-                          data-bs-toggle="modal"
-                          data-bs-target="#bidModal"
-                          class="btn btn-success mt-3"
-                        >
-                          Teruskan <i class="fa fa-shopping-cart"></i>
-                        </button>
-                      </div>
-                      <!-- <div class="btn-group">
-                    <button @click="feePayment()" class="btn btn-primary">
-                      try bavayar
-                    </button>
-                  </div> -->
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- <div>{{$store.state.cart}}</div> -->
-        <!-- <div>{{ myValue.lelong_id }}</div> -->
-
-        <!-- modal ubah bidaan -->
-        <div
-          class="modal fade"
-          id="editModal"
-          tabindex="-1"
-          aria-labelledby="editModalLabel"
-          aria-hidden="true"
-          data-bs-backdrop="static"
-        >
-          <div class="modal-dialog modal-lg modal-dialog-centered">
-            <div class="modal-content">
-              <div class="modal-header">
-                <h5 class="modal-title" id="editModalLabel">
-                  {{ test.norujukan }}
-                </h5>
-                <button
-                  type="button"
-                  class="btn-close"
-                  ref="ubahClose"
-                  data-bs-dismiss="modal"
-                  aria-label="Close"
-                ></button>
-              </div>
-
-              <div class="modal-body">
-                <div class="row m-2">
-                  <div class="col">
-                    <!-- <p>Marhun: {{ test.marhun }}</p> -->
-                    <p>Jumlah Berat: {{ test.berat }}g</p>
-                    <table class="table table-bordered">
-                      <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>
-                    <div class="row justify-content-center">
-                      <div class="col-3">
-                        <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>
-                          <div
-                            style="
-                              background-color: #e9ecef;
-                              padding-bottom: 0px;
-                            "
-                            class="
-                              form-control
-                              text-start
-                              justify-content-start
-                            "
-                            disabled
-                          >
-                            {{ test.hargaasas }}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="row justify-content-center mb-3">
-                      <div class="col-3">
-                        <label class="col-form-label"
-                          >Tambahan Harga Bida</label
-                        >
-                      </div>
-                      <div class="col-4">
-                        <div class="input-group">
-                          <span class="input-group-text">RM</span>
-                          <input
-                            v-model="tambahan"
-                            type="text"
-                            id="tambahanbida"
-                            class="form-control"
-                            @change="calcTotal()"
-                          />
-                        </div>
-                      </div>
-                      <div class="col-7">
-                        <div
-                          style="font-size: 15px"
-                          class="fst-italic text-danger"
-                          v-if="v$.tambahan.$error"
-                        >
-                          <div class="text-end">
-                            *Minimum tambahan harga bida adalah RM1.
-                          </div>
-                          <div class="text-end">
-                            *Gandaan ringgit sahaja dibenarkan.
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="row justify-content-center">
-                      <div class="col-3">
-                        <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>
-                </div>
-              </div>
-              <div class="modal-footer">
-                <button
-                  type="submit"
-                  class="btn btn-danger me-2"
-                  data-bs-dismiss="modal"
-                >
-                  Batal
-                </button>
-                <button
-                  type="submit"
-                  class="btn btn-success"
-                  @click="updateItem()"
-                >
-                  Terima
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 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"
-                  ref="padamClose"
-                  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 daftar bidaan -->
-        <div
-          class="modal fade"
-          id="bidModal"
-          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"
-                  ref="daftarBidaanClose"
-                  data-bs-dismiss="modal"
-                  aria-label="Close"
-                ></button>
-              </div>
-
-              <div class="modal-body">
-                <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
-                <h3>ADAKAH ANDA PASTI?</h3>
-                <h6 class="text-danger">
-                  <i>*Bidaan tidak dapat diubah selepas dihantar.</i>
-                </h6>
-
-                <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>
-              </div>
-              <div class="modal-footer">
-                <button
-                  type="submit"
-                  class="btn btn-danger me-2"
-                  data-bs-dismiss="modal"
-                >
-                  Tidak
-                </button>
-                <button
-                  type="submit"
-                  class="btn btn-success"
-                  @click="bidderSelectBidItem()"
-                >
-                  Ya
-                </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>
-
-        <!-- 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">Bayar Yuran</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> -->
-              </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>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <cart-list
+        v-bind:key="componentKey"
+        v-on:reloadComponent="toggleReloadComponent"
+      ></cart-list>
     </base-card>
   </the-template>
 </template>
 
 <script>
-import axios from "axios";
-import useVuelidate from "@vuelidate/core";
-import { required, integer, numeric, minValue } from "@vuelidate/validators";
-import { mapGetters, mapState } from "vuex";
-
+import CartList from "./CartList.vue";
 export default {
-  name: "Cart",
+  components: {
+    "cart-list": CartList,
+  },
   data() {
     return {
-      v$: useVuelidate(),
-      loading: false,
-      senaraiCarts: [],
-      tambahan: "",
-      test: "",
-      test2: [],
-      abc: "",
-      data: "",
-      feeStatus: "2",
-      formEdit: {
-        id: "",
-        hargabida: "",
-      },
-      formPayment: {
-        email: localStorage.getItem("email"),
-        notel: localStorage.getItem("notelbimbit"),
-        name: localStorage.getItem("name"),
-        user_id: localStorage.getItem("id"),
-        lelong_id: localStorage.getItem("lelong_id"),
-      },
-      test: localStorage.getItem("id"),
-      formCheck: {
-        user_id: localStorage.getItem("id"),
-        lelong_id: localStorage.getItem("lelong_id"),
-      },
-      formRegisterBid: {
-        lelong_id: localStorage.getItem("lelong_id"),
-        user_id: localStorage.getItem("id"),
-        name: localStorage.getItem("name"),
-      },
+      componentKey: 0,
     };
   },
-  validations() {
-    return {
-      tambahan: { required, numeric, integer, minValue: minValue(1) },
-    };
-  },
-  computed: {
-    total_sag() {
-      return this.senaraiCarts.length;
-    },
-    total_bidaan() {
-      let total = 0;
-      this.senaraiCarts.forEach((val) => {
-        total += parseFloat(val.hargabida);
-      });
-      return total.toFixed(2);
-    },
-    // ...mapGetters(["idLelong"])
-    // ...mapState(["idLelong"]),
-    ...mapGetters(["idLelong"]),
-    myValue() {
-      return this.$store.state.lelong_id;
-    },
-    count() {
-      return store.state.lelong_id;
-    },
-  },
-  mounted: function () {
-    this.checkFeePayment();
-    this.listCart();
-  },
   methods: {
-    trybayar() {
-      axios
-        .post("/feepayment", this.formPayment)
-        .then((response) => {
-          console.log(response);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    listCart() {
-      this.loading = true;
-      axios
-        .get("/cart/" + localStorage.getItem("id"))
-        .then((response) => {
-          this.senaraiCarts = response.data;
-          this.loading = false;
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    calcTotal() {
-      this.formEdit.hargabida =
-        parseFloat(this.tambahan) + parseFloat(this.test.hargaasas);
-    },
-    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() {
-      this.v$.$validate();
-      if (!this.v$.$error) {
-        axios
-          .post("/updateItem", this.formEdit, {
-            headers: {
-              Authorization: "Bearer " + localStorage.getItem("token"),
-            },
-          })
-          .then((response) => {
-            console.log(response);
-            this.$refs.ubahClose.click();
-            location.reload();
-          })
-          .catch((error) => {
-            console.log(error);
-          });
-      } else {
-      }
-    },
-    deleteModal(data) {
-      this.data = data;
-      this.test = this.data.datalelongbid;
-      console.log(data.datalelongbid.norujukan);
-    },
-    deleteCart(id) {
-      axios
-        .get("/deleteItem/" + id, {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          console.log(response);
-          this.$refs.padamClose.click();
-          location.reload();
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    feePayment() {
-      axios
-        .post("/feepayment", this.formPayment)
-        .then((response) => {
-          console.log(response);
-          // window.open(response.data.message + "?auto_submit=true");
-          window.location.href = response.data.message + "?auto_submit=true";
-          console.log(response);
-        })
-        .catch((error) => {
-          console.log(error);
-          alert(error);
-        });
-    },
-    checkFeePayment() {
-      axios
-        .get("/bidder/historyFeePay", {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-          params: {
-            user_id: localStorage.getItem("id"),
-            lelong_id: localStorage.getItem("lelong_id"),
-          },
-        })
-        // .post("/addToCart", this.form, {
-        //     headers: {
-        //       Authorization: "Bearer " + localStorage.getItem("token"),
-        //     },
-        //   }
-        .then((response) => {
-          this.feeStatus = response.data.status;
-          // console.log(this.idLelong);
-          // console.log(response.data.status);
-          // this.$refs.padamClose.click();
-          // location.reload();
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    bidderSelectBidItem() {
-      axios
-        .post("/bidder/biditem", this.formRegisterBid, {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          console.log(response);
-          this.$refs.daftarBidaanClose.click();
-
-          location.reload();
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+    toggleReloadComponent() {
+      this.componentKey += 1;
     },
   },
 };
 </script>
-
-<style >
-body {
-  margin-top: 20px;
-  background: #eee;
-}
-h3 {
-  font-size: 16px;
-}
-.text-navy {
-  color: #1ab394;
-}
-.cart-product-imitation {
-  text-align: center;
-  padding-top: 30px;
-  height: 80px;
-  width: 80px;
-  background-color: #f8f8f9;
-}
-.product-imitation.xl {
-  padding: 120px 0;
-}
-.product-desc {
-  padding: 20px;
-  position: relative;
-}
-.ecommerce .tag-list {
-  padding: 0;
-}
-.ecommerce .fa-star {
-  color: #d1dade;
-}
-.ecommerce .fa-star.active {
-  color: #f8ac59;
-}
-.ecommerce .note-editor {
-  border: 1px solid #e7eaec;
-}
-table.shoping-cart-table {
-  margin-bottom: 0;
-}
-table.shoping-cart-table tr td {
-  border: none;
-  text-align: right;
-}
-table.shoping-cart-table tr td.desc,
-table.shoping-cart-table tr td:first-child {
-  text-align: left;
-}
-table.shoping-cart-table tr td:last-child {
-  width: 80px;
-}
-.ibox {
-  clear: both;
-  margin-bottom: 25px;
-  margin-top: 0;
-  padding: 0;
-}
-.ibox.collapsed .ibox-content {
-  display: none;
-}
-.ibox:after,
-.ibox:before {
-  display: table;
-}
-.ibox-title {
-  -moz-border-bottom-colors: none;
-  -moz-border-left-colors: none;
-  -moz-border-right-colors: none;
-  -moz-border-top-colors: none;
-  background-color: #ffffff;
-  border-color: #e7eaec;
-  border-image: none;
-  border-style: solid solid none;
-  border-width: 3px 0 0;
-  color: inherit;
-  margin-bottom: 0;
-  padding: 14px 15px 7px;
-  min-height: 48px;
-}
-.ibox-content {
-  background-color: #ffffff;
-  color: inherit;
-  padding: 15px 20px 20px 20px;
-  border-color: #e7eaec;
-  border-image: none;
-  border-style: solid solid none;
-  border-width: 1px 0;
-}
-.ibox-footer {
-  color: inherit;
-  border-top: 1px solid #e7eaec;
-  font-size: 90%;
-  background: #ffffff;
-  padding: 10px 15px;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/dashboard/Accordion.vue b/src/components/dashboard/Accordion.vue
deleted file mode 100644
index 36df854..0000000
--- a/src/components/dashboard/Accordion.vue
+++ /dev/null
@@ -1,280 +0,0 @@
-<template>
-  <div id="accordion-collapse" data-accordion="collapse">
-    <h2 id="accordion-collapse-heading-1">
-      <button
-        type="button"
-        class="
-          flex
-          justify-between
-          items-center
-          p-5
-          w-full
-          font-medium
-          text-left
-          rounded-t-xl
-          border border-b-0 border-gray-200
-          focus:ring-4 focus:ring-gray-200
-          dark:focus:ring-gray-800 dark:border-gray-700
-          hover:bg-gray-100
-          dark:hover:bg-gray-800
-          bg-gray-100
-          dark:bg-gray-800
-          text-gray-900
-          dark:text-white
-        "
-        data-accordion-target="#accordion-collapse-body-1"
-        aria-expanded="true"
-        aria-controls="accordion-collapse-body-1"
-      >
-        <span>What is Flowbite?</span>
-        <svg
-          data-accordion-icon=""
-          class="w-6 h-6 rotate-180 shrink-0"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
-      </button>
-    </h2>
-    <div
-      id="accordion-collapse-body-1"
-      class=""
-      aria-labelledby="accordion-collapse-heading-1"
-    >
-      <div
-        class="
-          p-5
-          border border-b-0 border-gray-200
-          dark:border-gray-700 dark:bg-gray-900
-        "
-      >
-        <p class="mb-2 text-gray-500 dark:text-gray-400">
-          Flowbite is an open-source library of interactive components built on
-          top of Tailwind CSS including buttons, dropdowns, modals, navbars, and
-          more.
-        </p>
-        <p class="text-gray-500 dark:text-gray-400">
-          Check out this guide to learn how to
-          <a
-            href="https://flowbite.com/docs/getting-started/introduction/"
-            class="text-blue-600 dark:text-blue-500 hover:underline"
-            >get started</a
-          >
-          and start developing websites even faster with components on top of
-          Tailwind CSS.
-        </p>
-      </div>
-    </div>
-    <h2 id="accordion-collapse-heading-2">
-      <button
-        type="button"
-        class="
-          flex
-          justify-between
-          items-center
-          p-5
-          w-full
-          font-medium
-          text-left text-gray-500
-          border border-b-0 border-gray-200
-          focus:ring-4 focus:ring-gray-200
-          dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400
-          hover:bg-gray-100
-          dark:hover:bg-gray-800
-        "
-        data-accordion-target="#accordion-collapse-body-2"
-        aria-expanded="false"
-        aria-controls="accordion-collapse-body-2"
-      >
-        <span>Is there a Figma file available?</span>
-        <svg
-          data-accordion-icon=""
-          class="w-6 h-6 shrink-0"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
-      </button>
-    </h2>
-    <div
-      id="accordion-collapse-body-2"
-      class="hidden"
-      aria-labelledby="accordion-collapse-heading-2"
-    >
-      <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
-        <p class="mb-2 text-gray-500 dark:text-gray-400">
-          Flowbite is first conceptualized and designed using the Figma software
-          so everything you see in the library has a design equivalent in our
-          Figma file.
-        </p>
-        <p class="text-gray-500 dark:text-gray-400">
-          Check out the
-          <a
-            href="https://flowbite.com/figma/"
-            class="text-blue-600 dark:text-blue-500 hover:underline"
-            >Figma design system</a
-          >
-          based on the utility classes from Tailwind CSS and components from
-          Flowbite.
-        </p>
-      </div>
-    </div>
-    <h2 id="accordion-collapse-heading-3">
-      <button
-        type="button"
-        class="
-          flex
-          justify-between
-          items-center
-          p-5
-          w-full
-          font-medium
-          text-left text-gray-500
-          border border-gray-200
-          focus:ring-4 focus:ring-gray-200
-          dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400
-          hover:bg-gray-100
-          dark:hover:bg-gray-800
-        "
-        data-accordion-target="#accordion-collapse-body-3"
-        aria-expanded="false"
-        aria-controls="accordion-collapse-body-3"
-      >
-        <span>What are the differences between Flowbite and Tailwind UI?</span>
-        <svg
-          data-accordion-icon=""
-          class="w-6 h-6 shrink-0"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
-      </button>
-    </h2>
-    <div
-      id="accordion-collapse-body-3"
-      class="hidden"
-      aria-labelledby="accordion-collapse-heading-3"
-    >
-      <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
-        <p class="mb-2 text-gray-500 dark:text-gray-400">
-          The main difference is that the core components from Flowbite are open
-          source under the MIT license, whereas Tailwind UI is a paid product.
-          Another difference is that Flowbite relies on smaller and standalone
-          components, whereas Tailwind UI offers sections of pages.
-        </p>
-        <p class="mb-2 text-gray-500 dark:text-gray-400">
-          However, we actually recommend using both Flowbite, Flowbite Pro, and
-          even Tailwind UI as there is no technical reason stopping you from
-          using the best of two worlds.
-        </p>
-        <p class="mb-2 text-gray-500 dark:text-gray-400">
-          Learn more about these technologies:
-        </p>
-        <ul class="pl-5 list-disc text-gray-500 dark:text-gray-400">
-          <li>
-            <a
-              href="https://flowbite.com/pro/"
-              class="text-blue-600 dark:text-blue-500 hover:underline"
-              >Flowbite Pro</a
-            >
-          </li>
-          <li>
-            <a
-              href="https://tailwindui.com/"
-              rel="nofollow"
-              class="text-blue-600 dark:text-blue-500 hover:underline"
-              >Tailwind UI</a
-            >
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-  <div
-    class="
-      max-w-2xl
-      mx-auto
-      overflow-hidden
-      bg-white
-      rounded-lg
-      shadow-md
-      dark:bg-gray-800
-    "
-  >
-    <img
-      class="object-cover w-full h-64"
-      src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
-      alt="Article"
-    />
-
-    <div class="p-6">
-      <div>
-        <span
-          class="text-xs font-medium text-blue-600 uppercase dark:text-blue-400"
-          >Product</span
-        >
-        <a
-          href="#"
-          class="
-            block
-            mt-2
-            text-2xl
-            font-semibold
-            text-gray-800
-            transition-colors
-            duration-200
-            transform
-            dark:text-white
-            hover:text-gray-600 hover:underline
-          "
-          >I Built A Successful Blog In One Year</a
-        >
-        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie
-          parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris
-          egestas quam volutpat viverra. In pretium nec senectus erat. Et
-          malesuada lobortis.
-        </p>
-      </div>
-
-      <div class="mt-4">
-        <div class="flex items-center">
-          <div class="flex items-center">
-            <img
-              class="object-cover h-10 rounded-full"
-              src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60"
-              alt="Avatar"
-            />
-            <a
-              href="#"
-              class="mx-2 font-semibold text-gray-700 dark:text-gray-200"
-              >Jone Doe</a
-            >
-          </div>
-          <span class="mx-1 text-xs text-gray-600 dark:text-gray-300"
-            >21 SEP 2015</span
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/components/dashboard/Result.vue b/src/components/dashboard/Result.vue
deleted file mode 100644
index e108aea..0000000
--- a/src/components/dashboard/Result.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="card text-center">
-    <div class="card-header fw-bold text-uppercase">Keputusan Bidaan</div>
-
-    <div class="card-body">
-      <p>Tahniah! Bidaan anda menang.</p>
-      <!-- <button class="btn btn-primary">Bayar Bidaan</button> -->
-      <router-link class="btn btn-primary" to="/pay">Bayar</router-link>
-    </div>
-
-    <!-- <div class="card-footer"></div> -->
-    <div class="card-footer">Sila hubungi ******* untuk maklumat lanjut</div>
-  </div>
-</template>
-
-<script>
-export default {};
-</script>
\ No newline at end of file
diff --git a/src/components/dashboard/Todos.vue b/src/components/dashboard/Todos.vue
deleted file mode 100644
index 094e891..0000000
--- a/src/components/dashboard/Todos.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<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
diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index 557891d..bd0992a 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -150,7 +150,7 @@
                       type="text"
                       id="tambahanbida"
                       class="form-control"
-                      @change="calcTotal()"
+                      @keyup="calcTotal()"
                     />
                   </div>
                 </div>
@@ -214,6 +214,7 @@ import { required, integer, numeric, minValue } from "@vuelidate/validators";
 import { mapGetters, mapActions } from "vuex";
 
 export default {
+  emits: ["reloadComponent"],
   props: {
     selectedCawangan: { type: String },
     reloadId: { type: Number },
@@ -297,9 +298,10 @@ export default {
       this.norujukan = norujukan;
       this.marhuns = this.norujukan.lelongbidmarhun;
       this.form.lelongbid_id = this.norujukan.id;
-      this.tambahan = 1;
+      // this.tambahan = ;
       this.form.hargabida =
-        parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
+        // parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
+        parseFloat(this.norujukan.hargaasas);
     },
     calcTotal() {
       this.form.hargabida =
@@ -309,6 +311,8 @@ export default {
     addToCart() {
       this.v$.$validate();
       if (!this.v$.$error) {
+        this.$refs.tambahClose.click();
+        this.loading = true;
         axios
           .post("/addToCart", this.form, {
             headers: {
@@ -317,13 +321,13 @@ export default {
           })
           .then((response) => {
             console.log(response);
-            this.loading = true;
-            this.$refs.tambahClose.click();
+
             this.loading = false;
-            this.$emit("reloadComponent", this.reloadId);
+            this.$emit("reloadComponent");
             // location.reload();
           })
           .catch((error) => {
+            this.loading = false;
             console.log(error);
           });
       } else {
diff --git a/src/components/list/Senarai.vue b/src/components/list/Senarai.vue
deleted file mode 100644
index 92e6e67..0000000
--- a/src/components/list/Senarai.vue
+++ /dev/null
@@ -1,331 +0,0 @@
-<template>
-  <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="row">
-      <div v-if="this.status">
-        <div class="">
-        <div class="container">
-          <div class="row">
-            <div class="col">
-              <button disabled class="btn m-3 mb-1 btn-secondary">Jumlah Surat: {{this.sags.length}}</button>
-              <button disabled class="btn m-3 mb-1 btn-secondary">Masa Mula Lelong: {{ lelong_details.masamula_lelong }}</button>
-              <button disabled class="btn m-3 mb-1 btn-secondary">Masa Tamat Lelong: {{ lelong_details.masatamat_lelong }}</button>
-            </div>
-          </div>
-          <div class="row clearfix">
-            <div
-              v-for="sag in sags"
-              :key="sag.id"
-              class="col-lg-4 col-md-4 col-sm-12"
-              style="margin: 10px 0px"
-            >
-              <div class="card product_item" style="padding: 15px">
-                <div class="body">
-                  <div class="product_details">
-                    <h6 class="text-primary">
-                      {{ sag.norujukan }}
-                    </h6>
-                    <ul class="product_price list-unstyled">
-                      <!-- <li class="old_price">{{ sag.marhun }}</li> -->
-                      <li class="old_price">{{ sag.berat }}g</li>
-                      <li class="old_price">
-                        <b>RM{{ sag.hargaasas }}</b>
-                      </li>
-                    </ul>
-                    <div class="cp_img">
-                      <div class="hover">
-                        <a
-                          data-bs-toggle="modal"
-                          data-bs-target="#bidaModal"
-                          @click="clickModal(sag)"
-                          class="btn btn-primary btn-sm waves-effect"
-                          >Masuk <i class="zmdi zmdi-shopping-cart"></i
-                        ></a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        </div>
-      </div>
-      <div v-else style="min-height: 60vh">
-        <h1 class="mt-5">Sila Isi Ruangan 'Pilih Cawangan' Di Atas.</h1>
-      </div>
-    </div>
-
-    <!-- modal marhun -->
-    <div
-      class="modal fade"
-      id="bidaModal"
-      tabindex="-1"
-      aria-labelledby="bidaModalLabel"
-      aria-hidden="true"
-      data-bs-backdrop="static"
-      data-bs-keyboard="false"
-    >
-      <div class="modal-dialog modal-lg modal-dialog-centered">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title" id="bidaModalLabel">
-              {{ norujukan.norujukan }}
-            </h5>
-            <button
-              type="button"
-              class="btn-close"
-              ref="tambahClose"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-
-          <div class="modal-body">
-            <div class="row m-2">
-              <div class="col">
-                <!-- <p>Marhun: {{ norujukan.marhun }}</p> -->
-                <p>Jumlah Berat: {{ norujukan.berat }}g</p>
-                <table class="table table-bordered">
-                  <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="(marhun, index) in marhuns" :key="marhun.id">
-                      <td>{{ index + 1 }}</td>
-                      <td>{{ marhun.marhun }}</td>
-                      <td>{{ marhun.karat }}</td>
-                      <td>{{ marhun.berat }}g</td>
-                      <td>{{ marhun.nota }}</td>
-                      <td>RM{{ marhun.hargaasas }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-                <div class="row justify-content-center">
-                  <div class="col-3">
-                    <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>
-                      <div
-                        style="background-color: #e9ecef"
-                        class="form-control text-start justify-content-start"
-                        disabled
-                      >
-                        {{ norujukan.hargaasas }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="row justify-content-center mb-3">
-                  <div class="col-3">
-                    <label class="col-form-label">Tambahan Harga Bida</label>
-                  </div>
-                  <div class="col-4">
-                    <div class="input-group">
-                      <span class="input-group-text">RM</span>
-                      <input
-                        v-model="tambahan"
-                        type="text"
-                        id="tambahanbida"
-                        class="form-control"
-                        @change="calcTotal()"
-                      />
-                    </div>
-                  </div>
-                  <div class="col-7">
-                    <div
-                      style="font-size: 13px"
-                      class="fst-italic text-danger"
-                      v-if="v$.tambahan.$error"
-                    >
-                      <div class="text-end">
-                        *Minimum tambahan harga bida adalah RM1.
-                      </div>
-                      <div class="text-end">
-                        *Gandaan ringgit sahaja dibenarkan.
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="row justify-content-center">
-                  <div class="col-3">
-                    <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="form.hargabida"
-                        disabled
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <button
-              type="submit"
-              class="btn btn-danger me-2"
-              data-bs-dismiss="modal"
-            >
-              Batal
-            </button>
-            <button type="submit" class="btn btn-success" @click="addToCart()">
-              Tambah Ke Troli
-            </button>
-          </div>
-        </div>
-      </div>
-      <!-- </form> -->
-    </div>
-
-</template>
-
-<script>
-import axios from "axios";
-import Senarai from "../list/Senarai.vue";
-import useVuelidate from "@vuelidate/core";
-import { required, integer, numeric, minValue } from "@vuelidate/validators";
-import { mapGetters, mapActions } from "vuex";
-
-export default {
-  components: {
-    Senarai,
-  },
-  props: [
-    'selectedCawangan'
-  ],
-  data() {
-    return {
-      status: false,
-      v$: useVuelidate(),
-      loading: false,
-      tambahabError: false,
-      errors: [],
-      lelong_details: [],
-      sags: [],
-      norujukan: "",
-      marhuns: "",
-      componentKey: 0,
-      tambahan: "",
-      form: {
-        user_id: localStorage.getItem("id"),
-        lelongbid_id: "",
-        hargabida: "",
-      },
-      myModal: null,
-    };
-  },
-  validations() {
-    return {
-      tambahan: { required, numeric, integer, minValue: minValue(1) },
-    };
-  },
-  computed: {
-    numberSag() {
-      return this.sags.length;
-    },
-    ...mapGetters(["allCarts"]),
-  },
-  mounted: function () {
-    this.liveData();
-  },
-  methods: {
-    liveData() {
-      this.loading = true;
-      this.status = false;
-      axios
-        .get("/lelongDetails/cawangan", {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-          params: {
-            caw_id: this.selectedCawangan,
-          },
-        })
-        .then((response) => {
-          if(response.data.success == true) {
-          this.status = true;
-          this.lelong_details = response.data.message[0];
-          this.response = response.data.message[0].lelongbid;
-          this.sags = this.response;
-          this.loading = false; }
-          else {
-            this.status = false;
-            this.loading = false;
-            console.log(response.data.message);
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-          this.lelong_details = [null];
-        });
-    },
-    clickModal(norujukan) {
-      this.allCarts.forEach(function (element) {
-        if (element.lelongbid_id == norujukan.id) {
-          // return true;
-          console.log("ada");
-        } else {
-          // console.log("tiada");
-        }
-      });
-
-      this.norujukan = norujukan;
-      this.marhuns = this.norujukan.lelongbidmarhun;
-      this.form.lelongbid_id = this.norujukan.id;
-      this.tambahan = 1;
-      this.form.hargabida =
-        parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
-    },
-    calcTotal() {
-      this.form.hargabida =
-        parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
-    },
-
-    addToCart() {
-      this.v$.$validate();
-      if (!this.v$.$error) {
-        axios
-          .post("/addToCart", this.form, {
-            headers: {
-              Authorization: "Bearer " + localStorage.getItem("token"),
-            },
-          })
-          .then((response) => {
-            console.log(response);
-            this.loading = true;
-            this.$refs.tambahClose.click();
-            this.loading = false;
-            location.reload();
-          })
-          .catch((error) => {
-            console.log(error);
-          });
-      } else {
-        // alert("Failed");
-      }
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/components/list/TheList.vue b/src/components/list/TheList.vue
index 379c745..0a8794a 100644
--- a/src/components/list/TheList.vue
+++ b/src/components/list/TheList.vue
@@ -43,7 +43,6 @@ import { required, minLength, maxLength, between } from "@vuelidate/validators";
 // Vue.forceUpdate();
 
 export default {
-  emits: ["reloadComponent"],
   data() {
     return {
       componentKey: 0,
@@ -60,8 +59,7 @@ export default {
     this.getIdCawangan();
   },
   methods: {
-    toggleReloadComponent(value) {
-      console.log("jdi");
+    toggleReloadComponent() {
       this.componentKey += 1;
     },
     forceRerender() {
diff --git a/src/components/pay/ThePay.vue b/src/components/pay/ThePay.vue
index 7868aa3..a4ac34d 100644
--- a/src/components/pay/ThePay.vue
+++ b/src/components/pay/ThePay.vue
@@ -81,8 +81,9 @@ export default {
         .get(
           "/bayar/" +
             localStorage.getItem("id") +
-            "/" +
-            localStorage.getItem("lelong_id"),
+            "/1" ,
+            // +
+            // localStorage.getItem("lelong_id"),
           {
             headers: {
               Authorization: "Bearer " + localStorage.getItem("token"),
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index 0e74121..30c341c 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -1,7 +1,15 @@
 <template>
   <the-template>
     <base-card>
-      <div class="container">
+      <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">
         <div class="row">
           <div class="col">
             <div class="d-flex justify-content-between">
@@ -10,8 +18,12 @@
                 class="btn btn-secondary m-3 ms-0"
                 >Kembali</router-link
               >
-              <h5 class="m-3">Keputusan Tarikh Lelong: {{tarikhLelong}}</h5>
-              <router-link v-bind:to="{name: 'pay'}" class="btn btn-primary m-3 me-0">Bayar</router-link>
+              <h5 class="m-3">Keputusan Tarikh Lelong: {{ tarikhLelong }}</h5>
+              <router-link
+                v-bind:to="{ name: 'pay' }"
+                class="btn btn-primary m-3 me-0"
+                >Bayar</router-link
+              >
             </div>
             <div>
               <div class="accordion" id="accordionExample">
@@ -83,7 +95,8 @@ export default {
   data() {
     return {
       lists: [],
-      tarikhLelong: '',
+      tarikhLelong: "",
+      loading: false,
     };
   },
   mounted: function () {
@@ -91,12 +104,12 @@ export default {
   },
   methods: {
     liveData() {
+      this.loading = true;
       axios
         .get(
-          "/bayar/" +
-            localStorage.getItem("id") +
-            "/" +
-            localStorage.getItem("lelong_id"),
+          "/bayar/" + localStorage.getItem("id") + "/1",
+          // +
+          // localStorage.getItem("lelong_id"),
           {
             headers: {
               Authorization: "Bearer " + localStorage.getItem("token"),
@@ -105,12 +118,14 @@ export default {
         )
         .then((response) => {
           if (response.statusText == "OK") {
+            this.loading = false;
             this.lists = response.data.data;
             this.tarikhLelong = response.data.tarikh_lelong;
           } else {
           }
         })
         .catch((error) => {
+          this.loading = false;
           console.log(error);
         });
     },