Merge branch 'remote-aros' of https://gitlab.com/erahn/lelong-web-pembida into finadev

package.json

@@ -21,15 +21,19 @@
     "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",
     "primevue": "^3.17.0",
-    "vue": "^3.2.45",
+    "v-viewer": "^1.6.4",
+    "vue": "^3.2.13",
+    "vue-html2pdf": "^1.8.0",
     "vue-router": "^4.0.14",
     "vue-sidebar-menu-akahon": "^0.1.4",
     "vue-sweetalert2": "^5.0.5",
-    "vuex": "^4.0.2"
+    "vue3-youtube": "^0.1.9"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",

public/themes/lara-light-blue/theme.css

@@ -5720,3 +5720,48 @@
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
   box-shadow: inset 0 -2px 0 0 #3B82F6;
 }
+
+.bounce-up-down {
+  animation: bounce 0.5s;
+  animation-direction: alternate;
+  animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
+  animation-iteration-count: infinite;
+}
+
+@keyframes bounce {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(0, 25px, 0px);
+  }
+}
+
+.style-info {
+  background: #e4f8f0;
+  border: solid #1ea97c;
+  border-width: 0.1px;
+  color: #1ea97c;
+  font-size: 1rem;
+  align-items: center;
+  display: flex;
+  padding: 0.4rem 0.9rem;
+  margin: 0;
+  border-radius: 6px;
+  font-weight: 700;
+}
+
+.blink {
+  animation: blinker 1s linear infinite;
+}
+
+@keyframes blinker {
+  80% {
+    opacity: 0;
+  }
+}
+
+.button-custom {
+  height: 20px;
+  width: 10px !important;
+}

src/components/authentication/TheLogin.vue

@@ -103,8 +103,13 @@
               iconPos="right"
             ></Button>
           </div>
-          <div class="flex justify-content-center mt-4">
+          <div class="flex alin justify-content-center mt-4">
-            <terms-and-conditions></terms-and-conditions>
+            <div class="btn btn-warning btn-sm mr-4">
+              <terms-and-conditions></terms-and-conditions>
+            </div>
+            <a class="btn btn-info btn-sm" href="https://lelong.arrahn.com.my"
+              >Pautan Sistem Lelong</a
+            >
           </div>
         </div>
       </form>
@@ -116,6 +121,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",
@@ -129,6 +135,10 @@ export default {
       isLoading: false,
     };
   },
+  setup() {
+    const authenticationStore = useAuthenticationUserStore()
+    return { authenticationStore }
+  },
   methods: {
     doLogin() {
       this.v$.$validate();
@@ -137,6 +147,7 @@ export default {
         axios
           .post("/user/login", this.form)
           .then((response) => {
+            // console.log("doLogin", response);
             if (response.data.statusAkaun == 1) {
               localStorage.setItem("token", response.data.token);
               localStorage.setItem("id", response.data.user.id);
@@ -148,6 +159,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({
@@ -156,7 +176,6 @@ export default {
                 detail: "Tiada akaun dalam database. Sila daftar sekarang.",
                 life: 10000,
               });
-              console.log(response, "status 0");
             } else if (response.data.statusAkaun == 2) {
               this.$toast.add({
                 severity: "error",
@@ -165,7 +184,6 @@ export default {
                   "Akaun anda telah dibanned. Sila hubungi pihak pengurusan untuk maklumat lebih lanjut.",
                 life: 10000,
               });
-              console.log(response, "status 2");
             } else if (response.data.statusAkaun == 3) {
               this.$toast.add({
                 severity: "error",
@@ -174,7 +192,6 @@ export default {
                   "Account rejected. Please contact administrator for further information.",
                 life: 10000,
               });
-              console.log(response, "status 3");
             } else if (response.data.statusAkaun == 4) {
               this.$toast.add({
                 severity: "info",
@@ -182,7 +199,6 @@ export default {
                 detail: "Registration in progress,status wait for approval",
                 life: 10000,
               });
-              console.log(response, "status 4");
             } else if (response.data.statusAkaun == 5) {
               this.$toast.add({
                 severity: "error",
@@ -191,6 +207,14 @@ export default {
                 life: 10000,
               });
               console.log(response);
+            } else if (response.data.statusAkaun == 6) {
+              this.$toast.add({
+                severity: "warn",
+                summary: "Akaun ini didaftar menggunakan id staff.",
+                detail:
+                  "Sila log masuk menggunakan url https://adminbid.arrahn.com.my ",
+                life: 10000,
+              });
             }
             this.isLoading = false;
           })

src/components/authentication/TheRegister.vue

@@ -253,7 +253,14 @@
           </div>
           <div class="col-12 text-center">
             <Button
-              class="p-button-sm"
+              class="p-button-sm p-button-outlined m-1"
+              icon="pi pi-times"
+              iconPos="right"
+              label="Batal Pendaftaran"
+              @click="toLogin()"
+            />
+            <Button
+              class="p-button-sm m-1"
               label="Teruskan"
               icon="pi pi-sign-in"
               iconPos="right"
@@ -307,6 +314,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",
@@ -346,6 +354,10 @@ export default {
       },
     };
   },
+  setup() {
+    const authenticationStore = useAuthenticationUserStore()
+    return { authenticationStore }
+  },
   methods: {
     doRegister() {
       this.v$.$validate();
@@ -366,6 +378,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) {
@@ -409,14 +430,20 @@ export default {
     closeModalTNC() {
       this.isDisplayTNC = false;
     },
-    readImage() {},
+    toLogin() {
+      this.$router.push({ name: "login" });
+    },
   },
   validations() {
     return {
       form: {
         name: { required },
         username: { required },
-        nokp: { required, minLengthValue: minLength(12), maxLengthValue: maxLength(12) },
+        nokp: {
+          required,
+          minLengthValue: minLength(12),
+          maxLengthValue: maxLength(12),
+        },
         password: { required, minLengthValue: minLength(8) },
         email: { required, email },
         notelbimbit: { required, minLengthValue: minLength(8) },

src/components/bid-record/BidRecordList.vue

@@ -14,7 +14,10 @@
       <div class="col-12 lg:col-11">
         <Card>
           <template #title>
-            <div class="font-normal">Rekod Bidaan Hari Ini : {{ date }}</div>
+            <div class="grid justify-content-between">
+              <div class="font-normal">Rekod Bidaan Hari Ini : <span class="white-space-nowrap">{{ date }}</span></div>
+              <div class="text-xs align-self-center fst-italic fw-lighter text-danger">*Sistem akan menjana pemenang setelah masa bidaan tamat pada {{lelongDetail.masatamat_lelong}}</div>
+            </div>
           </template>
           <template #content>
             <Accordion :multiple="true">
@@ -234,7 +237,7 @@ import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
 export default {
   name: "BidDetail",
   components: {
-    "item-master-image-modal": ItemMasterImageModal
+    "item-master-image-modal": ItemMasterImageModal,
   },
   data() {
     return {
@@ -243,6 +246,7 @@ export default {
       isSuccess: false,
       theData: "",
       date: "",
+      lelongDetail: "",
       reloadImageComponent: 0,
       // userId: localStorage.getItem("id"),
     };
@@ -275,6 +279,7 @@ export default {
             this.isLoading = false;
             this.isSuccess = true;
             this.listBid = response.data.lelongbidder;
+            this.lelongDetail = response.data.lelong;
           } else {
             this.isLoading = false;
             this.isSuccess = false;
@@ -297,18 +302,4 @@ export default {
 .container-height {
   min-height: 70vh;
 }
-
-.style-info {
-  background: #e4f8f0;
-  border: solid #1ea97c;
-  border-width: 0px;
-  color: #1ea97c;
-  font-size: 1rem;
-  align-items: center;
-  display: flex;
-  padding: 0.4rem 0.9rem;
-  margin: 0;
-  border-radius: 6px;
-  font-weight: 400;
-}
 </style>

src/components/bid-record/TheBidRecord.vue

@@ -1,22 +1,5 @@
 <template>
   <the-template>
-    <!-- <div class="container">
-      <div class="row justify-content-center">
-        <div class="col-10">
-          <h2>Rekod Bidaan Hari Ini : {{ date }}</h2>
-          <button
-            v-on:click="reloadComponent()"
-            class="badge btn-secondary m-2"
-          >
-            Reload <i class="bi bi-arrow-clockwise"></i>
-          </button>
-
-          <base-card>
-            <bid-record-list v-bind:key="statusComponent"></bid-record-list>
-          </base-card>
-        </div>
-      </div>
-    </div> -->
     <bid-record-list v-bind:key="statusComponent"></bid-record-list>
   </the-template>
 </template>

src/components/cart/CartListNew.vue

@@ -145,6 +145,17 @@
               class="p-button-sm w-full"
               v-on:click="openModalNew()"
             />
+            <div class="bounce-up-down">
+              <div class="info-teruskan-icon">
+                <i
+                  class="pi pi-arrow-circle-up text-3xl"
+                  style="color: #ff5757"
+                ></i>
+              </div>
+              <div class="info-teruskan">
+                Sila klik 'Teruskan' jika pasti untuk meneruskan bidaan ini.
+              </div>
+            </div>
           </template>
         </Card>
       </div>
@@ -274,7 +285,7 @@
                   </div>
                 </div>
                 <Button
-                  icon="pi pi-delete-left"
+                  icon="pi pi-trash"
                   label="Padam Surat"
                   data-bs-toggle="modal"
                   iconPos="right"
@@ -404,15 +415,13 @@
           </div>
           <div class="modal-footer">
             <Button
-              class="p-button-sm p-button-text"
+              class="p-button-sm p-button-danger m-1"
               label="Batal"
-              icon="pi pi-times"
-              iconPos="right"
               data-bs-dismiss="modal"
             />
             <Button
-              class="p-button-sm"
+              class="p-button-sm p-button-success m-1"
-              icon="pi pi-check"
+              icon="pi pi-file-edit"
               iconPos="right"
               label="Ubah"
               :loading="isLoadingUbah"
@@ -475,13 +484,13 @@
           </div>
           <div class="modal-footer">
             <Button
-              class="p-button-sm mr-2"
+              class="p-button-sm p-button-danger mr-2"
               label="Batal"
               data-bs-dismiss="modal"
             />
             <Button
-              class="p-button-sm p-button-outlined"
+              class="p-button-sm p-button-success"
-              icon="pi pi-times"
+              icon="pi pi-trash"
               iconPos="right"
               label="Padam"
               :loading="isLoadingPadam"
@@ -938,17 +947,24 @@ export default {
   min-height: 70vh;
 }
 
-.style-info {
+.info-teruskan {
-  background: #e4f8f0;
+  background: #ffe7e6;
-  border: solid #1ea97c;
+  border: solid #ff5757;
   border-width: 0px;
-  color: #1ea97c;
+  color: #ff5757;
-  font-size: 1rem;
-  align-items: center;
-  display: flex;
   padding: 0.4rem 0.9rem;
-  margin: 0;
   border-radius: 6px;
-  font-weight: 400;
+  text-align: center;
+}
+
+.info-teruskan-icon {
+  display: flex;
+  justify-content: center;
+  padding: 0.4rem 0.9rem 0 0.9rem;
+  margin-bottom: 15px;
+}
+
+.icon-color {
+  color: #ff5757;
 }
 </style>

src/components/cart/TheCart.vue

@@ -25,6 +25,14 @@ export default {
       componentKey: 0,
     };
   },
+  mounted: function () {
+    if (localStorage.getItem("reloaded")) {
+      localStorage.removeItem("reloaded");
+    } else {
+      localStorage.setItem("reloaded", "1");
+      location.reload();
+    }
+  },
   methods: {
     toggleReloadComponent() {
       this.componentKey += 1;

src/components/home/ItemInCartNotification.vue

@@ -0,0 +1,61 @@
+<template>
+  <div v-if="isSuccessCart" class="p-message p-component p-message-error" role="alert">
+    <div class="p-message-wrapper">
+      <span class="blink p-message-icon pi pi pi-info-circle"></span>
+      <div class="p-message-text">
+        <div class="font-bold">
+            {{itemInCart}} surat dalam Troli anda.
+          Sila ke<a class="ml-1 text-blue" @click="toCart()" href="#">
+            <span class="underline">Troli</span>
+          </a>
+          dan klik "Teruskan" bagi meneruskan bidaan anda.
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      isSuccessCart: false,
+      itemInCart: 0,
+    };
+  },
+  mounted: function () {
+    this.getItemInCart();
+  },
+  methods: {
+    toCart() {
+      this.$router.push({ name: "cart" });
+    },
+    getItemInCart() {
+      axios
+        .get("/itemInCart", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            user_id: localStorage.getItem("id"),
+          },
+        })
+
+        .then((response) => {
+        //   console.log("getItemInCart", response);
+          if (response.data.success === true) {
+            this.isSuccessCart = true;
+            this.itemInCart = response.data.cart;
+          } else {
+            this.isSuccessCart = false;
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>

src/components/home/LelongNextDetail.vue

@@ -15,7 +15,7 @@
         <tbody>
           <tr class="table-light">
             <th>Bil</th>
-            <th style="min-width: 200px">Cawangan</th>
+            <th style="min-width: 200px">Cawangan Ar-Rahn</th>
             <th style="min-width: 120px" class="text-center">Tarikh</th>
           </tr>
           <tr v-for="(data, index) in response" :key="data.id">
@@ -29,7 +29,7 @@
         <tbody>
           <tr class="table-light">
             <td>Bil</td>
-            <td>Cawangan</td>
+            <td>Cawangan Ar-Rahn</td>
             <td>Tarikh</td>
           </tr>
           <tr>

src/components/home/LelongToday.vue

@@ -1,8 +1,8 @@
 <template>
   <Card style="margin-bottom: 1em">
     <template #title>
-      <div class="flex justify-content-center flex-wrap card-container">
+      <div class="flex justify-content-between flex-wrap card-container">
-        <div class="font-semibold">Lelongan Hari Ini : <span>{{ date }}</span></div>
+        <div class="font-semibold">Lelongan Hari Ini : <span class="white-space-nowrap">{{ date }}</span></div>
         <Button
           class="button-standard p-button-rounded p-button-outlined"
           icon="pi pi-refresh"

src/components/home/LelongTodayDetail.vue

@@ -13,7 +13,7 @@
           <tbody>
             <tr class="table-light">
               <th>Bil</th>
-              <th style="min-width: 200px">Cawangan</th>
+              <th style="min-width: 200px">Cawangan Ar-Rahn</th>
               <th style="min-width: 120px" class="text-center">Masa Mula</th>
               <th style="min-width: 120px" class="text-center">Masa Tamat</th>
             </tr>
@@ -33,7 +33,7 @@
         <tbody>
           <tr class="table-light">
             <td>Bil</td>
-            <td>Cawangan</td>
+            <td>Cawangan Ar-Rahn</td>
             <td>Masa Mula</td>
             <td>Masa Tamat</td>
           </tr>
@@ -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,11 +72,11 @@ export default {
       axios
         .get("/listcawlelongtoday", {
           headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
+            Authorization: "Bearer " + this.authenticationStore.getToken,
           },
         })
         .then((response) => {
-          console.log("liveData", response);
+          // console.log("liveData", response);
           if (response.data.success == true) {
             this.responseData = true;
             this.response = response.data.lelong;

src/components/home/ResultNotification.vue

@@ -11,7 +11,6 @@
       </Message>
     </div>
   </div>
-  <div v-else></div>
 </template>
 
 <script>

src/components/home/TheHome.vue

@@ -4,7 +4,10 @@
       <div class="col-12 pt-2">
         <result-notification></result-notification>
       </div>
-      <div class="col-12 lg:col-12">
+      <div class="col-12">
+        <item-in-cart-notification></item-in-cart-notification>
+      </div>
+      <div class="col-12 lg:col-7">
         <lelong-today></lelong-today>
         <lelong-next></lelong-next>
         <current-karat></current-karat>
@@ -18,6 +21,7 @@ import LelongToday from "./LelongToday.vue";
 import LelongNext from "./LelongNext.vue";
 import CurrentKarat from "./CurrentKarat.vue";
 import ResultNotification from "./ResultNotification.vue";
+import ItemInCartNotification from "./ItemInCartNotification.vue";
 
 export default {
   components: {
@@ -25,6 +29,7 @@ export default {
     "lelong-next": LelongNext,
     "current-karat": CurrentKarat,
     "result-notification": ResultNotification,
+    "item-in-cart-notification": ItemInCartNotification,
   },
 };
 </script>

src/components/layouts/TheHeader.vue

@@ -265,6 +265,11 @@ export default {
       lelongOnline: "",
     };
   },
+  setup() {
+    const authenticationStore = useAuthenticationUserStore()
+
+    return { authenticationStore }
+  },
   mounted: function () {
     this.getLelongOnline();
   },
@@ -282,11 +287,14 @@ export default {
         )
         .then((response) => {
           localStorage.clear();
+          this.authenticationStore.$reset();
           this.$router.push({ name: "login" });
         })
         .catch((error) => {
           console.log(error);
         });
+      localStorage.clear();
+      this.$router.push({ name: "login" });
     },
     toHome() {
       this.$router.push({ name: "home" });

src/components/list/ItemMasterImage.vue

@@ -1,7 +1,5 @@
 <template>
-  <div v-if="isLoading" class="spinner-border" role="status">
+  <Skeleton v-if="isLoading" height="10rem" width="20rem"></Skeleton>
-    <span class="visually-hidden">Loading...</span>
-  </div>
   <Image v-else :src="dataUrl" alt="Gambar Marhun" width="250" preview>
     <template #indicator> Lihat Gambar </template>
   </Image>

src/components/list/ListItem.vue

@@ -89,7 +89,7 @@
             container-height
           "
         >
-          <div class="grid justify-content-center">
+          <div class="grid bounce-up-down justify-content-center">
             <div class="col-12 mb-4 text-center">
               <i class="pi pi-arrow-up text-8xl text-400"></i>
             </div>
@@ -459,16 +459,14 @@
             Tambah Ke Troli
           </button> -->
           <Button
-            class="p-button-sm p-button-text"
+            class="p-button-sm p-button-danger m-1"
             label="Kembali"
             data-bs-dismiss="modal"
-            icon="pi pi-times"
-            iconPos="right"
           />
           <Button
-            class="p-button-sm"
+            class="p-button-sm p-button-success m-1"
             label="Tambah Ke Troli"
-            icon="pi pi-check"
+            icon="pi pi-plus-circle"
             iconPos="right"
             :loading="isLoadingButton"
             @click="addToCart()"
@@ -484,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";
@@ -543,7 +540,6 @@ export default {
     dataUrl() {
       // return "data:image/jpeg;base64," + this.image;
     },
-    ...mapGetters(["allCarts"]),
   },
   mounted: function () {
     this.liveData();

src/components/list/TheList.vue

@@ -21,6 +21,7 @@
     >
       <div v-if="isSuccess">
         <div class="row">
+          <div class="font-normal header-title">Senarai Barangan Lelongan</div>
           <div class="input-group mb-3">
             <span class="input-group-text" id="basic-addon3">Cawangan</span>
             <select class="form-select" @change="pilihCawangan($event)">
@@ -133,4 +134,10 @@ export default {
 .container-height {
   min-height: 70vh;
 }
+
+.header-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
 </style>

src/components/pay/ListReceipt.vue

@@ -0,0 +1,181 @@
+<template>
+  <div v-if="isLoading" class="fadein animation-duration-400">
+    <div
+      class="flex align-items-center justify-content-center container-height"
+    >
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  </div>
+  <div v-else class="fadein animation-duration-400">
+    <div v-if="isSuccess">
+      <div class="p-message p-component p-message-info" role="alert">
+        <div class="p-message-wrapper">
+          <span class="blink p-message-icon pi pi pi-info-circle"></span>
+          <div class="p-message-text">
+            Gambar sedang disemak oleh bahagian pengurusan. Sila tunggu sebentar.
+          </div>
+        </div>
+      </div>
+      <div class="overflow-x-auto">
+        <table class="table table-bordered text-center table-hover">
+          <tbody>
+            <tr>
+              <th>#</th>
+              <th>ID Gambar</th>
+              <th>Masa Muat Naik</th>
+              <th>Gambar</th>
+              <th>Tindakan</th>
+            </tr>
+            <tr v-for="(receipt, index) in listReceipts" v-bind:key="receipt">
+              <td>{{ index + 1 }}</td>
+              <td>{{ receipt.id }}</td>
+              <td>{{ receipt.masa_upload }}</td>
+              <td>
+                <receipt-image v-bind:fileResitId="receipt.id"></receipt-image>
+              </td>
+              <td>
+                <button
+                  class="btn m-1 btn-danger"
+                  @click="openPhotoModal(receipt)"
+                >
+                  Padam
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <Dialog
+        header="Padam Gambar"
+        v-model:visible="isDisplayPhoto"
+        :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+        :style="{ width: '50vw' }"
+        :modal="true"
+      >
+        <div class="text-center m-2">
+          <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
+          <h5>ADAKAH ANDA PASTI UNTUK PADAM GAMBAR INI?</h5>
+          ID Gambar: {{ selectPhoto.id }}
+          <p class="text-danger text-sm mt-3">
+            <i>*Tindakan ini tidak dapat dikembalikan</i>
+          </p>
+        </div>
+        <template #footer>
+          <Button
+            class="p-button-sm p-button-secondary"
+            label="Batal"
+            @click="closePhotoModal()"
+          />
+          <Button
+            class="p-button-sm p-button-danger"
+            label="Padam"
+            @click="deletePhotoResit(selectPhoto)"
+          />
+        </template>
+      </Dialog>
+    </div>
+    <div v-else>Tiada Gambar Yang Dimuat Naik</div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import ReceiptImage from "./ReceiptImage.vue";
+
+export default {
+  emits: ["reloadComponent"],
+  props: {
+      lelong_id: "",
+  },
+  mounted: function () {
+    this.listReceipt();
+    // this.getInvoice();
+  },
+  components: {
+    "receipt-image": ReceiptImage,
+  },
+  data() {
+    return {
+      isLoading: false,
+      isSuccess: false,
+      listReceipts: "",
+      isDisplayPhoto: false,
+      selectPhoto: "",
+      fileresit_id: "",
+    };
+  },
+  methods: {
+    listReceipt() {
+      this.isLoading = true;
+      axios
+        .get("/listPhotoResit", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            user_id: localStorage.getItem("id"),
+            lelong_id: this.lelong_id,
+          },
+        })
+        .then((response) => {
+          //   console.log("listReceipt", response);
+          this.isLoading = false;
+          if (response.data.success == true) {
+            this.isSuccess = true;
+            this.listReceipts = response.data.file_resit;
+          } else {
+            this.isSuccess = false;
+          }
+        })
+        .catch((error) => {
+          this.isLoading = false;
+          console.log(error);
+        });
+    },
+    openPhotoModal(value) {
+      this.isDisplayPhoto = true;
+      this.selectPhoto = value;
+      this.fileresit_id = value.id;
+    },
+    closePhotoModal() {
+      this.isDisplayPhoto = false;
+      this.selectPhoto = "";
+      this.fileresit_id = "";
+    },
+    deletePhotoResit(e) {
+      axios
+        .post(
+          "/deletePhotoResit",
+          { fileresit_id: this.fileresit_id },
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          }
+        )
+        .then((response) => {
+          if (response.data.success == true) {
+            this.isDisplayPhoto = false;
+            this.$swal.fire({
+              icon: "success",
+              title: "Gambar Resit Berjaya Dipadam",
+              confirmButtonColor: "#344871",
+              confirmButtonText: "OK",
+              allowOutsideClick: false,
+              allowEscapeKey: false,
+            });
+            this.$emit("reloadComponent");
+          } else {
+            console.log(response);
+          }
+        })
+        .catch((error) => {
+          this.isLoading = false;
+          console.log(error);
+        });
+    },
+  },
+};
+</script>

src/components/pay/ReceiptImage.vue

@@ -0,0 +1,55 @@
+<template>
+  <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="100" preview>
+    <template #indicator> Lihat Gambar </template>
+  </Image>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  props: {
+    fileResitId: "",
+  },
+  data() {
+    return {
+      image: "",
+      isLoading: false,
+      componentKey: 0,
+    };
+  },
+  computed: {
+    dataUrl() {
+      return "data:image/png;base64, " + this.image;
+    },
+  },
+  mounted: function () {
+    this.showPhotoResit();
+  },
+  methods: {
+    showPhotoResit() {
+      this.isLoading = true;
+      axios
+        .get("/showPhotoResit", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            fileresit_id: this.fileResitId,
+          },
+        })
+        .then((response) => {
+          this.isLoading = false;
+          this.image = response.data;
+        })
+        .catch((error) => {
+          console.log(error);
+          this.isLoading = false;
+        });
+    },
+  },
+};
+</script>

src/components/pay/SelectOutlet.vue

@@ -47,7 +47,7 @@
           <div class="col-12 md:col-5">
             <Button
               label="Batal Pembayaran"
-              class="p-button-text p-button-sm"
+              class="p-button-danger p-button-sm"
               v-on:click="clickCancelButton()"
             />
           </div>
@@ -55,7 +55,7 @@
           <div class="col-12 md:col-5 md:text-right">
             <Button
               label="Bayar Bidaan Cawangan Ini"
-              class="p-button-sm"
+              class="p-button-sm p-button-success"
               @click="openModal(data)"
             />
           </div>
@@ -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' }"
@@ -136,14 +136,19 @@
     </template>
   </Dialog>
   <Dialog
-    header="Terma & Syarat"
+    header="Makluman"
     v-model:visible="isDisplayTNC"
     :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
     :style="{ width: '50vw' }"
     :modal="true"
   >
-    <div>
+    <div class="text-center m-2">
-      <terms-and-conditions-details></terms-and-conditions-details>
+      <!-- <terms-and-conditions-details></terms-and-conditions-details> -->
+      <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
+      <h6 class="text-danger">
+        Pembida berjaya hendaklah menyelesaikan keseluruhan amaun bidaan dan
+        mengambil marhun pada/sebelum jam 4.00 petang.
+      </h6>
     </div>
     <template #footer>
       <Button
@@ -169,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: {
@@ -190,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"),
@@ -222,9 +302,16 @@ export default {
         //   },
         // ],
         sag: "",
+        kodcaw: "",
+        gambarResit: "",
       },
     };
   },
+  validations() {
+    return {
+      fileSize: { required, integer, betweenValue: between(1, 2200000) },
+    };
+  },
   mounted() {
     this.getInvoice();
   },
@@ -260,12 +347,14 @@ export default {
       var date = new Date();
       var current_time = date.toLocaleString();
       var limit_masa_bayaran = "15:00:00";
-      var limit_datetime_bayaran = this.lelongDetails.tarikh_lelong + ", " + limit_masa_bayaran;
+      var limit_datetime_bayaran =
-      console.log(current_time, '\n', limit_datetime_bayaran);
+        this.lelongDetails.tarikh_lelong + ", " + limit_masa_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;
@@ -290,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;
@@ -299,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;

src/components/pay/ThePay.vue

@@ -13,7 +13,22 @@
       <div v-if="isSuccess">
         <Card>
           <template #title>
-            <div class="font-normal">Pembayaran Bidaan</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;
     },

src/components/pay/ThePayCdm.vue

@@ -0,0 +1,285 @@
+<template>
+  <the-template>
+    <div v-if="isLoading" class="fadein animation-duration-400">
+      <div
+        class="flex align-items-center justify-content-center container-height"
+      >
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
+    </div>
+    <div v-else class="fadein animation-duration-400">
+      <div v-if="isSuccess">
+        <Card>
+          <template #title>
+            <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()"
+              />
+              <div class="font-normal">Pembayaran Bidaan Menggunakan CDM</div>
+            </div>
+            <div class="font-normal text-base">
+              Tarikh Lelong : {{ tarikhLelong }}
+            </div>
+          </template>
+          <template #content>
+            <!-- <select-outlet
+              v-bind:namaCawangan="lists"
+              v-bind:lelongIdProps="lelongId"
+            ></select-outlet> -->
+            <div class="font-medium p-0">No Account Bank: 10291029109209</div>
+            <span class="text-xs fst-italic text-danger">
+              *Sila buat bayaran menggunakan nombor akaun ini sahaja dan muat
+              naik gambar resit dibawah.</span
+            >
+
+            <div class="overflow-x-auto">
+              <table class="mt-5 table text-center table-bordered">
+                <tbody>
+                  <tr class="table-light">
+                    <td>Bil</td>
+                    <td style="min-width: 240px">Cawangan</td>
+                    <td style="min-width: 120px">Jumlah Harga Bida</td>
+                  </tr>
+                  <tr>
+                    <td>*</td>
+                    <td>KOTA BHARU 2</td>
+                    <td>RMXXXX</td>
+                  </tr>
+                  <tr>
+                    <td>*</td>
+                    <td>WAKAF BHARU</td>
+                    <td>RMXXXX</td>
+                  </tr>
+                  <tr class="uppercase text-danger">
+                    <th colspan="2">Amaun yang perlu di bank-in</th>
+                    <th>RMXXXXX</th>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <Button
+              class="p-button-sm mb-3"
+              label="Muat Naik Resit"
+              icon="pi pi-plus-circle"
+              iconPos="right"
+              @click="openModalFileUpload()"
+            />
+            <list-receipt
+              v-bind:key="componentKey"
+              v-bind:lelong_id="lelongId"
+              v-on:reloadComponent="toggleReloadComponent"
+            ></list-receipt>
+
+            <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/*" 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-secondary"
+                  label="Kembali"
+                  @click="closeModalFileUpload()"
+                />
+                <Button
+                  class="p-button-sm p-button-success"
+                  label="Simpan"
+                  icon="pi pi-check"
+                  iconPos="right"
+                  @click="addPhotoResit()"
+                />
+              </template>
+            </Dialog>
+          </template>
+        </Card>
+      </div>
+      <div v-else>
+        <div
+          class="
+            flex
+            align-items-center
+            justify-content-center
+            container-height
+          "
+        >
+          <div class="grid justify-content-center">
+            <div class="col-12 mb-4 text-center">
+              <i class="pi pi-book text-8xl text-400"></i>
+            </div>
+            <div class="col-12 text-center">
+              <span class="text-400">Tiada Data.</span>
+            </div>
+            <div class="col-12 text-center">
+              <span class="text-400"
+                >Sila rujuk halaman
+                <router-link v-bind:to="{ name: 'result' }"
+                  >Keputusan</router-link
+                >
+                untuk maklumat rekod bidaan menang.</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </the-template>
+</template>
+
+<script>
+import axios from "axios";
+import ListReceipt from "./ListReceipt.vue";
+
+export default {
+  components: {
+    "list-receipt": ListReceipt,
+  },
+  data() {
+    return {
+      lists: [],
+      tarikhLelong: "",
+      lelongId: "",
+      isLoading: false,
+      isSuccess: false,
+      isDisplayFileUpload: false,
+      componentKey: 0,
+      formResit: {
+        user_id: localStorage.getItem("id"),
+        lelong_id: this.$route.params.lelongId,
+        gambarResit: "",
+      },
+    };
+  },
+  created() {
+    this.lelongId = this.$route.params.lelongId;
+  },
+  mounted: function () {
+    this.liveData();
+    // this.getInvoice();
+  },
+  methods: {
+    liveData() {
+      this.isLoading = true;
+      axios
+        .get(
+          "/bayarBaki/" +
+            localStorage.getItem("id") +
+            // "/1" ,
+            "/" +
+            this.lelongId,
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          }
+        )
+        .then((response) => {
+          // console.log("liveData", response);
+          this.isLoading = false;
+          if (response.data.success == true) {
+            this.isSuccess = true;
+            this.lists = response.data.data;
+            this.tarikhLelong = response.data.tarikh_lelong;
+          } else {
+          }
+        })
+        .catch((error) => {
+          this.isLoading = false;
+          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;
+    },
+    closeModalFileUpload() {
+      this.isDisplayFileUpload = false;
+    },
+    clickCancelButton() {
+      this.$router.push({
+        name: "detail",
+        params: {
+          lelongId: this.lelongId,
+          statusPayment: null,
+        },
+      });
+    },
+    toggleReloadComponent() {
+      this.componentKey += 1;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.container-height {
+  min-height: 70vh;
+}
+</style>

src/components/policy/ThePolicy.vue

@@ -7,12 +7,43 @@
         </template>
         <template #content>
           <TabView>
+            <TabPanel :header="'Panduan ArrahnBid'">
+              <p>
+                Berikut merupakan video panduan untuk penggunaan
+                ArrahnBid. Sila tonton video ini untuk memahami cara penggunaan.
+              </p>
+              <div class="lg:flex hidden justify-content-center">
+                <YouTube v-bind:src="theUrl" />
+              </div>
+              <div
+                class="
+                  lg:hidden
+                  md:flex
+                  hidden
+                  overflow-x-auto
+                  justify-content-center
+                "
+              >
+                <YouTube v-bind:src="theUrl" width="480" height="360" />
+              </div>
+              <div
+                class="
+                  lg:hidden
+                  md:hidden
+                  flex
+                  overflow-x-auto
+                  justify-content-center
+                "
+              >
+                <YouTube v-bind:src="theUrl" width="320" height="240" />
+              </div>
+            </TabPanel>
             <TabPanel :header="'Terma & Syarat'">
               <terms-and-conditions-details></terms-and-conditions-details>
             </TabPanel>
             <TabPanel :header="'Hubungi Kami'">
               <div class="grid justify-content-center" style="height: 50vh">
-                <div class="col-12 mb-4 text-center" style="align-self:end">
+                <div class="col-12 mb-4 text-center" style="align-self: end">
                   <i class="pi pi-wrench text-8xl text-400"></i>
                 </div>
                 <div class="col-12 text-center">
@@ -24,8 +55,7 @@
         </template>
       </Card>
     </div>
-  <ScrollTop :threshold="200"/>
+    <ScrollTop :threshold="200" />
-
   </the-template>
 </template>
 
@@ -36,5 +66,10 @@ export default {
   components: {
     "terms-and-conditions-details": TermsAndConditionsDetails,
   },
+  data() {
+    return {
+      theUrl: "https://www.youtube.com/watch?v=lucYE9bM_PY&t=53s",
+    };
+  },
 };
 </script>

src/components/result/ResultDetail.vue

@@ -11,46 +11,62 @@
     <div v-else class="fadein animation-duration-400">
       <div v-if="isSuccess">
         <div class="row">
-          <Toolbar class="toolbar-custom">
+          <Card>
-            <template #start>
+            <template #title>
-              <Button
+              <div class="grid justify-content-between">
-                class="
+                <div class="flex">
-                  p-button-sm
+                  <Button
-                  button-custom
+                    class="
-                  p-button-secondary p-button-outlined
+                      p-button-sm
-                  mr-2
+                      button-custom
-                "
+                      p-button-secondary p-button-outlined
-                icon="pi pi-arrow-left"
+                      align-self-center
-                v-on:click="clickBackButton()"
+                      mr-2
-              />
+                    "
-              <div
+                    icon="pi pi-arrow-left"
-                class="font-normal"
+                    v-on:click="clickBackButton()"
-                style="font-size: 1.5rem; font-weight: 700"
+                  />
-              >
+                  <div
-                Keputusan Tarikh Lelongan: {{ tarikhLelong }}
+                    class="font-normal"
+                    style="font-size: 1.5rem; font-weight: 700"
+                  >
+                    Keputusan Tarikh Lelongan: {{ tarikhLelong }}
+                  </div>
+                </div>
+                <div class="">
+                  <!-- <Button
+                    label="Bayar CDM"
+                    icon="pi pi-money-bill"
+                    iconPos="right"
+                    class="p-button-sm p-button-help mr-2"
+                    :disabled="disabled == 1"
+                    v-on:click="clickPayCdmButton(lelongId)"
+                  /> -->
+                  <Button
+                    label="Pembayaran"
+                    icon="pi pi-dollar"
+                    iconPos="right"
+                    class="p-button-sm"
+                    :disabled="disabled == 1"
+                    v-on:click="clickPayButton(lelongId)"
+                  />
+                </div>
+              </div>
+              <div class="row" v-if="disabled != 1">
+                <div
+                  class="
+                    text-xs
+                    align-self-center
+                    fst-italic
+                    fw-lighter
+                    text-danger
+                    md:text-right
+                  "
+                >
+                  *Sila klik butang diatas untuk lakukan bayaran.
+                </div>
               </div>
             </template>
-
-            <template #end>
-              <!-- <Button
-                label="Resit Bayaran"
-                icon="pi pi-list"
-                iconPos="right"
-                class="p-button-sm p-button-outlined mr-2"
-              /> -->
-              <Button
-                label="Pembayaran"
-                icon="pi pi-money-bill"
-                iconPos="right"
-                class="p-button-sm"
-                :disabled="disabled == 1"
-                v-on:click="clickPayButton(lelongId)"
-              />
-            </template>
-          </Toolbar>
-          <Card>
-            <!-- <template #title>
-        </template> -->
             <template #content>
               <Accordion :multiple="true">
                 <AccordionTab v-for="list in lists" v-bind:key="list">
@@ -58,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{{
@@ -74,17 +117,153 @@
                     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"
-                    v-tooltip="'Muat Turun'"
                   />
+                  <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 class="table text-center table-bordered">
+                    <table
+                      ref="content"
+                      class="table text-center table-bordered"
+                    >
                       <tbody>
                         <tr class="table-light">
                           <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>
@@ -106,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>
@@ -145,7 +295,6 @@
                                 .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                             }}
                           </td>
-                          <td class="table-light"></td>
                         </tr>
                       </tbody>
                     </table>
@@ -261,13 +410,11 @@
                   </div>
                 </div>
                 <div class="modal-footer">
-                  <button
+                  <Button
-                    type="button"
+                    class="p-button-sm"
-                    class="btn btn-secondary"
+                    label="Kembali"
                     data-bs-dismiss="modal"
-                  >
+                  />
-                    Kembali
-                  </button>
                 </div>
               </div>
             </div>
@@ -308,6 +455,21 @@
         :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
         :style="{ width: '50vw' }"
         :modal="true"
+        :show-layout="false"
+        :float-layout="true"
+        :enable-download="true"
+        :preview-modal="true"
+        :paginate-elements-by-height="1400"
+        filename="hee hee"
+        :pdf-quality="2"
+        :manual-pagination="false"
+        pdf-format="a4"
+        pdf-orientation="landscape"
+        pdf-content-width="800px"
+        @progress="onProgress($event)"
+        @hasStartedGeneration="hasStartedGeneration()"
+        @hasGenerated="hasGenerated($event)"
+        ref="html2Pdf"
       >
         <div class="text-center">
           <p id="hakbarang">SURAT KETERANGAN KEPEMILIKAN BARANG</p>
@@ -343,7 +505,7 @@
           </table>
         </div>
         <template #footer>
-          <Button label="Muat Turun" @click="muatTurunPdf()" />
+          <!-- <Button label="Muat Turun" @click="muatTurunPdf()" /> -->
         </template>
       </Dialog>
     </div>
@@ -351,18 +513,25 @@
 </template>
 
 <script>
-// import jsPDF from "jspdf";
+import jsPDF from "jspdf";
-// import "jspdf-autotable";
+import "jspdf-autotable";
-// import html2canvas from "html2canvas";
+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,
@@ -375,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() {
@@ -420,6 +602,9 @@ export default {
     clickPayButton(value) {
       this.$router.push({ name: "pay", params: { lelongId: value } });
     },
+    clickPayCdmButton(value) {
+      this.$router.push({ name: "pay-cdm", params: { lelongId: value } });
+    },
     clickBackButton() {
       this.$router.push({ name: "result" });
     },
@@ -427,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", {
@@ -449,6 +700,32 @@ export default {
         });
     },
     muatTurunPdf() {
+      // var doc = new jsPDF();
+
+      // doc.html(document.body, {
+      //   callback: function (doc) {
+      //     doc.save();
+      //   },
+      //   x: 1,
+      //   y: 1,
+      // });
+
+      // const doc = new jsPDF();
+      // const html = this.$refs.content.innerHTML;
+
+      // doc.html(html, 15, 15, {
+      //   width: 150,
+      // });
+
+      // doc.save("output.pdf");
+
+      this.$refs.html2Pdf.generatePdf();
+
+      // var imgData = canvas.toDataURL("image/png");
+      // var doc = new jsPDF("p", "mm");
+      // doc.addImage(imgData, "PNG", 10, 10);
+      // doc.save("sample-file.pdf");
+
       // const doc = new jsPDF();
       // doc.autoTable({ html: "#hak-barang" });
       // const html = this.$refs.hakbarang.innerHTML;
@@ -480,26 +757,7 @@ export default {
   background: #fff !important;
 }
 
-.button-custom {
-  height: 20px;
-  width: 10px !important;
-}
-
 .container-height {
   min-height: 70vh;
 }
-
-.style-info {
-  background: #e4f8f0;
-  border: solid #1ea97c;
-  border-width: 0px;
-  color: #1ea97c;
-  font-size: 1rem;
-  align-items: center;
-  display: flex;
-  padding: 0.4rem 0.9rem;
-  margin: 0;
-  border-radius: 6px;
-  font-weight: 400;
-}
 </style>

src/components/result/ResultMain.vue

@@ -15,7 +15,13 @@
     <div v-if="isSuccess">
       <Card>
         <template #title>
-          <div class="font-normal">Keputusan Lelongan</div>
+          <div class="grid justify-content-between">
+            <div class="font-normal">Bidaan Yang Berjaya</div>
+            <div class="text-xs align-self-center fst-italic fw-lighter text-danger">
+              *Pembayaran hendaklah diselesaikan SEGERA dan barang lelongan
+              mesti DITUNTUT di cawangan terlibat SEBELUM jam 4.00 petang hari lelongan.
+            </div>
+          </div>
         </template>
         <template #content>
           <div class="overflow-x-auto">
@@ -51,12 +57,14 @@
                     ></Tag>
                   </td>
                   <td v-else-if="data.status == null">
-                    <Tag
+                    <div class="blink">
-                      value="Belum Selesai"
+                      <Tag
-                      icon="pi pi-times"
+                        value="Belum Selesai"
-                      class="p-tag-rounded"
+                        icon="pi pi-times"
-                      severity="danger"
+                        class="p-tag-rounded"
-                    ></Tag>
+                        severity="danger"
+                      ></Tag>
+                    </div>
                   </td>
                   <!-- <td>
                     <span class="text-primary underline cursor-pointer"

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"
@@ -51,6 +50,16 @@ import ScrollTop from 'primevue/scrolltop';
 import 'maz-ui/css/main.css'
 import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput'
 
+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'
@@ -96,9 +105,12 @@ app.component('ScrollTop', ScrollTop);
 
 app.component('MazPhoneNumberInput', MazPhoneNumberInput)
 
-app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
+app.component('YouTube', YouTube)
+
+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')
 // createApp(Master).use(router).use(store).mount('#app')
 // createApp(App).use(router).use(store).use(useVuelidate).mount('#app')
+

src/router/index.js

@@ -131,6 +131,7 @@ import TheList from "../components/list/TheList.vue";
 import ResultDetail from "../components/result/ResultDetail.vue";
 import ResultReceipt from "../components/result/ResultReceipt.vue"
 import ThePay from "../components/pay/ThePay.vue";
+import ThePayCdm from "../components/pay/ThePayCdm.vue";
 import ThePolicy from "../components/policy/ThePolicy.vue"
 
 import {
@@ -213,6 +214,11 @@ const routes = [
     name: "pay",
     component: ThePay,
   },
+  {
+    path: "/pay-cdm",
+    name: "pay-cdm",
+    component: ThePayCdm,
+  },
   {
     path: "/policy",
     name: "policy",

src/store/index.js

@@ -1,5 +1,6 @@
 import Vuex from 'vuex'
 // import Vue from 'vue'
+import auth from './modules/auth'
 import cart from './modules/cart'
 import lelong_id from './modules/lelongId'
 
@@ -9,6 +10,7 @@ import lelong_id from './modules/lelongId'
 //Create store
 export default new Vuex.Store({
     modules: {
+        auth,
         cart,
         lelong_id
     }

src/store/modules/auth.js

@@ -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
-}

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,
+})

src/store/modules/cart.js

@@ -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
-}

src/store/modules/lelongId.js

@@ -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
-}