From 2e58d25dd83f9b5491188394d0a7f0ebbacf3feb Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Tue, 31 May 2022 14:08:18 +0800
Subject: [PATCH] rekod bidaan ui, bayar ui, payment gateway,

---
 src/components/BidHistory.vue            |  48 +++
 src/components/Cart.vue                  |  68 +++--
 src/components/History.vue               |  59 ----
 src/components/Navbar.vue                |   4 +-
 src/components/Pay.vue                   | 357 ++---------------------
 src/components/bidhistory/ListBid.vue    |  63 ++++
 src/components/list/Senarai.vue          |  38 +--
 src/components/result/PaymentHistory.vue |  74 +++++
 src/components/result/ToPay.vue          | 354 ++++++++++++++++++++++
 src/router/index.js                      |  12 +-
 10 files changed, 648 insertions(+), 429 deletions(-)
 create mode 100644 src/components/BidHistory.vue
 delete mode 100644 src/components/History.vue
 create mode 100644 src/components/bidhistory/ListBid.vue
 create mode 100644 src/components/result/PaymentHistory.vue
 create mode 100644 src/components/result/ToPay.vue

diff --git a/src/components/BidHistory.vue b/src/components/BidHistory.vue
new file mode 100644
index 0000000..c66fee8
--- /dev/null
+++ b/src/components/BidHistory.vue
@@ -0,0 +1,48 @@
+<template>
+  <Navbar />
+  <div class="container" style="height: 70vh">
+    <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">
+          Reload <i class="bi bi-arrow-clockwise"></i>
+        </button>
+        <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
index bcfd6cd..943ed4d 100644
--- a/src/components/Cart.vue
+++ b/src/components/Cart.vue
@@ -18,7 +18,7 @@
         Kembali <i class="bi bi-backspace-fill"></i>
       </button>
       <div class="wrapper wrapper-content animated fadeInRight">
-        <h1>Cart <i class="bi bi-cart3"></i></h1>
+        <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">
@@ -64,7 +64,7 @@
                             <h3 class="text-primary">
                               {{ senaraiCart.datalelongbid.norujukan }}
                             </h3>
-                           
+
                             <dl class="small m-b-none">
                               <p>
                                 Marhun:
@@ -131,7 +131,7 @@
           <div class="col-3">
             <div class="ibox" style="border: #e7eaec solid 1px">
               <div class="ibox-title" style="padding: 20px">
-                <h5>Ringkasan Cart</h5>
+                <h5>Ringkasan Troli</h5>
               </div>
               <div class="ibox-content">
                 <div class="small m-t-xs">
@@ -167,6 +167,11 @@
                       Teruskan <i class="fa fa-shopping-cart"></i>
                     </button>
                   </div>
+                  <div class="btn-group">
+                    <button @click="feePayment()" class="btn btn-primary">
+                      try bavayar
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -202,7 +207,7 @@
           <div class="modal-body">
             <div class="row m-2">
               <div class="col">
-                <p>Marhun: {{ test.marhun }}</p>
+                <!-- <p>Marhun: {{ test.marhun }}</p> -->
                 <p>Jumlah Berat: {{ test.berat }}g</p>
                 <table class="table table-bordered">
                   <tbody>
@@ -234,7 +239,7 @@
                     <div class="input-group mb-3">
                       <span class="input-group-text">RM</span>
                       <div
-                        style="background-color: #e9ecef"
+                        style="background-color: #e9ecef; padding-bottom: 0px"
                         class="form-control text-start justify-content-start"
                         disabled
                       >
@@ -243,12 +248,12 @@
                     </div>
                   </div>
                 </div>
-                <div class="row justify-content-center">
+                <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 mb-3">
+                    <div class="input-group">
                       <span class="input-group-text">RM</span>
                       <input
                         v-model="tambahan"
@@ -257,17 +262,19 @@
                         class="form-control"
                         @change="calcTotal()"
                       />
-                      <div
-                        style="font-size: 13px"
-                        class="fst-italic text-danger"
-                        v-if="v$.tambahan.$error"
-                      >
-                        <div class="text-start">
-                          *Minimum tambahan harga bida adalah RM1.
-                        </div>
-                        <div class="text-start">
-                          *Gandaan ringgit sahaja dibenarkan.
-                        </div>
+                    </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>
@@ -473,10 +480,10 @@ export default {
       },
       formPayment: {
         email: "amirhamzan30@gmail.com",
-        notel: "01920192",
+        notel: "0198900990",
         name: "amir",
         user_id: "8",
-        lelong_id: "20",
+        lelong_id: "3",
       },
     };
   },
@@ -501,6 +508,16 @@ export default {
     this.listCart();
   },
   methods: {
+    trybayar() {
+      axios
+        .post("/feepayment", this.formPayment)
+        .then((response) => {
+          console.log(response);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
     listCart() {
       this.loading = true;
       axios
@@ -569,13 +586,18 @@ export default {
     },
     feePayment() {
       axios
-        .post("/feepayment", this.formPayment, {})
+        .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';
         })
         .catch((error) => {
+          // console.log("test");
           console.log(error);
-          console.log(this.formPayment);
+          // console.log(this.formPayment);
         });
     },
   },
diff --git a/src/components/History.vue b/src/components/History.vue
deleted file mode 100644
index f1f89d6..0000000
--- a/src/components/History.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <Navbar />
-  <div class="container" style="height: 70vh">
-    <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">
-        <table class="table">
-          <thead>
-            <tr>
-              <th scope="col">#</th>
-              <th scope="col">First</th>
-              <th scope="col">Last</th>
-              <th scope="col">Handle</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>
-          </tbody>
-        </table>
-      </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/Navbar.vue b/src/components/Navbar.vue
index d80c01e..3d65e03 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -25,7 +25,7 @@
             <router-link class="nav-link" to="/cart">Cart</router-link>
           </li> -->
           <li class="nav-item">
-            <router-link class="nav-link" to="/history">Rekod Bidaan</router-link>
+            <router-link class="nav-link" to="/bidhistory">Rekod Bidaan</router-link>
           </li>
           <li class="nav-item">
             <router-link class="nav-link" to="/pay">Bayar</router-link>
@@ -37,7 +37,7 @@
         </ul>
 
         <router-link class="btn btn-primary me-5" to="/cart"
-          >Cart <i class="bi bi-cart3"></i
+          >Troli <i class="bi bi-cart3"></i
           ><span class="span_cart">{{
             this.allCarts.length
           }}</span></router-link
diff --git a/src/components/Pay.vue b/src/components/Pay.vue
index 837f47d..e5aec5d 100644
--- a/src/components/Pay.vue
+++ b/src/components/Pay.vue
@@ -1,20 +1,6 @@
 <template>
-  <!-- <div class="top-0 fixed w-full">
-  </div> -->
-
   <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 class="container">
     <button
       class="btn btn-secondary float-start"
       style="margin: 5px"
@@ -25,335 +11,56 @@
     <div class="wrapper wrapper-content animated fadeInRight">
       <h1>Bayar <i class="bi bi-credit-card-2-front"></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">
-                <table class="table shoping-cart-table">
-                  <thead>
-                    <tr>
-                      <td>Maklumat Marhun</td>
-
-                      <td
-                        width="80"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        Harga Bida
-                      </td>
-                    </tr>
-                  </thead>
-                </table>
-              </div>
-            </div>
-            <div class="ibox-content" v-for="sag in sags" :key="sag.id">
-              <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 class="text-primary">
-                          {{ sag.norujukan }}
-                        </h3>
-                      </td>
-
-                      <td
-                        width="30"
-                        style="width: 145.82px; text-align: center"
-                      >
-                        <h4>RM{{ sag.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="#"> 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 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>
-        <div class="col-3">
-          <div class="ibox" style="border: solid 0.5px">
-            <div class="ibox-title" style="padding: 20px">
-              <h5>Jumlah</h5>
-            </div>
 
-            <div class="ibox-content">
-              <!-- <span> Jumlah Bidaan </span> -->
-              <h2 class="font-bold">RM{{ total_hargabida }}</h2>
-
-              <!-- <span class="text-muted small">
-                <i
-                  >*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
-                  yang dimenanangi pembida.</i
-                >
-              </span> -->
-              <!-- <hr />
-              <span class="text-muted small">
-                <i>*Caj RM10.00 akan dikenakan untuk membuat pendaftaran bidaan.
-                Sila klik butang dibawah untuk meneruskan.</i>
-              </span> -->
-              <div class="m-t-sm">
-                <div class="btn-group">
-                  <!-- <a href="#" class="btn btn-white btn-sm"> Batal</a> -->
-                  <a href="#" class="btn btn-primary">Bayar </a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- <div class="ibox" style="border: solid 0.5px">
-            <div class="ibox-title">
-              <h5>Bayaran Pendaftaran</h5>
-            </div>
-            <div class="ibox-content">
-              <span> Jumlah Bidaan </span>
-              <h2 class="font-bold">RM10.00</h2>
-
-              <hr />
-              <span class="text-muted small">
-                <i
-                  >*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
-                  yang dimenanangi pembida.</i
-                >
-              </span>
-            </div>
-          </div> -->
-
-          <!-- <div class="ibox" style="border: solid 0.5px">
-            <div class="ibox-title">
-              <h5>Support</h5>
-            </div>
-            <div class="ibox-content text-center">
-              <h3><i class="fa fa-phone"></i> +43 100 783 001</h3>
-              <span class="small">
-                Please contact with us if you have any questions. We are
-                avalible 24h.
-              </span>
-            </div>
-          </div> -->
+        <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 axios from "axios";
+import ToPay from "./result/ToPay.vue";
+import PaymentHistory from "./result/PaymentHistory.vue";
 
 export default {
-  name: "Cart",
-  components: {
-    Navbar,
-    Footer,
-  },
+  name: "Pay",
+  components: { Navbar, Footer, ToPay, PaymentHistory },
   data() {
     return {
-      sags: Array,
-      total_hargabida: "",
-      loading: false,
+      toPayComponent: 0,
+      paymentHistoryComponent: 0,
     };
   },
-  mounted: function () {
-    this.resultBid();
-  },
   methods: {
-    resultBid() {
-      this.loading = true;
-      axios
-        .get("/result/" + localStorage.getItem("id"), {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          this.sags = response.data[0].sag;
-          this.total_hargabida = response.data[0].total_hargabida;
-          console.log(response);
-          this.loading = false;
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+    renderToPay() {
+      this.toPayComponent += 1;
+    },
+    renderPaymentHistory() {
+      this.paymentHistoryComponent += 1;
     },
   },
-  // data() {
-  //   return {
-  //     countDown: 10,
-  //   };
-  // },
-  // method: {
-  //   countDownTimer() {
-  //     if (this.countDown > 0) {
-  //       setTimeout(() => {
-  //         this.countDown -= 1;
-  //         this.countDownTimer();
-  //       }, 1000);
-  //     }
-  //   },
-  // },
-  // created: this.countDownTimer(),
 };
-</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
+</script>
\ No newline at end of file
diff --git a/src/components/bidhistory/ListBid.vue b/src/components/bidhistory/ListBid.vue
new file mode 100644
index 0000000..728d2d3
--- /dev/null
+++ b/src/components/bidhistory/ListBid.vue
@@ -0,0 +1,63 @@
+<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">
+      <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>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "BidDetail",
+  data() {
+    return {
+      listBid: [],
+      loading : false
+    };
+  },
+  mounted: function () {
+    this.liveData();
+  },
+  methods: {
+    liveData() {
+      this.loading = true;
+      axios
+        .get("/bidder/listBidItembWeb/" + localStorage.getItem("id"), {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          this.listBid = response.data;
+          console.log(response);
+          this.loading = false;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/list/Senarai.vue b/src/components/list/Senarai.vue
index 96d95bb..0dc9c03 100644
--- a/src/components/list/Senarai.vue
+++ b/src/components/list/Senarai.vue
@@ -149,7 +149,7 @@
           <div class="modal-body">
             <div class="row m-2">
               <div class="col">
-                <p>Marhun: {{ norujukan.marhun }}</p>
+                <!-- <p>Marhun: {{ norujukan.marhun }}</p> -->
                 <p>Jumlah Berat: {{ norujukan.berat }}g</p>
                 <table class="table table-bordered">
                   <tbody>
@@ -172,7 +172,7 @@
                   </tbody>
                 </table>
                 <div class="row justify-content-center">
-                  <div class="col-5">
+                  <div class="col-3">
                     <label class="col-form-label text-end"
                       >Jumlah Harga Asas</label
                     >
@@ -190,12 +190,12 @@
                     </div>
                   </div>
                 </div>
-                <div class="row justify-content-center">
-                  <div class="col-5">
+                <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 mb-3">
+                    <div class="input-group">
                       <span class="input-group-text">RM</span>
                       <input
                         v-model="tambahan"
@@ -204,23 +204,25 @@
                         class="form-control"
                         @change="calcTotal()"
                       />
-                      <div
-                        style="font-size: 13px"
-                        class="fst-italic text-danger"
-                        v-if="v$.tambahan.$error"
-                      >
-                        <div class="text-start">
-                          *Minimum tambahan harga bida adalah RM1.
-                        </div>
-                        <div class="text-start">
-                          *Gandaan ringgit sahaja dibenarkan.
-                        </div>
+                    </div>
+                  </div>
+                  <div class="col-7">
+                    <div
+                      style="font-size: 13px"
+                      class="fst-italic text-danger"
+                      v-if="v$.tambahan.$error"
+                    >
+                      <div class="text-end">
+                        *Minimum tambahan harga bida adalah RM1.
+                      </div>
+                      <div class="text-end">
+                        *Gandaan ringgit sahaja dibenarkan.
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row justify-content-center">
-                  <div class="col-5">
+                  <div class="col-3">
                     <label class="col-form-label">Jumlah Harga Bida</label>
                   </div>
                   <div class="col-4">
@@ -311,7 +313,7 @@ export default {
             Authorization: "Bearer " + localStorage.getItem("token"),
           },
           params: {
-            caw_id: "3",
+            caw_id: "4",
           },
         })
         .then((response) => {
diff --git a/src/components/result/PaymentHistory.vue b/src/components/result/PaymentHistory.vue
new file mode 100644
index 0000000..f7ba98f
--- /dev/null
+++ b/src/components/result/PaymentHistory.vue
@@ -0,0 +1,74 @@
+<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>
+    <!-- <div class="card"> -->
+      <!-- <div class="card-header">
+        <table class="table"></table>
+      </div> -->
+      <div class="card-body mb-5">
+        <table class="table table-bordered">
+          <thead class="table-dark">
+            <tr>
+              <th scope="col">#</th>
+              <th scope="col">Tarikh Lelong</th>
+              <th scope="col">Jumlah</th>
+              <th scope="col">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(data, index) in paymentHistory" :key="data.id">
+              <th scope="row">{{ index + 1 }}</th>
+              <td>{{data.tarikh_lelong}}</td>
+              <td>RM{{data.total}}</td>
+              <td>{{data.status}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    <!-- </div> -->
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "HistoryResult",
+  data() {
+    return {
+      loading: false,
+      paymentHistory: [],
+    };
+  },
+  mounted: function () {
+    this.liveData();
+  },
+  methods: {
+    liveData() {
+      this.loading = true;
+      axios
+        .get("/history/" + localStorage.getItem("id"), {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          this.paymentHistory = response.data;
+          console.log(this.paymentHistory);
+          this.loading = false;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/result/ToPay.vue b/src/components/result/ToPay.vue
new file mode 100644
index 0000000..f85bd99
--- /dev/null
+++ b/src/components/result/ToPay.vue
@@ -0,0 +1,354 @@
+<template>
+  <!-- <div class="top-0 fixed w-full">
+  </div> -->
+
+  <!-- <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 class="wrapper wrapper-content animated fadeInRight">
+      <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">
+                <table class="table shoping-cart-table">
+                  <thead>
+                    <tr>
+                      <td>Maklumat Marhun</td>
+
+                      <td
+                        width="80"
+                        style="width: 145.82px; text-align: center"
+                      >
+                        Harga Bida
+                      </td>
+                    </tr>
+                  </thead>
+                </table>
+              </div>
+            </div>
+            <div class="ibox-content" v-for="sag in sags" :key="sag.id">
+              <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 class="text-primary">
+                          {{ sag.norujukan }}
+                        </h3>
+                      </td>
+
+                      <td
+                        width="30"
+                        style="width: 145.82px; text-align: center"
+                      >
+                        <h4>RM{{ sag.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="#"> 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">
+              <h5>Jumlah</h5>
+            </div>
+
+            <div class="ibox-content">
+              <!-- <span> Jumlah Bidaan </span> -->
+              <h2 class="font-bold">RM{{ total_hargabida }}</h2>
+
+              <!-- <span class="text-muted small">
+                <i
+                  >*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
+                  yang dimenanangi pembida.</i
+                >
+              </span> -->
+              <!-- <hr />
+              <span class="text-muted small">
+                <i>*Caj RM10.00 akan dikenakan untuk membuat pendaftaran bidaan.
+                Sila klik butang dibawah untuk meneruskan.</i>
+              </span> -->
+              <div class="m-t-sm">
+                <div class="btn-group">
+                  <!-- <a href="#" class="btn btn-white btn-sm"> Batal</a> -->
+                  <a href="#" class="btn btn-primary">Bayar </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- <div class="ibox" style="border: solid 0.5px">
+            <div class="ibox-title">
+              <h5>Bayaran Pendaftaran</h5>
+            </div>
+            <div class="ibox-content">
+              <span> Jumlah Bidaan </span>
+              <h2 class="font-bold">RM10.00</h2>
+
+              <hr />
+              <span class="text-muted small">
+                <i
+                  >*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
+                  yang dimenanangi pembida.</i
+                >
+              </span>
+            </div>
+          </div> -->
+
+          <!-- <div class="ibox" style="border: solid 0.5px">
+            <div class="ibox-title">
+              <h5>Support</h5>
+            </div>
+            <div class="ibox-content text-center">
+              <h3><i class="fa fa-phone"></i> +43 100 783 001</h3>
+              <span class="small">
+                Please contact with us if you have any questions. We are
+                avalible 24h.
+              </span>
+            </div>
+          </div> -->
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- <HistoryResult /> -->
+  <!-- <Footer /> -->
+</template>
+
+<script>
+import Navbar from "../Navbar.vue";
+import Footer from "../Footer.vue";
+// import HistoryResult from "./HistoryResult.vue"
+import axios from "axios";
+
+export default {
+  name: "Cart",
+  components: {
+    Navbar,
+    Footer,
+    // HistoryResult,
+  },
+  data() {
+    return {
+      sags: Array,
+      total_hargabida: "",
+      loading: false,
+    };
+  },
+  mounted: function () {
+    this.resultBid();
+  },
+  methods: {
+    resultBid() {
+      this.loading = true;
+      axios
+        .get("/result/" + localStorage.getItem("id"), {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          this.sags = response.data[0].sag;
+          this.total_hargabida = response.data[0].total_hargabida;
+          console.log(response);
+          this.loading = false;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+  // data() {
+  //   return {
+  //     countDown: 10,
+  //   };
+  // },
+  // method: {
+  //   countDownTimer() {
+  //     if (this.countDown > 0) {
+  //       setTimeout(() => {
+  //         this.countDown -= 1;
+  //         this.countDownTimer();
+  //       }, 1000);
+  //     }
+  //   },
+  // },
+  // created: this.countDownTimer(),
+};
+</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/router/index.js b/src/router/index.js
index 5de1b0f..bbda90b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,10 +4,11 @@ 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 Pay from '../components/Pay.vue'
 import Profile from './../components/Profile.vue'
+import BidHistory from '../components/BidHistory.vue'
 // import Modals from './../components/Modal.vue'
-import { Modal } from "bootstrap";
+// import { Modal } from "bootstrap";
 
 const routes = [
     {
@@ -57,6 +58,13 @@ const routes = [
         component: Profile,
         // meta: { requiresAuth: true }
 
+    }, 
+    {
+        path: '/bidhistory',
+        name: 'BidHistory',
+        component: BidHistory,
+        // meta: { requiresAuth: true }
+
     }, 
     // {
     //     name: 'Modal',