diff --git a/app/components/Modal.vue b/app/components/Modal.vue
index 0cd6b5d..86cf7ab 100644
--- a/app/components/Modal.vue
+++ b/app/components/Modal.vue
@@ -129,12 +129,14 @@ const doClick = function (e) {
 };
 
 onMounted(() => {
-  document.documentElement.classList.add("is-clipped");
-  window.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") closeModal();
-  });
-  const collection = document.getElementsByClassName("modal-background");
-  count = collection.length;
+  if (Object.values(props).some((x) => isNotNil(x))) {
+    document.documentElement.classList.add("is-clipped");
+    window.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") closeModal();
+    });
+    const collection = document.getElementsByClassName("modal-background");
+    count = collection.length;
+  }
 });
 
 onUnmounted(() => {
diff --git a/app/components/accounting/AccountView.vue b/app/components/accounting/AccountView.vue
index c73f548..623cbed 100644
--- a/app/components/accounting/AccountView.vue
+++ b/app/components/accounting/AccountView.vue
@@ -41,7 +41,7 @@
         <div class="field">
           <label class="label">{{ $lang("open-date") }}:</label>
           <div class="control">
-            {{ `${$dayjs(record.create_time).format("DD/MM/YYYY")}` }}
+            {{ `${$dayjs(record.create_time).format("L")}` }}
           </div>
         </div>
       </div>
diff --git a/app/components/accounting/DebtView.vue b/app/components/accounting/DebtView.vue
index 8a19ff2..3cd8385 100644
--- a/app/components/accounting/DebtView.vue
+++ b/app/components/accounting/DebtView.vue
@@ -407,7 +407,7 @@ async function loadData() {
         remainingTTTHNV = Math.max(0, remainingTTTHNV);
 
         return {
-          to_date: sch.to_date ? $dayjs(sch.to_date).format("DD/MM/YYYY") : "—",
+          to_date: sch.to_date ? $dayjs(sch.to_date).format("L") : "—",
           amount: scheduleAmount,
           luy_ke_sang_dot: luyKeSangDot,
           thuc_thanh_toan: thucThanhToan,
@@ -433,7 +433,7 @@ async function loadData() {
         customer_code: txn.customer__code || "",
         customer_name: txn.customer__fullname || "",
         trade_code: txn.product__trade_code || txn.code || "",
-        contract_date: txn.date ? $dayjs(txn.date).format("DD/MM/YYYY") : "—",
+        contract_date: txn.date ? $dayjs(txn.date).format("L") : "—",
         contract_date_raw: txn.date,
         sale_price: salePriceNum,
         ttthnv_paid: ttthnvPaid,
diff --git a/app/components/accounting/InternalEntry.vue b/app/components/accounting/InternalEntry.vue
index 8f80747..d1faccd 100644
--- a/app/components/accounting/InternalEntry.vue
+++ b/app/components/accounting/InternalEntry.vue
@@ -37,7 +37,7 @@
         <div class="field">
           <label class="label">Ngày hạch toán:</label>
           <div class="control">
-            {{ $dayjs(record.date).format("DD/MM/YYYY") }}
+            {{ $dayjs(record.date).format("L") }}
           </div>
         </div>
       </div>
@@ -102,7 +102,7 @@
         <div class="field">
           <label class="label">{{ $lang("time") }}:</label>
           <div class="control">
-            {{ `${$dayjs(record.create_time).format("DD/MM/YYYY")}` }}
+            {{ `${$dayjs(record.create_time).format("L")}` }}
           </div>
         </div>
       </div>
@@ -209,7 +209,7 @@
                 >
               </td>
               <td class="has-text-centered">
-                {{ $dayjs(item.date).format("DD/MM/YYYY HH:mm:ss") }}
+                {{ $dayjs(item.date).format("L HH:mm:ss") }}
               </td>
             </tr>
           </tbody>
diff --git a/app/components/application/ContractPaymentUpload.vue b/app/components/application/ContractPaymentUpload.vue
index a69063e..ee081fe 100644
--- a/app/components/application/ContractPaymentUpload.vue
+++ b/app/components/application/ContractPaymentUpload.vue
@@ -77,7 +77,7 @@
                 </p>
                 <p class="is-size-7 has-text-white-bis">
                   {{ $formatFileSize(file.file__size) }} •
-                  {{ $dayjs(file.create_time).format("DD/MM/YYYY HH:mm") }}
+                  {{ $dayjs(file.create_time).format("L HH:mm") }}
                 </p>
               </div>
 
diff --git a/app/components/application/PaymentSchedule.vue b/app/components/application/PaymentSchedule.vue
index 6dd7d83..51bbe12 100644
--- a/app/components/application/PaymentSchedule.vue
+++ b/app/components/application/PaymentSchedule.vue
@@ -853,8 +853,8 @@ export default {
             originalCalculatedAmount: originalAmount,
             discountAmount: earlyDetail.discountAmount,
             netAmount: earlyDetail.netAmount,
-            actualDueDate: this.calculationStartDate.format("DD/MM/YYYY"),
-            dueDate: plan.days > 0 ? this.calculationStartDate.add(plan.days, "day").format("DD/MM/YYYY") : null,
+            actualDueDate: this.calculationStartDate.format("L"),
+            dueDate: plan.days > 0 ? this.calculationStartDate.add(plan.days, "day").format("L") : null,
             displayValue: plan.type === 1 ? `${plan.value}%` : this.$numtoString(plan.value),
           };
         } else {
@@ -865,7 +865,7 @@ export default {
             discountAmount: 0,
             netAmount: originalAmount,
             actualDueDate: null,
-            dueDate: plan.days > 0 ? this.calculationStartDate.add(plan.days, "day").format("DD/MM/YYYY") : null,
+            dueDate: plan.days > 0 ? this.calculationStartDate.add(plan.days, "day").format("L") : null,
             displayValue: plan.type === 1 ? `${plan.value}%` : this.$numtoString(plan.value),
           };
         }
@@ -891,7 +891,7 @@ export default {
           const daysDiff = plan.days || 0;
           if (daysDiff > 0) {
             const dueDateObj = this.calculationStartDate.add(daysDiff, "day");
-            dueDate = dueDateObj.format("DD/MM/YYYY");
+            dueDate = dueDateObj.format("L");
           }
 
           return {
@@ -927,7 +927,7 @@ export default {
         isEarlyPaymentMerged: true,
         calculatedAmount: this.totalEarlyPayment - (this.selectedPolicy.deposit || 0),
         days: 0,
-        dueDate: this.calculationStartDate.format("DD/MM/YYYY"),
+        dueDate: this.calculationStartDate.format("L"),
         payment_note: "Thanh toán sớm gộp",
         displayValue: "-",
         isFirstPlan: true,
@@ -942,7 +942,7 @@ export default {
         const daysDiff = plan.days || 0;
         if (daysDiff > 0) {
           const dueDateObj = this.calculationStartDate.add(daysDiff, "day");
-          dueDate = dueDateObj.format("DD/MM/YYYY");
+          dueDate = dueDateObj.format("L");
         }
 
         displayPlans.push({
@@ -963,9 +963,7 @@ export default {
     calculatedPlans() {
       if (this.isPrecalculated && this.paymentPlans && this.paymentPlans.length > 0) {
         return this.paymentPlans.map((plan, index) => {
-          const dueDate = plan.due_days
-            ? this.calculationStartDate.add(plan.due_days, "day").format("DD/MM/YYYY")
-            : null;
+          const dueDate = plan.due_days ? this.calculationStartDate.add(plan.due_days, "day").format("L") : null;
           return {
             ...plan,
             displayCycle: plan.cycle || index + 1,
@@ -1039,7 +1037,7 @@ export default {
       return this.enableEarlyPayment;
     },
     formatDate(date) {
-      return dayjs(date).format("DD/MM/YYYY");
+      return dayjs(date).format("L");
     },
 
     handleEarlyPaymentToggle() {
diff --git a/app/components/application/PaymentSchedulePresentation.vue b/app/components/application/PaymentSchedulePresentation.vue
index bf046a3..4c3fd89 100644
--- a/app/components/application/PaymentSchedulePresentation.vue
+++ b/app/components/application/PaymentSchedulePresentation.vue
@@ -721,7 +721,7 @@ const totalPaid = computed(() => {
 
 const formatDate = (date) => {
   if (!date) return "-";
-  return dayjs(date).format("DD/MM/YYYY");
+  return dayjs(date).format("L");
 };
 </script>
 
diff --git a/app/components/application/PhaseAdvance.vue b/app/components/application/PhaseAdvance.vue
index 0f0dd1b..50ce9a0 100644
--- a/app/components/application/PhaseAdvance.vue
+++ b/app/components/application/PhaseAdvance.vue
@@ -1195,7 +1195,7 @@ function handleContractUpdated(eventData) {
 
 function formatDate(dateString) {
   if (!dateString) return "-";
-  return dayjs(dateString).format("DD/MM/YYYY");
+  return dayjs(dateString).format("L");
 }
 
 function showCustomerDetails() {
diff --git a/app/components/customer/CustomerView.vue b/app/components/customer/CustomerView.vue
index 619be86..ed74802 100644
--- a/app/components/customer/CustomerView.vue
+++ b/app/components/customer/CustomerView.vue
@@ -69,7 +69,7 @@
           <div class="field">
             <label class="label">Ngày cấp</label>
             <div class="control">
-              {{ record.issued_date ? $dayjs(record.issued_date).format("DD/MM/YYYY") : "/" }}
+              {{ record.issued_date ? $dayjs(record.issued_date).format("L") : "/" }}
             </div>
           </div>
         </div>
@@ -129,10 +129,7 @@
           <div class="field">
             <label class="label">Thời gian tạo</label>
             <div class="control">
-              <span
-                >{{ $dayjs(record.create_time).format("DD/MM/YYYY") }}
-                {{ $dayjs(record.create_time).format("HH:mm") }}</span
-              >
+              <span>{{ $dayjs(record.create_time).format("L") }} {{ $dayjs(record.create_time).format("HH:mm") }}</span>
             </div>
           </div>
         </div>
@@ -153,7 +150,7 @@
             <label class="label">Thời gian cập nhật</label>
             <div class="control">
               <span>
-                {{ record.update_time ? $dayjs(record.update_time).format("DD/MM/YYYY HH:mm") : "/" }}
+                {{ record.update_time ? $dayjs(record.update_time).format("L HH:mm") : "/" }}
               </span>
             </div>
           </div>
diff --git a/app/components/datatable/PivotDataView.vue b/app/components/datatable/PivotDataView.vue
index 6f2dbd5..13a20aa 100644
--- a/app/components/datatable/PivotDataView.vue
+++ b/app/components/datatable/PivotDataView.vue
@@ -529,7 +529,7 @@ const formatCellValue = (value, field) => {
   }
 
   if (field.format === "date") {
-    return $dayjs(value).format("DD/MM/YYYY");
+    return $dayjs(value).format("L");
   }
 
   return value;
diff --git a/app/components/datatable/format/FormatDate.vue b/app/components/datatable/format/FormatDate.vue
index 53822ef..3110b69 100644
--- a/app/components/datatable/format/FormatDate.vue
+++ b/app/components/datatable/format/FormatDate.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :style="color ? `color:${color}` : ''">{{ $dayjs(date).format("DD/MM/YYYY") }}</span>
+  <span :style="color ? `color:${color}` : ''">{{ $dayjs(date).format("L") }}</span>
 </template>
 <script setup>
 const { $dayjs } = useNuxtApp();
diff --git a/app/components/datepicker/Datepicker.vue b/app/components/datepicker/Datepicker.vue
index 5450013..51b3293 100644
--- a/app/components/datepicker/Datepicker.vue
+++ b/app/components/datepicker/Datepicker.vue
@@ -1,19 +1,13 @@
 <template>
   <div
     class="control has-icons-left"
-    :id="docid"
+    ref="datepickerRoot"
   >
-    <div
-      :class="`dropdown ${pos || ''} ${focused ? 'is-active' : ''}`"
-      style="width: 100%"
-    >
-      <div
-        class="dropdown-trigger"
-        style="width: 100%"
-      >
+    <div :class="['dropdown w-full', pos, focused && 'is-active']">
+      <div class="dropdown-trigger w-full">
         <input
           :disabled="disabled"
-          :class="`input ${error ? 'is-danger' : ''} ${disabled ? 'has-text-dark' : ''}`"
+          :class="['input', error && 'is-danger', disabled && 'has-text-dark']"
           type="text"
           placeholder="DD/MM/YYYY"
           maxlength="10"
@@ -33,7 +27,7 @@
           <PickDay
             v-bind="{ date, maxdate }"
             @date="selectDate"
-          ></PickDay>
+          />
         </div>
       </div>
     </div>
@@ -41,119 +35,131 @@
       <Icon
         name="material-symbols:calendar-today-outline-rounded"
         :size="21"
-        class="has-text-grey"
+        :class="focused ? 'has-text-primary' : 'has-text-grey'"
       />
     </span>
   </div>
 </template>
-<script>
-export default {
-  props: ["record", "attr", "position", "mindate", "maxdate", "disabled"],
-  data() {
-    return {
-      date: undefined,
-      show: undefined,
-      error: false,
-      focused: false,
-      docid: this.$id(),
-      count1: 0,
-      count2: 0,
-      pos: undefined,
-    };
-  },
-  created() {
-    this.getPos();
-    if (this.record) {
-      this.date = this.record[this.attr] ? this.$copy(this.record[this.attr]) : undefined;
-      if (this.date) this.show = this.$dayjs(this.date).format("DD/MM/YYYY");
+<script setup>
+const props = defineProps({
+  record: Object,
+  attr: String,
+  position: String,
+  mindate: String,
+  maxdate: String,
+  disabled: Boolean,
+});
+
+const emit = defineEmits(["date"]);
+const { $id, $copy, $dayjs, $empty } = useNuxtApp();
+
+const date = ref();
+const show = ref();
+const error = ref(false);
+const focused = ref(false);
+const count1 = ref(0);
+const count2 = ref(0);
+const pos = ref();
+const datepickerRoot = useTemplateRef("datepickerRoot");
+
+function getPos() {
+  switch (props.position) {
+    case "is-top-left":
+      pos.value = "is-up is-left";
+      break;
+    case "is-top-right":
+      pos.value = "is-up is-right";
+      break;
+    case "is-bottom-left":
+      pos.value = "is-left";
+      break;
+    case "is-bottom-right":
+      pos.value = "is-right";
+      break;
+  }
+}
+
+function initializeDate() {
+  if (props.record) {
+    date.value = props.record[props.attr] ? $copy(props.record[props.attr]) : undefined;
+    if (date.value) show.value = $dayjs(date.value).format("L");
+  }
+}
+
+function pressEnter() {
+  checkDate();
+  if (!error.value) focused.value = false;
+}
+
+function setFocus() {
+  focused.value = true;
+  count1.value = 0;
+  count2.value = 0;
+}
+
+function lostFocus() {
+  setTimeout(() => {
+    if (focused.value && count1.value === 0) focused.value = false;
+  }, 200);
+}
+
+function processEvent(event) {
+  count2.value += 1;
+  const isClickInside = datepickerRoot.value.contains(event.target);
+  if (!isClickInside && focused.value) {
+    if (count2.value - 1 !== count1.value) {
+      focused.value = false;
+      count1.value = 0;
+      count2.value = 0;
     }
+  }
+}
+
+function doClick() {
+  count1.value += 1;
+}
+
+function selectDate(v) {
+  date.value = v;
+  show.value = $dayjs(v).format("L");
+  emit("date", date.value);
+  if (focused.value) focused.value = false;
+  count1.value = 0;
+  count2.value = 0;
+}
+
+function getDate(value) {
+  let v = value.replace(/\D/g, "").slice(0, 10);
+  if (v.length >= 5) {
+    return `${v.slice(0, 2)}/${v.slice(2, 4)}/${v.slice(4)}`;
+  } else if (v.length >= 3) {
+    return `${v.slice(0, 2)}/${v.slice(2)}`;
+  }
+  return v;
+}
+
+function checkDate() {
+  if (!focused.value) setFocus();
+  error.value = false;
+  date.value = undefined;
+  if ($empty(show.value)) return emit("date", null);
+  show.value = getDate(show.value);
+  let val = `${show.value.substring(6, 10)}-${show.value.substring(3, 5)}-${show.value.substring(0, 2)}`;
+  if ($dayjs(val, "YYYY-MM-DD", true).isValid()) {
+    date.value = val;
+    emit("date", date.value);
+  } else error.value = true;
+}
+
+onMounted(() => {
+  getPos();
+  initializeDate();
+});
+
+watch(
+  () => props.record,
+  () => {
+    initializeDate();
   },
-  watch: {
-    record: function (newVal) {
-      if (this.record) {
-        this.date = this.record[this.attr] ? this.$copy(this.record[this.attr]) : undefined;
-        if (this.date) this.show = this.$dayjs(this.date).format("DD/MM/YYYY");
-      }
-    },
-  },
-  methods: {
-    pressEnter() {
-      this.checkDate();
-      if (!this.error) this.focused = false;
-    },
-    setFocus() {
-      this.focused = true;
-      this.count1 = 0;
-      this.count2 = 0;
-    },
-    lostFocus() {
-      let self = this;
-      setTimeout(() => {
-        if (self.focused && self.count1 === 0) self.focused = false;
-      }, 200);
-    },
-    processEvent(event) {
-      var doc = document.getElementById(this.docid);
-      if (!doc) return;
-      this.count2 += 1;
-      var isClickInside = false;
-      isClickInside = doc.contains(event.target);
-      if (!isClickInside && this.focused) {
-        if (this.count2 - 1 !== this.count1) {
-          this.focused = false;
-          this.count1 = 0;
-          this.count2 = 0;
-        }
-      }
-    },
-    doClick() {
-      this.count1 += 1;
-    },
-    selectDate(v) {
-      this.date = v;
-      this.show = this.$dayjs(v).format("DD/MM/YYYY");
-      this.$emit("date", this.date);
-      if (this.focused) this.focused = false;
-      this.count1 = 0;
-      this.count2 = 0;
-    },
-    getDate(value) {
-      let v = value.replace(/\D/g, "").slice(0, 10);
-      if (v.length >= 5) {
-        return `${v.slice(0, 2)}/${v.slice(2, 4)}/${v.slice(4)}`;
-      } else if (v.length >= 3) {
-        return `${v.slice(0, 2)}/${v.slice(2)}`;
-      }
-      return v;
-    },
-    checkDate() {
-      if (!this.focused) this.setFocus();
-      this.error = false;
-      this.date = undefined;
-      if (this.$empty(this.show)) return this.$emit("date", null);
-      this.show = this.getDate(this.show);
-      let val = `${this.show.substring(6, 10)}-${this.show.substring(3, 5)}-${this.show.substring(0, 2)}`;
-      if (this.$dayjs(val, "YYYY-MM-DD", true).isValid()) {
-        this.date = val;
-        this.$emit("date", this.date);
-      } else this.error = true;
-    },
-    getPos() {
-      switch (this.position) {
-        case "is-top-left":
-          this.pos = "is-up is-left";
-          break;
-        case "is-top-right":
-          this.pos = "is-up is-right";
-          break;
-        case "is-bottom-left":
-          this.pos = "is-left";
-          break;
-        case "is-bottom-right":
-          this.pos = "is-right";
-          break;
-      }
-    },
-  },
-};
+);
 </script>
diff --git a/app/components/datepicker/EventSummary.vue b/app/components/datepicker/EventSummary.vue
index 996b8ca..42f2ba8 100644
--- a/app/components/datepicker/EventSummary.vue
+++ b/app/components/datepicker/EventSummary.vue
@@ -86,7 +86,7 @@
           <span
             class="has-text-primary hyperlink"
             @click="chooseToday()"
-            >{{ $dayjs(today).format("DD/MM/YYYY") }}</span
+            >{{ $dayjs(today).format("L") }}</span
           >
         </div>
       </template>
diff --git a/app/components/datepicker/PickDay.vue b/app/components/datepicker/PickDay.vue
index 403bcda..9659e61 100644
--- a/app/components/datepicker/PickDay.vue
+++ b/app/components/datepicker/PickDay.vue
@@ -56,26 +56,26 @@
         </div>
       </div>
       <div
-        :class="`columns is-mobile mx-0 mb-1 ${i === weeks.length - 1 ? 'mb-1' : ''}`"
         v-for="(v, i) in weeks"
         :key="i"
+        :class="`columns is-mobile mx-0 mb-1 ${i === weeks.length - 1 ? 'mb-1' : ''}`"
       >
         <div
-          class="column p-0 is-flex is-justify-content-center is-align-items-center"
-          style="width: 40px; height: 32px"
           v-for="(m, h) in v.dates"
           :key="h"
+          class="column p-0 is-flex is-justify-content-center is-align-items-center"
+          style="width: 40px; height: 32px"
         >
           <span
-            class="fs-13 has-text-grey-80"
             v-if="m.disable"
+            class="fs-13 has-text-grey-80"
           >
             {{ m.dayPrint }}
           </span>
           <span
+            v-else
             class="fs-13 is-clickable"
             @click="choose(m)"
-            v-else
           >
             <span
               style="width: 25px; height: 25px"
@@ -96,36 +96,33 @@
       <hr class="my-1" />
       <div class="mt-2 fs-14">
         <span class="ml-2">Hôm nay: </span>
-        <a
-          class="has-text-primary"
-          @click="chooseToday()"
-          >{{ $dayjs(today).format("DD/MM/YYYY") }}</a
-        >
+        <a @click="chooseToday()">{{ $dayjs(today).format("L") }}</a>
       </div>
     </div>
     <PickMonth
       v-else-if="type === 'months'"
       @month="selectMonth"
-    ></PickMonth>
+    />
     <PickYear
       v-else-if="type === 'years'"
       v-bind="{ year, month, action }"
       @year="selectYear"
       @caption="changeCaption"
-    ></PickYear>
+    />
   </div>
 </template>
 <script setup>
 import PickMonth from "@/components/datepicker/PickMonth";
 import PickYear from "@/components/datepicker/PickYear";
+
 const { $id, $dayjs, $unique } = useNuxtApp();
 const emit = defineEmits(["date"]);
-var props = defineProps({
+const props = defineProps({
   date: String,
   maxdate: String,
 });
-var dates = [];
-var dateOfWeek = [
+const dates = ref([]);
+const dateOfWeek = [
   { id: 0, text: "CN" },
   { id: 1, text: "T2" },
   { id: 2, text: "T3" },
@@ -134,18 +131,19 @@ var dateOfWeek = [
   { id: 5, text: "T6" },
   { id: 6, text: "T7" },
 ];
-var weeks = ref([]);
-var year = ref(undefined);
-var month = undefined;
-var type = ref("days");
-var caption = ref(undefined);
-var action = ref(undefined);
-var curdate = undefined;
-var today = new Date();
+const weeks = ref([]);
+const year = ref();
+let month;
+const type = ref("days");
+const caption = ref();
+const action = ref();
+const curdate = ref();
+const today = new Date();
+
 function showDate() {
-  curdate = props.date ? props.date.replaceAll("-", "/") : undefined;
-  year.value = $dayjs(curdate || today).year();
-  month = $dayjs(curdate || today).month() + 1;
+  curdate.value = props.date ? props.date.replaceAll("-", "/") : undefined;
+  year.value = $dayjs(curdate.value || today).year();
+  month = $dayjs(curdate.value || today).month() + 1;
   getDates();
 }
 function chooseToday() {
@@ -169,12 +167,12 @@ function selectYear(v) {
 }
 function getDates() {
   caption.value = undefined;
-  dates = allDaysInMonth(year.value, month);
-  weeks.value = $unique(dates, ["week"]).map((v) => {
+  dates.value = allDaysInMonth(year.value, month);
+  weeks.value = $unique(dates.value, ["week"]).map((v) => {
     return { week: v.week };
   });
   weeks.value.map((v) => {
-    v.dates = dates.filter((x) => x.week === v.week);
+    v.dates = dates.value.filter((x) => x.week === v.week);
   });
 }
 function nextMonth() {
@@ -248,7 +246,7 @@ showDate();
 // change date
 watch(
   () => props.date,
-  (newVal, oldVal) => {
+  () => {
     showDate();
   },
 );
diff --git a/app/components/datepicker/PickMonth.vue b/app/components/datepicker/PickMonth.vue
index 5ff4711..645cf19 100644
--- a/app/components/datepicker/PickMonth.vue
+++ b/app/components/datepicker/PickMonth.vue
@@ -1,19 +1,11 @@
 <template>
   <div class="columns is-mobile is-multiline mx-0">
     <span
+      v-for="month in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
+      :id="String(month)"
       class="column has-text-centered is-4 is-clickable fs-14"
-      v-for="v in months"
-      @click="$emit('month', v)"
-      >Tháng {{ v }}</span
-    >
+      @click="$emit('month', month)"
+      >Tháng {{ month }}
+    </span>
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-    };
-  },
-};
-</script>
diff --git a/app/components/datepicker/PickYear.vue b/app/components/datepicker/PickYear.vue
index e9d4a74..b51fa84 100644
--- a/app/components/datepicker/PickYear.vue
+++ b/app/components/datepicker/PickYear.vue
@@ -1,65 +1,53 @@
 <template>
   <div class="columns is-mobile is-multiline mx-0">
     <span
-      v-for="(v, i) in years"
-      class="column is-4 has-text-centered is-clickable fs-14"
-      :class="i === 0 || i === 11 ? 'has-text-grey-light' : ''"
-      @click="$emit('year', v)"
-      >{{ v }}</span
+      v-for="(year, i) in years"
+      :key="year"
+      :class="['column is-4 has-text-centered is-clickable fs-14', (i === 0 || i === 11) && 'has-text-grey-light']"
+      @click="$emit('year', year)"
     >
+      {{ year }}
+    </span>
   </div>
 </template>
-<script>
-export default {
-  props: ["year", "month", "action"],
-  data() {
-    return {
-      years: [],
-    };
+<script setup>
+const props = defineProps({
+  year: Number,
+  month: Number,
+  action: Object,
+});
+
+const emit = defineEmits(["caption"]);
+const years = ref(
+  Array.from({ length: 12 })
+    .fill(props.year)
+    .map((y, i) => y + i - 6),
+);
+emit("caption", `${years.value[1]} – ${years.value[10]}`);
+
+watch(
+  () => props.action,
+  (newVal) => {
+    if (newVal.name === "next") next();
+    if (newVal.name === "previous") previous();
   },
-  created() {
-    this.years = [this.year];
-    for (let i = 1; i < 7; i++) {
-      this.years.push(this.year + i);
-      this.years.push(this.year - i);
-    }
-    this.years.sort(function (a, b) {
-      return a - b;
-    });
-    this.years = this.years.slice(0, 12);
-    this.$emit("caption", `${this.years[1]}-${this.years[10]}`);
-  },
-  watch: {
-    action: function (newVal) {
-      if (newVal.name === "next") this.next();
-      if (newVal.name === "previous") this.previous();
-    },
-  },
-  methods: {
-    next() {
-      let year = this.years[this.years.length - 1];
-      this.years = [];
-      for (let i = 0; i < 12; i++) {
-        this.years.push(year + i);
-      }
-      this.years.sort(function (a, b) {
-        return a - b;
-      });
-      this.years = this.years.slice(0, 12);
-      this.$emit("caption", `${this.years[1]}-${this.years[10]}`);
-    },
-    previous() {
-      let year = this.years[0];
-      this.years = [];
-      for (let i = 0; i < 12; i++) {
-        this.years.push(year - i);
-      }
-      this.years.sort(function (a, b) {
-        return a - b;
-      });
-      this.years = this.years.slice(0, 12);
-      this.$emit("caption", `${this.years[1]}-${this.years[10]}`);
-    },
-  },
-};
+);
+
+watch(years, () => {
+  emit("caption", `${years.value[1]} – ${years.value[10]}`);
+});
+
+function next() {
+  const baseYear = years.value[11];
+  years.value = Array.from({ length: 12 })
+    .fill(baseYear)
+    .map((y, i) => y + i - 6);
+}
+
+function previous() {
+  const baseYear = years.value[0];
+  years.value = Array.from({ length: 12 })
+    .fill(baseYear)
+    .map((y, i) => y + i - 6);
+}
 </script>
diff --git a/app/components/debt/Due.vue b/app/components/debt/Due.vue
index fbc652a..d227efa 100644
--- a/app/components/debt/Due.vue
+++ b/app/components/debt/Due.vue
@@ -279,7 +279,7 @@ async function sendEmails() {
         {
           ref: paymentScheduleData[i].txn_detail__transaction__product,
           user: $store.login.id,
-          detail: `Đã gửi email thông báo nhắc nợ cho sản phẩm ${paymentScheduleData[i].txn_detail__transaction__product__trade_code} vào lúc ${$dayjs().format("HH:mm ngày DD/MM/YYYY")}.`,
+          detail: `Đã gửi email thông báo nhắc nợ cho sản phẩm ${paymentScheduleData[i].txn_detail__transaction__product__trade_code} vào lúc ${$dayjs().format("HH:mm ngày L")}.`,
         },
         undefined,
         false,
diff --git a/app/components/debt/Overdue.vue b/app/components/debt/Overdue.vue
index 76a52e1..f5c5be9 100644
--- a/app/components/debt/Overdue.vue
+++ b/app/components/debt/Overdue.vue
@@ -278,7 +278,7 @@ async function sendEmails() {
         {
           ref: paymentScheduleData[i].txn_detail__transaction__product,
           user: $store.login.id,
-          detail: `Đã gửi email thông báo quá hạn cho sản phẩm ${paymentScheduleData[i].txn_detail__transaction__product__trade_code} vào lúc ${$dayjs().format("HH:mm ngày DD/MM/YYYY")}.`,
+          detail: `Đã gửi email thông báo quá hạn cho sản phẩm ${paymentScheduleData[i].txn_detail__transaction__product__trade_code} vào lúc ${$dayjs().format("HH:mm ngày L")}.`,
         },
         undefined,
         false,
diff --git a/app/components/dialog/Error.vue b/app/components/dialog/Error.vue
index 3b81d05..d7b0edc 100644
--- a/app/components/dialog/Error.vue
+++ b/app/components/dialog/Error.vue
@@ -2,43 +2,48 @@
   <div>
     <div class="field is-grouped">
       <div
-        class="control is-expanded pr-3"
+        class="control is-expanded"
         v-html="content"
       ></div>
       <div class="control">
-        <SvgIcon v-bind="{ name: 'error.svg', type: 'danger', size: 24 }"></SvgIcon>
+        <Icon
+          name="material-symbols:cancel-rounded"
+          :size="24"
+          class="has-text-danger"
+        />
       </div>
     </div>
-    <p class="border-bottom mt-3 mb-5"></p>
+    <div class="mt-3 mb-5"></div>
     <div class="field is-grouped">
       <div class="control is-expanded">
         <button
-          class="button is-danger has-text-white"
+          class="button is-danger"
           @click="cancel()"
         >
           Đóng
         </button>
       </div>
       <div
-        class="control"
         v-if="duration"
+        class="control"
       >
         <CountDown
-          v-bind="{ duration: duration }"
+          :duration="duration"
           @close="cancel()"
-        ></CountDown>
+        />
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import { useStore } from "@/stores/index";
-const store = useStore();
-var props = defineProps({
+const props = defineProps({
   content: String,
   duration: Number,
 });
+
+const emit = defineEmits(["close"]);
+
 function cancel() {
-  this.$emit("close");
+  emit("close");
 }
 </script>
diff --git a/app/components/dialog/Info.vue b/app/components/dialog/Info.vue
index 55f32fe..114d15e 100644
--- a/app/components/dialog/Info.vue
+++ b/app/components/dialog/Info.vue
@@ -1,35 +1,37 @@
 <template>
   <div>
     <p v-html="content"></p>
-    <p class="border-bottom mt-3 mb-5"></p>
+    <div class="mt-3 mb-5"></div>
     <div class="field is-grouped">
       <div class="control is-expanded">
         <button
-          class="button is-dark"
+          class="button is-light"
           @click="cancel()"
         >
           Đóng
         </button>
       </div>
       <div
-        class="control"
         v-if="duration"
+        class="control"
       >
         <CountDown
-          v-bind="{ duration: duration }"
+          :duration="duration"
           @close="cancel()"
-        ></CountDown>
+        />
       </div>
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["content", "duration"],
-  methods: {
-    cancel() {
-      this.$emit("close");
-    },
-  },
-};
+<script setup>
+const props = defineProps({
+  content: String,
+  duration: Number,
+});
+
+const emit = defineEmits(["close"]);
+
+function cancel() {
+  emit("close");
+}
 </script>
diff --git a/app/components/dialog/Success.vue b/app/components/dialog/Success.vue
index 14962de..333406c 100644
--- a/app/components/dialog/Success.vue
+++ b/app/components/dialog/Success.vue
@@ -2,14 +2,18 @@
   <div>
     <div class="field is-grouped">
       <div
-        class="control is-expanded pr-3"
+        class="control is-expanded"
         v-html="content"
       ></div>
       <div class="control">
-        <SvgIcon v-bind="{ name: 'check2.svg', type: 'primary', size: 24 }"></SvgIcon>
+        <Icon
+          name="material-symbols:check-circle-rounded"
+          :size="24"
+          class="has-text-success"
+        />
       </div>
     </div>
-    <p class="border-bottom mt-3 mb-5"></p>
+    <div class="mt-3 mb-5"></div>
     <div class="field is-grouped">
       <div class="control is-expanded">
         <button
@@ -20,24 +24,26 @@
         </button>
       </div>
       <div
-        class="control"
         v-if="duration"
+        class="control"
       >
         <CountDown
-          v-bind="{ duration: duration }"
+          :duration="duration"
           @close="cancel()"
-        ></CountDown>
+        />
       </div>
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["content", "duration"],
-  methods: {
-    cancel() {
-      this.$emit("close");
-    },
-  },
-};
+<script setup>
+const props = defineProps({
+  content: String,
+  duration: Number,
+});
+
+const emit = defineEmits(["close"]);
+
+function cancel() {
+  emit("close");
+}
 </script>
diff --git a/app/components/media/FileUpload.vue b/app/components/media/FileUpload.vue
index 4d515e5..4a8381b 100644
--- a/app/components/media/FileUpload.vue
+++ b/app/components/media/FileUpload.vue
@@ -1,3 +1,4 @@
+<!-- extract logic to a composable -->
 <template>
   <div>
     <div
@@ -10,6 +11,7 @@
       >
         <input
           class="file-input"
+          ref="file-input"
           type="file"
           :id="docid"
           multiple
@@ -50,9 +52,10 @@ const props = defineProps({
 const emit = defineEmits(["files"]);
 const { $id, $snackbar, $upload } = useNuxtApp();
 
+const fileInput = useTemplateRef("file-input");
 const vtype = props.type || ["image"];
-const files = ref();
-const dataFiles = ref();
+const files = ref(); // files selected in <input>
+const dataFiles = ref(); // files returned by $upload
 const showmodal = ref();
 const docid = $id();
 
@@ -74,10 +77,9 @@ function getType(ext) {
 }
 
 function doChange() {
+  if (fileInput.value.files.length === 0) return;
   dataFiles.value = [];
-  const fileList = document.getElementById(docid).files;
-  files.value = Array.from(fileList);
-  if (files.value.length === 0) return;
+  files.value = Array.from(fileInput.value.files);
 
   // Xác định giá trị convert: "1" nếu convert được bật, "0" nếu không
   const convertValue = props.convert ? "1" : "0";
@@ -96,6 +98,7 @@ function doChange() {
     dataFiles.value.push(file);
   });
 
+  console.log("dataFiles.value", dataFiles.value);
   showmodal.value = {
     component: "media/UploadProgress",
     title: "Upload files",
@@ -103,19 +106,14 @@ function doChange() {
     height: "200px",
     vbind: { files: dataFiles.value },
   };
-  clearFileList();
-}
 
-function clearFileList() {
-  const fileInput = document.getElementById(docid);
-  const dt = new DataTransfer();
-  fileInput.files = dt.files;
+  fileInput.value.value = ""; // clear input
 }
 
 function getFiles(files) {
   emit("files", files);
-  setTimeout(() => {
-    showmodal.value = undefined;
-  }, 3000);
+  // setTimeout(() => {
+  //   showmodal.value = undefined;
+  // }, 3000);
 }
 </script>
diff --git a/app/components/media/UploadProgress.vue b/app/components/media/UploadProgress.vue
index 9ecd9c8..957c718 100644
--- a/app/components/media/UploadProgress.vue
+++ b/app/components/media/UploadProgress.vue
@@ -41,44 +41,43 @@
     </p>
   </div>
 </template>
-<script>
-export default {
-  props: ["files"],
-  data() {
-    return {
-      vfiles: this.$copy(this.files),
-      data: [],
-    };
-  },
-  created() {
-    let found = this.$find(this.vfiles, { error: true });
-    if (!found) this.upload();
-  },
-  methods: {
-    async doUpload(v, i) {
-      let file = this.files[i];
-      let rs = await this.$insertapi("upload", file.form, undefined, false);
-      v.status = rs === "error" ? "error" : "success";
-      this.vfiles[i] = v;
-      let obj = rs.rows[0];
-      obj.source = file;
-      this.data.push(obj);
-      this.checkDone();
-    },
-    async upload() {
-      for (let i = 0; i < this.vfiles.length; i++) {
-        let v = this.vfiles[i];
-        v.status = "uploading";
-        await this.doUpload(v, i);
-      }
-    },
-    checkDone() {
-      let found = this.vfiles.find((v) => !v.status || v.status === "uploading");
-      if (!found) {
-        this.$emit("files", this.data);
-        this.$emit("modalevent", { name: "files", data: this.data });
-      }
-    },
-  },
-};
+<script setup>
+const props = defineProps({
+  files: Array,
+});
+
+const emit = defineEmits(["files", "modalevent"]);
+const { $copy, $find, $insertapi } = useNuxtApp();
+const vfiles = ref($copy(props.files));
+const data = ref([]);
+
+const found = $find(vfiles.value, { error: true });
+if (!found) upload();
+
+async function doUpload(v, i) {
+  const file = props.files[i];
+  const rs = await $insertapi("upload", file.form, undefined, false);
+  v.status = rs === "error" ? "error" : "success";
+  vfiles.value[i] = v;
+  const obj = rs.rows[0];
+  obj.source = file;
+  data.value.push(obj);
+  checkDone();
+}
+
+async function upload() {
+  for (let i = 0; i < vfiles.value.length; i++) {
+    let v = vfiles.value[i];
+    v.status = "uploading";
+    await doUpload(v, i);
+  }
+}
+
+function checkDone() {
+  let found = vfiles.value.find((v) => !v.status || v.status === "uploading");
+  if (!found) {
+    emit("files", data.value);
+    emit("modalevent", { name: "files", data: data.value });
+  }
+}
 </script>
diff --git a/app/components/modal/EditDueDateModal.vue b/app/components/modal/EditDueDateModal.vue
index 7ad28f3..34d1518 100644
--- a/app/components/modal/EditDueDateModal.vue
+++ b/app/components/modal/EditDueDateModal.vue
@@ -269,7 +269,7 @@ const isUpdateValid = computed(() => {
 
 const formatDate = (dateString) => {
   if (!dateString) return "-";
-  return dayjs(dateString).format("DD/MM/YYYY");
+  return dayjs(dateString).format("L");
 };
 
 const fetchPaymentScheduleData = async () => {
diff --git a/app/components/modal/InternalEntry.vue b/app/components/modal/InternalEntry.vue
index 9000047..8f5e8d7 100644
--- a/app/components/modal/InternalEntry.vue
+++ b/app/components/modal/InternalEntry.vue
@@ -42,7 +42,7 @@
             <div class="field">
               <label class="label">{{ isVietnamese ? "Ngày bút toán" : "Date" }}</label>
               <div class="control">
-                <span>{{ entry.date ? $dayjs(entry.date).format("DD/MM/YYYY") : "/" }}</span>
+                <span>{{ entry.date ? $dayjs(entry.date).format("L") : "/" }}</span>
               </div>
             </div>
           </div>
@@ -207,7 +207,7 @@
             <div class="field">
               <label class="label">{{ isVietnamese ? "Thời gian" : "Create Time" }}</label>
               <div class="control">
-                <span>{{ entry.create_time ? $dayjs(entry.create_time).format("DD/MM/YYYY HH:mm") : "/" }}</span>
+                <span>{{ entry.create_time ? $dayjs(entry.create_time).format("L HH:mm") : "/" }}</span>
               </div>
             </div>
           </div>
diff --git a/app/components/modal/PaymentScheduleConfirmModal.vue b/app/components/modal/PaymentScheduleConfirmModal.vue
index b69eb71..1c2025b 100644
--- a/app/components/modal/PaymentScheduleConfirmModal.vue
+++ b/app/components/modal/PaymentScheduleConfirmModal.vue
@@ -367,7 +367,7 @@ const isInvoiceAllowed = computed(() => paymentScheduleData.value?.status === 2)
 
 const formatDate = (dateString) => {
   if (!dateString) return "-";
-  return dayjs(dateString).format("DD/MM/YYYY");
+  return dayjs(dateString).format("L");
 };
 
 const getEntryTypeLabel = (type) => {
@@ -430,8 +430,8 @@ const processedEntries = computed(() => {
       rate: Number(entry.DAILY_PENALTY_RATE || 0) * 100,
       totalDebt: Number(entry.amount_remain_after_allocation || 0) + penaltyThisPeriod,
       penaltyDetail: {
-        from: lastEventDate.format("DD/MM/YYYY"),
-        to: entryDate.format("DD/MM/YYYY"),
+        from: lastEventDate.format("L"),
+        to: entryDate.format("L"),
         days,
       },
     });
diff --git a/app/components/people/PeopleView.vue b/app/components/people/PeopleView.vue
index abf9052..d7c9997 100644
--- a/app/components/people/PeopleView.vue
+++ b/app/components/people/PeopleView.vue
@@ -80,7 +80,7 @@
           <div class="field">
             <label class="label">{{ findLang("dob") }}</label>
             <div class="control">
-              {{ record.dob ? $dayjs(record.dob).format("DD/MM/YYYY") : "/" }}
+              {{ record.dob ? $dayjs(record.dob).format("L") : "/" }}
             </div>
           </div>
         </div>
@@ -112,7 +112,7 @@
           <div class="field">
             <label class="label">{{ findLang("issued_date") }}</label>
             <div class="control">
-              {{ record.issued_date ? $dayjs(record.issued_date).format("DD/MM/YYYY") : "/" }}
+              {{ record.issued_date ? $dayjs(record.issued_date).format("L") : "/" }}
             </div>
           </div>
         </div>
diff --git a/app/components/transaction/TransactionConfirmModal.vue b/app/components/transaction/TransactionConfirmModal.vue
index 4df4dbf..1cfa588 100644
--- a/app/components/transaction/TransactionConfirmModal.vue
+++ b/app/components/transaction/TransactionConfirmModal.vue
@@ -412,7 +412,7 @@ export default {
       this.coOwner = selectedPerson || null;
     },
     formatDate(date) {
-      return date ? dayjs(date).format("DD/MM/YYYY") : "-";
+      return date ? dayjs(date).format("L") : "-";
     },
     updateDueDate(newDate) {
       this.editableDueDate = newDate;
diff --git a/app/components/transaction/TransactionDetail.vue b/app/components/transaction/TransactionDetail.vue
index d234966..2c7eba3 100644
--- a/app/components/transaction/TransactionDetail.vue
+++ b/app/components/transaction/TransactionDetail.vue
@@ -212,15 +212,13 @@ async function handleFileUpload(uploadedFiles) {
         >
           <p class="column is-3">
             <span>Từ ngày: </span>
-            <span class="has-text-weight-semibold">{{
-              txndetail.date ? $dayjs(txndetail.date).format("DD/MM/YYYY") : ""
-            }}</span>
+            <span class="has-text-weight-semibold">{{ txndetail.date ? $dayjs(txndetail.date).format("L") : "" }}</span>
           </p>
 
           <p class="column is-3">
             <span>Đến ngày: </span>
             <span class="has-text-weight-semibold">{{
-              txndetail.due_date ? $dayjs(txndetail.due_date).format("DD/MM/YYYY") : ""
+              txndetail.due_date ? $dayjs(txndetail.due_date).format("L") : ""
             }}</span>
           </p>
           <p class="column is-3">
diff --git a/app/components/transaction/TransactionView.vue b/app/components/transaction/TransactionView.vue
index cd77bca..4f6ae18 100644
--- a/app/components/transaction/TransactionView.vue
+++ b/app/components/transaction/TransactionView.vue
@@ -315,7 +315,7 @@
             <div class="field">
               <label class="label">{{ data && findFieldName("issued_date")[lang] }}</label>
               <div class="control">
-                {{ record.issued_date ? $dayjs(record.issued_date).format("DD/MM/YYYY") : "/" }}
+                {{ record.issued_date ? $dayjs(record.issued_date).format("L") : "/" }}
               </div>
             </div>
           </div>
@@ -395,7 +395,7 @@
             <div class="field">
               <label class="label">{{ data && findFieldName("create-time")[lang] }}</label>
               <div class="control">
-                <span>{{ $dayjs(transaction.create_time).format("DD/MM/YYYY HH:mm") }}</span>
+                <span>{{ $dayjs(transaction.create_time).format("L HH:mm") }}</span>
               </div>
             </div>
           </div>
@@ -1201,7 +1201,7 @@ export default {
       const postProductNotePayload = {
         ref: this.product.id,
         user: id,
-        detail: `${username} ${this.isVietnamese ? "khóa sản phẩm trong" : "locked product for"} ${this.lockDurationMinutes} ${this.isVietnamese ? "phút đến lúc" : "minutes until"} ${this.$dayjs(lockedUntilValue).format("HH:mm:ss - DD/MM/YYYY")}`,
+        detail: `${username} ${this.isVietnamese ? "khóa sản phẩm trong" : "locked product for"} ${this.lockDurationMinutes} ${this.isVietnamese ? "phút đến lúc" : "minutes until"} ${this.$dayjs(lockedUntilValue).format("HH:mm:ss - L")}`,
       };
 
       try {
diff --git a/app/components/user/UserInfo.vue b/app/components/user/UserInfo.vue
index 6bcd8a2..4c454e0 100644
--- a/app/components/user/UserInfo.vue
+++ b/app/components/user/UserInfo.vue
@@ -40,7 +40,7 @@
             >{{ isVietnamese ? "Thời gian tạo" : "Create time" }}<b class="ml-1 has-text-danger">*</b></label
           >
           <div class="control">
-            {{ $dayjs(record.create_time).format("DD/MM/YYYY") }}
+            {{ $dayjs(record.create_time).format("L") }}
           </div>
         </div>
       </div>