diff --git a/src/components/BidHistory.vue b/src/components/BidHistory.vue
deleted file mode 100644
index 79be139..0000000
--- a/src/components/BidHistory.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <Navbar />
-  <div class="container" style="min-height: 100vh">
-    <!-- <button
-      class="btn btn-secondary float-start"
-      style="margin: 5px"
-      onclick="history.back()"
-    >
-      Kembali <i class="bi bi-backspace-fill"></i>
-    </button> -->
-    <h1>Rekod Bidaan <i class="bi bi-receipt"></i></h1>
-    <!-- <div class="card"> -->
-      <div class="card-body">
-        <button @click="renderListBid" class="badge btn-secondary mb-5">
-          Reload <i class="bi bi-arrow-clockwise"></i>
-        </button>
-        <br>
-        <label for="birthday">Pilih Tarikh:</label>
-        <input type="date" id="birthday" name="birthday">
-        <ListBid :key="ListBidComponent" />
-      </div>
-    <!-- </div> -->
-  </div>
-  <Footer />
-</template>
-
-<script>
-import Navbar from "./Navbar.vue";
-import Footer from "./Footer.vue";
-// import BidDetail from "./bidhistory/BidDetail.vue";
-import ListBid from "./bidhistory/ListBid.vue";
-
-export default {
-  name: "BidHistory",
-  data() {
-    return {
-      ListBidComponent: 0,
-    };
-  },
-  components: {
-    Navbar,
-    Footer,
-    ListBid,
-  },
-  methods: {
-    renderListBid() {
-      this.ListBidComponent += 1;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/components/Cart.vue b/src/components/Cart.vue
deleted file mode 100644
index f9d90b1..0000000
--- a/src/components/Cart.vue
+++ /dev/null
@@ -1,987 +0,0 @@
-<template>
-  <Navbar />
-  <div
-    v-if="loading"
-    style="min-height: 70vh; display: grid; place-items: center"
-  >
-    <div class="spinner-border" role="status">
-      <span class="visually-hidden">Loading...</span>
-    </div>
-  </div>
-  <div 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-primary mt-3"
-                    >
-                      Daftar Bidaan <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>
-            <p>ADAKAH ANDA PASTI?</p>
-            <h4 class="text-danger">
-              <i>*Bidaan tidak dapat diubah selepas didaftarkan.</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-danger me-2"
-              data-bs-dismiss="modal"
-            >
-              Batal
-            </button>
-            <button
-              type="submit"
-              class="btn btn-success"
-              @click="bidderSelectBidItem()"
-            >
-              Teruskan
-            </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>
-  <div class="container-fluid bg-light" style="bottom: 0">
-    <footer
-      class="
-        d-flex
-        flex-wrap
-        justify-content-between
-        align-items-center
-        py-3
-        my-4
-        border-top
-      "
-      style="bottom: 0"
-    >
-      <p class="col-md-4 mb-0 text-muted justify-content-start">
-        &copy; 2022 Company, Inc
-      </p>
-
-      <a
-        href="/"
-        class="
-          col-md-4
-          d-flex
-          align-items-center
-          justify-content-center
-          mb-3 mb-md-0
-          me-md-auto
-          link-dark
-          text-decoration-none
-        "
-      >
-        <svg class="bi me-2" width="40" height="32">
-          <!-- <use xlink:href="#bootstrap" /> -->
-          <!-- <i class="bi bi-spotify"></i> -->
-        </svg>
-      </a>
-
-      <ul class="nav col-md-4 justify-content-center">
-        <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted"
-            >Permodalan Kelantan Berhad</a
-          >
-        </li>
-        <!-- <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted">Home</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted">Features</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted">Pricing</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted">FAQs</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted">About</a>
-        </li> -->
-      </ul>
-    </footer>
-  </div>
-</template>
-
-<script>
-import Navbar from "./Navbar.vue";
-import Footer from "./Footer.vue";
-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",
-  components: {
-    Navbar,
-    Footer,
-  },
-  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) {
-        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);
-        });
-    },
-  },
-};
-</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.vue b/src/components/Dashboard.vue
deleted file mode 100644
index 0b69d29..0000000
--- a/src/components/Dashboard.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <Navbar />
-  <div class="container-fluid" style="margin-top: 100px">
-    <!-- <div class="row justify-content-center">
-      <div class="col-5 p-2 mb-5">
-        <Result />
-      </div>
-    </div> -->
-    <!-- <div class="container mb-5">
-      <div class="row">
-        <div class="col">
-          <h1 class="text-capitalize text-start">
-            Bersiap sedia untuk membida dengan
-            <span class="text-primary">Sistem Lelong</span>
-          </h1>
-        </div>
-        <div class="col">
-          <LelongToday />
-        </div>
-      </div>
-    </div> -->
-    <div class="container">
-      <div class="row justify-content-center">
-        <div class="col-7">
-          <!-- <LelongToday :key="componentKey"/> -->
-          <div class="card text-center">
-            <div class="card-header fw-bold text-uppercase">
-              Lelongan Hari Ini : {{ tarikh }}
-            </div>
-            <div class="card-body">
-              <LelongToday :key="componentKey" />
-            </div>
-            <div class="card-footer text-muted">
-              <router-link class="btn btn-primary" to="/list"
-                >Lihat Senarai</router-link
-              >
-            </div>
-          </div>
-          <!-- <h6>
-            <button class="badge mt-2 btn-secondary" @click="forceRerender">
-              Reload Component <i class="bi bi-arrow-up"></i>
-            </button>
-          </h6> -->
-          <div class="card text-center mt-5">
-            <div class="card-header fw-bold text-uppercase">
-              Lelongan Seterusnya
-            </div>
-            <div class="card-body">
-              <LelongNext />
-            </div>
-          </div>
-        </div>
-        <div class="col-5 p-5 pt-0">
-          <Karat />
-        </div>
-      </div>
-    </div>
-    <div></div>
-    <Footer />
-  </div>
-</template>
-
-<script>
-import Navbar from "./Navbar.vue";
-import Footer from "./Footer.vue";
-import LelongToday from "./dashboard/LelongToday.vue";
-import LelongNext from "./dashboard/LelongNext.vue";
-import Accordion from "./dashboard/Accordion.vue";
-import Karat from "./dashboard/Karat.vue";
-import Result from "./dashboard/Result.vue";
-import Todos from "./dashboard/Todos.vue";
-export default {
-  name: "Dashboard",
-
-  components: {
-    Navbar,
-    LelongToday,
-    LelongNext,
-    Footer,
-    Accordion,
-    Karat,
-    Result,
-    Todos,
-  },
-  data() {
-    return {
-      componentKey: 0,
-      tarikh: "",
-    };
-  },
-  mounted: function () {
-    this.currentDate();
-  },
-  methods: {
-    forceRerender() {
-      this.componentKey += 1;
-    },
-    currentDate() {
-      var today = new Date();
-      var yyyy = today.getFullYear();
-      let mm = today.getMonth() + 1; // Months start at 0!
-      let dd = today.getDate();
-
-      if (dd < 10) dd = "0" + dd;
-      if (mm < 10) mm = "0" + mm;
-
-      today = dd + "/" + mm + "/" + yyyy;
-
-      this.tarikh = today;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
deleted file mode 100644
index 2fc3dde..0000000
--- a/src/components/Footer.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="container-fluid bg-light " style="bottom: 0">
-    <footer
-      class="
-        d-flex
-        flex-wrap
-        justify-content-between
-        align-items-center
-        py-3
-        my-4
-        border-top
-      "
-    >
-      <p class="col-md-4 mb-0 text-muted justify-content-start">&copy; 2022 Company, Inc</p>
-
-      <a
-        href="/"
-        class="
-          col-md-4
-          d-flex
-          align-items-center
-          justify-content-center
-          mb-3 mb-md-0
-          me-md-auto
-          link-dark
-          text-decoration-none
-        "
-      >
-        <svg class="bi me-2" width="40" height="32">
-          <!-- <use xlink:href="#bootstrap" /> -->
-          <!-- <i class="bi bi-spotify"></i> -->
-        </svg>
-      </a>
-
-      <ul class="nav col-md-4 justify-content-center">
-        <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted">Permodalan Kelantan Berhad</a>
-        </li>
-        <!-- <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted">Home</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted">Features</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted">Pricing</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted">FAQs</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link px-2 text-muted">About</a>
-        </li> -->
-      </ul>
-    </footer>
-  </div>
-</template>
-
-<script>
-export default {};
-</script>
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 41aad81..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String,
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/List.vue b/src/components/List.vue
deleted file mode 100644
index 9ce0c5c..0000000
--- a/src/components/List.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <Navbar />
-  <!-- <router-view {{Modal}}><button class="btn btn-primary">sdsd</button></router-view> -->
-  <!-- <Modal /> -->
-  <div class="container">
-    <!-- <button
-      class="btn btn-secondary float-start"
-      style="margin: 5px"
-      onclick="history.back()"
-    >
-      Kembali <i class="bi bi-backspace-fill"></i>
-    </button> -->
-    <h1>Senarai <i class="bi bi-card-list"></i></h1>
-
-    <div class="input-group mb-3">
-      <span class="input-group-text" id="basic-addon3">Cawangan</span>
-      <select class="form-select" @change="pilihCawangan($event)">
-        <option value="disabled" selected disabled>Sila Pilih Cawangan</option>
-        <option v-for="data in cawangan" :key="data.id" v-bind:value="data.caw_id">
-          {{ data.caw_name }}
-        </option>
-        <input type="hidden" />
-      </select>
-    </div>
-    <h6>
-    <button class="badge m-2 btn-secondary" @click="forceRerender">
-      Reload <i class="bi bi-arrow-down"></i>
-    </button>
-  </h6>
-    <Senarai :key="componentKey" :selectedCawangan="selectCawangan" />
-  </div>
-  <Footer />
-</template>
-
-<script>
-import Navbar from "./Navbar.vue";
-import Footer from "./Footer.vue";
-import Senarai from "./list/Senarai.vue";
-// import Modal from "./Modal.vue"
-import axios from "axios";
-import useVuelidate from "@vuelidate/core";
-import { required, minLength, maxLength, between } from "@vuelidate/validators";
-// import Vue from 'vue';
-// Vue.forceUpdate();
-
-export default {
-  data() {
-    return {
-      componentKey: 0,
-      cawangan: "",
-      selectCawangan: "",
-    };
-  },
-  components: {
-    Navbar,
-    Footer,
-    Senarai,
-    // Modal,
-  },
-  mounted: function () {
-    this.getIdCawangan();
-  },
-  methods: {
-    forceRerender() {
-      this.componentKey += 1;
-    },
-    pilihCawangan(e) {
-      let test = e.target.value;
-      this.selectCawangan = test;
-      this.componentKey += 1;
-
-    },
-    getIdCawangan() {
-      axios
-        .get("/listcawlelongtodaystarted", {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          this.cawangan = response.data.lelong;
-          console.log(response.data.lelong);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/components/Login.vue b/src/components/Login.vue
index bfbb9a4..d4af078 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -219,7 +219,7 @@ export default {
         localStorage.setItem("name", response.data.user.name);
         localStorage.setItem("email", response.data.user.email);
         localStorage.setItem("notelbimbit", response.data.user.notelbimbit);
-        this.$router.push("/");
+        this.$router.push({name: 'home'});
         console.log(response);
       })
       .catch((response) => {
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
deleted file mode 100644
index 85085eb..0000000
--- a/src/components/Modal.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <!-- Button trigger modal -->
-  <button
-    type="button"
-    class="btn btn-primary"
-    data-toggle="modal"
-    data-target="#exampleModal"
-  >
-    Launch demo modal
-  </button>
-
-  <!-- Modal -->
-  <div
-    class="modal fade"
-    id="exampleModal"
-    tabindex="-1"
-    role="dialog"
-    aria-labelledby="exampleModalLabel"
-    aria-hidden="true"
-  >
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
-          <button
-            type="button"
-            class="close"
-            data-dismiss="modal"
-            aria-label="Close"
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body">...</div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">
-            Close
-          </button>
-          <button type="button" class="btn btn-primary">Save changes</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {};
-</script>
\ No newline at end of file
diff --git a/src/components/Pay.vue b/src/components/Pay.vue
deleted file mode 100644
index fa975c8..0000000
--- a/src/components/Pay.vue
+++ /dev/null
@@ -1,66 +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> -->
-    <div class="wrapper wrapper-content animated fadeInRight">
-      <h1>Bayar <i class="bi bi-credit-card-2-front"></i></h1>
-      <div class="row">
-        <div class="d-flex">
-          <h3 class="text-start">Belum Selesai </h3>
-          <h5>
-            <button @click="renderToPay" class="badge btn-secondary">
-              <i class="bi bi-arrow-clockwise"></i>
-            </button>
-          </h5>
-        </div>
-
-        <ToPay :key="toPayComponent" />
-      </div>
-      <!-- <div class="row">
-        <div class="d-flex">
-          <h3 class="text-start">Rekod Bayaran </h3>
-          <h5>
-            <button @click="renderPaymentHistory" class="badge btn-secondary">
-              <i class="bi bi-arrow-clockwise"></i>
-            </button>
-          </h5>
-        </div>
-        <PaymentHistory :key="paymentHistoryComponent" />
-      </div> -->
-    </div>
-  </div>
-
-  <Footer />
-</template>
-
-<script>
-import Navbar from "./Navbar.vue";
-import Footer from "./Footer.vue";
-import ToPay from "./result/ToPay.vue";
-import PaymentHistory from "./result/PaymentHistory.vue";
-
-export default {
-  name: "Pay",
-  components: { Navbar, Footer, ToPay, PaymentHistory },
-  data() {
-    return {
-      toPayComponent: 0,
-      paymentHistoryComponent: 0,
-    };
-  },
-  methods: {
-    renderToPay() {
-      this.toPayComponent += 1;
-    },
-    renderPaymentHistory() {
-      this.paymentHistoryComponent += 1;
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/components/Register.vue b/src/components/Register.vue
index 521dd7d..27e3195 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -376,7 +376,7 @@ export default {
         .then((response) => {
           if (response.data.success != "error") {
             localStorage.setItem("token", response.data.token);
-            this.$router.push("/login");
+            this.$router.push({name: 'login'});
             console.log(response);
           } else {
             console.log(response.data);
diff --git a/src/components/Test.vue b/src/components/Test.vue
deleted file mode 100644
index 6f46592..0000000
--- a/src/components/Test.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <Navbar />
-  <div class="container" style="height: 80vh">
-    <div class="card">
-      <div class="card-header">test</div>
-      <div class="card-body">
-        <p>test component</p>
-      </div>
-    </div>
-  </div>
-  <Footer />
-</template>
-
-<script>
-import Navbar from "./Navbar.vue";
-import Footer from "./Footer.vue";
-
-export default {
-  components: {
-    Navbar,
-    Footer,
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/components/authentication/TheLogin.vue b/src/components/authentication/TheLogin.vue
index b221c82..3954628 100644
--- a/src/components/authentication/TheLogin.vue
+++ b/src/components/authentication/TheLogin.vue
@@ -1,55 +1,234 @@
 <template>
-  <div class="container mt-5">
-    <div class="row justify-content-center">
-      <div class="col-7">
-        <form>
-          <h5>Login</h5>
-          <div class="mb-3">
-            <label for="exampleInputEmail1" class="form-label"
-              >Email address</label
+  <!-- <div class="row justify-content-md-center">
+    <h1>Login</h1>
+    <div class="col-6" style="border: 1px solid">
+      <form @submit.prevent="submit">
+        <div class="p-20">
+          <div class="mb-6">
+            <label
+              for="username"
+              class="
+                block
+                mb-2
+                text-sm
+                font-medium
+                text-gray-900
+                dark:text-gray-300
+              "
+              >Username</label
             >
             <input
-              type="email"
-              class="form-control"
-              id="exampleInputEmail1"
-              aria-describedby="emailHelp"
+              type="text"
+              v-model="form.username"
+              class="
+                bg-gray-50
+                border border-gray-300
+                text-gray-900 text-sm
+                rounded-lg
+                focus:ring-blue-500 focus:border-blue-500
+                block
+                w-full
+                p-2.5
+                dark:bg-gray-700
+                dark:border-gray-600
+                dark:placeholder-gray-400
+                dark:text-white
+                dark:focus:ring-blue-500
+                dark:focus:border-blue-500
+              "
+              placeholder="name@flowbite.com"
+              required=""
             />
-            <div id="emailHelp" class="form-text">
-              We'll never share your email with anyone else.
-            </div>
           </div>
-          <div class="mb-3">
-            <label for="exampleInputPassword1" class="form-label"
+          <div class="mb-6">
+            <label
+              for="password"
+              class="
+                block
+                mb-2
+                text-sm
+                font-medium
+                text-gray-900
+                dark:text-gray-300
+              "
               >Password</label
             >
             <input
               type="password"
-              class="form-control"
-              id="exampleInputPassword1"
+              v-model="form.password"
+              class="
+                bg-gray-50
+                border border-gray-300
+                text-gray-900 text-sm
+                rounded-lg
+                focus:ring-blue-500 focus:border-blue-500
+                block
+                w-full
+                p-2.5
+                dark:bg-gray-700
+                dark:border-gray-600
+                dark:placeholder-gray-400
+                dark:text-white
+                dark:focus:ring-blue-500
+                dark:focus:border-blue-500
+              "
+              required=""
             />
           </div>
-          <div class="mb-3 form-check">
-            <input
-              type="checkbox"
-              class="form-check-input"
-              id="exampleCheck1"
-            />
-            <label class="form-check-label" for="exampleCheck1"
-              >Check me out</label
-            >
+          <div class="flex items-start mb-6">
+            <div class="flex items-center h-5">
+              <input
+                id="remember"
+                aria-describedby="remember"
+                type="checkbox"
+                class="
+                  w-4
+                  h-4
+                  bg-gray-50
+                  rounded
+                  border border-gray-300
+                  focus:ring-3 focus:ring-blue-300
+                  dark:bg-gray-700
+                  dark:border-gray-600
+                  dark:focus:ring-blue-600
+                  dark:ring-offset-gray-800
+                "
+              />
+            </div>
+            <div class="ml-3 text-sm">
+              <label
+                for="remember"
+                class="font-medium text-gray-900 dark:text-gray-300"
+                >Remember me</label
+              >
+            </div>
           </div>
-          <div class="mb-3">
-            <router-link
-              v-bind:to="{ name: 'register' }"
-              class="btn btn-secondary"
-              >Register</router-link
-            >
-          </div>
-          <router-link v-bind:to="{ name: 'home' }" class="btn btn-primary"
-            >Submit</router-link
+          <button
+            @click="doLogin"
+            type="submit"
+            class="
+              text-white
+              bg-blue-700
+              hover:bg-blue-800
+              focus:ring-4 focus:outline-none focus:ring-blue-300
+              font-medium
+              rounded-lg
+              text-sm
+              w-full
+              sm:w-auto
+              px-5
+              py-2.5
+              text-center
+              dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+            "
           >
+            Submit
+          </button>
+        </div>
+      </form>
+      <router-link to="/register">Register</router-link><br />
+    </div>
+  </div> -->
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-5 text-center m-5 p-5 border rounded">
+        <form @submit.prevent="submit">
+          <h1 class="mb-5 text-primary">Sistem Lelong</h1>
+          <h4>Log Masuk</h4>
+
+          <div class="form-floating">
+            <input
+              type="text"
+              class="form-control"
+              v-model="form.username"
+              placeholder="username sini"
+              required
+            />
+            <label for="floatingInput">Username</label>
+          </div>
+          <div class="form-floating">
+            <input
+              type="password"
+              class="form-control"
+              v-model="form.password"
+              placeholder="Password"
+              required
+            />
+            <label for="floatingPassword">Password</label>
+          </div>
+          <button
+            @click="doLogin"
+            class="w-100 mt-4 mb-5 btn btn-primary"
+            type="submit"
+          >
+            Masuk
+          </button>
         </form>
+        <router-link to="/register">Daftar Akaun</router-link><br />
       </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import { useRouter } from "vue-router";
+import axios from "axios";
+export default {
+  name: "Login",
+
+  // ========api composition style===============
+  // setup() {
+
+  //     const router = useRouter();
+
+  //     const submit = async e => {
+  //         const form = new FormData(e.target);
+
+  //         const inputs = Object.fromEntries(form.entries());
+
+  //         const {data} = await axios.post('user/login', inputs, {
+  //             withCredentials: false
+  //         });
+
+  //         axios.defaults.headers.common['Authorization'] = 'Bearer ${data.token}';
+
+  //         console.log(data);
+  //         await router.push('/');
+  //     }
+
+  //     return {
+  //         submit
+  //     }
+  // }
+
+  //=========api option style===================
+  data() {
+    return {
+      form: {
+        username: "",
+        password: "",
+      },
+    };
+  },
+  methods: {
+    doLogin() {
+      axios
+        .post("/user/login", this.form)
+        .then((response) => {
+          localStorage.setItem("token", response.data.token);
+          localStorage.setItem("id", response.data.user.id);
+          localStorage.setItem("nokp", response.data.user.nokp);
+          localStorage.setItem("name", response.data.user.name);
+          localStorage.setItem("email", response.data.user.email);
+          localStorage.setItem("notelbimbit", response.data.user.notelbimbit);
+          this.$router.push({ name: "home" });
+          console.log(response);
+        })
+        .catch((response) => {
+          alert(response.message);
+          console.log(response);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/bidhistory/ListBid.vue b/src/components/bidhistory/ListBid.vue
deleted file mode 100644
index 3d8a065..0000000
--- a/src/components/bidhistory/ListBid.vue
+++ /dev/null
@@ -1,97 +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="">
-    <div class="container">
-      <!-- <p class="text-start">Jumlah Surat Bida: {{listBid.length}}</p> -->
-      <!-- <div v-for="data in listBid" :key="data.id">
-        <div class="d-flex">
-          <p>Lelong ID:</p>
-          <p>{{ data.lelong_id }}</p>
-        </div>
-        <div class="d-flex">
-          <p>Tarikh Lelong:</p>
-          <p>{{ data.t_lelong }}</p>
-        </div>
-        <div class="container">
-          <div class="card">{{ data.lelongbid.length }} surat</div>
-        </div>
-      </div> -->
-      <div>
-        <table class="table">
-          <thead>
-            <tr>
-              <th scope="col">#</th>
-              <th scope="col">No Rujukan</th>
-              <th scope="col">Harga Asas</th>
-              <th scope="col">Harga Bida</th>
-              <th scope="col">Beza</th>
-              <th scope="col">Masa Bidaan</th>
-              <th scope="col">Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(data, index) in listBid.slice().reverse()" :key="data.id">
-              <th scope="row">{{index + 1}}</th>
-              <td>tiada data</td>
-              <td></td>
-              <td>RM{{data.hargabida}}</td>
-              <td></td>
-              <td>{{data.masa_bidaan}}</td>
-              <td>{{data.status_bidder}}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-
-export default {
-  name: "BidDetail",
-  data() {
-    return {
-      listBid: [],
-      loading: false,
-      user_id: localStorage.getItem("id"),
-    };
-  },
-  mounted: function () {
-    this.liveData();
-  },
-  methods: {
-    liveData() {
-      this.loading = true;
-      axios
-        .get("/bidder/listbiditem", {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-          params: {
-            user_id: this.user_id,
-          },
-        })
-        .then((response) => {
-          this.listBid = response.data;
-          // console.log(response);
-          // this.loading = false;
-          // this.listBid = response.data;
-          console.log(response.data);
-          this.loading = false;
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/components/dashboard/Karat.vue b/src/components/home/CurrentKarat.vue
similarity index 71%
rename from src/components/dashboard/Karat.vue
rename to src/components/home/CurrentKarat.vue
index 5eaf070..2854679 100644
--- a/src/components/dashboard/Karat.vue
+++ b/src/components/home/CurrentKarat.vue
@@ -7,8 +7,8 @@
       <span class="visually-hidden">Loading...</span>
     </div>
   </div>
-  <div v-else class="card text-center">
-    <div class="card-header fw-bold text-uppercase">Karat Semasa</div>
+  <!-- <div v-else class="card text-center"> -->
+  <!-- <div class="card-header fw-bold text-uppercase">Karat Semasa</div>
     <div class="card-body">
       <table class="table table-bordered table-hover">
         <thead class="table-light">
@@ -28,7 +28,14 @@
           </tr>
         </tbody>
       </table>
+    </div> -->
+  <div v-else class="grid-container">
+    <div v-for="data in karat" v-bind:key="data.id" class="card">
+      <p>{{ data.karat }}</p>
+      <p>{{ data.keterangan }}</p>
+      <p>RM{{ data.harga }}</p>
     </div>
+    <!-- </div> -->
   </div>
 </template>
 
@@ -66,4 +73,20 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
+.card {
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  padding: 20px;
+  margin: 10px;
+  width: 140px;
+  height: 130px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/dashboard/LelongNext.vue b/src/components/home/LelongNext.vue
similarity index 100%
rename from src/components/dashboard/LelongNext.vue
rename to src/components/home/LelongNext.vue
diff --git a/src/components/dashboard/LelongToday.vue b/src/components/home/LelongToday.vue
similarity index 63%
rename from src/components/dashboard/LelongToday.vue
rename to src/components/home/LelongToday.vue
index cf7bfe5..6593504 100644
--- a/src/components/dashboard/LelongToday.vue
+++ b/src/components/home/LelongToday.vue
@@ -7,27 +7,32 @@
       <span class="visually-hidden">Loading...</span>
     </div>
   </div>
-  <table v-else class="table table-bordered table-hover">
-    <thead class="table-body">
-      <tr>
-        <th>Bil</th>
-        <th>Cawangan</th>
-        <th>Masa Mula</th>
-      </tr>
-    </thead>
-    <tbody v-if="responseData">
-      <tr v-for="(item, index) in response" :key="item.id">
-        <td>{{ index + 1 }}</td>
-        <td>{{ item.caw_name }}</td>
-        <td>{{ item.masamula_lelong }}</td>
-      </tr>
-    </tbody>
-    <tbody v-else>
-      <tr>
-        <td colspan="3">Tiada Data</td>
-      </tr>
-    </tbody>
-  </table>
+  <div v-else>
+    <table class="table table-bordered table-hover">
+      <thead class="table-body">
+        <tr>
+          <th>Bil</th>
+          <th>Cawangan</th>
+          <th>Masa Mula</th>
+          <th>Masa Tamat</th>
+        </tr>
+      </thead>
+      <tbody v-if="responseData">
+        <tr v-for="(item, index) in response" :key="item.id">
+          <td>{{ index + 1 }}</td>
+          <td>{{ item.caw_name }}</td>
+          <td>{{ item.masamula_lelong }}</td>
+          <td>{{ item.masatamat_lelong }}</td>
+        </tr>
+      </tbody>
+      <tbody v-else>
+        <tr>
+          <td colspan="3">Tiada Data</td>
+        </tr>
+      </tbody>
+    </table>
+    <router-link v-bind:to="{name: 'list'}" class="btn btn-primary">Lihat Senarai</router-link>
+  </div>
 </template>
 
 <script>
diff --git a/src/components/home/TheHome.vue b/src/components/home/TheHome.vue
index 973c51a..fba547c 100644
--- a/src/components/home/TheHome.vue
+++ b/src/components/home/TheHome.vue
@@ -5,105 +5,24 @@
         <div class="col-md-8">
           <h4>Lelongan Hari Ini: 30/06/2022</h4>
           <base-card>
-            <div>
-              <table class="table table-bordered table-hover">
-                <thead>
-                  <tr>
-                    <th scope="col">#</th>
-                    <th scope="col">Cawangan</th>
-                    <th scope="col">Masa Mula</th>
-                    <th scope="col">Countdown</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <th scope="row">1</th>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                    <td>@mdo</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">2</th>
-                    <td>Jacob</td>
-                    <td>Thornton</td>
-                    <td>@fat</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">3</th>
-                    <td colspan="2">Larry the Bird</td>
-                    <td>@twitter</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">3</th>
-                    <td colspan="2">Larry the Bird</td>
-                    <td>@twitter</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">3</th>
-                    <td colspan="2">Larry the Bird</td>
-                    <td>@twitter</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+            <lelong-today></lelong-today>
           </base-card>
           <h4 class="mt-4">Lelongan Seterusnya</h4>
           <base-card>
-            <div>
-              <table class="table table-bordered table-hover">
-                <thead>
-                  <tr>
-                    <th scope="col">#</th>
-                    <th scope="col">Cawangan</th>
-                    <th scope="col">Tarikh</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <th scope="row">1</th>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">1</th>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">1</th>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">1</th>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">1</th>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">1</th>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+            <lelong-next></lelong-next>
           </base-card>
         </div>
         <div class="col-md-4">
           <div class="col">
             <h4 class="ps-3">Emas Semasa</h4>
-            <div class="grid-container">
+            <current-karat></current-karat>
+            <!-- <div class="grid-container">
               <div v-for="data in karat" v-bind:key="data.id" class="card">
-                <p>{{data.karat}}</p>
-                <p>{{data.keterangan}}</p>
-                <p>RM{{data.harga}}</p>
+                <p>{{ data.karat }}</p>
+                <p>{{ data.keterangan }}</p>
+                <p>RM{{ data.harga }}</p>
               </div>
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
@@ -113,8 +32,16 @@
 
 <script>
 import axios from "axios";
+import LelongToday from "./LelongToday.vue";
+import LelongNext from "./LelongNext.vue";
+import CurrentKarat from "./CurrentKarat.vue";
 
 export default {
+  components: {
+    "lelong-today": LelongToday,
+    "lelong-next": LelongNext,
+    "current-karat": CurrentKarat,
+  },
   name: "Karat",
   data() {
     return {
@@ -147,18 +74,3 @@ export default {
 };
 </script>
 
-<style scoped>
-.grid-container {
-  display: grid;
-  grid-template-columns: auto auto;
-}
-
-.card {
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
-  padding: 20px;
-  margin: 10px;
-  width: 140px;
-  height: 130px;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index 1747974..557891d 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -214,10 +214,10 @@ import { required, integer, numeric, minValue } from "@vuelidate/validators";
 import { mapGetters, mapActions } from "vuex";
 
 export default {
-//   components: {
-//     Senarai,
-//   },
-  props: ["selectedCawangan"],
+  props: {
+    selectedCawangan: { type: String },
+    reloadId: { type: Number },
+  },
   data() {
     return {
       status: false,
@@ -320,7 +320,8 @@ export default {
             this.loading = true;
             this.$refs.tambahClose.click();
             this.loading = false;
-            location.reload();
+            this.$emit("reloadComponent", this.reloadId);
+            // location.reload();
           })
           .catch((error) => {
             console.log(error);
diff --git a/src/components/list/TheList.vue b/src/components/list/TheList.vue
index d751528..379c745 100644
--- a/src/components/list/TheList.vue
+++ b/src/components/list/TheList.vue
@@ -27,6 +27,7 @@
       <list-item
         v-bind:key="componentKey"
         v-bind:selectedCawangan="selectCawangan"
+        v-on:reloadComponent="toggleReloadComponent"
       ></list-item>
     </div>
   </the-template>
@@ -42,11 +43,13 @@ import { required, minLength, maxLength, between } from "@vuelidate/validators";
 // Vue.forceUpdate();
 
 export default {
+  emits: ["reloadComponent"],
   data() {
     return {
       componentKey: 0,
       cawangan: "",
       selectCawangan: "",
+      id: "",
     };
   },
   components: {
@@ -57,6 +60,10 @@ export default {
     this.getIdCawangan();
   },
   methods: {
+    toggleReloadComponent(value) {
+      console.log("jdi");
+      this.componentKey += 1;
+    },
     forceRerender() {
       this.componentKey += 1;
     },
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
new file mode 100644
index 0000000..9dfdf4c
--- /dev/null
+++ b/src/components/result/ResultDetail.vue
@@ -0,0 +1,119 @@
+<template>
+  <the-template>
+    <base-card>
+      <div class="container">
+        <div class="row">
+          <div class="col">
+            <div class="d-flex justify-content-between">
+              <router-link
+                v-bind:to="{ name: 'result' }"
+                class="btn btn-secondary m-3 ms-0"
+                >Kembali</router-link
+              >
+              <h5 class="m-3">Keputusan Tarikh Lelong: {{tarikhLelong}}</h5>
+              <button class="btn btn-primary m-3 me-0">Bayar</button>
+            </div>
+            <div>
+              <div class="accordion" id="accordionExample">
+                <div
+                  v-for="list in lists"
+                  v-bind:key="list"
+                  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"
+                    >
+                      {{ list.cawangan }}
+                    </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 scope="col">Bil</th>
+                            <th scope="col">No Rujukan</th>
+                            <th scope="col">Harga Bidaan</th>
+                            <th scope="col">Marhun</th>
+                            <th scope="col">Status</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr
+                            v-for="(data, index) in list.sag"
+                            v-bind:key="data"
+                          >
+                            <td>{{ index + 1 }}</td>
+                            <td>{{ data.norujukan }}</td>
+                            <td>RM {{ data.hargabida }}</td>
+                            <td>{{ data.marhun }}</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                      <h5 class="mb-5">
+                        Jumlah Harga Bida: RM{{ list.total_hargabida }}
+                      </h5>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </base-card>
+  </the-template>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      lists: [],
+      tarikhLelong: '',
+    };
+  },
+  mounted: function () {
+    this.liveData();
+  },
+  methods: {
+    liveData() {
+      axios
+        .get(
+          "/bayar/" +
+            localStorage.getItem("id") +
+            "/" +
+            localStorage.getItem("lelong_id"),
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          }
+        )
+        .then((response) => {
+          if (response.statusText == "OK") {
+            this.lists = response.data.data;
+            this.tarikhLelong = response.data.tarikh_lelong;
+          } else {
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/result/ResultMain.vue b/src/components/result/ResultMain.vue
new file mode 100644
index 0000000..95a55b3
--- /dev/null
+++ b/src/components/result/ResultMain.vue
@@ -0,0 +1,45 @@
+<template>
+  <base-card>
+    <h5>KEPUTUSAN</h5>
+    <table class="table table-bordered table-hover">
+      <thead>
+        <tr>
+          <th scope="col">Bil</th>
+          <th scope="col">Tarikh</th>
+          <th scope="col">Jumlah</th>
+          <th scope="col">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td><router-link v-bind:to="{ name: 'detail' }">10/03/2020</router-link></td>
+          <td>RM1212.00</td>
+          <td class="text-danger">Belum Selesai</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>12/03/2020</td>
+          <td>RM1212.00</td>
+          <td class="text-success">Selesai</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>12/03/2020</td>
+          <td>RM1212.00</td>
+          <td class="text-success">Selesai</td>
+        </tr>
+      </tbody>
+    </table>
+  </base-card>
+</template>
+
+<script>
+import ResultDetail from "./ResultDetail.vue";
+
+export default {
+  components: {
+    "result-detail": ResultDetail,
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/result/TheResult.vue b/src/components/result/TheResult.vue
index 4977094..ae71664 100644
--- a/src/components/result/TheResult.vue
+++ b/src/components/result/TheResult.vue
@@ -3,39 +3,7 @@
     <div class="container">
       <div class="row justify-content-center">
         <div class="col-7">
-          <base-card>
-            <h5>KEPUTUSAN</h5>
-            <table class="table table-bordered table-hover">
-              <thead>
-                <tr>
-                  <th scope="col">Bil</th>
-                  <th scope="col">Tarikh</th>
-                  <th scope="col">Jumlah</th>
-                  <th scope="col">Status</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>12/03/2020</td>
-                  <td>RM1212.00</td>
-                  <td class="text-danger">Belum Selesai</td>
-                </tr>
-                <tr>
-                  <td>1</td>
-                  <td>12/03/2020</td>
-                  <td>RM1212.00</td>
-                  <td class="text-success">Selesai</td>
-                </tr>
-                <tr>
-                  <td>1</td>
-                  <td>12/03/2020</td>
-                  <td>RM1212.00</td>
-                  <td class="text-success">Selesai</td>
-                </tr>
-              </tbody>
-            </table>
-          </base-card>
+          <result-main></result-main>
         </div>
       </div>
     </div>
@@ -43,7 +11,11 @@
 </template>
 
 <script>
+import ResultMain from "./ResultMain.vue";
 export default {
+  components: {
+    "result-main": ResultMain,
+  },
   data() {
     return {};
   },
diff --git a/src/router/index.js b/src/router/index.js
index d92e30b..0847d87 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -120,133 +120,88 @@
 
 // export default router;
 
-// import TheLogin from '../components/authentication/TheLogin.vue'
+import TheLogin from "../components/authentication/TheLogin.vue";
 // import TheRegister from '../components/authentication/TheRegister.vue'
-import TheHome from '../components/home/TheHome.vue'
-import TheCart from '../components/cart/TheCart.vue'
-import TheResult from '../components/result/TheResult.vue'
-import TheProfile from '../components/profile/TheProfile.vue'
-import TheBidRecord from '../components/bid-record/TheBidRecord.vue'
-import TheList from '../components/list/TheList.vue'
+import TheHome from "../components/home/TheHome.vue";
+import TheCart from "../components/cart/TheCart.vue";
+import TheResult from "../components/result/TheResult.vue";
+import TheProfile from "../components/profile/TheProfile.vue";
+import TheBidRecord from "../components/bid-record/TheBidRecord.vue";
+import TheList from "../components/list/TheList.vue";
+import ResultDetail from "../components/result/ResultDetail.vue";
 
-import { createRouter, createWebHistory, createMemoryHistory } from "vue-router";
-import Login from '../components/Login.vue';
-import Register from '../components/Register.vue';
-import Dashboard from './../components/Dashboard.vue';
-import Cart from './../components/Cart.vue';
-import List from './../components/List.vue'
-import Pay from '../components/Pay.vue'
-import BidHistory from '../components/BidHistory.vue'
-import Test from "../components/Test.vue"
-import IndexPaymentHistory from '../components/result/IndexPaymentHistory.vue'
+import {
+  createRouter,
+  createWebHistory,
+  createMemoryHistory,
+} from "vue-router";
+import Login from "../components/Login.vue";
+import Register from "../components/Register.vue";
 // import IndexPaymentHistory from '../components/result/IndexPaymentHistory.vue'
 // import Modals from './../components/Modal.vue'
 // import { Modal } from "bootstrap";
 
 const routes = [
-    {
-        path: '/login',
-        name: 'login',
-        component: Login,
-        // meta: { guest: true }
-    },
-    {
-        path: '/register',
-        name: 'register',
-        component: Register,
-        // meta: { guest: true }
-
-    },
-    {
-        path: '/',
-        name: 'home',
-        component: TheHome,
-        // meta: { requiresAuth: true }
-    },
-
-    {
-        path: '/cart',
-        name: 'cart',
-        component: TheCart,
-        // meta: { requiresAuth: true }
-
-    },
-    {
-        path: '/list',
-        name: 'list',
-        component: TheList,
-        // meta: { requiresAuth: true }
-
-    },
-    {
-        path: '/pay',
-        name: 'Pay',
-        component: Pay,
-        // meta: { requiresAuth: true }
-
-    },
-    {
-        path: '/profile',
-        name: 'profile',
-        component: TheProfile,
-        // meta: { requiresAuth: true }
-
-    }, 
-    {
-        path: '/bid-record',
-        name: 'bid-record',
-        component: TheBidRecord,
-        // meta: { requiresAuth: true }
-
-    }, 
-    {
-        path: '/result',
-        name: 'result',
-        component: TheResult,
-        // meta: { requiresAuth: true }
-
-    }, 
-    {
-        path: '/test',
-        name: 'test',
-        component: Test,
-        // meta: { requiresAuth: true }
-
-    }, 
-    // {
-    //     name: 'Modal',
-    //     component: Modals,
-    // }
-
-]
+  {
+    path: "/login",
+    name: "login",
+    component: TheLogin,
+    // meta: { guest: true }
+  },
+  {
+    path: "/register",
+    name: "register",
+    component: Register,
+    // meta: { guest: true }
+  },
+  {
+    path: "/",
+    name: "home",
+    component: TheHome,
+  },
+  {
+    path: "/cart",
+    name: "cart",
+    component: TheCart,
+    // meta: { requiresAuth: true }
+  },
+  {
+    path: "/list",
+    name: "list",
+    component: TheList,
+    // meta: { requiresAuth: true }
+  },
+  {
+    path: "/profile",
+    name: "profile",
+    component: TheProfile,
+    // meta: { requiresAuth: true }
+  },
+  {
+    path: "/bid-record",
+    name: "bid-record",
+    component: TheBidRecord,
+    // meta: { requiresAuth: true }
+  },
+  {
+    path: "/result",
+    name: "result",
+    component: TheResult,
+    // meta: { requiresAuth: true }
+  },
+  {
+    path: "/result/detail",
+    name: "detail",
+    component: ResultDetail,
+    // meta: { requiresAuth: true }
+  },
+];
 
 const router = createRouter({
-    // history: createWebHistory(process.env.BASE_URL),
-    history: createWebHistory(),
-    // history: createMemoryHistory(),
-    routes,
-})
+  // history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(),
+  // history: createMemoryHistory(),
+  routes,
+});
 
-// function loggedIn() {
-//     return true;
-// }
-
-// router.beforeEach((to, from, next) => {
-//     if (to.matched.some(record => record.meta.requiresAuth)) {
-//         if (!loggedIn()) {
-//             next({
-//                 // path: '/login',
-//                 // query: { redirect: to.fullPath },
-//             })
-//         }
-//         else {
-//             next()
-//         }
-//     } else if (to.matched.some(record => record.meta.guest)) {
-//         next()
-//     } else {
-//         next()
-//     }
-// })
-
-export default router
+export default router;