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>