From 0f0ffd57e5360272cb8b6357bf7633531a10de8c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 24 Apr 2026 10:08:36 +0700
Subject: [PATCH 01/16] feat(leave): add display leaveWaitingSummary

---
 .../05_leave/components/FormLeave/01_SickForm.vue |  7 +++----
 .../05_leave/components/FormLeave/Form.vue        | 15 ++++++++++++---
 src/modules/05_leave/store.ts                     |  7 +++++--
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index f1e754e..9b6df27 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -131,11 +131,11 @@ function onValidate() {
     formData.append("leaveRangeEnd", formDataSick.leaveRangeEnd);
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataSick.leaveStartDate) ?? ""
+      convertDateToAPI(formDataSick.leaveStartDate) ?? "",
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataSick.leaveEndDate) ?? ""
+      convertDateToAPI(formDataSick.leaveEndDate) ?? "",
     );
     formData.append("leaveWrote", formDataSick.leaveWrote);
     formData.append("leaveAddress", dataStore.currentAddress);
@@ -202,7 +202,6 @@ function mapPropsToFormData() {
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
     formDataSick.leaveDocument = [];
-    console.log(props.data.leaveDocument);
   }
 }
 
@@ -211,7 +210,7 @@ watch(
   () => {
     mapPropsToFormData();
   },
-  { deep: true }
+  { deep: true },
 );
 
 /** Hook */
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index d80b64b..d5fd5fe 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -293,7 +293,7 @@ function getSearch() {
       />
       <q-input
         v-if="props.model === 'LV-005'"
-        class="col-12 col-sm-4"
+        class="col-md-3 col-sm-6"
         dense
         outlined
         readonly
@@ -302,7 +302,7 @@ function getSearch() {
         label="จำนวนสิทธิ์การลาที่ได้รับ"
       />
       <q-input
-        class="col-12 col-sm-4"
+        class="col-md-3 col-sm-6"
         dense
         outlined
         readonly
@@ -312,7 +312,7 @@ function getSearch() {
       />
       <q-input
         v-if="props.model === 'LV-005'"
-        class="col-12 col-sm-4"
+        class="col-md-3 col-sm-6"
         dense
         outlined
         readonly
@@ -320,6 +320,15 @@ function getSearch() {
         v-model="dataStore.leaveRemain"
         label="จำนวนสิทธิ์การลาคงเหลือ"
       />
+      <q-input
+        class="col-md-3 col-sm-6"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.leaveWaitingSummary"
+        label="จำนวนวันที่อยู่ระหว่างการพิจารณา"
+      />
     </div>
   </q-card>
 
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 169abcc..cb84459 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -33,7 +33,7 @@ export const useLeaveStore = defineStore("Leave", () => {
 
   /**
    * function เรียกข้อมูลรายการลา Table
-   * @param data ข้อมูลรายการลา Table
+   * @param data ข้อมูลรายการลา TableleaveWaitingSummary
    */
   async function fetchListLeave(data: ListLeave[]) {
     let datalist: ListLeaveTable[] = data.map((e: ListLeave) => ({
@@ -66,7 +66,6 @@ export const useLeaveStore = defineStore("Leave", () => {
       isDelete: e.isDelete,
     }));
     rows.value = datalist;
-    console.log(datalist);
   }
 
   //ฟังก์ชั่นแปลง Status
@@ -309,6 +308,7 @@ export const useLeaveStore = defineStore("Leave", () => {
 
   const telephoneNumber = ref<string>("");
   const currentAddress = ref<string>("");
+  const leaveWaitingSummary = ref<number>(0);
 
   //ดึงข้อมูล profile จาก API
   async function fetchProfile() {
@@ -347,6 +347,7 @@ export const useLeaveStore = defineStore("Leave", () => {
             : "-";
         restDayCurrentTotal.value =
           Number(data.leaveLimit) - Number(data.restDayTotalOld);
+        leaveWaitingSummary.value = data.leaveWaitingSummary || 0;
       })
       .catch((e: any) => {
         console.log(e);
@@ -409,6 +410,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     salaryText.value = "";
     leaveLast.value = undefined;
     restDayCurrentTotal.value = 0;
+    leaveWaitingSummary.value = 0;
   }
 
   /** ฟังก์ชันเรียกข้อมูลประเภทการลา */
@@ -480,6 +482,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     currentAddress,
     rangeOptions,
     converstType,
+    leaveWaitingSummary,
 
     fetchLeaveTypeData,
     isLoadingProfile,

From a5ba0290d958ee762619f266a4819d13498cb0e5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 24 Apr 2026 10:35:30 +0700
Subject: [PATCH 02/16] fix:  Move dialogs inside q-layout in MainLayout.vue

---
 src/views/MainLayout.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index f14d08e..165bf6e 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -172,13 +172,13 @@ const doLogout = () => {
   );
 };
 
-const clickDelete = async (id: string, index: number) => {
+const clickDelete = async (id: string, index: number | string) => {
   dialogRemove($q, async () => {
     // showLoader();
     await http
       .delete(config.API.msgId(id))
       .then(() => {
-        notiList.value.splice(index, 1);
+        notiList.value.splice(Number(index), 1);
         totalInbox.value--;
         totalNoti.value--;
         success($q, "ลบข้อมูลสำเร็จ");
@@ -772,10 +772,10 @@ watch(
     <q-footer class="bg-grey-1 text-dark q-pa-md">
       <FooterContact />
     </q-footer>
-  </q-layout>
 
-  <DialogResetPass v-model="modalResetPass" />
-  <DialogDebug v-model:modal="modalDebug" />
+    <DialogResetPass v-model="modalResetPass" />
+    <DialogDebug v-model:modal="modalDebug" />
+  </q-layout>
 </template>
 
 <style>

From e3df43421b830b4993f9af4d59837a78ea233fda Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 29 Apr 2026 11:00:15 +0700
Subject: [PATCH 03/16] refactor(leave): display dateSendLeave when status is
 not DRAFT

Co-authored-by: Copilot <copilot@github.com>
---
 .../05_leave/components/DialogDetail.vue      |  9 ++--
 src/modules/05_leave/components/ListView.vue  | 13 ++++--
 .../components/formDetail/01_SickForm.vue     | 36 +++++++++++++---
 .../formDetail/04_HelpWifeBirthForm.vue       | 42 +++++++++++++++----
 .../components/formDetail/05_VacationForm.vue | 36 +++++++++++++---
 .../formDetail/06_OrdinationForm.vue          |  8 ++--
 .../components/formDetail/07_HajjForm.vue     |  8 ++--
 .../components/formDetail/08_MilitaryForm.vue | 42 +++++++++++++++----
 .../components/formDetail/09_StudyForm.vue    | 42 +++++++++++++++----
 .../components/formDetail/10_TrainForm.vue    |  6 +--
 .../formDetail/11_WorkInternationalForm.vue   |  6 +--
 .../formDetail/12_FollowSpouseForm.vue        |  6 +--
 .../formDetail/13_RehabilitationForm.vue      |  6 +--
 13 files changed, 199 insertions(+), 61 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 2c05ebd..3333374 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -206,7 +206,7 @@ async function fetchDataDetail(id: string) {
       formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
       formData.leaveCount = calculateDurationYmd(
         data.leaveStartDate,
-        data.leaveEndDate
+        data.leaveEndDate,
       );
       formData.leaveWrote = data.leaveWrote ?? "-";
       formData.leaveAddress = data.leaveAddress ?? "-";
@@ -255,8 +255,7 @@ async function fetchDataDetail(id: string) {
       formData.studyDaySubject = data.studyDaySubject ?? "-";
       formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-";
       formData.studyDayUniversityName = data.studyDayUniversityName ?? "-";
-      formData.studyDayTrainingSubject =
-        data.studyDayTrainingSubject ?? "-" ?? "-";
+      formData.studyDayTrainingSubject = data.studyDayTrainingSubject ?? "-";
       formData.studyDayTrainingName = data.studyDayTrainingName ?? "-";
       formData.studyDayCountry = data.studyDayCountry ?? "-";
       formData.studyDayScholarship = data.studyDayScholarship ?? "-";
@@ -383,7 +382,7 @@ async function onClickSave() {
         onSubmit();
       },
       "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
+      "ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?",
     );
   } else {
   }
@@ -425,7 +424,7 @@ watch(
         ? props.leaveId && fetchDataCancelDetail(props.leaveId)
         : props.leaveId && fetchDataDetail(props.leaveId);
     }
-  }
+  },
 );
 </script>
 
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index 37aea58..294c302 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -163,7 +163,7 @@ async function updatePagination(p: number, ps: number, s: string, d: boolean) {
 function convert(val: any) {
   if (leaveType.value) {
     const filtertype = leaveType.value.find(
-      (e: any) => e.id === val.leaveTypeId
+      (e: any) => e.id === val.leaveTypeId,
     );
     const type = filtertype?.code;
     if (type == "LV-006" && val.hajjDayStatus == false) {
@@ -242,7 +242,7 @@ onMounted(async () => {
           :props="props"
           @click="onClickView(props.row.id, props.row.status)"
         >
-          {{ props.row.dateSendLeave }}
+          {{ props.row.status === "DRAFT" ? "-" : props.row.dateSendLeave }}
         </q-td>
 
         <q-td key="status" :props="props">
@@ -419,7 +419,7 @@ onMounted(async () => {
                 <q-item-label v-if="col.name === 'no'">
                   {{ (page - 1) * pageSize + props.rowIndex + 1 }}
                 </q-item-label>
-                <q-item-label v-if="col.name === 'status'">
+                <q-item-label v-else-if="col.name === 'status'">
                   <q-icon
                     v-if="props.row.status == 'DRAFT'"
                     size="10px"
@@ -468,7 +468,12 @@ onMounted(async () => {
 
                   <span class="q-pr-md">{{ props.row.statusConvert }}</span>
                 </q-item-label>
-                <q-item-label v-else>{{ col.value }}</q-item-label>
+                <q-item-label v-else-if="col.name === 'dateSendLeave'">
+                  {{
+                    props.row.status === "DRAFT" ? "-" : props.row.dateSendLeave
+                  }}
+                </q-item-label>
+                <q-item-label v-else>{{ col.value }} </q-item-label>
               </q-item-section>
             </q-item>
           </q-list>
diff --git a/src/modules/05_leave/components/formDetail/01_SickForm.vue b/src/modules/05_leave/components/formDetail/01_SickForm.vue
index d186c94..43530d7 100644
--- a/src/modules/05_leave/components/formDetail/01_SickForm.vue
+++ b/src/modules/05_leave/components/formDetail/01_SickForm.vue
@@ -18,7 +18,9 @@ const props = defineProps({
   <div class="q-gutter-md q-pa-sm">
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.status === "DRAFT" ? "-" : props.data.dateSendLeave }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
@@ -30,11 +32,33 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDateStart }}
+        {{
+          `${
+            props.data.leaveRange && props.data.leaveRange !== "ALL"
+              ? `(${converstType(props.data.leaveRange)})`
+              : ""
+          }`
+        }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDateEnd }}
+        {{
+          `${
+            props.data.leaveDateStart !== props.data.leaveDateEnd
+              ? `${
+                  props.data.leaveRangeEnd && props.data.leaveRangeEnd !== "ALL"
+                    ? `(${converstType(props.data.leaveRangeEnd)})`
+                    : ""
+                }`
+              : ""
+          }`
+        }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
@@ -87,10 +111,12 @@ const props = defineProps({
                 target="_blank"
                 outline
                 color="blue"
-                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${Number(index) + 1}`"
                 size="12px"
               >
-                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                <q-tooltip
+                  >ดาวน์โหลดเอกสารแนบที่ {{ Number(index) + 1 }}</q-tooltip
+                >
               </q-btn>
             </div>
           </div>
diff --git a/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
index 80ec85d..52d358c 100644
--- a/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useLeaveStore } from '@/modules/05_leave/store'
+import { useLeaveStore } from "@/modules/05_leave/store";
 
-const store = useLeaveStore()
-const { converstType } = store
+const store = useLeaveStore();
+const { converstType } = store;
 /**
  * รับ prop จาก component
  */
@@ -17,7 +17,9 @@ const props = defineProps({
   <div class="q-pa-sm q-gutter-md">
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.status === "DRAFT" ? "-" : props.data.dateSendLeave }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
@@ -29,11 +31,33 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDateStart }}
+        {{
+          `${
+            props.data.leaveRange && props.data.leaveRange !== "ALL"
+              ? `(${converstType(props.data.leaveRange)})`
+              : ""
+          }`
+        }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDateEnd }}
+        {{
+          `${
+            props.data.leaveDateStart !== props.data.leaveDateEnd
+              ? `${
+                  props.data.leaveRangeEnd && props.data.leaveRangeEnd !== "ALL"
+                    ? `(${converstType(props.data.leaveRangeEnd)})`
+                    : ""
+                }`
+              : ""
+          }`
+        }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
@@ -82,10 +106,12 @@ const props = defineProps({
                 target="_blank"
                 outline
                 color="blue"
-                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${Number(index) + 1}`"
                 size="12px"
               >
-                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                <q-tooltip
+                  >ดาวน์โหลดเอกสารแนบที่ {{ Number(index) + 1 }}</q-tooltip
+                >
               </q-btn>
             </div>
           </div>
diff --git a/src/modules/05_leave/components/formDetail/05_VacationForm.vue b/src/modules/05_leave/components/formDetail/05_VacationForm.vue
index 1b928aa..024a9ae 100644
--- a/src/modules/05_leave/components/formDetail/05_VacationForm.vue
+++ b/src/modules/05_leave/components/formDetail/05_VacationForm.vue
@@ -18,7 +18,9 @@ const props = defineProps({
   <div class="q-pa-sm q-gutter-md">
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.status === "DRAFT" ? "-" : props.data.dateSendLeave }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
@@ -42,11 +44,33 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDateStart }}
+        {{
+          `${
+            props.data.leaveRange && props.data.leaveRange !== "ALL"
+              ? `(${converstType(props.data.leaveRange)})`
+              : ""
+          }`
+        }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDateEnd }}
+        {{
+          `${
+            props.data.leaveDateStart !== props.data.leaveDateEnd
+              ? `${
+                  props.data.leaveRangeEnd && props.data.leaveRangeEnd !== "ALL"
+                    ? `(${converstType(props.data.leaveRangeEnd)})`
+                    : ""
+                }`
+              : ""
+          }`
+        }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
@@ -91,10 +115,12 @@ const props = defineProps({
                 target="_blank"
                 outline
                 color="blue"
-                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${Number(index) + 1}`"
                 size="12px"
               >
-                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                <q-tooltip
+                  >ดาวน์โหลดเอกสารแนบที่ {{ Number(index) + 1 }}</q-tooltip
+                >
               </q-btn>
             </div>
           </div>
diff --git a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
index 675f6b4..36540a4 100644
--- a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
@@ -18,7 +18,7 @@ const props = defineProps({
   <div class="q-pa-md q-gutter-md">
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.status === "DRAFT" ? "-" : props.data.dateSendLeave }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
@@ -98,10 +98,12 @@ const props = defineProps({
                 target="_blank"
                 outline
                 color="blue"
-                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${Number(index) + 1}`"
                 size="12px"
               >
-                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                <q-tooltip
+                  >ดาวน์โหลดเอกสารแนบที่ {{ Number(index) + 1 }}</q-tooltip
+                >
               </q-btn>
             </div>
           </div>
diff --git a/src/modules/05_leave/components/formDetail/07_HajjForm.vue b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
index f20c5db..4569b67 100644
--- a/src/modules/05_leave/components/formDetail/07_HajjForm.vue
+++ b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
@@ -18,7 +18,7 @@ const props = defineProps({
   <div class="q-pa-sm q-gutter-md">
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.status === "DRAFT" ? "-" : props.data.dateSendLeave }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
@@ -77,10 +77,12 @@ const props = defineProps({
                 target="_blank"
                 outline
                 color="blue"
-                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${Number(index) + 1}`"
                 size="12px"
               >
-                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                <q-tooltip
+                  >ดาวน์โหลดเอกสารแนบที่ {{ Number(index) + 1 }}</q-tooltip
+                >
               </q-btn>
             </div>
           </div>
diff --git a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
index 1579024..4bd127d 100644
--- a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useLeaveStore } from '@/modules/05_leave/store'
+import { useLeaveStore } from "@/modules/05_leave/store";
 
-const store = useLeaveStore()
-const { converstType } = store
+const store = useLeaveStore();
+const { converstType } = store;
 /**
  * รับ prop จาก component
  */
@@ -18,7 +18,9 @@ const props = defineProps({
   <div class="q-pa-sm q-gutter-md">
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.status === "DRAFT" ? "-" : props.data.dateSendLeave }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
@@ -30,11 +32,33 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDateStart }}
+        {{
+          `${
+            props.data.leaveRange && props.data.leaveRange !== "ALL"
+              ? `(${converstType(props.data.leaveRange)})`
+              : ""
+          }`
+        }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDateEnd }}
+        {{
+          `${
+            props.data.leaveDateStart !== props.data.leaveDateEnd
+              ? `${
+                  props.data.leaveRangeEnd && props.data.leaveRangeEnd !== "ALL"
+                    ? `(${converstType(props.data.leaveRangeEnd)})`
+                    : ""
+                }`
+              : ""
+          }`
+        }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
@@ -87,10 +111,12 @@ const props = defineProps({
                 target="_blank"
                 outline
                 color="blue"
-                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${Number(index) + 1}`"
                 size="12px"
               >
-                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                <q-tooltip
+                  >ดาวน์โหลดเอกสารแนบที่ {{ Number(index) + 1 }}</q-tooltip
+                >
               </q-btn>
             </div>
           </div>
diff --git a/src/modules/05_leave/components/formDetail/09_StudyForm.vue b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
index 3a6c7af..e2fbc16 100644
--- a/src/modules/05_leave/components/formDetail/09_StudyForm.vue
+++ b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useLeaveStore } from '@/modules/05_leave/store'
+import { useLeaveStore } from "@/modules/05_leave/store";
 
-const store = useLeaveStore()
-const { converstType } = store
+const store = useLeaveStore();
+const { converstType } = store;
 /**
  * รับ prop จาก component
  */
@@ -18,7 +18,9 @@ const props = defineProps({
   <div class="q-pa-sm q-gutter-md">
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.status === "DRAFT" ? "-" : props.data.dateSendLeave }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
@@ -30,11 +32,33 @@ const props = defineProps({
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
-<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDateStart }}
+        {{
+          `${
+            props.data.leaveRange && props.data.leaveRange !== "ALL"
+              ? `(${converstType(props.data.leaveRange)})`
+              : ""
+          }`
+        }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
-<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ?  `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDateEnd }}
+        {{
+          `${
+            props.data.leaveDateStart !== props.data.leaveDateEnd
+              ? `${
+                  props.data.leaveRangeEnd && props.data.leaveRangeEnd !== "ALL"
+                    ? `(${converstType(props.data.leaveRangeEnd)})`
+                    : ""
+                }`
+              : ""
+          }`
+        }}
+      </div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
@@ -111,10 +135,12 @@ const props = defineProps({
                 target="_blank"
                 outline
                 color="blue"
-                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${Number(index) + 1}`"
                 size="12px"
               >
-                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                <q-tooltip
+                  >ดาวน์โหลดเอกสารแนบที่ {{ Number(index) + 1 }}</q-tooltip
+                >
               </q-btn>
             </div>
           </div>
diff --git a/src/modules/05_leave/components/formDetail/10_TrainForm.vue b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
index e9ea16d..8e76209 100644
--- a/src/modules/05_leave/components/formDetail/10_TrainForm.vue
+++ b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
@@ -17,7 +17,7 @@ const props = defineProps({
   <div class="q-pa-sm q-gutter-md">
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.status === "DRAFT" ? "-" : props.data.dateSendLeave }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
@@ -132,10 +132,10 @@ const props = defineProps({
                 target="_blank"
                 outline
                 color="blue"
-                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${Number(index) + 1}`"
                 size="12px"
               >
-                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ Number(index) + 1 }}</q-tooltip>
               </q-btn>
             </div>
           </div>
diff --git a/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
index 8e38fae..50bf0ad 100644
--- a/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
@@ -17,7 +17,7 @@ const props = defineProps({
   <div class="q-pa-sm q-gutter-md">
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.status === "DRAFT" ? "-" : props.data.dateSendLeave }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
@@ -80,10 +80,10 @@ const props = defineProps({
                 target="_blank"
                 outline
                 color="blue"
-                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${Number(index) + 1}`"
                 size="12px"
               >
-                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ Number(index) + 1 }}</q-tooltip>
               </q-btn>
             </div>
           </div>
diff --git a/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue b/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
index 3c6189d..21b1e24 100644
--- a/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
@@ -17,7 +17,7 @@ const props = defineProps({
   <div class="q-pa-sm q-gutter-md">
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.status === "DRAFT" ? "-" : props.data.dateSendLeave }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
@@ -145,10 +145,10 @@ const props = defineProps({
                 target="_blank"
                 outline
                 color="blue"
-                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${Number(index) + 1}`"
                 size="12px"
               >
-                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ Number(index) + 1 }}</q-tooltip>
               </q-btn>
             </div>
           </div>
diff --git a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
index 2398a24..5e28835 100644
--- a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
@@ -17,7 +17,7 @@ const props = defineProps({
   <div class="q-pa-sm q-gutter-md">
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">วันที่ยื่นใบลา</div>
-      <div class="col-xs-12 col-md-6">{{ props.data.dateSendLeave }}</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.status === "DRAFT" ? "-" : props.data.dateSendLeave }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
@@ -80,10 +80,10 @@ const props = defineProps({
                 target="_blank"
                 outline
                 color="blue"
-                :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+                :label="`ดาวน์โหลดเอกสารแนบที่ ${Number(index) + 1}`"
                 size="12px"
               >
-                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+                <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ Number(index) + 1 }}</q-tooltip>
               </q-btn>
             </div>
           </div>

From ab63afc56dae53c7d8f7ad1c3c5cb700d79e49d5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 30 Apr 2026 15:04:45 +0700
Subject: [PATCH 04/16] refactor(file): replace window.open with blob download
 pattern

Co-authored-by: Copilot <copilot@github.com>
---
 src/modules/10_registry/05_Other/02_File.vue  | 39 ++++++++++++++-----
 .../10_registry/05_Other/03_FileOther.vue     | 37 ++++++++++++++----
 2 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/src/modules/10_registry/05_Other/02_File.vue b/src/modules/10_registry/05_Other/02_File.vue
index 1e9472e..1be029f 100644
--- a/src/modules/10_registry/05_Other/02_File.vue
+++ b/src/modules/10_registry/05_Other/02_File.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCounterMixin } from "@/stores/mixin";
-import { is, useQuasar } from "quasar";
-import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { ref, onMounted, watch } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -18,14 +18,15 @@ const fileList = ref<FileFormType[]>([]);
 
 /** ฟังก์ชันดึงข้อมูลไฟล์ */
 async function getData() {
+  if (!store.profileId) return;
   isLoading.value = true;
   await http
     .get(
       config.API.fileByFileUser(
         "ระบบทะเบียนประวัติ",
         "เอกสารหลักฐาน",
-        store.profileId
-      )
+        store.profileId,
+      ),
     )
     .then((res) => {
       const data = res.data;
@@ -51,12 +52,23 @@ async function downloadFile(fileName: string) {
         "ระบบทะเบียนประวัติ",
         "เอกสารหลักฐาน",
         store.profileId,
-        fileName
-      )
+        fileName,
+      ),
     )
-    .then((res) => {
-      const data = res.data.downloadUrl;
-      window.open(data, "_blank");
+    .then(async (res) => {
+      const downloadUrl = res.data.downloadUrl;
+      const response = await fetch(downloadUrl);
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      setTimeout(() => {
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }, 100);
     })
     .catch((e) => {
       messageError($q, e);
@@ -69,6 +81,15 @@ async function downloadFile(fileName: string) {
 onMounted(() => {
   getData();
 });
+
+watch(
+  () => store.profileId,
+  (newVal) => {
+    if (newVal) {
+      getData();
+    }
+  },
+);
 </script>
 
 <template>
diff --git a/src/modules/10_registry/05_Other/03_FileOther.vue b/src/modules/10_registry/05_Other/03_FileOther.vue
index 585997b..05e740b 100644
--- a/src/modules/10_registry/05_Other/03_FileOther.vue
+++ b/src/modules/10_registry/05_Other/03_FileOther.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
@@ -18,14 +18,15 @@ const fileList = ref<FileFormType[]>([]);
 
 /** ฟังก์ชันดึงข้อมูลไฟล์ */
 async function getData() {
+  if (!store.citizenId) return;
   isLoading.value = true;
   await http
     .get(
       config.API.fileByFileUser(
         "ระบบทะเบียนประวัติ",
         "เอกสารหลักฐานเพิ่มเติม",
-        store.citizenId
-      )
+        store.citizenId,
+      ),
     )
     .then((res) => {
       const data = res.data;
@@ -51,12 +52,23 @@ async function downloadFile(fileName: string) {
         "ระบบทะเบียนประวัติ",
         "เอกสารหลักฐานเพิ่มเติม",
         store.citizenId,
-        fileName
-      )
+        fileName,
+      ),
     )
-    .then((res) => {
-      const data = res.data.downloadUrl;
-      window.open(data, "_blank");
+    .then(async (res) => {
+      const downloadUrl = res.data.downloadUrl;
+      const response = await fetch(downloadUrl);
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      setTimeout(() => {
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }, 100);
     })
     .catch((e) => {
       messageError($q, e);
@@ -69,6 +81,15 @@ async function downloadFile(fileName: string) {
 onMounted(() => {
   getData();
 });
+
+watch(
+  () => store.citizenId,
+  (newVal) => {
+    if (newVal) {
+      getData();
+    }
+  },
+);
 </script>
 
 <template>

From 14195e972f6f198426ada41e5f2fe37423694396 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 30 Apr 2026 15:17:49 +0700
Subject: [PATCH 05/16] refactor(file): replace window.open with blob download
 pattern in ChangeName

Co-authored-by: Copilot <copilot@github.com>
---
 .../01_Information/02_ChangeName.vue          | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/modules/10_registry/01_Information/02_ChangeName.vue b/src/modules/10_registry/01_Information/02_ChangeName.vue
index 0a7a972..5a140b4 100644
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/src/modules/10_registry/01_Information/02_ChangeName.vue
@@ -114,7 +114,7 @@ function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
     rowsData.value,
-    columns.value ? columns.value : []
+    columns.value ? columns.value : [],
   );
 }
 
@@ -132,12 +132,27 @@ async function onDownloadFile(id: string, profileId: string) {
         "ประวัติการเปลี่ยนชื่อ-นามสกุล",
         profileId,
         id,
-        "เอกสารหลักฐาน"
-      )
+        "เอกสารหลักฐาน",
+      ),
     )
     .then(async (res) => {
-      const data = res.data.downloadUrl;
-      window.open(data, "_blank");
+      // const data = res.data.downloadUrl;
+      // window.open(data, "_blank");
+      console.log(res.data);
+
+      const downloadUrl = res.data.downloadUrl;
+      const response = await fetch(downloadUrl);
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `ประวัติการเปลี่ยนชื่อ-นามสกุล_`;
+      document.body.appendChild(link);
+      link.click();
+      setTimeout(() => {
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }, 100);
     })
     .catch((err) => {
       messageError($q, err);

From e5d9800294c523c5fc4e03e18017a2c35ceff013 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 1 May 2026 09:43:00 +0700
Subject: [PATCH 06/16] refactor(file): replace window.open with blob download
 pattern in registry

---
 .../01_Information/02_ChangeName.vue          |  4 ----
 .../10_registry/01_Information/06_Ability.vue | 21 ++++++++++++++-----
 .../02_Government/02_Discipline.vue           | 18 +++++++++++++---
 .../10_registry/02_Government/04_Duty.vue     | 18 +++++++++++++---
 .../02_Government/06_Assistance.vue           | 21 ++++++++++++++-----
 .../10_registry/03_Salary/02_Nopaid.vue       | 20 ++++++++++++++----
 .../04_Achievement/01_Certificate.vue         | 20 ++++++++++++++----
 .../04_Achievement/03_Insignia.vue            | 20 +++++++++++++-----
 .../10_registry/04_Achievement/04_Honor.vue   | 16 +++++++++++---
 9 files changed, 122 insertions(+), 36 deletions(-)

diff --git a/src/modules/10_registry/01_Information/02_ChangeName.vue b/src/modules/10_registry/01_Information/02_ChangeName.vue
index 5a140b4..7d8074f 100644
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/src/modules/10_registry/01_Information/02_ChangeName.vue
@@ -136,10 +136,6 @@ async function onDownloadFile(id: string, profileId: string) {
       ),
     )
     .then(async (res) => {
-      // const data = res.data.downloadUrl;
-      // window.open(data, "_blank");
-      console.log(res.data);
-
       const downloadUrl = res.data.downloadUrl;
       const response = await fetch(downloadUrl);
       const blob = await response.blob();
diff --git a/src/modules/10_registry/01_Information/06_Ability.vue b/src/modules/10_registry/01_Information/06_Ability.vue
index bc77c5b..5254633 100644
--- a/src/modules/10_registry/01_Information/06_Ability.vue
+++ b/src/modules/10_registry/01_Information/06_Ability.vue
@@ -240,7 +240,7 @@ function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
     rowsData.value,
-    columns.value ? columns.value : []
+    columns.value ? columns.value : [],
   );
 }
 
@@ -258,12 +258,23 @@ async function onDownloadFile(id: string, profileId: string) {
         "เอกสารความสามารถพิเศษ",
         profileId,
         id,
-        "เอกสารหลักฐาน"
-      )
+        "เอกสารหลักฐาน",
+      ),
     )
     .then(async (res) => {
-      const data = res.data;
-      window.open(data.downloadUrl, "_blank");
+      const downloadUrl = res.data.downloadUrl;
+      const response = await fetch(downloadUrl);
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `เอกสารความสามารถพิเศษ_`;
+      document.body.appendChild(link);
+      link.click();
+      setTimeout(() => {
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }, 100);
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/10_registry/02_Government/02_Discipline.vue b/src/modules/10_registry/02_Government/02_Discipline.vue
index 7ac9611..21dc522 100644
--- a/src/modules/10_registry/02_Government/02_Discipline.vue
+++ b/src/modules/10_registry/02_Government/02_Discipline.vue
@@ -194,8 +194,20 @@ async function getHistory() {
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
   try {
-    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-    window.open(data.downloadUrl, "_blank");
+    const res = await getPathUploadFlie(fileGroup.value, profileId, id);
+    const downloadUrl = res.downloadUrl;
+    const response = await fetch(downloadUrl);
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `เอกสารวินัย`;
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(() => {
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }, 100);
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -208,7 +220,7 @@ function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
     rowsData.value,
-    columns.value ? columns.value : []
+    columns.value ? columns.value : [],
   );
 }
 
diff --git a/src/modules/10_registry/02_Government/04_Duty.vue b/src/modules/10_registry/02_Government/04_Duty.vue
index 4a6ff94..7b2c1e7 100644
--- a/src/modules/10_registry/02_Government/04_Duty.vue
+++ b/src/modules/10_registry/02_Government/04_Duty.vue
@@ -297,8 +297,20 @@ async function getHistory() {
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
   try {
-    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-    window.open(data.downloadUrl, "_blank");
+    const res = await getPathUploadFlie(fileGroup.value, profileId, id);
+    const downloadUrl = res.downloadUrl;
+    const response = await fetch(downloadUrl);
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `เอกสารปฏิบัติราชการพิเศษ`;
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(() => {
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }, 100);
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -311,7 +323,7 @@ function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
     rowsData.value,
-    columns.value ? columns.value : []
+    columns.value ? columns.value : [],
   );
 }
 
diff --git a/src/modules/10_registry/02_Government/06_Assistance.vue b/src/modules/10_registry/02_Government/06_Assistance.vue
index ac7adc5..02ad925 100644
--- a/src/modules/10_registry/02_Government/06_Assistance.vue
+++ b/src/modules/10_registry/02_Government/06_Assistance.vue
@@ -302,12 +302,23 @@ async function onDownloadFile(id: string, profileId: string) {
         "ช่วยราชการ",
         profileId,
         id,
-        "เอกสารหลักฐาน"
-      )
+        "เอกสารหลักฐาน",
+      ),
     )
     .then(async (res) => {
-      const data = res.data;
-      window.open(data.downloadUrl, "_blank");
+      const downloadUrl = res.data.downloadUrl;
+      const response = await fetch(downloadUrl);
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `เอกสารช่วยราชการ`;
+      document.body.appendChild(link);
+      link.click();
+      setTimeout(() => {
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }, 100);
     })
     .catch((err) => {
       messageError($q, err);
@@ -322,7 +333,7 @@ function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
     rowsData.value,
-    columns.value ? columns.value : []
+    columns.value ? columns.value : [],
   );
 }
 
diff --git a/src/modules/10_registry/03_Salary/02_Nopaid.vue b/src/modules/10_registry/03_Salary/02_Nopaid.vue
index a74d946..8d81c30 100644
--- a/src/modules/10_registry/03_Salary/02_Nopaid.vue
+++ b/src/modules/10_registry/03_Salary/02_Nopaid.vue
@@ -255,7 +255,7 @@ async function getHistory() {
   rowsHistoryData.value = [];
   await http
     .get(
-      config.API.dataUserSalaryNopaidHistoryByType(link.value, idByRow.value)
+      config.API.dataUserSalaryNopaidHistoryByType(link.value, idByRow.value),
     )
     .then((res) => {
       const data = res.data.result;
@@ -278,8 +278,20 @@ async function getHistory() {
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
   try {
-    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-    window.open(data.downloadUrl, "_blank");
+    const res = await getPathUploadFlie(fileGroup.value, profileId, id);
+    const downloadUrl = res.downloadUrl;
+    const response = await fetch(downloadUrl);
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `บันทึกวันที่ไม่ได้รับ${salaryText.value}ฯ`;
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(() => {
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }, 100);
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -292,7 +304,7 @@ function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
     rowsData.value,
-    columns.value ? columns.value : []
+    columns.value ? columns.value : [],
   );
 }
 
diff --git a/src/modules/10_registry/04_Achievement/01_Certificate.vue b/src/modules/10_registry/04_Achievement/01_Certificate.vue
index 6266c34..21a6eeb 100644
--- a/src/modules/10_registry/04_Achievement/01_Certificate.vue
+++ b/src/modules/10_registry/04_Achievement/01_Certificate.vue
@@ -253,8 +253,8 @@ async function getHistory() {
       config.API.dataUserCertificateHistoryByType(
         link.value,
         "certificate",
-        idByRow.value
-      )
+        idByRow.value,
+      ),
     )
     .then((res) => {
       const data = res.data.result;
@@ -278,7 +278,19 @@ async function onDownloadFile(id: string, profileId: string) {
   showLoader();
   try {
     const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-    window.open(data.downloadUrl, "_blank");
+    const downloadUrl = data.downloadUrl;
+    const response = await fetch(downloadUrl);
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `เอกสารใบอนุญาตประกอบวิชาชีพ`;
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(() => {
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }, 100);
   } catch (error) {
     messageError($q, error);
   } finally {
@@ -291,7 +303,7 @@ function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
     rowsData.value,
-    columns.value ? columns.value : []
+    columns.value ? columns.value : [],
   );
 }
 
diff --git a/src/modules/10_registry/04_Achievement/03_Insignia.vue b/src/modules/10_registry/04_Achievement/03_Insignia.vue
index e2dadc0..8db5851 100644
--- a/src/modules/10_registry/04_Achievement/03_Insignia.vue
+++ b/src/modules/10_registry/04_Achievement/03_Insignia.vue
@@ -469,8 +469,8 @@ async function getHistory() {
       config.API.dataUserCertificateHistoryByType(
         link.value,
         "insignia",
-        idByRow.value
-      )
+        idByRow.value,
+      ),
     )
     .then((res) => {
       const data = res.data.result;
@@ -494,7 +494,18 @@ async function onDownloadFile(id: string, profileId: string) {
   showLoader();
   try {
     const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-    window.open(data.downloadUrl, "_blank");
+    const response = await fetch(data.downloadUrl);
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `เอกสารเครื่องราชอิสริยาภรณ์`;
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(() => {
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }, 100);
   } catch (error) {
     messageError($q, error);
   } finally {
@@ -507,7 +518,7 @@ function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
     rowsData.value,
-    columns.value ? columns.value : []
+    columns.value ? columns.value : [],
   );
 }
 
@@ -647,7 +658,6 @@ onMounted(async () => {
                   dense
                   round
                   size="14px"
-                  class="absolute_button"
                   @click="onHistory(props.row.id)"
                 >
                   <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
diff --git a/src/modules/10_registry/04_Achievement/04_Honor.vue b/src/modules/10_registry/04_Achievement/04_Honor.vue
index 6801fd2..dee78b9 100644
--- a/src/modules/10_registry/04_Achievement/04_Honor.vue
+++ b/src/modules/10_registry/04_Achievement/04_Honor.vue
@@ -278,7 +278,18 @@ async function onDownloadFile(id: string, profileId: string) {
   showLoader();
   try {
     const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-    window.open(data.downloadUrl, "_blank");
+    const response = await fetch(data.downloadUrl);
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `เอกสารประกาศเกียรติคุณ`;
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(() => {
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }, 100);
   } catch (error) {
     messageError($q, error);
   } finally {
@@ -291,7 +302,7 @@ function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
     rowsData.value,
-    columns.value ? columns.value : []
+    columns.value ? columns.value : [],
   );
 }
 
@@ -429,7 +440,6 @@ onMounted(async () => {
                   dense
                   round
                   size="14px"
-                  class="absolute_button"
                   @click="onHistory(props.row.id)"
                 >
                   <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>

From e54d936b199f61e0765c4b253a21b0f696104284 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 1 May 2026 11:24:22 +0700
Subject: [PATCH 07/16] fix: test load file iOS Safari

---
 .../01_Information/02_ChangeName.vue          | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/modules/10_registry/01_Information/02_ChangeName.vue b/src/modules/10_registry/01_Information/02_ChangeName.vue
index 7d8074f..dc2b645 100644
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/src/modules/10_registry/01_Information/02_ChangeName.vue
@@ -139,10 +139,38 @@ async function onDownloadFile(id: string, profileId: string) {
       const downloadUrl = res.data.downloadUrl;
       const response = await fetch(downloadUrl);
       const blob = await response.blob();
-      const url = URL.createObjectURL(blob);
+
+      const contentType: string | null = response.headers.get("Content-Type");
+
+      // 2. สร้างตัวแปลง MIME Type เป็นนามสกุลไฟล์
+      const extensionMap: Record<string, string> = {
+        "application/pdf": "pdf",
+        "image/jpeg": "jpg",
+        "image/png": "png",
+        "image/gif": "gif",
+        "application/zip": "zip",
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+          "docx",
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+          "xlsx",
+      };
+
+      let extension = contentType ? extensionMap[contentType] : undefined;
+
+      if (!extension) {
+        const urlWithoutQuery = downloadUrl.split("?")[0];
+        extension = urlWithoutQuery.includes(".")
+          ? urlWithoutQuery.split(".").pop()
+          : "pdf";
+      }
+
+      const blobForDownload = new Blob([blob], {
+        type: "application/octet-stream",
+      });
+      const url = URL.createObjectURL(blobForDownload);
       const link = document.createElement("a");
       link.href = url;
-      link.download = `ประวัติการเปลี่ยนชื่อ-นามสกุล_`;
+      link.download = `ประวัติการเปลี่ยนชื่อ-นามสกุล.${extension}`;
       document.body.appendChild(link);
       link.click();
       setTimeout(() => {

From 780a815a24b33275919cb413f74265538689c321 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 6 May 2026 17:46:04 +0700
Subject: [PATCH 08/16] refactor(date): function convertDateToAPI  delete 
 utcToZonedTime  Asia/Bangkok

---
 src/stores/mixin.ts | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 41c7161..b23252e 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -14,7 +14,7 @@ export const useCounterMixin = defineStore("mixin", () => {
   const calAge = (
     srcDate: Date,
     birthCal: Date = new Date(),
-    eng: boolean = false
+    eng: boolean = false,
   ) => {
     const year = eng ? "years" : "ปี";
     const month = eng ? "months" : "เดือน";
@@ -82,7 +82,7 @@ export const useCounterMixin = defineStore("mixin", () => {
   function date2Thai(
     srcDate: Date | null,
     isFullMonth: boolean = false,
-    isTime: boolean = false
+    isTime: boolean = false,
   ) {
     if (srcDate == null || !moment(srcDate).isValid()) return "";
 
@@ -98,7 +98,7 @@ export const useCounterMixin = defineStore("mixin", () => {
   function dateThai(
     srcDate: Date,
     isFullMonth: boolean = true,
-    isTime: boolean = false
+    isTime: boolean = false,
   ) {
     if (srcDate == null) {
       return null;
@@ -490,7 +490,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     color: string | undefined,
     ok?: Function | undefined,
     cancel?: Function | undefined,
-    onlycancel: Boolean = false
+    onlycancel: Boolean = false,
   ) => {
     q.dialog({
       component: CustomComponent,
@@ -529,7 +529,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     title: string,
     message: string,
     ok: Function,
-    cancel?: Function
+    cancel?: Function,
   ) {
     q.dialog({
       title: `<span class="text-red">${title}</span>`,
@@ -559,7 +559,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     title: string,
     message: string,
     ok: Function,
-    cancel?: Function
+    cancel?: Function,
   ) {
     q.dialog({
       title: `<span class="text-primary">${title}</span>`,
@@ -795,7 +795,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     ok?: Function,
     title?: string, // ถ้ามี cancel action ใส่เป็น null
     desc?: string, // ถ้ามี cancel action ใส่เป็น null
-    cancel?: Function
+    cancel?: Function,
   ) => {
     q.dialog({
       component: CustomComponent,
@@ -824,7 +824,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     ok?: Function,
     title?: string, // ถ้ามี cancel action ใส่เป็น null
     desc?: string, // ถ้ามี cancel action ใส่เป็น null
-    cancel?: Function
+    cancel?: Function,
   ) => {
     q.dialog({
       component: CustomComponent,
@@ -851,7 +851,7 @@ export const useCounterMixin = defineStore("mixin", () => {
   const dialogMessageNotify = (
     q: any,
     desc?: string, // ถ้ามี cancel action ใส่เป็น null
-    cancel?: Function
+    cancel?: Function,
   ) => {
     q.dialog({
       component: CustomComponent,
@@ -973,7 +973,7 @@ export const useCounterMixin = defineStore("mixin", () => {
    * @returns ผลการคำนวน ปี เดือน วัน ในรูปแบบ 1 ปี 10 เดือน 5 วัน
    */
   function calculateDurationYmd(startDate: any, endDate: any) {
-     if (!startDate || !endDate) return "";
+    if (!startDate || !endDate) return "";
 
     let start = moment(startDate).startOf("day");
     let end = moment(endDate).startOf("day").add(1, "day");
@@ -1252,9 +1252,7 @@ export const useCounterMixin = defineStore("mixin", () => {
 
   // กรณีมีเฉพาะ date
   function convertDateToAPI(date: Date | null) {
-    return date
-      ? format(utcToZonedTime(date, "Asia/Bangkok"), "yyyy-MM-dd")
-      : null;
+    return date ? format(date, "yyyy-MM-dd") : null;
   }
 
   // กรณี datetime

From 9eaa28711dbb02d7392f3e1a026f0336725444bf Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 7 May 2026 09:36:31 +0700
Subject: [PATCH 09/16] refactor(convertDateToAPI):  parsedDate  new Date

---
 src/stores/mixin.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index b23252e..02981bb 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -1252,7 +1252,15 @@ export const useCounterMixin = defineStore("mixin", () => {
 
   // กรณีมีเฉพาะ date
   function convertDateToAPI(date: Date | null) {
-    return date ? format(date, "yyyy-MM-dd") : null;
+    if (!date) return null;
+
+    const parsedDate = new Date(date);
+
+    if (parsedDate) {
+      return format(parsedDate, "yyyy-MM-dd");
+    } else {
+      return null;
+    }
   }
 
   // กรณี datetime

From f07cf2548995aa2456e6da01047069c12f1f4b33 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 8 May 2026 17:39:01 +0700
Subject: [PATCH 10/16] refactor(registry): downloadBlobFile

---
 .../01_Information/02_ChangeName.vue          | 43 ++------------
 .../10_registry/01_Information/06_Ability.vue | 17 ++----
 .../02_Government/02_Discipline.vue           | 18 ++----
 .../10_registry/02_Government/04_Duty.vue     | 18 ++----
 .../02_Government/06_Assistance.vue           | 17 ++----
 .../10_registry/03_Salary/02_Nopaid.vue       | 17 ++----
 .../04_Achievement/01_Certificate.vue         | 18 ++----
 .../04_Achievement/03_Insignia.vue            | 17 ++----
 .../10_registry/04_Achievement/04_Honor.vue   | 17 ++----
 src/modules/10_registry/utils/downloadFile.ts | 59 +++++++++++++++++++
 10 files changed, 103 insertions(+), 138 deletions(-)
 create mode 100644 src/modules/10_registry/utils/downloadFile.ts

diff --git a/src/modules/10_registry/01_Information/02_ChangeName.vue b/src/modules/10_registry/01_Information/02_ChangeName.vue
index dc2b645..165f95a 100644
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/src/modules/10_registry/01_Information/02_ChangeName.vue
@@ -3,6 +3,7 @@ import { ref, onMounted } from "vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -137,46 +138,10 @@ async function onDownloadFile(id: string, profileId: string) {
     )
     .then(async (res) => {
       const downloadUrl = res.data.downloadUrl;
-      const response = await fetch(downloadUrl);
-      const blob = await response.blob();
-
-      const contentType: string | null = response.headers.get("Content-Type");
-
-      // 2. สร้างตัวแปลง MIME Type เป็นนามสกุลไฟล์
-      const extensionMap: Record<string, string> = {
-        "application/pdf": "pdf",
-        "image/jpeg": "jpg",
-        "image/png": "png",
-        "image/gif": "gif",
-        "application/zip": "zip",
-        "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
-          "docx",
-        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
-          "xlsx",
-      };
-
-      let extension = contentType ? extensionMap[contentType] : undefined;
-
-      if (!extension) {
-        const urlWithoutQuery = downloadUrl.split("?")[0];
-        extension = urlWithoutQuery.includes(".")
-          ? urlWithoutQuery.split(".").pop()
-          : "pdf";
-      }
-
-      const blobForDownload = new Blob([blob], {
-        type: "application/octet-stream",
+      await downloadBlobFile({
+        downloadUrl: downloadUrl,
+        fileName: `ประวัติการเปลี่ยนชื่อ-นามสกุล`,
       });
-      const url = URL.createObjectURL(blobForDownload);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = `ประวัติการเปลี่ยนชื่อ-นามสกุล.${extension}`;
-      document.body.appendChild(link);
-      link.click();
-      setTimeout(() => {
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-      }, 100);
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/10_registry/01_Information/06_Ability.vue b/src/modules/10_registry/01_Information/06_Ability.vue
index 5254633..ffcb8e0 100644
--- a/src/modules/10_registry/01_Information/06_Ability.vue
+++ b/src/modules/10_registry/01_Information/06_Ability.vue
@@ -6,6 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 /** import type */
 import type { AbilityRows } from "@/modules/10_registry/interface/index/Main";
@@ -263,18 +264,10 @@ async function onDownloadFile(id: string, profileId: string) {
     )
     .then(async (res) => {
       const downloadUrl = res.data.downloadUrl;
-      const response = await fetch(downloadUrl);
-      const blob = await response.blob();
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = `เอกสารความสามารถพิเศษ_`;
-      document.body.appendChild(link);
-      link.click();
-      setTimeout(() => {
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-      }, 100);
+      await downloadBlobFile({
+        downloadUrl: downloadUrl,
+        fileName: `เอกสารความสามารถพิเศษ`,
+      });
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/10_registry/02_Government/02_Discipline.vue b/src/modules/10_registry/02_Government/02_Discipline.vue
index 21dc522..2d6b4d0 100644
--- a/src/modules/10_registry/02_Government/02_Discipline.vue
+++ b/src/modules/10_registry/02_Government/02_Discipline.vue
@@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 import type { DisciplineDetail } from "@/modules/10_registry/interface/index/Main";
 
@@ -195,19 +196,10 @@ async function onDownloadFile(id: string, profileId: string) {
   showLoader();
   try {
     const res = await getPathUploadFlie(fileGroup.value, profileId, id);
-    const downloadUrl = res.downloadUrl;
-    const response = await fetch(downloadUrl);
-    const blob = await response.blob();
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `เอกสารวินัย`;
-    document.body.appendChild(link);
-    link.click();
-    setTimeout(() => {
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-    }, 100);
+    await downloadBlobFile({
+      downloadUrl: res.downloadUrl,
+      fileName: `เอกสารวินัย`,
+    });
   } catch (e) {
     messageError($q, e);
   } finally {
diff --git a/src/modules/10_registry/02_Government/04_Duty.vue b/src/modules/10_registry/02_Government/04_Duty.vue
index 7b2c1e7..a64dc34 100644
--- a/src/modules/10_registry/02_Government/04_Duty.vue
+++ b/src/modules/10_registry/02_Government/04_Duty.vue
@@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
 
@@ -298,19 +299,10 @@ async function onDownloadFile(id: string, profileId: string) {
   showLoader();
   try {
     const res = await getPathUploadFlie(fileGroup.value, profileId, id);
-    const downloadUrl = res.downloadUrl;
-    const response = await fetch(downloadUrl);
-    const blob = await response.blob();
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `เอกสารปฏิบัติราชการพิเศษ`;
-    document.body.appendChild(link);
-    link.click();
-    setTimeout(() => {
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-    }, 100);
+    await downloadBlobFile({
+      downloadUrl: res.downloadUrl,
+      fileName: `เอกสารปฏิบัติราชการพิเศษ`,
+    });
   } catch (e) {
     messageError($q, e);
   } finally {
diff --git a/src/modules/10_registry/02_Government/06_Assistance.vue b/src/modules/10_registry/02_Government/06_Assistance.vue
index 02ad925..69d5184 100644
--- a/src/modules/10_registry/02_Government/06_Assistance.vue
+++ b/src/modules/10_registry/02_Government/06_Assistance.vue
@@ -6,6 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
 
@@ -307,18 +308,10 @@ async function onDownloadFile(id: string, profileId: string) {
     )
     .then(async (res) => {
       const downloadUrl = res.data.downloadUrl;
-      const response = await fetch(downloadUrl);
-      const blob = await response.blob();
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = `เอกสารช่วยราชการ`;
-      document.body.appendChild(link);
-      link.click();
-      setTimeout(() => {
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-      }, 100);
+      await downloadBlobFile({
+        downloadUrl: downloadUrl,
+        fileName: `เอกสารช่วยราชการ`,
+      });
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/10_registry/03_Salary/02_Nopaid.vue b/src/modules/10_registry/03_Salary/02_Nopaid.vue
index 8d81c30..271d3d9 100644
--- a/src/modules/10_registry/03_Salary/02_Nopaid.vue
+++ b/src/modules/10_registry/03_Salary/02_Nopaid.vue
@@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 import type { NopaidFormType } from "@/modules/10_registry/interface/index/Main";
 
@@ -280,18 +281,10 @@ async function onDownloadFile(id: string, profileId: string) {
   try {
     const res = await getPathUploadFlie(fileGroup.value, profileId, id);
     const downloadUrl = res.downloadUrl;
-    const response = await fetch(downloadUrl);
-    const blob = await response.blob();
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `บันทึกวันที่ไม่ได้รับ${salaryText.value}ฯ`;
-    document.body.appendChild(link);
-    link.click();
-    setTimeout(() => {
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-    }, 100);
+    await downloadBlobFile({
+      downloadUrl: downloadUrl,
+      fileName: `บันทึกวันที่ไม่ได้รับ${salaryText.value}ฯ`,
+    });
   } catch (e) {
     messageError($q, e);
   } finally {
diff --git a/src/modules/10_registry/04_Achievement/01_Certificate.vue b/src/modules/10_registry/04_Achievement/01_Certificate.vue
index 21a6eeb..5e0b4c7 100644
--- a/src/modules/10_registry/04_Achievement/01_Certificate.vue
+++ b/src/modules/10_registry/04_Achievement/01_Certificate.vue
@@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 import type { CertificateDetail } from "@/modules/10_registry/interface/index/Main";
 
@@ -278,19 +279,10 @@ async function onDownloadFile(id: string, profileId: string) {
   showLoader();
   try {
     const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-    const downloadUrl = data.downloadUrl;
-    const response = await fetch(downloadUrl);
-    const blob = await response.blob();
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `เอกสารใบอนุญาตประกอบวิชาชีพ`;
-    document.body.appendChild(link);
-    link.click();
-    setTimeout(() => {
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-    }, 100);
+    await downloadBlobFile({
+      downloadUrl: data.downloadUrl,
+      fileName: `เอกสารใบอนุญาตประกอบวิชาชีพ`,
+    });
   } catch (error) {
     messageError($q, error);
   } finally {
diff --git a/src/modules/10_registry/04_Achievement/03_Insignia.vue b/src/modules/10_registry/04_Achievement/03_Insignia.vue
index 8db5851..2acb679 100644
--- a/src/modules/10_registry/04_Achievement/03_Insignia.vue
+++ b/src/modules/10_registry/04_Achievement/03_Insignia.vue
@@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 import type { InsigniaFormType } from "@/modules/10_registry/interface/index/Main";
 
@@ -494,18 +495,10 @@ async function onDownloadFile(id: string, profileId: string) {
   showLoader();
   try {
     const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-    const response = await fetch(data.downloadUrl);
-    const blob = await response.blob();
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `เอกสารเครื่องราชอิสริยาภรณ์`;
-    document.body.appendChild(link);
-    link.click();
-    setTimeout(() => {
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-    }, 100);
+    await downloadBlobFile({
+      downloadUrl: data.downloadUrl,
+      fileName: `เอกสารเครื่องราชอิสริยาภรณ์`,
+    });
   } catch (error) {
     messageError($q, error);
   } finally {
diff --git a/src/modules/10_registry/04_Achievement/04_Honor.vue b/src/modules/10_registry/04_Achievement/04_Honor.vue
index dee78b9..a142ad7 100644
--- a/src/modules/10_registry/04_Achievement/04_Honor.vue
+++ b/src/modules/10_registry/04_Achievement/04_Honor.vue
@@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 import type { HonorFormData } from "@/modules/10_registry/interface/index/Main";
 
@@ -278,18 +279,10 @@ async function onDownloadFile(id: string, profileId: string) {
   showLoader();
   try {
     const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-    const response = await fetch(data.downloadUrl);
-    const blob = await response.blob();
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `เอกสารประกาศเกียรติคุณ`;
-    document.body.appendChild(link);
-    link.click();
-    setTimeout(() => {
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-    }, 100);
+    await downloadBlobFile({
+      downloadUrl: data.downloadUrl,
+      fileName: `เอกสารประกาศเกียรติคุณ`,
+    });
   } catch (error) {
     messageError($q, error);
   } finally {
diff --git a/src/modules/10_registry/utils/downloadFile.ts b/src/modules/10_registry/utils/downloadFile.ts
new file mode 100644
index 0000000..341b7f9
--- /dev/null
+++ b/src/modules/10_registry/utils/downloadFile.ts
@@ -0,0 +1,59 @@
+export interface DownloadFileOptions {
+  downloadUrl: string;
+  fileName: string;
+}
+
+const isMobile =
+  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent,
+  );
+
+export async function downloadBlobFile({
+  downloadUrl,
+  fileName,
+}: DownloadFileOptions): Promise<void> {
+  // Use window.open for desktop, blob download for mobile
+  if (!isMobile) {
+    window.open(downloadUrl, "_blank");
+    return;
+  }
+
+  const response = await fetch(downloadUrl);
+  const blob = await response.blob();
+
+  const contentType: string | null = response.headers.get("Content-Type");
+
+  const extensionMap: Record<string, string> = {
+    "application/pdf": "pdf",
+    "image/jpeg": "jpg",
+    "image/png": "png",
+    "image/gif": "gif",
+    "application/zip": "zip",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+      "docx",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
+  };
+
+  let extension = contentType ? extensionMap[contentType] : undefined;
+
+  if (!extension) {
+    const urlWithoutQuery = downloadUrl.split("?")[0];
+    extension = urlWithoutQuery.includes(".")
+      ? urlWithoutQuery.split(".").pop()
+      : "pdf";
+  }
+
+  const blobForDownload = new Blob([blob], {
+    type: "application/octet-stream",
+  });
+  const url = URL.createObjectURL(blobForDownload);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `${fileName}.${extension}`;
+  document.body.appendChild(link);
+  link.click();
+  setTimeout(() => {
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, 100);
+}

From ebd514a33aa4dc6841cf36ea17535c2477794927 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 8 May 2026 17:56:45 +0700
Subject: [PATCH 11/16] fix:downloadFileName

---
 src/modules/10_registry/05_Other/02_File.vue    | 17 +++++------------
 .../10_registry/05_Other/03_FileOther.vue       | 17 +++++------------
 src/modules/10_registry/utils/downloadFile.ts   |  3 ++-
 3 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/src/modules/10_registry/05_Other/02_File.vue b/src/modules/10_registry/05_Other/02_File.vue
index 1be029f..bb9f287 100644
--- a/src/modules/10_registry/05_Other/02_File.vue
+++ b/src/modules/10_registry/05_Other/02_File.vue
@@ -6,6 +6,7 @@ import { ref, onMounted, watch } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
 
@@ -57,18 +58,10 @@ async function downloadFile(fileName: string) {
     )
     .then(async (res) => {
       const downloadUrl = res.data.downloadUrl;
-      const response = await fetch(downloadUrl);
-      const blob = await response.blob();
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = fileName;
-      document.body.appendChild(link);
-      link.click();
-      setTimeout(() => {
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-      }, 100);
+      await downloadBlobFile({
+        downloadUrl: downloadUrl,
+        fileName: fileName,
+      });
     })
     .catch((e) => {
       messageError($q, e);
diff --git a/src/modules/10_registry/05_Other/03_FileOther.vue b/src/modules/10_registry/05_Other/03_FileOther.vue
index 05e740b..585e68c 100644
--- a/src/modules/10_registry/05_Other/03_FileOther.vue
+++ b/src/modules/10_registry/05_Other/03_FileOther.vue
@@ -6,6 +6,7 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
 
@@ -57,18 +58,10 @@ async function downloadFile(fileName: string) {
     )
     .then(async (res) => {
       const downloadUrl = res.data.downloadUrl;
-      const response = await fetch(downloadUrl);
-      const blob = await response.blob();
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = fileName;
-      document.body.appendChild(link);
-      link.click();
-      setTimeout(() => {
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-      }, 100);
+      await downloadBlobFile({
+        downloadUrl: downloadUrl,
+        fileName: fileName,
+      });
     })
     .catch((e) => {
       messageError($q, e);
diff --git a/src/modules/10_registry/utils/downloadFile.ts b/src/modules/10_registry/utils/downloadFile.ts
index 341b7f9..99c06c5 100644
--- a/src/modules/10_registry/utils/downloadFile.ts
+++ b/src/modules/10_registry/utils/downloadFile.ts
@@ -49,7 +49,8 @@ export async function downloadBlobFile({
   const url = URL.createObjectURL(blobForDownload);
   const link = document.createElement("a");
   link.href = url;
-  link.download = `${fileName}.${extension}`;
+  const downloadFileName = fileName.includes(".") ? fileName : `${fileName}.${extension}`;
+  link.download = downloadFileName;
   document.body.appendChild(link);
   link.click();
   setTimeout(() => {

From 9bee07eb7c7a7ec7a4f18f4a398e653f4d663704 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 11 May 2026 09:24:23 +0700
Subject: [PATCH 12/16] refactor:(genreport) :  import downloadBlobFile

---
 src/plugins/genreport.ts | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/plugins/genreport.ts b/src/plugins/genreport.ts
index 520ec00..19e2856 100644
--- a/src/plugins/genreport.ts
+++ b/src/plugins/genreport.ts
@@ -2,6 +2,7 @@ import axios from "axios";
 import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 const mixin = useCounterMixin();
 const { showLoader, hideLoader } = mixin;
@@ -19,7 +20,7 @@ async function genReport(data: any, fileName: string, type: string = "docx") {
       },
       responseType: "arraybuffer",
     })
-    .then((res) => {
+    .then(async (res) => {
       const responseData = res.data;
       if (responseData) {
         const mimeType =
@@ -31,18 +32,11 @@ async function genReport(data: any, fileName: string, type: string = "docx") {
         const url = URL.createObjectURL(blob);
 
         const baseName = fileName.trim();
-        const extension = type === "docx" ? "docx" : "pdf";
-
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = `${baseName}.${extension}`;
-        document.body.appendChild(link);
-        link.click();
-
-        setTimeout(() => {
-          document.body.removeChild(link);
-          URL.revokeObjectURL(url);
-        }, 100);
+        // const extension = type === "docx" ? "docx" : "pdf";
+        await downloadBlobFile({
+          downloadUrl: url,
+          fileName: baseName,
+        });
       }
     })
     .catch((err) => {

From 0092133ba68ce6b823b325d177aa66d3d3e66be9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 25 May 2026 13:24:55 +0700
Subject: [PATCH 13/16] fix: await API fileByFile

---
 src/modules/08_KPI/views/form.vue             | 41 +++++++++++--------
 src/modules/11_probation/views/mainDetail.vue | 10 +++--
 src/views/MainLayout.vue                      |  5 ++-
 3 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 39b06d4..2d8e58b 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -9,6 +9,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
+import avatar from "@/assets/avatar_user.jpg";
 
 import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
 import type {
@@ -107,11 +108,13 @@ async function getAvatar(id: string) {
     .then(async (res) => {
       const data = await res.data.result;
       if (data.avatarName) {
-        await fetchProfile(id, data.avatarName);
+        fetchProfile(id, data.avatarName);
       }
     })
     .catch((e) => {
       messageError($q, e);
+      imgProfile.value = avatar;
+      store.dataEvaluation.avartar = avatar;
     })
     .finally(() => {
       isLoadAvatar.value = false;
@@ -119,12 +122,16 @@ async function getAvatar(id: string) {
 }
 
 /** ดึงข้อมูล เพื่อเก็บรูปโปรไฟล์ */
-async function fetchProfile(id: string, avatarName: string) {
-  await http
+function fetchProfile(id: string, avatarName: string) {
+  http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
-    .then(async (res) => {
+    .then((res) => {
       store.dataEvaluation.avartar = res.data.downloadUrl;
       imgProfile.value = res.data.downloadUrl;
+    })
+    .catch(() => {
+      imgProfile.value = avatar;
+      store.dataEvaluation.avartar = avatar;
     });
 }
 
@@ -208,7 +215,7 @@ async function getOrgOp() {
           name: `${i.prefix}${i.firstName} ${i.lastName}`,
         }))
         .find(
-          (i: EvaOptionType) => i.id == store.dataEvaluation.commanderHighId
+          (i: EvaOptionType) => i.id == store.dataEvaluation.commanderHighId,
         );
       isLoadCommander.value = false;
     })
@@ -225,21 +232,21 @@ function filterOption(val: string, update: Function, refData: string) {
     case "evaluatorIdOp":
       update(() => {
         evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
-          (v: DataOptions) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1,
         );
       });
       break;
     case "commanderIdOp":
       update(() => {
         commanderIdOp.value = commanderIdMainOp.value.filter(
-          (v: DataOptions) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1,
         );
       });
       break;
     case "commanderHighOp":
       update(() => {
         commanderHighOp.value = commanderHighMainOp.value.filter(
-          (v: DataOptions) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1,
         );
       });
       break;
@@ -278,7 +285,7 @@ function sendToEvaluatore() {
       }
     },
     "ยืนยันการส่งข้อตกลงให้ผู้ประเมินอนุมัติ",
-    "ต้องการยืนยันส่งข้อตกลงนี้ให้ผู้ประเมินอนุมัติใช่หรือไม่?"
+    "ต้องการยืนยันส่งข้อตกลงนี้ให้ผู้ประเมินอนุมัติใช่หรือไม่?",
   );
 }
 
@@ -308,7 +315,7 @@ function sendToEvaluateEvaluatore() {
       }
     },
     "ยืนยันการส่งให้ผู้ประเมินรายงานผลสำเร็จของงาน",
-    "ต้องการยืนยันส่งให้ผู้ประเมินรายงานผลสำเร็จของงานใช่หรือไม่?"
+    "ต้องการยืนยันส่งให้ผู้ประเมินรายงานผลสำเร็จของงานใช่หรือไม่?",
   );
 }
 
@@ -338,7 +345,7 @@ function requireEdit() {
       }
     },
     "ยืนยันการขอแก้ไขข้อตกลง",
-    "ต้องการยืนยันการขอแก้ไขข้อตกลงนี้ใช่หรือไม่?"
+    "ต้องการยืนยันการขอแก้ไขข้อตกลงนี้ใช่หรือไม่?",
   );
 }
 
@@ -411,7 +418,7 @@ async function goToSummary() {
                       store.excusiveIndicator2ScoreVal +
                       store.competencyScoreVal
                     ).toFixed(2),
-                  }
+                  },
             )
             .then((res) => {});
 
@@ -427,7 +434,7 @@ async function goToSummary() {
         });
     },
     "ยืนยันการส่งไปสรุปผลการประเมิน",
-    "ต้องการยืนยันส่งไปสรุปผลการประเมินใช่หรือไม่?"
+    "ต้องการยืนยันส่งไปสรุปผลการประเมินใช่หรือไม่?",
   );
 }
 
@@ -517,7 +524,7 @@ async function downloadReport() {
           store.dataEvaluation.prefix +
           store.dataEvaluation.firstName +
           " " +
-          store.dataEvaluation.lastName
+          store.dataEvaluation.lastName,
       );
     })
     .catch((e) => {
@@ -556,7 +563,7 @@ async function clickUpload(file: any) {
           const foundKey: string | undefined = Object.keys(res.data).find(
             (key) =>
               res.data[key]?.fileName !== undefined &&
-              res.data[key]?.fileName !== ""
+              res.data[key]?.fileName !== "",
           );
           foundKey &&
             uploadFileDoc(res.data[foundKey]?.uploadUrl, fileUpload.value);
@@ -566,7 +573,7 @@ async function clickUpload(file: any) {
         });
     },
     "ยืนยันการอัปโหลดไฟล์",
-    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?",
   );
 }
 
@@ -623,7 +630,7 @@ function deleteFile(fileName: string) {
     showLoader();
     http
       .delete(
-        config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`
+        config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`,
       )
       .catch((e) => {
         messageError($q, e);
diff --git a/src/modules/11_probation/views/mainDetail.vue b/src/modules/11_probation/views/mainDetail.vue
index cd6b60c..a4584c0 100644
--- a/src/modules/11_probation/views/mainDetail.vue
+++ b/src/modules/11_probation/views/mainDetail.vue
@@ -151,6 +151,7 @@ async function getAvatar(id: string) {
     })
     .catch((e) => {
       messageError($q, e);
+      profileImg.value = avatar;
     });
 }
 
@@ -168,14 +169,15 @@ function getList(id: string) {
     });
 }
 
-async function getImg(id: string, pathName: string) {
-  await http
+function getImg(id: string, pathName: string) {
+  http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
     .then((res) => {
       profileImg.value = res.data.downloadUrl;
     })
     .catch((e) => {
-      messageError($q, e);
+      profileImg.value = avatar;
+      // messageError($q, e);
       hideLoader();
     });
 }
@@ -188,7 +190,7 @@ function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
     rowsData.value,
-    columns.value ? columns.value : []
+    columns.value ? columns.value : [],
   );
 }
 
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 165bf6e..331dbe8 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -74,7 +74,7 @@ async function checkUser() {
       await dataStore.getProFileType();
       kpiDataStore.dataProfile = data; // Set dataProfile in kpiDataStore
       if (data.avatarName) {
-        await getImg(data.profileId, data.avatarName);
+        getImg(data.profileId, data.avatarName);
       } else {
         dataStore.profileImg = avatar;
       }
@@ -106,6 +106,9 @@ function getImg(id: string, pathName: string) {
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
     .then((res) => {
       dataStore.profileImg = res.data.downloadUrl;
+    })
+    .catch(() => {
+      dataStore.profileImg = avatar;
     });
 }
 

From 54c7855b615a3ed0646de9289da6b4e82d66a3a6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 29 May 2026 10:55:41 +0700
Subject: [PATCH 14/16] feat(leave): display leaveCountApproveCount

---
 src/modules/05_leave/interface/index/main.ts |  1 +
 src/modules/05_leave/views/Main.vue          | 26 +++++++++++---------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/modules/05_leave/interface/index/main.ts b/src/modules/05_leave/interface/index/main.ts
index 9551977..a63d65d 100644
--- a/src/modules/05_leave/interface/index/main.ts
+++ b/src/modules/05_leave/interface/index/main.ts
@@ -43,6 +43,7 @@ interface LeaveItem {
   all: number;
   use: number;
   remain: number;
+  leaveCountApproveCount: number;
 }
 
 interface MainList {
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 4e36478..fcaca35 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -141,12 +141,14 @@ async function fetchStatsTable() {
             value:
               el.leaveLimit > 0
                 ? Math.round(
-                    (Number(el.leaveCountApprove) / Number(el.leaveLimit)) * 100
+                    (Number(el.leaveCountApprove) / Number(el.leaveLimit)) *
+                      100,
                   )
                 : 0,
             all: Number(el.leaveLimit),
             use: el.leaveCountApprove,
             remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
+            leaveCountApproveCount: el.leaveCountApproveCount,
           }));
       });
       stat.forEach((item) => itemPie.value.push(...item));
@@ -254,7 +256,7 @@ onMounted(async () => {
                     </q-knob>
                   </div>
                   <div class="col-12 text-center text-weight-medium">
-                    ลาพักผ่อน
+                    {{ item.text }}
                   </div>
                 </div>
                 <div class="row gt-xs"><q-separator vertical /></div>
@@ -262,17 +264,19 @@ onMounted(async () => {
                   <div class="col-12 row text-dark text-body2 items-center">
                     <div class="col-12 row q-pa-xs q-px-md row">
                       <span class="text-grey-7 col-6">ได้รับ</span>
-                      <span class="text-weight-bold">{{ item.all }}</span>
+                      <span class="text-weight-bold">{{ item.all }} วัน</span>
                     </div>
                     <div class="col-12"><q-separator /></div>
                     <div class="col-12 row q-pa-xs q-px-md">
                       <span class="text-grey-7 col-6">ใช้ไป</span>
-                      <span class="text-weight-bold">{{ item.use }}</span>
+                      <span class="text-weight-bold">{{ item.use }} วัน </span>
                     </div>
                     <div class="col-12"><q-separator /></div>
                     <div class="col-12 row q-pa-xs q-px-md">
                       <span class="text-grey-7 col-6">คงเหลือ</span>
-                      <span class="text-weight-bold">{{ item.remain }}</span>
+                      <span class="text-weight-bold"
+                        >{{ item.remain }} วัน</span
+                      >
                     </div>
                   </div>
                 </div>
@@ -294,11 +298,11 @@ onMounted(async () => {
                     flat
                     class="shadow-0 col-12 fit row items-center q-px-lg"
                   >
-                    <div class="text-subtitle2 col-4">ลาป่วย</div>
+                    <div class="text-subtitle2 col-4">{{ item.text }}</div>
                     <div class="text-subtitle2 col-8">
                       <span class="text-grey-7 q-pr-md">ใช้ไป</span>
-                      <span class="text-weight-bold">{{ item.use }}</span>
-                      <!-- <span class="text-grey-7 q-pl-md">ลา</span> -->
+                      <span class="text-weight-bold">{{ item.use }} วัน </span>
+                      ({{ item.leaveCountApproveCount }} ครั้ง)
                     </div>
                   </q-card>
                 </div>
@@ -317,11 +321,11 @@ onMounted(async () => {
                     flat
                     class="shadow-0 col-12 fit row items-center q-px-lg"
                   >
-                    <div class="text-subtitle2 col-4">ลากิจส่วนตัว</div>
+                    <div class="text-subtitle2 col-4">{{ item.text }}</div>
                     <div class="text-subtitle2 col-8">
                       <span class="text-grey-7 q-pr-md">ใช้ไป</span>
-                      <span class="text-weight-bold">{{ item.use }}</span>
-                      <!-- <span class="text-grey-7 q-pl-md">ลา</span> -->
+                      <span class="text-weight-bold">{{ item.use }} วัน </span>
+                      ({{ item.leaveCountApproveCount }} ครั้ง)
                     </div>
                   </q-card>
                 </div>

From 650de029f361be2cd37d0954e1f7c1b5a97743bd Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 29 May 2026 11:35:50 +0700
Subject: [PATCH 15/16] feat(leave): DownloadFile form leave

---
 .../05_leave/components/DialogDetail.vue      | 147 ++++++++++++++++--
 1 file changed, 135 insertions(+), 12 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 3333374..7874515 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -6,7 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
-import { useDataStore } from "@/stores/data";
+import genReport from "@/plugins/genreport";
 
 /** import type*/
 import type {
@@ -16,8 +16,6 @@ import type {
   FromCancelDetail,
 } from "@/modules/05_leave/interface/response/leave";
 
-import DialogHeader from "@/components/DialogHeader.vue";
-import Workflow from "@/components/Workflow/Main.vue";
 import FormLeave from "@/modules/05_leave/components/formDetail/01_SickForm.vue";
 import FormChildbirth from "@/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue";
 import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationForm.vue";
@@ -33,7 +31,6 @@ import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue"
 
 const $q = useQuasar();
 const dataStore = useLeaveStore();
-const mainStore = useDataStore();
 const { convertStatud } = dataStore;
 const mixin = useCounterMixin();
 const {
@@ -411,6 +408,28 @@ async function onSubmit() {
     });
 }
 
+/**
+ * ฟังก์ชันดาวน์โหลดไฟล์
+ * @param id รหัสการลา
+ * @param fileName ชื่อไฟล์
+ * @param type ประเภทไฟล์
+ */
+async function onClickDownloadFile(id: string, fileName: string, type: string) {
+  showLoader();
+  await http
+    .get(config.API.leaveReport(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      await genReport(data, fileName, type);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาแล้วเปิด modal */
 watch(
   () => props.modal,
@@ -434,10 +453,62 @@ watch(
       v-if="props.leaveStatus != 'DELETE'"
       style="width: 900px; max-width: 80vw"
     >
-      <DialogHeader
-        :tittle="`${titleMain} ${titleName}`"
-        :close="props.onClickClose"
-      />
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold">
+          {{ ` ${titleMain} ${titleName}` }}
+          <q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 100px">
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="
+                    onClickDownloadFile(
+                      formData.id,
+                      formData.leaveSubTypeName
+                        ? formData.leaveSubTypeName
+                        : formData.leaveTypeName,
+                      'docx',
+                    )
+                  "
+                >
+                  <q-item-section avatar>
+                    <q-icon color="blue" name="mdi-file-word" />
+                  </q-item-section>
+                  <q-item-section>ไฟล์ .DOCX</q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="
+                    onClickDownloadFile(
+                      formData.id,
+                      formData.leaveSubTypeName
+                        ? formData.leaveSubTypeName
+                        : formData.leaveTypeName,
+                      'pdf',
+                    )
+                  "
+                >
+                  <q-item-section avatar>
+                    <q-icon color="red" name="mdi-file-pdf" />
+                  </q-item-section>
+                  <q-item-section>ไฟล์ .pdf</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="props.onClickClose?.()"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
 
       <q-separator />
       <q-card-section v-if="isLoading">
@@ -580,10 +651,62 @@ watch(
     </q-card>
 
     <q-card v-if="props.leaveStatus === 'DELETE'" style="min-width: 40vw">
-      <DialogHeader
-        :tittle="`${titleMainCancle} ${titleName}`"
-        :close="props.onClickClose"
-      />
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold">
+          {{ ` ${titleMainCancle} ${titleName}` }}
+          <q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 100px">
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="
+                    onClickDownloadFile(
+                      formData.id,
+                      formData.leaveSubTypeName
+                        ? formData.leaveSubTypeName
+                        : formData.leaveTypeName,
+                      'docx',
+                    )
+                  "
+                >
+                  <q-item-section avatar>
+                    <q-icon color="blue" name="mdi-file-word" />
+                  </q-item-section>
+                  <q-item-section>ไฟล์ .DOCX</q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="
+                    onClickDownloadFile(
+                      formData.id,
+                      formData.leaveSubTypeName
+                        ? formData.leaveSubTypeName
+                        : formData.leaveTypeName,
+                      'pdf',
+                    )
+                  "
+                >
+                  <q-item-section avatar>
+                    <q-icon color="red" name="mdi-file-pdf" />
+                  </q-item-section>
+                  <q-item-section>ไฟล์ .pdf</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="props.onClickClose?.()"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
 
       <q-separator />
       <q-card-section v-if="isLoading">

From a0f0443a55a0f5fb6d4d543d856285264cf7a682 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 29 May 2026 13:55:05 +0700
Subject: [PATCH 16/16]  refactor: downloadBlobFile with direct blob download
 logic

---
 src/plugins/genreport.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/plugins/genreport.ts b/src/plugins/genreport.ts
index 19e2856..500dca4 100644
--- a/src/plugins/genreport.ts
+++ b/src/plugins/genreport.ts
@@ -2,7 +2,6 @@ import axios from "axios";
 import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { downloadBlobFile } from "@/modules/10_registry/utils/downloadFile";
 
 const mixin = useCounterMixin();
 const { showLoader, hideLoader } = mixin;
@@ -32,11 +31,16 @@ async function genReport(data: any, fileName: string, type: string = "docx") {
         const url = URL.createObjectURL(blob);
 
         const baseName = fileName.trim();
-        // const extension = type === "docx" ? "docx" : "pdf";
-        await downloadBlobFile({
-          downloadUrl: url,
-          fileName: baseName,
-        });
+        const extension = type === "docx" ? "docx" : "pdf";
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `${baseName}.${extension}`;
+        document.body.appendChild(link);
+        link.click();
+        setTimeout(() => {
+          document.body.removeChild(link);
+          URL.revokeObjectURL(url);
+        }, 100);
       }
     })
     .catch((err) => {