add receipt card

src/components/pay/ThePay.vue

@@ -5,12 +5,12 @@
       <div v-if="statusComponent == 1">
         <select-outlet v-bind:namaCawangan="lists" v-bind:lelongIdProps="lelongId"></select-outlet>
       </div>
-      <div v-if="statusComponent == 2">
+      <!-- <div v-if="statusComponent == 2">
         <select-id></select-id>
       </div>
       <div v-else-if="statusComponent == 3">
         <select-finalse></select-finalse>
-      </div>
+      </div> -->
     </base-card>
   </the-template>
 </template>
@@ -18,14 +18,14 @@
 <script>
 import axios from "axios";
 import SelectOutlet from "./SelectOutlet.vue";
-import SelectId from "./SelectId.vue";
-import SelectFinalise from "./SelectFinalise.vue";
+// import SelectId from "./SelectId.vue";
+// import SelectFinalise from "./SelectFinalise.vue";
 
 export default {
   components: {
     "select-outlet": SelectOutlet,
-    "select-id": SelectId,
-    "select-finalse": SelectFinalise,
+    // "select-id": SelectId,
+    // "select-finalse": SelectFinalise,
   },
   data() {
     return {

src/components/result/ResultDetail.vue

@@ -26,6 +26,9 @@
                 >Bayar</button
               >
             </div>
+            <div class="d-flex justify-content-end">
+              <router-link v-bind:to="{name: 'receipt'}" class="btn btn-outline-primary m-2 me-0">Resit Bayaran</router-link>
+            </div>
             <div>
               <div class="accordion" id="accordionExample">
                 <div
@@ -93,14 +96,14 @@
                               Selesai
                             </td>
                           </tr>
-                          <tr>
+                          <!-- <tr>
                             <td colspan="5" style="justify-content: end">
                               Muat Turun Penyata
                               <a href="#" class="btn btn-outline-primary">
                                 <i class="bi bi-download"></i
                               ></a>
                             </td>
-                          </tr>
+                          </tr> -->
                         </tbody>
                       </table>
                       <h5 class="mt-4 mb-5">

src/components/result/ResultMain.vue

@@ -8,16 +8,13 @@
           <th scope="col">Tarikh</th>
           <th scope="col">Jumlah</th>
           <th scope="col">Status</th>
+          <th scope="col">Penyata</th>
         </tr>
       </thead>
       <tbody v-if="lelongStatus">
         <tr v-for="(data, index) in lelong" v-bind:key="data">
           <td>{{ index + 1 }}</td>
-          <td
-            class="btn text-primary"
-            style=""
-            v-on:click="selectDate(data)"
-          >
+          <td class="btn text-primary" style="" v-on:click="selectDate(data)">
             <u>{{ data.tarikh_lelong }}</u>
           </td>
           <td>RM{{ data.jumlah }}</td>
@@ -25,6 +22,11 @@
           <td v-else-if="data.status == null" class="text-danger">
             Belum Selesai
           </td>
+          <td>
+            <a href="#" class="btn btn-outline-primary">
+              Muat Turun <i class="bi bi-download"></i
+            ></a>
+          </td>
         </tr>
       </tbody>
       <tbody v-else>
@@ -78,7 +80,10 @@ export default {
         });
     },
     selectDate(value) {
-      this.$router.push({ name: "detail", params: { lelongId: value.id,  statusPayment: value.status} });
+      this.$router.push({
+        name: "detail",
+        params: { lelongId: value.id, statusPayment: value.status },
+      });
     },
   },
 };

src/components/result/ResultReceipt.vue

@@ -0,0 +1,47 @@
+<template>
+  <the-template>
+    <base-card>
+      <h5>Resit Bayaran</h5>
+      <h5>Tarikh Lelong: 12/12/2022</h5>
+      <div class="d-flex">
+        <router-link
+          v-bind:to="{ name: 'result' }"
+          class="btn btn-secondary m-2 me-0"
+          >Kembali</router-link
+        >
+      </div>
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th scope="col">#</th>
+            <th scope="col">Receipt Id</th>
+            <th scope="col">Jumlah</th>
+            <th scope="col">Resit</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>bkhsjd12</td>
+            <td>RM121212.00</td>
+            <td>
+              <a href="#" class="btn btn-outline-primary">
+                Muat Turun <i class="bi bi-download"></i
+              ></a>
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>xsfsj901</td>
+            <td>RM100.00</td>
+            <td>
+              <a href="#" class="btn btn-outline-primary">
+                Muat Turun <i class="bi bi-download"></i
+              ></a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </base-card>
+  </the-template>
+</template>

src/router/index.js

@@ -129,6 +129,7 @@ import TheProfile from "../components/profile/TheProfile.vue";
 import TheBidRecord from "../components/bid-record/TheBidRecord.vue";
 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 {
@@ -196,6 +197,12 @@ const routes = [
     component: ResultDetail,
     // meta: { requiresAuth: true }
   },
+  {
+    path: "/result/detail/receipt",
+    name: "receipt",
+    component: ResultReceipt,
+    // meta: { requiresAuth: true }
+  },
   {
     path: "/pay",
     name: "pay",