From d0595c21d155a95dcf6b875315ea9f43f33da35e Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Thu, 28 Apr 2022 14:40:50 +0800
Subject: [PATCH] add dashboard, list, cart

---
 src/App.vue                        |  18 +-
 src/components/Cart.vue            | 375 ++++++++++---------------
 src/components/Dashboard.vue       |  91 +-----
 src/components/Footer.vue          | 243 ++++------------
 src/components/List.vue            | 427 ++++++++++++++---------------
 src/components/Login.vue           |  45 ++-
 src/components/Navbar.vue          | 222 ++++-----------
 src/components/Register.vue        | 213 ++++++++++++--
 src/components/dashboard/Card.vue  | 111 ++++----
 src/components/dashboard/Karat.vue |  53 ++++
 src/router/index.js                |   3 -
 11 files changed, 809 insertions(+), 992 deletions(-)
 create mode 100644 src/components/dashboard/Karat.vue

diff --git a/src/App.vue b/src/App.vue
index d5d54b8..5b49bb1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,29 +1,19 @@
 <template>
-  <div class="list">
-    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
-    <!-- <Login /> -->
+  <!-- <div class="list">
+  
     <router-link to="/login">Login</router-link><br />
     <router-link to="/register">Register</router-link><br />
     <router-link to="/">Home</router-link><br />
-    <router-link to="/list">List</router-link><br />
-    <!-- <router-link to="/dashboard">Dashboard</router-link> -->
-    <router-link to="/cart">Cart</router-link>
-    <router-link to="/pay">Pay</router-link>
-  </div>
+    
+  </div> -->
 
   <router-view />
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
-// import Login from "./components/Login.vue";
 
 export default {
   name: "App",
-  components: {
-    // HelloWorld,
-    // Login,
-  },
 };
 </script>
 
diff --git a/src/components/Cart.vue b/src/components/Cart.vue
index 9146291..1f4603c 100644
--- a/src/components/Cart.vue
+++ b/src/components/Cart.vue
@@ -1,22 +1,23 @@
 <template>
   <!-- <div class="top-0 fixed w-full">
-    <Navbar />
   </div> -->
 
-  <div class="container mt-3">
+  <Navbar />
+  <div class="container">
+    <button
+      class="btn btn-secondary float-start"
+      style="margin: 5px"
+      onclick="history.back()"
+    >
+      Go Back <i class="bi bi-backspace-fill"></i>
+    </button>
     <div class="wrapper wrapper-content animated fadeInRight">
-      <h1>Cart <i class="bi bi-123"></i> <i class="bi bi-house-door"></i></h1>
+      <h1>Cart <i class="bi bi-cart-fill"></i></h1>
       <div class="row">
         <div class="col-lg-9 col-sm-12" style="overflow-x: auto">
           <div class="ibox">
-            <!-- <div class="container">
-              <div class="row justify-content-between">
-                <span class="pull-right">(<strong>5</strong>) items</span>
-                <h5>Items in your cart</h5>
-              </div>
-            </div> -->
-            <div class="ibox-content">
-              <div class="table-responsive">
+            <div class="table-responsive">
+              <div class="ibox-content">
                 <table class="table shoping-cart-table">
                   <thead>
                     <tr>
@@ -44,10 +45,11 @@
                   </thead>
                 </table>
               </div>
-            </div>
-
-            <div class="ibox-content">
-              <div class="table-responsive">
+              <div
+                class="ibox-content"
+                v-for="senaraiCart in senaraiCarts"
+                :key="senaraiCart.id"
+              >
                 <table class="table shoping-cart-table">
                   <tbody>
                     <tr>
@@ -55,8 +57,8 @@
                         <div class="cart-product-imitation"></div>
                       </td> -->
                       <td class="desc">
-                        <h3>
-                          <a href="#" disabled> AN0101220130-0006 </a>
+                        <h3 class="text-primary">
+                          {{senaraiCart.datalelongbid.norujukan}}
                         </h3>
                         <!-- <p class="small">
                           It is a long established fact that a reader will be
@@ -65,10 +67,10 @@
                           is
                         </p> -->
                         <dl class="small m-b-none">
-                          <!-- <dt>Description lists</dt> -->
-                          <dd>10.5g</dd>
-                          <dd>Mutu 999, 24K</dd>
-                          <dd>Cawangan: Ar-Rahn Kota Bharu 2</dd>
+                          <!-- <dt>Maklumat SAG</dt> -->
+                          <p>Marhun: {{senaraiCart.datalelongbid.marhun}}</p>
+                          <p>Berat: {{senaraiCart.datalelongbid.berat}}g</p>
+                          <p>Cawangan: {{senaraiCart.datalelongbid.cawangan.caw_name}}</p>
                         </dl>
 
                         <div class="m-t-sm">
@@ -76,9 +78,10 @@
                             ><i class="fa fa-gift"></i> Add gift package</a
                           >
                           | -->
-                          <a class="btn btn-outline-secondary text-muted"
-                            >Padam Item <i class="fa fa-trash"></i
-                          ></a>
+                          <button class="btn btn-outline-danger">
+                            Padam Item
+                          </button>
+                          <!-- <p>{{ senaraiCart.datalelongbid.lelongbidmarhun }}</p> -->
                         </div>
                       </td>
 
@@ -86,7 +89,7 @@
                         width="30"
                         style="width: 145.82px; text-align: center"
                       >
-                        RM2,080.00
+                        RM{{senaraiCart.datalelongbid.hargaasas}}
                         <!-- <s class="small text-muted">$230,00</s> -->
                       </td>
                       <td
@@ -97,206 +100,31 @@
                           type="text"
                           class="form-control"
                           placeholder="+100.00"
+                          disabled
                         />
+                        <button
+                          class="btn btn-outline-secondary"
+                          data-bs-toggle="modal"
+                          data-bs-target="#cartModal"
+                          @click="clickModal(sag)"
+                        >
+                          Ubah
+                        </button>
                       </td>
                       <td
                         width="30"
                         style="width: 145.82px; text-align: center"
                       >
-                        <h4>RM2,180.00</h4>
+                        <h4>RM{{ senaraiCart.hargabida }}</h4>
                       </td>
                     </tr>
                   </tbody>
                 </table>
               </div>
             </div>
-            <div class="ibox-content">
-              <div class="table-responsive">
-                <table class="table shoping-cart-table">
-                  <tbody>
-                    <tr>
-                      <!-- <td width="90">
-                        <div class="cart-product-imitation"></div>
-                      </td> -->
-                      <td class="desc">
-                        <h3>
-                          <a href="#" disabled> AN0101220130-0006 </a>
-                        </h3>
-                        <!-- <p class="small">
-                          It is a long established fact that a reader will be
-                          distracted by the readable content of a page when
-                          looking at its layout. The point of using Lorem Ipsum
-                          is
-                        </p> -->
-                        <dl class="small m-b-none">
-                          <!-- <dt>Description lists</dt> -->
-                          <dd>10.5g</dd>
-                          <dd>Mutu 999, 24K</dd>
-                          <dd>Cawangan: Ar-Rahn Kota Bharu 2</dd>
-                        </dl>
-
-                        <div class="m-t-sm">
-                          <!-- <a href="#" class="text-muted"
-                            ><i class="fa fa-gift"></i> Add gift package</a
-                          >
-                          | -->
-                          <a class="btn btn-outline-secondary text-muted"
-                            >Padam Item <i class="fa fa-trash"></i
-                          ></a>
-                        </div>
-                      </td>
-
-                      <td
-                        width="30"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        RM2,080.00
-                        <!-- <s class="small text-muted">$230,00</s> -->
-                      </td>
-                      <td
-                        width="120"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        <input
-                          type="text"
-                          class="form-control"
-                          placeholder="+100.00"
-                        />
-                      </td>
-                      <td
-                        width="30"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        <h4>RM2,180.00</h4>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            <div class="ibox-content">
-              <div class="table-responsive">
-                <table class="table shoping-cart-table">
-                  <tbody>
-                    <tr>
-                      <!-- <td width="90">
-                        <div class="cart-product-imitation"></div>
-                      </td> -->
-                      <td class="desc">
-                        <h3>
-                          <a href="#" disabled> AN0101220130-0006 </a>
-                        </h3>
-                        <!-- <p class="small">
-                          It is a long established fact that a reader will be
-                          distracted by the readable content of a page when
-                          looking at its layout. The point of using Lorem Ipsum
-                          is
-                        </p> -->
-                        <dl class="small m-b-none">
-                          <!-- <dt>Description lists</dt> -->
-                          <dd>10.5g</dd>
-                          <dd>Mutu 999, 24K</dd>
-                          <dd>Cawangan: Ar-Rahn Kota Bharu 2</dd>
-                        </dl>
-
-                        <div class="m-t-sm">
-                          <!-- <a href="#" class="text-muted"
-                            ><i class="fa fa-gift"></i> Add gift package</a
-                          >
-                          | -->
-                          <a class="btn btn-outline-secondary text-muted"
-                            >Padam Item <i class="fa fa-trash"></i
-                          ></a>
-                        </div>
-                      </td>
-
-                      <td
-                        width="30"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        RM2,080.00
-                        <!-- <s class="small text-muted">$230,00</s> -->
-                      </td>
-                      <td
-                        width="120"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        <input
-                          type="text"
-                          class="form-control"
-                          placeholder="+100.00"
-                        />
-                      </td>
-                      <td
-                        width="30"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        <h4>RM2,180.00</h4>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            <!-- <div class="ibox-content">
-              <div class="table-responsive">
-                <table class="table shoping-cart-table">
-                  <tbody>
-                    <tr>
-                      <td width="90">
-                        <div class="cart-product-imitation"></div>
-                      </td>
-                      <td class="desc">
-                        <h3>
-                          <a href="#"> Photo editor </a>
-                        </h3>
-                        <p class="small">
-                          Page when looking at its layout. The point of using
-                          Lorem Ipsum is
-                        </p>
-                        <dl class="small m-b-none">
-                          <dt>Description lists</dt>
-                          <dd>
-                            A description list is perfect for defining terms.
-                          </dd>
-                        </dl>
-                        <div class="m-t-sm">
-                          <a href="#" class="text-muted"
-                            ><i class="fa fa-gift"></i> Add gift package</a
-                          >
-                          |
-                          <a href="#" class="text-muted"
-                            ><i class="fa fa-trash"></i> Remove item</a
-                          >
-                        </div>
-                      </td>
-                      <td>$700,00</td>
-                      <td width="65">
-                        <input
-                          type="text"
-                          class="form-control"
-                          placeholder="1"
-                        />
-                      </td>
-                      <td>
-                        <h4>$70,00</h4>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div> -->
-            <div class="ibox-content">
-              <!-- <button class="btn btn-primary pull-right">
-                <i class="fa fa fa-shopping-cart"></i> Checkout
-              </button>
-              <button class="btn btn-white">
-                <i class="fa fa-arrow-left"></i> Continue shopping
-              </button> -->
-            </div>
           </div>
         </div>
+
         <div class="col-3">
           <div class="ibox" style="border: solid 0.5px">
             <div class="ibox-title" style="padding: 20px">
@@ -314,8 +142,10 @@
               </span> -->
               <hr />
               <span class="text-muted small">
-                <i>*Caj RM10.00 akan dikenakan untuk membuat pendaftaran bidaan.
-                Sila klik butang dibawah untuk meneruskan.</i>
+                <i
+                  >*Caj RM10.00 akan dikenakan untuk membuat pendaftaran bidaan.
+                  Sila klik butang dibawah untuk meneruskan.</i
+                >
               </span>
               <div class="m-t-sm">
                 <div class="btn-group">
@@ -412,12 +242,81 @@
     </div>
   </div>
 
-  <!-- <Footer /> -->
+  <Footer />
+  <div
+    class="modal fade"
+    id="cartModal"
+    tabindex="-1"
+    aria-labelledby="cartModalLabel"
+    aria-hidden="true"
+    data-bs-backdrop="static"
+    data-bs-keyboard="false"
+  >
+    <!-- <form @submit.prevent="submit"> -->
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="cartModalLabel"></h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+
+        <div class="modal-body">
+          <div class="row m-2">
+            <!-- <div class="col-2 border"></div> -->
+            <div class="col">
+              <table class="table">
+                <thead>
+                  <tr>
+                    <th scope="col">No</th>
+                    <th scope="col">Jenis Marhun</th>
+                    <th scope="col">Karat</th>
+                    <th scope="col">Berat</th>
+                    <th scope="col">Harga Asas</th>
+                  </tr>
+                </thead>
+                <tbody></tbody>
+              </table>
+              <div class="row">
+                <div class="input-group mb-3">
+                  <label class="col-form-label me-2">Tambahan Harga Bida</label>
+                  <span class="input-group-text">RM</span>
+                  <input type="text" id="tambahanbida" class="form-control" />
+                </div>
+              </div>
+              <div class="row">
+                <div class="input-group mb-3">
+                  <label class="col-form-label me-2">Jumlah Harga Bida</label>
+                  <span class="input-group-text">RM</span>
+                  <input type="text" class="form-control" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button
+            type="submit"
+            class="btn btn-danger me-2"
+            data-bs-dismiss="modal"
+          >
+            Batal
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- </form> -->
+  </div>
 </template>
 
 <script>
 import Navbar from "./Navbar.vue";
 import Footer from "./Footer.vue";
+import axios from "axios";
 
 export default {
   name: "Cart",
@@ -425,22 +324,38 @@ export default {
     Navbar,
     Footer,
   },
-  // data() {
-  //   return {
-  //     countDown: 10,
-  //   };
-  // },
-  // method: {
-  //   countDownTimer() {
-  //     if (this.countDown > 0) {
-  //       setTimeout(() => {
-  //         this.countDown -= 1;
-  //         this.countDownTimer();
-  //       }, 1000);
-  //     }
-  //   },
-  // },
-  // created: this.countDownTimer(),
+  data() {
+    return {
+      senaraiCarts: [],
+      dataLelongBids: [],
+      lelongBidMarhuns: [],
+    };
+  },
+  mounted: function () {
+    this.listCart();
+  },
+  methods: {
+    listCart() {
+      axios
+        .get("/cart/" + localStorage.getItem("id"))
+        .then((response) => {
+          let ref = this;
+          this.senaraiCarts = response.data;
+
+          this.senaraiCarts.forEach(function (senaraiCarts, index, arr) {
+            ref.dataLelongBids.push(arr[index].datalelongbid);
+          });
+
+          this.dataLelongBids.forEach(function (dataLelongBids, index, arr2) {
+            ref.lelongBidMarhuns.push(arr2[index].lelongbidmarhun);
+          });
+          console.log(this.lelongBidMarhuns);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
 };
 </script>
 
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index cc2ce14..3c0b26c 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -1,45 +1,16 @@
 <template>
-  <link
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-    rel="stylesheet"
-  />
-  <div class="top-0 fixed w-full">
-    <Navbar />
-  </div>
-  <button @click="doLogout" type="submit" class="btn btn-primary">
-    Logout
-  </button>
-  <div class="flex justify-center mt-3 overflow-x-auto">
-    <Card msg="Ar-Rahn Kota Bharu 2" />
-    <Card msg="Ar-Rahn One Stop" />
-    <Card msg="Ar-Rahn Rantau Panjang" />
-  </div>
-  <div class="container">
+  <Navbar />
+  <div class="container-fluid" style="margin-top: 100px">
     <div class="row justify-content-center">
-      <div class="col-6 bg-white text-center">
-        <p>Karat Semasa</p>
-        <table class="table table-bordered table-hover margin-auto">
-          <thead class="thead-dark">
-            <tr>
-              <th>#</th>
-              <th>Karat</th>
-              <th>Keterangan</th>
-            </tr>
-          </thead>
-          <tbody v-for="karats in karat" :key="karats.id">
-            <tr>
-              <td scope="row">{{ karats.id }}</td>
-              <td scope="row">{{ karats.karat }}</td>
-              <td scope="row">{{ karats.keterangan }}</td>
-            </tr>
-          </tbody>
-        </table>
+      <div class="col-5">
+        <Card />
+      </div>
+      <div class="col-5">
+        <Karat />
       </div>
     </div>
   </div>
-  <!-- <Accordion /> -->
-
-  <!-- <Footer /> -->
+  <Footer />
 </template>
 
 <script>
@@ -47,56 +18,16 @@ import Navbar from "./Navbar.vue";
 import Footer from "./Footer.vue";
 import Card from "./dashboard/Card.vue";
 import Accordion from "./dashboard/Accordion.vue";
-import axios from "axios";
-
+import Karat from "./dashboard/Karat.vue";
 export default {
   name: "Dashboard",
+
   components: {
     Navbar,
     Card,
     Footer,
     Accordion,
-  },
-  data() {
-    return {
-      karat: Array,
-    };
-  },
-  created() {
-    this.getKarat();
-  },
-  methods: {
-    doLogout() {
-      axios
-        .post(
-          "/user/logout",
-          {},
-          {
-            headers: {
-              Authorization: "Bearer " + localStorage.getItem("token"),
-            },
-          }
-        )
-        .then((response) => {
-          localStorage.removeItem("token");
-          this.$router.push("/login");
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-
-    async getKarat() {
-      await axios
-        .get("/jeniskarat")
-        .then((response) => {
-          this.karat = response.data.karat;
-          console.log(this.karat);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
+    Karat,
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index aedb442..e1695ac 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,195 +1,56 @@
 <template>
-  <footer class="p-4 bg-white sm:p-6 bg-gray-100 mt-10">
-    <div class="md:flex md:justify-between">
-      <div class="mb-6 md:mb-0">
-        <a href="https://flowbite.com" class="flex items-center">
-          <!-- <img
-            src="/docs/images/logo.svg"
-            class="mr-3 h-8"
-            alt="FlowBite Logo"
-          /> -->
-          <span
-            class="
-              self-center
-              text-2xl
-              font-semibold
-              whitespace-nowrap
-              
-            "
-            >Sistem Lelong</span
-          >
-        </a>
-      </div>
-      <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
-        <div>
-          <h2
-            class="
-              mb-6
-              text-sm
-              font-semibold
-              text-gray-900
-              uppercase
-            "
-          >
-            Resources
-          </h2>
-          <ul class="text-gray-600">
-            <li class="mb-4">
-              <a href="https://flowbite.com" class="hover:underline"
-                >Flowbite</a
-              >
-            </li>
-            <li>
-              <a href="https://tailwindcss.com/" class="hover:underline"
-                >Tailwind CSS</a
-              >
-            </li>
-          </ul>
-        </div>
-        <div>
-          <h2
-            class="
-              mb-6
-              text-sm
-              font-semibold
-              text-gray-900
-              uppercase
-            "
-          >
-            Follow us
-          </h2>
-          <ul class="text-gray-600">
-            <li class="mb-4">
-              <a
-                href="https://github.com/themesberg/flowbite"
-                class="hover:underline"
-                >Github</a
-              >
-            </li>
-            <li>
-              <a href="https://discord.gg/4eeurUVvTy" class="hover:underline"
-                >Discord</a
-              >
-            </li>
-          </ul>
-        </div>
-        <div>
-          <h2
-            class="
-              mb-6
-              text-sm
-              font-semibold
-              text-gray-900
-              uppercase
-            "
-          >
-            Legal
-          </h2>
-          <ul class="text-gray-600">
-            <li class="mb-4">
-              <a href="#" class="hover:underline">Privacy Policy</a>
-            </li>
-            <li>
-              <a href="#" class="hover:underline">Terms &amp; Conditions</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <hr class="my-6 border-gray-200 sm:mx-auto lg:my-8" />
-    <div class="sm:flex sm:items-center sm:justify-between">
-      <span class="text-sm text-gray-500 sm:text-center"
-        >© 2022
-        <a href="https://flowbite.com" class="hover:underline">Flowbite™</a>.
-        All Rights Reserved.
-      </span>
-      <div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
-        <a
-          href="#"
-          class="text-gray-500 hover:text-gray-900"
-        >
-          <svg
-            class="w-5 h-5"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
-              clip-rule="evenodd"
-            ></path>
-          </svg>
-        </a>
-        <a
-          href="#"
-          class="text-gray-500 hover:text-gray-900"
-        >
-          <svg
-            class="w-5 h-5"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
-              clip-rule="evenodd"
-            ></path>
-          </svg>
-        </a>
-        <a
-          href="#"
-          class="text-gray-500 hover:text-gray-900"
-        >
-          <svg
-            class="w-5 h-5"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <path
-              d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
-            ></path>
-          </svg>
-        </a>
-        <a
-          href="#"
-          class="text-gray-500 hover:text-gray-900"
-        >
-          <svg
-            class="w-5 h-5"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-              clip-rule="evenodd"
-            ></path>
-          </svg>
-        </a>
-        <a
-          href="#"
-          class="text-gray-500 hover:text-gray-900"
-        >
-          <svg
-            class="w-5 h-5"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
-              clip-rule="evenodd"
-            ></path>
-          </svg>
-        </a>
-      </div>
-    </div>
-  </footer>
+  <div class="container-fluid" 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">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>
diff --git a/src/components/List.vue b/src/components/List.vue
index 4a34fa0..40438c6 100644
--- a/src/components/List.vue
+++ b/src/components/List.vue
@@ -1,236 +1,53 @@
 <template>
-  <link
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-    rel="stylesheet"
-  />
+  <Navbar />
   <div class="container">
+    <button
+      class="btn btn-secondary float-start"
+      style="margin: 5px"
+      onclick="history.back()"
+    >
+      Go Back <i class="bi bi-backspace-fill"></i>
+    </button>
     <h1>List</h1>
+    <p>Tarikh Lelong: {{ lelong_details.tarikh_lelong }}</p>
+
+    <div class="input-group mb-3">
+      <span class="input-group-text" id="basic-addon3">Pilih Cawangan</span>
+      <select class="form-select">
+        <option selected value="1">Ar-Rahn Kota Bharu 2</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+      <button type="submit" class="btn btn-primary">Cari</button>
+    </div>
     <div class="row">
       <div class="col-9">
-        <link
-          rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"
-        />
         <div class="container">
           <div class="row clearfix">
-            <div class="col-lg-4 col-md-4 col-sm-12" style="margin: 10px 0px">
+            <div
+              v-for="sag in sags"
+              :key="sag.id"
+              class="col-lg-4 col-md-4 col-sm-12"
+              style="margin: 10px 0px"
+            >
               <div class="card product_item" style="padding: 15px">
                 <div class="body">
                   <div class="product_details">
                     <h5>
-                      <a href="#">AN0101220130-0006</a>
+                      <a href="#">{{ sag.norujukan }}</a>
                     </h5>
                     <ul class="product_price list-unstyled">
-                      <li class="old_price">RM2,900.00</li>
-                      <li class="old_price">10.5g</li>
-                      <li class="new_price">Mutu 999, 24K</li>
+                      <li class="old_price">RM{{ sag.hargaasas }}</li>
+                      <li class="old_price">{{ sag.marhun }}</li>
                     </ul>
                     <div class="cp_img">
                       <div class="hover">
                         <a
-                          href="javascript:void(0);"
+                          data-bs-toggle="modal"
+                          data-bs-target="#bidaModal"
+                          @click="clickModal(sag)"
                           class="btn btn-primary btn-sm waves-effect"
-                          >Add to Cart <i class="zmdi zmdi-shopping-cart"></i
-                        ></a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-4 col-md-4 col-sm-12" style="margin: 10px 0px">
-              <div class="card product_item" style="padding: 15px">
-                <div class="body">
-                  <div class="product_details">
-                    <h5>
-                      <a href="#">AN0101220130-0006</a>
-                    </h5>
-                    <ul class="product_price list-unstyled">
-                      <li class="old_price">RM2,900.00</li>
-                      <li class="old_price">10.5g</li>
-                      <li class="new_price">Mutu 999, 24K</li>
-                    </ul>
-                    <div class="cp_img">
-                      <div class="hover">
-                        <a
-                          href="javascript:void(0);"
-                          class="btn btn-primary btn-sm waves-effect"
-                          >Add to Cart <i class="zmdi zmdi-shopping-cart"></i
-                        ></a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-4 col-md-4 col-sm-12" style="margin: 10px 0px">
-              <div class="card product_item" style="padding: 15px">
-                <div class="body">
-                  <div class="product_details">
-                    <h5>
-                      <a href="#">AN0101220130-0006</a>
-                    </h5>
-                    <ul class="product_price list-unstyled">
-                      <li class="old_price">RM2,900.00</li>
-                      <li class="old_price">10.5g</li>
-                      <li class="new_price">Mutu 999, 24K</li>
-                    </ul>
-                    <div class="cp_img">
-                      <div class="hover">
-                        <a
-                          href="javascript:void(0);"
-                          class="btn btn-primary btn-sm waves-effect"
-                          >Add to Cart <i class="zmdi zmdi-shopping-cart"></i
-                        ></a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-4 col-md-4 col-sm-12" style="margin: 10px 0px">
-              <div class="card product_item" style="padding: 15px">
-                <div class="body">
-                  <div class="product_details">
-                    <h5>
-                      <a href="#">AN0101220130-0006</a>
-                    </h5>
-                    <ul class="product_price list-unstyled">
-                      <li class="old_price">RM2,900.00</li>
-                      <li class="old_price">10.5g</li>
-                      <li class="new_price">Mutu 999, 24K</li>
-                    </ul>
-                    <div class="cp_img">
-                      <div class="hover">
-                        <a
-                          href="javascript:void(0);"
-                          class="btn btn-primary btn-sm waves-effect"
-                          >Add to Cart <i class="zmdi zmdi-shopping-cart"></i
-                        ></a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-4 col-md-4 col-sm-12" style="margin: 10px 0px">
-              <div class="card product_item" style="padding: 15px">
-                <div class="body">
-                  <div class="product_details">
-                    <h5>
-                      <a href="#">AN0101220130-0006</a>
-                    </h5>
-                    <ul class="product_price list-unstyled">
-                      <li class="old_price">RM2,900.00</li>
-                      <li class="old_price">10.5g</li>
-                      <li class="new_price">Mutu 999, 24K</li>
-                    </ul>
-                    <div class="cp_img">
-                      <div class="hover">
-                        <a
-                          href="javascript:void(0);"
-                          class="btn btn-primary btn-sm waves-effect"
-                          >Add to Cart <i class="zmdi zmdi-shopping-cart"></i
-                        ></a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-4 col-md-4 col-sm-12" style="margin: 10px 0px">
-              <div class="card product_item" style="padding: 15px">
-                <div class="body">
-                  <div class="product_details">
-                    <h5>
-                      <a href="#">AN0101220130-0006</a>
-                    </h5>
-                    <ul class="product_price list-unstyled">
-                      <li class="old_price">RM2,900.00</li>
-                      <li class="old_price">10.5g</li>
-                      <li class="new_price">Mutu 999, 24K</li>
-                    </ul>
-                    <div class="cp_img">
-                      <div class="hover">
-                        <a
-                          href="javascript:void(0);"
-                          class="btn btn-primary btn-sm waves-effect"
-                          >Add to Cart <i class="zmdi zmdi-shopping-cart"></i
-                        ></a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-4 col-md-4 col-sm-12" style="margin: 10px 0px">
-              <div class="card product_item" style="padding: 15px">
-                <div class="body">
-                  <div class="product_details">
-                    <h5>
-                      <a href="#">AN0101220130-0006</a>
-                    </h5>
-                    <ul class="product_price list-unstyled">
-                      <li class="old_price">RM2,900.00</li>
-                      <li class="old_price">10.5g</li>
-                      <li class="new_price">Mutu 999, 24K</li>
-                    </ul>
-                    <div class="cp_img">
-                      <div class="hover">
-                        <a
-                          href="javascript:void(0);"
-                          class="btn btn-primary btn-sm waves-effect"
-                          >Add to Cart <i class="zmdi zmdi-shopping-cart"></i
-                        ></a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-4 col-md-4 col-sm-12" style="margin: 10px 0px">
-              <div class="card product_item" style="padding: 15px">
-                <div class="body">
-                  <div class="product_details">
-                    <h5>
-                      <a href="#">AN0101220130-0006</a>
-                    </h5>
-                    <ul class="product_price list-unstyled">
-                      <li class="old_price">RM2,900.00</li>
-                      <li class="old_price">10.5g</li>
-                      <li class="new_price">Mutu 999, 24K</li>
-                    </ul>
-                    <div class="cp_img">
-                      <div class="hover">
-                        <a
-                          href="javascript:void(0);"
-                          class="btn btn-primary btn-sm waves-effect"
-                          >Add to Cart <i class="zmdi zmdi-shopping-cart"></i
-                        ></a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-lg-4 col-md-4 col-sm-12" style="margin: 10px 0px">
-              <div class="card product_item" style="padding: 15px">
-                <div class="body">
-                  <div class="product_details">
-                    <h5>
-                      <a href="#">AN0101220130-0006</a>
-                    </h5>
-                    <ul class="product_price list-unstyled">
-                      <li class="old_price">RM2,900.00</li>
-                      <li class="old_price">10.5g</li>
-                      <li class="new_price">Mutu 999, 24K</li>
-                    </ul>
-                    <div class="cp_img">
-                      <div class="hover">
-                        <a
-                          href="javascript:void(0);"
-                          class="btn btn-primary btn-sm waves-effect"
-                          >Add to Cart <i class="zmdi zmdi-shopping-cart"></i
+                          >Enter <i class="zmdi zmdi-shopping-cart"></i
                         ></a>
                       </div>
                     </div>
@@ -244,7 +61,7 @@
       <div class="col-3">
         <div class="ibox" style="border: solid 0.5px">
           <div class="ibox-content">
-            <p class="font-bold">Filter</p>
+            <p class="font-bold">Info</p>
             <hr />
             <div>
               <!-- <a href="#" class="product-name"> Product 1</a> -->
@@ -257,8 +74,15 @@
               <hr />
               <div class="small m-t-xs">
                 <div class="d-flex justify-content-between">
-                  <p class="mb-0">Julat Harga</p>
-                  <p class="mb-0">RM0-RM10000</p>
+                  <p class="mb-0">Masa Mula</p>
+                  <p class="mb-0">{{ lelong_details.masamula_lelong }}</p>
+                </div>
+              </div>
+              <hr />
+              <div class="small m-t-xs">
+                <div class="d-flex justify-content-between">
+                  <p class="mb-0">Masa Tamat</p>
+                  <p class="mb-0">{{ lelong_details.masatamat_lelong }}</p>
                 </div>
               </div>
 
@@ -288,8 +112,173 @@
       </div>
     </div>
   </div>
+
+  <div
+    class="modal fade"
+    id="bidaModal"
+    tabindex="-1"
+    aria-labelledby="bidaModalLabel"
+    aria-hidden="true"
+    data-bs-backdrop="static"
+    data-bs-keyboard="false"
+  >
+    <!-- <form @submit.prevent="submit"> -->
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="bidaModalLabel">
+            {{ norujukan.norujukan }} : {{ norujukan.id }}
+          </h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+
+        <div class="modal-body">
+          <div class="row m-2">
+            <!-- <div class="col-2 border"></div> -->
+            <div class="col">
+              <h5>Harga Asas: RM{{ norujukan.hargaasas }}</h5>
+              <p>Marhun: {{ norujukan.marhun }}</p>
+              <table class="table">
+                <thead>
+                  <tr>
+                    <th scope="col">No</th>
+                    <th scope="col">Jenis Marhun</th>
+                    <th scope="col">Karat</th>
+                    <th scope="col">Berat</th>
+                    <th scope="col">Nota</th>
+                    <th scope="col">Harga Asas</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(marhun, index) in marhuns" :key="marhun.id">
+                    <td>{{ index + 1 }}</td>
+                    <td>{{ marhun.marhun }}</td>
+                    <td>{{ marhun.karat }}</td>
+                    <td>{{ marhun.berat }}g</td>
+                    <td>{{ marhun.nota }}</td>
+                    <td>RM{{ marhun.hargaasas }}</td>
+                  </tr>
+                </tbody>
+              </table>
+              <div class="row">
+                <div class="input-group mb-3">
+                  <label class="col-form-label me-2">Tambahan Harga Bida</label>
+                  <span class="input-group-text">RM</span>
+                  <input type="text" id="tambahanbida" class="form-control" />
+                </div>
+              </div>
+              <div class="row">
+                <div class="input-group mb-3">
+                  <label class="col-form-label me-2">Jumlah Harga Bida</label>
+                  <span class="input-group-text">RM</span>
+                  <input
+                    v-model="form.hargabida"
+                    type="text"
+                    class="form-control"
+                    id="{{marhun.marhuns}}"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button
+            type="submit"
+            class="btn btn-danger me-2"
+            data-bs-dismiss="modal"
+          >
+            Batal
+          </button>
+          <button type="submit" class="btn btn-success" @click="addToCart()">
+            Add to Cart
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- </form> -->
+  </div>
+  <Footer />
 </template>
 
 <script>
-export default {};
+import Navbar from "./Navbar.vue";
+import Footer from "./Footer.vue";
+import axios from "axios";
+
+export default {
+  components: {
+    Navbar,
+    Footer,
+  },
+  data() {
+    return {
+      lelong_details: [],
+      sags: [],
+      norujukan: "",
+      marhuns: [],
+      form: {
+        user_id: localStorage.getItem("id"),
+        lelongbid_id: "",
+        hargabida: "",
+      },
+    };
+  },
+  mounted: function () {
+    this.liveData();
+  },
+  methods: {
+    liveData() {
+      axios
+        .get("/lelongDetails/cawangan", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            caw_id: 3,
+          },
+        })
+        .then((response) => {
+          this.lelong_details = response.data[0];
+          this.response = response.data[0].lelongbid;
+          this.sags = this.response;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    clickModal(norujukan) {
+      this.norujukan = norujukan;
+      this.marhuns = this.norujukan.lelongbidmarhun;
+      this.form.lelongbid_id = this.norujukan.id;
+
+      // this.try = data().form.lelongbid_id
+      // let carName = this.try;
+      // document.getElementById("demo").innerHTML = carName;
+      // console.log(this.form.lelongbid_id);
+      // console.log(this.marhuns);
+    },
+    addToCart() {
+      axios
+        .post("/addToCart", this.form, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          console.log(response);
+          // bidaModal.hide();
+          // call Cart component to refresh
+        })
+        .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 89f59f5..1fc28d6 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,9 +1,5 @@
 <template>
-  <link
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-    rel="stylesheet"
-  />
-  <div class="row justify-content-md-center">
+  <!-- <div class="row justify-content-md-center">
     <h1>Login</h1>
     <div class="col-6" style="border: 1px solid">
       <form @submit.prevent="submit">
@@ -130,6 +126,44 @@
           </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"
+            />
+            <label for="floatingInput">Username</label>
+          </div>
+          <div class="form-floating">
+            <input
+              type="password"
+              class="form-control"
+              v-model="form.password"
+              placeholder="Password"
+            />
+            <label for="floatingPassword">Password</label>
+          </div>
+          <button
+            @click="doLogin"
+            class="w-100 mt-4 mb-5 btn btn-primary"
+            type="submit"
+          >
+            Enter
+          </button>
+        </form>
+        <router-link to="/register">Daftar Akaun</router-link><br />
+      </div>
     </div>
   </div>
 </template>
@@ -178,6 +212,7 @@ export default {
     doLogin() {
       axios.post("/user/login", this.form).then((response) => {
         localStorage.setItem("token", response.data.token);
+        localStorage.setItem("id", response.data.user.id);
         this.$router.push("/");
       });
     },
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 51a0412..5bda23e 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,192 +1,72 @@
 <template>
-  <nav
-    class="
-      bg-gray-100
-      border-gray-200
-      px-2
-      sm:px-4
-      py-2.5
-      rounded
-    "
-  >
-    <div class="container flex flex-wrap justify-between items-center mx-auto">
-      <a href="#" class="flex items-center">
-        <!-- <img
-          src="/docs/images/logo.svg"
-          class="mr-3 h-6 sm:h-9"
-          alt="Flowbite Logo"
-        /> -->
-        <span
-          class="
-            self-center
-            text-xl
-            font-semibold
-            whitespace-nowrap
-            dark:text-dark
-          "
-          >Sistem Lelong</span
-        >
-      </a>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
+    <div class="container-fluid">
+      <a class="navbar-brand text-primary fw-bold" href="#">Sistem Lelong</a>
       <button
-        data-collapse-toggle="mobile-menu"
+        class="navbar-toggler"
         type="button"
-        class="
-          inline-flex
-          items-center
-          p-2
-          ml-3
-          text-sm text-gray-500
-          rounded-lg
-          md:hidden
-          hover:bg-gray-100
-          focus:outline-none focus:ring-2 focus:ring-gray-200
-          dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600
-        "
-        aria-controls="mobile-menu"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
         aria-expanded="false"
+        aria-label="Toggle navigation"
       >
-        <span class="sr-only">Open main menu</span>
-        <svg
-          class="w-6 h-6"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
-        <svg
-          class="hidden w-6 h-6"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
+        <span class="navbar-toggler-icon"></span>
       </button>
-      <div class="hidden w-full md:block md:w-auto" id="mobile-menu">
-        <ul
-          class="
-            flex flex-col
-            mt-4
-            md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium
-          "
-        >
-          <li>
-            <a
-              href="#"
-              class="
-                block
-                py-2
-                pr-4
-                pl-3
-                text-white
-                bg-blue-700
-                rounded
-                md:bg-transparent md:text-blue-700 md:p-0
-                dark:text-white
-              "
-              aria-current="page"
-              >Home</a
-            >
+      <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" to="/">Home</router-link>
           </li>
-          <!-- <li>
-            <a
-              href="#"
-              class="
-                block
-                py-2
-                pr-4
-                pl-3
-                text-gray-700
-                border-b border-gray-100
-                hover:bg-gray-50
-                md:hover:bg-transparent
-                md:border-0
-                md:hover:text-gray-900
-                md:p-0
-                dark:text-gray-400
-                dark:border-gray-700
-              "
-              >About</a
-            >
+          <li class="nav-item">
+            <router-link class="nav-link" to="/list">List</router-link>
           </li>
-          <li>
-            <a
-              href="#"
-              class="
-                block
-                py-2
-                pr-4
-                pl-3
-                text-gray-700
-                border-b border-gray-100
-                hover:bg-gray-50
-                md:hover:bg-transparent
-                md:border-0
-                md:hover:text-gray-900
-                md:p-0
-                dark:text-gray-400
-                dark:border-gray-700
-              "
-              >Services</a
-            >
-          </li> -->
-          <li>
-            <a
-              href="#"
-              class="
-                block
-                py-2
-                pr-4
-                pl-3
-                text-gray-700
-                border-b border-gray-100
-                hover:bg-gray-50
-                md:hover:bg-transparent
-                md:border-0
-                md:hover:text-gray-900
-                md:p-0
-                dark:text-gray-400
-                dark:border-gray-700
-              "
-              >Cart</a
-            >
+          <li class="nav-item">
+            <router-link class="nav-link" to="/cart">Cart</router-link>
           </li>
-          <li>
-            <a
-              href="#"
-              class="
-                block
-                py-2
-                pr-4
-                pl-3
-                text-gray-700
-                hover:bg-gray-50
-                md:hover:bg-transparent
-                md:border-0
-                md:hover:text-gray-900
-                md:p-0
-                dark:text-gray-400
-              "
-              >Profil</a
-            >
+          <li class="nav-item">
+            <router-link class="nav-link" to="/pay">Pay</router-link>
           </li>
+          <router-view />
         </ul>
+
+        <button class="btn btn-outline-secondary me-2" type="submit">
+          Profil
+        </button>
+        <button class="btn btn-primary" type="submit" @click="doLogout">
+          Logout
+        </button>
       </div>
     </div>
   </nav>
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   name: "Navbar",
+  methods: {
+    doLogout() {
+      axios
+        .post(
+          "/user/logout",
+          {},
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          }
+        )
+        .then((response) => {
+          localStorage.removeItem("token");
+          localStorage.removeItem("id");
+          this.$router.push("/login");
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
 };
 </script>
diff --git a/src/components/Register.vue b/src/components/Register.vue
index ece5dfe..660cc1d 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -1,16 +1,12 @@
 <template>
-  <link
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-    rel="stylesheet"
-  />
-  <div class="row justify-content-md-center">
+  <!-- <div class="row justify-content-md-center">
     <h1>Register</h1>
     <div class="col-6" style="border: 1px solid">
-      <form>
+      <form @submit.prevent="submit">
         <div class="p-20">
           <div class="mb-6">
             <label
-              for="email"
+              for="name"
               class="
                 block
                 mb-2
@@ -19,11 +15,82 @@
                 text-gray-900
                 dark:text-gray-300
               "
-              >Username</label
+              >Name</label
             >
             <input
-              type="email"
-              id="email"
+              type="text"
+              v-model="form.name"
+              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="Mustaqim Mustafar"
+              required=""
+            />
+          </div>
+          <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="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
+              "
+              required=""
+            />
+          </div>
+          <div class="mb-6">
+            <label
+              for="nokp"
+              class="
+                block
+                mb-2
+                text-sm
+                font-medium
+                text-gray-900
+                dark:text-gray-300
+              "
+              >No KP</label
+            >
+            <input
+              type="text"
+              v-model="form.nokp"
               class="
                 bg-gray-50
                 border border-gray-300
@@ -40,7 +107,6 @@
                 dark:focus:ring-blue-500
                 dark:focus:border-blue-500
               "
-              placeholder="name@flowbite.com"
               required=""
             />
           </div>
@@ -58,8 +124,8 @@
               >Password</label
             >
             <input
-              type="password"
-              id="password"
+              type="text"
+              v-model="form.password"
               class="
                 bg-gray-50
                 border border-gray-300
@@ -81,7 +147,7 @@
           </div>
           <div class="mb-6">
             <label
-              for="password"
+              for="email"
               class="
                 block
                 mb-2
@@ -90,11 +156,11 @@
                 text-gray-900
                 dark:text-gray-300
               "
-              >Name</label
+              >Email</label
             >
             <input
-              type="password"
-              id="password"
+              type="text"
+              v-model="form.email"
               class="
                 bg-gray-50
                 border border-gray-300
@@ -116,7 +182,7 @@
           </div>
           <div class="mb-6">
             <label
-              for="password"
+              for="notelbimbit"
               class="
                 block
                 mb-2
@@ -125,11 +191,11 @@
                 text-gray-900
                 dark:text-gray-300
               "
-              >IC No.</label
+              >Nombor Telefon</label
             >
             <input
-              type="password"
-              id="password"
+              type="text"
+              v-model="form.notelbimbit"
               class="
                 bg-gray-50
                 border border-gray-300
@@ -149,12 +215,15 @@
               required=""
             />
           </div>
+
           <div class="flex items-start mb-6">
             <div class="flex items-center h-5">
               <input
-                id="remember"
-                aria-describedby="remember"
+                id="register_agree"
+                aria-describedby="register_agree"
                 type="checkbox"
+                value="1"
+                v-model="form.register_agree"
                 class="
                   w-4
                   h-4
@@ -172,14 +241,16 @@
             </div>
             <div class="ml-3 text-sm">
               <label
-                for="remember"
+                for="register_agree"
+                required=""
                 class="font-medium text-gray-900 dark:text-gray-300"
-                >Remember me</label
+                >Setuju dgn terma & syarat</label
               >
             </div>
           </div>
           <button
-            type="button"
+            @click="doRegister"
+            type="submit"
             class="
               text-white
               bg-blue-700
@@ -200,10 +271,98 @@
           </button>
         </div>
       </form>
+      <router-link to="/login">Login</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>Daftar Akaun</h4>
+
+          <div class="form-floating">
+            <input type="text" class="form-control" v-model="form.name" />
+            <label>Nama</label>
+          </div>
+          <div class="form-floating">
+            <input type="text" class="form-control" v-model="form.username" />
+            <label>Username</label>
+          </div>
+          <div class="form-floating">
+            <input type="text" class="form-control" v-model="form.nokp" />
+            <label>No KP</label>
+          </div>
+          <div class="form-floating">
+            <input
+              type="password"
+              class="form-control"
+              v-model="form.password"
+            />
+            <label>Password</label>
+          </div>
+          <div class="form-floating">
+            <input type="email" class="form-control" v-model="form.email" />
+            <label>E-mel</label>
+          </div>
+          <div class="form-floating">
+            <input
+              type="text"
+              class="form-control"
+              v-model="form.notelbimbit"
+            />
+            <label>No. Telefon</label>
+          </div>
+          <div class="checkbox mb-3">
+            <label>
+              <input type="checkbox" value="1" id="register_agree" /> Setuju
+              dengan terma & syarat
+            </label>
+          </div>
+          <button
+            @click="doRegister"
+            class="w-100 mt-4 mb-5 btn btn-primary"
+            type="submit"
+          >
+            Enter
+          </button>
+        </form>
+        <router-link to="/login">Log Masuk</router-link>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-export default {};
+import axios from "axios";
+export default {
+  name: "Register",
+  data() {
+    return {
+      form: {
+        name: "",
+        username: "",
+        nokp: "",
+        password: "",
+        email: "",
+        notelbimbit: "",
+        register_agree: "",
+      },
+    };
+  },
+  methods: {
+    doRegister() {
+      axios
+        .post("/register", this.form)
+        .then((response) => {
+          localStorage.setItem("token", response.data.token);
+          this.$router.push("/login");
+          console.log(response);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
 </script>
\ No newline at end of file
diff --git a/src/components/dashboard/Card.vue b/src/components/dashboard/Card.vue
index 5978da8..f47f544 100644
--- a/src/components/dashboard/Card.vue
+++ b/src/components/dashboard/Card.vue
@@ -1,63 +1,70 @@
 <template>
-  <a
-    href="#"
-    class="
-      block
-      p-6
-      m-6
-      max-w-sm
-      bg-white
-      rounded-lg
-      border border-gray-200
-      shadow-md
-      hover:bg-gray-100
-      dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700
-    "
-  >
-    <h5
-      class="
-        mb-2
-        text-2xl
-        font-bold
-        tracking-tight
-        text-gray-900
-        dark:text-white
-      "
-    >
-      {{ msg }}
-    </h5>
-    <p class="font-normal text-gray-700 dark:text-gray-400">
-      Tarikh: 12 APRIL 2022, 11AM
-    </p>
-    <button
-      type="button"
-      class="
-        text-white
-        bg-blue-700
-        hover:bg-blue-800
-        focus:ring-4 focus:ring-blue-300
-        font-medium
-        rounded-lg
-        text-sm
-        px-5
-        py-2.5
-        mr-2
-        mb-2
-        dark:bg-blue-600 dark:hover:bg-blue-700
-        focus:outline-none
-        dark:focus:ring-blue-800
-      "
-    >
-      Mula Bida
-    </button>
-  </a>
+  <div class="card text-center">
+    <div class="card-header fw-bold text-uppercase">Lelongan Tersedia</div>
+    <div class="card-body">
+      <!-- <p>{{ msg }}</p>
+        <p>{{ masa }}</p> -->
+      <p id="demo"></p>
+      <!-- <a href="#" class="btn btn-primary">Lihat Marhun</a> -->
+      <router-link class="btn btn-primary" to="/list">Lihat Item</router-link>
+    </div>
+    <div class="card-footer text-muted">Kemaskini 2 hari lepas.</div>
+  </div>
+  <!-- {{ response }} -->
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   name: "Card",
   props: {
     msg: String,
+    masa: String,
+  },
+  data() {
+    return {
+      response: Array,
+      cawangan: String,
+    };
+  },
+  mounted: function () {
+    this.liveData();
+  },
+  methods: {
+    liveData() {
+      axios
+        .get("/lelongDetails/today", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          this.response = response.data;
+          // console.log(response.data);
+          // this.cawangan = response.data[0].lelongbid[0].cawangan.caw_dbname;
+          // console.log(this.cawangan);
+
+          let text = "";
+          const data = this.response;
+          data.forEach(myFunction);
+
+          function myFunction(item) {
+            text +=
+              "Tarikh: " +
+              item.tarikh_lelong +
+              ", " +
+              item.lelongbid[0].cawangan.caw_dbname +
+              ", JBG: " +
+              item.jbg +
+              "<br>";
+          }
+          document.getElementById("demo").innerHTML = text;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/dashboard/Karat.vue b/src/components/dashboard/Karat.vue
new file mode 100644
index 0000000..58c9234
--- /dev/null
+++ b/src/components/dashboard/Karat.vue
@@ -0,0 +1,53 @@
+<template>
+  <div 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">
+          <tr>
+            <th>No.</th>
+            <th>Karat</th>
+            <th>Keterangan</th>
+            <th>dariharga916</th>
+          </tr>
+        </thead>
+        <tbody v-for="karats in karat" :key="karats.id">
+          <tr>
+            <td scope="row">{{ karats.id }}</td>
+            <td scope="row">{{ karats.karat }}</td>
+            <td scope="row">{{ karats.keterangan }}</td>
+            <td scope="row">{{ karats.dariharga916 }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "Karat",
+  data() {
+    return {
+      karat: Array,
+    };
+  },
+  created() {
+    this.getKarat();
+  },
+  methods: {
+    async getKarat() {
+      await axios
+        .get("/jeniskarat")
+        .then((response) => {
+          this.karat = response.data.karat;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index f028521..c2d2aa2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,9 +1,6 @@
 import { createWebHistory, createRouter } from "vue-router";
-// import Login from '../components/Login2.vue';
 import Login from '../components/Login.vue';
-// import Register from '../components/Register2.vue';
 import Register from '../components/Register.vue';
-import HelloWorld from './../components/HelloWorld.vue';
 import Dashboard from './../components/Dashboard.vue';
 import Cart from './../components/Cart.vue';
 import List from './../components/List.vue'