From 39874e53c1ca39c5be59429ad2a43b139385793f Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Sun, 9 Oct 2022 18:31:48 +0800
Subject: [PATCH] fix cart

---
 src/components/Navbar.vue                     | 121 ---
 src/components/cart/CartList.vue              | 935 ------------------
 src/components/cart/CartListNew.vue           | 596 +++++++----
 src/components/cart/TheCart.vue               |  12 +-
 src/components/list/TheList.vue               |   2 +-
 src/components/result/IndexPaymentHistory.vue |  30 -
 src/main.js                                   |   6 +
 7 files changed, 431 insertions(+), 1271 deletions(-)
 delete mode 100644 src/components/Navbar.vue
 delete mode 100644 src/components/cart/CartList.vue
 delete mode 100644 src/components/result/IndexPaymentHistory.vue

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
deleted file mode 100644
index 5cd84bc..0000000
--- a/src/components/Navbar.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
-    <div class="container-fluid">
-      <router-link class="navbar-brand text-primary fw-bold" v-bind:to="{name: 'home'}">Sistem Lelong</router-link>
-      <button
-        class="navbar-toggler"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-          <li class="nav-item">
-            <router-link class="nav-link" v-bind:to="{name: 'home'}">Home</router-link>
-          </li>
-          <li class="nav-item">
-            <router-link class="nav-link" to="/list">Senarai</router-link>
-          </li>
-          <!-- <li class="nav-item">
-            <router-link class="nav-link" to="/cart">Cart</router-link>
-          </li> -->
-          <li class="nav-item">
-            <router-link class="nav-link" v-bind:to="{name: 'bid-record'}">Rekod Bidaan</router-link>
-          </li>
-          <li class="nav-item">
-            <router-link class="nav-link" v-bind:to="{name: 'result'}">Keputusan</router-link>
-          </li>
-          <li class="nav-item">
-            <router-link class="nav-link" to="/profile">Profil</router-link>
-          </li>
-          <li class="nav-item">
-            <router-link class="nav-link" to="/test">Test</router-link>
-          </li>
-          <li class="nav-item">
-            <router-link class="nav-link" to="/login">Login</router-link>
-          </li>
-          <router-view />
-        </ul>
-
-        <router-link class="btn btn-primary me-5" to="/cart"
-          >Troli <i class="bi bi-cart3"></i
-          >
-          <!-- <span class="span_cart">{{
-            this.allCarts.length
-          }}</span> -->
-          </router-link
-        >
-        <button
-          class="btn btn-outline-secondary"
-          type="submit"
-          @click="doLogout"
-        >
-          Log Keluar
-        </button>
-      </div>
-    </div>
-  </nav>
-</template>
-
-<script>
-import axios from "axios";
-import { mapGetters, mapActions } from "vuex";
-
-export default {
-  name: "Navbar",
-  // props: {
-  //   cart: Number,
-  // },
-  data() {
-    return {
-      // cart: localStorage.getItem("cart"),
-    };
-  },
-  methods: {
-    doLogout() {
-      axios
-        .post(
-          "/user/logout",
-          {},
-          {
-            headers: {
-              Authorization: "Bearer " + localStorage.getItem("token"),
-            },
-          }
-        )
-        .then((response) => {
-          // localStorage.removeItem("token");
-          // localStorage.removeItem("id");
-          // localStorage.removeItem("nokp");
-          localStorage.clear();
-          this.$router.push("/login");
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    ...mapActions(["fetchCarts"]),
-    ...mapActions(["fetchLelongId"]),
-    
-  },
-  computed: { ...mapGetters(["allCarts"]), ...mapGetters(["idLelong"]), },
-  created() {
-    this.fetchCarts();
-    this.fetchLelongId();
-  },
-};
-</script>
-
-<style scoped>
-.span_cart {
-  background-color: #06367D;
-  margin-left: 8px;
-  padding: 6px;
-  border-radius: 24px;
-}
-</style>
diff --git a/src/components/cart/CartList.vue b/src/components/cart/CartList.vue
deleted file mode 100644
index 18d870e..0000000
--- a/src/components/cart/CartList.vue
+++ /dev/null
@@ -1,935 +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="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 == 12"
-              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 == 11"
-              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 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"), {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .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 scoped>
-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/CartListNew.vue b/src/components/cart/CartListNew.vue
index 62888fb..236f471 100644
--- a/src/components/cart/CartListNew.vue
+++ b/src/components/cart/CartListNew.vue
@@ -1,57 +1,147 @@
 <template>
-  <div
-    v-if="isLoading"
-    style="min-height: 70vh; display: grid; place-items: center"
-  >
-    <div class="spinner-border" role="status">
-      <span class="visually-hidden">Loading...</span>
+  <div v-if="isLoading" class="fadein animation-duration-400">
+    <div
+      class="flex align-items-center justify-content-center container-height"
+    >
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
     </div>
   </div>
-  <div v-else style="min-height: 70vh" class="container">
-    <div class="row">
-      <div class="col-10">
-        <div class="card">
-          <div class="card-header"><h5>SENARAI TROLI</h5></div>
-          <div v-if="isSuccess" class="accordion" id="accordionExample">
-            <div
-              v-for="item in listItems"
-              v-bind:key="item"
-              class="accordion-item"
-            >
-              <h2 class="accordion-header" id="headingOne">
-                <button
-                  class="accordion-button"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  data-bs-target="#collapseOne"
-                  aria-expanded="true"
-                  aria-controls="collapseOne"
-                >
-                  {{ item.caw_name }}
-                </button>
-              </h2>
+  <div
+    v-else
+    style="min-height: 70vh"
+    class="container fadein animation-duration-400"
+  >
+    <div v-if="isSuccess" class="row">
+      <div class="col-12 lg:col-9">
+        <!-- <div class="card">
+            <div class="card-header"><h5>SENARAI TROLI</h5></div>
+            <div class="accordion" id="accordionExample">
               <div
-                id="collapseOne"
-                class="accordion-collapse collapse show"
-                aria-labelledby="headingOne"
-                data-bs-parent="#accordionExample"
+                v-for="item in listItems"
+                v-bind:key="item"
+                class="accordion-item"
               >
-                <div class="accordion-body">
-                  <table class="table table-bordered table-hover">
-                    <thead>
-                      <tr>
-                        <th>Bil</th>
-                        <th>No Rujukan</th>
-                        <th>Berat</th>
-                        <th>Harga Asas</th>
-                        <th>Harga Bida</th>
-                        <th>Tindakan</th>
-                      </tr>
-                    </thead>
+                <h2 class="accordion-header" id="headingOne">
+                  <button
+                    class="accordion-button"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapseOne"
+                    aria-expanded="true"
+                    aria-controls="collapseOne"
+                  >
+                    {{ item.caw_name }}
+                  </button>
+                </h2>
+                <div
+                  id="collapseOne"
+                  class="accordion-collapse collapse show"
+                  aria-labelledby="headingOne"
+                  data-bs-parent="#accordionExample"
+                >
+                  <div class="accordion-body">
+                    <table class="table table-bordered table-hover">
+                      <thead>
+                        <tr>
+                          <th>Bil</th>
+                          <th>No Rujukan</th>
+                          <th>Berat</th>
+                          <th>Harga Asas</th>
+                          <th>Harga Bida</th>
+                          <th>Tindakan</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr
+                          v-for="(surat, index) in item.lelongbid"
+                          v-bind:key="surat"
+                        >
+                          <td>{{ index + 1 }}</td>
+                          <td>
+                            <a
+                              href="#"
+                              data-bs-toggle="modal"
+                              data-bs-target="#marhunModal"
+                              v-on:click="openModal(surat)"
+                            >
+                              {{ surat.norujukan }}
+                            </a>
+                          </td>
+                          <td>{{ surat.berat }}g</td>
+                          <td>
+                            RM{{
+                              surat.hargaasas
+                                ?.toString()
+                                .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                            }}
+                          </td>
+                          <td>
+                            RM{{
+                              surat.hargabida
+                                ?.toString()
+                                .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                            }}
+                          </td>
+                          <td>
+                            <button
+                              class="btn me-1 ms-1 btn-warning"
+                              data-bs-toggle="modal"
+                              data-bs-target="#editModal"
+                              v-on:click="openModal(surat)"
+                            >
+                              Ubah Bidaan
+                            </button>
+                            <button
+                              class="btn me-1 ms-1 btn-danger"
+                              data-bs-toggle="modal"
+                              data-bs-target="#deleteModal"
+                              v-on:click="openModal(surat)"
+                            >
+                              Padam Surat
+                            </button>
+                          </td>
+                        </tr>
+                        <tr style="text-transform: uppercase">
+                          <th colspan="2">JUMLAH</th>
+                          <th>xxxg</th>
+                          <th></th>
+                          <th>RMxxxxxx</th>
+                          <td></td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div> -->
+        <Card>
+          <template #title>
+            <div class="font-normal">Senarai Troli</div>
+          </template>
+          <template #content>
+            <Accordion :multiple="true">
+              <AccordionTab v-for="item in listItems" v-bind:key="item">
+                <template #header>
+                  <span>{{ item.caw_name }}</span>
+                  <!-- <span class="ml-2">Jumlah:RMXXXX</span> -->
+                </template>
+                <div class="overflow-x-scroll">
+                  <table class="table text-center table-bordered table-hover">
                     <tbody>
+                      <tr class="table-light">
+                        <td>Bil</td>
+                        <td style="min-width: 180px">No Rujukan</td>
+                        <td>Berat</td>
+                        <td style="min-width: 110px">Harga Asas</td>
+                        <td style="min-width: 110px">Harga Bida</td>
+                        <!-- <td>Tindakan</td> -->
+                      </tr>
                       <tr
                         v-for="(surat, index) in item.lelongbid"
-                        v-bind:key="surat"
+                        :key="surat.id"
                       >
                         <td>{{ index + 1 }}</td>
                         <td>
@@ -72,78 +162,73 @@
                               .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                           }}
                         </td>
-                        <td>
+                        <th>
                           RM{{
                             surat.hargabida
                               ?.toString()
                               .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                           }}
-                        </td>
-                        <td>
-                          <button
-                            class="btn me-1 ms-1 btn-warning"
-                            data-bs-toggle="modal"
-                            data-bs-target="#editModal"
-                            v-on:click="openModal(surat)"
-                          >
-                            Ubah Bidaan
-                          </button>
-                          <button
-                            class="btn me-1 ms-1 btn-danger"
-                            data-bs-toggle="modal"
-                            data-bs-target="#deleteModal"
-                            v-on:click="openModal(surat)"
-                          >
-                            Padam Surat
-                          </button>
-                        </td>
-                      </tr>
-                      <tr style="text-transform: uppercase">
-                        <th colspan="2">JUMLAH</th>
-                        <th>xxxg</th>
-                        <th></th>
-                        <th>RMxxxxxx</th>
-                        <td></td>
+                        </th>
                       </tr>
                     </tbody>
                   </table>
                 </div>
-              </div>
-            </div>
-          </div>
-          <div v-else>
-            <div class="card-body">
-              <p>TIADA DATA</p>
-            </div>
-          </div>
-        </div>
+              </AccordionTab>
+            </Accordion>
+          </template>
+        </Card>
       </div>
-      <div class="col-2">
-        <div class="card">
-          <div class="card-header">RINGKASAN TROLI</div>
-          <div class="card-body">
-            <base-card>
-              <p>Jumlah Surat: XXX</p>
-            </base-card>
-            <base-card>
-              <p>Jumlah Bidaan: RMXXXXX</p>
-            </base-card>
-            <button
-              class="btn btn-success"
+      <div class="col-12 lg:col-3">
+        <Card class="card-custom">
+          <template #title>
+            <div class="font-normal">Ringkasan Troli</div>
+          </template>
+          <template #content>
+            <div>
+              <i class="pi pi-paperclip text-primary"
+                ><span class="ml-1">Jumlah Surat</span></i
+              >
+              <p>126</p>
+            </div>
+            <div>
+              <i class="pi pi-wallet text-primary"
+                ><span class="ml-1">Jumlah Bidaan</span></i
+              >
+
+              <p class="font-bold text-xl">RM121,200.00</p>
+            </div>
+            <!-- <Button
+              label="Teruskan"
+              class="p-button-sm w-full"
               data-bs-toggle="modal"
               data-bs-target="#bidModal"
+            /> -->
+            <Button
+              label="Teruskan"
+              class="p-button-sm w-full"
+              v-on:click="openModalNew()"
+            />
+          </template>
+        </Card>
+      </div>
+    </div>
+    <div v-else>
+      <div
+        class="flex align-items-center justify-content-center container-height"
+      >
+        <div class="grid justify-content-center">
+          <div class="col-12 mb-4 text-center">
+            <i class="pi pi-shopping-cart text-8xl text-400"></i>
+          </div>
+          <div class="col-12 text-center">
+            <span class="text-400">Tiada Data Dalam Troli.</span>
+          </div>
+          <div class="col-12 text-center">
+            <span class="text-400"
+              >Sila rujuk halaman
+              <router-link v-bind:to="{ name: 'list' }">Senarai</router-link>
+              untuk tambah item ke troli.</span
             >
-              Teruskan
-            </button>
-            <button
-              class="btn me-1 ms-1 btn-secondary"
-              data-bs-toggle="modal"
-              data-bs-target="#gagalDaftarBidaanModal"
-              ref="daftarBidaanOpen"
-              hidden
-            >
-              Gagal Daftar Bidaan
-            </button>
           </div>
         </div>
       </div>
@@ -172,31 +257,33 @@
           </div>
 
           <div class="modal-body">
-            <div class="row m-2">
+            <div class="grid">
               <div
-                class="col"
+                class="col-12 lg:col-6"
                 style="
                   display: flex;
                   justify-content: center;
                   align-items: center;
                   border: 1px solid rgba(0, 0, 0, 0.125);
-                  min-height: 400px;
-                  min-width: 550px;
+                  min-height: 300px;
+                  min-width: 300px;
+                  max-height: 600px;
+                  max-width: 600px;
                 "
               >
                 -gambar marhun-
               </div>
-              <div class="col">
+              <div class="col-12 text-center lg:col-6">
                 <!-- <p>Marhun: {{ theSurat.marhun }}</p>
                 <p>Jumlah Berat: {{ theSurat.berat }}g</p> -->
                 <table class="table table-bordered">
                   <tbody>
                     <tr class="table-light">
-                      <th scope="col">No</th>
-                      <th scope="col">Jenis Marhun</th>
-                      <th scope="col">Karat</th>
-                      <th scope="col">Berat</th>
-                      <th scope="col">Harga Asas</th>
+                      <td scope="col">No</td>
+                      <td scope="col">Jenis Marhun</td>
+                      <td scope="col">Karat</td>
+                      <td scope="col">Berat</td>
+                      <td scope="col">Harga Asas</td>
                     </tr>
                     <tr
                       v-for="(data, index) in theSurat.lelongbidmarhun"
@@ -215,15 +302,15 @@
                       </td>
                     </tr>
                     <tr style="text-transform: uppercase">
-                      <th colspan="3">Jumlah</th>
-                      <th>{{ theSurat.berat }}g</th>
-                      <th>
+                      <td colspan="3">Jumlah</td>
+                      <td>{{ theSurat.berat }}g</td>
+                      <td>
                         RM{{
                           theSurat.hargaasas
                             ?.toString()
                             .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                         }}
-                      </th>
+                      </td>
                     </tr>
                   </tbody>
                 </table>
@@ -290,7 +377,7 @@
                   <div class="col-6">
                     <div class="input-group mb-3">
                       <span class="input-group-text">RM</span>
-                      <span class="form-control input-group-text">{{
+                      <span class="form-control font-bold input-group-text">{{
                         theSurat.hargabida
                           ?.toString()
                           .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
@@ -298,33 +385,60 @@
                     </div>
                   </div>
                 </div>
-                <button
-                  class="btn me-1 ms-1 btn-warning"
-                  data-bs-toggle="modal"
-                  data-bs-target="#editModal"
-                  v-on:click="openModal(theSurat)"
-                >
-                  Ubah Bidaan
-                </button>
-                <button
-                  class="btn me-1 ms-1 btn-danger"
+                <Button
+                  icon="pi pi-delete-left"
+                  label="Padam Surat"
                   data-bs-toggle="modal"
+                  iconPos="right"
                   data-bs-target="#deleteModal"
                   v-on:click="openModal(theSurat)"
-                >
-                  Padam Surat
-                </button>
+                  class="p-button-text p-button-danger"
+                />
+                <Button
+                  icon="pi pi-file-edit"
+                  label="Ubah Bidaan"
+                  data-bs-toggle="modal"
+                  iconPos="right"
+                  data-bs-target="#editModal"
+                  v-on:click="openModal(theSurat)"
+                  class="p-button-warning p-button-text"
+                />
+
+                <!-- <button
+                    class="btn me-1 ms-1 btn-warning"
+                    data-bs-toggle="modal"
+                    data-bs-target="#editModal"
+                    v-on:click="openModal(theSurat)"
+                  >
+                    Ubah Bidaan
+                  </button>
+                  <button
+                    class="btn me-1 ms-1 btn-danger"
+                    data-bs-toggle="modal"
+                    data-bs-target="#deleteModal"
+                    v-on:click="openModal(theSurat)"
+                  >
+                    Padam Surat
+                  </button> -->
               </div>
             </div>
           </div>
           <div class="modal-footer">
-            <button
-              type="submit"
-              class="btn btn-secondary"
+            <Button
+              class="p-button-sm"
+              label="Kembali"
               data-bs-dismiss="modal"
-            >
-              Kembali
-            </button>
+              icon="pi pi-angle-right"
+              iconPos="right"
+            />
+
+            <!-- <button
+                type="submit"
+                class="btn btn-secondary"
+                data-bs-dismiss="modal"
+              >
+                Kembali
+              </button> -->
             <!-- <button type="submit" class="btn btn-success" @click="updateItem()">
               Terima
             </button> -->
@@ -428,7 +542,22 @@
             </div>
           </div>
           <div class="modal-footer">
-            <button
+            <Button
+              class="p-button-sm p-button-text"
+              label="Batal"
+              icon="pi pi-times"
+              iconPos="right"
+              data-bs-dismiss="modal"
+            />
+            <Button
+              class="p-button-sm"
+              icon="pi pi-check"
+              iconPos="right"
+              label="Ubah"
+              :loading="isLoadingUbah"
+              @click="updateItem(theSurat)"
+            />
+            <!-- <button
               type="submit"
               class="btn btn-danger me-2"
               data-bs-dismiss="modal"
@@ -441,7 +570,7 @@
               @click="updateItem(theSurat)"
             >
               Ubah
-            </button>
+            </button> -->
           </div>
         </div>
       </div>
@@ -457,7 +586,7 @@
       data-bs-keyboard="false"
     >
       <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
+        <div class="modal-content text-center">
           <div class="modal-header">
             <button
               type="button"
@@ -496,7 +625,20 @@
             </p>
           </div>
           <div class="modal-footer">
-            <button
+            <Button
+              class="p-button-sm mr-2"
+              label="Batal"
+              data-bs-dismiss="modal"
+            />
+            <Button
+              class="p-button-sm p-button-outlined"
+              icon="pi pi-times"
+              iconPos="right"
+              label="Padam"
+              :loading="isLoadingPadam"
+              @click="deleteItem(theSurat)"
+            />
+            <!-- <button
               type="submit"
               class="btn btn-secondary me-2"
               data-bs-dismiss="modal"
@@ -509,7 +651,7 @@
               @click="deleteItem(theSurat)"
             >
               Padam
-            </button>
+            </button> -->
           </div>
         </div>
       </div>
@@ -525,7 +667,7 @@
       data-bs-keyboard="false"
     >
       <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
+        <div class="modal-content text-center">
           <div class="modal-header">
             <h5 class="modal-title" id="bidModalLabel">Daftar Bidaan</h5>
             <button
@@ -542,12 +684,16 @@
             <h3>ADAKAH ANDA PASTI?</h3>
             <div class="row">
               <div class="col">
-                <input type="checkbox" v-model="akadLelong" name="akad" /> Saya
-                bersetuju untuk membayar semua surat yang dimenang sebelum jam
-                4:00pm hari ini.
+                <input type="checkbox" v-model="akadLelong" name="akad" />
+                Saya bersetuju untuk membayar semua surat yang dimenang sebelum
+                jam 4:00pm hari ini.
                 <p>Jika tidak selesai, saya akan dibanned.</p>
               </div>
-              <div class="alert alert-danger" role="alert" v-if="v$.akadLelong.$error">
+              <div
+                class="alert alert-danger"
+                role="alert"
+                v-if="v$.akadLelong.$error"
+              >
                 Sila tick kotak akad lelong sebelum meneruskan.
               </div>
             </div>
@@ -594,6 +740,51 @@
         </div>
       </div>
     </div>
+    <!-- DAFTAR BIDAAN MODAL - PRIMEVUE -->
+    <Dialog
+      header="Daftar Bidaan"
+      v-model:visible="displayModal"
+      :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+      :style="{ width: '50vw' }"
+      :modal="true"
+    >
+      <div class="text-center">
+        <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
+        <h3>ADAKAH ANDA PASTI?</h3>
+      </div>
+      <div class="text-center">
+        <div class="mt-3 mb-1">
+          <label>
+            <input type="checkbox" v-model="akadLelong" />
+            Saya bersetuju untuk membayar kesemua bidaan yang menang.
+          </label>
+        </div>
+        <InlineMessage v-if="v$.akadLelong.$error"
+          >Anda mestilah bersetuju dengan akad lelong.</InlineMessage
+        >
+      </div>
+      <div class="text-center mt-5">
+        <p class="text-danger">
+          <i>*Bidaan tidak dapat diubah selepas dihantar.</i>
+        </p>
+      </div>
+      <template #footer>
+        <Button
+          label="Tidak"
+          icon="pi pi-times"
+          iconPos="right"
+          @click="closeModalNew()"
+          class="p-button-text"
+        />
+        <Button
+          label="Ya"
+          icon="pi pi-check"
+          iconPos="right"
+          :loading="isLoadingDaftar"
+          v-on:click="bidderSelectBidItem()"
+        />
+      </template>
+    </Dialog>
     <!-- GAGAL DAFTAR BIDAAN MODAL -->
     <div
       class="modal fade"
@@ -646,12 +837,17 @@ export default {
   data() {
     return {
       v$: useVuelidate(),
+      displayModal: false,
+      isLoadingUbah: false,
+      isLoadingPadam: false,
+      isLoadingDaftar: false,
       isLoading: false,
       isSuccess: false,
       listItems: "",
       theSurat: "",
       tambahanBidaan: "",
       jumlahBidaan: "",
+      akadLelong: null,
       hargaAsas: "",
       formDelete: {
         userId: "",
@@ -679,6 +875,13 @@ export default {
     this.listCart();
   },
   methods: {
+    openModalNew() {
+      this.displayModal = true;
+      this.akadLelong = null;
+    },
+    closeModalNew() {
+      this.displayModal = false;
+    },
     listCart() {
       this.isLoading = true;
       axios
@@ -708,10 +911,9 @@ export default {
       this.hargaAsas = value.hargaasas;
     },
     deleteItem(value) {
+      this.isLoadingPadam = true;
       this.formDelete.userId = localStorage.getItem("id");
       this.formDelete.lelongBidId = value.id;
-      this.$refs.deleteClose.click();
-      this.isLoading = true;
       axios
         .post("/deleteItem", this.formDelete, {
           headers: {
@@ -719,8 +921,9 @@ export default {
           },
         })
         .then((response) => {
-          this.isLoading = false;
+          this.isLoadingPadam = false;
           if (response.data.success == true) {
+            this.$refs.deleteClose.click();
             this.$swal.fire({
               icon: "success",
               title: "Surat Berjaya Dipadam",
@@ -731,7 +934,13 @@ export default {
             });
             this.$emit("reloadComponent");
           } else if (response.data.success == false) {
-            alert(response.data.message);
+            console.log(response);
+            this.$toast.add({
+              severity: "error",
+              summary: "Error",
+              detail: "Please refresh page to get latest data.",
+              life: 3000,
+            });
             this.$emit("reloadComponent");
           }
         })
@@ -750,7 +959,8 @@ export default {
     },
     updateItem(value) {
       this.v$.$validate();
-      if (!this.v$.$error) {
+      if (!this.v$.tambahanBidaan.$error) {
+        this.isLoadingUbah = true;
         this.formEdit.lelongBidId = value.id;
         this.formEdit.hargabida = this.jumlahBidaan;
         axios
@@ -760,7 +970,8 @@ export default {
             },
           })
           .then((response) => {
-            this.isLoading = true;
+            this.isLoadingUbah = false;
+            // this.isLoading = true;
             this.$refs.editClose.click();
             console.log(response);
             this.$swal.fire({
@@ -771,21 +982,29 @@ export default {
               allowOutsideClick: false,
               allowEscapeKey: false,
             });
-            this.isLoading = false;
+            // this.isLoading = false;
             this.$emit("reloadComponent");
           })
           .catch((error) => {
             console.log(error);
-            this.isLoading = false;
+            this.$toast.add({
+              severity: "error",
+              summary: "Error",
+              detail: "Please refresh page to get latest data.",
+              life: 3000,
+            });
+            this.isLoadingUbah = false;
           });
       } else {
+        console.log("masuk error");
       }
     },
     bidderSelectBidItem() {
       if (this.isSuccess == true) {
         this.v$.$validate();
-        if (!this.v$.$error) {
-          this.loading = true;
+        if (!this.v$.akadLelong.$error) {
+          // this.loading = true;
+          this.isLoadingDaftar = true;
           axios
             .post("/bidder/biditem", this.formRegisterBid, {
               headers: {
@@ -793,24 +1012,43 @@ export default {
               },
             })
             .then((response) => {
-              this.$refs.daftarBidaanClose.click();
-              this.$swal.fire({
-                icon: "success",
-                title: "Bidaan Berjaya Didaftarkan",
-                text: "Sila ke halaman rekod untuk senarai rekod bidaan.",
-                confirmButtonColor: "#344871",
-                confirmButtonText: "OK",
-                allowOutsideClick: false,
-                allowEscapeKey: false,
-              });
-              this.loading = false;
               console.log(response);
-              this.$emit("reloadComponent");
+              if (response.data.success == "success") {
+                this.isLoadingDaftar = false;
+                this.$refs.daftarBidaanClose.click();
+                this.$swal.fire({
+                  icon: "success",
+                  title: "Bidaan Berjaya Didaftarkan",
+                  text: "Sila ke halaman rekod untuk senarai rekod bidaan.",
+                  confirmButtonColor: "#344871",
+                  confirmButtonText: "OK",
+                  allowOutsideClick: false,
+                  allowEscapeKey: false,
+                });
+                // this.loading = false;
+                console.log(response);
+                this.$emit("reloadComponent");
+              } else {
+                this.isLoadingDaftar = false;
+                console.log(response);
+                this.$toast.add({
+                  severity: "error",
+                  summary: "Error",
+                  detail: "Please refresh page to get latest data.",
+                  life: 3000,
+                });
+              }
             })
             .catch((error) => {
-              this.$refs.daftarBidaanClose.click();
-              this.loading = false;
+              // this.$refs.daftarBidaanClose.click();
+              // this.loading = false;
               console.log(error);
+              this.$toast.add({
+                severity: "error",
+                summary: "Error",
+                detail: "Please refresh page to get latest data.",
+                life: 3000,
+              });
             });
         } else {
         }
@@ -829,4 +1067,14 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.container-height {
+  min-height: 70vh;
+}
+
+.card-customer {
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 80%);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/cart/TheCart.vue b/src/components/cart/TheCart.vue
index 9f76a4f..1ed267e 100644
--- a/src/components/cart/TheCart.vue
+++ b/src/components/cart/TheCart.vue
@@ -1,31 +1,23 @@
 <template>
   <the-template>
-    <!-- <base-card> -->
-    <button
+    <!-- <button
       v-on:click="toggleReloadComponent()"
       class="badge btn-secondary m-2"
     >
       Reload <i class="bi bi-arrow-clockwise"></i>
-    </button>
-    <!-- <cart-list
-        v-bind:key="componentKey"
-        v-on:reloadComponent="toggleReloadComponent"
-      ></cart-list> -->
+    </button> -->
     <cart-list-new
       v-bind:key="componentKey"
       v-on:reloadComponent="toggleReloadComponent"
     ></cart-list-new>
-    <!-- </base-card> -->
   </the-template>
 </template>
 
 <script>
-import CartList from "./CartList.vue";
 import CartListNew from "./CartListNew.vue";
 
 export default {
   components: {
-    "cart-list": CartList,
     "cart-list-new": CartListNew,
   },
   data() {
diff --git a/src/components/list/TheList.vue b/src/components/list/TheList.vue
index f84ad2a..7aca62a 100644
--- a/src/components/list/TheList.vue
+++ b/src/components/list/TheList.vue
@@ -68,7 +68,7 @@
             </div>
             <div class="col-12 text-center">
               <span class="text-400"
-                >Sila rujuk halamaan
+                >Sila rujuk halaman
                 <router-link v-bind:to="{ name: 'home' }">Utama</router-link>
                 untuk jadual lelong.</span
               >
diff --git a/src/components/result/IndexPaymentHistory.vue b/src/components/result/IndexPaymentHistory.vue
deleted file mode 100644
index fb956eb..0000000
--- a/src/components/result/IndexPaymentHistory.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <Navbar />
-  <div class="container" style="min-height: 80vh">
-    <!-- <button
-      class="btn btn-secondary float-start"
-      style="margin: 5px"
-      onclick="history.back()"
-    >
-      Kembali <i class="bi bi-backspace-fill"></i>
-    </button> -->
-    <h1>Keputusan <i class="bi bi-journal-text"></i></h1>
-    <PaymentHistory />
-  </div>
-  <Footer />
-</template>
-
-<script>
-import PaymentHistory from "./PaymentHistory.vue";
-import Navbar from "../Navbar.vue";
-import Footer from "../Footer.vue";
-
-export default {
-  name: "IndexPaymentHistory",
-  components: {
-    PaymentHistory,
-    Navbar,
-    Footer,
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 4e7de05..88f489d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,6 +33,9 @@ import InputText from 'primevue/inputtext';
 import FileUpload from 'primevue/fileupload';
 import Checkbox from 'primevue/checkbox';
 import RadioButton from 'primevue/radiobutton';
+import Accordion from 'primevue/accordion';
+import AccordionTab from 'primevue/accordiontab';
+import Dialog from 'primevue/dialog';
 
 import TheTemplate from './components/layouts/TheTemplate.vue'
 import BaseCard from './components/base/BaseCard.vue'
@@ -61,6 +64,9 @@ app.component('FileUpload', FileUpload);
 app.component('Checkbox', Checkbox);
 app.component('Checkbox', Checkbox);
 app.component('RadioButton', RadioButton);
+app.component('Accordion', Accordion);
+app.component('AccordionTab', AccordionTab);
+app.component('Dialog', Dialog);
 
 app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
 // app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');