From 002e2a99fe70b58fd376de637b710c51608ca84c Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Thu, 22 Dec 2022 10:05:09 +0800
Subject: [PATCH] Update fix ui

---
 public/themes/lara-light-blue/theme.css       | 30 ++++++++++++++++
 src/components/authentication/TheLogin.vue    | 11 ++++--
 src/components/authentication/TheRegister.vue | 19 ++++++++--
 src/components/bid-record/BidRecordList.vue   | 23 ++++--------
 src/components/bid-record/TheBidRecord.vue    | 17 ---------
 src/components/cart/CartListNew.vue           | 36 ++++++++++++++-----
 src/components/home/LelongNextDetail.vue      |  4 +--
 src/components/home/LelongToday.vue           |  2 +-
 src/components/home/LelongTodayDetail.vue     |  6 ++--
 src/components/list/ListItem.vue              |  2 +-
 src/components/list/TheList.vue               |  7 ++++
 src/components/result/ResultMain.vue          |  2 +-
 12 files changed, 104 insertions(+), 55 deletions(-)

diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 4b7ef90..6af8753 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -5719,3 +5719,33 @@
 .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;
+}
diff --git a/src/components/authentication/TheLogin.vue b/src/components/authentication/TheLogin.vue
index 61a9620..8175b3f 100644
--- a/src/components/authentication/TheLogin.vue
+++ b/src/components/authentication/TheLogin.vue
@@ -94,8 +94,15 @@
               iconPos="right"
             ></Button>
           </div>
-          <div class="flex justify-content-center mt-4">
-            <terms-and-conditions></terms-and-conditions>
+          <div class="flex alin justify-content-center mt-4">
+            <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>
diff --git a/src/components/authentication/TheRegister.vue b/src/components/authentication/TheRegister.vue
index fe441d7..4c951bc 100644
--- a/src/components/authentication/TheRegister.vue
+++ b/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"
@@ -400,14 +407,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) },
diff --git a/src/components/bid-record/BidRecordList.vue b/src/components/bid-record/BidRecordList.vue
index 37a2d4d..ea741d4 100644
--- a/src/components/bid-record/BidRecordList.vue
+++ b/src/components/bid-record/BidRecordList.vue
@@ -13,7 +13,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">
@@ -233,7 +236,7 @@ import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
 export default {
   name: "BidDetail",
   components: {
-    "item-master-image-modal": ItemMasterImageModal
+    "item-master-image-modal": ItemMasterImageModal,
   },
   data() {
     return {
@@ -242,6 +245,7 @@ export default {
       isSuccess: false,
       theData: "",
       date: "",
+      lelongDetail: "",
       reloadImageComponent: 0,
       // userId: localStorage.getItem("id"),
     };
@@ -274,6 +278,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;
@@ -296,18 +301,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>
\ No newline at end of file
diff --git a/src/components/bid-record/TheBidRecord.vue b/src/components/bid-record/TheBidRecord.vue
index a4a9e29..55e3256 100644
--- a/src/components/bid-record/TheBidRecord.vue
+++ b/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>
diff --git a/src/components/cart/CartListNew.vue b/src/components/cart/CartListNew.vue
index 5c97064..b33b4a0 100644
--- a/src/components/cart/CartListNew.vue
+++ b/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>
@@ -938,17 +949,24 @@ export default {
   min-height: 70vh;
 }
 
-.style-info {
-  background: #e4f8f0;
-  border: solid #1ea97c;
+.info-teruskan {
+  background: #ffe7e6;
+  border: solid #ff5757;
   border-width: 0px;
-  color: #1ea97c;
-  font-size: 1rem;
-  align-items: center;
-  display: flex;
+  color: #ff5757;
   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>
\ No newline at end of file
diff --git a/src/components/home/LelongNextDetail.vue b/src/components/home/LelongNextDetail.vue
index 751130e..071bcd9 100644
--- a/src/components/home/LelongNextDetail.vue
+++ b/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>
diff --git a/src/components/home/LelongToday.vue b/src/components/home/LelongToday.vue
index 4ac9c74..24d21d6 100644
--- a/src/components/home/LelongToday.vue
+++ b/src/components/home/LelongToday.vue
@@ -2,7 +2,7 @@
   <Card style="margin-bottom: 1em">
     <template #title>
       <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"
diff --git a/src/components/home/LelongTodayDetail.vue b/src/components/home/LelongTodayDetail.vue
index 87cad1c..9922f2d 100644
--- a/src/components/home/LelongTodayDetail.vue
+++ b/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>
@@ -70,7 +70,7 @@ export default {
           },
         })
         .then((response) => {
-          console.log("liveData", response);
+          // console.log("liveData", response);
           if (response.data.success == true) {
             this.responseData = true;
             this.response = response.data.lelong;
diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index 09e4af7..86437de 100644
--- a/src/components/list/ListItem.vue
+++ b/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>
diff --git a/src/components/list/TheList.vue b/src/components/list/TheList.vue
index 6406d5b..ce7d4b1 100644
--- a/src/components/list/TheList.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/result/ResultMain.vue b/src/components/result/ResultMain.vue
index fb5bf2f..934e324 100644
--- a/src/components/result/ResultMain.vue
+++ b/src/components/result/ResultMain.vue
@@ -15,7 +15,7 @@
     <div v-if="isSuccess">
       <Card>
         <template #title>
-          <div class="font-normal">Keputusan Lelongan</div>
+          <div class="font-normal">Bidaan Yang Berjaya</div>
         </template>
         <template #content>
           <div class="overflow-x-auto">