From aa7dece42dfa34dac555191364ef8a98cad23247 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Sat, 15 Oct 2022 22:41:01 +0800
Subject: [PATCH] Fix payment

---
 .env                                   |   2 +
 .env.example                           |   2 +
 src/components/pay/SelectOutlet.vue    | 199 +++++++++++++-
 src/components/pay/ThePay.vue          |  89 ++++++-
 src/components/result/ResultDetail.vue | 343 ++++++++++++++-----------
 src/components/result/ResultMain.vue   |  18 +-
 src/main.js                            |   6 +
 src/router/index.js                    |   6 +-
 8 files changed, 503 insertions(+), 162 deletions(-)

diff --git a/.env b/.env
index d3f895e..18634dc 100644
--- a/.env
+++ b/.env
@@ -1 +1,3 @@
+BASE_URL = http://localhost:8080
+
 VUE_APP_ROOT_URL = http://lelong-admin.test/api
\ No newline at end of file
diff --git a/.env.example b/.env.example
index f873304..87341ef 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,3 @@
+BASE_URL = http://localhost:8080
+
 VUE_APP_ROOT_URL = http://lelong.test/api
\ No newline at end of file
diff --git a/src/components/pay/SelectOutlet.vue b/src/components/pay/SelectOutlet.vue
index 1308b45..1e8b3d5 100644
--- a/src/components/pay/SelectOutlet.vue
+++ b/src/components/pay/SelectOutlet.vue
@@ -1,5 +1,114 @@
 <template>
-  <div class="container">
+  <TabView>
+    <TabPanel
+      v-for="data in namaCawangan"
+      v-bind:key="data"
+      :header="data.cawangan"
+    >
+      <div>
+        <div class="overflow-x-auto">
+          <table class="table text-center table-bordered table-hover">
+            <tbody>
+              <tr class="table-light">
+                <td>Bil</td>
+                <td style="min-width: 240px">No Rujukan</td>
+                <td style="min-width: 210px">Marhun</td>
+                <td style="min-width: 120px">Harga Bida</td>
+              </tr>
+              <tr v-for="(item, index) in data.sag" v-bind:key="item">
+                <td>{{ index + 1 }}</td>
+                <td>{{ item.norujukan }}</td>
+                <td>{{ item.marhun }}</td>
+                <td>
+                  RM{{
+                    item.total_payment
+                      ?.toString()
+                      .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                  }}
+                </td>
+              </tr>
+              <tr class="uppercase">
+                <th colspan="3">Jumlah</th>
+                <th>
+                  RM{{
+                    data.total_hargabida
+                      ?.toString()
+                      .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                  }}
+                </th>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="grid mt-5">
+          <!-- <button class="btn btn-danger" v-on:click="clickCancelButton()">
+            Cancel
+          </button> -->
+          <div class="col-12 md:col-5">
+            <Button
+              label="Batal Pembayaran"
+              class="p-button-text p-button-sm"
+              v-on:click="clickCancelButton()"
+            />
+          </div>
+          <div class="sm:none md:col"></div>
+          <div class="col-12 md:col-5 md:text-right">
+            <Button
+              label="Bayar Bidaan Cawangan Ini"
+              class="p-button-sm"
+              @click="openModal(data)"
+            />
+          </div>
+          <!-- <button
+            ref="nextButton"
+            v-on:click="clickNextButton()"
+            class="btn btn-primary"
+          >
+            Teruskan
+          </button> -->
+        </div>
+      </div>
+    </TabPanel>
+  </TabView>
+  <Dialog
+    header="Teruskan Bayaran"
+    v-model:visible="isDisplay"
+    :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+    :style="{ width: '50vw' }"
+    :modal="true"
+  >
+    <p>Adakah anda pasti untuk membuat bayaran bagi cawangan ini?</p>
+    <div class="overflow-x-auto">
+      <table class="table text-center table-bordered">
+        <tbody>
+          <tr class="table-light">
+            <td style="min-width: 240px">Cawangan</td>
+            <td style="min-width: 120px">Harga Bida</td>
+          </tr>
+          <tr>
+            <th>{{ cawanganPilihan }}</th>
+            <th>
+              RM{{
+                hargaBidaanPilihan
+                  ?.toString()
+                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+              }}
+            </th>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <template #footer>
+      <Button
+        label="Tidak"
+        icon="pi pi-times"
+        @click="closeModal()"
+        class="p-button-text"
+      />
+      <Button label="Ya" icon="pi pi-check" @click="doPayment()" />
+    </template>
+  </Dialog>
+  <!-- <div class="container">
     <div class="row justify-content-center">
       <div class="col-7">
         <div v-if="!nextButton">
@@ -39,11 +148,13 @@
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
+import { integer } from "@vuelidate/validators";
 import SelectId from "./SelectId.vue";
+import axios from "axios";
 
 export default {
   components: {
@@ -52,15 +163,86 @@ export default {
   props: {
     namaCawangan: "",
     lelongIdProps: "",
+    // invoiceIdProps: "",
+    // invoiceNoProps: "",
   },
   data() {
     return {
       nextButton: false,
       selectCawangan: this.namaCawangan,
       selectRadio: "",
+      isDisplay: false,
+      cawanganPilihan: "",
+      hargaBidaanPilihan: "",
+      form: {
+        email: localStorage.getItem("email"),
+        notel: localStorage.getItem("notelbimbit"),
+        name: localStorage.getItem("name"),
+        user_id: localStorage.getItem("id"),
+        lelong_id: "",
+        invoice_id: "",
+        invoice_no: "",
+        total: integer,
+        // sag: [
+        //   {
+        //     norujukan: "APM211121-0015",
+        //     kodcaw: "APM",
+        //     total_payment: 1329,
+        //   },
+        //   {
+        //     norujukan: "APM211120-0018",
+        //     kodcaw: "APM",
+        //     total_payment: 1443,
+        //   },
+        // ],
+        sag: "",
+      },
     };
   },
+  mounted() {
+    this.getInvoice();
+  },
   methods: {
+    getInvoice() {
+      axios
+        .get("/invoice", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            user_id: localStorage.getItem("id"),
+            lelong_id: this.lelongIdProps,
+          },
+        })
+        .then((response) => {
+          console.log(response);
+          if (response.data.success == true) {
+            this.form.invoice_id = response.data.invoice.id;
+            this.form.invoice_no = response.data.invoice.invoice_no;
+            this.form.lelong_id = this.lelongIdProps;
+          } else if (response.data.success == false) {
+            alert("No Invoice Id");
+          }
+        })
+        .catch((error) => {
+          this.loading = false;
+          console.log(error);
+        });
+    },
+    openModal(value) {
+      this.isDisplay = true;
+      this.cawanganPilihan = value.cawangan;
+      this.hargaBidaanPilihan = value.total_hargabida;
+      this.form.total = parseFloat(value.total_hargabida.replace(/,/g, ""));
+      let convertData = JSON.parse(JSON.stringify(value.sag));
+      this.form.sag = convertData;
+      console.log(this.form);
+    },
+    closeModal() {
+      this.isDisplay = false;
+      this.form.total = "";
+      this.form.sag = "";
+    },
     clickRadio(value) {
       console.log(value);
       this.selectRadio = value;
@@ -80,6 +262,19 @@ export default {
     backIsClick(value) {
       this.nextButton = value;
     },
+    doPayment() {
+      console.log(this.form);
+      axios
+        .post("/bidpayment", this.form)
+        .then((response) => {
+          console.log(response);
+          window.location.href = response.data.message + "?auto_submit=true";
+        })
+        .catch((response) => {
+          alert(response.message);
+          console.log(response);
+        });
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/pay/ThePay.vue b/src/components/pay/ThePay.vue
index 9e9e540..83a4ee7 100644
--- a/src/components/pay/ThePay.vue
+++ b/src/components/pay/ThePay.vue
@@ -1,17 +1,70 @@
 <template>
   <the-template>
-    <base-card>
+    <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="font-normal">Pembayaran Bidaan</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>
+          </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>
+    <!-- <base-card>
       <p>Tarikh Lelong : {{ tarikhLelong }}</p>
       <div v-if="statusComponent == 1">
-        <select-outlet v-bind:namaCawangan="lists" v-bind:lelongIdProps="lelongId"></select-outlet>
+        <select-outlet
+          v-bind:namaCawangan="lists"
+          v-bind:lelongIdProps="lelongId"
+        ></select-outlet>
       </div>
-      <!-- <div v-if="statusComponent == 2">
-        <select-id></select-id>
-      </div>
-      <div v-else-if="statusComponent == 3">
-        <select-finalse></select-finalse>
-      </div> -->
-    </base-card>
+      
+    </base-card> -->
   </the-template>
 </template>
 
@@ -32,11 +85,15 @@ export default {
       lists: [],
       tarikhLelong: "",
       statusComponent: 1,
+      invoice_id: "",
+      invoice_no: "",
       user: {
         id: 1,
         caw: "KOta Bbharu",
       },
       lelongId: "",
+      isLoading: false,
+      isSuccess: false,
     };
   },
   created() {
@@ -44,9 +101,11 @@ export default {
   },
   mounted: function () {
     this.liveData();
+    // this.getInvoice();
   },
   methods: {
     liveData() {
+      this.isLoading = true;
       axios
         .get(
           "/bayarBaki/" +
@@ -61,7 +120,9 @@ export default {
           }
         )
         .then((response) => {
+          this.isLoading = false;
           if (response.data.success == true) {
+            this.isSuccess = true;
             this.lists = response.data.data;
             console.log(this.lists);
             this.tarikhLelong = response.data.tarikh_lelong;
@@ -69,9 +130,11 @@ export default {
           }
         })
         .catch((error) => {
+          this.isLoading = false;
           console.log(error);
         });
     },
+    
     clickBackButton() {
       this.statusComponent -= 1;
     },
@@ -80,4 +143,10 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.container-height {
+  min-height: 70vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index 3f3a706..612f0ad 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -10,110 +10,120 @@
       </div>
     </div>
     <div v-else class="fadein animation-duration-400">
-      <div class="row">
-        <Toolbar class="toolbar-custom">
-          <template #start>
-            <Button
-              class="
-                p-button-sm
-                button-custom
-                p-button-secondary p-button-outlined
-                mr-2
-              "
-              icon="pi pi-arrow-left"
-              v-on:click="clickBackButton()"
-            />
-            <div
-              class="font-normal"
-              style="font-size: 1.5rem; font-weight: 700"
-            >
-              Keputusan Tarikh Lelong: {{ tarikhLelong }}
-            </div>
-          </template>
+      <div v-if="isSuccess">
+        <div class="row">
+          <Toolbar class="toolbar-custom">
+            <template #start>
+              <Button
+                class="
+                  p-button-sm
+                  button-custom
+                  p-button-secondary p-button-outlined
+                  mr-2
+                "
+                icon="pi pi-arrow-left"
+                v-on:click="clickBackButton()"
+              />
+              <div
+                class="font-normal"
+                style="font-size: 1.5rem; font-weight: 700"
+              >
+                Keputusan Tarikh Lelong: {{ tarikhLelong }}
+              </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="Bayar"
-              icon="pi pi-money-bill"
-              iconPos="right"
-              class="p-button-sm"
-              v-on:click="clickPayButton(lelongId)"
-            />
-          </template>
-        </Toolbar>
-        <Card>
-          <!-- <template #title>
+            <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">
-                <template #header>
-                  <span>{{ list.cawangan }}</span>
-                  <!-- <span class="ml-2">Jumlah:RMXXXX</span> -->
-                </template>
-                <div class="overflow-x-auto">
-                  <table 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>
-                        <td>
-                          <a
-                            href="#"
-                            data-bs-toggle="modal"
-                            data-bs-target="#marhunModal"
-                            v-on:click="marhunModal(data)"
+            <template #content>
+              <Accordion :multiple="true">
+                <AccordionTab v-for="list in lists" v-bind:key="list">
+                  <template #header>
+                    <span>{{ list.cawangan }}</span>
+                    <!-- <span class="ml-2">Jumlah:RMXXXX</span> -->
+                  </template>
+                  <div class="overflow-x-auto">
+                    <table 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>
+                          <td>
+                            <a
+                              href="#"
+                              data-bs-toggle="modal"
+                              data-bs-target="#marhunModal"
+                              v-on:click="marhunModal(data)"
+                            >
+                              {{ data.norujukan }}
+                            </a>
+                          </td>
+                          <td>
+                            RM
+                            {{
+                              data.total_payment
+                                ?.toString()
+                                .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                            }}
+                          </td>
+                          <td
+                            v-if="
+                              data.status_payment === null ||
+                              data.status_payment == 0
+                            "
                           >
-                            {{ data.norujukan }}
-                          </a>
-                        </td>
-                        <td>
-                          RM
-                          {{
-                            data.total_payment
-                              ?.toString()
-                              .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
-                          }}
-                        </td>
-                        <td
-                          class="m-1 badge rounded-pill bg-danger"
-                          v-if="
-                            data.status_payment === null ||
-                            data.status_payment == 0
-                          "
-                        >
-                          Belum Bayar
-                        </td>
-                        <td
-                          class="m-1 badge rounded-pill bg-warning"
-                          v-if="data.status_payment === 2"
-                        >
-                          Tunggu Pengesahan
-                        </td>
-                        <td
-                          class="m-1 badge rounded-pill bg-success"
-                          v-if="data.status_payment === 1"
-                        >
-                          Selesai
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </AccordionTab>
-            </Accordion>
-            <!-- <div class="">
+                            <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>
+                      </tbody>
+                    </table>
+                  </div>
+                </AccordionTab>
+              </Accordion>
+              <!-- <div class="">
             <div class="row">
               <div class="col">
                 <div class="d-flex justify-content-between">
@@ -226,42 +236,42 @@
               </div>
             </div>
           </div> -->
-          </template>
-        </Card>
-        <div
-          class="modal fade"
-          id="marhunModal"
-          tabindex="-1"
-          aria-labelledby="marhunModalLabel"
-          aria-hidden="true"
-          data-bs-backdrop="static"
-        >
-          <div class="modal-dialog modal-lg modal-dialog-centered">
-            <div class="modal-content">
-              <div class="modal-header">
-                <!-- <h5 class="modal-title" id="marhunModalLabel">
+            </template>
+          </Card>
+          <div
+            class="modal fade"
+            id="marhunModal"
+            tabindex="-1"
+            aria-labelledby="marhunModalLabel"
+            aria-hidden="true"
+            data-bs-backdrop="static"
+          >
+            <div class="modal-dialog modal-lg modal-dialog-centered">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <!-- <h5 class="modal-title" id="marhunModalLabel">
                   {{ theData.norujukan }}
                 </h5> -->
-                <button
-                  type="button"
-                  class="btn-close"
-                  data-bs-dismiss="modal"
-                  aria-label="Close"
-                ></button>
-              </div>
-              <div class="modal-body">
-                <table class="table table-bordered">
-                  <thead>
-                    <tr>
-                      <th scope="col">Bil</th>
-                      <th scope="col">Jenis</th>
-                      <th scope="col">Karat</th>
-                      <th scope="col">Berat</th>
-                      <th scope="col">Nota</th>
-                      <th scope="col">Harga Asas</th>
-                    </tr>
-                  </thead>
-                  <!-- <tbody>
+                  <button
+                    type="button"
+                    class="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"
+                  ></button>
+                </div>
+                <div class="modal-body">
+                  <table class="table table-bordered">
+                    <thead>
+                      <tr>
+                        <th scope="col">Bil</th>
+                        <th scope="col">Jenis</th>
+                        <th scope="col">Karat</th>
+                        <th scope="col">Berat</th>
+                        <th scope="col">Nota</th>
+                        <th scope="col">Harga Asas</th>
+                      </tr>
+                    </thead>
+                    <!-- <tbody>
                     <tr
                       v-for="(marhun, index) in theData.lelongbidmarhun"
                       v-bind:key="marhun"
@@ -278,17 +288,46 @@
                       <th>RM{{ theData.hargaasas }}</th>
                     </tr>
                   </tbody> -->
-                </table>
+                  </table>
+                </div>
+                <div class="modal-footer">
+                  <button
+                    type="button"
+                    class="btn btn-secondary"
+                    data-bs-dismiss="modal"
+                  >
+                    Kembali
+                  </button>
+                </div>
               </div>
-              <div class="modal-footer">
-                <button
-                  type="button"
-                  class="btn btn-secondary"
-                  data-bs-dismiss="modal"
+            </div>
+          </div>
+        </div>
+      </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
                 >
-                  Kembali
-                </button>
-              </div>
+                untuk maklumat rekod bidaan menang.</span
+              >
             </div>
           </div>
         </div>
@@ -309,6 +348,8 @@ export default {
       loading: false,
       lelongId: "",
       statusPayment: "",
+      disabled: 0,
+      isSuccess: false,
     };
   },
   created() {
@@ -318,8 +359,16 @@ export default {
   },
   mounted: function () {
     this.liveData();
+    this.checkStatusPayment();
   },
   methods: {
+    checkStatusPayment() {
+      if (this.statusPayment == "" || this.statusPayment == null) {
+        this.disabled = 0;
+      } else {
+        this.disabled = 1;
+      }
+    },
     liveData() {
       this.loading = true;
       axios
@@ -337,11 +386,13 @@ export default {
         )
         .then((response) => {
           if (response.data.success == true) {
+            this.isSuccess = true;
             this.loading = false;
             console.log(response);
             this.lists = response.data.data;
             this.tarikhLelong = response.data.tarikh_lelong;
           } else {
+            this.isSuccess = false;
           }
         })
         .catch((error) => {
@@ -371,4 +422,8 @@ export default {
   height: 20px;
   width: 10px !important;
 }
+
+.container-height {
+  min-height: 70vh;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/result/ResultMain.vue b/src/components/result/ResultMain.vue
index 06f5e78..1916c7b 100644
--- a/src/components/result/ResultMain.vue
+++ b/src/components/result/ResultMain.vue
@@ -42,9 +42,21 @@
                         .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                     }}
                   </td>
-                  <td v-if="data.status == 1" class="text-success">Selesai</td>
-                  <td v-else-if="data.status == null" class="text-danger">
-                    Belum Selesai
+                  <td v-if="data.status == 1">
+                    <Tag
+                      value="Selesai"
+                      icon="pi pi-check"
+                      class="p-tag-rounded"
+                      severity="success"
+                    ></Tag>
+                  </td>
+                  <td v-else-if="data.status == null">
+                    <Tag
+                      value="Belum Selesai"
+                      icon="pi pi-times"
+                      class="p-tag-rounded"
+                      severity="danger"
+                    ></Tag>
                   </td>
                   <td>
                     <span class="text-primary underline cursor-pointer"
diff --git a/src/main.js b/src/main.js
index 147a71f..d7affa8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,6 +38,9 @@ import AccordionTab from 'primevue/accordiontab';
 import Dialog from 'primevue/dialog';
 import Toolbar from 'primevue/toolbar';
 import Avatar from 'primevue/avatar';
+import TabView from 'primevue/tabview';
+import TabPanel from 'primevue/tabpanel';
+import Tag from 'primevue/tag';
 
 import TheTemplate from './components/layouts/TheTemplate.vue'
 import BaseCard from './components/base/BaseCard.vue'
@@ -71,6 +74,9 @@ app.component('AccordionTab', AccordionTab);
 app.component('Dialog', Dialog);
 app.component('Avatar', Avatar);
 app.component('Toolbar', Toolbar);
+app.component('TabView', TabView);
+app.component('TabPanel', TabPanel);
+app.component('Tag', Tag);
 
 app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
 // app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');
diff --git a/src/router/index.js b/src/router/index.js
index b112294..c4ffd0e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -210,9 +210,9 @@ const routes = [
 ];
 
 const router = createRouter({
-  // history: createWebHistory(process.env.BASE_URL),
-  history: createWebHistory(),
-  // history: createMemoryHistory(),
+  history: createWebHistory(process.env.BASE_URL),
+  // history: createWebHistory(),
+  // history: createMemoryHistory(process.env.BASE_URL),
   routes,
 });