diff --git a/package-lock.json b/package-lock.json
index 61c01dc..596ebfe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,8 @@
         "jspdf-autotable": "^3.5.28",
         "libphonenumber-js": "^1.10.14",
         "maz-ui": "^3.0.7",
+        "pinia": "^2.0.28",
+        "pinia-plugin-persistedstate": "^3.0.2",
         "postcss": "^8",
         "primeflex": "^3.2.1",
         "primeicons": "^6.0.1",
@@ -30,8 +32,7 @@
         "vue-html2pdf": "^1.8.0",
         "vue-router": "^4.0.14",
         "vue-sweetalert2": "^5.0.5",
-        "vue3-youtube": "^0.1.9",
-        "vuex": "^4.0.2"
+        "vue3-youtube": "^0.1.9"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~5.0.0",
@@ -2752,9 +2753,9 @@
       "dev": true
     },
     "node_modules/@vue/devtools-api": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
-      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
+      "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
     },
     "node_modules/@vue/reactivity": {
       "version": "3.2.32",
@@ -8473,6 +8474,64 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.28.tgz",
+      "integrity": "sha512-YClq9DkqCblq9rlyUual7ezMu/iICWdBtfJrDt4oWU9Zxpijyz7xB2xTwx57DaBQ96UGvvTMORzALr+iO5PVMw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.4.5",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.0.2.tgz",
+      "integrity": "sha512-84vPyUhPA/8Pr+1mT1ioNb2d8z4tvdgYRqMQf8xyauOVBKjo0ZcRBwPQBV7ZAJG43Kwar43nXG2jU+ZMvAFFRQ==",
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -10926,17 +10985,6 @@
         "vue": "^3.0.0"
       }
     },
-    "node_modules/vuex": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
-      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
-      "dependencies": {
-        "@vue/devtools-api": "^6.0.0-beta.11"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.2"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@@ -13616,9 +13664,9 @@
       }
     },
     "@vue/devtools-api": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
-      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
+      "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
     },
     "@vue/reactivity": {
       "version": "3.2.32",
@@ -17822,6 +17870,29 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.28.tgz",
+      "integrity": "sha512-YClq9DkqCblq9rlyUual7ezMu/iICWdBtfJrDt4oWU9Zxpijyz7xB2xTwx57DaBQ96UGvvTMORzALr+iO5PVMw==",
+      "requires": {
+        "@vue/devtools-api": "^6.4.5",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
+    "pinia-plugin-persistedstate": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.0.2.tgz",
+      "integrity": "sha512-84vPyUhPA/8Pr+1mT1ioNb2d8z4tvdgYRqMQf8xyauOVBKjo0ZcRBwPQBV7ZAJG43Kwar43nXG2jU+ZMvAFFRQ==",
+      "requires": {}
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -19621,14 +19692,6 @@
         "vue": "^3.0.0"
       }
     },
-    "vuex": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
-      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
-      "requires": {
-        "@vue/devtools-api": "^6.0.0-beta.11"
-      }
-    },
     "watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
diff --git a/package.json b/package.json
index d950bee..fac1d26 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
     "jspdf-autotable": "^3.5.28",
     "libphonenumber-js": "^1.10.14",
     "maz-ui": "^3.0.7",
+    "pinia": "^2.0.28",
+    "pinia-plugin-persistedstate": "^3.0.2",
     "postcss": "^8",
     "primeflex": "^3.2.1",
     "primeicons": "^6.0.1",
@@ -29,8 +31,7 @@
     "vue-html2pdf": "^1.8.0",
     "vue-router": "^4.0.14",
     "vue-sweetalert2": "^5.0.5",
-    "vue3-youtube": "^0.1.9",
-    "vuex": "^4.0.2"
+    "vue3-youtube": "^0.1.9"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",
diff --git a/src/components/authentication/TheLogin.vue b/src/components/authentication/TheLogin.vue
index 2747f19..8dde1fd 100644
--- a/src/components/authentication/TheLogin.vue
+++ b/src/components/authentication/TheLogin.vue
@@ -112,6 +112,7 @@
 import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required } from "@vuelidate/validators";
+import { useAuthenticationUserStore } from "@/store/modules/authentication"
 
 export default {
   name: "Login",
@@ -125,6 +126,10 @@ export default {
       isLoading: false,
     };
   },
+  setup() {
+    const authenticationStore = useAuthenticationUserStore()
+    return { authenticationStore }
+  },
   methods: {
     doLogin() {
       this.v$.$validate();
@@ -145,6 +150,15 @@ export default {
                 response.data.user.notelbimbit
               );
               localStorage.setItem("username", response.data.user.username);
+              this.authenticationStore.$patch({
+                token: response.data.token,
+                id: response.data.user.id,
+                nokp: response.data.user.nokp,
+                name: response.data.user.name,
+                email: response.data.user.email,
+                notelbimbit: response.data.user.notelbimbit,
+                username: response.data.user.username,
+              })
               this.$router.push({ name: "home" });
             } else if (response.data.statusAkaun == 0) {
               this.$toast.add({
diff --git a/src/components/authentication/TheRegister.vue b/src/components/authentication/TheRegister.vue
index 4c951bc..9a72037 100644
--- a/src/components/authentication/TheRegister.vue
+++ b/src/components/authentication/TheRegister.vue
@@ -305,6 +305,7 @@ import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required, email, minLength, maxLength } from "@vuelidate/validators";
 import TermsAndConditionsDetails from "./TermsAndConditionsDetails.vue";
+import { useAuthenticationUserStore } from "@/store/modules/authentication"
 
 export default {
   name: "Register",
@@ -344,6 +345,10 @@ export default {
       },
     };
   },
+  setup() {
+    const authenticationStore = useAuthenticationUserStore()
+    return { authenticationStore }
+  },
   methods: {
     doRegister() {
       this.v$.$validate();
@@ -364,6 +369,15 @@ export default {
                 response.data.user.notelbimbit
               );
               localStorage.setItem("username", response.data.user.username);
+              this.authenticationStore.$patch({
+                token: response.data.token,
+                id: response.data.user.id,
+                nokp: response.data.user.nokp,
+                name: response.data.user.name,
+                email: response.data.user.email,
+                notelbimbit: response.data.user.notelbimbit,
+                username: response.data.user.username,
+              })
               this.$router.push({ name: "home" });
               this.isLoading = false;
             } else if (response.data.success == false) {
diff --git a/src/components/home/LelongTodayDetail.vue b/src/components/home/LelongTodayDetail.vue
index 9922f2d..1538cb3 100644
--- a/src/components/home/LelongTodayDetail.vue
+++ b/src/components/home/LelongTodayDetail.vue
@@ -48,6 +48,7 @@
 
 <script>
 import axios from "axios";
+import { useAuthenticationUserStore } from "@/store/modules/authentication"
 
 export default {
   data() {
@@ -57,6 +58,11 @@ export default {
       response: Array,
     };
   },
+  setup() {
+    const authenticationStore = useAuthenticationUserStore()
+
+    return { authenticationStore }
+  },
   mounted: function () {
     this.liveData();
   },
@@ -66,7 +72,7 @@ export default {
       axios
         .get("/listcawlelongtoday", {
           headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
+            Authorization: "Bearer " + this.authenticationStore.getToken,
           },
         })
         .then((response) => {
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index e89bbdd..d32a2a0 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -216,6 +216,8 @@
 
 <script>
 import axios from "axios";
+import { useAuthenticationUserStore } from "@/store/modules/authentication"
+
 export default {
   data() {
     return {
@@ -226,6 +228,11 @@ export default {
       itemInCart: 0,
     };
   },
+  setup() {
+    const authenticationStore = useAuthenticationUserStore()
+
+    return { authenticationStore }
+  },
   mounted: function () {
     this.getLelongOnline();
     // this.getItemInCart();
@@ -244,6 +251,7 @@ export default {
         )
         .then((response) => {
           localStorage.clear();
+          this.authenticationStore.$reset();
           this.$router.push({ name: "login" });
         })
         .catch((error) => {
diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index 4f2ef85..14ac8c3 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -482,7 +482,6 @@
 import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required, integer, numeric, minValue } from "@vuelidate/validators";
-import { mapGetters, mapActions } from "vuex";
 import { read } from "@popperjs/core";
 import ItemMasterImage from "./ItemMasterImage.vue";
 import ItemMultipleImage from "./ItemMultipleImage.vue";
@@ -541,7 +540,6 @@ export default {
     dataUrl() {
       // return "data:image/jpeg;base64," + this.image;
     },
-    ...mapGetters(["allCarts"]),
   },
   mounted: function () {
     this.liveData();
diff --git a/src/components/pay/ListReceipt.vue b/src/components/pay/ListReceipt.vue
index 035e2b8..de0c262 100644
--- a/src/components/pay/ListReceipt.vue
+++ b/src/components/pay/ListReceipt.vue
@@ -86,7 +86,9 @@ import ReceiptImage from "./ReceiptImage.vue";
 
 export default {
   emits: ["reloadComponent"],
-
+  props: {
+      lelong_id: "",
+  },
   mounted: function () {
     this.listReceipt();
     // this.getInvoice();
@@ -114,7 +116,7 @@ export default {
           },
           params: {
             user_id: localStorage.getItem("id"),
-            lelong_id: 4,
+            lelong_id: this.lelong_id,
           },
         })
         .then((response) => {
diff --git a/src/components/pay/ReceiptImage.vue b/src/components/pay/ReceiptImage.vue
index 9acd4db..1e2c055 100644
--- a/src/components/pay/ReceiptImage.vue
+++ b/src/components/pay/ReceiptImage.vue
@@ -2,7 +2,7 @@
   <div v-if="isLoading" class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <Image v-else :src="dataUrl" alt="Gambar Marhun" width="250" preview>
+  <Image v-else :src="dataUrl" alt="Gambar Marhun" width="100" preview>
     <template #indicator> Lihat Gambar </template>
   </Image>
 </template>
diff --git a/src/components/pay/SelectOutlet.vue b/src/components/pay/SelectOutlet.vue
index f707b76..801250f 100644
--- a/src/components/pay/SelectOutlet.vue
+++ b/src/components/pay/SelectOutlet.vue
@@ -71,7 +71,7 @@
     </TabPanel>
   </TabView>
   <Dialog
-    header="Teruskan Bayaran"
+    header="Teruskan Bayaran Menggunakan Kaedah FPX"
     v-model:visible="isDisplay"
     :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
     :style="{ width: '50vw' }"
@@ -174,13 +174,83 @@
       />
     </template>
   </Dialog>
+  <Dialog
+    v-model:visible="isDisplayPaymentMethod"
+    :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+    :style="{ width: '50vw' }"
+    :modal="true"
+    :closable="false"
+  >
+    <div class="text-center m-2">
+      <h4>Sila Pilih Jenis Bayaran</h4>
+      <Button
+        label="Bayaran FPX"
+        @click="openModalNew()"
+        class="p-button-warning m-1"
+      />
+      <Button
+        label="Bayaran CDM"
+        @click="openModalFileUpload()"
+        class="p-button-help m-1"
+      />
+    </div>
+    <template #footer>
+      <Button
+        label="Batal"
+        icon="pi pi-times"
+        iconPos="right"
+        @click="closeModalPaymentMethod()"
+        class="p-button-text"
+      />
+    </template>
+  </Dialog>
+  <Dialog
+    header="Teruskan Bayaran Menggunakan Kaedah CDM"
+    v-model:visible="isDisplayFileUpload"
+    :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+    :style="{ width: '50vw' }"
+    :modal="true"
+  >
+    <div class="text-center m-2">
+      <input
+        class="form-control"
+        type="file"
+        accept="image/png, image/jpg, image/jpeg"
+        v-on:change="selectPhoto"
+      />
+      <div
+        style="font-size: 13px"
+        class="fst-italic text-danger row"
+        v-if="v$.fileSize.$error"
+      >
+        <div>Saiz maksimum gambar adalah 2MB.</div>
+        <div>Jenis gambar yang diterima adalah PNG dan JPG.</div>
+      </div>
+    </div>
+    <template #footer>
+      <Button
+        class="p-button-sm p-button-secondary"
+        label="Kembali"
+        @click="closeModalFileUpload()"
+      />
+      <Button
+        class="p-button-sm p-button-success"
+        label="Simpan"
+        icon="pi pi-check"
+        iconPos="right"
+        :loading="isLoadingButton"
+        @click="addPhotoResit()"
+      />
+    </template>
+  </Dialog>
 </template>
 
 <script>
-import { integer } from "@vuelidate/validators";
 import SelectId from "./SelectId.vue";
 import TermsAndConditionsDetails from "../authentication/TermsAndConditionsDetails.vue";
 import axios from "axios";
+import { required, integer, between } from "@vuelidate/validators";
+import useVuelidate from "@vuelidate/core";
 
 export default {
   components: {
@@ -195,16 +265,21 @@ export default {
   },
   data() {
     return {
+      v$: useVuelidate(),
       nextButton: false,
       selectCawangan: this.namaCawangan,
       selectRadio: "",
+      isLoadingButton: false,
       isDisplay: false,
       isDisplayTNC: false,
+      isDisplayPaymentMethod: false,
+      isDisplayFileUpload: false,
       isLoading: false,
       cawanganPilihan: "",
       hargaBidaanPilihan: "",
       hargaBidaanPilihanTambahFi: "",
       lelongDetails: "",
+      fileSize: 0,
       form: {
         email: localStorage.getItem("email"),
         notel: localStorage.getItem("notelbimbit"),
@@ -227,9 +302,16 @@ export default {
         //   },
         // ],
         sag: "",
+        kodcaw: "",
+        gambarResit: "",
       },
     };
   },
+  validations() {
+    return {
+      fileSize: { required, integer, betweenValue: between(1, 2200000) },
+    };
+  },
   mounted() {
     this.getInvoice();
   },
@@ -267,11 +349,12 @@ export default {
       var limit_masa_bayaran = "15:00:00";
       var limit_datetime_bayaran =
         this.lelongDetails.tarikh_lelong + ", " + limit_masa_bayaran;
-      console.log(current_time, "\n", limit_datetime_bayaran);
+      // console.log(current_time, "\n", limit_datetime_bayaran);
 
       // if (current_time < limit_datetime_bayaran === true) {
-      this.isDisplay = true;
+      this.isDisplayPaymentMethod = true;
       this.cawanganPilihan = value.cawangan;
+      this.form.kodcaw = value.kodcaw;
       this.hargaBidaanPilihan = value.total_hargabida;
       let convertHargaBidaanPilihan =
         parseFloat(value.total_hargabida.replace(/,/g, "")) + 1;
@@ -296,6 +379,78 @@ export default {
       this.form.total = "";
       this.form.sag = "";
     },
+    selectPhoto(e) {
+      this.fileSize = e.target.files[0].size;
+      this.form.gambarResit = e.target.files[0];
+    },
+    addPhotoResit() {
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        let convertDataSAG = JSON.stringify(this.form.sag);
+
+        this.isLoadingButton = true;
+        var resitFormData = new FormData();
+        resitFormData.append("gambarResit", this.form.gambarResit);
+        resitFormData.append("lelong_id", this.form.lelong_id);
+        resitFormData.append("user_id", this.form.user_id);
+        resitFormData.append("kodcaw", this.form.kodcaw);
+        resitFormData.append("invoice_id", this.form.invoice_id);
+        resitFormData.append("invoice_no", this.form.invoice_no);
+        resitFormData.append("total", this.form.total);
+        resitFormData.append("sag", convertDataSAG);
+        axios
+          .post("/initializeCdmPayment", resitFormData, {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          })
+          .then((response) => {
+            this.isLoadingButton = false;
+            this.fileSize = 0;
+            this.isDisplayFileUpload = false;
+            if (response.data.success == true) {
+              this.$swal.fire({
+                icon: "success",
+                title: "Gambar Resit Berjaya Di Muat Naik",
+                text: "Marhun mesti dituntut sebelum jam 4 petang hari ini.",
+                confirmButtonColor: "#344871",
+                confirmButtonText: "OK",
+                allowOutsideClick: false,
+                allowEscapeKey: false,
+              });
+              this.$router.push({ name: "result" });
+            } else {
+              this.isLoadingButton = false;
+              console.log(response);
+              this.$swal.fire({
+                toast: true,
+                icon: "error",
+                title: "Gagal! Sila cuba kembali.",
+                animation: false,
+                position: "bottom",
+                showConfirmButton: false,
+                timer: 5000,
+                timerProgressBar: true,
+              });
+            }
+          })
+          .catch((error) => {
+            alert(error);
+            this.isLoadingButton = false;
+          });
+      }
+    },
+    openModalNew() {
+      this.isDisplay = true;
+      this.isDisplayPaymentMethod = false;
+    },
+    openModalFileUpload() {
+      this.isDisplayFileUpload = true;
+      this.isDisplayPaymentMethod = false;
+    },
+    closeModalFileUpload() {
+      this.isDisplayFileUpload = false;
+    },
     openModalTNC() {
       this.isDisplay = false;
       this.isDisplayTNC = true;
@@ -305,6 +460,12 @@ export default {
       this.form.total = "";
       this.form.sag = "";
     },
+    openModalPaymentMethod() {
+      this.isDisplayPaymentMethod = true;
+    },
+    closeModalPaymentMethod() {
+      this.isDisplayPaymentMethod = false;
+    },
     clickRadio(value) {
       // console.log(value);
       this.selectRadio = value;
diff --git a/src/components/pay/ThePay.vue b/src/components/pay/ThePay.vue
index 4e5ff66..a858ac2 100644
--- a/src/components/pay/ThePay.vue
+++ b/src/components/pay/ThePay.vue
@@ -13,7 +13,22 @@
       <div v-if="isSuccess">
         <Card>
           <template #title>
-            <div class="font-normal">Pembayaran Bidaan Menggunakan FPX</div>
+            <div class="font-normal">
+              <div class="flex">
+                <Button
+                  class="
+                    p-button-sm
+                    button-custom
+                    p-button-secondary p-button-outlined
+                    align-self-center
+                    mr-2
+                  "
+                  icon="pi pi-arrow-left"
+                  v-on:click="clickCancelButton()"
+                />
+                Pembayaran Bidaan
+              </div>
+            </div>
             <div class="font-normal text-base">
               Tarikh Lelong : {{ tarikhLelong }}
             </div>
@@ -134,7 +149,15 @@ export default {
           console.log(error);
         });
     },
-    
+    clickCancelButton() {
+      this.$router.push({
+        name: "detail",
+        params: {
+          lelongId: this.lelongId,
+          statusPayment: null,
+        },
+      });
+    },
     clickBackButton() {
       this.statusComponent -= 1;
     },
diff --git a/src/components/pay/ThePayCdm.vue b/src/components/pay/ThePayCdm.vue
index 3a528e6..5587e48 100644
--- a/src/components/pay/ThePayCdm.vue
+++ b/src/components/pay/ThePayCdm.vue
@@ -61,7 +61,7 @@
                     <td>RMXXXX</td>
                   </tr>
                   <tr class="uppercase text-danger">
-                    <th colspan="2">Jumlah Yang Perlu Di Bank-In</th>
+                    <th colspan="2">Amaun yang perlu di bank-in</th>
                     <th>RMXXXXX</th>
                   </tr>
                 </tbody>
@@ -76,6 +76,7 @@
             />
             <list-receipt
               v-bind:key="componentKey"
+              v-bind:lelong_id="lelongId"
               v-on:reloadComponent="toggleReloadComponent"
             ></list-receipt>
 
@@ -87,12 +88,20 @@
               :modal="true"
             >
               <div class="text-center m-2">
-                <input type="file" />
+                <input class="form-control" type="file" accept="image/*" v-on:change="selectPhoto" />
+                <!-- <FileUpload
+                  name="demo[]"
+                  url="./upload"
+                  accept="image/*"
+                  :maxFileSize="1500000"
+                  :fileLimit="1"
+                  invalidFileSizeMessage="{0}: Melebihi saiz yang ditetapkan, saiz fail hendaklah tikal melebihi 1.5 MB."
+                /> -->
               </div>
               <template #footer>
                 <Button
-                  class="p-button-sm p-button-danger"
-                  label="Batal"
+                  class="p-button-sm p-button-secondary"
+                  label="Kembali"
                   @click="closeModalFileUpload()"
                 />
                 <Button
@@ -100,7 +109,7 @@
                   label="Simpan"
                   icon="pi pi-check"
                   iconPos="right"
-                  @click="openModalFileUpload()"
+                  @click="addPhotoResit()"
                 />
               </template>
             </Dialog>
@@ -156,6 +165,11 @@ export default {
       isSuccess: false,
       isDisplayFileUpload: false,
       componentKey: 0,
+      formResit: {
+        user_id: localStorage.getItem("id"),
+        lelong_id: this.$route.params.lelongId,
+        gambarResit: "",
+      },
     };
   },
   created() {
@@ -196,6 +210,52 @@ export default {
           console.log(error);
         });
     },
+    selectPhoto(e) {
+      console.log(e);
+      this.formResit.gambarResit = e.target.files[0];
+    },
+    addPhotoResit() {
+      var resitFormData = new FormData();
+      resitFormData.append("gambarResit", this.formResit.gambarResit);
+      resitFormData.append("lelong_id", this.formResit.lelong_id);
+      resitFormData.append("user_id", this.formResit.user_id);
+      axios
+        .post("/addPhotoResit", resitFormData, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          this.isDisplayFileUpload = false;
+          if (response.data.success == true) {
+            this.$swal.fire({
+              icon: "success",
+              title: "Gambar Resit Berjaya Di Muat Naik",
+              confirmButtonColor: "#344871",
+              confirmButtonText: "OK",
+              allowOutsideClick: false,
+              allowEscapeKey: false,
+            });
+            this.componentKey += 1;
+          } else if (response.data.success == false) {
+            console.log(response);
+            this.$swal.fire({
+              toast: true,
+              icon: "error",
+              title: "Gagal! Sila refresh page semula.",
+              animation: false,
+              position: "bottom",
+              showConfirmButton: false,
+              timer: 5000,
+              timerProgressBar: true,
+            });
+            this.componentKey += 1;
+          }
+        })
+        .catch((error) => {
+          alert(error);
+        });
+    },
     openModalFileUpload() {
       this.isDisplayFileUpload = true;
     },
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index 4f668c6..9602ed6 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -13,7 +13,6 @@
         <div class="row">
           <Card>
             <template #title>
-              <!-- <div class="row"> -->
               <div class="grid justify-content-between">
                 <div class="flex">
                   <Button
@@ -44,7 +43,7 @@
                     v-on:click="clickPayCdmButton(lelongId)"
                   /> -->
                   <Button
-                    label="Bayar FPX"
+                    label="Pembayaran"
                     icon="pi pi-dollar"
                     iconPos="right"
                     class="p-button-sm"
@@ -61,13 +60,12 @@
                     fst-italic
                     fw-lighter
                     text-danger
-                    lg:text-right
+                    md:text-right
                   "
                 >
                   *Sila klik butang diatas untuk lakukan bayaran.
                 </div>
               </div>
-              <!-- </div> -->
             </template>
             <template #content>
               <Accordion :multiple="true">
@@ -76,6 +74,33 @@
                     <div class="flex justify-content-between w-100">
                       <div class="align-self-center" style="margin: 5px">
                         {{ list.cawangan }}
+                        <span
+                          v-if="list.status_payment_cawangan.status === null"
+                        >
+                          <Tag
+                            value="Belum Bayar"
+                            icon="pi pi-times"
+                            severity="danger"
+                          ></Tag>
+                        </span>
+                        <span
+                          v-else-if="list.status_payment_cawangan.status == 9"
+                        >
+                          <Tag
+                            value="Tunggu Pengesahan"
+                            icon="pi pi-stopwatch"
+                            severity="warning"
+                          ></Tag>
+                        </span>
+                        <span
+                          v-else-if="list.status_payment_cawangan.status == 1"
+                        >
+                          <Tag
+                            value="Selesai Bayar"
+                            icon="pi pi-check"
+                            severity="success"
+                          ></Tag>
+                        </span>
                       </div>
                       <div class="style-info">
                         Jumlah RM{{
@@ -92,8 +117,143 @@
                     iconPos="right"
                     class="p-button-sm mb-3"
                     v-on:click="downloadPdf(list.kodcaw)"
-                    v-if="list.status_payment_cawangan == 1"
+                    v-if="list.status_payment_cawangan.status == 1"
                   />
+                  <div
+                    v-if="
+                      list.status_payment_cawangan.status == 1 ||
+                      list.status_payment_cawangan.status == 9
+                    "
+                  >
+                    <div
+                      class="m-2"
+                      v-if="
+                        list.status_payment_cawangan.payment_method_opt == 2
+                      "
+                    >
+                      <div>
+                        <div class="row">
+                          <div>Cara Bayaran: FPX</div>
+                        </div>
+                        <div class="row">
+                          <div>
+                            Masa Bayaran:
+                            {{ list.status_payment_cawangan.resit.pay_time }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="m-2"
+                      v-else-if="
+                        list.status_payment_cawangan.payment_method_opt == 1
+                      "
+                    >
+                      <div>
+                        <div class="row">
+                          <div>Cara Bayaran: TUNAI DI CAWANGAN</div>
+                        </div>
+                        <div class="row">
+                          <div>
+                            Masa Bayaran:
+                            {{ list.status_payment_cawangan.resit.pay_time }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="mt-2 mb-2"
+                      v-else-if="
+                        list.status_payment_cawangan.payment_method_opt == 3
+                      "
+                    >
+                      <div>
+                        <div class="row mb-3">
+                          <div>Cara Bayaran: CDM</div>
+                        </div>
+                        <div
+                          v-if="
+                            list.status_payment_cawangan.status == 9 &&
+                            list.status_payment_cawangan.file_resit.length < 7
+                          "
+                        >
+                          <Button
+                            class="p-button-sm mb-1"
+                            label="Muat Naik Resit"
+                            icon="pi pi-plus-circle"
+                            iconPos="right"
+                            @click="openModalFileUpload(list.kodcaw)"
+                          />
+                          <Dialog
+                            header="Muat Naik Resit Baharu"
+                            v-model:visible="isDisplayFileUpload"
+                            :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+                            :style="{ width: '50vw' }"
+                            :modal="true"
+                          >
+                            <div class="text-center m-2">
+                              <input
+                                class="form-control"
+                                type="file"
+                                accept="image/png, image/jpg, image/jpeg"
+                                v-on:change="selectPhoto"
+                              />
+                              <div
+                                style="font-size: 13px"
+                                class="fst-italic text-danger row"
+                                v-if="v$.fileSize.$error"
+                              >
+                                <div>Saiz maksimum gambar adalah 2MB.</div>
+                                <div>
+                                  Jenis gambar yang diterima adalah PNG dan JPG.
+                                </div>
+                              </div>
+                            </div>
+                            <template #footer>
+                              <Button
+                                class="p-button-sm p-button-secondary"
+                                label="Kembali"
+                                @click="closeModalFileUpload()"
+                              />
+                              <Button
+                                class="p-button-sm p-button-success"
+                                label="Simpan"
+                                icon="pi pi-check"
+                                iconPos="right"
+                                :loading="isLoadingButton"
+                                @click="addPhotoResit()"
+                              />
+                            </template>
+                          </Dialog>
+                        </div>
+                        <div class="card">
+                          <div class="card-header">Gambar Resit</div>
+                          <div
+                            class="
+                              card-body
+                              d-flex
+                              overflow-x-auto
+                              align-items-center
+                            "
+                          >
+                            <div
+                              class="m-2"
+                              v-for="receipt in list.status_payment_cawangan
+                                .file_resit"
+                              v-bind:key="receipt"
+                            >
+                              <div class="row text-center">
+                                <receipt-image
+                                  v-bind:fileResitId="receipt.id"
+                                ></receipt-image>
+                                <div>{{ receipt.masa_upload }}</div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                   <div class="overflow-x-auto">
                     <table
                       ref="content"
@@ -104,7 +264,6 @@
                           <td>Bil</td>
                           <td style="min-width: 180px">No Rujukan</td>
                           <td style="min-width: 180px">Harga Bidaan</td>
-                          <td style="min-width: 220px">Status Bayaran</td>
                         </tr>
                         <tr v-for="(data, index) in list.sag" :key="data">
                           <td>{{ index + 1 }}</td>
@@ -126,35 +285,6 @@
                                 .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                             }}
                           </td>
-                          <td
-                            v-if="
-                              data.status_payment === null ||
-                              data.status_payment == 0
-                            "
-                          >
-                            <Tag
-                              value="Belum Bayar"
-                              icon="pi pi-times"
-                              class="p-tag-rounded"
-                              severity="danger"
-                            ></Tag>
-                          </td>
-                          <td v-if="data.status_payment === 2">
-                            <Tag
-                              value="Tunggu Pengesahan"
-                              icon="pi pi-stopwatch"
-                              class="p-tag-rounded"
-                              severity="warning"
-                            ></Tag>
-                          </td>
-                          <td v-if="data.status_payment === 1">
-                            <Tag
-                              value="Selesai"
-                              icon="pi pi-check"
-                              class="p-tag-rounded"
-                              severity="success"
-                            ></Tag>
-                          </td>
                         </tr>
                         <tr style="text-transform: uppercase">
                           <td colspan="2">Jumlah</td>
@@ -165,7 +295,6 @@
                                 .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                             }}
                           </td>
-                          <td class="table-light"></td>
                         </tr>
                       </tbody>
                     </table>
@@ -390,13 +519,19 @@ import html2canvas from "html2canvas";
 import VueHtml2pdf from "vue-html2pdf";
 import axios from "axios";
 import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
+import ReceiptImage from "../pay/ReceiptImage.vue";
+import { required, integer, between } from "@vuelidate/validators";
+import useVuelidate from "@vuelidate/core";
 
 export default {
   components: {
     "item-master-image-modal": ItemMasterImageModal,
+    "receipt-image": ReceiptImage,
   },
   data() {
     return {
+      v$: useVuelidate(),
+      isLoadingButton: false,
       lists: [],
       tarikhLelong: "",
       loading: false,
@@ -409,6 +544,19 @@ export default {
       isDisplay: false,
       suratHak: "",
       isSuccessHak: false,
+      isDisplayFileUpload: false,
+      fileSize: 0,
+      formResit: {
+        user_id: localStorage.getItem("id"),
+        lelong_id: this.$route.params.lelongId,
+        gambarResit: "",
+        kodcaw: "",
+      },
+    };
+  },
+  validations() {
+    return {
+      fileSize: { required, integer, betweenValue: between(1, 2200000) },
     };
   },
   created() {
@@ -464,6 +612,72 @@ export default {
       this.theData = value;
       this.reloadImageComponent += 1;
     },
+    selectPhoto(e) {
+      console.log(e.target.files[0].size);
+      this.fileSize = e.target.files[0].size;
+      this.formResit.gambarResit = e.target.files[0];
+    },
+    addPhotoResit() {
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        this.isLoadingButton = true;
+        var resitFormData = new FormData();
+        resitFormData.append("gambarResit", this.formResit.gambarResit);
+        resitFormData.append("lelong_id", this.formResit.lelong_id);
+        resitFormData.append("user_id", this.formResit.user_id);
+        resitFormData.append("kodcaw", this.formResit.kodcaw);
+        console.log(this.formResit);
+        axios
+          .post("/addPhotoResit", resitFormData, {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          })
+          .then((response) => {
+            this.isLoadingButton = false;
+            this.fileSize = 0;
+            this.liveData();
+            this.isDisplayFileUpload = false;
+            if (response.data.success == true) {
+              this.$swal.fire({
+                icon: "success",
+                title: "Gambar Resit Berjaya Di Muat Naik",
+                confirmButtonColor: "#344871",
+                confirmButtonText: "OK",
+                allowOutsideClick: false,
+                allowEscapeKey: false,
+              });
+              this.componentKey += 1;
+            } else if (response.data.success == false) {
+              this.isLoadingButton = false;
+              console.log(response);
+              this.$swal.fire({
+                toast: true,
+                icon: "error",
+                title: "Gagal! Sila refresh page semula.",
+                animation: false,
+                position: "bottom",
+                showConfirmButton: false,
+                timer: 5000,
+                timerProgressBar: true,
+              });
+              this.componentKey += 1;
+            }
+          })
+          .catch((error) => {
+            alert(error);
+            this.isLoadingButton = false;
+          });
+      }
+    },
+    openModalFileUpload(e) {
+      this.isDisplayFileUpload = true;
+      this.formResit.kodcaw = e;
+    },
+    closeModalFileUpload() {
+      this.isDisplayFileUpload = false;
+      this.formResit.kodcaw = "";
+    },
     downloadPdf(value) {
       axios
         .get("/resultInCawangan", {
diff --git a/src/main.js b/src/main.js
index 8c3db0f..b56a941 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import Master from './Master.vue'
 import router from './router'
-import store from './store'
 // import useVuelidate from '@vuelidate/core'
 import './interceptors/axios'
 import "bootstrap/dist/css/bootstrap.css"
@@ -56,6 +55,11 @@ import YouTube from "vue3-youtube";
 import 'viewerjs/dist/viewer.css';
 import VueViewer from 'v-viewer';
 
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
 import TheTemplate from './components/layouts/TheTemplate.vue'
 import BaseCard from './components/base/BaseCard.vue'
 import TermsAndConditions from './components/authentication/TermsAndConditions.vue'
@@ -102,7 +106,7 @@ app.component('MazPhoneNumberInput', MazPhoneNumberInput)
 
 app.component('YouTube', YouTube)
 
-app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
+app.use(router).use(pinia).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
 // app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');
 
 // createApp(App).use(router).use(store).mount('#app')
diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
deleted file mode 100644
index e2e8ce1..0000000
--- a/src/store/modules/auth.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const state = {
-    token:String,
-};
-
-const getters = {};
-
-const actions = {
-    fetchProfile() {
-        this.state.token = localStorage.getItem("token");
-    },
-};
-
-const mutations = {};
-
-export default {
-    state,
-    getters,
-    actions,
-    mutations
-}
\ No newline at end of file
diff --git a/src/store/modules/authentication.js b/src/store/modules/authentication.js
new file mode 100644
index 0000000..ea4cd16
--- /dev/null
+++ b/src/store/modules/authentication.js
@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+
+export const useAuthenticationUserStore = defineStore('authenticationUser', {
+    state: () => ({
+        token: "",
+        id: "",
+        nokp: "",
+        name: "",
+        email: "",
+        notelbimbit: "",
+        username: ""
+    }),
+    getters: {
+        getToken() {
+            return this.token;
+        },
+        getId() {
+            return this.id;
+        },
+        getNokp() {
+            return this.nokp;
+        },
+        getName() {
+            return this.name;
+        },
+        getEmail() {
+            return this.email;
+        },
+        getNoTelBimbit() {
+            return this.notelbimbit;
+        },
+        getUsername() {
+            return this.username;
+        },
+    },
+    actions: {
+    },
+    persist: true,
+})
\ No newline at end of file
diff --git a/src/store/modules/cart.js b/src/store/modules/cart.js
deleted file mode 100644
index 284a8d7..0000000
--- a/src/store/modules/cart.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import axios from 'axios';
-
-const state = {
-    carts: [],
-};
-
-const getters = {
-    allCarts: state => state.carts,
-};
-
-const actions = {
-    async fetchCarts({ commit }) {
-        const response = await axios.get("/cart/" + localStorage.getItem("id"));
-
-        // console.log(response.data);
-        commit('setCarts', response.data);
-
-    },
-};
-
-const mutations = {
-    setCarts: (state, carts) => (state.carts = carts),
-   
-};
-
-export default {
-    state,
-    getters,
-    actions,
-    mutations
-}
diff --git a/src/store/modules/lelongId.js b/src/store/modules/lelongId.js
deleted file mode 100644
index d804beb..0000000
--- a/src/store/modules/lelongId.js
+++ /dev/null
@@ -1,34 +0,0 @@
-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