diff --git a/src/components/Cart.vue b/src/components/Cart.vue
index 943ed4d..2912d50 100644
--- a/src/components/Cart.vue
+++ b/src/components/Cart.vue
@@ -129,6 +129,103 @@
           </div>
 
           <div class="col-3">
+            <div
+              class="ibox"
+              v-if="feeStatus == 2"
+              style="border: #e7eaec solid 1px"
+            >
+              <div class="ibox-title" style="padding: 20px">
+                <h5>Yuran</h5>
+              </div>
+              <div class="ibox-content">
+                <!-- <div class="small m-t-xs">
+                  <div class="d-flex justify-content-between">
+                    <p class="mb-0">Jumlah Bilangan Surat</p>
+                    <p class="mb-0">{{ total_sag }}</p>
+                  </div>
+                </div>
+                <hr />
+                <div class="small m-t-xs">
+                  <div class="d-flex justify-content-between">
+                    <p class="mb-0">Jumlah Bidaan</p>
+                    <p class="mb-0">RM{{ total_bidaan }}</p>
+                  </div>
+                </div>
+                <hr />
+                <span> Yuran </span> -->
+                <h2 class="font-bold">RM10.00</h2>
+                <hr />
+                <span class="text-muted small">
+                  <i>*Anda perlu membayar yuran sebelum membuat bidaan.</i>
+                </span>
+                <div class="m-t-sm">
+                  <!-- <div class="btn-group">
+                    <button
+                      data-bs-toggle="modal"
+                      data-bs-target="#payModal"
+                      class="btn btn-primary"
+                    >
+                      Teruskan <i class="fa fa-shopping-cart"></i>
+                    </button>
+                  </div> -->
+                  <div class="btn-group">
+                    <button
+                      data-bs-toggle="modal"
+                      data-bs-target="#payModal"
+                      class="btn btn-primary"
+                    >
+                      Bayar Yuran
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ibox"
+              v-if="feeStatus == 1"
+              style="border: #e7eaec solid 1px"
+            >
+              <!-- <div class="ibox-title" style="padding: 20px">
+                <h5>Yuran</h5>
+              </div> -->
+              <div class="ibox-content">
+                <!-- <div class="small m-t-xs">
+                  <div class="d-flex justify-content-between">
+                    <p class="mb-0">Jumlah Bilangan Surat</p>
+                    <p class="mb-0">{{ total_sag }}</p>
+                  </div>
+                </div>
+                <hr />
+                <div class="small m-t-xs">
+                  <div class="d-flex justify-content-between">
+                    <p class="mb-0">Jumlah Bidaan</p>
+                    <p class="mb-0">RM{{ total_bidaan }}</p>
+                  </div>
+                </div>
+                <hr />
+                <span> Yuran </span> -->
+                <h4 class="text-success">
+                  Yuran Telah Berjaya Dibayar
+                  <i class="bi bi-check2-circle"></i>
+                </h4>
+                <hr />
+                <span class="text-muted small">
+                  <i>*Anda boleh membuat bidaan.</i>
+                </span>
+                <!-- <div class="m-t-sm">
+                  
+                  <div class="btn-group">
+                    <button
+                      data-bs-toggle="modal"
+                      data-bs-target="#payModal"
+                      class="btn btn-primary"
+                    >
+                      Bayar Yuran
+                    </button>
+                  </div>
+                </div> -->
+              </div>
+            </div>
             <div class="ibox" style="border: #e7eaec solid 1px">
               <div class="ibox-title" style="padding: 20px">
                 <h5>Ringkasan Troli</h5>
@@ -147,7 +244,7 @@
                     <p class="mb-0">RM{{ total_bidaan }}</p>
                   </div>
                 </div>
-                <hr />
+                <!-- <hr />
                 <span> Yuran </span>
                 <h2 class="font-bold">RM10.00</h2>
                 <hr />
@@ -156,22 +253,22 @@
                     >*Caj yuran akan dikenakan untuk membuat pendaftaran
                     bidaan.</i
                   >
-                </span>
-                <div class="m-t-sm">
+                </span> -->
+                <div v-if="feeStatus == 1" class="m-t-sm">
                   <div class="btn-group">
                     <button
                       data-bs-toggle="modal"
-                      data-bs-target="#payModal"
+                      data-bs-target="#bidModal"
                       class="btn btn-primary"
                     >
                       Teruskan <i class="fa fa-shopping-cart"></i>
                     </button>
                   </div>
-                  <div class="btn-group">
+                  <!-- <div class="btn-group">
                     <button @click="feePayment()" class="btn btn-primary">
                       try bavayar
                     </button>
-                  </div>
+                  </div> -->
                 </div>
               </div>
             </div>
@@ -179,6 +276,8 @@
         </div>
       </div>
     </div>
+    <!-- <div>{{$store.state.cart}}</div> -->
+    <div>{{ myValue }}</div>
 
     <!-- modal ubah bidaan -->
     <div
@@ -377,6 +476,70 @@
       </div>
     </div>
 
+    <!-- modal daftar bidaan -->
+    <div
+      class="modal fade"
+      id="bidModal"
+      tabindex="-1"
+      aria-labelledby="payModalLabel"
+      aria-hidden="true"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="editModalLabel">Daftar Bidaan</h5>
+            <button
+              type="button"
+              class="btn-close"
+              ref="daftarBidaanClose"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+
+          <div class="modal-body">
+            <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
+            <p>ADAKAH ANDA PASTI?</p>
+            <h4 class="text-danger">
+              <i>*Bidaan tidak dapat diubah selepas didaftarkan.</i>
+            </h4>
+
+            <table class="table table-bordered">
+              <tbody>
+                <tr class="bg-light">
+                  <th>Jumlah Surat</th>
+                  <th>Jumlah Bidaan</th>
+                </tr>
+                <tr>
+                  <td>{{ total_sag }}</td>
+                  <td>RM{{ total_bidaan }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="submit"
+              class="btn btn-secondary me-2"
+              data-bs-dismiss="modal"
+            >
+              Kembali
+            </button>
+            <button type="submit" class="btn btn-success" @click="bidderSelectBidItem()">Daftar Bidaan</button>
+            <p
+              class="fst-italic mt-3 fw-lighter"
+              style="text-align: right; font-size: small"
+            >
+              <!-- *Pelayar akan dialihkan ke halaman pembayaran jika butang 'Bayar'
+              ditekan. -->
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- modal bayar yuran -->
     <div
       class="modal fade"
@@ -390,7 +553,7 @@
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title" id="editModalLabel">Daftar Bidaan</h5>
+            <h5 class="modal-title" id="editModalLabel">Bayar Yuran</h5>
             <button
               type="button"
               class="btn-close"
@@ -409,7 +572,7 @@
               >
             </h4>
 
-            <table class="table table-bordered">
+            <!-- <table class="table table-bordered">
               <tbody>
                 <tr class="bg-light">
                   <th>Jumlah Surat</th>
@@ -420,7 +583,7 @@
                   <td>RM{{ total_bidaan }}</td>
                 </tr>
               </tbody>
-            </table>
+            </table> -->
           </div>
           <div class="modal-footer">
             <button
@@ -454,6 +617,7 @@ import Footer from "./Footer.vue";
 import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required, integer, numeric, minValue } from "@vuelidate/validators";
+import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "Cart",
@@ -461,9 +625,6 @@ export default {
     Navbar,
     Footer,
   },
-  // setup() {
-  //   return {  };
-  // },
   data() {
     return {
       v$: useVuelidate(),
@@ -474,6 +635,7 @@ export default {
       test2: [],
       abc: "",
       data: "",
+      feeStatus: "2",
       formEdit: {
         id: "",
         hargabida: "",
@@ -483,7 +645,16 @@ export default {
         notel: "0198900990",
         name: "amir",
         user_id: "8",
-        lelong_id: "3",
+        lelong_id: "4",
+      },
+      formCheck: {
+        user_id: localStorage.getItem("id"),
+        lelong_id: "4",
+      },
+      formRegisterBid: {
+        lelong_id: "4",
+        user_id: localStorage.getItem("id"),
+        name: "pembida",
       },
     };
   },
@@ -503,9 +674,15 @@ export default {
       });
       return total.toFixed(2);
     },
+    // ...mapGetters(["idLelong"])
+    ...mapState(["idLelong"]),
+    myValue() {
+      return this.$store.state.lelong_id;
+    },
   },
   mounted: function () {
     this.listCart();
+    this.checkFeePayment();
   },
   methods: {
     trybayar() {
@@ -588,9 +765,7 @@ export default {
       axios
         .post("/feepayment", this.formPayment)
         .then((response) => {
-          window.open(
-            response.data.message + '?auto_submit=true'
-          );
+          window.open(response.data.message + "?auto_submit=true");
 
           // window.location.href = response.data.message + '?auto_submit=true';
         })
@@ -600,6 +775,52 @@ export default {
           // console.log(this.formPayment);
         });
     },
+    checkFeePayment() {
+      // let test = this.store.state.idLelong;
+      // console.log(test);
+      axios
+        .get("/bidder/hisfeepay", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            user_id: localStorage.getItem("id"),
+            lelong_id: "4",
+          },
+        })
+        // .post("/addToCart", this.form, {
+        //     headers: {
+        //       Authorization: "Bearer " + localStorage.getItem("token"),
+        //     },
+        //   }
+        .then((response) => {
+          this.feeStatus = response.data.status;
+          // console.log(this.idLelong);
+          // console.log(response.data.status);
+          // this.$refs.padamClose.click();
+          // location.reload();
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    bidderSelectBidItem() {
+      axios
+        .post("/bidder/biditem", this.formRegisterBid, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          console.log(response);
+          this.$refs.daftarBidaanClose.click();
+
+          location.reload();
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
   },
 };
 </script>
diff --git a/src/components/IndexPaymentHistory.vue b/src/components/IndexPaymentHistory.vue
new file mode 100644
index 0000000..7603767
--- /dev/null
+++ b/src/components/IndexPaymentHistory.vue
@@ -0,0 +1,30 @@
+<template>
+  <Navbar />
+  <div class="container" style="min-height: 80vh">
+    <button
+      class="btn btn-secondary float-start"
+      style="margin: 5px"
+      onclick="history.back()"
+    >
+      Kembali <i class="bi bi-backspace-fill"></i>
+    </button>
+    <h1>Rekod Bayaran <i class="bi bi-journal-text"></i></h1>
+    <PaymentHistory />
+  </div>
+  <Footer />
+</template>
+
+<script>
+import PaymentHistory from "./result/PaymentHistory.vue";
+import Navbar from "./Navbar.vue";
+import Footer from "./Footer.vue";
+
+export default {
+  name: "IndexPaymentHistory",
+  components: {
+    PaymentHistory,
+    Navbar,
+    Footer,
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 3d65e03..023b99e 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -30,6 +30,9 @@
           <li class="nav-item">
             <router-link class="nav-link" to="/pay">Bayar</router-link>
           </li>
+          <li class="nav-item">
+            <router-link class="nav-link" to="/paymenthistory">Rekod Bayaran</router-link>
+          </li>
           <li class="nav-item">
             <router-link class="nav-link" to="/profile">Profil</router-link>
           </li>
@@ -91,11 +94,13 @@ export default {
         });
     },
     ...mapActions(["fetchCarts"]),
+    ...mapActions(["fetchLelongId"]),
     
   },
-  computed: { ...mapGetters(["allCarts"]), },
+  computed: { ...mapGetters(["allCarts"]), ...mapGetters(["idLelong"]), },
   created() {
     this.fetchCarts();
+    this.fetchLelongId();
   },
 };
 </script>
diff --git a/src/components/Pay.vue b/src/components/Pay.vue
index e5aec5d..56f2509 100644
--- a/src/components/Pay.vue
+++ b/src/components/Pay.vue
@@ -1,6 +1,6 @@
 <template>
   <Navbar />
-  <div class="container">
+  <div class="container" style="min-height: 80vh">
     <button
       class="btn btn-secondary float-start"
       style="margin: 5px"
@@ -22,7 +22,7 @@
 
         <ToPay :key="toPayComponent" />
       </div>
-      <div class="row">
+      <!-- <div class="row">
         <div class="d-flex">
           <h3 class="text-start">Rekod Bayaran </h3>
           <h5>
@@ -32,7 +32,7 @@
           </h5>
         </div>
         <PaymentHistory :key="paymentHistoryComponent" />
-      </div>
+      </div> -->
     </div>
   </div>
 
diff --git a/src/components/list/Senarai.vue b/src/components/list/Senarai.vue
index 0dc9c03..9afe85b 100644
--- a/src/components/list/Senarai.vue
+++ b/src/components/list/Senarai.vue
@@ -264,6 +264,7 @@ import axios from "axios";
 import Senarai from "../list/Senarai.vue";
 import useVuelidate from "@vuelidate/core";
 import { required, integer, numeric, minValue } from "@vuelidate/validators";
+import { mapGetters, mapActions } from "vuex";
 
 export default {
   components: {
@@ -289,6 +290,7 @@ export default {
       },
       myModal: null,
       cuba: "",
+      ngeteh: [],
     };
   },
   validations() {
@@ -300,6 +302,7 @@ export default {
     numberSag() {
       return this.sags.length;
     },
+    ...mapGetters(["allCarts"]),
   },
   mounted: function () {
     this.liveData();
@@ -313,13 +316,125 @@ export default {
             Authorization: "Bearer " + localStorage.getItem("token"),
           },
           params: {
-            caw_id: "4",
+            caw_id: "3",
           },
         })
         .then((response) => {
           this.lelong_details = response.data[0];
           this.response = response.data[0].lelongbid;
           this.sags = this.response;
+          this.ngeteh = this.allCarts;
+
+          // console.log(this.sags);
+          // console.log(this.allCarts);
+
+          // this.sags.forEach(function (element) {
+          //   var test = ["103"];
+          //   if (element.id == test) {
+          //     console.log("existed");
+          //   }
+          //   // console.log(element.id);
+          // });
+
+          let nathaliaPals = [
+            "Ernest",
+            "Jack",
+            "Peter",
+            "Miley",
+            "Sally",
+            "Xavier",
+          ];
+          let johnPals = ["Jesus", "Ernest", "Joe", "Peter", "James", "Monica"];
+          let commonPals = [];
+
+          nathaliaPals.forEach((pal) => {
+            if (johnPals.includes(pal)) {
+              return commonPals.push(pal);
+            }
+          });
+          // console.log(commonPals);
+
+          let existed = [];
+
+          // console.log(this.allCarts);
+          this.sags.forEach((exist) => {
+            if (this.ngeteh.includes(exist.id)) {
+              return existed.push(pal);
+            }
+          });
+          // console.log(existed);
+
+          var array1 = new Array("a", "b", "c", "d", "e", "f");
+          var array2 = new Array("c", "e");
+          // console.log(array1);
+          // console.log(this.sags);
+          // console.log(this.allCarts);
+
+          for (var i = 0; i < array2.length; i++) {
+            var arrlen = array1.length;
+            for (var j = 0; j < arrlen; j++) {
+              if (array2[i] == array1[j]) {
+                array1 = array1.slice(0, j).concat(array1.slice(j + 1, arrlen));
+              }
+            }
+          }
+          // console.log(array1);
+
+          var array1 = new Array("a", "b", "c", "d", "e", "f");
+          var array2 = new Array("c", "e");
+
+          for (var i = 0; i < array2.length; i++) {
+            var arrlen = array1.length;
+            for (var j = 0; j < arrlen; j++) {
+              if (array2[i] == array1[j]) {
+                array1 = array1.slice(0, j).concat(array1.slice(j + 1, arrlen));
+              }
+            }
+          }
+          // console.log(array1);
+
+          const propertyNames = Object.keys(this.sags);
+
+          const preference = {
+            ethnicity: {
+              value: "Gurung",
+              rank: "asa",
+            },
+            occupation: {
+              value: "Banker",
+              rank: "ss",
+            },
+          };
+
+          const preferenceRank = {};
+          for (const [key, { rank }] of Object.entries(preference)) {
+            preferenceRank[rank] = key;
+          }
+
+          // console.log(preferenceRank);
+          // console.log(this.sags);
+          // console.log(propertyNames);
+          // console.log(nathaliaPals);
+
+          // this.allCarts.forEach(function (element) {
+          //   if (element.lelongbid_id == norujukan.id) {
+          //   } else {
+          //   }
+
+          //   // console.log(element.lelongbid_id);
+          // });
+
+          console.log(this.sags);
+          console.log(this.allCarts);
+
+          // let newArray = [].concat(this.sags, this.allCarts);
+          let newArray = [...this.sags, ...this.allCarts];
+
+          let set = new Set(newArray);
+
+          console.log(newArray);
+          // console.log(set);
+
           this.loading = false;
         })
         .catch((error) => {
@@ -328,6 +443,25 @@ export default {
         });
     },
     clickModal(norujukan) {
+      // var headsets = this.allCarts;
+      // console.log(this.allCarts);
+      // this.allCarts.forEach(
+      // element
+
+      // console.log(element.lelongbid_id)
+      // console.log(this.allCarts.includes(norujukan.id));
+      // );
+
+      // console.log(norujukan);
+      this.allCarts.forEach(function (element) {
+        if (element.lelongbid_id == norujukan.id) {
+          // return true;
+          console.log("ada");
+        } else {
+          // console.log("tiada");
+        }
+      });
+
       this.norujukan = norujukan;
       this.marhuns = this.norujukan.lelongbidmarhun;
       this.form.lelongbid_id = this.norujukan.id;
@@ -351,8 +485,9 @@ export default {
           })
           .then((response) => {
             console.log(response);
+            this.loading = true;
             this.$refs.tambahClose.click();
-
+            this.loading = false;
             location.reload();
           })
           .catch((error) => {
diff --git a/src/components/result/PaymentHistory.vue b/src/components/result/PaymentHistory.vue
index f7ba98f..244dba1 100644
--- a/src/components/result/PaymentHistory.vue
+++ b/src/components/result/PaymentHistory.vue
@@ -10,29 +10,32 @@
 
   <div v-else>
     <!-- <div class="card"> -->
-      <!-- <div class="card-header">
+    <!-- <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 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-if="response == 1">
+            <td colspan="4">Tiada Rekod</td>
+          </tr>
+          <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>
@@ -46,6 +49,7 @@ export default {
     return {
       loading: false,
       paymentHistory: [],
+      response: ""
     };
   },
   mounted: function () {
@@ -66,7 +70,9 @@ export default {
           this.loading = false;
         })
         .catch((error) => {
+          this.response = 1;
           console.log(error);
+          this.loading = false;
         });
     },
   },
diff --git a/src/router/index.js b/src/router/index.js
index bbda90b..616f070 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,7 @@ import List from './../components/List.vue'
 import Pay from '../components/Pay.vue'
 import Profile from './../components/Profile.vue'
 import BidHistory from '../components/BidHistory.vue'
+import IndexPaymentHistory from '../components/IndexPaymentHistory.vue'
 // import Modals from './../components/Modal.vue'
 // import { Modal } from "bootstrap";
 
@@ -65,6 +66,13 @@ const routes = [
         component: BidHistory,
         // meta: { requiresAuth: true }
 
+    }, 
+    {
+        path: '/paymenthistory',
+        name: 'PaymentHistory',
+        component: IndexPaymentHistory,
+        // meta: { requiresAuth: true }
+
     }, 
     // {
     //     name: 'Modal',
diff --git a/src/store/index.js b/src/store/index.js
index adef34f..e3d16e2 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,7 @@
 import Vuex from 'vuex'
 // import Vue from 'vue'
 import cart from './modules/cart'
+import lelong_id from './modules/lelongId'
 
 //Load vuex
 // Vue.use(Vuex);
@@ -9,5 +10,6 @@ import cart from './modules/cart'
 export default new Vuex.Store({
     modules: {
         cart,
+        lelong_id
     }
 })
\ No newline at end of file
diff --git a/src/store/modules/lelongId.js b/src/store/modules/lelongId.js
new file mode 100644
index 0000000..d804beb
--- /dev/null
+++ b/src/store/modules/lelongId.js
@@ -0,0 +1,34 @@
+import axios from 'axios';
+
+const state = {
+    lelong_id: ""
+};
+
+const getters = {
+    idLelong: state => state.lelong_id,
+};
+
+const actions = {
+    async fetchLelongId({ commit }) {
+        const response = await axios.get("/lelongDetails/today", {
+            headers: {
+                Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+        });
+
+        // console.log(response.data[0].id);
+        commit('setIdLelong', response.data[0].id);
+
+    },
+};
+
+const mutations = {
+    setIdLelong: (state, lelong_id) => (state.lelong_id = lelong_id),
+}
+
+export default {
+    state,
+    getters,
+    actions,
+    mutations
+}
\ No newline at end of file