From 667058cbefcb977d1cee3e1293124028b7bb31a6 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 25 Oct 2024 17:08:19 +0700
Subject: [PATCH] refactor: calculate days expire

---
 src/pages/05_quotation/QuotationForm.vue | 33 ++++++++++++++++++++----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 867b117d..55aa47d9 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -722,11 +722,11 @@ const statusQuotationForm = ref<
         </span>
       </div>
 
-      <div class="column col-2 " style="gap: 10px;">
+      <div class="column col-2" style="gap: 10px">
         <div class="row justify-end">
           <span class="rounded flex flex-center q-pa-xs badge-color">
-            &#128900
-            {{$t('general.laborIdentified')}}
+            &#128900;
+            {{ $t('general.laborIdentified') }}
           </span>
         </div>
         <div
@@ -744,9 +744,32 @@ const statusQuotationForm = ref<
               "
             >
               <q-icon name="mdi-calendar-range" />
-              {{$t('quotation.receiptDialog.remain')}}
+              {{ $t('quotation.receiptDialog.remain') }}
+            </div>
+            <div class="col-6 flex flex-center">
+              <span
+                v-if="calculateDaysUntilExpire(quotationFormData.dueDate) <= 0"
+              >
+                {{
+                  $t(
+                    `general.${
+                      calculateDaysUntilExpire(quotationFormData.dueDate) > 0
+                        ? 'beDue'
+                        : calculateDaysUntilExpire(
+                              quotationFormData.dueDate,
+                            ) === 0
+                          ? 'due'
+                          : 'overDue'
+                    }`,
+                  )
+                }}
+              </span>
+
+              <span v-else>
+                {{ calculateDaysUntilExpire(quotationFormData.dueDate) }}
+                {{ $t('general.day') }}
+              </span>
             </div>
-            <div class="col-6 flex flex-center"> {{$t('general.day')}}</div>
           </div>
         </div>
       </div>