refactor: show expiratio date

src/components/03_customer-management/ExpiratioDate.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+defineProps<{
+  expirationDate: Date;
+}>();
+
+function calculateDaysUntilExpire(expireDate: Date): number {
+  const today = new Date();
+  const expire = new Date(expireDate);
+  const diffInTime = expire.getTime() - today.getTime();
+  const diffInDays = Math.ceil(diffInTime / (1000 * 60 * 60 * 24));
+
+  return diffInDays;
+}
+</script>
+
+<template>
+  <template v-if="calculateDaysUntilExpire(expirationDate) <= 90">
+    <q-badge color="red" class="text-weight-bold">
+      {{
+        calculateDaysUntilExpire(expirationDate) > 0
+          ? 'จะครบกำหนดในอีก'
+          : calculateDaysUntilExpire(expirationDate) === 0
+            ? 'ครบกำหนด'
+            : 'เลยกำหนด'
+      }}
+      {{
+        calculateDaysUntilExpire(expirationDate) > 0
+          ? calculateDaysUntilExpire(expirationDate)
+          : calculateDaysUntilExpire(expirationDate) === 0
+            ? ''
+            : calculateDaysUntilExpire(expirationDate) * -1
+      }}
+      <template v-if="calculateDaysUntilExpire(expirationDate) !== 0">
+        วัน
+      </template>
+    </q-badge>
+  </template>
+</template>
+
+<style scoped></style>

src/pages/03_customer-management/MainPage.vue

@@ -28,6 +28,7 @@ import {
   UndoButton,
 } from 'components/button';
 
+import ExpiratioDate from 'components/03_customer-management/ExpiratioDate.vue';
 import { AddressForm } from 'components/form';
 import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
 import ItemCard from 'src/components/ItemCard.vue';
@@ -2907,6 +2908,10 @@ const emptyCreateDialog = ref(false);
                 <template v-slot:expiryDate>
                   {{ $t('general.expirationDate') }} :
                   {{ dateFormat(value.expireDate) }}
+                  <ExpiratioDate
+                    v-if="value.id !== undefined"
+                    :expiration-date="value.expireDate"
+                  />
                 </template>
 
                 <template v-slot:button>
@@ -4335,6 +4340,10 @@ const emptyCreateDialog = ref(false);
                   <template v-slot:expiryDate>
                     {{ $t('general.expirationDate') }} :
                     {{ dateFormat(value.expireDate) }}
+                    <ExpiratioDate
+                      v-if="value.id !== undefined"
+                      :expiration-date="value.expireDate"
+                    />
                   </template>
 
                   <template v-slot:button>