From b60ca9df9bd323f7e27339fb6fe794d201b6f679 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 13 Feb 2025 15:37:30 +0700
Subject: [PATCH 001/195] fixing redirect

---
 .env.production          |  1 +
 docker/entrypoint.sh     |  1 +
 src/views/MainLayout.vue | 11 ++---------
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/.env.production b/.env.production
index e85ca8e..34cdec1 100644
--- a/.env.production
+++ b/.env.production
@@ -2,4 +2,5 @@ VITE_API_URI_CONFIG=VITE_API_URI_CONFIG
 VITE_API_PUBLISH_URL=VITE_API_PUBLISH_URL
 VITE_MANUAL_URL=VITE_MANUAL_URL
 VITE_URL_SSO=VITE_URL_SSO
+VITE_URL_LANDING=VITE_URL_LANDING
 VITE_API_REPORT_URL=VITE_API_REPORT_URL
\ No newline at end of file
diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh
index ae50dc4..e41d13f 100644
--- a/docker/entrypoint.sh
+++ b/docker/entrypoint.sh
@@ -12,6 +12,7 @@ do
   sed -i 's|VITE_API_PUBLISH_URL|'${VITE_API_PUBLISH_URL}'|g' $file
   sed -i 's|VITE_MANUAL_URL|'${VITE_MANUAL_URL}'|g' $file
   sed -i 's|VITE_URL_SSO|'${VITE_URL_SSO}'|g' $file
+  sed -i 's|VITE_URL_LANDING|'${VITE_URL_LANDING}'|g' $file
   sed -i 's|VITE_API_REPORT_URL|'${VITE_API_REPORT_URL}'|g' $file 
 
 
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index f6feb70..0c0b6c4 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -13,7 +13,7 @@ import { useDataStore } from "@/stores/data";
 
 // landing page config url
 const configParam = {
-  landingPageUrl: import.meta.env.VITE_URL_SSO,
+  landingPageUrl: import.meta.env.VITE_URL_LANDING,
 };
 
 const route = useRoute();
@@ -234,14 +234,7 @@ function onInfo() {
 }
 
 // landing page redirect
-const landingPageUrl = ref<string>(getLandingUrl());
-function getLandingUrl() {
-  if (window.location.hostname === "bma-ehr-user.frappet.synology.me") {
-    return `${configParam.landingPageUrl}/e-hr`;
-  } else {
-    return configParam.landingPageUrl;
-  }
-}
+const landingPageUrl = ref<string>(configParam.landingPageUrl);
 
 function onViewDetailNoti(url: string) {
   window.open(url, "_blank");

From 9076bcc02d05e0d58d457dbc33c9af93a203b4eb Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 13 Feb 2025 16:10:24 +0700
Subject: [PATCH 002/195] pdf

---
 src/modules/09_scholarship/views/detail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 012df96..898ba70 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -581,7 +581,7 @@ onMounted(async () => {
                 dense
                 v-model="documentFile"
                 label="ไฟล์เอกสารหลักฐาน"
-                accept=".pdf,.xlsx,.docx,.png,.jpg"
+                accept=".pdf"
                 clearable
               >
                 <template v-slot:prepend>

From c19c8a5966654180c2d2b408b18db4b5ceef42ef Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 20 Feb 2025 11:40:35 +0700
Subject: [PATCH 003/195] =?UTF-8?q?download=20=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=95=E0=B8=81=E0=B8=A5=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/KPI/api.kpis.ts           |  4 ++-
 src/modules/08_KPI/views/form.vue | 43 +++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/api/KPI/api.kpis.ts b/src/api/KPI/api.kpis.ts
index 2a3010d..d3cc7c4 100644
--- a/src/api/KPI/api.kpis.ts
+++ b/src/api/KPI/api.kpis.ts
@@ -73,6 +73,8 @@ export default {
   developmentReQuestIDP: (id: string) => `${developmentOrg}/profile/development/registry/USER/${id}`,
   developmentIDP: (id: string) => `${development}/main/registry/USER/${id}`,
 
-  kpiReject:(id:string)=>`${kpiEvaluation}/reject-agreement/${id}`
+  kpiReject:(id:string)=>`${kpiEvaluation}/reject-agreement/${id}`,
+
+  kpiReportList:(id:string)=>`${Kpi}/report/list/${id}`
 };
 
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 2caa87f..d368c71 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+import genReport from "@/plugins/genreport";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -472,6 +473,26 @@ async function getProfile() {
     });
 }
 
+async function downloadReport() {
+  await http
+    .get(config.API.kpiReportList(id.value))
+    .then(async (res) => {
+      const data = res.data.result;
+      await genReport(
+        data,
+        "แบบรายงานผลการปฏิบัติราชการ " +
+          store.dataEvaluation.prefix +
+          store.dataEvaluation.firstName +
+          " " +
+          store.dataEvaluation.lastName
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
 onMounted(async () => {
   showLoader();
   store.isUpdate = false;
@@ -707,6 +728,28 @@ onMounted(async () => {
                         >ดูข้อมูลการทดลองปฏิบัติหน้าที่ราชการ</q-tooltip
                       >
                     </q-btn>
+                    <q-btn
+                      v-if="
+                        store.dataEvaluation.evaluationStatus !== 'NEW' ||
+                        store.dataEvaluation.evaluationStatus !==
+                          'NEW_EVALUATOR' ||
+                        store.dataEvaluation.evaluationStatus !==
+                          'NEW_COMMANDER' ||
+                        store.dataEvaluation.evaluationStatus !==
+                          'NEW_COMMANDER_HIGH'
+                      "
+                      unelevated
+                      round
+                      color="grey-2"
+                      text-color="primary"
+                      icon="download"
+                      size="md"
+                      @click="downloadReport()"
+                    >
+                      <q-tooltip
+                        >ดาวน์โหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
+                      >
+                    </q-btn>
                   </div>
                 </div>
               </div>

From 8d8babbfd9c1d9cf87c81ff9304db01c63fc6624 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 20 Feb 2025 14:46:35 +0700
Subject: [PATCH 004/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=AD=E0=B8=B1=E0=B8=9B=E0=B9=82=E0=B8=AB=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_KPI/views/form.vue | 262 +++++++++++++++++++++++++++++-
 1 file changed, 258 insertions(+), 4 deletions(-)

diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index d368c71..d5b617a 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import genReport from "@/plugins/genreport";
+import axios from "axios";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -20,6 +21,12 @@ import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogGovernment from "@/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue";
 
+interface ArrayFileList {
+  id: string;
+  pathName: string;
+  fileName: string;
+}
+
 const $q = useQuasar();
 const store = useKpiDataStore();
 const mixin = useCounterMixin();
@@ -30,11 +37,16 @@ const {
   dialogConfirm,
   success,
   findOrgName,
+  dialogRemove,
 } = mixin;
 const route = useRoute();
 const router = useRouter();
 const id = ref<string>(route.params.id as string);
 
+const modalUpload = ref<boolean>(false);
+const fileUpload = ref<any>(null);
+const fileList = ref<ArrayFileList[]>([]);
+
 const modalGovernment = ref<boolean>(false); // ตัวแปร dialog ช่วยราชการ
 const modalEdit = ref<boolean>(false); // ตัวแปร dialog แก้ไขผู้ประเมิน
 const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
@@ -480,7 +492,7 @@ async function downloadReport() {
       const data = res.data.result;
       await genReport(
         data,
-        "แบบรายงานผลการปฏิบัติราชการ " +
+        "แบบกำหนดข้อตกลง" +
           store.dataEvaluation.prefix +
           store.dataEvaluation.firstName +
           " " +
@@ -493,6 +505,138 @@ async function downloadReport() {
     .finally(() => {});
 }
 
+async function uploadReport() {
+  modalUpload.value = true;
+  getData();
+}
+
+function closeDialog() {
+  modalUpload.value = false;
+  fileUpload.value = null;
+}
+
+/** ฟังชั่น อัปโหลดไฟล์ */
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value), {
+          replace: true,
+          fileList: fileName,
+        })
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey &&
+            uploadFileDoc(res.data[foundKey]?.uploadUrl, fileUpload.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ * อัปโหลดไฟล์
+ * @param uploadUrl  url
+ * @param file ไฟล์
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", fileUpload.value);
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async (res) => {
+      await getData();
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fileUpload.value = null;
+      hideLoader();
+    });
+}
+
+/** ดึงข้อมูล */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value))
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบไฟล์
+ * @param fileName file name
+ */
+function deleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(
+        config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`
+      )
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await getData();
+
+        setTimeout(() => {
+          success($q, `ลบไฟล์สำเร็จ`);
+          hideLoader();
+        }, 500);
+      });
+  });
+}
+
+/**
+ * ดาวน์โหลดลิงก์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`)
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
   showLoader();
   store.isUpdate = false;
@@ -730,11 +874,11 @@ onMounted(async () => {
                     </q-btn>
                     <q-btn
                       v-if="
-                        store.dataEvaluation.evaluationStatus !== 'NEW' ||
+                        store.dataEvaluation.evaluationStatus !== 'NEW' &&
                         store.dataEvaluation.evaluationStatus !==
-                          'NEW_EVALUATOR' ||
+                          'NEW_EVALUATOR' &&
                         store.dataEvaluation.evaluationStatus !==
-                          'NEW_COMMANDER' ||
+                          'NEW_COMMANDER' &&
                         store.dataEvaluation.evaluationStatus !==
                           'NEW_COMMANDER_HIGH'
                       "
@@ -750,6 +894,28 @@ onMounted(async () => {
                         >ดาวน์โหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
                       >
                     </q-btn>
+                    <q-btn
+                      v-if="
+                        store.dataEvaluation.evaluationStatus !== 'NEW' &&
+                        store.dataEvaluation.evaluationStatus !==
+                          'NEW_EVALUATOR' &&
+                        store.dataEvaluation.evaluationStatus !==
+                          'NEW_COMMANDER' &&
+                        store.dataEvaluation.evaluationStatus !==
+                          'NEW_COMMANDER_HIGH'
+                      "
+                      unelevated
+                      round
+                      color="grey-2"
+                      text-color="blue"
+                      icon="upload"
+                      size="md"
+                      @click="uploadReport()"
+                    >
+                      <q-tooltip
+                        >อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
+                      >
+                    </q-btn>
                   </div>
                 </div>
               </div>
@@ -1079,6 +1245,94 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
+  <q-dialog v-model="modalUpload" persistent>
+    <q-card class="col-12" style="width: 60vw">
+      <DialogHeader
+        tittle="อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="row col-12 q-col-gutter-y-sm">
+          <div class="col-12 row" v-if="fileList.length == 0">
+            <q-file
+              for="inputFiles"
+              class="col-12"
+              outlined
+              dense
+              v-model="fileUpload"
+              label="ไฟล์เอกสารแบบกำหนดข้อตกลง"
+              hide-bottom-space
+              accept=".pdf"
+              clearable
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+              <template v-slot:after>
+                <q-btn
+                  size="14px"
+                  v-if="fileUpload"
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="clickUpload(fileUpload)"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </template>
+            </q-file>
+          </div>
+
+          <div v-if="fileList.length > 0" class="col-xs-12 row">
+            <q-list class="full-width rounded-borders" bordered separator>
+              <q-item
+                clickable
+                v-ripple
+                v-for="data in fileList"
+                :key="data.id"
+                class="items-center"
+              >
+                <q-item-section>{{ data.fileName }}</q-item-section>
+                <q-space />
+                <div>
+                  <q-btn
+                    size="12px"
+                    flat
+                    round
+                    dense
+                    color="blue"
+                    icon="mdi-download"
+                    @click="downloadFile(data.fileName)"
+                    ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                  >
+
+                  <q-btn
+                    size="12px"
+                    flat
+                    round
+                    dense
+                    color="red"
+                    class="q-ml-sm"
+                    icon="mdi-delete-outline"
+                    @click="deleteFile(data.fileName)"
+                    ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                  >
+                </div>
+              </q-item>
+            </q-list>
+          </div>
+
+          <div class="col-12" v-else>
+            <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+
   <DialogGovernment v-model:modal="modalGovernment" />
 </template>
 <style>

From 24f68d129de2a40fc3795d00e257864b28e83b2d Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 21 Feb 2025 17:10:20 +0700
Subject: [PATCH 005/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20checkbox?=
 =?UTF-8?q?=20=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=80=E0=B9=80=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=94=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/FormLeave/07_HajjForm.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index 2077963..6ba75e1 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -53,7 +53,7 @@ const formDataHaji = reactive<any>({
   leaveStartDate: null,
   leaveEndDate: null,
   totalLeave: 0,
-  hajjDayStatus: "true",
+  hajjDayStatus: true,
   leaveDocument: [],
   leaveDetail: "",
 });
@@ -390,14 +390,14 @@ onMounted(() => {
           <q-radio
             v-model="formDataHaji.hajjDayStatus"
             :disable="statusCheck === 'NEW'"
-            :val="'true'"
+            :val="true"
             checked-icon="task_alt"
             label="เคย"
           />
           <q-radio
             v-model="formDataHaji.hajjDayStatus"
             :disable="statusCheck === 'NEW'"
-            :val="'false'"
+            :val="false"
             checked-icon="task_alt"
             label="ไม่เคยไปประกอบพิธีฮัจญ์"
           />

From c60f2acd22af36c38dd04dfd7a34c62f3b215a08 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 24 Feb 2025 16:34:36 +0700
Subject: [PATCH 006/195] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=20Position?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/org/api.org.ts                        |  12 +-
 .../10_registry/02_Government/07_Position.vue | 632 ++++++++++++++++++
 .../10_registry/03_Salary/01_Salary.vue       | 110 ++-
 .../10_registry/tabs/02_government.vue        |   6 +-
 4 files changed, 732 insertions(+), 28 deletions(-)
 create mode 100644 src/modules/10_registry/02_Government/07_Position.vue

diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index e7aa0b7..6a32e6a 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -38,8 +38,16 @@ export default {
   dataUserDuty: `${profileOrg}/duty/user`,
   dataUserDutyByType: (type: string) => `${org}/profile${type}/duty/user`,
 
-  dataUserActpositionByType: (type: string) => `${org}/profile${type}/actposition/user`,
-  dataUserAssistanceByType: (type: string) => `${org}/profile${type}/assistance/user`,
+  dataUserActpositionByType: (type: string) =>
+    `${org}/profile${type}/actposition/user`,
+  dataUserAssistanceByType: (type: string) =>
+    `${org}/profile${type}/assistance/user`,
+
+  //ตำแหน่ง
+  dataUserPosition: (type: string) =>
+    `${org}/profile${type}/salary/position/user`,
+  dataUserPositionHistory: (emType: string, id: string) =>
+    `${org}/profile${emType}/salary/position/history/${id}`,
 
   dataUserSalary: `${profileOrg}/salary/user`,
   dataUserSalaryByType: (type: string) => `${org}/profile${type}/salary/user`,
diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
new file mode 100644
index 0000000..113a900
--- /dev/null
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -0,0 +1,632 @@
+<script setup lang="ts">
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, onMounted, computed } from "vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+
+import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+const link = ref<string>("");
+const $q = useQuasar();
+const dataPerson = useDataStore();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  mixin;
+
+const idByRow = ref<string>("");
+const rows = ref<SalaryFormType[]>([]);
+const rowsData = ref<SalaryFormType[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<SalaryFormType[]>([]);
+const rowsHistoryData = ref<SalaryFormType[]>([]);
+const mode = ref<boolean>($q.screen.gt.xs);
+const checkType = ref<boolean>(
+  dataPerson.officerType == "OFFICER" ? true : false
+);
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "commandDateAffect",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "posNo",
+  "positionName",
+  "positionType",
+  "positionLevel",
+  "commandName",
+  "refCommandNo",
+  "remark",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+const columns = computed(() => {
+  if (checkType.value == false) {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+
+const baseColumns = ref<QTableProps["columns"]>([
+  {
+    name: "commandDateAffect",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "commandDateAffect",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: checkType.value ? "เงินเดือน" : "ค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posNoAbb && row.posNo
+        ? `${row.posNoAbb}${row.posNo}`
+        : row.posNo
+        ? row.posNo
+        : "-";
+    },
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${
+        row.positionLevel
+          ? row.positionLevel
+          : row.positionCee
+          ? row.positionCee
+          : "-"
+      }`;
+    },
+  },
+
+  {
+    name: "commandName",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "commandName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.commandNo && row.commandYear
+        ? `${row.commandNo}/${row.commandYear}`
+        : "";
+    },
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+  },
+]);
+
+const visibleColumnsHistory = ref<string[]>([
+  "commandDateAffect",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "positionName",
+  "posNo",
+  "positionLine",
+  "positionPathSide",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "salaryClass",
+  "commandName",
+  "refCommandNo",
+  "remark",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+const columnsHistory = computed(() => {
+  if (checkType.value == false) {
+    if (baseColumnsHistory.value) {
+      return baseColumnsHistory.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+
+const baseColumnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "commandDateAffect",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "commandDateAffect",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: checkType.value ? "เงินเดือน" : "ค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    style: "font-size: 14px",
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    style: "font-size: 14px",
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posNoAbb && row.posNo
+        ? `${row.posNoAbb}${row.posNo}`
+        : row.posNo
+        ? row.posNo
+        : "-";
+    },
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salaryClass",
+    align: "left",
+    label: "ตำแหน่ง (รายละเอียด)",
+    sortable: true,
+    field: "salaryClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "commandName",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "commandName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.commandNo && row.commandYear
+        ? `${row.commandNo}/${row.commandYear}`
+        : "";
+    },
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+  },
+]);
+
+/** เปิด dialog ประวัติ*/
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserPosition(link.value))
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+      rowsData.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+      rowsHistoryData.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
+onMounted(async () => {
+  link.value = await dataPerson.getProFileType();
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none">
+      <span class="text-blue-6 text-weight-bold text-body1">ตำแหน่ง</span>
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+        @keydown.enter="onSearch"
+      >
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-dense
+        option-value="name"
+        style="min-width: 140px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows.length !== 0 ? rows : []"
+      :columns="columns"
+      :grid="!mode"
+      :rows-per-page-options="[10, 25, 50, 100]"
+      :visible-columns="visibleColumns"
+      :virtual-scroll-sticky-size-start="48"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th auto-width />
+        </q-tr>
+      </template>
+
+      <template v-if="mode" v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? props.row.status : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+              </q-btn>
+              <q-item v-for="col in props.cols" :key="col.name">
+                <q-item-section class="fix_top">
+                  <q-item-label class="text-grey-6 text-weight-medium">{{
+                    col.label
+                  }}</q-item-label>
+                </q-item-section>
+                <q-item-section class="fix_top">
+                  <q-item-label class="text-dark text-weight-medium">{{
+                    col.value ? col.value : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ตำแหน่ง'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :rows-data="rowsHistoryData"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 281f247..a3314d3 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -33,15 +33,17 @@ const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
 
 const visibleColumns = ref<string[]>([
-  "date",
+  "commandDateAffect",
   "amount",
   "positionSalaryAmount",
   "mouthSalaryAmount",
   "posNo",
+  "positionName",
   "positionType",
   "positionLevel",
-  "templateDoc",
+  "commandName",
   "refCommandNo",
+  "remark",
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
@@ -61,11 +63,11 @@ const columns = computed(() => {
 
 const baseColumns = ref<QTableProps["columns"]>([
   {
-    name: "date",
+    name: "commandDateAffect",
     align: "left",
     label: "วัน เดือน ปี",
     sortable: true,
-    field: "date",
+    field: "commandDateAffect",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
@@ -100,7 +102,6 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     format: (v) => Number(v).toLocaleString(),
   },
-
   {
     name: "posNo",
     align: "left",
@@ -109,8 +110,23 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return row.posNoAbb && row.posNo
+        ? `${row.posNoAbb}${row.posNo}`
+        : row.posNo
+        ? row.posNo
+        : "-";
+    },
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
-
   {
     name: "positionType",
     align: "left",
@@ -128,14 +144,23 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${
+        row.positionLevel
+          ? row.positionLevel
+          : row.positionCee
+          ? row.positionCee
+          : "-"
+      }`;
+    },
   },
 
   {
-    name: "templateDoc",
+    name: "commandName",
     align: "left",
     label: "เอกสารอ้างอิง",
     sortable: true,
-    field: "templateDoc",
+    field: "commandName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -147,6 +172,20 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "refCommandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return row.commandNo && row.commandYear
+        ? `${row.commandNo}/${row.commandYear}`
+        : "";
+    },
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
   {
     name: "lastUpdateFullName",
@@ -170,12 +209,12 @@ const baseColumns = ref<QTableProps["columns"]>([
 ]);
 
 const visibleColumnsHistory = ref<string[]>([
-  "date",
+  "commandDateAffect",
   "amount",
   "positionSalaryAmount",
   "mouthSalaryAmount",
   "oc",
-  "position",
+  "positionName",
   "posNo",
   "positionLine",
   "positionPathSide",
@@ -184,8 +223,9 @@ const visibleColumnsHistory = ref<string[]>([
   "positionExecutive",
   "positionExecutiveSide",
   "salaryClass",
-  "templateDoc",
+  "commandName",
   "refCommandNo",
+  "remark",
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
@@ -205,11 +245,11 @@ const columnsHistory = computed(() => {
 
 const baseColumnsHistory = ref<QTableProps["columns"]>([
   {
-    name: "date",
+    name: "commandDateAffect",
     align: "left",
     label: "วัน เดือน ปี",
     sortable: true,
-    field: "date",
+    field: "commandDateAffect",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
@@ -253,15 +293,7 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
+
   {
     name: "posNo",
     align: "left",
@@ -270,6 +302,22 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return row.posNoAbb && row.posNo
+        ? `${row.posNoAbb}${row.posNo}`
+        : row.posNo
+        ? row.posNo
+        : "-";
+    },
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
   {
     name: "positionLine",
@@ -335,11 +383,11 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "templateDoc",
+    name: "commandName",
     align: "left",
     label: "เอกสารอ้างอิง",
     sortable: true,
-    field: "templateDoc",
+    field: "commandName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -351,6 +399,20 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     field: "refCommandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return row.commandNo && row.commandYear
+        ? `${row.commandNo}/${row.commandYear}`
+        : "";
+    },
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
   {
     name: "lastUpdateFullName",
diff --git a/src/modules/10_registry/tabs/02_government.vue b/src/modules/10_registry/tabs/02_government.vue
index 610b7aa..6fe38ab 100644
--- a/src/modules/10_registry/tabs/02_government.vue
+++ b/src/modules/10_registry/tabs/02_government.vue
@@ -8,6 +8,7 @@ import Leave from "@/modules/10_registry/02_Government/03_Leave.vue";
 import Duty from "@/modules/10_registry/02_Government/04_Duty.vue";
 import Actposition from "@/modules/10_registry/02_Government/05_Actposition.vue";
 import Assistance from "@/modules/10_registry/02_Government/06_Assistance.vue";
+import Position from "@/modules/10_registry/02_Government/07_Position.vue";
 
 const router = useRouter();
 </script>
@@ -30,11 +31,12 @@ const router = useRouter();
 
   <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
     <Government />
+    <Position />
+    <Actposition />
+    <Assistance />
     <Discipline />
     <Leave />
     <Duty />
-    <Actposition />
-    <Assistance />
   </div>
 </template>
 <style scoped>

From d271bca402d1bff2458b145ecd51c3341304a506 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 25 Feb 2025 16:27:24 +0700
Subject: [PATCH 007/195] =?UTF-8?q?=E0=B9=80=E0=B8=AD=E0=B8=B2=20map=20?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=B4=E0=B8=A5=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_transfer/views/Main.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index 80ad70d..fe86ae3 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -295,13 +295,7 @@ onMounted(async () => {
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
-                    <div v-else-if="col.name == 'noPos'">
-                      {{
-                        props.row.rootShortNameOld && props.row.noPos
-                          ? `${props.row.rootShortNameOld}${props.row.noPos}`
-                          : "-"
-                      }}
-                    </div>
+
                     <div v-else-if="col.name == 'salary'">
                       {{
                         props.row.salary

From 0e5e7ac5be6fafecbc312fdb7ac81871b87dd477 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 26 Feb 2025 16:52:43 +0700
Subject: [PATCH 008/195] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=20=3D=3D>=20sort?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_Information/01_Information.vue         | 13 +++----
 .../01_Information/02_ChangeName.vue          |  4 ++
 .../10_registry/01_Information/03_Address.vue |  4 +-
 .../10_registry/01_Information/04_Family.vue  | 37 ++++++++++++++++---
 .../01_Information/05_Educations.vue          | 12 +++---
 .../10_registry/01_Information/06_Ability.vue |  9 +++--
 .../02_Government/02_Discipline.vue           |  6 ++-
 .../10_registry/02_Government/03_Leave.vue    | 14 +++++--
 .../10_registry/02_Government/04_Duty.vue     |  9 ++++-
 .../02_Government/05_Actposition.vue          | 25 +++++++++++--
 .../02_Government/06_Assistance.vue           | 19 +++++++++-
 .../10_registry/03_Salary/02_Nopaid.vue       | 11 ++++--
 .../04_Achievement/01_Certificate.vue         | 13 ++++---
 .../04_Achievement/02_Training.vue            | 10 +++--
 .../04_Achievement/03_Insignia.vue            | 10 +++--
 .../10_registry/04_Achievement/04_Honor.vue   |  9 +++--
 .../04_Achievement/05_Assessments.vue         |  8 +++-
 .../04_Achievement/06_DevelopmentPlan.vue     | 29 +++++++++------
 src/modules/10_registry/05_Other/01_Other.vue |  8 +++-
 .../10_registry/Dialog/DialogHistory.vue      |  6 ++-
 .../10_registry/tabs/01_information.vue       |  2 +
 .../10_registry/views/requestEditMain.vue     |  8 ++--
 22 files changed, 194 insertions(+), 72 deletions(-)

diff --git a/src/modules/10_registry/01_Information/01_Information.vue b/src/modules/10_registry/01_Information/01_Information.vue
index 6b60732..f97a40e 100644
--- a/src/modules/10_registry/01_Information/01_Information.vue
+++ b/src/modules/10_registry/01_Information/01_Information.vue
@@ -64,10 +64,9 @@ const visibleColumnsHistory = ref<string[]>([
   "ethnicity",
   "religion",
   "phone",
-  "createdFullName",
-  "createdAt",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "citizenId",
@@ -214,25 +213,25 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
diff --git a/src/modules/10_registry/01_Information/02_ChangeName.vue b/src/modules/10_registry/01_Information/02_ChangeName.vue
index 89cfdaf..0a36de2 100644
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/src/modules/10_registry/01_Information/02_ChangeName.vue
@@ -94,6 +94,9 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "prefix",
@@ -309,6 +312,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/01_Information/03_Address.vue b/src/modules/10_registry/01_Information/03_Address.vue
index e953012..e848b40 100644
--- a/src/modules/10_registry/01_Information/03_Address.vue
+++ b/src/modules/10_registry/01_Information/03_Address.vue
@@ -211,7 +211,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -267,7 +267,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
-      console.log("🚀 ~ .then ~ data:", data)
+      console.log("🚀 ~ .then ~ data:", data);
       rowsHistoryData.value = data;
     })
     .catch((e) => {
diff --git a/src/modules/10_registry/01_Information/04_Family.vue b/src/modules/10_registry/01_Information/04_Family.vue
index 0440cdd..c40a590 100644
--- a/src/modules/10_registry/01_Information/04_Family.vue
+++ b/src/modules/10_registry/01_Information/04_Family.vue
@@ -15,7 +15,7 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
 const idFamily = ref<string>("");
 const store = useRegistryInFormationStore();
@@ -67,6 +67,8 @@ const visibleColumnsHistory = ref<string[]>([
   "job",
   "isLive",
   "lastNameOld",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
@@ -134,6 +136,29 @@ const columnsHistory = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     format: (val) => (val ? "มีชีวิต" : "ถึงแก่กรรม"),
   },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 
 const checkFatherData = ref<boolean>(false);
@@ -202,6 +227,8 @@ async function getData(type: string) {
 
 /** get history */
 function getHistory() {
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataStore.officerType == "OFFICER"
       ? config.API.dataUserFamilyHistory(typeForm.value, "", idFamily.value)
@@ -216,8 +243,8 @@ function getHistory() {
     .get(url)
     .then((res) => {
       const data = res.data.result;
-      const listData = 
-       data.map((e: any) => ({
+      const listData = data.map((e: any) => ({
+        ...e,
         citizenId: e[`${typeForm.value}CitizenId`],
         prefix: e[`${typeForm.value}Prefix`],
         firstName: e[`${typeForm.value}FirstName`],
@@ -227,8 +254,8 @@ function getHistory() {
         lastNameOld:
           typeForm.value === "couple" ? e.coupleLastNameOld : undefined,
       }));
-      rowsHistory.value = listData
-      rowsHistoryData.value = listData
+      rowsHistory.value = listData;
+      rowsHistoryData.value = listData;
     })
     .catch((e) => {
       messageError($q, e);
diff --git a/src/modules/10_registry/01_Information/05_Educations.vue b/src/modules/10_registry/01_Information/05_Educations.vue
index 4901662..943a411 100644
--- a/src/modules/10_registry/01_Information/05_Educations.vue
+++ b/src/modules/10_registry/01_Information/05_Educations.vue
@@ -49,7 +49,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "educationLevel",
@@ -237,13 +236,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const columnsHistory = ref<QTableProps["columns"]>([
   {
@@ -434,14 +436,13 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const visibleColumnsHistory = ref<string[]>([
   "educationLevel",
   "institute",
@@ -569,6 +570,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -589,7 +591,7 @@ onMounted(async () => {
               {{ props.row.status ? props.row.status : "-" }}
             </div>
             <div v-else>
-              {{ col.value ? col.value:'-' }}
+              {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
           <q-td auto-width>
diff --git a/src/modules/10_registry/01_Information/06_Ability.vue b/src/modules/10_registry/01_Information/06_Ability.vue
index 948df44..202e37b 100644
--- a/src/modules/10_registry/01_Information/06_Ability.vue
+++ b/src/modules/10_registry/01_Information/06_Ability.vue
@@ -36,7 +36,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "field",
@@ -99,13 +98,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "field",
@@ -177,7 +179,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -290,6 +292,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/02_Government/02_Discipline.vue b/src/modules/10_registry/02_Government/02_Discipline.vue
index 75bb1e4..c281dcc 100644
--- a/src/modules/10_registry/02_Government/02_Discipline.vue
+++ b/src/modules/10_registry/02_Government/02_Discipline.vue
@@ -127,13 +127,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 function onHistory(id: string) {
   modalHistory.value = true;
@@ -236,6 +239,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/02_Government/03_Leave.vue b/src/modules/10_registry/02_Government/03_Leave.vue
index 40ddbc2..7120f43 100644
--- a/src/modules/10_registry/02_Government/03_Leave.vue
+++ b/src/modules/10_registry/02_Government/03_Leave.vue
@@ -83,7 +83,9 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -124,13 +126,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "no",
@@ -187,7 +192,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -387,6 +394,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/02_Government/04_Duty.vue b/src/modules/10_registry/02_Government/04_Duty.vue
index 50ee476..e1970fd 100644
--- a/src/modules/10_registry/02_Government/04_Duty.vue
+++ b/src/modules/10_registry/02_Government/04_Duty.vue
@@ -22,7 +22,8 @@ const rowsHistoryData = ref<DutyFormType[]>([]);
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  mixin;
 
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
@@ -126,11 +127,14 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "dateStart",
@@ -340,6 +344,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/02_Government/05_Actposition.vue b/src/modules/10_registry/02_Government/05_Actposition.vue
index 5d818cb..8f887b3 100644
--- a/src/modules/10_registry/02_Government/05_Actposition.vue
+++ b/src/modules/10_registry/02_Government/05_Actposition.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -34,6 +34,7 @@ const visibleColumns = ref<String[]>([
   "posNo",
   "position",
   "status",
+  "lastUpdatedAt",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -83,10 +84,25 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.status ? "Active" : "-";
+      return row.status ? "ใช้งาน" : "-";
     },
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "dateStart",
@@ -144,7 +160,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sortable: true,
     field: "status",
     format(val, row) {
-      return row.status ? "Active" : "-";
+      return row.status ? "ใช้งาน" : "-";
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -224,6 +240,7 @@ onMounted(async () => {
   getData();
 });
 </script>
+
 <template>
   <!-- v-if="mode" -->
   <div class="col-12">
@@ -273,6 +290,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -352,6 +370,7 @@ onMounted(async () => {
     :columns="columnsHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/02_Government/06_Assistance.vue b/src/modules/10_registry/02_Government/06_Assistance.vue
index 6f296d8..44b0f48 100644
--- a/src/modules/10_registry/02_Government/06_Assistance.vue
+++ b/src/modules/10_registry/02_Government/06_Assistance.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -34,6 +34,7 @@ const visibleColumns = ref<string[]>([
   "dateEnd",
   "commandNo",
   "document",
+  "lastUpdatedAt",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -83,7 +84,22 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "agency",
@@ -264,6 +280,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/03_Salary/02_Nopaid.vue b/src/modules/10_registry/03_Salary/02_Nopaid.vue
index a73f2c0..4a7fea2 100644
--- a/src/modules/10_registry/03_Salary/02_Nopaid.vue
+++ b/src/modules/10_registry/03_Salary/02_Nopaid.vue
@@ -22,7 +22,8 @@ const rowsHistoryData = ref<NopaidFormType[]>([]);
 const $q = useQuasar();
 const mode = ref<boolean>($q.screen.gt.xs);
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  mixin;
 
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
@@ -115,11 +116,14 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "date",
@@ -208,7 +212,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -319,6 +323,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/01_Certificate.vue b/src/modules/10_registry/04_Achievement/01_Certificate.vue
index 10c24b5..2234bdc 100644
--- a/src/modules/10_registry/04_Achievement/01_Certificate.vue
+++ b/src/modules/10_registry/04_Achievement/01_Certificate.vue
@@ -16,7 +16,8 @@ const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  mixin;
 
 const idByRow = ref<string>("");
 const rows = ref<CertificateDetail[]>([]);
@@ -38,7 +39,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "certificateType",
@@ -114,13 +114,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "certificateType",
@@ -131,7 +134,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "certificateType",
@@ -207,7 +209,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -323,6 +325,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/02_Training.vue b/src/modules/10_registry/04_Achievement/02_Training.vue
index b7db1b3..1416ae5 100644
--- a/src/modules/10_registry/04_Achievement/02_Training.vue
+++ b/src/modules/10_registry/04_Achievement/02_Training.vue
@@ -43,7 +43,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -178,13 +177,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "name", // ชื่อโครงงาน
@@ -200,7 +202,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName", // แก้ไขโดย
   "lastUpdatedAt", // แก้ไขเมื่อวันที่
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -335,7 +336,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -451,6 +452,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/03_Insignia.vue b/src/modules/10_registry/04_Achievement/03_Insignia.vue
index 5a8d4fc..244e5af 100644
--- a/src/modules/10_registry/04_Achievement/03_Insignia.vue
+++ b/src/modules/10_registry/04_Achievement/03_Insignia.vue
@@ -47,7 +47,6 @@ const visibleColumns = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -230,11 +229,14 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "insignia",
@@ -253,7 +255,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -425,7 +426,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, true, false),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -540,6 +541,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/04_Honor.vue b/src/modules/10_registry/04_Achievement/04_Honor.vue
index 693132c..6031f16 100644
--- a/src/modules/10_registry/04_Achievement/04_Honor.vue
+++ b/src/modules/10_registry/04_Achievement/04_Honor.vue
@@ -40,7 +40,6 @@ const visibleColumns = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "issueDate",
@@ -118,11 +117,14 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "issuer",
@@ -210,7 +212,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -323,6 +325,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/05_Assessments.vue b/src/modules/10_registry/04_Achievement/05_Assessments.vue
index b58a118..4e93d23 100644
--- a/src/modules/10_registry/04_Achievement/05_Assessments.vue
+++ b/src/modules/10_registry/04_Achievement/05_Assessments.vue
@@ -170,7 +170,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -306,7 +306,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -325,6 +325,9 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumns = ref<string[]>([
   "point1Total",
@@ -469,6 +472,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
index 3092d00..698b13b 100644
--- a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
+++ b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
@@ -24,7 +24,8 @@ const rowsHistoryData = ref<any[]>([]);
 const $q = useQuasar();
 const mode = ref<boolean>($q.screen.gt.xs);
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  mixin;
 const modalDevelop = ref<boolean>(false);
 const kpiDevelopmentId = ref<string>("");
 
@@ -47,7 +48,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -57,7 +58,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "name",
     align: "left",
     label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -68,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentProjects",
     align: "left",
     label: "วิธีการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "developmentProjects",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -79,7 +80,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentTarget",
     align: "left",
     label: "เป้าหมายการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "developmentTarget",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -90,7 +91,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentResults",
     align: "left",
     label: "วิธีการวัดผลการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "developmentResults",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -101,7 +102,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentReport",
     align: "left",
     label: "รายงานผลการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "developmentReport",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -112,7 +113,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
-    sortable: true,
+    sortable: false,
     field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -123,11 +124,11 @@ const columns = ref<QTableProps["columns"]>([
     name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
-    sortable: true,
+    sortable: false,
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -192,7 +193,7 @@ function getHistory() {
 function openDialogDevelop(data: any) {
   modalDevelop.value = true;
   kpiDevelopmentId.value = data.kpiDevelopmentId;
-  typeIDP.value = data.type
+  typeIDP.value = data.type;
 }
 
 function onSearch() {
@@ -376,7 +377,11 @@ onMounted(async () => {
     </d-table>
   </div>
 
-  <DialogDevelop v-model:modal="modalDevelop" v-model:id="kpiDevelopmentId" :type="typeIDP"/>
+  <DialogDevelop
+    v-model:modal="modalDevelop"
+    v-model:id="kpiDevelopmentId"
+    :type="typeIDP"
+  />
 </template>
 <style scoped>
 .absolute_button {
diff --git a/src/modules/10_registry/05_Other/01_Other.vue b/src/modules/10_registry/05_Other/01_Other.vue
index 0f40048..c1be9da 100644
--- a/src/modules/10_registry/05_Other/01_Other.vue
+++ b/src/modules/10_registry/05_Other/01_Other.vue
@@ -77,11 +77,14 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "date",
@@ -130,7 +133,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -235,6 +238,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/Dialog/DialogHistory.vue b/src/modules/10_registry/Dialog/DialogHistory.vue
index f7e76fe..f8a7f12 100644
--- a/src/modules/10_registry/Dialog/DialogHistory.vue
+++ b/src/modules/10_registry/Dialog/DialogHistory.vue
@@ -17,6 +17,9 @@ const rows = defineModel<any>("rows");
 const rowsData = defineModel<any>("rowsData");
 const columns = defineModel<QTableProps["columns"]>("columns");
 const visibleColumns = defineModel<string[]>("visibleColumns");
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const props = defineProps({
   getData: Function,
@@ -24,7 +27,7 @@ const props = defineProps({
 });
 function close() {
   modal.value = false;
-  filter.value = ''
+  filter.value = "";
 }
 
 function dateThaiRange(val: [Date, Date]) {
@@ -119,6 +122,7 @@ watch(
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
           :virtual-scroll-sticky-size-start="48"
+          v-model:pagination="pagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
diff --git a/src/modules/10_registry/tabs/01_information.vue b/src/modules/10_registry/tabs/01_information.vue
index 6830177..5407e56 100644
--- a/src/modules/10_registry/tabs/01_information.vue
+++ b/src/modules/10_registry/tabs/01_information.vue
@@ -11,6 +11,7 @@ import Ability from "@/modules/10_registry/01_Information/06_Ability.vue";
 
 const router = useRouter();
 </script>
+
 <template>
   <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle text-white col-12 row items-center">
@@ -37,6 +38,7 @@ const router = useRouter();
     <Ability />
   </div>
 </template>
+
 <style scoped>
 .mobileClass {
   background-color: #fff;
diff --git a/src/modules/10_registry/views/requestEditMain.vue b/src/modules/10_registry/views/requestEditMain.vue
index dbba2b5..a271391 100644
--- a/src/modules/10_registry/views/requestEditMain.vue
+++ b/src/modules/10_registry/views/requestEditMain.vue
@@ -69,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "topic",
     align: "left",
     label: "ชื่อเรื่อง",
-    sortable: true,
+    sortable: false,
     field: "topic",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -79,7 +79,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "detail",
     align: "left",
     label: "รายละเอียด",
-    sortable: true,
+    sortable: false,
     field: "detail",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -98,7 +98,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "สถานะคำร้อง",
-    sortable: true,
+    sortable: false,
     field: "status",
     format: (v) => store.convertStatus(v),
     headerStyle: "font-size: 14px",
@@ -108,7 +108,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "remark",
     align: "left",
     label: "หมายเหตุ ",
-    sortable: true,
+    sortable: false,
     field: "remark",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",

From 42301c48305db60e81163660bbb3372c4b233626 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 3 Mar 2025 15:04:42 +0700
Subject: [PATCH 009/195] =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=A2=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2=E0=B8=94=E0=B8=B3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=87=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/org/api.org.ts                        |   3 +
 .../10_registry/02_Government/07_Position.vue | 231 ++++++++++++------
 .../10_registry/interface/index/Main.ts       |  12 +
 src/stores/mixin.ts                           |  14 ++
 4 files changed, 184 insertions(+), 76 deletions(-)

diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index 6a32e6a..465982b 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -111,6 +111,9 @@ export default {
   dataUserSalaryNopaidHistoryByType: (emType: string, id: string) =>
     `${org}/profile${emType}/nopaid/history/${id}`,
 
+  salaryTenurePosition: (emType: string) =>
+    `${org}/profile${emType}/salary/tenure/user`,
+
   dataUserCertificateHistory: (type: string, id: string) =>
     `${profileOrg}/${type}/history/${id}`,
   dataUserCertificateHistoryByType: (
diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 113a900..fd2d3a4 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -7,7 +7,10 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
-import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main";
+import type {
+  SalaryFormType,
+  CardDataPos,
+} from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
@@ -16,8 +19,14 @@ const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  onSearchDataTable,
+  formatDatePosition,
+} = mixin;
 
 const idByRow = ref<string>("");
 const rows = ref<SalaryFormType[]>([]);
@@ -30,7 +39,20 @@ const checkType = ref<boolean>(
   dataPerson.officerType == "OFFICER" ? true : false
 );
 const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const cardData = ref<CardDataPos[]>([
+  {
+    label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
+    data: [],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งตามระดับ",
+    data: [],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งทางการบริหาร",
+    data: [],
+  },
+]);
 
 const visibleColumns = ref<string[]>([
   "commandDateAffect",
@@ -485,16 +507,69 @@ function onSearch() {
   );
 }
 
+async function fetchDataTenure() {
+  await http
+    .get(config.API.salaryTenurePosition(link.value))
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        // map ข้อมูลระยะเวลาดำรงตำแหน่ง
+        const formatData = (list: any) =>
+          list.map((e: any) => ({
+            name: e.name ?? "",
+            time: formatDatePosition(e.year, e.month, e.day),
+          }));
+
+        // แปลงข้อมูลจาก data
+        const position = formatData(data.position); //ระยะเวลาดำรงตำแหน่งในสายงาน
+        const posLevel = formatData(data.posLevel); //ระยะเวลาดำรงตำแหน่งตามระดับ
+        const posExecutive = formatData(data.posExecutive); //ระยะเวลาดำรงตำแหน่งทางการบริหาร
+
+        // นำข้อมูลไปใส่ใน cardData
+        cardData.value[0].data = position;
+        cardData.value[1].data = posLevel;
+        cardData.value[2].data = posExecutive;
+
+        //เช็คค่า ระยะเวลาดำรงตำแหน่งทางการบริหาร ถ้าไม่มีให้ลบออกจาก cardData
+        if (posExecutive.length === 0) {
+          cardData.value.splice(2, 2);
+        }
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
+  fetchDataTenure();
 });
 </script>
+
 <template>
   <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1">ตำแหน่ง</span>
+    </q-toolbar>
+
+    <div class="row q-col-gutter-sm q-pb-sm" v-if="link === ''">
+      <div class="col" v-for="(item, index) in cardData" :key="index">
+        <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+          <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+            {{ item.label }}
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <q-card-section class="q-pt-none" style="min-height: 200px">
+            <li v-for="data in item.data">{{ data.name }} {{ data.time }}</li>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row col-12">
       <q-space />
       <q-input
         v-if="mode"
@@ -525,90 +600,94 @@ onMounted(async () => {
         :options="columns"
         :display-value="$q.lang.table.columns"
       />
-    </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows.length !== 0 ? rows : []"
-      :columns="columns"
-      :grid="!mode"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+    </div>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'status'">
-              {{ props.row.status ? props.row.status : "-" }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-history"
-              @click="onHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
+    <div class="col-12 q-mt-sm">
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows.length !== 0 ? rows : []"
+        :columns="columns"
+        :grid="!mode"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'status'">
+                {{ props.row.status ? props.row.status : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section class="fix_top">
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-    </d-table>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ตำแหน่ง'"
diff --git a/src/modules/10_registry/interface/index/Main.ts b/src/modules/10_registry/interface/index/Main.ts
index 74d8af5..34ada80 100644
--- a/src/modules/10_registry/interface/index/Main.ts
+++ b/src/modules/10_registry/interface/index/Main.ts
@@ -367,6 +367,17 @@ interface FileFormType {
   pathName: string;
   fileName: string;
 }
+
+interface CardDataPos {
+  label: string;
+  data?: Data[];
+}
+
+interface Data {
+  name: string;
+  time: string;
+}
+
 export type {
   DataOption,
   NewPagination,
@@ -386,4 +397,5 @@ export type {
   AssessmentsFormType,
   OtherFormType,
   FileFormType,
+  CardDataPos,
 };
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 84e1479..598dfbb 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -1158,6 +1158,19 @@ export const useCounterMixin = defineStore("mixin", () => {
     });
   }
 
+  function formatDatePosition(year: string, month: string, day: string) {
+    const y = parseInt(year);
+    const m = parseInt(month);
+    const d = parseInt(day);
+
+    const parts = [];
+    if (y > 0) parts.push(`${y} ปี`);
+    if (m > 0) parts.push(`${m} เดือน`);
+    if (d > 0) parts.push(`${d} วัน`);
+
+    return parts.length > 0 ? parts.join(" ") : ""; // กรณีที่ทั้งหมดเป็น 0
+  }
+
   return {
     calAge,
     date2Thai,
@@ -1197,5 +1210,6 @@ export const useCounterMixin = defineStore("mixin", () => {
     findOrgNameOld,
     findPosMasterNo,
     onSearchDataTable,
+    formatDatePosition,
   };
 });

From e2e13cab9d16cff92c7f10b23dbde15b363460b6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 5 Mar 2025 15:09:35 +0700
Subject: [PATCH 010/195] fix text-red pos/salary

---
 src/modules/10_registry/02_Government/07_Position.vue | 6 +++++-
 src/modules/10_registry/03_Salary/01_Salary.vue       | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index fd2d3a4..374a2b6 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -626,7 +626,11 @@ onMounted(async () => {
 
         <template v-if="mode" v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <q-td
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+              :class="props.row.isEntry ? 'text-red' : ''"
+            >
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index a3314d3..6f1d567 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -551,7 +551,11 @@ onMounted(async () => {
 
       <template v-if="mode" v-slot:body="props">
         <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
+          <q-td
+            v-for="(col, index) in props.cols"
+            :key="col.name"
+            :class="props.row.isEntry ? 'text-red' : ''"
+          >
             <div v-if="col.name == 'no'">
               {{ props.rowIndex + 1 }}
             </div>

From 524885a6edfeab19ad01770bbe772055eeda67b2 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 5 Mar 2025 17:40:42 +0700
Subject: [PATCH 011/195] fix formatDatePosition

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

diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 598dfbb..4fc1f83 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -1163,12 +1163,13 @@ export const useCounterMixin = defineStore("mixin", () => {
     const m = parseInt(month);
     const d = parseInt(day);
 
-    const parts = [];
-    if (y > 0) parts.push(`${y} ปี`);
-    if (m > 0) parts.push(`${m} เดือน`);
-    if (d > 0) parts.push(`${d} วัน`);
+    // const parts = [];
+    // if (y > 0) parts.push(`${y} ปี`);
+    // if (m > 0) parts.push(`${m} เดือน`);
+    // if (d > 0) parts.push(`${d} วัน`);
 
-    return parts.length > 0 ? parts.join(" ") : ""; // กรณีที่ทั้งหมดเป็น 0
+    // return parts.length > 0 ? parts.join(" ") : ""; // กรณีที่ทั้งหมดเป็น 0
+    return `${y} ปี ${m} เดือน ${d} วัน`;
   }
 
   return {

From 20f1e432597d36f0497476d1d9d488be81e4ad49 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 5 Mar 2025 20:59:49 +0700
Subject: [PATCH 012/195] fixing format

---
 src/stores/mixin.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 4fc1f83..27b59ff 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -1163,13 +1163,13 @@ export const useCounterMixin = defineStore("mixin", () => {
     const m = parseInt(month);
     const d = parseInt(day);
 
-    // const parts = [];
-    // if (y > 0) parts.push(`${y} ปี`);
-    // if (m > 0) parts.push(`${m} เดือน`);
-    // if (d > 0) parts.push(`${d} วัน`);
+    const parts = [];
+    if (y > 0) parts.push(`${y} ปี`);
+    if (m > 0) parts.push(`${m} เดือน`);
+    if (d > 0) parts.push(`${d} วัน`);
 
-    // return parts.length > 0 ? parts.join(" ") : ""; // กรณีที่ทั้งหมดเป็น 0
-    return `${y} ปี ${m} เดือน ${d} วัน`;
+    return parts.length > 0 ? parts.join(" ") : `${y} ปี ${m} เดือน ${d} วัน`; // กรณีที่ทั้งหมดเป็น 0
+    // return `${y} ปี ${m} เดือน ${d} วัน`;
   }
 
   return {

From 2f21c27121a50746327e743349c1fafb5900a3c0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 6 Mar 2025 17:26:31 +0700
Subject: [PATCH 013/195] position

---
 .../10_registry/02_Government/07_Position.vue | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 374a2b6..2e62377 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -508,6 +508,8 @@ function onSearch() {
 }
 
 async function fetchDataTenure() {
+  console.log(link.value);
+
   await http
     .get(config.API.salaryTenurePosition(link.value))
     .then((res) => {
@@ -521,18 +523,26 @@ async function fetchDataTenure() {
           }));
 
         // แปลงข้อมูลจาก data
-        const position = formatData(data.position); //ระยะเวลาดำรงตำแหน่งในสายงาน
-        const posLevel = formatData(data.posLevel); //ระยะเวลาดำรงตำแหน่งตามระดับ
-        const posExecutive = formatData(data.posExecutive); //ระยะเวลาดำรงตำแหน่งทางการบริหาร
+        const position = data.position ? formatData(data.position) : []; //ระยะเวลาดำรงตำแหน่งในสายงาน
+        const posLevel = data.posLevel ? formatData(data.posLevel) : []; //ระยะเวลาดำรงตำแหน่งตามระดับ
+        const posExecutive = data.posExecutive
+          ? formatData(data.posExecutive)
+          : []; //ระยะเวลาดำรงตำแหน่งทางการบริหาร
 
         // นำข้อมูลไปใส่ใน cardData
         cardData.value[0].data = position;
         cardData.value[1].data = posLevel;
-        cardData.value[2].data = posExecutive;
+        if (link.value !== "-employee") {
+          cardData.value[2].data = posExecutive;
+        }
 
         //เช็คค่า ระยะเวลาดำรงตำแหน่งทางการบริหาร ถ้าไม่มีให้ลบออกจาก cardData
-        if (posExecutive.length === 0) {
-          cardData.value.splice(2, 2);
+        if (
+          posExecutive.length === 0 &&
+          link.value !== "-employee" &&
+          cardData.value.length > 2
+        ) {
+          cardData.value.splice(2, 1);
         }
       }
     })
@@ -543,6 +553,9 @@ async function fetchDataTenure() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
+  if (link.value === "-employee") {
+    cardData.value.splice(2, 1);
+  }
   getData();
   fetchDataTenure();
 });
@@ -555,7 +568,7 @@ onMounted(async () => {
       <span class="text-blue-6 text-weight-bold text-body1">ตำแหน่ง</span>
     </q-toolbar>
 
-    <div class="row q-col-gutter-sm q-pb-sm" v-if="link === ''">
+    <div class="row q-col-gutter-sm q-pb-sm">
       <div class="col" v-for="(item, index) in cardData" :key="index">
         <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
           <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">

From 28989d1dbb49ed09c42fc74c866cfeb87f02af56 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 7 Mar 2025 16:46:34 +0700
Subject: [PATCH 014/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=9A=E0=B8=B1=E0=B8=87=E0=B8=84=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/FormLeave/01_SickForm.vue       | 1 +
 src/modules/05_leave/components/FormLeave/03_Birth.vue          | 1 +
 .../05_leave/components/FormLeave/04_HelpWifeBirthForm.vue      | 1 +
 src/modules/05_leave/components/FormLeave/05_VacationForm.vue   | 1 +
 src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue | 1 +
 src/modules/05_leave/components/FormLeave/07_HajjForm.vue       | 1 +
 src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue   | 1 +
 src/modules/05_leave/components/FormLeave/09_StudyForm.vue      | 2 +-
 src/modules/05_leave/components/FormLeave/10_TrainForm.vue      | 2 +-
 .../05_leave/components/FormLeave/11_WorkInternationalForm.vue  | 1 +
 .../05_leave/components/FormLeave/12_FollowSpouseForm.vue       | 1 +
 .../05_leave/components/FormLeave/13_RehabilitationForm.vue     | 1 +
 12 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 282e0d0..29bc524 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -375,6 +375,7 @@ onMounted(() => {
                       : null
                   "
                   :label="`${'ลาถึงวันที่'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index 3a885eb..3acf5d2 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -296,6 +296,7 @@ onMounted(() => {
                   : null
               "
               :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
             >
               <template v-slot:prepend>
                 <q-icon
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index e3ecaf7..45065c9 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -321,6 +321,7 @@ onMounted(() => {
                   : null
               "
               :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
             >
               <template v-slot:prepend>
                 <q-icon
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 19269d4..751f8e0 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -387,6 +387,7 @@ onMounted(() => {
                   : null
               "
               :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
             >
               <template v-slot:prepend>
                 <q-icon
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 452bd0f..e0c94dd 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -360,6 +360,7 @@ onMounted(() => {
                   : null
               "
               :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
               :readonly="
                 !formDataOrdination.leaveStartDate || statusCheck === 'NEW'
               "
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index 6ba75e1..0a0db10 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -298,6 +298,7 @@ onMounted(() => {
                       ? date2Thai(formDataHaji.leaveEndDate)
                       : null
                   "
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
                   @update:model-value="fetchCheck()"
                 >
                   <template v-slot:prepend>
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index 0b53cd4..6d15498 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -316,6 +316,7 @@ onMounted(() => {
                   : null
               "
               :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
             >
               <template v-slot:prepend>
                 <q-icon
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 3654a6c..eb79711 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -354,6 +354,7 @@ onMounted(async () => {
               hide-bottom-space
               :label="`${'ลาถึงวันที่'}`"
               :readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
               :model-value="
                 formDataStudy.leaveEndDate != null
                   ? date2Thai(formDataStudy.leaveEndDate)
@@ -474,7 +475,6 @@ onMounted(async () => {
                       ? date2Thai(dataStore.birthDate)
                       : null
                   "
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 3184e9f..763e82b 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -340,6 +340,7 @@ onMounted(async () => {
               hide-bottom-space
               :label="`${'ลาถึงวันที่'}`"
               :readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
               :model-value="
                 formDataTrain.leaveEndDate != null
                   ? date2Thai(formDataTrain.leaveEndDate)
@@ -462,7 +463,6 @@ onMounted(async () => {
                       ? date2Thai(dataStore.birthDate)
                       : null
                   "
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 8f21b94..2baa64d 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -332,6 +332,7 @@ onMounted(() => {
                   : null
               "
               :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
               :bottom-slots="!isLeave ? true : false"
               :color="!isLeave ? 'red' : 'black'"
               :bg-color="!isLeave ? 'red-2' : 'white'"
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 348d61d..e94790d 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -425,6 +425,7 @@ onMounted(async () => {
                   : null
               "
               :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
             >
               <template v-slot:prepend>
                 <q-icon
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index 0b5b10b..f491ccf 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -295,6 +295,7 @@ onMounted(() => {
                   : null
               "
               :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
               :bottom-slots="!isLeave ? true : false"
               :color="!isLeave ? 'red' : 'black'"
               :bg-color="!isLeave ? 'red-2' : 'white'"

From dbff789a0ba3d7504dad2151dacce4fc1265c431 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 10 Mar 2025 17:09:45 +0700
Subject: [PATCH 015/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89timezone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/components/FormLeave/01_SickForm.vue  | 13 +++++++++++--
 .../05_leave/components/FormLeave/03_Birth.vue     |  5 +++--
 .../components/FormLeave/04_HelpWifeBirthForm.vue  |  5 +++--
 .../components/FormLeave/05_VacationForm.vue       | 14 +++++++++++---
 .../components/FormLeave/06_OrdinationForm.vue     |  5 +++--
 .../05_leave/components/FormLeave/07_HajjForm.vue  |  5 +++--
 .../components/FormLeave/08_MilitaryForm.vue       |  5 +++--
 .../05_leave/components/FormLeave/09_StudyForm.vue |  5 +++--
 .../05_leave/components/FormLeave/10_TrainForm.vue |  5 +++--
 .../FormLeave/11_WorkInternationalForm.vue         |  5 +++--
 .../components/FormLeave/12_FollowSpouseForm.vue   |  5 +++--
 .../components/FormLeave/13_RehabilitationForm.vue | 13 +++++++++++--
 12 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 29bc524..3585d05 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, watch, computed, onMounted } from "vue";
 import { useQuasar } from "quasar";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -150,8 +151,16 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataSick.leaveStartDate ?? null,
-      EndLeaveDate: formDataSick.leaveEndDate ?? null,
+      StartLeaveDate:
+        format(
+          utcToZonedTime(formDataSick.leaveStartDate, "Asia/Bangkok"),
+          "yyyy-MM-dd"
+        ) ?? null,
+      EndLeaveDate:
+        format(
+          utcToZonedTime(formDataSick.leaveEndDate, "Asia/Bangkok"),
+          "yyyy-MM-dd"
+        ) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index 3acf5d2..6cc85ed 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -132,8 +133,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataBirth.leaveStartDate ?? null,
-      EndLeaveDate: formDataBirth.leaveEndDate ?? null,
+      StartLeaveDate: format(utcToZonedTime(formDataBirth.leaveStartDate , "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      EndLeaveDate: format(utcToZonedTime(formDataBirth.leaveEndDate , "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index 45065c9..6847249 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -2,6 +2,7 @@
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -159,8 +160,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
-      EndLeaveDate: formDataHelpWife.leaveEndDate ?? null,
+      StartLeaveDate: format(utcToZonedTime( formDataHelpWife.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      EndLeaveDate: format(utcToZonedTime( formDataHelpWife.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 751f8e0..20d1d39 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -2,6 +2,7 @@
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -164,8 +165,16 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataVacation.leaveStartDate ?? null,
-      EndLeaveDate: formDataVacation.leaveEndDate ?? null,
+      StartLeaveDate:
+        format(
+          utcToZonedTime(formDataVacation.leaveStartDate, "Asia/Bangkok"),
+          "yyyy-MM-dd"
+        ) ?? null,
+      EndLeaveDate:
+        format(
+          utcToZonedTime(formDataVacation.leaveEndDate, "Asia/Bangkok"),
+          "yyyy-MM-dd"
+        ) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
@@ -350,7 +359,6 @@ onMounted(() => {
             </q-input>
           </template>
         </datepicker>
-
         <datepicker
           class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
           menu-class-name="modalfix"
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index e0c94dd..c769d4e 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -170,8 +171,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataOrdination.leaveStartDate ?? null,
-      EndLeaveDate: formDataOrdination.leaveEndDate ?? null,
+      StartLeaveDate: format(utcToZonedTime( formDataOrdination.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      EndLeaveDate: format(utcToZonedTime( formDataOrdination.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index 0a0db10..b0943ee 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -2,6 +2,7 @@
 import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -123,8 +124,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataHaji.leaveStartDate ?? null,
-      EndLeaveDate: formDataHaji.leaveEndDate ?? null,
+      StartLeaveDate: format(utcToZonedTime( formDataHaji.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      EndLeaveDate: format(utcToZonedTime( formDataHaji.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index 6d15498..cfa3524 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -147,8 +148,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataMilitary.leaveStartDate ?? null,
-      EndLeaveDate: formDataMilitary.leaveEndDate ?? null,
+      StartLeaveDate: format(utcToZonedTime(formDataMilitary.leaveStartDate , "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      EndLeaveDate: format(utcToZonedTime(formDataMilitary.leaveEndDate , "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index eb79711..e6a3f32 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, computed, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -167,8 +168,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataStudy.leaveStartDate ?? null,
-      EndLeaveDate: formDataStudy.leaveEndDate ?? null,
+      StartLeaveDate: format(utcToZonedTime( formDataStudy.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      EndLeaveDate: format(utcToZonedTime( formDataStudy.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 763e82b..5e9841e 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, computed, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -154,8 +155,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataTrain.leaveStartDate ?? null,
-      EndLeaveDate: formDataTrain.leaveEndDate ?? null,
+      StartLeaveDate: format(utcToZonedTime( formDataTrain.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      EndLeaveDate: format(utcToZonedTime( formDataTrain.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 2baa64d..ef04e1f 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -2,6 +2,7 @@
 import { ref, reactive, watch, onMounted, computed } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -150,8 +151,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
-      EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
+      StartLeaveDate: format(utcToZonedTime( formDataWorkInternational.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      EndLeaveDate: format(utcToZonedTime( formDataWorkInternational.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index e94790d..d1505f1 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -187,8 +188,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null,
-      EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null,
+      StartLeaveDate: format(utcToZonedTime( formDataFollowSpouse.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      EndLeaveDate: format(utcToZonedTime( formDataFollowSpouse.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index f491ccf..39376b5 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -2,6 +2,7 @@
 import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
 import { useLeaveStore } from "@/modules/05_leave/store";
@@ -110,8 +111,16 @@ async function FetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
-      EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
+      StartLeaveDate:
+        format(
+          utcToZonedTime(formDataRehabilitation.leaveStartDate, "Asia/Bangkok"),
+          "yyyy-MM-dd"
+        ) ?? null,
+      EndLeaveDate:
+        format(
+          utcToZonedTime(formDataRehabilitation.leaveEndDate, "Asia/Bangkok"),
+          "yyyy-MM-dd"
+        ) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;

From 920ca8e13b93a91777f0499efeced9d585d2d635 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 10 Mar 2025 17:15:27 +0700
Subject: [PATCH 016/195] add convert date/time to api in mixin

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

diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 27b59ff..7138c98 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -4,6 +4,7 @@ import moment from "moment";
 import CustomComponent from "@/components/CustomDialog.vue";
 import { Loading, QSpinnerCube } from "quasar";
 import { logout } from "@/plugins/auth";
+import { format, utcToZonedTime } from "date-fns-tz";
 
 moment.locale("th");
 export const useCounterMixin = defineStore("mixin", () => {
@@ -1172,6 +1173,20 @@ export const useCounterMixin = defineStore("mixin", () => {
     // return `${y} ปี ${m} เดือน ${d} วัน`;
   }
 
+  // กรณีมีเฉพาะ date
+  function convertDateToAPI(date: Date | null) {
+    return date
+      ? format(utcToZonedTime(date, "Asia/Bangkok"), "yyyy-MM-dd")
+      : null;
+  }
+
+  // กรณี datetime
+  function convertDatetimeToAPI(date: Date | null) {
+    return date
+      ? format(utcToZonedTime(date, "Asia/Bangkok"), "yyyy-MM-dd HH:mm:ss")
+      : null;
+  }
+
   return {
     calAge,
     date2Thai,
@@ -1212,5 +1227,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     findPosMasterNo,
     onSearchDataTable,
     formatDatePosition,
+    convertDateToAPI,
+    convertDatetimeToAPI,
   };
 });

From cbee41e2124458fa2116c5b671f9173ffa2d6667 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 10 Mar 2025 17:47:34 +0700
Subject: [PATCH 017/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=83?=
 =?UTF-8?q?=E0=B8=8A=E0=B9=89=20=E0=B8=88=E0=B8=B2=E0=B8=81=20mixin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FormLeave/01_SickForm.vue      | 19 ++++----------
 .../components/FormLeave/03_Birth.vue         | 11 ++++----
 .../FormLeave/04_HelpWifeBirthForm.vue        | 13 +++++-----
 .../components/FormLeave/05_VacationForm.vue  | 20 +++++---------
 .../FormLeave/06_OrdinationForm.vue           | 13 +++++-----
 .../components/FormLeave/07_HajjForm.vue      | 11 ++++----
 .../components/FormLeave/08_MilitaryForm.vue  | 13 +++++-----
 .../components/FormLeave/09_StudyForm.vue     | 12 ++++-----
 .../components/FormLeave/10_TrainForm.vue     | 10 +++----
 .../FormLeave/11_WorkInternationalForm.vue    | 11 ++++----
 .../FormLeave/12_FollowSpouseForm.vue         | 26 ++++++++++---------
 .../FormLeave/13_RehabilitationForm.vue       | 24 ++++++++---------
 12 files changed, 81 insertions(+), 102 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 3585d05..5e9c6a7 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, watch, computed, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -16,7 +15,7 @@ const typeForm = defineModel<string>("type", { required: true });
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError } = mixin;
+const { date2Thai, dateToISO, messageError, convertDateToAPI } = mixin;
 const edit = ref<boolean>(true);
 const leaveDocumentRef = ref<any>(null);
 
@@ -126,11 +125,11 @@ function onValidate() {
     formData.append("leaveRange", formDataSick.leaveRange);
     formData.append(
       "leaveStartDate",
-      dateToISO(new Date(formDataSick.leaveStartDate))
+      convertDateToAPI(formDataSick.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      dateToISO(new Date(formDataSick.leaveEndDate))
+      convertDateToAPI(formDataSick.leaveEndDate) ?? ""
     );
     formData.append("leaveWrote", formDataSick.leaveWrote);
     formData.append("leaveAddress", formDataSick.leaveAddress);
@@ -151,16 +150,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate:
-        format(
-          utcToZonedTime(formDataSick.leaveStartDate, "Asia/Bangkok"),
-          "yyyy-MM-dd"
-        ) ?? null,
-      EndLeaveDate:
-        format(
-          utcToZonedTime(formDataSick.leaveEndDate, "Asia/Bangkok"),
-          "yyyy-MM-dd"
-        ) ?? null,
+      StartLeaveDate: convertDateToAPI(formDataSick.leaveStartDate) ?? null,
+      EndLeaveDate: convertDateToAPI(formDataSick.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index 6cc85ed..55ce182 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,7 +13,7 @@ import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError } = mixin;
+const { date2Thai, dateToISO, messageError, convertDateToAPI } = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -107,11 +106,11 @@ function onValidate() {
     formData.append("type", formDataBirth.type);
     formData.append(
       "leaveStartDate",
-      dateToISO(new Date(formDataBirth.leaveStartDate))
+      convertDateToAPI(formDataBirth.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      dateToISO(new Date(formDataBirth.leaveEndDate))
+      convertDateToAPI(formDataBirth.leaveEndDate) ?? ""
     );
     formData.append("leaveWrote", formDataBirth.leaveWrote);
     formData.append("leaveAddress", formDataBirth.leaveAddress);
@@ -133,8 +132,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: format(utcToZonedTime(formDataBirth.leaveStartDate , "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
-      EndLeaveDate: format(utcToZonedTime(formDataBirth.leaveEndDate , "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      StartLeaveDate: convertDateToAPI(formDataBirth.leaveStartDate) ?? null,
+      EndLeaveDate: convertDateToAPI(formDataBirth.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index 6847249..3688d65 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -2,7 +2,6 @@
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -15,7 +14,7 @@ import type { FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, dateToISO, messageError } = mixin;
+const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -118,11 +117,11 @@ function onValidate() {
     formData.append("type", formDataHelpWife.type);
     formData.append(
       "leaveStartDate",
-      dateToISO(new Date(formDataHelpWife.leaveStartDate))
+      convertDateToAPI(formDataHelpWife.leaveStartDate)??''
     );
     formData.append(
       "leaveEndDate",
-      dateToISO(new Date(formDataHelpWife.leaveEndDate))
+      convertDateToAPI(formDataHelpWife.leaveEndDate)??''
     );
     formData.append("leaveWrote", formDataHelpWife.leaveWrote);
     formData.append("leaveAddress", formDataHelpWife.leaveAddress);
@@ -131,7 +130,7 @@ function onValidate() {
     formData.append("wifeDayName", formDataHelpWife.wifeDayName);
     formData.append(
       "wifeDayDateBorn",
-      dateToISO(new Date(formDataHelpWife.wifeDayDateBorn))
+      convertDateToAPI(formDataHelpWife.wifeDayDateBorn)??''
     );
     formData.append("leaveTotal", formDataHelpWife.leaveTotal);
 
@@ -160,8 +159,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: format(utcToZonedTime( formDataHelpWife.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
-      EndLeaveDate: format(utcToZonedTime( formDataHelpWife.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      StartLeaveDate: convertDateToAPI(formDataHelpWife.leaveStartDate) ?? null,
+      EndLeaveDate: convertDateToAPI(formDataHelpWife.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 20d1d39..5c90cdb 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -2,7 +2,6 @@
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -15,7 +14,7 @@ import type { FormRef } from "@/modules/05_leave/interface/request/VacationForm"
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError } = mixin;
+const { date2Thai, dateToISO, messageError,convertDateToAPI } = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -139,11 +138,11 @@ function onValidate() {
     formData.append("leaveRange", formDataVacation.leaveRange);
     formData.append(
       "leaveStartDate",
-      dateToISO(new Date(formDataVacation.leaveStartDate))
+      convertDateToAPI(formDataVacation.leaveStartDate)??''
     );
     formData.append(
       "leaveEndDate",
-      dateToISO(new Date(formDataVacation.leaveEndDate))
+      convertDateToAPI(formDataVacation.leaveEndDate)??''
     );
     formData.append("leaveWrote", formDataVacation.leaveWrote);
     formData.append("leaveAddress", formDataVacation.leaveAddress);
@@ -165,16 +164,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate:
-        format(
-          utcToZonedTime(formDataVacation.leaveStartDate, "Asia/Bangkok"),
-          "yyyy-MM-dd"
-        ) ?? null,
-      EndLeaveDate:
-        format(
-          utcToZonedTime(formDataVacation.leaveEndDate, "Asia/Bangkok"),
-          "yyyy-MM-dd"
-        ) ?? null,
+      StartLeaveDate: convertDateToAPI(formDataVacation.leaveStartDate) ?? null,
+      EndLeaveDate: convertDateToAPI(formDataVacation.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
@@ -359,6 +350,7 @@ onMounted(() => {
             </q-input>
           </template>
         </datepicker>
+
         <datepicker
           class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
           menu-class-name="modalfix"
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index c769d4e..8bca988 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,7 +13,7 @@ import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbs
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, dateToISO, messageError } = mixin;
+const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 
@@ -123,15 +122,15 @@ function onValidate() {
     formData.append("type", formDataOrdination.type);
     formData.append(
       "leaveStartDate",
-      dateToISO(new Date(formDataOrdination.leaveStartDate))
+      convertDateToAPI(formDataOrdination.leaveStartDate)??''
     );
     formData.append(
       "leaveEndDate",
-      dateToISO(new Date(formDataOrdination.leaveEndDate))
+      convertDateToAPI(formDataOrdination.leaveEndDate)??''
     );
     formData.append(
       "ordainDayOrdination",
-      dateToISO(new Date(formDataOrdination.ordainDayOrdination))
+      convertDateToAPI(formDataOrdination.ordainDayOrdination)??''
     );
     formData.append(
       "ordainDayLocationName",
@@ -171,8 +170,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: format(utcToZonedTime( formDataOrdination.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
-      EndLeaveDate: format(utcToZonedTime( formDataOrdination.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      StartLeaveDate: convertDateToAPI(formDataOrdination.leaveStartDate) ?? null,
+      EndLeaveDate: convertDateToAPI(formDataOrdination.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index b0943ee..540f52a 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -2,7 +2,6 @@
 import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,7 +13,7 @@ import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, messageError, dateToISO } = mixin;
+const { date2Thai, calculateDurationYmd, messageError, dateToISO,convertDateToAPI } = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<any>("");
@@ -100,11 +99,11 @@ function onValidate() {
     formData.append("type", formDataHaji.type);
     formData.append(
       "leaveStartDate",
-      dateToISO(new Date(formDataHaji.leaveStartDate))
+      convertDateToAPI(formDataHaji.leaveStartDate)??''
     );
     formData.append(
       "leaveEndDate",
-      dateToISO(new Date(formDataHaji.leaveEndDate))
+      convertDateToAPI(formDataHaji.leaveEndDate)??''
     );
     formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
     formData.append("leaveWrote", formDataHaji.leaveWrote);
@@ -124,8 +123,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: format(utcToZonedTime( formDataHaji.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
-      EndLeaveDate: format(utcToZonedTime( formDataHaji.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      StartLeaveDate: convertDateToAPI(formDataHaji.leaveStartDate) ?? null,
+      EndLeaveDate: convertDateToAPI(formDataHaji.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index cfa3524..2f10afc 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,7 +13,7 @@ import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsen
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, dateToISO, messageError } = mixin;
+const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 
@@ -118,17 +117,17 @@ function onValidate() {
     formData.append("type", formDataMilitary.type);
     formData.append(
       "leaveStartDate",
-      dateToISO(new Date(formDataMilitary.leaveStartDate))
+      convertDateToAPI(formDataMilitary.leaveStartDate)??''
     );
     formData.append(
       "leaveEndDate",
-      dateToISO(new Date(formDataMilitary.leaveEndDate))
+      convertDateToAPI(formDataMilitary.leaveEndDate)??''
     );
     formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
     formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
     formData.append(
       "absentDayRegistorDate",
-      dateToISO(new Date(formDataMilitary.absentDayRegistorDate))
+      convertDateToAPI(formDataMilitary.absentDayRegistorDate)??''
     );
     formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
     formData.append("absentDayAt", formDataMilitary.absentDayAt);
@@ -148,8 +147,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: format(utcToZonedTime(formDataMilitary.leaveStartDate , "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
-      EndLeaveDate: format(utcToZonedTime(formDataMilitary.leaveEndDate , "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      StartLeaveDate: convertDateToAPI(formDataMilitary.leaveStartDate) ?? null,
+      EndLeaveDate: convertDateToAPI(formDataMilitary.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index e6a3f32..3034ed4 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref, computed, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -20,6 +19,7 @@ const {
   dateToISO,
   messageError,
   arabicNumberToText,
+  convertDateToAPI
 } = mixin;
 
 const edit = ref<boolean>(true);
@@ -135,17 +135,17 @@ function onValidate() {
     formData.append("type", formDataStudy.type); //
     formData.append(
       "leaveStartDate",
-      dateToISO(new Date(formDataStudy.leaveStartDate))
+      convertDateToAPI(formDataStudy.leaveStartDate)??''
     );
     formData.append(
       "leaveEndDate",
-      dateToISO(new Date(formDataStudy.leaveEndDate))
+      convertDateToAPI(formDataStudy.leaveEndDate)??''
     );
     formData.append("studyDaySubject", formDataStudy.studyDaySubject);
     formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
     // formData.append(
     //   "leavegovernmentDate",
-    //   dateToISO(new Date(formDataStudy.leavegovernmentDate))
+    //   convertDateToAPI(formDataStudy.leavegovernmentDate)??''
     // );
     formData.append(
       "studyDayUniversityName",
@@ -168,8 +168,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: format(utcToZonedTime( formDataStudy.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
-      EndLeaveDate: format(utcToZonedTime( formDataStudy.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      StartLeaveDate: convertDateToAPI(formDataStudy.leaveStartDate) ?? null,
+      EndLeaveDate: convertDateToAPI(formDataStudy.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 5e9841e..5f894cc 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref, computed, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -20,6 +19,7 @@ const {
   calculateDurationYmd,
   dateToISO,
   messageError,
+  convertDateToAPI
 } = mixin;
 
 const edit = ref<boolean>(true);
@@ -125,11 +125,11 @@ function onValidate() {
     formData.append("type", formDataTrain.type); //
     formData.append(
       "leaveStartDate",
-      dateToISO(new Date(formDataTrain.leaveStartDate))
+      convertDateToAPI(formDataTrain.leaveStartDate)??''
     ); //
     formData.append(
       "leaveEndDate",
-      dateToISO(new Date(formDataTrain.leaveEndDate))
+      convertDateToAPI(formDataTrain.leaveEndDate)??''
     ); //
     formData.append("studyDayCountry", formDataTrain.studyDayCountry);
     formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
@@ -155,8 +155,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: format(utcToZonedTime( formDataTrain.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
-      EndLeaveDate: format(utcToZonedTime( formDataTrain.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      StartLeaveDate: convertDateToAPI(formDataTrain.leaveStartDate) ?? null,
+      EndLeaveDate: convertDateToAPI(formDataTrain.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index ef04e1f..558d814 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -2,7 +2,6 @@
 import { ref, reactive, watch, onMounted, computed } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -16,7 +15,7 @@ import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternati
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, dateToISO, messageError, showLoader, hideLoader,convertDateToAPI } = mixin;
 
 const edit = ref<boolean>(true);
 const isSave = ref<boolean>(false);
@@ -110,11 +109,11 @@ async function onValidate() {
     formData.append("type", formDataWorkInternational.type); //
     formData.append(
       "leaveStartDate",
-      dateToISO(formDataWorkInternational.leaveStartDate)
+      convertDateToAPI(formDataWorkInternational.leaveStartDate)??''
     ); //
     formData.append(
       "leaveEndDate",
-      dateToISO(formDataWorkInternational.leaveEndDate)
+      convertDateToAPI(formDataWorkInternational.leaveEndDate)??''
     ); //
     formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
     formData.append("leaveDetail", formDataWorkInternational.leaveDetail);
@@ -151,8 +150,8 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: format(utcToZonedTime( formDataWorkInternational.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
-      EndLeaveDate: format(utcToZonedTime( formDataWorkInternational.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      StartLeaveDate: convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? null,
+      EndLeaveDate: convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index d1505f1..dbccd95 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -16,7 +15,13 @@ const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 
-const { date2Thai, calculateDurationYmd, dateToISO, messageError } = mixin;
+const {
+  date2Thai,
+  calculateDurationYmd,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+} = mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 
@@ -132,23 +137,19 @@ function onValidate() {
     formData.append("type", formDataFollowSpouse.type); //
     formData.append(
       "leaveStartDate",
-      dateToISO(new Date(formDataFollowSpouse.leaveStartDate))
+      convertDateToAPI(formDataFollowSpouse.leaveStartDate) ?? ""
     ); //
     formData.append(
       "leaveEndDate",
-      dateToISO(new Date(formDataFollowSpouse.leaveEndDate))
+      convertDateToAPI(formDataFollowSpouse.leaveEndDate) ?? ""
     ); //
     formData.append(
       "coupleDayStartDateHistory",
-      formDataFollowSpouse.coupleDayStartDateHistory
-        ? dateToISO(new Date(formDataFollowSpouse.coupleDayStartDateHistory))
-        : ""
+      convertDateToAPI(formDataFollowSpouse.coupleDayStartDateHistory) ?? ""
     ); //
     formData.append(
       "coupleDayEndDateHistory",
-      formDataFollowSpouse.coupleDayEndDateHistory
-        ? dateToISO(new Date(formDataFollowSpouse.coupleDayEndDateHistory))
-        : ""
+      convertDateToAPI(formDataFollowSpouse.coupleDayEndDateHistory) ?? ""
     ); //
     formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
     formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
@@ -188,8 +189,9 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: format(utcToZonedTime( formDataFollowSpouse.leaveStartDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
-      EndLeaveDate: format(utcToZonedTime( formDataFollowSpouse.leaveEndDate, "Asia/Bangkok"),"yyyy-MM-dd") ?? null,
+      StartLeaveDate:
+        convertDateToAPI(formDataFollowSpouse.leaveStartDate) ?? null,
+      EndLeaveDate: convertDateToAPI(formDataFollowSpouse.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index 39376b5..d43ed86 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -2,7 +2,6 @@
 import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { format, utcToZonedTime } from "date-fns-tz";
 
 import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
 import { useLeaveStore } from "@/modules/05_leave/store";
@@ -13,7 +12,14 @@ import genReport from "@/plugins/genreport";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, showLoader, hideLoader } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDateToAPI,
+} = mixin;
 
 const edit = ref<boolean>(true);
 const isSave = ref<boolean>(false);
@@ -79,11 +85,11 @@ async function onValidate() {
   formData.append("type", formDataRehabilitation.type); //
   formData.append(
     "leaveStartDate",
-    dateToISO(new Date(formDataRehabilitation.leaveStartDate))
+    convertDateToAPI(formDataRehabilitation.leaveStartDate) ?? ""
   );
   formData.append(
     "leaveEndDate",
-    dateToISO(new Date(formDataRehabilitation.leaveEndDate))
+    convertDateToAPI(formDataRehabilitation.leaveEndDate) ?? ""
   );
   formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
   formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
@@ -112,15 +118,9 @@ async function FetchCheck() {
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate:
-        format(
-          utcToZonedTime(formDataRehabilitation.leaveStartDate, "Asia/Bangkok"),
-          "yyyy-MM-dd"
-        ) ?? null,
+        convertDateToAPI(formDataRehabilitation.leaveStartDate) ?? null,
       EndLeaveDate:
-        format(
-          utcToZonedTime(formDataRehabilitation.leaveEndDate, "Asia/Bangkok"),
-          "yyyy-MM-dd"
-        ) ?? null,
+        convertDateToAPI(formDataRehabilitation.leaveEndDate) ?? null,
     })
     .then((res: any) => {
       const data = res.data.result;

From 2acaf97a285d635f446713b24e9f01385293c02f Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 13 Mar 2025 17:07:28 +0700
Subject: [PATCH 018/195] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=20=3D=3D>=20=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/org/api.org.ts                        |   2 +
 .../10_registry/02_Government/07_Position.vue | 455 +++++++-----------
 .../10_registry/interface/response/Main.ts    |  12 +-
 src/modules/10_registry/store/Position.ts     |  35 ++
 4 files changed, 212 insertions(+), 292 deletions(-)
 create mode 100644 src/modules/10_registry/store/Position.ts

diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index 465982b..ba33d4b 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -6,6 +6,8 @@ const profileOrg = `${env.API_URI}/org/profile`;
 const report = `${env.API_URI}/org`;
 const workflow = `${env.API_URI}/org/workflow`;
 export default {
+  orgCommandCode: `${metadata}commandCode`,
+
   profilePosition: () => `${org}/profile/keycloak/position`,
 
   searchCommander: `${org}/profile/search/commander`,
diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 2e62377..a2fc877 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
+import { useQuasar, type QTableColumn } from "quasar";
 import { ref, onMounted, computed } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
+import { useGovernmentPosDataStore } from "@/modules/10_registry/store/Position";
 
 import type {
   SalaryFormType,
   CardDataPos,
 } from "@/modules/10_registry/interface/index/Main";
+import type { DataCommandCode } from "@/modules/10_registry/interface/response/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
@@ -18,6 +20,7 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
+const store = useGovernmentPosDataStore();
 const mixin = useCounterMixin();
 const {
   showLoader,
@@ -26,6 +29,7 @@ const {
   date2Thai,
   onSearchDataTable,
   formatDatePosition,
+  findOrgName,
 } = mixin;
 
 const idByRow = ref<string>("");
@@ -54,75 +58,20 @@ const cardData = ref<CardDataPos[]>([
   },
 ]);
 
-const visibleColumns = ref<string[]>([
-  "commandDateAffect",
-  "amount",
-  "positionSalaryAmount",
-  "mouthSalaryAmount",
-  "posNo",
-  "positionName",
-  "positionType",
-  "positionLevel",
-  "commandName",
-  "refCommandNo",
-  "remark",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-
-const columns = computed(() => {
-  if (checkType.value == false) {
-    if (baseColumns.value) {
-      return baseColumns.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-
-const baseColumns = ref<QTableProps["columns"]>([
+const baseColumns = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
     align: "left",
-    label: "วัน เดือน ปี",
+    label: "วันที่คำสั่งมีผล",
     sortable: true,
     field: "commandDateAffect",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
-  },
-  {
-    name: "amount",
-    align: "left",
-    label: checkType.value ? "เงินเดือน" : "ค่าตอบแทนรายเดือน",
-    sortable: true,
-    field: "amount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-  },
-  {
-    name: "positionSalaryAmount",
-    align: "left",
-    label: "เงินประจำตำแหน่ง",
-    sortable: true,
-    field: "positionSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-  },
-  {
-    name: "mouthSalaryAmount",
-    align: "left",
-    label: "เงินค่าตอบแทนรายเดือน",
-    sortable: true,
-    field: "mouthSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posNo",
@@ -139,33 +88,43 @@ const baseColumns = ref<QTableProps["columns"]>([
         ? row.posNo
         : "-";
     },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionName",
     align: "left",
-    label: "ตำแหน่ง",
+    label: link.value === "-employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน",
     sortable: true,
     field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionType",
     align: "left",
-    label: "ประเภทตำแหน่ง",
+    label: link.value === "-employee" ? "กลุ่มงาน" : "ประเภทตำแหน่ง",
     sortable: true,
     field: "positionType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLevel",
     align: "left",
-    label: "ระดับ",
+    label: link.value === "-employee" ? "ระดับชั้นงาน" : "ระดับ",
     sortable: true,
     field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
     format(val, row) {
       return `${
         row.positionLevel
@@ -175,207 +134,10 @@ const baseColumns = ref<QTableProps["columns"]>([
           : "-"
       }`;
     },
-  },
-
-  {
-    name: "commandName",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "commandName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "refCommandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "refCommandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${row.commandYear}`
-        : "";
-    },
-  },
-  {
-    name: "remark",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "remark",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
-  },
-]);
-
-const visibleColumnsHistory = ref<string[]>([
-  "commandDateAffect",
-  "amount",
-  "positionSalaryAmount",
-  "mouthSalaryAmount",
-  "oc",
-  "positionName",
-  "posNo",
-  "positionLine",
-  "positionPathSide",
-  "positionType",
-  "positionLevel",
-  "positionExecutive",
-  "positionExecutiveSide",
-  "salaryClass",
-  "commandName",
-  "refCommandNo",
-  "remark",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-
-const columnsHistory = computed(() => {
-  if (checkType.value == false) {
-    if (baseColumnsHistory.value) {
-      return baseColumnsHistory.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-
-const baseColumnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "commandDateAffect",
-    align: "left",
-    label: "วัน เดือน ปี",
-    sortable: true,
-    field: "commandDateAffect",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-  },
-  {
-    name: "amount",
-    align: "left",
-    label: checkType.value ? "เงินเดือน" : "ค่าตอบแทนรายเดือน",
-    sortable: true,
-    field: "amount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-  },
-  {
-    name: "positionSalaryAmount",
-    align: "left",
-    label: "เงินประจำตำแหน่ง",
-    sortable: true,
-    field: "positionSalaryAmount",
-    headerStyle: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-    style: "font-size: 14px",
-  },
-  {
-    name: "mouthSalaryAmount",
-    align: "left",
-    label: "เงินค่าตอบแทนรายเดือน",
-    sortable: true,
-    field: "mouthSalaryAmount",
-    headerStyle: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-    style: "font-size: 14px",
-  },
-  {
-    name: "oc",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "oc",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return row.posNoAbb && row.posNo
-        ? `${row.posNoAbb}${row.posNo}`
-        : row.posNo
-        ? row.posNo
-        : "-";
-    },
-  },
-  {
-    name: "positionName",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "positionName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLine",
-    align: "left",
-    label: "สายงาน",
-    sortable: true,
-    field: "positionLine",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionPathSide",
-    align: "left",
-    label: "ด้าน/สาขา",
-    sortable: true,
-    field: "positionPathSide",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionType",
-    align: "left",
-    label: "ตำแหน่งประเภท",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionExecutive",
@@ -385,47 +147,94 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     field: "positionExecutive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionExecutiveSide",
+    name: "amount",
     align: "left",
-    label: "ด้านทางการบริหาร",
+    label: link.value === "-employee" ? "ค่าตอบแทนรายเดือน" : "เงินเดือน",
     sortable: true,
-    field: "positionExecutiveSide",
+    field: "amount",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(v, row) {
+      return row.amount
+        ? `${row.amount.toLocaleString()}${
+            row.amountSpecial !== 0 && row.amountSpecial
+              ? ` (${row.amountSpecial.toLocaleString()})`
+              : ""
+          }`
+        : "-";
+    },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "salaryClass",
-    align: "left",
-    label: "ตำแหน่ง (รายละเอียด)",
-    sortable: true,
-    field: "salaryClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "commandName",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "commandName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "refCommandNo",
+    name: "commandNo",
     align: "left",
     label: "เลขที่คำสั่ง",
     sortable: true,
-    field: "refCommandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+    field: "commandNo",
     format(val, row) {
       return row.commandNo && row.commandYear
         ? `${row.commandNo}/${row.commandYear}`
         : "";
     },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandCode",
+    align: "left",
+    label: "ประเภทคำสั่ง",
+    sortable: true,
+    field: "commandCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return store.convertCommandCodeName(val);
+    },
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandDateSign",
+    align: "left",
+    label: "วันที่ลงนาม",
+    sortable: true,
+    field: "commandDateSign",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName({
+        root: row.orgRoot,
+        child1: row.orgChild1,
+        child2: row.orgChild2,
+        child3: row.orgChild3,
+        child4: row.orgChild4,
+      });
+    },
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "remark",
@@ -435,6 +244,8 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     field: "remark",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdateFullName",
@@ -444,6 +255,10 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdatedAt",
@@ -454,8 +269,42 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const baseVisibleColumns = ref<string[]>([
+  "commandDateAffect",
+  "posNo",
+  "positionName",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "amount",
+  "commandNo",
+  "commandCode",
+  "commandDateSign",
+  "organization",
+  "remark",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter(
+    (e: QTableColumn) =>
+      e.name !== "lastUpdateFullName" && e.name !== "lastUpdatedAt"
+  )
+);
+const visibleColumns = ref<String[]>(
+  baseVisibleColumns.value.filter(
+    (e: string) => e !== "lastUpdateFullName" && e !== "lastUpdatedAt"
+  )
+);
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
 
 /** เปิด dialog ประวัติ*/
 function onHistory(id: string) {
@@ -551,6 +400,29 @@ async function fetchDataTenure() {
     });
 }
 
+/** function fetch ข้อมูลประเภทคำสั่ง*/
+async function fetchDataCommandCode() {
+  if (store.commandCodeData.length > 0) return false;
+  await http
+    .get(config.API.orgCommandCode)
+    .then((res) => {
+      const data = res.data.result;
+      const DataCommandCode = data.filter((e: DataCommandCode) =>
+        store.positionCode.includes(e.code)
+      );
+
+      const options = DataCommandCode.map((e: DataCommandCode) => ({
+        id: e.code.toString(),
+        name: e.name,
+      }));
+
+      store.commandCodeData = options;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   if (link.value === "-employee") {
@@ -558,6 +430,7 @@ onMounted(async () => {
   }
   getData();
   fetchDataTenure();
+  fetchDataCommandCode();
 });
 </script>
 
diff --git a/src/modules/10_registry/interface/response/Main.ts b/src/modules/10_registry/interface/response/Main.ts
index 136aded..531e11c 100644
--- a/src/modules/10_registry/interface/response/Main.ts
+++ b/src/modules/10_registry/interface/response/Main.ts
@@ -11,4 +11,14 @@ interface DataRequest {
   topic: string;
 }
 
-export type { DataRequest };
+interface DataCommandCode {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+  code: number;
+}
+
+export type { DataRequest, DataCommandCode };
diff --git a/src/modules/10_registry/store/Position.ts b/src/modules/10_registry/store/Position.ts
new file mode 100644
index 0000000..7fee4f6
--- /dev/null
+++ b/src/modules/10_registry/store/Position.ts
@@ -0,0 +1,35 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/10_registry/interface/index/Main";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {} = mixin;
+
+export const useGovernmentPosDataStore = defineStore("GovernmentPos", () => {
+  //  commandCode ขอตำแหน่ง
+  const positionCode = ref<number[]>([
+    0, 1, 2, 3, 4, 8, 9, 10, 11, 12, 13, 14, 15, 16,
+  ]);
+
+  const commandCodeData = ref<DataOption[]>([]);
+
+  function convertCommandCodeName(val: string) {
+    return (
+      commandCodeData.value.find((e: DataOption) => e.id === val)?.name ?? "-"
+    );
+  }
+
+  return {
+    // Data
+    commandCodeData,
+    positionCode,
+
+    // Function
+    convertCommandCodeName,
+  };
+});

From 6efe622a76eebf02aab01ee762182f8629a78b2b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 14 Mar 2025 11:48:52 +0700
Subject: [PATCH 019/195] =?UTF-8?q?=E0=B9=80=E0=B8=AD=E0=B8=81=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=20=E0=B8=81.=E0=B8=9E.7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../10_registry/05_Other/03_FileOther.vue     | 138 ++++++++++++++++++
 src/modules/10_registry/store/registry.ts     |   3 +-
 src/modules/10_registry/tabs/05_other.vue     |   2 +
 src/stores/data.ts                            |   5 +-
 4 files changed, 145 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/10_registry/05_Other/03_FileOther.vue

diff --git a/src/modules/10_registry/05_Other/03_FileOther.vue b/src/modules/10_registry/05_Other/03_FileOther.vue
new file mode 100644
index 0000000..4682422
--- /dev/null
+++ b/src/modules/10_registry/05_Other/03_FileOther.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+
+import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
+
+const fileList = ref<FileFormType[]>([]);
+const store = useRegistryInFormationStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+function onHistory() {
+  modalHistory.value = true;
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFileUser(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานเพิ่มเติม",
+        store.citizenId
+      )
+    )
+    .then((res) => {
+      const data = res.data;
+      fileList.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
+    });
+}
+
+/**
+ * ดาวน์โหลดลิงค์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานเพิ่มเติม",
+        store.citizenId,
+        fileName
+      )
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1">เอกสาร ก.พ.7 </span>
+    </q-toolbar>
+    <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+      <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+        ไฟล์เอกสาร ก.พ.7
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+        <div v-if="fileList.length > 0" class="col-xs-12 row">
+          <q-list class="full-width rounded-borders" bordered separator>
+            <q-item
+              clickable
+              v-ripple
+              v-for="data in fileList"
+              :key="data.id"
+              class="items-center"
+            >
+              <q-item-section>{{ data.fileName }}</q-item-section>
+              <q-space />
+              <div>
+                <q-btn
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="blue"
+                  icon="mdi-download"
+                  @click="downloadFile(data.fileName)"
+                  ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </q-item>
+          </q-list>
+        </div>
+
+        <div class="col-12" v-else>
+          <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>
diff --git a/src/modules/10_registry/store/registry.ts b/src/modules/10_registry/store/registry.ts
index 075e83f..8c7aa40 100644
--- a/src/modules/10_registry/store/registry.ts
+++ b/src/modules/10_registry/store/registry.ts
@@ -10,6 +10,7 @@ export const useRegistryInFormationStore = defineStore(
   () => {
     const typeProfile = ref<string>("OFFICER");
     const profileId = ref<string>("");
+    const citizenId = ref<string>("");
 
     function typeChangeName(val: string) {
       switch (val) {
@@ -29,6 +30,6 @@ export const useRegistryInFormationStore = defineStore(
           return "-";
       }
     }
-    return { typeChangeName, typeProfile, profileId };
+    return { typeChangeName, typeProfile, profileId, citizenId };
   }
 );
diff --git a/src/modules/10_registry/tabs/05_other.vue b/src/modules/10_registry/tabs/05_other.vue
index 09b87e2..7dde665 100644
--- a/src/modules/10_registry/tabs/05_other.vue
+++ b/src/modules/10_registry/tabs/05_other.vue
@@ -4,6 +4,7 @@ import { useRouter } from "vue-router";
 /** component */
 import Other from "@/modules/10_registry/05_Other/01_Other.vue";
 import File from "@/modules/10_registry/05_Other/02_File.vue";
+import FileOther from "@/modules/10_registry/05_Other/03_FileOther.vue";
 
 const router = useRouter();
 </script>
@@ -27,6 +28,7 @@ const router = useRouter();
   <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
     <Other />
     <File />
+    <FileOther />
   </div>
 </template>
 <style scoped>
diff --git a/src/stores/data.ts b/src/stores/data.ts
index cc2fe19..54faabc 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -9,7 +9,7 @@ import { useCounterMixin } from "./mixin";
 import type { ProfileData } from "@/interface/Main";
 
 export const useDataStore = defineStore("dataMain", () => {
-  const dataProfile = ref<any>()
+  const dataProfile = ref<any>();
   const storeRegistry = useRegistryInFormationStore();
   const $q = useQuasar();
   const mixin = useCounterMixin();
@@ -107,6 +107,7 @@ export const useDataStore = defineStore("dataMain", () => {
     formData.posLevelName = data.posLevelName;
     formData.posNo = findPosMasterNo(data);
     storeRegistry.profileId = data.profileId;
+    storeRegistry.citizenId = data.citizenId;
   }
 
   async function getProFileType() {
@@ -146,7 +147,7 @@ export const useDataStore = defineStore("dataMain", () => {
     formData,
     officerLink,
     getProFileType,
-    dataProfile
+    dataProfile,
   };
 });
 

From 7f4db651fc3f6c8c11c4164d5e2b9801e7605088 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 17 Mar 2025 10:33:01 +0700
Subject: [PATCH 020/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20isHigh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_Information/05_Educations.vue          | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/modules/10_registry/01_Information/05_Educations.vue b/src/modules/10_registry/01_Information/05_Educations.vue
index 943a411..435c123 100644
--- a/src/modules/10_registry/01_Information/05_Educations.vue
+++ b/src/modules/10_registry/01_Information/05_Educations.vue
@@ -42,6 +42,7 @@ const visibleColumns = ref<string[]>([
   "other",
   "fundName",
   "isEducation",
+  "isHigh",
   "endDate",
   "startDate",
   "finishDate",
@@ -120,6 +121,20 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "isHigh",
+    align: "left",
+    label: "วุฒิการศึกษาสูงสุด",
+    sortable: true,
+    field: "isHigh",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v === true ? "ใช่" : v === false ? "ไม่ใช่" : "-"),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "degree",
     align: "left",
@@ -320,6 +335,20 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "isHigh",
+    align: "left",
+    label: "วุฒิการศึกษาสูงสุด",
+    sortable: true,
+    field: "isHigh",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v === true ? "ใช่" : v === false ? "ไม่ใช่" : "-"),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "degree",
     align: "left",
@@ -455,6 +484,7 @@ const visibleColumnsHistory = ref<string[]>([
   "other",
   "fundName",
   "isEducation",
+  "isHigh",
   "endDate",
   "startDate",
   "finishDate",

From ba32db6123dc6e5011dea66d2fa6db9767518d2e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 17 Mar 2025 17:46:39 +0700
Subject: [PATCH 021/195] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=82=E0=B8=AB=E0=B8=A5=E0=B9=84=E0=B8=9F=E0=B8=A5?=
 =?UTF-8?q?=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../10_registry/01_Information/06_Ability.vue | 78 ++++++++++++++++---
 .../02_Government/06_Assistance.vue           | 78 ++++++++++++++++---
 2 files changed, 132 insertions(+), 24 deletions(-)

diff --git a/src/modules/10_registry/01_Information/06_Ability.vue b/src/modules/10_registry/01_Information/06_Ability.vue
index 202e37b..806507c 100644
--- a/src/modules/10_registry/01_Information/06_Ability.vue
+++ b/src/modules/10_registry/01_Information/06_Ability.vue
@@ -238,6 +238,34 @@ function onSearch() {
   );
 }
 
+/**
+ * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
+ * @param id รายการที่ต้องการโหลด
+ */
+async function onDownloadFile(id: string, profileId: string) {
+  showLoader();
+  await http
+    .get(
+      config.API.subFileByFileName(
+        "ทะเบียนประวัติ",
+        "ประกาศเกียรติคุณ",
+        profileId,
+        id,
+        "เอกสารหลักฐาน"
+      )
+    )
+    .then(async (res) => {
+      const data = res.data;
+      window.open(data.downloadUrl, "_blank");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
   await getData();
@@ -316,7 +344,19 @@ onMounted(async () => {
               {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
+
           <q-td auto-width>
+            <q-btn
+              v-if="props.row.isUpload == true"
+              color="green"
+              flat
+              dense
+              round
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id, props.row.profileId)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
             <q-btn
               color="info"
               flat
@@ -336,18 +376,31 @@ onMounted(async () => {
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
             <q-list dense class="q-mt-lg relative-position">
-              <q-btn
-                icon="mdi-history"
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                class="absolute_button"
-                @click="onHistory(props.row.id)"
-              >
-                <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
-              </q-btn>
+              <div class="row absolute_button">
+                <q-btn
+                  v-if="props.row.isUpload == true"
+                  color="green"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  icon="mdi-file-document-outline"
+                  @click="onDownloadFile(props.row.id, props.row.profileId)"
+                >
+                  <q-tooltip>ดาวน์โหลด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
+                </q-btn>
+              </div>
               <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section class="fix_top">
                   <q-item-label class="text-grey-6 text-weight-medium">{{
@@ -385,5 +438,6 @@ onMounted(async () => {
 
 .fix_top {
   justify-content: start !important;
+  margin-top: 10px;
 }
 </style>
diff --git a/src/modules/10_registry/02_Government/06_Assistance.vue b/src/modules/10_registry/02_Government/06_Assistance.vue
index 44b0f48..a87f459 100644
--- a/src/modules/10_registry/02_Government/06_Assistance.vue
+++ b/src/modules/10_registry/02_Government/06_Assistance.vue
@@ -220,6 +220,34 @@ function getHistory() {
     });
 }
 
+/**
+ * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
+ * @param id รายการที่ต้องการโหลด
+ */
+async function onDownloadFile(id: string, profileId: string) {
+  showLoader();
+  await http
+    .get(
+      config.API.subFileByFileName(
+        "ทะเบียนประวัติ",
+        "ช่วยราชการ",
+        profileId,
+        id,
+        "เอกสารหลักฐาน"
+      )
+    )
+    .then(async (res) => {
+      const data = res.data;
+      window.open(data.downloadUrl, "_blank");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -302,6 +330,18 @@ onMounted(async () => {
             </div>
           </q-td>
           <q-td auto-width>
+            <q-btn
+              flat
+              dense
+              round
+              color="green"
+              size="14px"
+              icon="mdi-file-document-outline"
+              v-if="props.row.isUpload"
+              @click="onDownloadFile(props.row.id, props.row.profileId)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
             <q-btn
               color="info"
               flat
@@ -320,18 +360,31 @@ onMounted(async () => {
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
             <q-list dense class="q-mt-lg relative-position">
-              <q-btn
-                icon="mdi-history"
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                class="absolute_button"
-                @click="onHistory(props.row.id)"
-              >
-                <q-tooltip>ประวัติแก้ไขรายการช่วยราชการ</q-tooltip>
-              </q-btn>
+              <div class="row absolute_button">
+                <q-btn
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  color="green"
+                  icon="mdi-file-document-outline"
+                  v-if="props.row.isUpload"
+                  @click="onDownloadFile(props.row.id, props.row.profileId)"
+                >
+                  <q-tooltip>ดาวน์โหลด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขรายการช่วยราชการ</q-tooltip>
+                </q-btn>
+              </div>
               <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section class="fix_top">
                   <q-item-label class="text-grey-6 text-weight-medium">{{
@@ -369,5 +422,6 @@ onMounted(async () => {
 
 .fix_top {
   justify-content: start !important;
+  margin-top: 10px;
 }
 </style>

From 2cec81510087ca3d385f5b04c39e4866651bd878 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 18 Mar 2025 13:44:54 +0700
Subject: [PATCH 022/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/Main.ts                             |  3 +++
 .../06_evaluate/components/EvaluateStepMain.vue   |  1 +
 src/modules/06_evaluate/components/ExpertPage.vue | 15 +++++++++++++--
 src/stores/data.ts                                |  5 +++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/interface/Main.ts b/src/interface/Main.ts
index 6c3f1f5..a24e4a0 100644
--- a/src/interface/Main.ts
+++ b/src/interface/Main.ts
@@ -9,6 +9,9 @@ interface ProfileData {
   posLevelName: string;
   posNo: string;
   profileId: string;
+  citizenId?: string;
+  salary?: number|null;
+  birthDate?: string;
 }
 
 interface InformationData {
diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index c35f763..fcecc82 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -790,6 +790,7 @@ onMounted(async () => {
               />
               <q-btn
                 v-if="
+                  downloadFileRef &&
                   store.step >= store.currentStep &&
                   store.step == 6 &&
                   store.statusUpload
diff --git a/src/modules/06_evaluate/components/ExpertPage.vue b/src/modules/06_evaluate/components/ExpertPage.vue
index 50d51ef..cdf4bf9 100644
--- a/src/modules/06_evaluate/components/ExpertPage.vue
+++ b/src/modules/06_evaluate/components/ExpertPage.vue
@@ -6,11 +6,13 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 
 import type { FormCommandSe } from "@/modules/06_evaluate/interface/evalute";
 
 const $q = useQuasar();
 const router = useRouter();
+const dataPerson = useDataStore();
 const mixin = useCounterMixin();
 const { dialogConfirm, messageError, showLoader, hideLoader } = mixin;
 
@@ -28,9 +30,19 @@ const formData = reactive<FormCommandSe>({
  */
 function onSubmit() {
   dialogConfirm($q, () => {
+    const body = {
+      ...formData,
+      citizenId: dataPerson.formData.citizenId,
+      prefix: dataPerson.formData.prefix,
+      fullName: `${dataPerson.formData.prefix}${dataPerson.formData.firstName} ${dataPerson.formData.lastName}`,
+      position: dataPerson.formData.position,
+      salary: dataPerson.formData.salary?.toString(),
+      posNo: dataPerson.formData.posNo,
+      birthDate: dataPerson.formData.birthDate,
+    };
     showLoader();
     http
-      .post(config.API.evaluationExpertise, formData)
+      .post(config.API.evaluationExpertise, body)
       .then((res) => {
         router.push(`/evaluate/detail/expertise/${res.data.result.id}`);
       })
@@ -89,7 +101,6 @@ onMounted(() => {
           <div>ประเมินเชี่ยวชาญ</div>
         </div>
       </div>
-
       <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
         <div class="col-12">
           <q-card bordered>
diff --git a/src/stores/data.ts b/src/stores/data.ts
index cc2fe19..b8fe9fc 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -25,6 +25,8 @@ export const useDataStore = defineStore("dataMain", () => {
     posExecutiveName: "",
     posTypeName: "",
     posLevelName: "",
+    salary: null,
+    birthDate: '',
     posNo: "",
   });
   const count = ref<number>(0);
@@ -102,6 +104,9 @@ export const useDataStore = defineStore("dataMain", () => {
     formData.firstName = data.firstName;
     formData.lastName = data.lastName;
     formData.position = data.position;
+    formData.salary = data.salary;
+    formData.citizenId = data.citizenId;
+    formData.birthDate = data.birthDate;
     formData.posTypeName = data.posTypeName;
     formData.posExecutiveName = data.posExecutiveName;
     formData.posLevelName = data.posLevelName;

From 1e1395f88a4bad24ab412e11a4f340018251a94d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 18 Mar 2025 15:23:57 +0700
Subject: [PATCH 023/195] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=20=3D=3D>=20loadFile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../10_registry/01_Information/06_Ability.vue |  7 +-
 .../02_Government/02_Discipline.vue           | 62 ++++++++++++++----
 .../10_registry/02_Government/04_Duty.vue     | 64 ++++++++++++++----
 .../10_registry/03_Salary/02_Nopaid.vue       | 65 +++++++++++++++----
 .../04_Achievement/01_Certificate.vue         | 64 ++++++++++++++----
 .../04_Achievement/03_Insignia.vue            | 63 ++++++++++++++----
 .../10_registry/04_Achievement/04_Honor.vue   | 64 ++++++++++++++----
 src/modules/10_registry/store/Main.ts         | 38 +++++++++++
 8 files changed, 352 insertions(+), 75 deletions(-)
 create mode 100644 src/modules/10_registry/store/Main.ts

diff --git a/src/modules/10_registry/01_Information/06_Ability.vue b/src/modules/10_registry/01_Information/06_Ability.vue
index 806507c..a05e7ca 100644
--- a/src/modules/10_registry/01_Information/06_Ability.vue
+++ b/src/modules/10_registry/01_Information/06_Ability.vue
@@ -248,7 +248,7 @@ async function onDownloadFile(id: string, profileId: string) {
     .get(
       config.API.subFileByFileName(
         "ทะเบียนประวัติ",
-        "ประกาศเกียรติคุณ",
+        "เอกสารความสามารถพิเศษ",
         profileId,
         id,
         "เอกสารหลักฐาน"
@@ -328,6 +328,7 @@ onMounted(async () => {
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
           <q-th auto-width />
+          <q-th auto-width />
         </q-tr>
       </template>
 
@@ -344,7 +345,6 @@ onMounted(async () => {
               {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
-
           <q-td auto-width>
             <q-btn
               v-if="props.row.isUpload == true"
@@ -357,6 +357,9 @@ onMounted(async () => {
             >
               <q-tooltip>ดาวน์โหลด</q-tooltip>
             </q-btn>
+          </q-td>
+
+          <q-td auto-width>
             <q-btn
               color="info"
               flat
diff --git a/src/modules/10_registry/02_Government/02_Discipline.vue b/src/modules/10_registry/02_Government/02_Discipline.vue
index c281dcc..d8f1c4c 100644
--- a/src/modules/10_registry/02_Government/02_Discipline.vue
+++ b/src/modules/10_registry/02_Government/02_Discipline.vue
@@ -6,6 +6,7 @@ import { ref, onMounted } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useDataStore } from "@/stores/data";
+import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { DisciplineDetail } from "@/modules/10_registry/interface/index/Main";
 
@@ -15,6 +16,7 @@ const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataStore = useDataStore();
+const { getPathUploadFlie } = useRegistryDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
   mixin;
 
@@ -26,6 +28,8 @@ const rowsHistory = ref<DisciplineDetail[]>([]);
 const rowsHistoryData = ref<DisciplineDetail[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
 
+const fileGroup = ref<string>("เอกสารวินัย");
+
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
 
@@ -179,6 +183,11 @@ function getHistory() {
     });
 }
 
+async function onDownloadFile(id: string, profileId: string) {
+  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  window.open(data.downloadUrl, "_blank");
+}
+
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -247,6 +256,7 @@ onMounted(async () => {
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
           <q-th auto-width />
+          <q-th auto-width />
         </q-tr>
       </template>
 
@@ -263,6 +273,20 @@ onMounted(async () => {
               {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
+          <q-td auto-width>
+            <q-btn
+              v-if="props.row.isUpload"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id, props.row.profileId)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+          </q-td>
           <q-td auto-width>
             <q-btn
               color="info"
@@ -282,18 +306,31 @@ onMounted(async () => {
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
             <q-list dense class="q-mt-lg relative-position">
-              <q-btn
-                icon="mdi-history"
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                class="absolute_button"
-                @click="onHistory(props.row.id)"
-              >
-                <q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
-              </q-btn>
+              <div class="row absolute_button">
+                <q-btn
+                  v-if="props.row.isUpload"
+                  color="green"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  icon="mdi-file-document-outline"
+                  @click="onDownloadFile(props.row.id, props.row.profileId)"
+                >
+                  <q-tooltip>ดาวน์โหลด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
+                </q-btn>
+              </div>
               <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section class="fix_top">
                   <q-item-label class="text-grey-6 text-weight-medium">{{
@@ -331,5 +368,6 @@ onMounted(async () => {
 
 .fix_top {
   justify-content: start !important;
+  margin-top: 10px;
 }
 </style>
diff --git a/src/modules/10_registry/02_Government/04_Duty.vue b/src/modules/10_registry/02_Government/04_Duty.vue
index e1970fd..1ff8476 100644
--- a/src/modules/10_registry/02_Government/04_Duty.vue
+++ b/src/modules/10_registry/02_Government/04_Duty.vue
@@ -6,6 +6,7 @@ import { ref, reactive, onMounted } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useDataStore } from "@/stores/data";
+import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
 //history dialog
@@ -22,6 +23,7 @@ const rowsHistoryData = ref<DutyFormType[]>([]);
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
 const mixin = useCounterMixin();
+const { getPathUploadFlie } = useRegistryDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
   mixin;
 
@@ -241,6 +243,8 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
+const fileGroup = ref<string>("เอกสารปฏิบัติราชการพิเศษ");
+
 function onHistory(id: string) {
   modalHistory.value = true;
   idByRow.value = id;
@@ -282,6 +286,11 @@ function getHistory() {
     });
 }
 
+async function onDownloadFile(id: string, profileId: string) {
+  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  window.open(data.downloadUrl, "_blank");
+}
+
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -352,6 +361,7 @@ onMounted(async () => {
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
           <q-th auto-width />
+          <q-th auto-width />
         </q-tr>
       </template>
 
@@ -368,6 +378,21 @@ onMounted(async () => {
               {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
+          <q-td auto-width>
+            <q-btn
+              v-if="props.row.isUpload"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id, props.row.profileId)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+          </q-td>
+
           <q-td auto-width>
             <q-btn
               color="info"
@@ -387,18 +412,31 @@ onMounted(async () => {
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
             <q-list dense class="q-mt-lg relative-position">
-              <q-btn
-                icon="mdi-history"
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                class="absolute_button"
-                @click="onHistory(props.row.id)"
-              >
-                <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
-              </q-btn>
+              <div class="row absolute_button">
+                <q-btn
+                  v-if="props.row.isUpload"
+                  color="green"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  icon="mdi-file-document-outline"
+                  @click="onDownloadFile(props.row.id, props.row.profileId)"
+                >
+                  <q-tooltip>ดาวน์โหลด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
+                </q-btn>
+              </div>
               <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section class="fix_top">
                   <q-item-label class="text-grey-6 text-weight-medium">{{
@@ -417,6 +455,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขปฏิบัติราชการพิเศษ'"
@@ -436,5 +475,6 @@ onMounted(async () => {
 
 .fix_top {
   justify-content: start !important;
+  margin-top: 10px;
 }
 </style>
diff --git a/src/modules/10_registry/03_Salary/02_Nopaid.vue b/src/modules/10_registry/03_Salary/02_Nopaid.vue
index 4a7fea2..ecdc9a4 100644
--- a/src/modules/10_registry/03_Salary/02_Nopaid.vue
+++ b/src/modules/10_registry/03_Salary/02_Nopaid.vue
@@ -6,6 +6,7 @@ import { ref, onMounted } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useDataStore } from "@/stores/data";
+import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { NopaidFormType } from "@/modules/10_registry/interface/index/Main";
 
@@ -24,6 +25,7 @@ const mode = ref<boolean>($q.screen.gt.xs);
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
   mixin;
+const { getPathUploadFlie } = useRegistryDataStore();
 
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
@@ -218,6 +220,8 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
+const fileGroup = ref<string>("เอกสารบันทึกวันที่ไม่ได้รับเงินเดือน");
+
 function onHistory(id: string) {
   modalHistory.value = true;
   idByRow.value = id;
@@ -261,6 +265,11 @@ function getHistory() {
     });
 }
 
+async function onDownloadFile(id: string, profileId: string) {
+  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  window.open(data.downloadUrl, "_blank");
+}
+
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -331,6 +340,7 @@ onMounted(async () => {
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
           <q-th auto-width />
+          <q-th auto-width />
         </q-tr>
       </template>
 
@@ -347,6 +357,20 @@ onMounted(async () => {
               {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
+          <q-td auto-width>
+            <q-btn
+              v-if="props.row.isUpload"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id, props.row.profileId)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+          </q-td>
           <q-td auto-width>
             <q-btn
               color="info"
@@ -366,20 +390,33 @@ onMounted(async () => {
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
             <q-list dense class="q-mt-lg relative-position">
-              <q-btn
-                icon="mdi-history"
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                class="absolute_button"
-                @click="onHistory(props.row.id)"
-              >
-                <q-tooltip
-                  >ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip
+              <div class="row absolute_button">
+                <q-btn
+                  v-if="props.row.isUpload"
+                  color="green"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  icon="mdi-file-document-outline"
+                  @click="onDownloadFile(props.row.id, props.row.profileId)"
                 >
-              </q-btn>
+                  <q-tooltip>ดาวน์โหลด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip
+                    >ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip
+                  >
+                </q-btn>
+              </div>
               <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section class="fix_top">
                   <q-item-label class="text-grey-6 text-weight-medium">{{
@@ -398,6 +435,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'"
@@ -417,5 +455,6 @@ onMounted(async () => {
 
 .fix_top {
   justify-content: start !important;
+  margin-top: 10px;
 }
 </style>
diff --git a/src/modules/10_registry/04_Achievement/01_Certificate.vue b/src/modules/10_registry/04_Achievement/01_Certificate.vue
index 2234bdc..6ec2af0 100644
--- a/src/modules/10_registry/04_Achievement/01_Certificate.vue
+++ b/src/modules/10_registry/04_Achievement/01_Certificate.vue
@@ -6,6 +6,7 @@ import { ref, reactive, onMounted } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useDataStore } from "@/stores/data";
+import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { CertificateDetail } from "@/modules/10_registry/interface/index/Main";
 
@@ -18,6 +19,7 @@ const dataPerson = useDataStore();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
   mixin;
+const { getPathUploadFlie } = useRegistryDataStore();
 
 const idByRow = ref<string>("");
 const rows = ref<CertificateDetail[]>([]);
@@ -216,6 +218,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+
+const fileGroup = ref<string>("เอกสารใบอนุญาตประกอบวิชาชีพ");
+
 function onHistory(id: string) {
   modalHistory.value = true;
   idByRow.value = id;
@@ -263,6 +268,11 @@ function getHistory() {
     });
 }
 
+async function onDownloadFile(id: string, profileId: string) {
+  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  window.open(data.downloadUrl, "_blank");
+}
+
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -333,6 +343,7 @@ onMounted(async () => {
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
           <q-th auto-width />
+          <q-th auto-width />
         </q-tr>
       </template>
 
@@ -349,6 +360,20 @@ onMounted(async () => {
               {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
+          <q-td auto-width>
+            <q-btn
+              v-if="props.row.isUpload"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id, props.row.profileId)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+          </q-td>
           <q-td auto-width>
             <q-btn
               color="info"
@@ -368,18 +393,31 @@ onMounted(async () => {
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
             <q-list dense class="q-mt-lg relative-position">
-              <q-btn
-                icon="mdi-history"
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                class="absolute_button"
-                @click="onHistory(props.row.id)"
-              >
-                <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
-              </q-btn>
+              <div class="row absolute_button">
+                <q-btn
+                  v-if="props.row.isUpload"
+                  color="green"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  icon="mdi-file-document-outline"
+                  @click="onDownloadFile(props.row.id, props.row.profileId)"
+                >
+                  <q-tooltip>ดาวน์โหลด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
+                </q-btn>
+              </div>
               <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section class="fix_top">
                   <q-item-label class="text-grey-6 text-weight-medium">{{
@@ -398,6 +436,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ'"
@@ -417,5 +456,6 @@ onMounted(async () => {
 
 .fix_top {
   justify-content: start !important;
+  margin-top: 10px;
 }
 </style>
diff --git a/src/modules/10_registry/04_Achievement/03_Insignia.vue b/src/modules/10_registry/04_Achievement/03_Insignia.vue
index 244e5af..d8b0323 100644
--- a/src/modules/10_registry/04_Achievement/03_Insignia.vue
+++ b/src/modules/10_registry/04_Achievement/03_Insignia.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 { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { InsigniaFormType } from "@/modules/10_registry/interface/index/Main";
 
@@ -25,6 +26,7 @@ const mode = ref<boolean>($q.screen.gt.xs);
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
   mixin;
+const { getPathUploadFlie } = useRegistryDataStore();
 
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
@@ -432,6 +434,8 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
+const fileGroup = ref<string>("เครื่องราชฯ");
+
 function onHistory(id: string) {
   modalHistory.value = true;
   idByRow.value = id;
@@ -479,6 +483,11 @@ function getHistory() {
     });
 }
 
+async function onDownloadFile(id: string, profileId: string) {
+  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  window.open(data.downloadUrl, "_blank");
+}
+
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -549,6 +558,7 @@ onMounted(async () => {
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
           <q-th auto-width />
+          <q-th auto-width />
         </q-tr>
       </template>
 
@@ -567,6 +577,20 @@ onMounted(async () => {
               {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
+          <q-td auto-width>
+            <q-btn
+              v-if="props.row.isUpload"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id, props.row.profileId)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+          </q-td>
           <q-td auto-width>
             <q-btn
               color="info"
@@ -586,18 +610,32 @@ onMounted(async () => {
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
             <q-list dense class="q-mt-lg relative-position">
-              <q-btn
-                icon="mdi-history"
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                class="absolute_button"
-                @click="onHistory(props.row.id)"
-              >
-                <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
-              </q-btn>
+              <div class="row absolute_button">
+                <q-btn
+                  v-if="props.row.isUpload"
+                  color="green"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  icon="mdi-file-document-outline"
+                  @click="onDownloadFile(props.row.id, props.row.profileId)"
+                >
+                  <q-tooltip>ดาวน์โหลด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
+                </q-btn>
+              </div>
               <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section class="fix_top">
                   <q-item-label class="text-grey-6 text-weight-medium">{{
@@ -647,5 +685,6 @@ onMounted(async () => {
 
 .fix_top {
   justify-content: start !important;
+  margin-top: 10px;
 }
 </style>
diff --git a/src/modules/10_registry/04_Achievement/04_Honor.vue b/src/modules/10_registry/04_Achievement/04_Honor.vue
index 6031f16..58035f2 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 { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { HonorFormData } from "@/modules/10_registry/interface/index/Main";
 
@@ -27,6 +28,7 @@ const mode = ref<boolean>($q.screen.gt.xs);
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
   mixin;
+const { getPathUploadFlie } = useRegistryDataStore();
 
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
@@ -218,6 +220,8 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
+const fileGroup = ref<string>("ประกาศเกียรติคุณ");
+
 function onHistory(id: string) {
   modalHistory.value = true;
   idByRow.value = id;
@@ -263,6 +267,11 @@ function getHistory() {
     });
 }
 
+async function onDownloadFile(id: string, profileId: string) {
+  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  window.open(data.downloadUrl, "_blank");
+}
+
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -333,6 +342,7 @@ onMounted(async () => {
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
           <q-th auto-width />
+          <q-th auto-width />
         </q-tr>
       </template>
 
@@ -349,6 +359,20 @@ onMounted(async () => {
               {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
+          <q-td auto-width>
+            <q-btn
+              v-if="props.row.isUpload"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="onDownloadFile(props.row.id, props.row.profileId)"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+          </q-td>
           <q-td auto-width>
             <q-btn
               color="info"
@@ -368,18 +392,32 @@ onMounted(async () => {
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
             <q-list dense class="q-mt-lg relative-position">
-              <q-btn
-                icon="mdi-history"
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                class="absolute_button"
-                @click="onHistory(props.row.id)"
-              >
-                <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
-              </q-btn>
+              <div class="row absolute_button">
+                <q-btn
+                  v-if="props.row.isUpload"
+                  color="green"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  icon="mdi-file-document-outline"
+                  @click="onDownloadFile(props.row.id, props.row.profileId)"
+                >
+                  <q-tooltip>ดาวน์โหลด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  icon="mdi-history"
+                  color="info"
+                  flat
+                  dense
+                  round
+                  size="14px"
+                  class="absolute_button"
+                  @click="onHistory(props.row.id)"
+                >
+                  <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
+                </q-btn>
+              </div>
               <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section class="fix_top">
                   <q-item-label class="text-grey-6 text-weight-medium">{{
@@ -398,6 +436,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขประกาศเกียรติคุณ'"
@@ -417,5 +456,6 @@ onMounted(async () => {
 
 .fix_top {
   justify-content: start !important;
+  margin-top: 10px;
 }
 </style>
diff --git a/src/modules/10_registry/store/Main.ts b/src/modules/10_registry/store/Main.ts
new file mode 100644
index 0000000..47c2ab6
--- /dev/null
+++ b/src/modules/10_registry/store/Main.ts
@@ -0,0 +1,38 @@
+import { defineStore } from "pinia";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { messageError } = mixin;
+
+export const useRegistryDataStore = defineStore("RegistryDataStoreMain", () => {
+  async function getPathUploadFlie(
+    group: string,
+    profileId: string,
+    id: string
+  ) {
+    try {
+      const res = await http.get(
+        config.API.subFileByFileName(
+          "ทะเบียนประวัติ",
+          group,
+          profileId,
+          id,
+          "เอกสารหลักฐาน"
+        )
+      );
+      return res.data;
+    } catch (err) {
+      messageError($q, err);
+    }
+  }
+
+  return {
+    // Function
+    getPathUploadFlie,
+  };
+});

From 8ff3456a237a8a0181b9cf6754b73e0777138a4d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 19 Mar 2025 09:45:12 +0700
Subject: [PATCH 024/195] =?UTF-8?q?fix=20=E0=B8=97=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_Government/01_Government.vue           | 35 +++++++------------
 .../02_Government/05_Actposition.vue          |  7 ++--
 .../10_registry/02_Government/07_Position.vue |  4 +--
 .../10_registry/03_Salary/01_Salary.vue       |  8 ++---
 src/modules/10_registry/views/main.vue        | 12 +++----
 5 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/src/modules/10_registry/02_Government/01_Government.vue b/src/modules/10_registry/02_Government/01_Government.vue
index 0f95ce8..f9a6c23 100644
--- a/src/modules/10_registry/02_Government/01_Government.vue
+++ b/src/modules/10_registry/02_Government/01_Government.vue
@@ -19,8 +19,10 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const dataPerson = useDataStore()
-const checkType = ref<boolean>(dataPerson.officerType == 'OFFICER' ? true:false)
+const dataPerson = useDataStore();
+const checkType = ref<boolean>(
+  dataPerson.officerType == "OFFICER" ? true : false
+);
 const store = useRegistryInFormationStore();
 const { showLoader, hideLoader, messageError, date2Thai, dateToISO } = mixin;
 
@@ -383,7 +385,7 @@ function getData() {
 /** get history */
 function getHistory() {
   const url =
-  dataPerson.officerType == 'OFFICER'
+    dataPerson.officerType == "OFFICER"
       ? config.API.dataUserGovernmentHistory("")
       : config.API.dataUserGovernmentHistory("-employee");
   showLoader();
@@ -402,7 +404,7 @@ function getHistory() {
     });
 }
 
-onMounted(async() => {
+onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
 });
@@ -433,31 +435,25 @@ onMounted(async() => {
               {{ formData.org ? formData.org : "-" }}
             </div>
             <div class="col-5 text-grey-6 text-weight-medium">
-              {{ checkType ? 'ตำแหน่งในสายงาน':'ตำแหน่ง' }}
+              {{ checkType ? "ตำแหน่งในสายงาน" : "ตำแหน่ง" }}
             </div>
             <div class="col-7">
               {{ formData.position ? formData.position : "-" }}
             </div>
-            
+
             <div class="col-5 text-grey-6 text-weight-medium">
-              ตำแหน่งเลขที่
+              {{ checkType ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่" }}
             </div>
             <div class="col-7">
               {{ formData.posMasterNo ? formData.posMasterNo : "-" }}
             </div>
-            <div
-              v-if="checkType"
-              class="col-5 text-grey-6 text-weight-medium"
-            >
+            <div v-if="checkType" class="col-5 text-grey-6 text-weight-medium">
               ตำแหน่งทางการบริหาร
             </div>
             <div v-if="checkType" class="col-7">
               {{ formData.posExecutive ? formData.posExecutive : "-" }}
             </div>
-            <div
-              v-if="checkType"
-              class="col-5 text-grey-6 text-weight-medium"
-            >
+            <div v-if="checkType" class="col-5 text-grey-6 text-weight-medium">
               ด้านทางการบริหาร
             </div>
             <div v-if="checkType" class="col-7">
@@ -472,19 +468,14 @@ onMounted(async() => {
 
         <div class="col-12 col-sm-12 col-md-6">
           <div class="row q-col-gutter-y-sm">
-            <div
-              v-if="checkType"
-              class="col-5 text-grey-6 text-weight-medium"
-            >
+            <div v-if="checkType" class="col-5 text-grey-6 text-weight-medium">
               สายงาน
             </div>
             <div v-if="checkType" class="col-7">
               {{ formData.positionField ? formData.positionField : "-" }}
             </div>
             <div class="col-5 text-grey-6 text-weight-medium">
-              {{
-                checkType ? "ตำแหน่งประเภท" : "กลุ่มงาน"
-              }}
+              {{ checkType ? "ตำแหน่งประเภท" : "กลุ่มงาน" }}
             </div>
             <div class="col-7">
               {{ formData.posType ? formData.posType : "-" }}
diff --git a/src/modules/10_registry/02_Government/05_Actposition.vue b/src/modules/10_registry/02_Government/05_Actposition.vue
index 8f887b3..ffc0371 100644
--- a/src/modules/10_registry/02_Government/05_Actposition.vue
+++ b/src/modules/10_registry/02_Government/05_Actposition.vue
@@ -26,6 +26,9 @@ const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
   mixin;
 
 const modalHistory = ref<boolean>(false);
+const checkType = ref<boolean>(
+  dataStore.officerType == "OFFICER" ? true : false
+);
 /** ตัวแปรข้อมูล */
 
 const visibleColumns = ref<String[]>([
@@ -60,7 +63,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "posNo",
     align: "left",
-    label: "ตำแหน่งเลขที่",
+    label: checkType.value ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
@@ -138,7 +141,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "posNo",
     align: "left",
-    label: "ตำแหน่งเลขที่",
+    label: checkType.value ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index a2fc877..c120440 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -76,7 +76,7 @@ const baseColumns = ref<QTableColumn[]>([
   {
     name: "posNo",
     align: "left",
-    label: "ตำแหน่งเลขที่",
+    label: checkType.value ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
@@ -153,7 +153,7 @@ const baseColumns = ref<QTableColumn[]>([
   {
     name: "amount",
     align: "left",
-    label: link.value === "-employee" ? "ค่าตอบแทนรายเดือน" : "เงินเดือน",
+    label: link.value === "-employee" ? "ค่าจ้าง" : "เงินเดือน",
     sortable: true,
     field: "amount",
     headerStyle: "font-size: 14px",
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 6f1d567..4361270 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -75,7 +75,7 @@ const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "amount",
     align: "left",
-    label: checkType.value ? "เงินเดือน" : "ค่าตอบแทนรายเดือน",
+    label: checkType.value ? "เงินเดือน" : "ค่าจ้าง",
     sortable: true,
     field: "amount",
     headerStyle: "font-size: 14px",
@@ -105,7 +105,7 @@ const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "posNo",
     align: "left",
-    label: "ตำแหน่งเลขที่",
+    label: checkType.value ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
@@ -257,7 +257,7 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
   {
     name: "amount",
     align: "left",
-    label: checkType.value ? "เงินเดือน" : "ค่าตอบแทนรายเดือน",
+    label: checkType.value ? "เงินเดือน" : "ค่าจ้าง",
     sortable: true,
     field: "amount",
     headerStyle: "font-size: 14px",
@@ -297,7 +297,7 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
   {
     name: "posNo",
     align: "left",
-    label: "ตำแหน่งเลขที่",
+    label: checkType.value ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
diff --git a/src/modules/10_registry/views/main.vue b/src/modules/10_registry/views/main.vue
index 0fb2ead..f19dcc2 100644
--- a/src/modules/10_registry/views/main.vue
+++ b/src/modules/10_registry/views/main.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import avatar from "@/assets/avatar_user.jpg";
-import { ref, reactive, onMounted } from "vue";
-import axios from "axios";
+import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
@@ -24,7 +22,7 @@ const store = useRegistryInFormationStore();
 const $q = useQuasar();
 const dataStore = useDataStore();
 const mixin = useCounterMixin();
-const { messageError, dialogConfirm, showLoader, hideLoader } = mixin;
+const { messageError, showLoader, hideLoader } = mixin;
 const router = useRouter();
 const tab = ref<string>("information");
 
@@ -56,13 +54,13 @@ async function onClickDownloadKp7(type: string) {
     .then(async (res) => {
       const data = await res.data.result;
       await genReport(data, fileName, "pdf");
-      hideLoader();
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**

From 51d717a677a2feffa88799761e0093ad424258df Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 19 Mar 2025 10:11:31 +0700
Subject: [PATCH 025/195] =?UTF-8?q?fix=20=E0=B9=80=E0=B8=A5=E0=B8=82?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/10_registry/02_Government/07_Position.vue | 2 +-
 src/modules/10_registry/03_Salary/01_Salary.vue       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index c120440..258c7d4 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -180,7 +180,7 @@ const baseColumns = ref<QTableColumn[]>([
     field: "commandNo",
     format(val, row) {
       return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${row.commandYear}`
+        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
         : "";
     },
     headerStyle: "font-size: 14px",
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 4361270..5775f01 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -174,7 +174,7 @@ const baseColumns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     format(val, row) {
       return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${row.commandYear}`
+        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
         : "";
     },
   },
@@ -401,7 +401,7 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     format(val, row) {
       return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${row.commandYear}`
+        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
         : "";
     },
   },

From 96cb3d90739ea1ec8498c8976899448110af730a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 19 Mar 2025 15:23:32 +0700
Subject: [PATCH 026/195] fix position

---
 .../10_registry/02_Government/07_Position.vue | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 258c7d4..539b95a 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -292,18 +292,37 @@ const baseVisibleColumns = ref<string[]>([
   "lastUpdatedAt",
 ]);
 
-const columns = ref<QTableColumn[]>(
-  baseColumns.value.filter(
+const columns = computed<QTableColumn[]>(() => {
+  if (!checkType.value) {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionExecutive" &&
+          column.name !== "lastUpdateFullName" &&
+          column.name !== "lastUpdatedAt"
+      );
+    }
+  }
+  return baseColumns.value.filter(
     (e: QTableColumn) =>
       e.name !== "lastUpdateFullName" && e.name !== "lastUpdatedAt"
-  )
-);
+  );
+});
 const visibleColumns = ref<String[]>(
   baseVisibleColumns.value.filter(
     (e: string) => e !== "lastUpdateFullName" && e !== "lastUpdatedAt"
   )
 );
-const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const columnsHistory = computed<QTableColumn[]>(() => {
+  if (!checkType.value) {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) => column.name !== "positionExecutive"
+      );
+    }
+  }
+  return baseColumns.value;
+});
 const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
 
 /** เปิด dialog ประวัติ*/

From a98ca535be33c9a9e2ffb47abb0a3f4e85d8b67a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 19 Mar 2025 17:30:44 +0700
Subject: [PATCH 027/195] fix position salary

---
 .../10_registry/02_Government/07_Position.vue |  89 +--
 .../10_registry/03_Salary/01_Salary.vue       | 703 +++++++++++-------
 2 files changed, 479 insertions(+), 313 deletions(-)

diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 539b95a..93a2625 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -73,10 +73,24 @@ const baseColumns = ref<QTableColumn[]>([
         .toString()
         .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "commandDateSign",
+    align: "left",
+    label: "วันที่ลงนาม",
+    sortable: true,
+    field: "commandDateSign",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "posNo",
     align: "left",
-    label: checkType.value ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่",
+    label: link.value === "-employee" ? "ตำแหน่งเลขที่" : "เลขที่ตำแหน่ง",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
@@ -109,7 +123,7 @@ const baseColumns = ref<QTableColumn[]>([
   {
     name: "positionType",
     align: "left",
-    label: link.value === "-employee" ? "กลุ่มงาน" : "ประเภทตำแหน่ง",
+    label: link.value === "-employee" ? "กลุ่มงาน" : "ตำแหน่งประเภท",
     sortable: true,
     field: "positionType",
     headerStyle: "font-size: 14px",
@@ -150,28 +164,6 @@ const baseColumns = ref<QTableColumn[]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "amount",
-    align: "left",
-    label: link.value === "-employee" ? "ค่าจ้าง" : "เงินเดือน",
-    sortable: true,
-    field: "amount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(v, row) {
-      return row.amount
-        ? `${row.amount.toLocaleString()}${
-            row.amountSpecial !== 0 && row.amountSpecial
-              ? ` (${row.amountSpecial.toLocaleString()})`
-              : ""
-          }`
-        : "-";
-    },
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "commandNo",
     align: "left",
@@ -196,26 +188,9 @@ const baseColumns = ref<QTableColumn[]>([
     field: "commandCode",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format(val, row) {
-      return store.convertCommandCodeName(val);
-    },
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "commandDateSign",
-    align: "left",
-    label: "วันที่ลงนาม",
-    sortable: true,
-    field: "commandDateSign",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "organization",
     align: "left",
@@ -236,6 +211,28 @@ const baseColumns = ref<QTableColumn[]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "amount",
+    align: "left",
+    label: link.value === "-employee" ? "ค่าจ้าง" : "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(v, row) {
+      return row.amount
+        ? `${row.amount.toLocaleString()}${
+            row.amountSpecial !== 0 && row.amountSpecial
+              ? ` (${row.amountSpecial.toLocaleString()})`
+              : ""
+          }`
+        : "-";
+    },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "remark",
     align: "left",
@@ -245,7 +242,9 @@ const baseColumns = ref<QTableColumn[]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdateFullName",
@@ -542,6 +541,12 @@ onMounted(async () => {
               <div v-else-if="col.name == 'status'">
                 {{ props.row.status ? props.row.status : "-" }}
               </div>
+              <div
+                v-else-if="col.name == 'organization'"
+                class="table_ellipsis"
+              >
+                {{ col.value ? col.value : "-" }}
+              </div>
               <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 5775f01..1399784 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
+import { useQuasar, type QTableColumn } from "quasar";
 import { ref, onMounted, computed } from "vue";
 
 import http from "@/plugins/http";
@@ -16,8 +16,14 @@ const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  onSearchDataTable,
+  findOrgName,
+} = mixin;
 
 const idByRow = ref<string>("");
 const rows = ref<SalaryFormType[]>([]);
@@ -32,24 +38,272 @@ const checkType = ref<boolean>(
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
 
+const baseColumns = ref<QTableColumn[]>([
+  {
+    name: "commandDateAffect",
+    align: "left",
+    label: "วันที่คำสั่งมีผล",
+    sortable: true,
+    field: "commandDateAffect",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandDateSign",
+    align: "left",
+    label: "วันที่ลงนาม",
+    sortable: true,
+    field: "commandDateSign",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: link.value === "-employee" ? "ตำแหน่งเลขที่" : "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posNoAbb && row.posNo
+        ? `${row.posNoAbb}${row.posNo}`
+        : row.posNo
+        ? row.posNo
+        : "-";
+    },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: link.value === "-employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: link.value === "-employee" ? "กลุ่มงาน" : "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: link.value === "-employee" ? "ระดับชั้นงาน" : "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    format(val, row) {
+      return `${
+        row.positionLevel
+          ? row.positionLevel
+          : row.positionCee
+          ? row.positionCee
+          : "-"
+      }`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "commandNo",
+    format(val, row) {
+      return row.commandNo && row.commandYear
+        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+        : "";
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandCode",
+    align: "left",
+    label: "ประเภทคำสั่ง",
+    sortable: true,
+    field: "commandCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName({
+        root: row.orgRoot,
+        child1: row.orgChild1,
+        child2: row.orgChild2,
+        child3: row.orgChild3,
+        child4: row.orgChild4,
+      });
+    },
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: link.value === "-employee" ? "ค่าจ้าง" : "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(v, row) {
+      return row.amount
+        ? `${row.amount.toLocaleString()}${
+            row.amountSpecial !== 0 && row.amountSpecial
+              ? ` (${row.amountSpecial.toLocaleString()})`
+              : ""
+          }`
+        : "-";
+    },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
 const visibleColumns = ref<string[]>([
   "commandDateAffect",
-  "amount",
-  "positionSalaryAmount",
-  "mouthSalaryAmount",
   "posNo",
   "positionName",
   "positionType",
   "positionLevel",
-  "commandName",
-  "refCommandNo",
+  "positionExecutive",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "commandNo",
+  "commandCode",
+  "commandDateSign",
+  "organization",
   "remark",
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
 
 const columns = computed(() => {
-  if (checkType.value == false) {
+  if (link.value === "-employee") {
     if (baseColumns.value) {
       return baseColumns.value.filter(
         (column) =>
@@ -61,51 +315,71 @@ const columns = computed(() => {
   return baseColumns.value;
 });
 
-const baseColumns = ref<QTableProps["columns"]>([
+const visibleColumnsHistory = ref<string[]>([
+  "commandDateAffect",
+  "posNo",
+  "positionName",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "commandNo",
+  "commandCode",
+  "commandDateSign",
+  "organization",
+  "remark",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+const columnsHistory = computed(() => {
+  if (link.value === "-employee") {
+    if (baseColumnsHistory.value) {
+      return baseColumnsHistory.value.filter(
+        (column: QTableColumn) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+
+const baseColumnsHistory = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
     align: "left",
-    label: "วัน เดือน ปี",
+    label: "วันที่คำสั่งมีผล",
     sortable: true,
     field: "commandDateAffect",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "amount",
+    name: "commandDateSign",
     align: "left",
-    label: checkType.value ? "เงินเดือน" : "ค่าจ้าง",
+    label: "วันที่ลงนาม",
     sortable: true,
-    field: "amount",
+    field: "commandDateSign",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-  },
-  {
-    name: "positionSalaryAmount",
-    align: "left",
-    label: "เงินประจำตำแหน่ง",
-    sortable: true,
-    field: "positionSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-  },
-  {
-    name: "mouthSalaryAmount",
-    align: "left",
-    label: "เงินค่าตอบแทนรายเดือน",
-    sortable: true,
-    field: "mouthSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posNo",
     align: "left",
-    label: checkType.value ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่",
+    label: link.value === "-employee" ? "ตำแหน่งเลขที่" : "เลขที่ตำแหน่ง",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
@@ -117,33 +391,43 @@ const baseColumns = ref<QTableProps["columns"]>([
         ? row.posNo
         : "-";
     },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionName",
     align: "left",
-    label: "ตำแหน่ง",
+    label: link.value === "-employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน",
     sortable: true,
     field: "positionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionType",
     align: "left",
-    label: "ประเภทตำแหน่ง",
+    label: link.value === "-employee" ? "กลุ่มงาน" : "ตำแหน่งประเภท",
     sortable: true,
     field: "positionType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionLevel",
     align: "left",
-    label: "ระดับ",
+    label: link.value === "-employee" ? "ระดับชั้นงาน" : "ระดับ",
     sortable: true,
     field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
     format(val, row) {
       return `${
         row.positionLevel
@@ -153,207 +437,10 @@ const baseColumns = ref<QTableProps["columns"]>([
           : "-"
       }`;
     },
-  },
-
-  {
-    name: "commandName",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "commandName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "refCommandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "refCommandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
-        : "";
-    },
-  },
-  {
-    name: "remark",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "remark",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
-  },
-]);
-
-const visibleColumnsHistory = ref<string[]>([
-  "commandDateAffect",
-  "amount",
-  "positionSalaryAmount",
-  "mouthSalaryAmount",
-  "oc",
-  "positionName",
-  "posNo",
-  "positionLine",
-  "positionPathSide",
-  "positionType",
-  "positionLevel",
-  "positionExecutive",
-  "positionExecutiveSide",
-  "salaryClass",
-  "commandName",
-  "refCommandNo",
-  "remark",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-
-const columnsHistory = computed(() => {
-  if (checkType.value == false) {
-    if (baseColumnsHistory.value) {
-      return baseColumnsHistory.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-
-const baseColumnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "commandDateAffect",
-    align: "left",
-    label: "วัน เดือน ปี",
-    sortable: true,
-    field: "commandDateAffect",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-  },
-  {
-    name: "amount",
-    align: "left",
-    label: checkType.value ? "เงินเดือน" : "ค่าจ้าง",
-    sortable: true,
-    field: "amount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-  },
-  {
-    name: "positionSalaryAmount",
-    align: "left",
-    label: "เงินประจำตำแหน่ง",
-    sortable: true,
-    field: "positionSalaryAmount",
-    headerStyle: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-    style: "font-size: 14px",
-  },
-  {
-    name: "mouthSalaryAmount",
-    align: "left",
-    label: "เงินค่าตอบแทนรายเดือน",
-    sortable: true,
-    field: "mouthSalaryAmount",
-    headerStyle: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-    style: "font-size: 14px",
-  },
-  {
-    name: "oc",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "oc",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "posNo",
-    align: "left",
-    label: checkType.value ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return row.posNoAbb && row.posNo
-        ? `${row.posNoAbb}${row.posNo}`
-        : row.posNo
-        ? row.posNo
-        : "-";
-    },
-  },
-  {
-    name: "positionName",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "positionName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLine",
-    align: "left",
-    label: "สายงาน",
-    sortable: true,
-    field: "positionLine",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionPathSide",
-    align: "left",
-    label: "ด้าน/สาขา",
-    sortable: true,
-    field: "positionPathSide",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionType",
-    align: "left",
-    label: "ตำแหน่งประเภท",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positionExecutive",
@@ -363,48 +450,107 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     field: "positionExecutive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionExecutiveSide",
-    align: "left",
-    label: "ด้านทางการบริหาร",
-    sortable: true,
-    field: "positionExecutiveSide",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "salaryClass",
-    align: "left",
-    label: "ตำแหน่ง (รายละเอียด)",
-    sortable: true,
-    field: "salaryClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "commandName",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "commandName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "refCommandNo",
+    name: "commandNo",
     align: "left",
     label: "เลขที่คำสั่ง",
     sortable: true,
-    field: "refCommandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+    field: "commandNo",
     format(val, row) {
       return row.commandNo && row.commandYear
         ? `${row.commandNo}/${Number(row.commandYear) + 543}`
         : "";
     },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "commandCode",
+    align: "left",
+    label: "ประเภทคำสั่ง",
+    sortable: true,
+    field: "commandCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName({
+        root: row.orgRoot,
+        child1: row.orgChild1,
+        child2: row.orgChild2,
+        child3: row.orgChild3,
+        child4: row.orgChild4,
+      });
+    },
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: link.value === "-employee" ? "ค่าจ้าง" : "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(v, row) {
+      return row.amount
+        ? `${row.amount.toLocaleString()}${
+            row.amountSpecial !== 0 && row.amountSpecial
+              ? ` (${row.amountSpecial.toLocaleString()})`
+              : ""
+          }`
+        : "-";
+    },
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
   {
     name: "remark",
     align: "left",
@@ -413,6 +559,10 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     field: "remark",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdateFullName",
@@ -422,6 +572,10 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdatedAt",
@@ -432,6 +586,10 @@ const baseColumnsHistory = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -562,6 +720,9 @@ onMounted(async () => {
             <div v-else-if="col.name == 'status'">
               {{ props.row.status ? props.row.status : "-" }}
             </div>
+            <div v-else-if="col.name == 'organization'" class="table_ellipsis">
+              {{ col.value ? col.value : "-" }}
+            </div>
             <div v-else>
               {{ col.value ? col.value : "-" }}
             </div>

From 5452ac8d9486479781a9ceec6b236793a759fafa Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 20 Mar 2025 15:01:17 +0700
Subject: [PATCH 028/195] =?UTF-8?q?kpi=20=E0=B8=AA=E0=B9=88=E0=B8=87=200?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../06_evaluate/components/viewstep/viewStep1.vue  |  2 +-
 src/modules/06_evaluate/stores/evaluteDetail.ts    |  4 ++--
 .../components/Tab/Dialog/01_FormIndicator.vue     | 14 ++++++++------
 .../components/Tab/Dialog/DialogGovernment.vue     |  2 +-
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 3c81e4a..ccc8c19 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -318,7 +318,7 @@ onMounted(async () => {
                 borderless
                 readonly
                 :model-value="`${formDetail.posNo ? formDetail.posNo : '-'}`"
-                label="ตำแหน่งเลขที่"
+                label="เลขที่ตำแหน่ง"
               />
             </div>
             <div class="col-xs-6 col-sm-4 col-md-3">
diff --git a/src/modules/06_evaluate/stores/evaluteDetail.ts b/src/modules/06_evaluate/stores/evaluteDetail.ts
index 72558cd..86d83b1 100644
--- a/src/modules/06_evaluate/stores/evaluteDetail.ts
+++ b/src/modules/06_evaluate/stores/evaluteDetail.ts
@@ -102,7 +102,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     {
       name: "posNo",
       align: "left",
-      label: "ตำแหน่งเลขที่",
+      label: "เลขที่ตำแหน่ง",
       sortable: true,
       field: "posNo",
       headerStyle: "font-size: 14px",
@@ -112,7 +112,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     {
       name: "positionType",
       align: "left",
-      label: "ประเภทตำแหน่ง",
+      label: "ตำแหน่งประเภท",
       sortable: true,
       field: "positionType",
       headerStyle: "font-size: 14px",
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index 2a21011..d931c4f 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -86,8 +86,10 @@ const roundOp = ref<DataOptions[]>([
 ]);
 
 function fetchListPlan() {
-  formFilter.nodeId = store.dataProfile.nodeDnaId;
-  formFilter.node = store.dataProfile.node;
+  formFilter.nodeId = formFilter.isAll
+    ? store.dataProfile.rootDnaId
+    : store.dataProfile.nodeDnaId;
+  formFilter.node = formFilter.isAll ? 0 : store.dataProfile.node;
   formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
 
   showLoader();
@@ -146,8 +148,10 @@ function fetchListPlanByid(id: string) {
 }
 
 function fetchListRole() {
-  formFilter.nodeId = store.dataProfile.nodeDnaId;
-  formFilter.node = store.dataProfile.node;
+  formFilter.nodeId = formFilter.isAll
+    ? store.dataProfile.rootDnaId
+    : store.dataProfile.nodeDnaId;
+  formFilter.node = formFilter.isAll ? 0 : store.dataProfile.node;
   formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
   formFilter.position = store.dataProfile.position;
 
@@ -199,8 +203,6 @@ function fetchRoleByid(id: string) {
 }
 
 function fetchListSpecial() {
-  // formFilter.nodeId = store.dataProfile.nodeDnaId;
-  // formFilter.node = store.dataProfile.node;
   formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
 
   const body = {
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
index 50e2f3f..de67f8c 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -67,7 +67,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "posMasterNoOld",
     align: "left",
-    label: "ตำแหน่งเลขที่",
+    label: "เลขที่ตำแหน่ง",
     sortable: true,
     field: "posMasterNoOld",
     headerStyle: "font-size: 14px",

From e3abae0a5e1ea62c922fd555f61e312784bb1a56 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 21 Mar 2025 17:41:16 +0700
Subject: [PATCH 029/195] fix workflow

---
 src/components/Workflow/DialogApprove.vue     | 21 ++++++++++++++-----
 .../Workflow/DialogSelectPerson.vue           | 19 +++++++++++++----
 src/components/Workflow/Main.vue              | 15 +++++++++++--
 3 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/components/Workflow/DialogApprove.vue b/src/components/Workflow/DialogApprove.vue
index f075cc4..4952776 100644
--- a/src/components/Workflow/DialogApprove.vue
+++ b/src/components/Workflow/DialogApprove.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -10,6 +10,9 @@ const $q = useQuasar();
 const { dialogConfirm } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  sysName: { type: String, require: true },
+});
 
 const isAcknowledge = ref<boolean>(false);
 const isConsider = ref<boolean>(true);
@@ -19,6 +22,12 @@ const acknowledge = ref<boolean>(false);
 const consider = ref<string>("");
 const comment = ref<string>("");
 
+const rejectName = computed(() =>
+  props.sysName && ["SYS_RESIGN", "SYS_RESIGN_EMP"].includes(props.sysName)
+    ? "ยับยั้ง"
+    : "ไม่อนุมัติ"
+);
+
 function onSubmit() {
   dialogConfirm($q, () => {});
 }
@@ -52,8 +61,10 @@ function onCloseModal() {
                 label="รับทราบ"
               />
             </div>
-            <div v-if="!isAcknowledge && isConsider">
-              <div class="text-weight-bold">พิจารณา (อนุมัติ/ไม่อนุมัติ)</div>
+            <div v-if="isConsider">
+              <div class="text-weight-bold">
+                {{ `พิจารณา (อนุมัติ/${rejectName})` }}
+              </div>
               <div class="q-pa-sm q-gutter-sm">
                 <q-radio
                   dense
@@ -68,13 +79,13 @@ function onCloseModal() {
                   keep-color
                   color="primary"
                   v-model="consider"
-                  label="ไม่อนุมัติ"
+                  :label="`${rejectName}`"
                   val="reject"
                 />
               </div>
             </div>
 
-            <div v-if="!isAcknowledge && isComment">
+            <div v-if="isComment">
               <div class="text-weight-bold">แสดงความเห็นในเอกสาร</div>
               <div class="q-pa-sm q-gutter-sm">
                 <div class="col-12">
diff --git a/src/components/Workflow/DialogSelectPerson.vue b/src/components/Workflow/DialogSelectPerson.vue
index 3cb7fc0..3a9b740 100644
--- a/src/components/Workflow/DialogSelectPerson.vue
+++ b/src/components/Workflow/DialogSelectPerson.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
+import { reactive, ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -20,10 +20,18 @@ const { dialogConfirm, showLoader, hideLoader, messageError } =
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   stateId: { type: String, require: true },
+  keycloakId: { type: String, require: true },
+  sysName: { type: String, require: true },
   fetchData: { type: Function, require: true },
   type: { type: String, require: true },
 });
 
+const rejectName = computed(() =>
+  props.sysName && ["SYS_RESIGN", "SYS_RESIGN_EMP"].includes(props.sysName)
+    ? "ยับยั้ง"
+    : "ไม่อนุมัติ"
+);
+
 /** table*/
 const selected = ref<DataCommander[]>([]);
 const rows = ref<DataCommander[]>([]);
@@ -77,7 +85,10 @@ const formDataQuery = reactive<DataQuery>({
 async function fetchLists() {
   showLoader();
   await http
-    .put(config.API.workflow + `commander/${props.type}`, formDataQuery)
+    .put(config.API.workflow + `commander/${props.type}`, {
+      ...formDataQuery,
+      keycloakId: props.keycloakId,
+    })
     .then(async (res) => {
       totalList.value = Math.ceil(
         res.data.result.total / formDataQuery.pageSize
@@ -281,10 +292,10 @@ function updatePagination(newPagination: Pagination) {
                 keep-color
                 color="primary"
                 v-model="isApproveSetting"
-                label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
+                :label="`ให้เลือกพิจารณา (อนุมัติ/${rejectName})`"
               />
             </div>
-            <div v-if="!isAcceptSetting">
+            <div>
               <q-checkbox
                 dense
                 keep-color
diff --git a/src/components/Workflow/Main.vue b/src/components/Workflow/Main.vue
index 44fce9a..6c5f5b4 100644
--- a/src/components/Workflow/Main.vue
+++ b/src/components/Workflow/Main.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -10,6 +10,7 @@ import type { Permission } from "@/components/Workflow/interface/index/Main";
 import type { DataListState } from "@/components/Workflow/interface/response/Main";
 
 import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
+import Keycloak from "keycloak-js";
 
 const $q = useQuasar();
 const { dialogConfirm, showLoader, hideLoader, messageError } =
@@ -20,9 +21,16 @@ const { id, sysName } = defineProps({
   sysName: { type: String, require: true },
 });
 
+const rejectName = computed(() =>
+  sysName && ["SYS_RESIGN", "SYS_RESIGN_EMP"].includes(sysName)
+    ? "ยับยั้ง"
+    : "ไม่อนุมัติ"
+);
+
 const stateId = ref<string>(""); //id state ปัจุบัน
 const state = ref<number>(1); //state ปัจุบัน
 const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
+const KeycloakId = ref<string>("");
 
 const permission = ref<Permission>({
   isChangeState: false, //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
@@ -62,6 +70,7 @@ async function fetchCheckState() {
         isCancel: data.can_cancel,
         isSing: data.can_sing,
       };
+      KeycloakId.value = data.keycloakId;
     })
     .catch(() => {
       isPermission.value = false;
@@ -187,7 +196,7 @@ defineExpose({
                             ? item.isApprove === true
                               ? "อนุมัติ"
                               : item.isApprove === false
-                              ? "ไม่อนุมัติ"
+                              ? `${rejectName}`
                               : ""
                             : ""
                         }}
@@ -236,5 +245,7 @@ defineExpose({
     :state-id="stateId"
     :fetch-data="fetchCheckState"
     :type="typeSelectPerson"
+    :sys-name="sysName"
+    :keycloak-id="KeycloakId"
   />
 </template>

From bcad2fd6c3cf6a8f46240d4b7690b4ac85b25d98 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 25 Mar 2025 09:19:11 +0700
Subject: [PATCH 030/195] add field posNo workflow popup person

---
 src/components/Workflow/DialogSelectPerson.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Workflow/DialogSelectPerson.vue b/src/components/Workflow/DialogSelectPerson.vue
index 3a9b740..bc52e15 100644
--- a/src/components/Workflow/DialogSelectPerson.vue
+++ b/src/components/Workflow/DialogSelectPerson.vue
@@ -36,6 +36,15 @@ const rejectName = computed(() =>
 const selected = ref<DataCommander[]>([]);
 const rows = ref<DataCommander[]>([]);
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "fullName",
     align: "left",

From 9a6356615706faa4824c769bfa3f84d9f1dc2d62 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 25 Mar 2025 09:36:32 +0700
Subject: [PATCH 031/195] scroll

---
 src/modules/05_leave/components/DialogDetail.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index a1ee1de..d644ea2 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -432,7 +432,7 @@ watch(
 
       <q-separator />
 
-      <q-card-section>
+      <q-card-section class="scroll" style="max-height: 80vh;">
         <div class="row">
           <div
             flat
@@ -565,7 +565,6 @@ watch(
     </q-card>
 
     <q-card
-      q-card
       v-if="props.leaveStatus === 'DELETE'"
       style="min-width: 40vw"
     >

From c0fe886321f19c2911ab15b0a6bd4f29d06398c0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 25 Mar 2025 16:58:58 +0700
Subject: [PATCH 032/195] =?UTF-8?q?fix=20=E0=B9=80=E0=B8=87=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99=E0=B8=84?=
 =?UTF-8?q?=E0=B9=88=E0=B8=B2=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../10_registry/03_Salary/01_Salary.vue       | 20 ++++++++------
 .../10_registry/03_Salary/02_Nopaid.vue       | 26 +++++++++++--------
 src/modules/10_registry/views/main.vue        |  9 ++++---
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 1399784..6ce069a 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -38,6 +38,10 @@ const checkType = ref<boolean>(
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
 
+const salaryText = computed(() => {
+  return link.value == "" ? "เงินเดือน" : "ค่าจ้าง";
+});
+
 const baseColumns = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
@@ -194,7 +198,7 @@ const baseColumns = ref<QTableColumn[]>([
   {
     name: "amount",
     align: "left",
-    label: link.value === "-employee" ? "ค่าจ้าง" : "เงินเดือน",
+    label: salaryText.value,
     sortable: true,
     field: "amount",
     headerStyle: "font-size: 14px",
@@ -503,7 +507,7 @@ const baseColumnsHistory = ref<QTableColumn[]>([
   {
     name: "amount",
     align: "left",
-    label: link.value === "-employee" ? "ค่าจ้าง" : "เงินเดือน",
+    label: salaryText.value,
     sortable: true,
     field: "amount",
     headerStyle: "font-size: 14px",
@@ -652,9 +656,9 @@ onMounted(async () => {
   <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
-      <span class="text-blue-6 text-weight-bold text-body1"
-        >ตำแหน่ง/เงินเดือน</span
-      >
+      <span class="text-blue-6 text-weight-bold text-body1">{{
+        `ตำแหน่ง/${salaryText}`
+      }}</span>
       <q-space />
       <q-input
         v-if="mode"
@@ -737,7 +741,7 @@ onMounted(async () => {
               icon="mdi-history"
               @click="onHistory(props.row.id)"
             >
-              <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+              <q-tooltip>{{`ประวัติแก้ไขตำแหน่ง/${salaryText}`}}</q-tooltip>
             </q-btn>
           </q-td>
         </q-tr>
@@ -756,7 +760,7 @@ onMounted(async () => {
                 class="absolute_button"
                 @click="onHistory(props.row.id)"
               >
-                <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                <q-tooltip>{{`ประวัติแก้ไขตำแหน่ง/${salaryText}`}}</q-tooltip>
               </q-btn>
               <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section class="fix_top">
@@ -778,7 +782,7 @@ onMounted(async () => {
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
-    :title="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
+    :title="`ประวัติแก้ไขตำแหน่ง/${salaryText}`"
     :getData="getHistory"
     :rows="rowsHistory"
     :rows-data="rowsHistoryData"
diff --git a/src/modules/10_registry/03_Salary/02_Nopaid.vue b/src/modules/10_registry/03_Salary/02_Nopaid.vue
index ecdc9a4..1757c39 100644
--- a/src/modules/10_registry/03_Salary/02_Nopaid.vue
+++ b/src/modules/10_registry/03_Salary/02_Nopaid.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -28,7 +28,9 @@ const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
 const { getPathUploadFlie } = useRegistryDataStore();
 
 const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const salaryText = computed(() => {
+  return link.value == "" ? "เงินเดือน" : "ค่าจ้าง";
+});
 
 const visibleColumns = ref<string[]>([
   "date",
@@ -220,7 +222,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-const fileGroup = ref<string>("เอกสารบันทึกวันที่ไม่ได้รับเงินเดือน");
+const fileGroup = ref<string>(`เอกสารบันทึกวันที่ไม่ได้รับ${salaryText.value}`);
 
 function onHistory(id: string) {
   modalHistory.value = true;
@@ -287,9 +289,9 @@ onMounted(async () => {
   <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
-      <span class="text-blue-6 text-weight-bold text-body1"
-        >บันทึกวันที่ไม่ได้รับเงินเดือนฯ</span
-      >
+      <span class="text-blue-6 text-weight-bold text-body1">{{
+        `บันทึกวันที่ไม่ได้รับ${salaryText}ฯ`
+      }}</span>
       <q-space />
       <q-input
         v-if="mode"
@@ -381,7 +383,9 @@ onMounted(async () => {
               icon="mdi-history"
               @click="onHistory(props.row.id)"
             >
-              <q-tooltip>ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
+              <q-tooltip>{{
+                `ประวัติแก้ไขบันทึกวันที่ไม่ได้รับ${salaryText}ฯ`
+              }}</q-tooltip>
             </q-btn>
           </q-td>
         </q-tr>
@@ -412,9 +416,9 @@ onMounted(async () => {
                   size="14px"
                   @click="onHistory(props.row.id)"
                 >
-                  <q-tooltip
-                    >ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip
-                  >
+                  <q-tooltip>{{
+                    `ประวัติแก้ไขบันทึกวันที่ไม่ได้รับ${salaryText}ฯ`
+                  }}</q-tooltip>
                 </q-btn>
               </div>
               <q-item v-for="col in props.cols" :key="col.name">
@@ -438,7 +442,7 @@ onMounted(async () => {
 
   <DialogHistory
     v-model:modal="modalHistory"
-    :title="'ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'"
+    :title="`ประวัติแก้ไขบันทึกวันที่ไม่ได้รับ${salaryText}ฯ`"
     :getData="getHistory"
     :rows="rowsHistory"
     :rows-data="rowsHistoryData"
diff --git a/src/modules/10_registry/views/main.vue b/src/modules/10_registry/views/main.vue
index f19dcc2..7b1c10f 100644
--- a/src/modules/10_registry/views/main.vue
+++ b/src/modules/10_registry/views/main.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
@@ -25,6 +25,9 @@ const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
 const router = useRouter();
 const tab = ref<string>("information");
+const salaryText = computed(() => {
+ return  dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
+});
 
 const sizeImg = ref<string>("");
 function onResize(size: any) {
@@ -210,7 +213,7 @@ function redirectToPagePetition() {
                 class="bg-active"
               />
               <q-tab name="government" label="ข้อมูลราชการ" />
-              <q-tab name="salary" label="ข้อมูลเงินเดือน/ค่าจ้าง" />
+              <q-tab name="salary" :label="`ข้อมูล${salaryText}`" />
               <q-tab name="insignia" label="ข้อมูลผลงาน" />
               <q-tab name="other" label="ข้อมูลอื่นๆ" />
             </q-tabs>
@@ -316,7 +319,7 @@ function redirectToPagePetition() {
               </q-item-section>
             </q-item>
             <q-item clickable v-ripple @click="onMobile('salary')">
-              <q-item-section>ข้อมูลเงินเดือน/ค่าจ้าง</q-item-section>
+              <q-item-section>{{ `ข้อมูล${salaryText}` }}</q-item-section>
               <q-item-section avatar>
                 <q-avatar text-color="info" icon="mdi-chevron-right" />
               </q-item-section>

From 5bdbaf5e2e5a8da3d7a36a59e3de0b3b6f989bf6 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 25 Mar 2025 17:07:35 +0700
Subject: [PATCH 033/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9B=E0=B9=87=E0=B8=99=E0=B8=A7=E0=B8=B1=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/10_registry/02_Government/01_Government.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/10_registry/02_Government/01_Government.vue b/src/modules/10_registry/02_Government/01_Government.vue
index f9a6c23..e251927 100644
--- a/src/modules/10_registry/02_Government/01_Government.vue
+++ b/src/modules/10_registry/02_Government/01_Government.vue
@@ -542,7 +542,7 @@ onMounted(async () => {
             <div class="col-7">
               {{
                 formData.govAge
-                  ? `${formData.govAge.year} ปี ${formData.govAge.month} เดือน ${formData.govAge.year} วัน`
+                  ? `${formData.govAge.year} ปี ${formData.govAge.month} เดือน ${formData.govAge.day} วัน`
                   : "-"
               }}
             </div>

From a03b980d63bae5521ac7e4457de9c14c8aeca077 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 26 Mar 2025 10:00:33 +0700
Subject: [PATCH 034/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/10_registry/02_Government/07_Position.vue | 4 ++--
 src/modules/10_registry/03_Salary/01_Salary.vue       | 8 ++++----
 src/modules/11_probation/views/mainDetail.vue         | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 93a2625..2fbaa00 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -561,7 +561,7 @@ onMounted(async () => {
                 icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
-                <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                <q-tooltip>ประวัติแก้ไขตำแหน่ง</q-tooltip>
               </q-btn>
             </q-td>
           </q-tr>
@@ -580,7 +580,7 @@ onMounted(async () => {
                   class="absolute_button"
                   @click="onHistory(props.row.id)"
                 >
-                  <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                  <q-tooltip>ประวัติแก้ไขตำแหน่ง</q-tooltip>
                 </q-btn>
                 <q-item v-for="col in props.cols" :key="col.name">
                   <q-item-section class="fix_top">
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 6ce069a..7917069 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -657,7 +657,7 @@ onMounted(async () => {
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1">{{
-        `ตำแหน่ง/${salaryText}`
+        `${salaryText}`
       }}</span>
       <q-space />
       <q-input
@@ -741,7 +741,7 @@ onMounted(async () => {
               icon="mdi-history"
               @click="onHistory(props.row.id)"
             >
-              <q-tooltip>{{`ประวัติแก้ไขตำแหน่ง/${salaryText}`}}</q-tooltip>
+              <q-tooltip>{{ `ประวัติแก้ไข${salaryText}` }}</q-tooltip>
             </q-btn>
           </q-td>
         </q-tr>
@@ -760,7 +760,7 @@ onMounted(async () => {
                 class="absolute_button"
                 @click="onHistory(props.row.id)"
               >
-                <q-tooltip>{{`ประวัติแก้ไขตำแหน่ง/${salaryText}`}}</q-tooltip>
+                <q-tooltip>{{ `ประวัติแก้ไข${salaryText}` }}</q-tooltip>
               </q-btn>
               <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section class="fix_top">
@@ -782,7 +782,7 @@ onMounted(async () => {
   </div>
   <DialogHistory
     v-model:modal="modalHistory"
-    :title="`ประวัติแก้ไขตำแหน่ง/${salaryText}`"
+    :title="`ประวัติแก้ไข${salaryText}`"
     :getData="getHistory"
     :rows="rowsHistory"
     :rows-data="rowsHistoryData"
diff --git a/src/modules/11_probation/views/mainDetail.vue b/src/modules/11_probation/views/mainDetail.vue
index 8bcec15..6a35432 100644
--- a/src/modules/11_probation/views/mainDetail.vue
+++ b/src/modules/11_probation/views/mainDetail.vue
@@ -414,7 +414,7 @@ onMounted(async () => {
                           class="absolute_button"
                           @click="onDetail(props.row.id)"
                         >
-                          <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                          <q-tooltip>ดูรายละเอียด</q-tooltip>
                         </q-btn>
                         <q-item v-for="col in props.cols" :key="col.name">
                           <q-item-section class="fix_top">

From 88915cc2f0587bed2c550000aa7e1cf86b83d2ca Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 26 Mar 2025 10:17:27 +0700
Subject: [PATCH 035/195] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=82=E0=B8=99=E0=B8=B2=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/DialogDetail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index d644ea2..e133373 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -432,7 +432,7 @@ watch(
 
       <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 80vh;">
+      <q-card-section class="scroll" style="max-height: 60vh;">
         <div class="row">
           <div
             flat

From f2378ff1c7ce4ff01a15e5dad3bd0ebcee882930 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 26 Mar 2025 14:39:09 +0700
Subject: [PATCH 036/195] space to enter

---
 .../components/viewstep/viewStep1.vue         |   2 +-
 .../Tab/Dialog/DialogGovernment.vue           |   9 +-
 src/modules/08_KPI/views/form.vue             |  30 +++--
 .../02_Government/01_Government.vue           |   2 +-
 .../10_registry/02_Government/07_Position.vue |  36 +++++-
 .../10_registry/03_Salary/01_Salary.vue       |  36 +++++-
 .../10_registry/Dialog/DialogHistory.vue      |  15 ++-
 src/stores/mixin.ts                           | 113 +++++++++++++++++-
 src/style/quasar-variables.sass               |   3 +-
 9 files changed, 224 insertions(+), 22 deletions(-)

diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index ccc8c19..99cebc2 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -360,7 +360,7 @@ onMounted(async () => {
                 label="อายุราชการ"
               />
             </div>
-            <div class="col-xs-12 col-sm-9">
+            <div class="col-xs-12 col-sm-9 text-html">
               <q-input
                 borderless
                 readonly
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
index de67f8c..bab7875 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -19,6 +19,7 @@ const {
   messageError,
   findPosMasterNoOld,
   findOrgNameOld,
+  findOrgNameOldHtml,
   date2Thai,
 } = mixin;
 
@@ -113,7 +114,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (val, row) => findOrgNameOld(row),
   },
   {
     name: "organization",
@@ -172,7 +172,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "commandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-   
   },
 ]);
 
@@ -266,6 +265,12 @@ watch(
                     <div v-if="col.name === 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
+                    <div
+                      v-else-if="col.name == 'organizationPositionOld'"
+                      class="text-html"
+                    >
+                      {{ props.row ? findOrgNameOldHtml(props.row) : "-" }}
+                    </div>
                     <div v-else>
                       {{ col.value ? col.value : "-" }}
                     </div>
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index d5b617a..bd71b83 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import genReport from "@/plugins/genreport";
@@ -37,6 +37,7 @@ const {
   dialogConfirm,
   success,
   findOrgName,
+  findOrgNameHtml,
   dialogRemove,
 } = mixin;
 const route = useRoute();
@@ -462,7 +463,7 @@ async function fetchProfileEvaluator(id: string) {
       evaluator.value.posLevelName = data.posLevelName;
       evaluator.value.isPosmasterAct = data.isPosmasterAct;
       evaluator.value.posmasterAct = data.posmasterAct;
-      evaluator.value.org = await findOrgName(data);
+      evaluator.value.org = await findOrgNameHtml(data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -637,6 +638,16 @@ function downloadFile(fileName: string) {
     });
 }
 
+const sizeImg = ref<any>();
+
+function onResize(size: { width: any; height: any }) {
+  if (size.height <= 156) {
+    sizeImg.value = "80px";
+  } else if (size.height > 156) {
+    sizeImg.value = "120px";
+  }
+}
+
 onMounted(async () => {
   showLoader();
   store.isUpdate = false;
@@ -672,7 +683,7 @@ onMounted(async () => {
       <div class="col-12">
         <q-card bordered flat class="relative-position">
           <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
-            <q-avatar size="80px">
+            <q-avatar :size="sizeImg">
               <q-img
                 :src="store.dataEvaluation.avartar"
                 v-if="store.dataEvaluation.avartar !== undefined"
@@ -680,13 +691,12 @@ onMounted(async () => {
               <q-img src="@/assets/avatar_user.jpg" v-else />
             </q-avatar>
           </div>
-
           <div
             v-if="$q.screen.gt.xs"
             class="absolute-center-left"
             style="left: 2%; top: 50%; transform: translateY(-50%)"
           >
-            <q-avatar size="80px">
+            <q-avatar :size="sizeImg">
               <q-img
                 :src="store.dataEvaluation.avartar"
                 v-if="store.dataEvaluation.avartar !== undefined"
@@ -695,6 +705,8 @@ onMounted(async () => {
             </q-avatar>
           </div>
           <div class="row col-12">
+            <q-resize-observer @resize="onResize" />
+
             <div class="row items-center col-12 q-pa-sm">
               <div
                 class="col-12"
@@ -707,8 +719,8 @@ onMounted(async () => {
                         ? `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
                         : ""
                     }}</span>
-                    <p class="q-mb-none">
-                      {{ findOrgName(store.dataEvaluation) }}
+                    <p class="q-mb-none text-html">
+                      {{ findOrgNameHtml(store.dataEvaluation) }}
                     </p>
                   </div>
                   <q-space v-if="$q.screen.gt.xs" />
@@ -1187,7 +1199,7 @@ onMounted(async () => {
   </q-dialog>
 
   <q-dialog v-model="modalEvaluatorDetail" persistent>
-    <q-card style="width: 700px; max-width: 80vw; min-height: 40vh">
+    <q-card style="width: 60vw; max-width: 70vw; min-height: 40vh">
       <DialogHeader
         :tittle="topic"
         :close="() => (modalEvaluatorDetail = false)"
@@ -1223,7 +1235,7 @@ onMounted(async () => {
                   evaluator.posExecutiveName ? evaluator.posExecutiveName : "-"
                 }}
               </div>
-              <div class="col-3">
+              <div class="col-3 text-html">
                 {{ evaluator.org ? evaluator.org : "-" }}
               </div>
             </div>
diff --git a/src/modules/10_registry/02_Government/01_Government.vue b/src/modules/10_registry/02_Government/01_Government.vue
index e251927..153d08b 100644
--- a/src/modules/10_registry/02_Government/01_Government.vue
+++ b/src/modules/10_registry/02_Government/01_Government.vue
@@ -431,7 +431,7 @@ onMounted(async () => {
         <div class="col-12 col-sm-12 col-md-6">
           <div class="row q-col-gutter-y-sm">
             <div class="col-5 text-grey-6 text-weight-medium">สังกัด</div>
-            <div class="col-7">
+            <div class="col-7 text-html">
               {{ formData.org ? formData.org : "-" }}
             </div>
             <div class="col-5 text-grey-6 text-weight-medium">
diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 2fbaa00..c6080e0 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -30,6 +30,7 @@ const {
   onSearchDataTable,
   formatDatePosition,
   findOrgName,
+  findOrgNameHtml,
 } = mixin;
 
 const idByRow = ref<string>("");
@@ -543,9 +544,20 @@ onMounted(async () => {
               </div>
               <div
                 v-else-if="col.name == 'organization'"
-                class="table_ellipsis"
+                class="text-html"
+                style="width: 300px"
               >
-                {{ col.value ? col.value : "-" }}
+                {{
+                  props.row
+                    ? findOrgNameHtml({
+                        root: props.row.orgRoot,
+                        child1: props.row.orgChild1,
+                        child2: props.row.orgChild2,
+                        child3: props.row.orgChild3,
+                        child4: props.row.orgChild4,
+                      })
+                    : "-"
+                }}
               </div>
               <div v-else>
                 {{ col.value ? col.value : "-" }}
@@ -588,7 +600,25 @@ onMounted(async () => {
                       col.label
                     }}</q-item-label>
                   </q-item-section>
-                  <q-item-section class="fix_top">
+                  <q-item-section
+                    v-if="col.name == 'organization'"
+                    class="fix_top text-html"
+                  >
+                    <q-item-label class="text-dark text-weight-medium">
+                      {{
+                        props.row
+                          ? findOrgNameHtml({
+                              root: props.row.orgRoot,
+                              child1: props.row.orgChild1,
+                              child2: props.row.orgChild2,
+                              child3: props.row.orgChild3,
+                              child4: props.row.orgChild4,
+                            })
+                          : "-"
+                      }}</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section v-else class="fix_top">
                     <q-item-label class="text-dark text-weight-medium">{{
                       col.value ? col.value : "-"
                     }}</q-item-label>
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 7917069..267ac27 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -23,6 +23,7 @@ const {
   date2Thai,
   onSearchDataTable,
   findOrgName,
+  findOrgNameHtml,
 } = mixin;
 
 const idByRow = ref<string>("");
@@ -724,8 +725,18 @@ onMounted(async () => {
             <div v-else-if="col.name == 'status'">
               {{ props.row.status ? props.row.status : "-" }}
             </div>
-            <div v-else-if="col.name == 'organization'" class="table_ellipsis">
-              {{ col.value ? col.value : "-" }}
+            <div v-else-if="col.name == 'organization'" class="text-html">
+              {{
+                props.row
+                  ? findOrgNameHtml({
+                      root: props.row.orgRoot,
+                      child1: props.row.orgChild1,
+                      child2: props.row.orgChild2,
+                      child3: props.row.orgChild3,
+                      child4: props.row.orgChild4,
+                    })
+                  : "-"
+              }}
             </div>
             <div v-else>
               {{ col.value ? col.value : "-" }}
@@ -768,7 +779,26 @@ onMounted(async () => {
                     col.label
                   }}</q-item-label>
                 </q-item-section>
-                <q-item-section class="fix_top">
+                <q-item-section
+                  v-if="col.name == 'organization'"
+                  class="fix_top text-html"
+                >
+                  <q-item-label class="text-dark text-weight-medium">
+                    {{
+                      props.row
+                        ? findOrgNameHtml({
+                            root: props.row.orgRoot,
+                            child1: props.row.orgChild1,
+                            child2: props.row.orgChild2,
+                            child3: props.row.orgChild3,
+                            child4: props.row.orgChild4,
+                          })
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+
+                <q-item-section v-else class="fix_top">
                   <q-item-label class="text-dark text-weight-medium">{{
                     col.value ? col.value : "-"
                   }}</q-item-label>
diff --git a/src/modules/10_registry/Dialog/DialogHistory.vue b/src/modules/10_registry/Dialog/DialogHistory.vue
index f8a7f12..0b67b99 100644
--- a/src/modules/10_registry/Dialog/DialogHistory.vue
+++ b/src/modules/10_registry/Dialog/DialogHistory.vue
@@ -7,7 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 const type = ref<string>("");
 const mixin = useCounterMixin();
-const { date2Thai, onSearchDataTable } = mixin;
+const { date2Thai, onSearchDataTable, findOrgNameHtml } = mixin;
 const modal = defineModel<boolean>("modal", { required: true });
 const title = defineModel<string>("title", { required: true });
 
@@ -158,6 +158,19 @@ watch(
                 <div v-else-if="col.name == 'status' && type == 'Leave'">
                   {{ props.row.status ? statusLeave(props.row.status) : "-" }}
                 </div>
+                <div v-else-if="col.name == 'organization'">
+                  {{
+                    props.row
+                      ? findOrgNameHtml({
+                          root: props.row.orgRoot,
+                          child1: props.row.orgChild1,
+                          child2: props.row.orgChild2,
+                          child3: props.row.orgChild3,
+                          child4: props.row.orgChild4,
+                        })
+                      : "-"
+                  }}
+                </div>
                 <div v-else>
                   {{ col.value ? col.value : "-" }}
                 </div>
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 7138c98..e232b31 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -1102,7 +1102,6 @@ export const useCounterMixin = defineStore("mixin", () => {
       return "";
     }
   }
-
   function findOrgNameOld(obj: any) {
     if (obj) {
       let name =
@@ -1139,6 +1138,114 @@ export const useCounterMixin = defineStore("mixin", () => {
     }
   }
 
+  function findOrgNameHtml(obj: any) {
+    if (obj) {
+      let name =
+        obj.child4 != null && obj.child3 != null
+          ? obj.child4 + (obj.child3 ? "\n" : "")
+          : obj.child4 != null
+          ? obj.child4
+          : "";
+
+      name +=
+        obj.child3 != null && obj.child2 != null
+          ? obj.child3 + (obj.child2 ? "\n" : "")
+          : obj.child3 !== null
+          ? obj.child3
+          : "";
+
+      name +=
+        obj.child2 != null && obj.child1 != null
+          ? obj.child2 + (obj.child1 ? "\n" : "")
+          : obj.child2 != null
+          ? obj.child2
+          : "";
+
+      name +=
+        obj.child1 != null && obj.root != null
+          ? obj.child1 + (obj.root ? "\n" : "")
+          : obj.child1 != null
+          ? obj.child1
+          : "";
+      name += obj.root != null ? obj.root : "";
+      return name == "" ? "-" : name;
+    } else {
+      return "";
+    }
+  }
+
+  function findOrgNameOldHtml(obj: any) {
+    if (obj) {
+      let name =
+        obj.child4Old != null && obj.child3Old != null
+          ? obj.child4Old + (obj.child3Old ? "\n" : "")
+          : obj.child4Old != null
+          ? obj.child4Old
+          : "";
+
+      name +=
+        obj.child3Old != null && obj.child2Old != null
+          ? obj.child3Old + (obj.child2Old ? "\n" : "")
+          : obj.child3Old !== null
+          ? obj.child3Old
+          : "";
+
+      name +=
+        obj.child2Old != null && obj.child1Old != null
+          ? obj.child2Old + (obj.child1Old ? "\n" : "")
+          : obj.child2Old != null
+          ? obj.child2Old
+          : "";
+
+      name +=
+        obj.child1Old != null && obj.rootOld != null
+          ? obj.child1Old + (obj.rootOld ? "\n" : "")
+          : obj.child1Old != null
+          ? obj.child1Old
+          : "";
+      name += obj.rootOld != null ? obj.rootOld : "";
+      return name == "" ? "-" : name;
+    } else {
+      return "";
+    }
+  }
+
+  function findOrgChildNameHtml(obj: any) {
+    if (obj) {
+      let name =
+        obj.orgChild4Name != null && obj.orgChild3Name != null
+          ? obj.orgChild4Name + (obj.orgChild3Name ? "\n" : "")
+          : obj.orgChild4Name != null
+          ? obj.orgChild4Name
+          : "";
+
+      name +=
+        obj.orgChild3Name != null && obj.orgChild2Name != null
+          ? obj.orgChild3Name + (obj.orgChild2Name ? "\n" : "")
+          : obj.orgChild3Name !== null
+          ? obj.orgChild3Name
+          : "";
+
+      name +=
+        obj.orgChild2Name != null && obj.orgChild1Name != null
+          ? obj.orgChild2Name + (obj.orgChild1Name ? "\n" : "")
+          : obj.orgChild2Name != null
+          ? obj.orgChild2Name
+          : "";
+
+      name +=
+        obj.orgChild1Name != null && obj.orgRootName != null
+          ? obj.orgChild1Name + (obj.orgRootName ? "\n" : "")
+          : obj.orgChild1Name != null
+          ? obj.orgChild1Name
+          : "";
+      name += obj.orgRootName != null ? obj.orgRootName : "";
+      return name == "" ? "-" : name;
+    } else {
+      return "";
+    }
+  }
+
   function onSearchDataTable(keyword: string, data: any[], columns: any[]) {
     const searchText = keyword.trim().toLowerCase();
 
@@ -1229,5 +1336,9 @@ export const useCounterMixin = defineStore("mixin", () => {
     formatDatePosition,
     convertDateToAPI,
     convertDatetimeToAPI,
+
+    findOrgNameHtml,
+    findOrgNameOldHtml,
+    findOrgChildNameHtml,
   };
 });
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index d628cea..3ae97d0 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -49,7 +49,8 @@ $activetab: #4a5568
     background: $activetab !important
 .bg-white-btn
     background: #ffffff20 !important
-
+.text-html
+    white-space: pre-line
 .inputgreen .q-field__prefix,
 .inputgreen .q-field__suffix,
 .inputgreen .q-field__input,

From fd239fbf5bbc5dafad20ba94a7c8a6018e5a2f1e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 27 Mar 2025 11:13:02 +0700
Subject: [PATCH 037/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20columns=20posNumCodeSit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../10_registry/02_Government/07_Position.vue | 17 ++++++++++
 .../10_registry/03_Salary/01_Salary.vue       | 34 +++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index c6080e0..fc84f61 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -88,6 +88,22 @@ const baseColumns = ref<QTableColumn[]>([
         .toString()
         .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "posNumCodeSit",
+    align: "left",
+    label: "หน่วยงานที่ออกคำสั่ง",
+    sortable: false,
+    field: "posNumCodeSit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posNumCodeSitAbb && row.posNumCodeSit
+        ? `${row.posNumCodeSit} (${row.posNumCodeSitAbb})`
+        : row.posNumCodeSit
+        ? row.posNumCodeSit
+        : "-";
+    },
+  },
   {
     name: "posNo",
     align: "left",
@@ -277,6 +293,7 @@ const baseColumns = ref<QTableColumn[]>([
 ]);
 const baseVisibleColumns = ref<string[]>([
   "commandDateAffect",
+  "posNumCodeSit",
   "posNo",
   "positionName",
   "positionType",
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 267ac27..c11c51a 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -72,6 +72,22 @@ const baseColumns = ref<QTableColumn[]>([
         .toString()
         .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "posNumCodeSit",
+    align: "left",
+    label: "หน่วยงานที่ออกคำสั่ง",
+    sortable: false,
+    field: "posNumCodeSit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posNumCodeSitAbb && row.posNumCodeSit
+        ? `${row.posNumCodeSit} (${row.posNumCodeSitAbb})`
+        : row.posNumCodeSit
+        ? row.posNumCodeSit
+        : "-";
+    },
+  },
   {
     name: "posNo",
     align: "left",
@@ -290,6 +306,7 @@ const baseColumns = ref<QTableColumn[]>([
 ]);
 const visibleColumns = ref<string[]>([
   "commandDateAffect",
+  "posNumCodeSit",
   "posNo",
   "positionName",
   "positionType",
@@ -322,6 +339,7 @@ const columns = computed(() => {
 
 const visibleColumnsHistory = ref<string[]>([
   "commandDateAffect",
+  "posNumCodeSit",
   "posNo",
   "positionName",
   "positionType",
@@ -381,6 +399,22 @@ const baseColumnsHistory = ref<QTableColumn[]>([
         .toString()
         .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "posNumCodeSit",
+    align: "left",
+    label: "หน่วยงานที่ออกคำสั่ง",
+    sortable: false,
+    field: "posNumCodeSit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posNumCodeSitAbb && row.posNumCodeSit
+        ? `${row.posNumCodeSit} (${row.posNumCodeSitAbb})`
+        : row.posNumCodeSit
+        ? row.posNumCodeSit
+        : "-";
+    },
+  },
   {
     name: "posNo",
     align: "left",

From c6ef482bb5a12075fa3184b304ad0257aa3c2bc8 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 27 Mar 2025 11:47:20 +0700
Subject: [PATCH 038/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/FormLeave/01_SickForm.vue     | 2 +-
 src/modules/05_leave/components/FormLeave/03_Birth.vue        | 2 +-
 .../05_leave/components/FormLeave/04_HelpWifeBirthForm.vue    | 2 +-
 src/modules/05_leave/components/FormLeave/05_VacationForm.vue | 2 +-
 .../05_leave/components/FormLeave/06_OrdinationForm.vue       | 2 +-
 src/modules/05_leave/components/FormLeave/07_HajjForm.vue     | 2 +-
 src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue | 2 +-
 src/modules/05_leave/components/FormLeave/09_StudyForm.vue    | 2 +-
 src/modules/05_leave/components/FormLeave/10_TrainForm.vue    | 2 +-
 .../components/FormLeave/11_WorkInternationalForm.vue         | 2 +-
 .../05_leave/components/FormLeave/12_FollowSpouseForm.vue     | 2 +-
 .../05_leave/components/FormLeave/13_RehabilitationForm.vue   | 2 +-
 src/modules/05_leave/components/Table.vue                     | 4 ++--
 src/modules/05_leave/components/formDetail/01_SickForm.vue    | 2 +-
 .../05_leave/components/formDetail/04_HelpWifeBirthForm.vue   | 2 +-
 .../05_leave/components/formDetail/05_VacationForm.vue        | 2 +-
 .../05_leave/components/formDetail/06_OrdinationForm.vue      | 2 +-
 src/modules/05_leave/components/formDetail/07_HajjForm.vue    | 2 +-
 .../05_leave/components/formDetail/08_MilitaryForm.vue        | 2 +-
 src/modules/05_leave/components/formDetail/09_StudyForm.vue   | 2 +-
 src/modules/05_leave/components/formDetail/10_TrainForm.vue   | 2 +-
 .../components/formDetail/11_WorkInternationalForm.vue        | 2 +-
 .../05_leave/components/formDetail/12_FollowSpouseForm.vue    | 2 +-
 .../05_leave/components/formDetail/13_RehabilitationForm.vue  | 2 +-
 src/modules/05_leave/store.ts                                 | 2 +-
 25 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 5e9c6a7..7786ab7 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -469,7 +469,7 @@ onMounted(() => {
           ref="leaveDetailRef"
           for="leaveDetailRef"
           v-model="formDataSick.leaveDetail"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
           :readonly="!edit || statusCheck === 'NEW'"
           bg-color="white"
         />
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index 55ce182..fd0a334 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -388,7 +388,7 @@ onMounted(() => {
           ref="leaveDetailRef"
           for="leaveDetailRef"
           v-model="formDataBirth.leaveDetail"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
           :readonly="!edit || statusCheck === 'NEW'"
         />
         <div class="full-width" v-if="statusCheck != 'NEW'">
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index 3688d65..31de76b 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -465,7 +465,7 @@ onMounted(() => {
           ref="leaveDetailRef"
           for="leaveDetailRef"
           v-model="formDataHelpWife.leaveDetail"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
           :readonly="!edit || statusCheck === 'NEW'"
         />
         <div class="full-width" v-if="statusCheck != 'NEW'">
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 5c90cdb..08fae56 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -468,7 +468,7 @@ onMounted(() => {
           ref="leaveDetailRef"
           for="leaveDetailRef"
           v-model="formDataVacation.leaveDetail"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
           :readonly="!edit || statusCheck === 'NEW'"
         />
         <div class="full-width" v-if="statusCheck != 'NEW'">
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 8bca988..5a4d401 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -644,7 +644,7 @@ onMounted(() => {
           ref="leaveDetailRef"
           for="leaveDetailRef"
           v-model="formDataOrdination.leaveDetail"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
           :readonly="!edit || statusCheck === 'NEW'"
         />
         <div class="full-width" v-if="statusCheck != 'NEW'">
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index 540f52a..d25e3ed 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -411,7 +411,7 @@ onMounted(() => {
           dense
           outlined
           type="textarea"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
           :readonly="!edit || statusCheck === 'NEW'"
         />
         <div class="full-width" v-if="statusCheck != 'NEW'">
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index 2f10afc..baac03b 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -466,7 +466,7 @@ onMounted(() => {
           outlined
           v-model="formDataMilitary.leaveDetail"
           type="textarea"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
         />
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 3034ed4..e53954c 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -624,7 +624,7 @@ onMounted(async () => {
           dense
           outlined
           type="textarea"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
         />
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 5f894cc..713f21b 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -595,7 +595,7 @@ onMounted(async () => {
           dense
           outlined
           type="textarea"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
         />
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 558d814..7920aa0 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -362,7 +362,7 @@ onMounted(() => {
           ref="leaveDetailRef"
           for="leaveDetailRef"
           v-model="formDataWorkInternational.leaveDetail"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
           :readonly="!edit || statusCheck === 'NEW'"
         />
         <div class="full-width" v-if="statusCheck != 'NEW'">
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index dbccd95..0138567 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -688,7 +688,7 @@ onMounted(async () => {
           ref="leaveDetailRef"
           for="leaveDetailRef"
           v-model="formDataFollowSpouse.leaveDetail"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
           :readonly="!edit || statusCheck === 'NEW'"
         />
         <div class="full-width" v-if="statusCheck != 'NEW'">
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index d43ed86..d78a51a 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -350,7 +350,7 @@ onMounted(() => {
           dense
           outlined
           type="textarea"
-          label="รายละเอียด"
+          label="สาเหตุการลา"
         />
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index cbf161d..eed96f0 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -52,8 +52,8 @@ const table = ref<any>(null);
  */
 const currentPage = ref<number>(1);
 const pagination = ref({
-  sortBy: "desc",
-  descending: false,
+  sortBy: "dateSendLeave",
+  descending: true,
   page: 1,
   rowsPerPage: Number(props.pageSize),
 });
diff --git a/src/modules/05_leave/components/formDetail/01_SickForm.vue b/src/modules/05_leave/components/formDetail/01_SickForm.vue
index 1c9d53d..7eec67b 100644
--- a/src/modules/05_leave/components/formDetail/01_SickForm.vue
+++ b/src/modules/05_leave/components/formDetail/01_SickForm.vue
@@ -67,7 +67,7 @@ const props = defineProps({
       <div class="col-xs-12 col-md-6">{{ props.data.leaveAddress }}</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 text-grey-8">สาเหตุการลา</div>
       <div class="col-xs-12 col-md-6">
         {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
       </div>
diff --git a/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
index 6c3a70c..cbc3e8e 100644
--- a/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
@@ -56,7 +56,7 @@ const props = defineProps({
       <div class="col-xs-12 col-md-6">{{ props.data.leaveAddress }}</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 text-grey-8">สาเหตุการลา</div>
       <div class="col-xs-12 col-md-6">
         {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
       </div>
diff --git a/src/modules/05_leave/components/formDetail/05_VacationForm.vue b/src/modules/05_leave/components/formDetail/05_VacationForm.vue
index 0f5f6f4..fb0b9be 100644
--- a/src/modules/05_leave/components/formDetail/05_VacationForm.vue
+++ b/src/modules/05_leave/components/formDetail/05_VacationForm.vue
@@ -71,7 +71,7 @@ const props = defineProps({
       <div class="col-xs-12 col-md-6">{{ props.data.leaveAddress }}</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 text-grey-8">สาเหตุการลา</div>
       <div class="col-xs-12 col-md-6">
         {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
       </div>
diff --git a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
index 739007f..9e4e567 100644
--- a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
@@ -72,7 +72,7 @@ const props = defineProps({
       </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 text-grey-8">สาเหตุการลา</div>
       <div class="col-xs-12 col-md-6">
         {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
       </div>
diff --git a/src/modules/05_leave/components/formDetail/07_HajjForm.vue b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
index c6054b3..403c089 100644
--- a/src/modules/05_leave/components/formDetail/07_HajjForm.vue
+++ b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
@@ -51,7 +51,7 @@ const props = defineProps({
       </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 text-grey-8">สาเหตุการลา</div>
       <div class="col-xs-12 col-md-6">
         {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
       </div>
diff --git a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
index 8f57aa2..c3a7d9d 100644
--- a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
@@ -61,7 +61,7 @@ const props = defineProps({
       <div class="col-xs-12 col-md-6">{{ props.data.absentDayAt }}</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 text-grey-8">สาเหตุการลา</div>
       <div class="col-xs-12 col-md-6">
         {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
       </div>
diff --git a/src/modules/05_leave/components/formDetail/09_StudyForm.vue b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
index 1b177a0..2196ae8 100644
--- a/src/modules/05_leave/components/formDetail/09_StudyForm.vue
+++ b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
@@ -85,7 +85,7 @@ const props = defineProps({
       <div class="col-xs-12 col-md-6">{{ props.data.leaveAddress }}</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 text-grey-8">สาเหตุการลา</div>
       <div class="col-xs-12 col-md-6">
         {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
       </div>
diff --git a/src/modules/05_leave/components/formDetail/10_TrainForm.vue b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
index c84bf2f..32cae53 100644
--- a/src/modules/05_leave/components/formDetail/10_TrainForm.vue
+++ b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
@@ -84,7 +84,7 @@ const props = defineProps({
       <div class="col-xs-12 col-md-6">{{ props.data.leaveAddress }}</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 text-grey-8">สาเหตุการลา</div>
       <div class="col-xs-12 col-md-6">
         {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
       </div>
diff --git a/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
index c233168..027c386 100644
--- a/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
@@ -38,7 +38,7 @@ const props = defineProps({
       </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 text-grey-8">รายละสาเหตุการลาเอียด</div>
       <div class="col-xs-12 col-md-6">
         {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
       </div>
diff --git a/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue b/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
index 4b1aedc..d1ff5cb 100644
--- a/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
@@ -119,7 +119,7 @@ const props = defineProps({
       </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 text-grey-8">สาเหตุการลา</div>
       <div class="col-xs-12 col-md-6">
         {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
       </div>
diff --git a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
index 8cd324c..676d062 100644
--- a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
@@ -38,7 +38,7 @@ const props = defineProps({
       </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 text-grey-8">สาเหตุการลา</div>
       <div class="col-xs-12 col-md-6">
         {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
       </div>
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 94bb5e0..8a39d48 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -39,7 +39,7 @@ export const useLeaveStore = defineStore("Leave", () => {
       leaveTypeName: e.leaveTypeName,
       leaveTypeId: e.leaveTypeId,
       fullName: e.fullName,
-      dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
+      dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave,false,true),
       dateLeave:
         date2Thai(e.leaveStartDate) + " - " + date2Thai(e.leaveEndDate),
       status: e.status,

From 17230bee6b6947138a5360f06eda7058031183c4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 27 Mar 2025 16:54:27 +0700
Subject: [PATCH 039/195] cookie sso

---
 src/plugins/auth.ts      |  5 +++--
 src/views/MainLayout.vue | 12 ++++++++++--
 src/views/auth.vue       |  2 +-
 src/views/login.vue      |  2 +-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/plugins/auth.ts b/src/plugins/auth.ts
index eb54de8..0c116a5 100644
--- a/src/plugins/auth.ts
+++ b/src/plugins/auth.ts
@@ -10,8 +10,9 @@ interface AuthResponse {
 
 const authenticated = async () => ((await getToken()) ? true : false);
 
-async function setAuthen(r: AuthResponse) {
+async function setAuthen(r: AuthResponse, val: string) {
   await setCookie(ACCESS_TOKEN, r.access_token, r.expires_in);
+  setCookie("SSO", val, r.expires_in);
   window.location.href = "/";
 }
 
@@ -70,4 +71,4 @@ async function tokenParsed() {
   return JSON.parse(jsonPayload);
 }
 
-export { getToken, authenticated, logout, setAuthen, tokenParsed };
+export { getToken, authenticated, logout, setAuthen, tokenParsed, getCookie };
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 0c0b6c4..56ae845 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -7,7 +7,7 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import CustomComponent from "@/components/CustomDialog.vue";
 import avatar from "@/assets/avatar_user.jpg";
-import { tokenParsed, logout } from "@/plugins/auth";
+import { tokenParsed, logout, getCookie } from "@/plugins/auth";
 
 import { useDataStore } from "@/stores/data";
 
@@ -39,6 +39,7 @@ const notiTrigger = ref(false);
 const currentRouteName = router.currentRoute.value.name;
 const tab = ref<any>(currentRouteName);
 const link = ref<string>("");
+const isSsoToken = ref(false);
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@@ -47,6 +48,8 @@ onMounted(async () => {
   await checkUser();
   await fetchTotolNotificate();
   const user = await tokenParsed();
+  const SSO_TOKEN = await getCookie("SSO");
+  isSsoToken.value = SSO_TOKEN === "y" ? true : false;
   fullname.value = user?.name;
 });
 
@@ -496,7 +499,12 @@ function onViewDetailNoti(url: string) {
             </q-item>
           </template>
           <q-list>
-            <q-item clickable v-close-popup :href="landingPageUrl">
+            <q-item
+              clickable
+              v-close-popup
+              :href="landingPageUrl"
+              v-if="isSsoToken"
+            >
               <q-item-section avatar style="min-width: 30px">
                 <q-avatar
                   color="blue"
diff --git a/src/views/auth.vue b/src/views/auth.vue
index 731577e..e68a009 100644
--- a/src/views/auth.vue
+++ b/src/views/auth.vue
@@ -12,7 +12,7 @@ onMounted(async () => {
       expires_in: route.query.expires ? route.query.expires : 36000,
       refresh_token: route.query.accessToken,
     };
-    setAuthen(params);
+    setAuthen(params, "y");
   }
 });
 </script>
diff --git a/src/views/login.vue b/src/views/login.vue
index 81ea783..30bc98d 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -29,7 +29,7 @@ async function onSubmit() {
       },
     })
     .then(async (res) => {
-      setAuthen(res.data.result);
+      setAuthen(res.data.result,'n');
     })
     .catch((err) => {
       $q.dialog({

From accac04af8483f9c5ffbc8918dcad8f343fd4f13 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 31 Mar 2025 16:36:35 +0700
Subject: [PATCH 040/195] no message

---
 .../components/FormLeave/01_SickForm.vue      |  15 +-
 .../components/FormLeave/03_Birth.vue         |  15 +-
 .../FormLeave/04_HelpWifeBirthForm.vue        |  15 +-
 .../components/FormLeave/05_VacationForm.vue  |  17 +-
 .../FormLeave/06_OrdinationForm.vue           |  11 +-
 .../components/FormLeave/09_StudyForm.vue     |  16 +-
 .../components/FormLeave/10_TrainForm.vue     |  14 +-
 .../05_leave/components/FormLeave/Form.vue    |   9 +-
 src/modules/05_leave/store.ts                 |  15 +-
 src/modules/05_leave/views/EditPage.vue       |   5 +
 .../components/viewstep/viewStep1.vue         |  20 +-
 .../06_evaluate/stores/evaluteDetail.ts       | 247 ++++++++++++++----
 12 files changed, 268 insertions(+), 131 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 7786ab7..188effb 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -48,8 +48,6 @@ const formDataSick = reactive<any>({
   leaveRange: "ALL",
   leaveTotal: "",
   leaveLast: null,
-  leaveNumber: "",
-  leaveAddress: "",
   leaveDetail: "",
   leaveDocument: [],
 });
@@ -132,8 +130,8 @@ function onValidate() {
       convertDateToAPI(formDataSick.leaveEndDate) ?? ""
     );
     formData.append("leaveWrote", formDataSick.leaveWrote);
-    formData.append("leaveAddress", formDataSick.leaveAddress);
-    formData.append("leaveNumber", formDataSick.leaveNumber);
+    formData.append("leaveAddress", dataStore.currentAddress);
+    formData.append("leaveNumber", dataStore.telephoneNumber);
     formData.append("leaveDetail", formDataSick.leaveDetail);
     formData.append("leaveTotal", formDataSick.leaveTotal);
     props.onSubmit(formData, isLeave.value);
@@ -212,11 +210,9 @@ watch(props.data, () => {
     formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataSick.contractTel = props.data.contractTel;
     formDataSick.leaveTotal = props.data.leaveTotal;
-    formDataSick.leaveNumber = props.data.leaveNumber;
     formDataSick.leaveDetail = props.data.leaveDetail;
     formDataSick.leaveRange = props.data.leaveRange;
     leaveDocumentList.value = props.data.leaveDocument;
-    formDataSick.leaveAddress = props.data.leaveAddress;
     statusCheck.value = props.data.status;
     formDataSick.leaveDocument = [];
   }
@@ -230,11 +226,9 @@ onMounted(() => {
     formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataSick.contractTel = props.data.contractTel;
     formDataSick.leaveTotal = props.data.leaveTotal;
-    formDataSick.leaveNumber = props.data.leaveNumber;
     formDataSick.leaveDetail = props.data.leaveDetail;
     formDataSick.leaveRange = props.data.leaveRange;
     leaveDocumentList.value = props.data.leaveDocument;
-    formDataSick.leaveAddress = props.data.leaveAddress;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
   }
@@ -432,10 +426,11 @@ onMounted(() => {
               outlined
               ref="leaveNumberRef"
               for="leaveNumberRef"
-              v-model="formDataSick.leaveNumber"
+              v-model="dataStore.telephoneNumber"
               mask="(###)-###-####"
               hide-bottom-space
               bg-color="white"
+              lazy-rules
               unmasked-value
               label="หมายเลขโทรศัพท์ที่ติดต่อได้"
               :readonly="!edit || statusCheck === 'NEW'"
@@ -450,7 +445,7 @@ onMounted(() => {
               outlined
               ref="leaveAddressRef"
               for="leaveAddressRef"
-              v-model="formDataSick.leaveAddress"
+              v-model="dataStore.currentAddress"
               label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
               :readonly="!edit || statusCheck === 'NEW'"
               :rules="[
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index fd0a334..9f481de 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -46,8 +46,6 @@ const formDataBirth = reactive<any>({
   leaveEndDate: null,
   leaveTotal: "",
   leaveLast: "",
-  leaveNumber: "",
-  leaveAddress: "",
   leaveDetail: "",
   leaveDocument: [],
 });
@@ -113,8 +111,8 @@ function onValidate() {
       convertDateToAPI(formDataBirth.leaveEndDate) ?? ""
     );
     formData.append("leaveWrote", formDataBirth.leaveWrote);
-    formData.append("leaveAddress", formDataBirth.leaveAddress);
-    formData.append("leaveNumber", formDataBirth.leaveNumber);
+    formData.append("leaveAddress", dataStore.currentAddress);
+    formData.append("leaveNumber", dataStore.telephoneNumber);
     formData.append("leaveDetail", formDataBirth.leaveDetail);
     formData.append("leaveTotal", formDataBirth.leaveTotal);
 
@@ -162,8 +160,6 @@ watch(props.data, () => {
     formDataBirth.leaveStartDate = props.data.leaveStartDate;
     formDataBirth.leaveEndDate = props.data.leaveEndDate;
     formDataBirth.leaveTotal = props.data.leaveTotal;
-    formDataBirth.leaveNumber = props.data.leaveNumber;
-    formDataBirth.leaveAddress = props.data.leaveAddress;
     formDataBirth.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -178,8 +174,6 @@ onMounted(() => {
     formDataBirth.leaveStartDate = props.data.leaveStartDate;
     formDataBirth.leaveEndDate = props.data.leaveEndDate;
     formDataBirth.leaveTotal = props.data.leaveTotal;
-    formDataBirth.leaveNumber = props.data.leaveNumber;
-    formDataBirth.leaveAddress = props.data.leaveAddress;
     formDataBirth.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -352,9 +346,10 @@ onMounted(() => {
               bg-color="white"
               ref="leaveNumberRef"
               for="leaveNumberRef"
-              v-model="formDataBirth.leaveNumber"
+              v-model="dataStore.telephoneNumber"
               mask="(###)-###-####"
               unmasked-value
+              lazy-rules
               label="หมายเลขโทรศัพท์ที่ติดต่อได้"
               :readonly="!edit || statusCheck === 'NEW'"
               :rules="[
@@ -370,7 +365,7 @@ onMounted(() => {
               bg-color="white"
               ref="leaveAddressRef"
               for="leaveAddressRef"
-              v-model="formDataBirth.leaveAddress"
+              v-model="dataStore.currentAddress"
               label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
               :readonly="!edit || statusCheck === 'NEW'"
               :rules="[
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index 31de76b..8dca57c 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -48,8 +48,6 @@ const formDataHelpWife = reactive<any>({
   leaveStartDate: null,
   leaveEndDate: null,
   leaveTotal: "",
-  leaveNumber: "",
-  leaveAddress: "",
   leaveDetail: "",
   leaveDocument: [],
 });
@@ -124,8 +122,8 @@ function onValidate() {
       convertDateToAPI(formDataHelpWife.leaveEndDate)??''
     );
     formData.append("leaveWrote", formDataHelpWife.leaveWrote);
-    formData.append("leaveAddress", formDataHelpWife.leaveAddress);
-    formData.append("leaveNumber", formDataHelpWife.leaveNumber);
+    formData.append("leaveAddress", dataStore.currentAddress);
+    formData.append("leaveNumber", dataStore.telephoneNumber);
     formData.append("leaveDetail", formDataHelpWife.leaveDetail);
     formData.append("wifeDayName", formDataHelpWife.wifeDayName);
     formData.append(
@@ -187,8 +185,6 @@ watch(props.data, () => {
     formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
     formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
     formDataHelpWife.leaveTotal = props.data.leaveTotal;
-    formDataHelpWife.leaveNumber = props.data.leaveNumber;
-    formDataHelpWife.leaveAddress = props.data.leaveAddress;
     formDataHelpWife.leaveDetail = props.data.leaveDetail;
     formDataHelpWife.leaveDocument = [];
     leaveDocumentList.value = props.data.leaveDocument;
@@ -205,8 +201,6 @@ onMounted(() => {
     formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
     formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
     formDataHelpWife.leaveTotal = props.data.leaveTotal;
-    formDataHelpWife.leaveNumber = props.data.leaveNumber;
-    formDataHelpWife.leaveAddress = props.data.leaveAddress;
     formDataHelpWife.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -426,10 +420,11 @@ onMounted(() => {
               outlined
               ref="leaveNumberRef"
               for="leaveNumberRef"
-              v-model="formDataHelpWife.leaveNumber"
+              v-model="dataStore.telephoneNumber"
               mask="(###)-###-####"
               unmasked-value
               hide-bottom-space
+              lazy-rules
               bg-color="white"
               label="หมายเลขโทรศัพท์ที่ติดต่อได้"
               :readonly="!edit || statusCheck === 'NEW'"
@@ -446,7 +441,7 @@ onMounted(() => {
               bg-color="white"
               ref="leaveAddressRef"
               for="leaveAddressRef"
-              v-model="formDataHelpWife.leaveAddress"
+              v-model="dataStore.currentAddress"
               label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
               :readonly="!edit || statusCheck === 'NEW'"
               :rules="[
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 08fae56..1844424 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -49,8 +49,6 @@ const formDataVacation = reactive<any>({
   leaveStartDate: null,
   leaveEndDate: null,
   leaveTotal: "",
-  leaveNumber: "",
-  leaveAddress: "",
   leaveDetail: "",
   leaveDocument: [],
 });
@@ -145,8 +143,8 @@ function onValidate() {
       convertDateToAPI(formDataVacation.leaveEndDate)??''
     );
     formData.append("leaveWrote", formDataVacation.leaveWrote);
-    formData.append("leaveAddress", formDataVacation.leaveAddress);
-    formData.append("leaveNumber", formDataVacation.leaveNumber);
+    formData.append("leaveAddress", dataStore.currentAddress);
+    formData.append("leaveNumber", dataStore.telephoneNumber);
     formData.append("leaveDetail", formDataVacation.leaveDetail);
     formData.append("leaveTotal", formDataVacation.leaveTotal);
     props.onSubmit(formData, isLeave.value);
@@ -203,8 +201,7 @@ watch(props.data, () => {
     formDataVacation.leaveStartDate = props.data.leaveStartDate;
     formDataVacation.leaveEndDate = props.data.leaveEndDate;
     formDataVacation.leaveTotal = props.data.leaveTotal;
-    formDataVacation.leaveNumber = props.data.leaveNumber;
-    formDataVacation.leaveAddress = props.data.leaveAddress;
+
     formDataVacation.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -222,8 +219,7 @@ onMounted(() => {
     formDataVacation.leaveStartDate = props.data.leaveStartDate;
     formDataVacation.leaveEndDate = props.data.leaveEndDate;
     formDataVacation.leaveTotal = props.data.leaveTotal;
-    formDataVacation.leaveNumber = props.data.leaveNumber;
-    formDataVacation.leaveAddress = props.data.leaveAddress;
+
     formDataVacation.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -431,8 +427,9 @@ onMounted(() => {
               bg-color="white"
               ref="leaveNumberRef"
               for="leaveNumberRef"
-              v-model="formDataVacation.leaveNumber"
+              v-model="dataStore.telephoneNumber"
               mask="(###)-###-####"
+              lazy-rules
               unmasked-value
               label="หมายเลขโทรศัพท์ที่ติดต่อได้"
               :readonly="!edit || statusCheck === 'NEW'"
@@ -449,7 +446,7 @@ onMounted(() => {
               bg-color="white"
               ref="leaveAddressRef"
               for="leaveAddressRef"
-              v-model="formDataVacation.leaveAddress"
+              v-model="dataStore.currentAddress"
               label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
               :readonly="!edit || statusCheck === 'NEW'"
               :rules="[
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 5a4d401..0111e95 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -138,7 +138,7 @@ function onValidate() {
     );
     formData.append(
       "ordainDayLocationNumber",
-      formDataOrdination.ordainDayLocationNumber
+      dataStore.telephoneNumber
     );
     formData.append(
       "ordainDayLocationAddress",
@@ -214,8 +214,7 @@ watch(props.data, () => {
     formDataOrdination.leaveTotal = props.data.leaveTotal;
     formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
     formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
-    formDataOrdination.ordainDayLocationNumber =
-      props.data.ordainDayLocationNumber;
+
     formDataOrdination.ordainDayLocationAddress =
       props.data.ordainDayLocationAddress;
     formDataOrdination.ordainDayBuddhistLentName =
@@ -239,8 +238,7 @@ onMounted(() => {
     formDataOrdination.leaveTotal = props.data.leaveTotal;
     formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
     formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
-    formDataOrdination.ordainDayLocationNumber =
-      props.data.ordainDayLocationNumber;
+
     formDataOrdination.ordainDayLocationAddress =
       props.data.ordainDayLocationAddress;
     formDataOrdination.ordainDayBuddhistLentName =
@@ -583,9 +581,10 @@ onMounted(() => {
           dense
           full-width
           outlined
-          v-model="formDataOrdination.ordainDayLocationNumber"
+          v-model="dataStore.telephoneNumber"
           bg-color="white"
           mask="(###)-###-####"
+          lazy-rules
           unmasked-value
           :readonly="!edit || statusCheck === 'NEW'"
           hide-bottom-space
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index e53954c..2fa2a10 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -68,8 +68,6 @@ const formDataStudy = reactive<any>({
   leavegovernmentDate: new Date(),
   leaveSalary: 10000,
   leaveSalaryText: arabicNumberToText(10000),
-  leaveNumber: "",
-  leaveAddress: "",
   studyDayScholarship: "",
   studyDayCountry: "",
   studyDayUniversityName: "", //
@@ -155,8 +153,8 @@ function onValidate() {
     formData.append("leaveWrote", formDataStudy.leaveWrote); //
     formData.append("leaveDetail", formDataStudy.leaveDetail); //
     formData.append("studyDayScholarship", formDataStudy.studyDayScholarship);
-    formData.append("leaveAddress", formDataStudy.leaveAddress); //
-    formData.append("leaveNumber", formDataStudy.leaveNumber); //
+    formData.append("leaveAddress", dataStore.currentAddress); //
+    formData.append("leaveNumber", dataStore.telephoneNumber); //
     formData.append("leaveTotal", formDataStudy.leaveTotalDay); //
     props.onSubmit(formData, isLeave.value);
   }
@@ -206,8 +204,7 @@ watch(props.data, async () => {
     formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate;
     formDataStudy.leaveSalary = props.data.leaveSalary;
     formDataStudy.leaveSalaryText = props.data.leaveSalaryText;
-    formDataStudy.leaveNumber = props.data.leaveNumber;
-    formDataStudy.leaveAddress = props.data.leaveAddress;
+
     formDataStudy.studyDayScholarship = props.data.studyDayScholarship;
     formDataStudy.studyDayCountry = props.data.studyDayCountry;
     formDataStudy.studyDayUniversityName = props.data.studyDayUniversityName;
@@ -236,8 +233,7 @@ onMounted(async () => {
     formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate;
     formDataStudy.leaveSalary = props.data.leaveSalary;
     formDataStudy.leaveSalaryText = props.data.leaveSalaryText;
-    formDataStudy.leaveNumber = props.data.leaveNumber;
-    formDataStudy.leaveAddress = props.data.leaveAddress;
+
     formDataStudy.studyDayScholarship = props.data.studyDayScholarship;
     formDataStudy.studyDayCountry = props.data.studyDayCountry;
     formDataStudy.studyDayUniversityName = props.data.studyDayUniversityName;
@@ -583,7 +579,7 @@ onMounted(async () => {
             />
 
             <q-input
-              v-model="formDataStudy.leaveNumber"
+              v-model="dataStore.telephoneNumber"
               ref="leaveNumberRef"
               class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
               bg-color="white"
@@ -600,7 +596,7 @@ onMounted(async () => {
             />
 
             <q-input
-              v-model="formDataStudy.leaveAddress"
+              v-model="dataStore.currentAddress"
               ref="leaveAddressRef"
               class="col-12 cursor-pointer inputgreen"
               bg-color="white"
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 713f21b..ce97d07 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -55,8 +55,6 @@ const formDataTrain = reactive<any>({
   leavegovernmentDate: new Date(),
   leaveSalary: 10000,
   leaveSalaryText: arabicNumberToText(10000),
-  leaveNumber: "",
-  leaveAddress: "",
   studyDayScholarship: "",
   studyDayCountry: "",
   studyDayTrainingSubject: "",
@@ -140,8 +138,8 @@ function onValidate() {
     formData.append("leaveWrote", formDataTrain.leaveWrote); //
     formData.append("leaveDetail", formDataTrain.leaveDetail); //
     formData.append("studyDayScholarship", formDataTrain.studyDayScholarship);
-    formData.append("leaveAddress", formDataTrain.leaveAddress); //
-    formData.append("leaveNumber", formDataTrain.leaveNumber); //
+    formData.append("leaveAddress", dataStore.currentAddress); //
+    formData.append("leaveNumber", dataStore.telephoneNumber); //
     formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
     formData.append("leaveSalary", formDataTrain.leaveSalary); //
     formData.append("leaveTotal", formDataTrain.leaveTotalDay); //
@@ -193,8 +191,6 @@ watch(props.data, async () => {
     formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
     formDataTrain.leaveSalary = props.data.leaveSalary;
     formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
-    formDataTrain.leaveNumber = props.data.leaveNumber;
-    formDataTrain.leaveAddress = props.data.leaveAddress;
     formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
     formDataTrain.studyDayCountry = props.data.studyDayCountry;
     formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
@@ -222,8 +218,6 @@ onMounted(async () => {
     formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
     formDataTrain.leaveSalary = props.data.leaveSalary;
     formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
-    formDataTrain.leaveNumber = props.data.leaveNumber;
-    formDataTrain.leaveAddress = props.data.leaveAddress;
     formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
     formDataTrain.studyDayCountry = props.data.studyDayCountry;
     formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
@@ -554,7 +548,7 @@ onMounted(async () => {
             />
 
             <q-input
-              v-model="formDataTrain.leaveNumber"
+              v-model="dataStore.telephoneNumber"
               class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
               ref="leaveNumberRef"
               dense
@@ -571,7 +565,7 @@ onMounted(async () => {
             />
 
             <q-input
-              v-model="formDataTrain.leaveAddress"
+              v-model="dataStore.currentAddress"
               ref="leaveAddressRef"
               class="col-12 cursor-pointer inputgreen"
               bg-color="white"
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index d132f19..67b5042 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -88,7 +88,7 @@ onMounted(() => {
         label="เรียน"
       />
       <q-input
-        class="col-12 col-sm-3"
+        class="col-12 col-sm-4"
         dense
         outlined
         readonly
@@ -97,7 +97,7 @@ onMounted(() => {
         label="ชื่อผู้ยื่นขอ"
       />
       <q-input
-        class="col-12 col-sm-3"
+        class="col-12 col-sm-4"
         dense
         outlined
         readonly
@@ -106,7 +106,7 @@ onMounted(() => {
         label="ตำแหน่งผู้ยื่นขอ"
       />
       <q-input
-        class="col-12 col-sm-3"
+        class="col-12 col-sm-4"
         dense
         outlined
         readonly
@@ -115,10 +115,11 @@ onMounted(() => {
         label="ระดับผู้ยื่นขอ"
       />
       <q-input
-        class="col-12 col-sm-3"
+        class="col-12 text-html"
         dense
         outlined
         readonly
+        type="textarea"
         bg-color="white"
         v-model="dataStore.organizationName"
         label="สังกัดผู้ยื่นขอ"
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 8a39d48..393ac0e 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -39,7 +39,7 @@ export const useLeaveStore = defineStore("Leave", () => {
       leaveTypeName: e.leaveTypeName,
       leaveTypeId: e.leaveTypeId,
       fullName: e.fullName,
-      dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave,false,true),
+      dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave, false, true),
       dateLeave:
         date2Thai(e.leaveStartDate) + " - " + date2Thai(e.leaveEndDate),
       status: e.status,
@@ -281,6 +281,9 @@ export const useLeaveStore = defineStore("Leave", () => {
   const leaveLast = ref<any>();
   const restDayCurrentTotal = ref<number>(0);
 
+  const telephoneNumber = ref<string>("");
+  const currentAddress = ref<string>("");
+
   //ดึงข้อมูล profile จาก API
   async function fetchProfile() {
     showLoader();
@@ -301,6 +304,14 @@ export const useLeaveStore = defineStore("Leave", () => {
         restDayTotalOld.value = data.restDayTotalOld;
         birthDate.value = data.birthDate;
         dateAppoint.value = data.dateAppoint;
+
+        telephoneNumber.value =
+          data.telephoneNumber && data.telephoneNumber !== "-"
+            ? data.telephoneNumber
+            : null;
+        currentAddress.value = data.currentSubDistrict
+          ? `${data.currentAddress} ${data.currentSubDistrict} ${data.currentDistrict} ${data.currentProvince} ${data.currentZipCode}`
+          : "";
         salary.value = data.salary ? data.salary.toLocaleString("th-TH") : "";
         salaryText.value = data.salaryText;
         leaveLast.value =
@@ -419,5 +430,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     typeOptionsMain,
     status,
     statusOptionsMain,
+    telephoneNumber,
+    currentAddress,
   };
 });
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 1e76977..d2648c3 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -208,6 +208,11 @@ async function fetchDataDetail(id: string) {
       formData.dear = data.dear ?? "-";
       formData.leaveLast = data.leaveLast ?? "-";
       formData.leaveRange = data.leaveRange;
+
+      dataStore.telephoneNumber =
+        data.leaveNumber && data.leaveNumber !== "-" ? data.leaveNumber : null;
+      dataStore.currentAddress = data.leaveAddress ? data.leaveAddress : "";
+
       await dataStore.fetchProfileOld(data);
     })
     .catch((err) => {
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 99cebc2..1867f87 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -22,7 +22,8 @@ const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
 const $q = useQuasar();
 const route = useRoute();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, findOrgNameHtml } =
+  mixin;
 const {
   columnsCertificates,
   columnSalaries,
@@ -183,8 +184,6 @@ async function fetchCheckSpec(data: any) {
     position: e.position,
     positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
     refCommandDate: e.refCommandDate ? e.refCommandDate : "",
-
-    refCommandNo: e.refCommandNo ? e.refCommandNo : "",
     salaryClass: e.salaryClass ? e.salaryClass : "",
     salaryRef: e.salaryRef ? e.salaryRef : "",
     salaryStatus: e.salaryStatus ? e.salariesStatus : "",
@@ -548,7 +547,20 @@ onMounted(async () => {
                   :key="col.id"
                   class="vertical-top"
                 >
-                  <div class="table_ellipsis">
+                  <div v-if="col.name == 'organization'" class="text-html">
+                    {{
+                      props.row
+                        ? findOrgNameHtml({
+                            root: props.row.orgRoot,
+                            child1: props.row.orgChild1,
+                            child2: props.row.orgChild2,
+                            child3: props.row.orgChild3,
+                            child4: props.row.orgChild4,
+                          })
+                        : "-"
+                    }}
+                  </div>
+                  <div v-else class="table_ellipsis">
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
diff --git a/src/modules/06_evaluate/stores/evaluteDetail.ts b/src/modules/06_evaluate/stores/evaluteDetail.ts
index 86d83b1..fa815fa 100644
--- a/src/modules/06_evaluate/stores/evaluteDetail.ts
+++ b/src/modules/06_evaluate/stores/evaluteDetail.ts
@@ -7,7 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
 export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   /** columns TableViewStep1*/
   const mixin = useCounterMixin();
-  const { date2Thai } = mixin;
+  const { date2Thai, findOrgNameHtml } = mixin;
 
   const columnsCertificates = ref<QTableProps["columns"]>([
     {
@@ -59,14 +59,163 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
 
   const columnSalaries = ref<QTableProps["columns"]>([
     {
-      name: "date",
+      name: "commandDateAffect",
       align: "left",
-      label: "วัน เดือน ปี",
+      label: "วันที่คำสั่งมีผล",
       sortable: true,
-      field: "date",
+      field: "commandDateAffect",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
       format: (v) => date2Thai(v),
+      sort: (a: string, b: string) =>
+        a
+          .toString()
+          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "commandDateSign",
+      align: "left",
+      label: "วันที่ลงนาม",
+      sortable: true,
+      field: "commandDateSign",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      format: (v) => date2Thai(v),
+      sort: (a: string, b: string) =>
+        a
+          .toString()
+          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "posNumCodeSit",
+      align: "left",
+      label: "หน่วยงานที่ออกคำสั่ง",
+      sortable: false,
+      field: "posNumCodeSit",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      format(val, row) {
+        return row.posNumCodeSitAbb && row.posNumCodeSit
+          ? `${row.posNumCodeSit} (${row.posNumCodeSitAbb})`
+          : row.posNumCodeSit
+          ? row.posNumCodeSit
+          : "-";
+      },
+    },
+    {
+      name: "posNo",
+      align: "left",
+      label: "เลขที่ตำแหน่ง",
+      sortable: true,
+      field: "posNo",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      format(val, row) {
+        return row.posNoAbb && row.posNo
+          ? `${row.posNoAbb}${row.posNo}`
+          : row.posNo
+          ? row.posNo
+          : "-";
+      },
+      sort: (a: string, b: string) =>
+        a
+          .toString()
+          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "positionName",
+      align: "left",
+      label: "ตำแหน่งในสายงาน",
+      sortable: true,
+      field: "positionName",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a
+          .toString()
+          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "positionType",
+      align: "left",
+      label: "ตำแหน่งประเภท",
+      sortable: true,
+      field: "positionType",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a
+          .toString()
+          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "positionLevel",
+      align: "left",
+      label: "ระดับ",
+      sortable: true,
+      field: "positionLevel",
+      format(val, row) {
+        return `${
+          row.positionLevel
+            ? row.positionLevel
+            : row.positionCee
+            ? row.positionCee
+            : "-"
+        }`;
+      },
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "positionExecutive",
+      align: "left",
+      label: "ตำแหน่งทางการบริหาร",
+      sortable: true,
+      field: "positionExecutive",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "commandNo",
+      align: "left",
+      label: "เลขที่คำสั่ง",
+      sortable: true,
+      field: "commandNo",
+      format(val, row) {
+        return row.commandNo && row.commandYear
+          ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+          : "";
+      },
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "commandCode",
+      align: "left",
+      label: "ประเภทคำสั่ง",
+      sortable: true,
+      field: "commandCode",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "organization",
+      align: "left",
+      label: "สังกัด",
+      sortable: true,
+      field: "organization",
+      headerStyle: "font-size: 14px;min-width:280px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "amount",
@@ -76,17 +225,19 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       field: "amount",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      format: (v) => Number(v).toLocaleString(),
-    },
-    {
-      name: "positionSalaryAmount",
-      align: "left",
-      label: "เงินประจำตำแหน่ง",
-      sortable: true,
-      field: "positionSalaryAmount",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      format: (v) => Number(v).toLocaleString(),
+      format(v, row) {
+        return row.amount
+          ? `${row.amount.toLocaleString()}${
+              row.amountSpecial !== 0 && row.amountSpecial
+                ? ` (${row.amountSpecial.toLocaleString()})`
+                : ""
+            }`
+          : "-";
+      },
+      sort: (a: string, b: string) =>
+        a
+          .toString()
+          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "mouthSalaryAmount",
@@ -97,54 +248,38 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
       format: (v) => Number(v).toLocaleString(),
+      sort: (a: string, b: string) =>
+        a
+          .toString()
+          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "positionSalaryAmount",
+      align: "left",
+      label: "เงินประจำตำแหน่ง",
+      sortable: true,
+      field: "positionSalaryAmount",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      format: (v) => Number(v).toLocaleString(),
+      sort: (a: string, b: string) =>
+        a
+          .toString()
+          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
 
     {
-      name: "posNo",
+      name: "remark",
       align: "left",
-      label: "เลขที่ตำแหน่ง",
+      label: "หมายเหตุ",
       sortable: true,
-      field: "posNo",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-
-    {
-      name: "positionType",
-      align: "left",
-      label: "ตำแหน่งประเภท",
-      sortable: true,
-      field: "positionType",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "positionLevel",
-      align: "left",
-      label: "ระดับ",
-      sortable: true,
-      field: "positionLevel",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-
-    {
-      name: "templateDoc",
-      align: "left",
-      label: "เอกสารอ้างอิง",
-      sortable: true,
-      field: "templateDoc",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "refCommandNo",
-      align: "left",
-      label: "เลขที่คำสั่ง",
-      sortable: true,
-      field: "refCommandNo",
+      field: "remark",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a
+          .toString()
+          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
   ]);
 

From 6a72b00ae318da7f80a98fdf737d24c549a39b23 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 1 Apr 2025 10:13:19 +0700
Subject: [PATCH 041/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20layout=20?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B1=E0=B8=87=E0=B8=81=E0=B8=B1=E0=B8=94=E0=B8=9C?=
 =?UTF-8?q?=E0=B8=B9=E0=B9=89=E0=B8=A2=E0=B8=B7=E0=B9=88=E0=B8=99=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/FormLeave/Form.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index 67b5042..0b73d8e 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -119,7 +119,6 @@ onMounted(() => {
         dense
         outlined
         readonly
-        type="textarea"
         bg-color="white"
         v-model="dataStore.organizationName"
         label="สังกัดผู้ยื่นขอ"

From 27fb61604fdfa84c878998fae0b25eb8c74af63e Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 1 Apr 2025 13:42:35 +0700
Subject: [PATCH 042/195] no message

---
 .../06_evaluate/components/ExpertPageDetail.vue    | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/modules/06_evaluate/components/ExpertPageDetail.vue b/src/modules/06_evaluate/components/ExpertPageDetail.vue
index 79f0a33..9313bb0 100644
--- a/src/modules/06_evaluate/components/ExpertPageDetail.vue
+++ b/src/modules/06_evaluate/components/ExpertPageDetail.vue
@@ -233,19 +233,9 @@ async function onClickDowloadFile(
     { positionLevel: profile.value == null ? "" : profile.value.positionLevel },
     { posNo: profile.value == null ? "" : profile.value.posNo },
     { oc: profile.value == null ? "" : profile.value.oc },
-    {
-      birthDate:
-        profile.value == null ? "" : date2Thai(profile.value.birthDate),
-    },
+    { birthDate: profile.value == null ? "" : date2Thai(profile.value.birthDate), },
     { govAge: profile.value == null ? "" : profile.value.govAge },
-    {
-      positionLevelNew:
-        profile.value == null
-          ? ""
-          : profile.value.type == "EXPERT"
-          ? "ชำนาญการ"
-          : "ชำนาญการพิเศษ",
-    },
+    { positionLevelNew: profile.value == null ? "" : profile.value.type == "EXPERT" ? "ชำนาญการ" : "ชำนาญการพิเศษ", },
     tp === "EV1_005" || tp === "EV1_007" ? { organizationName: "-" } : null,
     tp === "EV1_007" ? { positionName: "-" } : null,
     tp === "EV1_007" ? { positionLeaveName: "-" } : null

From c45d3f8e6e3c410087068bff5d1f093c98bfeb6f Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 1 Apr 2025 16:34:24 +0700
Subject: [PATCH 043/195] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=8A=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=A7=E0=B8=8A=E0=B8=B2=E0=B8=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/org/api.org.ts                        |   3 +
 src/interface/Main.ts                         |   3 +
 .../components/ExpertPageDetail.vue           | 143 +++++++++++++++---
 src/stores/data.ts                            |   8 +-
 4 files changed, 135 insertions(+), 22 deletions(-)

diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index ba33d4b..8ad1a24 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -61,6 +61,9 @@ export default {
   dataUserCertificateByType: (emType: string, type: string) =>
     `${org}/profile${emType}/${type}/user`,
 
+  dataUserEvaByType: (type: string) =>
+    `${org}/profile/${type}/user`,
+
   dataUserOther: `${profileOrg}/other/user`,
   dataUserOtherByType: (type: string) => `${org}/profile${type}/other/user`,
 
diff --git a/src/interface/Main.ts b/src/interface/Main.ts
index a24e4a0..61e21db 100644
--- a/src/interface/Main.ts
+++ b/src/interface/Main.ts
@@ -12,6 +12,9 @@ interface ProfileData {
   citizenId?: string;
   salary?: number|null;
   birthDate?: string;
+  org?: string;
+  dateStart?: string;
+  dateRetireLaw?: string;
 }
 
 interface InformationData {
diff --git a/src/modules/06_evaluate/components/ExpertPageDetail.vue b/src/modules/06_evaluate/components/ExpertPageDetail.vue
index 9313bb0..1469831 100644
--- a/src/modules/06_evaluate/components/ExpertPageDetail.vue
+++ b/src/modules/06_evaluate/components/ExpertPageDetail.vue
@@ -8,6 +8,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 
 import type {
   FormRef,
@@ -17,6 +18,7 @@ import type {
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const dataPerson = useDataStore();
 const {
   dialogConfirm,
   messageError,
@@ -24,12 +26,13 @@ const {
   hideLoader,
   date2Thai,
   success,
+  findOrgName,
 } = mixin;
 const router = useRouter();
 const route = useRoute();
-
+const currentYear = new Date().getFullYear();
 const evaluateId = ref<string>(route.params.id as string);
-const profile = ref<any>();
+let profile = ref<any>();
 
 /** form ผู้เซ็นเอกสาร*/
 const formCommand = reactive<FormCommand>({
@@ -228,17 +231,81 @@ async function onClickDowloadFile(
     { certificates: certificates },
     { salaries: salaries },
     { trainings: trainings },
-    { fullName: profile.value == null ? "" : profile.value.fullName },
-    { position: profile.value == null ? "" : profile.value.position },
-    { positionLevel: profile.value == null ? "" : profile.value.positionLevel },
-    { posNo: profile.value == null ? "" : profile.value.posNo },
-    { oc: profile.value == null ? "" : profile.value.oc },
-    { birthDate: profile.value == null ? "" : date2Thai(profile.value.birthDate), },
-    { govAge: profile.value == null ? "" : profile.value.govAge },
-    { positionLevelNew: profile.value == null ? "" : profile.value.type == "EXPERT" ? "ชำนาญการ" : "ชำนาญการพิเศษ", },
-    tp === "EV1_005" || tp === "EV1_007" ? { organizationName: "-" } : null,
+    {
+      fullName: dataPerson.formData.firstName
+        ? `${dataPerson.formData.prefix}${dataPerson.formData.firstName} ${dataPerson.formData.lastName}`
+        : "",
+    },
+    {
+      position: dataPerson.formData.position
+        ? dataPerson.formData.position
+        : "",
+    },
+    {
+      positionLevel: dataPerson.formData.posLevelName
+        ? dataPerson.formData.posLevelName
+        : "",
+    },
+    { posNo: dataPerson.formData.posNo ? dataPerson.formData.posNo : "" },
+    { org: dataPerson.formData ? dataPerson.formData.org : "" },
+    {
+      birthDate: dataPerson.formData.birthDate
+        ? date2Thai(new Date(dataPerson.formData.birthDate))
+        : "",
+    },
+    {
+      govAge: profile.value.government
+        ? `${
+            profile.value.government.govAge.day !== 0
+              ? `${profile.value.government.govAge.day} วัน`
+              : ""
+          } ${
+            profile.value.government.govAge.month !== 0
+              ? `${profile.value.government.govAge.month} เดือน`
+              : ""
+          } ${
+            profile.value.government.govAge.year !== 0
+              ? `${profile.value.government.govAge.year} ปี`
+              : ""
+          }`
+        : ``,
+    },
+    {
+      positionLevelNew:
+        profile.value == null
+          ? ""
+          : profile.value.type == "EXPERT"
+          ? "ชำนาญการ"
+          : "ชำนาญการพิเศษ",
+    },
+
+    tp === "EV1_005"
+      ? { salary: dataPerson.formData.salary ? dataPerson.formData.salary : "" }
+      : null,
+
+    tp === "EV1_006" ? { lastTwoYear: (currentYear - 2).toString() } : null,
+    tp === "EV1_006" ? { lastOneYear: (currentYear - 1).toString() } : null,
+    tp === "EV1_006" ? { currentYear: currentYear.toString() } : null,
+    tp === "EV1_006" ? { commanderFullname: formData.commanderFullname } : null,
+    tp === "EV1_006" ? { commanderPosition: formData.commanderPosition } : null,
+    tp === "EV1_006" ? { commanderOrg: "" } : null,
+    tp === "EV1_006"
+      ? { commanderAboveFullname: formData.commanderAboveFullname }
+      : null,
+    tp === "EV1_006"
+      ? { commanderAbovePosition: formData.commanderAbovePosition }
+      : null,
+    tp === "EV1_006" ? { commanderAboveOrg: "" } : null,
+
     tp === "EV1_007" ? { positionName: "-" } : null,
-    tp === "EV1_007" ? { positionLeaveName: "-" } : null
+    tp === "EV1_007" ? { positionLeaveName: "-" } : null,
+
+    tp === "EV1_009" ? { dateStart: dataPerson.formData.dateStart } : null,
+    tp === "EV1_009"
+      ? { dateRetireLaw: dataPerson.formData.dateRetireLaw }
+      : null,
+
+    tp === "EV1_010" ? { subject: formData.subject } : null
   );
   const body = {
     template: tp,
@@ -339,16 +406,49 @@ function getData() {
     });
 }
 
+function getDetail(type: any) {
+  http.get(config.API.dataUserEvaByType(type)).then((res) => {
+    profile.value = {
+      ...profile.value, // รักษาข้อมูลเดิมที่เก็บไว้ก่อนหน้านี้
+      [type === "salary"
+        ? "salaries"
+        : type === "certificate"
+        ? "certificates"
+        : type === "training"
+        ? "trainings"
+        : type]: res.data.result, // เก็บข้อมูลตามประเภท (type)
+    };
+  });
+}
+
+const keyObject = ref<string[]>([
+  "educations",
+  "certificate",
+  "salary",
+  "training",
+  "assessments",
+  "government",
+]);
 onMounted(() => {
-  getData();
-  downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล");
-  downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน");
-  downloadFile(
-    "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
-  );
-  downloadFile("4-แบบประเมินคุณลักษณะบุคคล");
-  downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)");
-  downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)");
+  showLoader();
+  Promise.all([getData(), ...keyObject.value.map(getDetail)])
+    .then(() => {})
+    .catch((e) => {
+      hideLoader();
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+
+  [
+    "1-แบบพิจารณาคุณสมบัติบุคคล",
+    "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+    "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
+    "4-แบบประเมินคุณลักษณะบุคคล",
+    "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+    "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+  ].forEach((fileName) => downloadFile(fileName));
 });
 </script>
 
@@ -381,6 +481,7 @@ onMounted(() => {
                     class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
                   >
                     ผลงาน
+                    <br />
                   </div>
                   <div class="col-12"><q-separator /></div>
                   <div class="col-12 q-pa-sm">
diff --git a/src/stores/data.ts b/src/stores/data.ts
index 3752548..2000d80 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -13,7 +13,7 @@ export const useDataStore = defineStore("dataMain", () => {
   const storeRegistry = useRegistryInFormationStore();
   const $q = useQuasar();
   const mixin = useCounterMixin();
-  const { messageError, showLoader, hideLoader, findPosMasterNo } = mixin;
+  const { messageError, showLoader, hideLoader, findPosMasterNo,findOrgName } = mixin;
   // ref() คือการประกาศ state เหมือน vuex
   const formData = reactive<ProfileData>({
     profileId: "",
@@ -28,6 +28,9 @@ export const useDataStore = defineStore("dataMain", () => {
     salary: null,
     birthDate: '',
     posNo: "",
+    org: "",
+    dateStart: "",
+    dateRetireLaw: "",
   });
   const count = ref<number>(0);
   const loader = ref<boolean>(false);
@@ -110,7 +113,10 @@ export const useDataStore = defineStore("dataMain", () => {
     formData.posTypeName = data.posTypeName;
     formData.posExecutiveName = data.posExecutiveName;
     formData.posLevelName = data.posLevelName;
+    formData.dateStart = data.dateStart;
+    formData.dateRetireLaw = data.dateRetireLaw;
     formData.posNo = findPosMasterNo(data);
+    formData.org = findOrgName(data);
     storeRegistry.profileId = data.profileId;
     storeRegistry.citizenId = data.citizenId;
   }

From 9371dd15fcfae1eef45d59d436e099b3e276f322 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 2 Apr 2025 14:28:26 +0700
Subject: [PATCH 044/195] =?UTF-8?q?fix=20=E0=B8=97=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../10_registry/02_Government/07_Position.vue        |  6 +++---
 src/modules/10_registry/03_Salary/01_Salary.vue      | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index fc84f61..6f076ee 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -198,11 +198,11 @@ const baseColumns = ref<QTableColumn[]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "commandCode",
+    name: "commandName",
     align: "left",
     label: "ประเภทคำสั่ง",
     sortable: true,
-    field: "commandCode",
+    field: "commandName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -301,7 +301,7 @@ const baseVisibleColumns = ref<string[]>([
   "positionExecutive",
   "amount",
   "commandNo",
-  "commandCode",
+  "commandName",
   "commandDateSign",
   "organization",
   "remark",
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index c11c51a..25bb95f 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -182,11 +182,11 @@ const baseColumns = ref<QTableColumn[]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "commandCode",
+    name: "commandName",
     align: "left",
     label: "ประเภทคำสั่ง",
     sortable: true,
-    field: "commandCode",
+    field: "commandName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -316,7 +316,7 @@ const visibleColumns = ref<string[]>([
   "positionSalaryAmount",
   "mouthSalaryAmount",
   "commandNo",
-  "commandCode",
+  "commandName",
   "commandDateSign",
   "organization",
   "remark",
@@ -349,7 +349,7 @@ const visibleColumnsHistory = ref<string[]>([
   "positionSalaryAmount",
   "mouthSalaryAmount",
   "commandNo",
-  "commandCode",
+  "commandName",
   "commandDateSign",
   "organization",
   "remark",
@@ -509,11 +509,11 @@ const baseColumnsHistory = ref<QTableColumn[]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "commandCode",
+    name: "commandName",
     align: "left",
     label: "ประเภทคำสั่ง",
     sortable: true,
-    field: "commandCode",
+    field: "commandName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>

From 86b2aaf2e2edf2ec1264c7f36f287f1b4684bdbb Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 3 Apr 2025 10:55:55 +0700
Subject: [PATCH 045/195] =?UTF-8?q?fix=20Columns=20=E0=B8=8A=E0=B9=88?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A7=E0=B8=A2=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_Government/06_Assistance.vue           | 74 ++++++++++++++++++-
 1 file changed, 70 insertions(+), 4 deletions(-)

diff --git a/src/modules/10_registry/02_Government/06_Assistance.vue b/src/modules/10_registry/02_Government/06_Assistance.vue
index a87f459..b9526ce 100644
--- a/src/modules/10_registry/02_Government/06_Assistance.vue
+++ b/src/modules/10_registry/02_Government/06_Assistance.vue
@@ -29,22 +29,38 @@ const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
 
 const visibleColumns = ref<string[]>([
+  "commandName",
   "agency",
   "dateStart",
   "dateEnd",
   "commandNo",
   "document",
+  "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "commandName",
+    align: "left",
+    label: "ประเภทคำสั่ง",
+    sortable: true,
+    field: "commandName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
   {
     name: "agency",
     align: "left",
-    label: "หน่วยงานที่ให้ช่วยราชการ",
+    label: "หน่วยงานที่ให้ช่วยราชการ/ส่งตัวกลับ",
     sortable: true,
     field: "agency",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateStart",
@@ -55,6 +71,8 @@ const columns = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateEnd",
@@ -65,6 +83,8 @@ const columns = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "commandNo",
@@ -74,6 +94,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "commandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "document",
@@ -83,6 +105,19 @@ const columns = ref<QTableProps["columns"]>([
     field: "document",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdatedAt",
@@ -102,6 +137,7 @@ const pagination = ref({
 });
 
 const visibleColumnsHistory = ref<string[]>([
+  "commandName",
   "agency",
   "dateStart",
   "dateEnd",
@@ -111,14 +147,28 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdatedAt",
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "commandName",
+    align: "left",
+    label: "ประเภทคำสั่ง",
+    sortable: true,
+    field: "commandName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
   {
     name: "agency",
     align: "left",
-    label: "หน่วยงานที่ให้ช่วยราชการ",
+    label: "หน่วยงานที่ให้ช่วยราชการ/ส่งตัวกลับ",
     sortable: true,
     field: "agency",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateStart",
@@ -129,6 +179,8 @@ const columnsHistory = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateEnd",
@@ -139,6 +191,8 @@ const columnsHistory = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "commandNo",
@@ -148,6 +202,8 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "commandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "document",
@@ -157,6 +213,8 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "document",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdateFullName",
@@ -166,6 +224,8 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdatedAt",
@@ -173,9 +233,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -316,6 +378,7 @@ onMounted(async () => {
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
           <q-th auto-width />
+          <q-th auto-width />
         </q-tr>
       </template>
 
@@ -331,17 +394,20 @@ onMounted(async () => {
           </q-td>
           <q-td auto-width>
             <q-btn
+              v-if="props.row.isUpload"
               flat
               dense
               round
               color="green"
               size="14px"
               icon="mdi-file-document-outline"
-              v-if="props.row.isUpload"
               @click="onDownloadFile(props.row.id, props.row.profileId)"
             >
               <q-tooltip>ดาวน์โหลด</q-tooltip>
             </q-btn>
+          </q-td>
+
+          <q-td auto-width>
             <q-btn
               color="info"
               flat

From fa1fec27b1a9e37231e349cce2fc257a5a5d4c2c Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 3 Apr 2025 17:51:30 +0700
Subject: [PATCH 046/195] comment workflow

---
 src/modules/03_retire/views/addRetire.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index c5ee0bc..e341707 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -237,7 +237,7 @@ onMounted(async () => {
               :disable="tranferOrg == '' && noteReason == ''"
             />
 
-            <q-btn
+            <!-- <q-btn
               v-else-if="
                 (dataDetail.statusMain === 'CANCEL' ||
                   dataDetail.statusMain === 'DONECANCEL') &&
@@ -247,7 +247,7 @@ onMounted(async () => {
               color="red"
               label="ติดตามสถานะยกเลิกการขอลาออก"
               @click="modalWorkflow = true"
-            />
+            /> -->
           </q-card-actions>
 
           <div class="col-12 row q-col-gutter-sm q-pa-md">
@@ -662,7 +662,7 @@ onMounted(async () => {
           dataStore.officerType == 'OFFICER'
         "
       >
-        <Workflow :id="id" sys-name="SYS_RESIGN" />
+        <!-- <Workflow :id="id" sys-name="SYS_RESIGN" /> -->
       </div>
     </div>
   </div>

From aa034176c72c225a065030f78b9ba9efc99388de Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 3 Apr 2025 18:08:54 +0700
Subject: [PATCH 047/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1=E0=B9=83?=
 =?UTF-8?q?=E0=B8=99=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B9=83=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/store.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 393ac0e..9588480 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -108,8 +108,8 @@ export const useLeaveStore = defineStore("Leave", () => {
     { id: "DRAFT", name: "แบบร่าง" },
     { id: "NEW", name: "ใหม่" },
     { id: "PENDING", name: "กำลังดำเนินการ" },
-    { id: "APPROVE", name: "อนุมัติ " },
-    { id: "REJECT", name: "ไม่อนุมัติ" },
+    { id: "APPROVE", name: "อนุญาต " },
+    { id: "REJECT", name: "ไม่อนุญาต" },
     { id: "DELETE", name: "ยกเลิก" },
   ]);
   const statusOptions = ref<any[]>(statusOptionsMain.value);

From 0f0e1439da912ccaf2c8cb9865fd065d2c9a8cef Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 4 Apr 2025 11:01:59 +0700
Subject: [PATCH 048/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=82=E0=B8=AB=E0=B8=A5=E0=B8=94=E0=B9=80=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=89=E0=B8=A7=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=AB=E0=B8=B2=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/views/EditPage.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index d2648c3..40107ac 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -300,10 +300,25 @@ async function onClickDelete(id: string, docId: string) {
     });
 }
 
+/** function เรียกประเภทการลา */
+async function fectOptionType() {
+  await http
+    .get(config.API.leaveType())
+    .then(async (res) => {
+      dataStore.fetchLeaveType(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
 /**เมื่อเริ่มโหลดหน้า
  * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
  */
 onMounted(async () => {
+  if (dataStore.options.length == 0) {
+    fectOptionType();
+  }
   await fetchDataDetail(personalId.value);
 });
 </script>

From e27c26ba0a826901cc5d7556311c6862ba57ce8c Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 8 Apr 2025 10:31:52 +0700
Subject: [PATCH 049/195] formdetail

---
 src/modules/05_leave/components/DialogDetail.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index e133373..95c3136 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -269,7 +269,7 @@ async function fetchDataDetail(id: string) {
       formData.dear = data.dear ?? "-";
       checkLeaveType(
         formData.leaveTypeId,
-        formData.ordainDayLocationName,
+        data.hajjDayStatus,
         formData.studyDayTrainingSubject
       );
     })
@@ -289,7 +289,7 @@ async function fetchDataDetail(id: string) {
  */
 function checkLeaveType(
   leaveTypeId: string,
-  ordainDayLocationName: string,
+  hajjDayStatus: boolean,
   studyDayTrainingSubject: string
 ) {
   if (props.leaveType) {
@@ -301,9 +301,9 @@ function checkLeaveType(
       checkForm.value = "FormChildbirth";
     } else if (type === "LV-005") {
       checkForm.value = "FormHoliday";
-    } else if (type === "LV-006" && ordainDayLocationName === "") {
+    } else if (type === "LV-006" && hajjDayStatus === true) {
       checkForm.value = "FormHajj";
-    } else if (type === "LV-006") {
+    } else if (type === "LV-006" && hajjDayStatus === false) {
       checkForm.value = "FormUpasom";
     } else if (type === "LV-007") {
       checkForm.value = "FormCheckSelect";
@@ -432,7 +432,7 @@ watch(
 
       <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 60vh;">
+      <q-card-section class="scroll" style="max-height: 60vh">
         <div class="row">
           <div
             flat
@@ -564,10 +564,7 @@ watch(
       </q-card-section>
     </q-card>
 
-    <q-card
-      v-if="props.leaveStatus === 'DELETE'"
-      style="min-width: 40vw"
-    >
+    <q-card v-if="props.leaveStatus === 'DELETE'" style="min-width: 40vw">
       <DialogHeader
         :tittle="`${titleMainCancle} ${titleName}`"
         :close="props.onClickClose"

From 0821095838fffe2dcd042019f623fdae3879896a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 8 Apr 2025 17:21:01 +0700
Subject: [PATCH 050/195] Bug eva

---
 .../components/EvaluateStepMain.vue           |  55 ++++++--
 .../components/ExpertPageDetail.vue           |  17 ++-
 .../06_evaluate/components/PopupPosition.vue  | 120 ++++++++++++++++++
 .../06_evaluate/components/step/step1.vue     |  22 +++-
 .../components/viewstep/viewStep1.vue         |  68 +++++-----
 .../06_evaluate/stores/evaluteDetail.ts       |  76 +++--------
 6 files changed, 244 insertions(+), 114 deletions(-)
 create mode 100644 src/modules/06_evaluate/components/PopupPosition.vue

diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index fcecc82..0cdf723 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -250,18 +250,53 @@ function checkSelectForm() {
 /** function บันทักตรวจสอบคุณสมบัติ*/
 async function saveStep1() {
   showLoader();
+
   const salaries = formDetail.value.salaries.map((e: any) => ({
-    amount: e.amount,
-    date: e.date,
-    mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
+    // amount: e.amount,
+    // date: e.date,
+    // mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
+    // posNo: e.posNo,
+    // position: e.position,
+    // positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
+    // refCommandDate: e.refCommandDate,
+    // refCommandNo: e.refCommandNo ? e.refCommandNo : "",
+    // salaryClass: e.salaryClass ? e.salaryClass : "",
+    // salaryRef: e.salaryRef ? e.salaryRef : "",
+    // salaryStatus: e.salaryStatus ? e.salariesStatus : "",
+    profileId: e.profileId,
+    commandCode: e.commandCode,
+    commandNo: e.commandNo,
+    commandYear: e.commandYear ? Number(e.commandYear) : 0,
+    commandDateAffect: e.commandDateAffect,
+    commandDateSign: e.commandDateSign,
+    posNoAbb: e.posNoAbb,
     posNo: e.posNo,
-    position: e.position,
-    positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
-    refCommandDate: e.refCommandDate,
-    refCommandNo: e.refCommandNo ? e.refCommandNo : "",
-    salaryClass: e.salaryClass ? e.salaryClass : "",
-    salaryRef: e.salaryRef ? e.salaryRef : "",
-    salaryStatus: e.salaryStatus ? e.salariesStatus : "",
+    positionName: e.positionName,
+    positionType: e.positionType,
+    positionLevel: e.positionLevel,
+    positionLine: e.positionLine,
+    positionPathSide: e.positionPathSide,
+    positionExecutive: e.positionExecutive,
+    amount: e.amount ? e.amount.toString() : "0",
+    amountSpecial: e.amountSpecial ? e.amountSpecial.toString() : "0",
+    positionSalaryAmount: e.positionSalaryAmount
+      ? e.positionSalaryAmount.toString()
+      : "0",
+    mouthSalaryAmount: e.mouthSalaryAmount
+      ? e.mouthSalaryAmount.toString()
+      : "0",
+    orgRoot: e.orgRoot,
+    orgChild1: e.orgChild1,
+    orgChild2: e.orgChild2,
+    orgChild3: e.orgChild3,
+    orgChild4: e.orgChild4,
+    remark: e.remark,
+    commandId: e.commandId,
+    isGovernment: e.isGovernment,
+    positionCee: e.positionCee,
+    commandName: e.commandName,
+    posNumCodeSit: e.posNumCodeSit,
+    posNumCodeSitAbb: e.posNumCodeSitAbb,
   }));
 
   const educations = formDetail.value.educations.map((e: any) => ({
diff --git a/src/modules/06_evaluate/components/ExpertPageDetail.vue b/src/modules/06_evaluate/components/ExpertPageDetail.vue
index 1469831..904e092 100644
--- a/src/modules/06_evaluate/components/ExpertPageDetail.vue
+++ b/src/modules/06_evaluate/components/ExpertPageDetail.vue
@@ -283,9 +283,15 @@ async function onClickDowloadFile(
       ? { salary: dataPerson.formData.salary ? dataPerson.formData.salary : "" }
       : null,
 
-    tp === "EV1_006" ? { lastTwoYear: (currentYear - 2).toString() } : null,
-    tp === "EV1_006" ? { lastOneYear: (currentYear - 1).toString() } : null,
-    tp === "EV1_006" ? { currentYear: currentYear.toString() } : null,
+    tp === "EV1_006"
+      ? {
+          years: {
+            lastTwoYear: toThaiNumber(currentYear - 2 + 543),
+            lastOneYear: toThaiNumber(currentYear - 1 + 543),
+            currentYear: toThaiNumber(currentYear + 543),
+          },
+        }
+      : null,
     tp === "EV1_006" ? { commanderFullname: formData.commanderFullname } : null,
     tp === "EV1_006" ? { commanderPosition: formData.commanderPosition } : null,
     tp === "EV1_006" ? { commanderOrg: "" } : null,
@@ -307,6 +313,7 @@ async function onClickDowloadFile(
 
     tp === "EV1_010" ? { subject: formData.subject } : null
   );
+
   const body = {
     template: tp,
     reportName: templateName,
@@ -315,6 +322,10 @@ async function onClickDowloadFile(
   await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
 }
 
+function toThaiNumber(input: number | string) {
+  return input.toString().replace(/\d/g, (d) => "๐๑๒๓๔๕๖๗๘๙"[parseInt(d)]);
+}
+
 /**
  * function fetch ลิงก์อัปโหลดไฟล์
  * @param volume เล่ม
diff --git a/src/modules/06_evaluate/components/PopupPosition.vue b/src/modules/06_evaluate/components/PopupPosition.vue
new file mode 100644
index 0000000..c4a72dd
--- /dev/null
+++ b/src/modules/06_evaluate/components/PopupPosition.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { ref, watch } from "vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { CardDataPos } from "@/modules/10_registry/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, formatDatePosition } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const cardData = ref<CardDataPos[]>([
+  {
+    label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
+    data: [],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งตามระดับ",
+    data: [],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งทางการบริหาร",
+    data: [],
+  },
+]);
+
+function onClosePopup() {
+  modal.value = false;
+}
+
+async function fetchDataPosition() {
+  showLoader();
+  await http
+    .get(config.API.salaryTenurePosition(""))
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        // map ข้อมูลระยะเวลาดำรงตำแหน่ง
+        const formatData = (list: any) =>
+          list.map((e: any) => ({
+            name: e.name ?? "",
+            time: formatDatePosition(e.year, e.month, e.day),
+          }));
+
+        // แปลงข้อมูลจาก data
+        const position = data.position ? formatData(data.position) : []; //ระยะเวลาดำรงตำแหน่งในสายงาน
+        const posLevel = data.posLevel ? formatData(data.posLevel) : []; //ระยะเวลาดำรงตำแหน่งตามระดับ
+        const posExecutive = data.posExecutive
+          ? formatData(data.posExecutive)
+          : []; //ระยะเวลาดำรงตำแหน่งทางการบริหาร
+
+        // นำข้อมูลไปใส่ใน cardData
+        if (cardData.value[0]) {
+          cardData.value[0].data = position;
+        }
+        if (cardData.value[1]) {
+          cardData.value[1].data = posLevel;
+        }
+        if (cardData.value[2]) {
+          cardData.value[2].data = posExecutive;
+        }
+        //เช็คค่า ระยะเวลาดำรงตำแหน่งทางการบริหาร ถ้าไม่มีให้ลบออกจาก cardData
+        if (posExecutive.length === 0 && cardData.value.length > 2) {
+          cardData.value.splice(2, 1);
+        }
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(modal, (v) => {
+  if (v) {
+    fetchDataPosition();
+  } else {
+    cardData.value.forEach((item) => {
+      item.data = [];
+    });
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 40%">
+      <DialogHeader :tittle="`ตำแหน่ง`" :close="onClosePopup" />
+      <q-separator />
+      <q-card-section>
+        <div class="row q-col-gutter-sm q-pb-sm">
+          <div class="col" v-for="(item, index) in cardData" :key="index">
+            <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+                {{ item.label }}
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <q-card-section class="q-pt-none" style="min-height: 200px">
+                <li v-for="data in item.data">
+                  {{ data.name }} {{ data.time }}
+                </li>
+              </q-card-section>
+            </q-card>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_evaluate/components/step/step1.vue b/src/modules/06_evaluate/components/step/step1.vue
index 120d061..f1c0cb5 100644
--- a/src/modules/06_evaluate/components/step/step1.vue
+++ b/src/modules/06_evaluate/components/step/step1.vue
@@ -9,6 +9,7 @@ import type {
 } from "@/modules/06_evaluate/interface/evalute";
 
 import PopupCheckFeatures from "@/modules/06_evaluate/components/PopupCheckFeatures.vue";
+import PopupPosition from "@/modules/06_evaluate/components/PopupPosition.vue";
 
 /** use*/
 const store = useEvaluateStore();
@@ -24,6 +25,7 @@ const education = ref<any>();
 const emit = defineEmits(["update:spec"]);
 
 const modal = ref<boolean>(false);
+const modalPosition = ref<boolean>(false);
 const show = ref<boolean>(false);
 
 const formData = reactive<FormSpec>({
@@ -69,6 +71,10 @@ function closeModal() {
   modal.value = false;
 }
 
+function onViewDataPosition() {
+  modalPosition.value = true;
+}
+
 /**hook lifecycle*/
 onMounted(() => {
   props.data && fetchCheckSpec(props.data);
@@ -120,7 +126,19 @@ onMounted(() => {
           />
         </q-item-section>
         <q-item-section>
-          <q-item-label>ประวัติการรับราชการ </q-item-label>
+          <q-item-label
+            >ประวัติการรับราชการ
+            <q-btn
+              flat
+              round
+              dense
+              color="info"
+              icon="info"
+              @click="onViewDataPosition()"
+            >
+              <q-tooltip>ข้อมูลประวัติการรับราชการ</q-tooltip>
+            </q-btn>
+          </q-item-label>
         </q-item-section>
       </q-item>
       <q-item v-ripple class="listItem">
@@ -223,6 +241,8 @@ onMounted(() => {
     :close-modal="closeModal"
     :educations="educations"
   />
+
+  <PopupPosition v-model:modal="modalPosition" />
 </template>
 
 <style>
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 1867f87..dfc9002 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -86,7 +86,7 @@ async function fetchDetail() {
       formDetail.positionLevel = data.posLevelName;
       formDetail.posNo = data.posNo ?? "";
       formDetail.birthDate = data.birthDate;
-      formDetail.govAge = data.govAge; // ยังไม่มี
+      // formDetail.govAge = data.govAge; // ยังไม่มี
       formDetail.salary = data.salary;
 
       http.get(config.API.dataUserEducations).then((res) => {
@@ -107,11 +107,6 @@ async function fetchDetail() {
 
       http.get(config.API.dataUserSalary).then((res) => {
         formDetail.salaries = res.data.result;
-        // formDetail.salary = formDetail.salaries
-        //   ? formattedNumber(
-        //       formDetail.salaries[formDetail.salaries.length - 1].amount
-        //     )
-        //   : "";
       });
 
       http.get(config.API.dataUserCertificate("training")).then((res) => {
@@ -130,16 +125,9 @@ async function fetchDetail() {
       });
 
       http.get(config.API.dataUserAssessments).then((res) => {
-        // formDetail.honor =  res.data.result
-        //  res.data.result.map((e: any) => ({
-        //   receivedDate: e.createdAt,
-        //   authority: e.issuer,
-        //   detail: e.detail,
-        //   orderNumber: e.refCommandNo,
-        //   doce: e.refCommandDate,
         formDetail.assessments = res.data.result;
       });
-      // }));
+
       emit("update:formDeital", formDetail);
     })
     .catch((err) => {
@@ -176,26 +164,27 @@ async function fetchCheckSpec(data: any) {
     issueDate: date2Thai(e.issueDate),
     issuer: e.issuer,
   }));
-  formDetail.salaries = data.salaries.map((e: any) => ({
-    amount: e.amount,
-    date: e.date,
-    mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
-    posNo: e.posNo,
-    position: e.position,
-    positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
-    refCommandDate: e.refCommandDate ? e.refCommandDate : "",
-    salaryClass: e.salaryClass ? e.salaryClass : "",
-    salaryRef: e.salaryRef ? e.salaryRef : "",
-    salaryStatus: e.salaryStatus ? e.salariesStatus : "",
-    //
-    oc: "-",
-    lineWork: "-",
-    side: "-",
-    positionType: "-",
-    level: "-",
-    positionsAdministrative: "-",
-    aspectAdministrative: "-",
-  }));
+  formDetail.salaries = data.salaries
+  // .map((e: any) => ({
+  //   amount: e.amount,
+  //   date: e.date,
+  //   mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
+  //   posNo: e.posNo,
+  //   position: e.position,
+  //   positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
+  //   refCommandDate: e.refCommandDate ? e.refCommandDate : "",
+  //   salaryClass: e.salaryClass ? e.salaryClass : "",
+  //   salaryRef: e.salaryRef ? e.salaryRef : "",
+  //   salaryStatus: e.salaryStatus ? e.salariesStatus : "",
+  //   //
+  //   oc: "-",
+  //   lineWork: "-",
+  //   side: "-",
+  //   positionType: "-",
+  //   level: "-",
+  //   positionsAdministrative: "-",
+  //   aspectAdministrative: "-",
+  // }));
   formDetail.trainings = data.trainings.map((e: any) => ({
     dateOrder: date2Thai(e.dateOrder),
     department: e.department,
@@ -228,11 +217,11 @@ function getData() {
   showLoader();
   http
     .get(config.API.dataUserGovernment)
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       formDetail.org = data.org;
       formDetail.govAge = data.govAge
-        ? `${data.govAge.year} วัน ${data.govAge.month} เดือน ${data.govAge.year} ปี`
+        ? `${data.govAge.year} ปี ${data.govAge.month} เดือน ${data.govAge.day} วัน`
         : "";
     })
     .catch((e) => {
@@ -596,12 +585,13 @@ onMounted(async () => {
           <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-10">
+        <div class="col-12 q-pa-sm">-</div>
+        <!-- <div class="col-10">
           <TableData
             :columns="columnAssessments"
             :row="formDetail.assessments"
           />
-        </div>
+        </div> -->
       </q-card>
     </div>
   </q-card>
diff --git a/src/modules/06_evaluate/stores/evaluteDetail.ts b/src/modules/06_evaluate/stores/evaluteDetail.ts
index fa815fa..0fea3e6 100644
--- a/src/modules/06_evaluate/stores/evaluteDetail.ts
+++ b/src/modules/06_evaluate/stores/evaluteDetail.ts
@@ -7,7 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
 export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   /** columns TableViewStep1*/
   const mixin = useCounterMixin();
-  const { date2Thai, findOrgNameHtml } = mixin;
+  const { date2Thai, findOrgNameHtml, findOrgName } = mixin;
 
   const columnsCertificates = ref<QTableProps["columns"]>([
     {
@@ -67,10 +67,6 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
       format: (v) => date2Thai(v),
-      sort: (a: string, b: string) =>
-        a
-          .toString()
-          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "commandDateSign",
@@ -81,10 +77,6 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
       format: (v) => date2Thai(v),
-      sort: (a: string, b: string) =>
-        a
-          .toString()
-          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "posNumCodeSit",
@@ -112,7 +104,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       style: "font-size: 14px",
       format(val, row) {
         return row.posNoAbb && row.posNo
-          ? `${row.posNoAbb}${row.posNo}`
+          ? `${row.posNoAbb} ${row.posNo}`
           : row.posNo
           ? row.posNo
           : "-";
@@ -143,10 +135,6 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       field: "positionType",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a
-          .toString()
-          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "positionLevel",
@@ -165,8 +153,6 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       },
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "positionExecutive",
@@ -176,8 +162,6 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       field: "positionExecutive",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "commandNo",
@@ -192,8 +176,6 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       },
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "commandCode",
@@ -201,10 +183,11 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       label: "ประเภทคำสั่ง",
       sortable: true,
       field: "commandCode",
+      format(val, row) {
+        return row.commandName;
+      },
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "organization",
@@ -214,8 +197,16 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       field: "organization",
       headerStyle: "font-size: 14px;min-width:280px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+
+      format(val, row) {
+        return findOrgName({
+          root: row.orgRoot,
+          child1: row.orgChild1,
+          child2: row.orgChild2,
+          child3: row.orgChild3,
+          child4: row.orgChild4,
+        });
+      },
     },
     {
       name: "amount",
@@ -234,40 +225,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
             }`
           : "-";
       },
-      sort: (a: string, b: string) =>
-        a
-          .toString()
-          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
-    {
-      name: "mouthSalaryAmount",
-      align: "left",
-      label: "เงินค่าตอบแทนรายเดือน",
-      sortable: true,
-      field: "mouthSalaryAmount",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      format: (v) => Number(v).toLocaleString(),
-      sort: (a: string, b: string) =>
-        a
-          .toString()
-          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "positionSalaryAmount",
-      align: "left",
-      label: "เงินประจำตำแหน่ง",
-      sortable: true,
-      field: "positionSalaryAmount",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      format: (v) => Number(v).toLocaleString(),
-      sort: (a: string, b: string) =>
-        a
-          .toString()
-          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-
     {
       name: "remark",
       align: "left",
@@ -276,10 +234,6 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
       field: "remark",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a
-          .toString()
-          .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
   ]);
 

From ea05b899a18d74a06a7f91b228ab387e3c14e1fb Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 9 Apr 2025 13:38:10 +0700
Subject: [PATCH 051/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=98=E0=B8=B5=E0=B8=AE=E0=B8=B1=E0=B8=88=20?=
 =?UTF-8?q?=E0=B8=94=E0=B8=B1=E0=B8=81=E0=B8=88=E0=B8=B2=E0=B8=81=20status?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/views/EditPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 40107ac..2d28a06 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -114,9 +114,9 @@ const modelSpecific = computed(() => {
     (x) => x.id == formData.leaveTypeId
   )?.code;
 
-  if (code == "LV-006" && formData.ordainDayLocationName != "") {
+  if (code == "LV-006" && formData.hajjDayStatus == false) {
     return "b1";
-  } else if (code == "LV-006" && formData.ordainDayLocationName == "") {
+  } else if (code == "LV-006" && formData.hajjDayStatus == true) {
     return "b2";
   } else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
     return "s1";

From 054c3d5eba285ded86409caf2fa643ca5d8652e6 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 9 Apr 2025 15:35:48 +0700
Subject: [PATCH 052/195] hide error get commeand

---
 src/modules/06_evaluate/components/step/step2.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index 3b286f8..ec64486 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -338,7 +338,8 @@ function getCommander() {
       formCommand.commanderAbovePosition = data.commanderAbovePosition;
     })
     .catch((e) => {
-      messageError($q, e);
+      console.log(e);
+      // messageError($q, e);
     });
 }
 /** callback function */

From e1a75a392bf75e07ddef304f8bb0aae8f33936a1 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 9 Apr 2025 15:53:19 +0700
Subject: [PATCH 053/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_dashboard/views/Dashboard.vue | 17 +++++++----------
 src/modules/07_appealComplain/views/Main.vue |  2 +-
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 937509a..e3b32af 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -31,22 +31,19 @@ const idInboxActive = ref<string>(); // Id ข้อความที่เล
 const filteredItems = computed(() => {
   const isOfficer = dataStore.officerType === "OFFICER";
   const conditions: Record<string, boolean> = {
-    "ทดลองปฏิบัติหน้าที่ราชการ": dataStore.isProbation,
-    "ประเมินบุคคล": isOfficer,
-    "ผลงาน": isOfficer,
-    "ขอโอน": isOfficer,
+    ทดลองปฏิบัติหน้าที่ราชการ: dataStore.isProbation,
+    ประเมินบุคคล: isOfficer,
+    ผลงาน: isOfficer,
+    ขอโอน: isOfficer,
     "ผู้ขอรับการประเมิน (KPI)": isOfficer,
     "ผู้ประเมิน (KPI)": isOfficer,
     "ทุนการศึกษา/ฝึกอบรม": isOfficer,
-    "การพัฒนารายบุคคล": isOfficer,
+    การพัฒนารายบุคคล: isOfficer,
   };
 
-  return items.value.filter(
-    (item) => conditions[item.title] ?? true
-  );
+  return items.value.filter((item) => conditions[item.title] ?? true);
 });
 
-
 const items = ref<MenuMainList[]>([
   {
     icon: "mdi-account-group-outline",
@@ -98,7 +95,7 @@ const items = ref<MenuMainList[]>([
   },
   {
     icon: "mdi-scale-balance",
-    title: "อุทธรณ์ร้องทุกข์",
+    title: "อุทธรณ์/ร้องทุกข์",
     sub: "ทำเรื่องขออุทธรณ์ หรือร้องทุกข์",
     color: "green-3",
     path: "/appeal-complain",
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index 008db43..9abeffb 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -252,7 +252,7 @@ onMounted(async () => {
           class="q-mr-sm"
           @click="clickBack"
         />
-        อุทธรณ์ร้องทุกข์
+        อุทธรณ์/ร้องทุกข์
       </div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">

From 4cf9595a6d45f3e2c7f9595a144f560b70a6b835 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 9 Apr 2025 15:57:11 +0700
Subject: [PATCH 054/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=AA=E0=B8=96?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=E0=B8=B0=E0=B8=A3=E0=B8=AD=E0=B8=AD=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_transfer/store.ts                              | 3 ++-
 src/modules/03_retire/store.ts                                | 2 ++
 src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/modules/02_transfer/store.ts b/src/modules/02_transfer/store.ts
index 038bc84..0450d7a 100644
--- a/src/modules/02_transfer/store.ts
+++ b/src/modules/02_transfer/store.ts
@@ -13,9 +13,10 @@ export const useTransferDataStore = defineStore("transfer", () => {
         return "ไม่อนุมัติ";
       case "REPORT":
         return "ส่งรายชื่อไปออกคำสั่ง";
+      case "WAITING":
+        return "รอออกคำสั่ง";
       case "DONE":
         return "ออกคำสั่งเสร็จแล้ว";
-
       default:
         return "-";
     }
diff --git a/src/modules/03_retire/store.ts b/src/modules/03_retire/store.ts
index abe9e86..c133f06 100644
--- a/src/modules/03_retire/store.ts
+++ b/src/modules/03_retire/store.ts
@@ -13,6 +13,8 @@ export const useRestDataStore = defineStore("Rest", () => {
         return "ไม่อนุมัติ";
       case "REPORT":
         return "ส่งรายชื่อไปออกคำสั่ง";
+      case "WAITING":
+        return "รอออกคำสั่ง";
       case "DONE":
         return "ออกคำสั่งเสร็จแล้ว";
       case "DONECANCEL":
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
index bab7875..75d2dc1 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -188,6 +188,8 @@ function statusText(val: string) {
       return "ไม่อนุมัติ";
     case "REPORT":
       return "ส่งรายชื่อไปออกคำสั่ง";
+    case "WAITING":
+      return "รอออกคำสั่ง";
     case "DONE":
       return "ออกคำสั่งเสร็จแล้ว";
 

From 9688cca41f75a11fbccf11af2698addcc6e212ee Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 9 Apr 2025 15:58:44 +0700
Subject: [PATCH 055/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B1=E0=B8=9A=20=E0=B8=A3=E0=B8=AD=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/DialogDetail.vue | 8 ++++----
 src/modules/05_leave/components/ListView.vue     | 6 ++++--
 src/modules/05_leave/views/EditPage.vue          | 4 ++--
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 95c3136..dd0aece 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -269,7 +269,7 @@ async function fetchDataDetail(id: string) {
       formData.dear = data.dear ?? "-";
       checkLeaveType(
         formData.leaveTypeId,
-        data.hajjDayStatus,
+        formData.ordainDayLocationName,
         formData.studyDayTrainingSubject
       );
     })
@@ -289,7 +289,7 @@ async function fetchDataDetail(id: string) {
  */
 function checkLeaveType(
   leaveTypeId: string,
-  hajjDayStatus: boolean,
+  ordainDayLocationName: string,
   studyDayTrainingSubject: string
 ) {
   if (props.leaveType) {
@@ -301,9 +301,9 @@ function checkLeaveType(
       checkForm.value = "FormChildbirth";
     } else if (type === "LV-005") {
       checkForm.value = "FormHoliday";
-    } else if (type === "LV-006" && hajjDayStatus === true) {
+    } else if (type === "LV-006" && ordainDayLocationName === "") {
       checkForm.value = "FormHajj";
-    } else if (type === "LV-006" && hajjDayStatus === false) {
+    } else if (type === "LV-006") {
       checkForm.value = "FormUpasom";
     } else if (type === "LV-007") {
       checkForm.value = "FormCheckSelect";
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index de3ceaf..c6ac5f1 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -154,9 +154,11 @@ function convert(val: any) {
     );
     const type = filtertype?.code;
     if (type == "LV-006" && val.hajjDayStatus == false) {
-      return "ลาอุปสมบท";
+      return "ลาอุปสมบทหรือการลาประกอบพิธีฮัจญ์ฯ";
+      // return "ลาอุปสมบท"; รอ API
     } else if (type == "LV-006" && val.hajjDayStatus == true) {
-      return "ลาประกอบพิธีฮัจญ์";
+      return "ลาอุปสมบทหรือการลาประกอบพิธีฮัจญ์ฯ";
+      // return "ลาประกอบพิธีฮัจญ์"; รอ API
     } else {
       return val.leaveTypeName;
     }
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 2d28a06..40107ac 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -114,9 +114,9 @@ const modelSpecific = computed(() => {
     (x) => x.id == formData.leaveTypeId
   )?.code;
 
-  if (code == "LV-006" && formData.hajjDayStatus == false) {
+  if (code == "LV-006" && formData.ordainDayLocationName != "") {
     return "b1";
-  } else if (code == "LV-006" && formData.hajjDayStatus == true) {
+  } else if (code == "LV-006" && formData.ordainDayLocationName == "") {
     return "b2";
   } else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
     return "s1";

From c9c6ba33e6cb6b7b7af26af26258116f660fe0e9 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 9 Apr 2025 16:37:06 +0700
Subject: [PATCH 056/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=80?=
 =?UTF-8?q?=E0=B8=8A=E0=B9=87=E0=B8=84=20=E0=B8=9C=E0=B8=B9=E0=B9=89?=
 =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=B3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/09_scholarship/views/detail.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 898ba70..555e40f 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -271,13 +271,17 @@ function onOpenReturn() {
   dialogReturn.value = true;
 }
 
-function onDownload(type: string) {
+async function onDownload(type: string) {
   showLoader();
-  http
+  await http
     .get(config.API.developmentScholarshipReport + `/${id.value}`)
-    .then((res) => {
+    .then(async (res) => {
       const dataList = res.data.result;
-      genReport(dataList, "ฟอร์มรายงานตัวกลับเข้ารับราชการ(ต้นแบบ)", type);
+      await genReport(
+        dataList,
+        "ฟอร์มรายงานตัวกลับเข้ารับราชการ(ต้นแบบ)",
+        type
+      );
     })
     .catch((e) => {
       messageError($q, e);
@@ -470,9 +474,7 @@ function fetchDataDetail(id: string) {
       dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
       dataPerson.org = data.org ? data.org : "-";
 
-      dataGuarantor.citizenId = data.guarantorCitizenId
-        ? data.guarantorCitizenId
-        : "-";
+      dataGuarantor.citizenId = data.guarantorCitizenId;
       dataGuarantor.name = `${data.guarantorPrefix}${data.guarantorFirstName} ${data.guarantorLastName}`;
       dataGuarantor.position = data.position ? data.position : "-";
       dataGuarantor.type = data.posTypeguarantorName
@@ -1072,7 +1074,8 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-12">
+
+              <div class="col-12" v-if="dataGuarantor.citizenId">
                 <q-card bordered tyle="border: 1px solid #d6dee1">
                   <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                     ข้อมูลผู้ค้ำประกัน

From 72807671b491fba26937ff3553f44a060b9a7402 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 9 Apr 2025 17:18:44 +0700
Subject: [PATCH 057/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1=20popup?=
 =?UTF-8?q?=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_evaluate/components/PopupPosition.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/06_evaluate/components/PopupPosition.vue b/src/modules/06_evaluate/components/PopupPosition.vue
index c4a72dd..7a9f9d7 100644
--- a/src/modules/06_evaluate/components/PopupPosition.vue
+++ b/src/modules/06_evaluate/components/PopupPosition.vue
@@ -94,7 +94,7 @@ watch(modal, (v) => {
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 40%">
-      <DialogHeader :tittle="`ตำแหน่ง`" :close="onClosePopup" />
+      <DialogHeader :tittle="`ประวัติการรับราชการ`" :close="onClosePopup" />
       <q-separator />
       <q-card-section>
         <div class="row q-col-gutter-sm q-pb-sm">

From 275b80b6a0231f08c05e7c912bf324ee825403bb Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 9 Apr 2025 17:29:43 +0700
Subject: [PATCH 058/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=95=E0=B8=A3=E0=B8=84=E0=B8=B3=E0=B8=99=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=93=20=E0=B8=A5=E0=B8=B2=E0=B8=9E=E0=B8=B1=E0=B8=81?=
 =?UTF-8?q?=E0=B8=9C=E0=B9=88=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/views/Main.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 5ed3618..fa3c763 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -135,10 +135,16 @@ async function fetchStatsTable() {
                 : el.leaveTypeName === "ลากิจส่วนตัว"
                 ? "text-deep-purple"
                 : "text-indigo",
-            value: el.leavePercent,
-            all: el.leaveLimit,
+            value:
+              (Number(el.leaveCountApprove) /
+                (Number(el.leaveLimit) + Number(el.leaveExtend))) *
+              100,
+            all: Number(el.leaveLimit) + Number(el.leaveExtend),
             use: el.leaveCountApprove,
-            remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
+            remain:
+              Number(el.leaveLimit) +
+              Number(el.leaveExtend) -
+              Number(el.leaveCountApprove),
           }));
       });
       stat.forEach((item) => itemPie.value.push(...item));

From 98b78a2846b0779d192ca7708be00804a2400d37 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 9 Apr 2025 17:52:45 +0700
Subject: [PATCH 059/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=80?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=B2=20=E0=B8=97=E0=B8=A8=E0=B8=99=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=A1=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/views/Main.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index fa3c763..3e7f446 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -135,10 +135,11 @@ async function fetchStatsTable() {
                 : el.leaveTypeName === "ลากิจส่วนตัว"
                 ? "text-deep-purple"
                 : "text-indigo",
-            value:
+            value: Math.round(
               (Number(el.leaveCountApprove) /
                 (Number(el.leaveLimit) + Number(el.leaveExtend))) *
-              100,
+                100
+            ),
             all: Number(el.leaveLimit) + Number(el.leaveExtend),
             use: el.leaveCountApprove,
             remain:

From d66a3dcc609433ff8d3f036d5e1523460cfd59ea Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 9 Apr 2025 18:14:10 +0700
Subject: [PATCH 060/195] =?UTF-8?q?fix=20report=20=E0=B8=95=E0=B9=89?=
 =?UTF-8?q?=E0=B8=99=E0=B8=89=E0=B8=9A=E0=B8=B1=E0=B8=9A=20eva?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ExpertPageDetail.vue           | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/modules/06_evaluate/components/ExpertPageDetail.vue b/src/modules/06_evaluate/components/ExpertPageDetail.vue
index 904e092..070a51b 100644
--- a/src/modules/06_evaluate/components/ExpertPageDetail.vue
+++ b/src/modules/06_evaluate/components/ExpertPageDetail.vue
@@ -256,16 +256,16 @@ async function onClickDowloadFile(
     {
       govAge: profile.value.government
         ? `${
-            profile.value.government.govAge.day !== 0
-              ? `${profile.value.government.govAge.day} วัน`
+            profile.value.government.govAge.year !== 0
+              ? `${profile.value.government.govAge.year} ปี`
               : ""
           } ${
             profile.value.government.govAge.month !== 0
               ? `${profile.value.government.govAge.month} เดือน`
               : ""
           } ${
-            profile.value.government.govAge.year !== 0
-              ? `${profile.value.government.govAge.year} ปี`
+            profile.value.government.govAge.day !== 0
+              ? `${profile.value.government.govAge.day} วัน`
               : ""
           }`
         : ``,
@@ -292,13 +292,17 @@ async function onClickDowloadFile(
           },
         }
       : null,
-    tp === "EV1_006" ? { commanderFullname: formData.commanderFullname } : null,
-    tp === "EV1_006" ? { commanderPosition: formData.commanderPosition } : null,
+    tp === "EV1_006" || tp === "EV1_008"
+      ? { commanderFullname: formData.commanderFullname }
+      : null,
+    tp === "EV1_006" || tp === "EV1_008"
+      ? { commanderPosition: formData.commanderPosition }
+      : null,
     tp === "EV1_006" ? { commanderOrg: "" } : null,
-    tp === "EV1_006"
+    tp === "EV1_006" || tp === "EV1_008"
       ? { commanderAboveFullname: formData.commanderAboveFullname }
       : null,
-    tp === "EV1_006"
+    tp === "EV1_006" || tp === "EV1_008"
       ? { commanderAbovePosition: formData.commanderAbovePosition }
       : null,
     tp === "EV1_006" ? { commanderAboveOrg: "" } : null,
@@ -311,7 +315,10 @@ async function onClickDowloadFile(
       ? { dateRetireLaw: dataPerson.formData.dateRetireLaw }
       : null,
 
-    tp === "EV1_010" ? { subject: formData.subject } : null
+    tp === "EV1_010" ? { subject: formData.subject } : null,
+    { typeTh: "เชี่ยวชาญ" },
+    { posNoWithSym: `(${dataPerson.formData.posNo})` },
+    { orgNoNewLine: dataPerson.formData.org }
   );
 
   const body = {

From 0ca7af9ce3a8a69eda568d6cddf5fdf29fa847a0 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 17 Apr 2025 14:29:18 +0700
Subject: [PATCH 061/195] \n

---
 src/modules/09_scholarship/views/detail.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 555e40f..88d742a 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -657,7 +657,7 @@ onMounted(async () => {
                   {{ dataPerson.positionSide ? dataPerson.positionSide : "-" }}
                 </div>
                 <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                <div class="col-8 text-weight-medium">
+                <div class="col-8 text-weight-medium text-html">
                   {{ dataPerson.org ? dataPerson.org : "-" }}
                 </div>
               </div>
@@ -1125,7 +1125,7 @@ onMounted(async () => {
                           }}
                         </div>
                         <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                        <div class="col-8 text-weight-medium">
+                        <div class="col-8 text-weight-medium text-html">
                           {{ dataGuarantor.org ? dataGuarantor.org : "-" }}
                         </div>
                       </div>

From 85caf0207eced9ba27e02d59a5a24b5c488be29f Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 17 Apr 2025 14:34:04 +0700
Subject: [PATCH 062/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/09_scholarship/views/detail.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 88d742a..5f13b1c 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -2238,9 +2238,9 @@ onMounted(async () => {
                       dense
                       readonly
                       outlined
-                      :label="convertStudyPlace()"
+                      :label="'สถานที่ (เมือง/ประเทศ)'"
                       class="inputgreen"
-                      v-model="formBody.studyPlace"
+                      v-model="formBody.studyCountry"
                     />
                   </div>
 

From c3d24fdc3339ea2e4b22fcf894ffdf746c186633 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 18 Apr 2025 13:55:30 +0700
Subject: [PATCH 063/195] =?UTF-8?q?eva=20=3D>=20=E0=B9=80=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=88=E0=B8=A1=20Duty?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/viewstep/viewStep1.vue         | 31 +++++--------------
 .../06_evaluate/stores/evaluteDetail.ts       | 28 ++++++++++++++++-
 2 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index dfc9002..8cfc4c8 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -28,7 +28,7 @@ const {
   columnsCertificates,
   columnSalaries,
   columnTraining,
-  columnProjectsProposed,
+  columnExperience,
   columnAssessments,
 } = store;
 
@@ -63,6 +63,7 @@ const formDetail = reactive<any>({
   salaries: [],
   trainings: [],
   assessments: [],
+  experience: [],
   honor: [],
 });
 
@@ -164,27 +165,7 @@ async function fetchCheckSpec(data: any) {
     issueDate: date2Thai(e.issueDate),
     issuer: e.issuer,
   }));
-  formDetail.salaries = data.salaries
-  // .map((e: any) => ({
-  //   amount: e.amount,
-  //   date: e.date,
-  //   mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
-  //   posNo: e.posNo,
-  //   position: e.position,
-  //   positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
-  //   refCommandDate: e.refCommandDate ? e.refCommandDate : "",
-  //   salaryClass: e.salaryClass ? e.salaryClass : "",
-  //   salaryRef: e.salaryRef ? e.salaryRef : "",
-  //   salaryStatus: e.salaryStatus ? e.salariesStatus : "",
-  //   //
-  //   oc: "-",
-  //   lineWork: "-",
-  //   side: "-",
-  //   positionType: "-",
-  //   level: "-",
-  //   positionsAdministrative: "-",
-  //   aspectAdministrative: "-",
-  // }));
+  formDetail.salaries = data.salaries;
   formDetail.trainings = data.trainings.map((e: any) => ({
     dateOrder: date2Thai(e.dateOrder),
     department: e.department,
@@ -577,7 +558,11 @@ onMounted(async () => {
           <span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm">-</div>
+        <TableData
+          class="col-12"
+          :columns="columnExperience"
+          :row="formDetail.trainings"
+        />
       </q-card>
 
       <q-card class="col-12 cardSp1" bordered>
diff --git a/src/modules/06_evaluate/stores/evaluteDetail.ts b/src/modules/06_evaluate/stores/evaluteDetail.ts
index 0fea3e6..02aa6df 100644
--- a/src/modules/06_evaluate/stores/evaluteDetail.ts
+++ b/src/modules/06_evaluate/stores/evaluteDetail.ts
@@ -9,6 +9,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   const mixin = useCounterMixin();
   const { date2Thai, findOrgNameHtml, findOrgName } = mixin;
 
+  //ใบอนุญาตประกอบวิชาชีพ
   const columnsCertificates = ref<QTableProps["columns"]>([
     {
       name: "certificateType",
@@ -57,6 +58,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     },
   ]);
 
+  //ประวัติการรับราชการ
   const columnSalaries = ref<QTableProps["columns"]>([
     {
       name: "commandDateAffect",
@@ -237,6 +239,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     },
   ]);
 
+  //ประวัติการฝึกอบรมดูงาน
   const columnTraining = ref<QTableProps["columns"]>([
     {
       name: "name",
@@ -354,7 +357,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     },
   ]);
 
-  /** ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)*/
+  //ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)
   const columnAssessments = ref<QTableProps["columns"]>([
     {
       name: "date",
@@ -448,6 +451,28 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     },
   ]);
 
+  //ประสบการณ์ในการปฏิบัติงาน
+  const columnExperience = ref<QTableProps["columns"]>([
+    {
+      name: "name",
+      align: "left",
+      label: "ชื่อผลงาน",
+      sortable: true,
+      field: "name",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "detail",
+      align: "left",
+      label: "รายละเอียดผลงาน",
+      sortable: true,
+      field: "detail",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
   function textRangePoint(val: number | undefined) {
     if (val == undefined) val = -1;
     if (val < 60.0) return "(คะแนนต่ำกว่าร้อยละ 60.00)";
@@ -473,6 +498,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
     columnSalaries,
     columnTraining,
     columnProjectsProposed,
+    columnExperience,
     columnAssessments,
   };
 });

From d9d946d6a76722ec7538156468003cd359e85e98 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 22 Apr 2025 15:54:24 +0700
Subject: [PATCH 064/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=82=E0=B8=AD=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=83=E0=B8=9A=E0=B8=AD=E0=B8=99=E0=B8=B8=E0=B8=8D?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=95=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=81=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=A7=E0=B8=B4=E0=B8=8A=E0=B8=B2=E0=B8=8A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=9E=20=E0=B9=83=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B9=81?=
 =?UTF-8?q?=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=97=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/10_registry/store/RequestEdit.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/10_registry/store/RequestEdit.ts b/src/modules/10_registry/store/RequestEdit.ts
index 0efc690..bcd3a58 100644
--- a/src/modules/10_registry/store/RequestEdit.ts
+++ b/src/modules/10_registry/store/RequestEdit.ts
@@ -15,6 +15,7 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
     "ขอแก้ไขข้อมูลประวัติการฝึกอบรม",
     "ขอแก้ไขใบอนุญาตประกอบวิชาชีพ",
     "ขอแก้ไขที่อยู่ปัจจุบัน",
+    "ขอแก้ไขใบอนุญาตประกอบวิชาชีพ",
   ]);
   const optionStatus = ref<DataOption[]>([
     { id: "", name: "ทั้งหมด" },

From f8cd032c0b84d4dbebcb150e68dc14e924034359 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 23 Apr 2025 10:29:50 +0700
Subject: [PATCH 065/195] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20?=
 =?UTF-8?q?Eva?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/org/api.org.ts                        |   5 +-
 .../components/EvaluateStepMain.vue           | 493 ++++++++-------
 .../06_evaluate/components/step/step2.vue     | 575 +++++++++++-------
 .../06_evaluate/components/step/step3.vue     | 101 +--
 .../06_evaluate/components/step/step4.vue     | 295 ++++++++-
 .../06_evaluate/components/step/step6.vue     | 307 +++++++---
 .../06_evaluate/components/step/step7.vue     |   7 +-
 .../06_evaluate/components/step/step8.vue     |  38 +-
 .../components/viewstep/viewStep1.vue         | 143 ++---
 src/modules/06_evaluate/interface/evalute.ts  |  10 +-
 .../06_evaluate/stores/evaluteDetail.ts       |  78 +--
 11 files changed, 1254 insertions(+), 798 deletions(-)

diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index 8ad1a24..8705ab9 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -54,6 +54,8 @@ export default {
   dataUserSalary: `${profileOrg}/salary/user`,
   dataUserSalaryByType: (type: string) => `${org}/profile${type}/salary/user`,
   dataUserAssessments: `${profileOrg}/assessments/user`,
+  dataUserPortfolio: `${env.API_URI}/development/portfolio/user`,
+  dataUserPerformance: `${env.API_URI}/evaluation/performance/user`,
   dataUserNopaid: `${profileOrg}/nopaid/user`,
   dataUserNopaidByType: (type: string) => `${org}/profile${type}/nopaid/user`,
 
@@ -61,8 +63,7 @@ export default {
   dataUserCertificateByType: (emType: string, type: string) =>
     `${org}/profile${emType}/${type}/user`,
 
-  dataUserEvaByType: (type: string) =>
-    `${org}/profile/${type}/user`,
+  dataUserEvaByType: (type: string) => `${org}/profile/${type}/user`,
 
   dataUserOther: `${profileOrg}/other/user`,
   dataUserOtherByType: (type: string) => `${org}/profile${type}/other/user`,
diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index 0cdf723..d207626 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, reactive, onMounted, watch, nextTick } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -71,7 +71,7 @@ async function onCilckNextStep() {
   store.step === 1
     ? checkSelectForm()
     : store.step === 2 || store.step === 6
-    ? validateForm()
+    ? onSubmitFormData()
     : store.step == 3 || store.step == 7
     ? dialogConfirm(
         $q,
@@ -85,35 +85,44 @@ async function onCilckNextStep() {
 }
 
 /** function validateForm Step 2,4*/
-async function validateForm() {
+async function onSubmitFormData() {
   store.checkFileupload = !store.checkFileupload;
-  const emptyValues = downloadFileRef.value.filter((e: string) => e === "");
-  const hasError = [];
-  for (const key in formCommandRef) {
-    if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
-      const property = formCommandRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (emptyValues.length > 0 && store.statusUpload === true) {
-    } else if (store.step === 2) {
-      if (store.statusUpload === false) {
-        saveStep2();
-      } else {
+  console.log(store.statusUpload6);
+
+  if (store.step === 2) {
+    if (!store.statusUpload) {
+      saveStep2();
+    } else {
+      if (!downloadFile.value.some((e: string) => e === "")) {
         nextTostep3();
       }
+    }
+  } else {
+    if (!store.statusUpload6) {
+      saveStep6();
     } else {
-      if (store.statusUpload6 === false) {
-        saveStep6();
-      } else {
+      if (!downloadFile.value.some((e: string) => e === "")) {
         nextTostep7();
       }
     }
   }
+
+  // const emptyValues = downloadFileRef.value.filter((e: string) => e === "");
+  // const hasError = [];
+  // for (const key in formCommandRef) {
+  //   if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
+  //     const property = formCommandRef[key];
+
+  //     if (property.value && typeof property.value.validate === "function") {
+  //       const isValid = property.value.validate();
+  //       hasError.push(isValid);
+  //     }
+  //   }
+  // }
+  // if (hasError.every((result) => result === true)) {
+  //   if (emptyValues.length > 0 && store.statusUpload === true) {
+  // }
+  // }
 }
 
 const pdfSrc = ref<any>();
@@ -250,19 +259,7 @@ function checkSelectForm() {
 /** function บันทักตรวจสอบคุณสมบัติ*/
 async function saveStep1() {
   showLoader();
-
   const salaries = formDetail.value.salaries.map((e: any) => ({
-    // amount: e.amount,
-    // date: e.date,
-    // mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
-    // posNo: e.posNo,
-    // position: e.position,
-    // positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
-    // refCommandDate: e.refCommandDate,
-    // refCommandNo: e.refCommandNo ? e.refCommandNo : "",
-    // salaryClass: e.salaryClass ? e.salaryClass : "",
-    // salaryRef: e.salaryRef ? e.salaryRef : "",
-    // salaryStatus: e.salaryStatus ? e.salariesStatus : "",
     profileId: e.profileId,
     commandCode: e.commandCode,
     commandNo: e.commandNo,
@@ -317,16 +314,32 @@ async function saveStep1() {
     startDate: e.startDate,
   }));
 
-  const assessments = formDetail.value.assessments.map((e: any) => ({
-    date: e.date,
-    point1: e.point1,
-    point1Total: e.point1Total,
-    point2: e.point2,
-    point2Total: e.point2Total,
-    pointSum: e.pointSum,
-    pointSumTotal: e.pointSumTotal,
+  const certificates = formDetail.value.certificates.map((e: any) => ({
+    ...e,
   }));
 
+  const trainings = formDetail.value.trainings.map((e: any) => ({
+    ...e,
+  }));
+
+  const performances = formDetail.value.assessments.map(
+    ({ id, ...rest }: any) => ({
+      ...rest,
+    })
+  );
+  const portfolios = formDetail.value.experience.map(
+    ({
+      id,
+      lastUpdatedAt,
+      lastUpdateFullName,
+      createdFullName,
+      createdAt,
+      ...rest
+    }: any) => ({
+      ...rest,
+    })
+  );
+
   const evaluateType = route.params.type.toString();
   const form = {
     root: formDetail.value.root,
@@ -353,10 +366,11 @@ async function saveStep1() {
     isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
     reason: "",
     educations: [...educations],
-    certificates: [...formDetail.value.certificates],
+    certificates: [...certificates],
     salaries: [...salaries],
-    trainings: [...formDetail.value.trainings],
-    assessments: [...assessments],
+    trainings: [...trainings],
+    performances: [...performances],
+    portfolios: [...portfolios],
   };
 
   await http
@@ -378,41 +392,20 @@ const statusUpload = ref<boolean>(false);
 const formCommand = reactive<FormCommand>({
   commanderFullname: "",
   commanderPosition: "",
+  commanderPositionOld: "",
+  commanderOrg: "",
+  commanderOrgOld: "",
   commanderAboveFullname: "",
   commanderAbovePosition: "",
+  commanderAbovePositionOld: "",
+  commanderAboveOrgOld: "",
+  commanderAboveOrg: "",
   author: "",
-  subject: "",
+  subject: [],
   assignedPosition: "",
 });
-const commanderFullnameRef = ref<object | null>(null);
-const commanderPositionRef = ref<object | null>(null);
-const commanderAboveFullnameRef = ref<object | null>(null);
-const commanderAbovePositionRef = ref<object | null>(null);
-const fileEvaluation1Ref = ref<object | null>(null);
-const fileEvaluation2Ref = ref<object | null>(null);
-const fileEvaluation3Ref = ref<object | null>(null);
-const fileEvaluation4Ref = ref<object | null>(null);
-const fileEvaluation5Ref = ref<object | null>(null);
-const fileEvaluation6Ref = ref<object | null>(null);
-const performanceRef = ref<object | null>(null);
-const performanceOwnerRef = ref<object | null>(null);
-const assignedPositionRef = ref<object | null>(null);
-const formCommandRef: FormCommandRef = {
-  commanderFullname: commanderFullnameRef,
-  commanderPosition: commanderPositionRef,
-  commanderAboveFullname: commanderAboveFullnameRef,
-  commanderAbovePosition: commanderAbovePositionRef,
-  fileEvaluation1: fileEvaluation1Ref,
-  fileEvaluation2: fileEvaluation2Ref,
-  fileEvaluation3: fileEvaluation3Ref,
-  fileEvaluation4: fileEvaluation4Ref,
-  fileEvaluation5: fileEvaluation5Ref,
-  fileEvaluation6: fileEvaluation6Ref,
-  performance: performanceRef,
-  performanceOwner: performanceOwnerRef,
-  assignedPosition: assignedPositionRef,
-};
-const downloadFileRef = ref<any>();
+const downloadFile = ref<string[]>([]);
+
 /**
  * function  อัปเดท ผลงาน,ผู้เซ็นเอกสาร, Ref
  * @param val ผู้เซ็นเอกสาร
@@ -421,38 +414,22 @@ const downloadFileRef = ref<any>();
 function updateformCommand(val: any, ref: any) {
   formCommand.commanderFullname = val.commanderFullname;
   formCommand.commanderPosition = val.commanderPosition;
+  formCommand.commanderPositionOld = val.commanderPositionOld;
+  formCommand.commanderOrg = val.commanderOrg;
+  formCommand.commanderOrgOld = val.commanderOrgOld;
   formCommand.commanderAboveFullname = val.commanderAboveFullname;
   formCommand.commanderAbovePosition = val.commanderAbovePosition;
+  formCommand.commanderAbovePositionOld = val.commanderAbovePositionOld;
+  formCommand.commanderAboveOrgOld = val.commanderAboveOrgOld;
+  formCommand.commanderAboveOrg = val.commanderAboveOrg;
   formCommand.author = val.author;
   formCommand.subject = val.subject;
   formCommand.assignedPosition = val.assignedPosition;
-  commanderFullnameRef.value = ref.commanderFullnameRef;
-  commanderPositionRef.value = ref.commanderPositionRef;
-  commanderAboveFullnameRef.value = ref.commanderAboveFullnameRef;
-  commanderAbovePositionRef.value = ref.commanderAbovePositionRef;
-  fileEvaluation1Ref.value = ref.fileEvaluation1Ref;
-  fileEvaluation2Ref.value = ref.fileEvaluation2Ref;
-  fileEvaluation3Ref.value = ref.fileEvaluation3Ref;
-  fileEvaluation4Ref.value = ref.fileEvaluation4Ref;
-  fileEvaluation5Ref.value = ref.fileEvaluation5Ref;
-  fileEvaluation6Ref.value = ref.fileEvaluation6Ref;
-  downloadFileRef.value = ref.downloadFile;
-  performanceRef.value = ref.performance;
-  performanceOwnerRef.value = ref.performanceOwner;
-  assignedPositionRef.value = ref.assignedPosition;
+  downloadFile.value = ref.downloadFile;
   statusUpload.value = ref.statusUpload;
 }
 /** function บันทึกข้อมูล ผลงานม,ผู้เซ็นเอกสาร*/
 async function saveStep2() {
-  const body = {
-    commanderFullname: formCommand.commanderFullname,
-    commanderPosition: formCommand.commanderPosition,
-    commanderAboveFullname: formCommand.commanderAboveFullname,
-    commanderAbovePosition: formCommand.commanderAbovePosition,
-    author: formCommand.author,
-    subject: formCommand.subject,
-  };
-
   dialogConfirm(
     $q,
     async () => {
@@ -465,7 +442,7 @@ async function saveStep2() {
             route.params.id.toString(),
             "director"
           ),
-          body
+          { ...formCommand, assignedPosition: undefined }
         )
         .then(() => {
           route.params.id && fetchCheckStep(route.params.id.toString());
@@ -530,8 +507,14 @@ async function saveStep6() {
   const body = {
     commanderAboveFullnameDoc2: formCommand.commanderAboveFullname,
     commanderAbovePositionDoc2: formCommand.commanderAbovePosition,
+    commanderAbovePositionOldDoc2: formCommand.commanderAbovePositionOld,
+    commanderAboveOrgOldDoc2: formCommand.commanderAboveOrgOld,
+    commanderAboveOrgDoc2: formCommand.commanderAboveOrg,
     commanderFullnameDoc2: formCommand.commanderFullname,
     commanderPositionDoc2: formCommand.commanderPosition,
+    commanderPositionOldDoc2: formCommand.commanderPositionOld,
+    commanderOrgDoc2: formCommand.commanderOrg,
+    commanderOrgOldDoc2: formCommand.commanderOrgOld,
     authorDoc2: formCommand.author,
     subjectDoc2: formCommand.subject,
     assignedPosition: formCommand.assignedPosition,
@@ -679,164 +662,172 @@ onMounted(async () => {
               </div>
             </div>
           </div>
-
-          <div class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
-            <div class="col-12 row items-center">
-              <div class="toptitle2">
-                {{ store.step }}.{{ store.title[store.step - 1] }}
+          <q-form
+            class="col-xs-12 col-sm-9"
+            greedy
+            @submit.prevent
+            @validation-success="onCilckNextStep"
+          >
+            <div class="col-xs-12 col-sm-9 q-pa-md" v-if="showLoadStatus">
+              <div class="col-12 row items-center">
+                <div class="toptitle2">
+                  {{ store.step }}.{{ store.title[store.step - 1] }}
+                </div>
+                <q-space />
+                <div>
+                  <q-btn
+                    v-if="store.step === 1"
+                    :href="externalLink"
+                    target="_blank"
+                    outline
+                    color="blue"
+                    dense
+                    class="q-px-md"
+                    no-caps
+                  >
+                    ตรวจสอบคุณสมบัติกับ ก.พ.
+                  </q-btn>
+                </div>
               </div>
-              <q-space />
-              <div>
-                <q-btn
-                  v-if="store.step === 1"
-                  :href="externalLink"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  dense
-                  class="q-px-md"
-                  no-caps
-                >
-                  ตรวจสอบคุณสมบัติกับ ก.พ.
-                </q-btn>
-              </div>
-            </div>
-            <div class="col-12 q-pt-sm">
-              <div class="q-col-gutter-md col-12 row">
-                <div
-                  :class="
-                    store.step === 2 ||
-                    store.step === 4 ||
-                    store.step === 5 ||
-                    store.step === 6 ||
-                    store.step === 8 ||
-                    store.step === 9
-                      ? 'col-12 row'
-                      : 'col-xs-12 col-sm-5 row'
-                  "
-                >
-                  <q-card
-                    flat
-                    bordered
-                    class="col-12 shadow-0"
-                    :style="
-                      $q.screen.lt.sm
-                        ? ''
-                        : 'max-height: 60vh; overflow: scroll;'
+              <div class="col-12 q-pt-sm">
+                <div class="q-col-gutter-md col-12 row">
+                  <div
+                    :class="
+                      store.step === 2 ||
+                      store.step === 4 ||
+                      store.step === 5 ||
+                      store.step === 6 ||
+                      store.step === 8 ||
+                      store.step === 9
+                        ? 'col-12 row'
+                        : 'col-xs-12 col-sm-5 row'
                     "
                   >
-                    <Step1
-                      v-if="store.step === 1"
-                      @update:spec="updateCheckSpec"
-                      :data="formDataStep1"
-                      :educations="formDetail?.educations"
-                    />
-                    <Step2
-                      v-if="store.step === 2"
-                      @update:form="updateformCommand"
-                    />
-                    <Step3
-                      v-if="store.step === 3"
-                      @update:file="updateFilePDF"
-                    />
-                    <Step4 v-if="store.step === 4" />
-                    <Step5 v-if="store.step === 5" />
-                    <Step6
-                      v-if="store.step === 6"
-                      @update:form="updateformCommand"
-                    />
-                    <Step7
-                      v-if="store.step === 7"
-                      @update:file="updateFilePDF"
-                    />
-                    <Step8 v-if="store.step === 8" />
-                    <Step9 v-if="store.step === 9" />
-                  </q-card>
-                </div>
-                <div
-                  class="col-xs-12 col-sm-7"
-                  v-if="
-                    store.step === 1 || store.step === 3 || store.step === 7
-                  "
-                >
-                  <div class="col-12">
-                    <ViewStep1
-                      v-if="store.step === 1"
-                      @update:formDeital="updateFormDetail"
-                      :data="formDataStep1"
-                    />
-                    <ViewStep3
-                      v-if="store.step === 3 && pdfSrc"
-                      :pdfSrc="pdfSrc"
-                      :urlDownloadFile="urlDownloadFile"
-                    />
-                    <ViewStep7
-                      v-if="store.step === 7 && pdfSrc"
-                      :pdfSrc="pdfSrc"
-                      :urlDownloadFile="urlDownloadFile"
-                    />
+                    <q-card
+                      flat
+                      bordered
+                      class="col-12 shadow-0"
+                      :style="
+                        $q.screen.lt.sm
+                          ? ''
+                          : 'max-height: 60vh; overflow: scroll;'
+                      "
+                    >
+                      <Step1
+                        v-if="store.step === 1"
+                        @update:spec="updateCheckSpec"
+                        :data="formDataStep1"
+                        :educations="formDetail?.educations"
+                      />
+                      <Step2
+                        v-if="store.step === 2"
+                        @update:form="updateformCommand"
+                      />
+                      <Step3
+                        v-if="store.step === 3"
+                        @update:file="updateFilePDF"
+                      />
+                      <Step4 v-if="store.step === 4" />
+                      <Step5 v-if="store.step === 5" />
+                      <Step6
+                        v-if="store.step === 6"
+                        @update:form="updateformCommand"
+                      />
+                      <Step7
+                        v-if="store.step === 7"
+                        @update:file="updateFilePDF"
+                      />
+                      <Step8 v-if="store.step === 8" />
+                      <Step9 v-if="store.step === 9" />
+                    </q-card>
+                  </div>
+                  <div
+                    class="col-xs-12 col-sm-7"
+                    v-if="
+                      store.step === 1 || store.step === 3 || store.step === 7
+                    "
+                  >
+                    <div class="col-12">
+                      <ViewStep1
+                        v-if="store.step === 1"
+                        @update:formDeital="updateFormDetail"
+                        :data="formDataStep1"
+                      />
+                      <ViewStep3
+                        v-if="store.step === 3 && pdfSrc"
+                        :pdfSrc="pdfSrc"
+                        :urlDownloadFile="urlDownloadFile"
+                      />
+                      <ViewStep7
+                        v-if="store.step === 7 && pdfSrc"
+                        :pdfSrc="pdfSrc"
+                        :urlDownloadFile="urlDownloadFile"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
+              <q-card-actions
+                class="q-pt-sm q-pa-none q-gutter-sm"
+                align="right"
+              >
+                <q-btn
+                  v-if="
+                    store.step >= store.currentStep &&
+                    store.statusUpload === false &&
+                    store.step !== 3 &&
+                    store.step !== 4 &&
+                    store.step !== 5 &&
+                    store.step !== 7 &&
+                    store.step !== 8 &&
+                    store.step !== 9
+                  "
+                  unelevated
+                  :label="
+                    store.step === 2 || store.step === 6
+                      ? 'บันทึกข้อมูล'
+                      : 'ดำเนินการต่อ'
+                  "
+                  color="public"
+                  type="submit"
+                />
+
+                <q-btn
+                  v-else-if="
+                    store.step >= store.currentStep &&
+                    (store.step == 3 || store.step == 7)
+                  "
+                  unelevated
+                  label="ยื่นเอกสาร"
+                  color="public"
+                  type="submit"
+                />
+
+                <q-btn
+                  v-if="
+                    store.step >= store.currentStep &&
+                    store.step == 2 &&
+                    store.statusUpload
+                  "
+                  unelevated
+                  label="ดำเนินการต่อ"
+                  color="public"
+                  type="submit"
+                />
+                <q-btn
+                  v-if="
+                    store.step >= store.currentStep &&
+                    store.step == 6 &&
+                    store.statusUpload
+                  "
+                  unelevated
+                  label="ดำเนินการต่อ"
+                  color="public"
+                  type="submit"
+                />
+              </q-card-actions>
             </div>
-            <q-card-actions class="q-pt-sm q-pa-none q-gutter-sm" align="right">
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.statusUpload === false &&
-                  store.step !== 3 &&
-                  store.step !== 4 &&
-                  store.step !== 5 &&
-                  store.step !== 7 &&
-                  store.step !== 8 &&
-                  store.step !== 9
-                "
-                unelevated
-                :label="
-                  store.step === 2 || store.step === 6
-                    ? 'บันทึกข้อมูล'
-                    : 'ดำเนินการต่อ'
-                "
-                color="public"
-                @click="onCilckNextStep()"
-              />
-
-              <q-btn
-                v-else-if="
-                  store.step >= store.currentStep &&
-                  (store.step == 3 || store.step == 7)
-                "
-                unelevated
-                label="ยื่นเอกสาร"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.step == 2 &&
-                  store.statusUpload
-                "
-                unelevated
-                label="ดำเนินการต่อ"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-              <q-btn
-                v-if="
-                  downloadFileRef &&
-                  store.step >= store.currentStep &&
-                  store.step == 6 &&
-                  store.statusUpload
-                "
-                unelevated
-                label="ดำเนินการต่อ"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-            </q-card-actions>
-          </div>
+          </q-form>
         </q-card>
       </div>
     </div>
diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index ec64486..3050195 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -31,26 +31,53 @@ const emit = defineEmits(["update:form"]);
 const formCommand = reactive<FormCommand>({
   commanderFullname: "",
   commanderPosition: "",
+  commanderPositionOld: "",
+  commanderOrg: "",
+  commanderOrgOld: "",
   commanderAboveFullname: "",
   commanderAbovePosition: "",
+  commanderAbovePositionOld: "",
+  commanderAboveOrgOld: "",
+  commanderAboveOrg: "",
   author: "",
-  subject: "",
+  subject: [""],
   assignedPosition: "",
 });
 
-/** formRef */
-const commanderFullnameRef = ref<object | null>(null);
-const commanderPositionRef = ref<object | null>(null);
-const commanderAboveFullnameRef = ref<object | null>(null);
-const commanderAbovePositionRef = ref<object | null>(null);
-const fileEvaluation1Ref = ref<object | null>(null);
-const fileEvaluation2Ref = ref<object | null>(null);
-const fileEvaluation3Ref = ref<object | null>(null);
-const fileEvaluation4Ref = ref<object | null>(null);
-const fileEvaluation5Ref = ref<object | null>(null);
-const fileEvaluation6Ref = ref<object | null>(null);
-const performanceRef = ref<object | null>(null);
-const performanceOwnerRef = ref<object | null>(null);
+const formTemplates = ref<any[]>([
+  {
+    code: "EV1_005",
+    templateName: "template-1",
+    title: "แบบพิจารณาคุณสมบัติบุคคล",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_006",
+    templateName: "template-2",
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_008",
+    templateName: "template-4",
+    title: "แบบประเมินคุณลักษณะบุคคล",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_010",
+    templateName: "template-6",
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    downloadFile: "",
+    file: null,
+  },
+]);
 
 /**
  * function updateFormref
@@ -58,39 +85,12 @@ const performanceOwnerRef = ref<object | null>(null);
  */
 function updateInput(val: any) {
   const ref = {
-    commanderFullnameRef: commanderFullnameRef.value,
-    commanderPositionRef: commanderPositionRef.value,
-    commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-    commanderAbovePositionRef: commanderAbovePositionRef.value,
-    fileEvaluation1Ref: fileEvaluation1Ref.value,
-    fileEvaluation2Ref: fileEvaluation2Ref.value,
-    fileEvaluation3Ref: fileEvaluation3Ref.value,
-    fileEvaluation4Ref: fileEvaluation4Ref.value,
-    fileEvaluation5Ref: fileEvaluation5Ref.value,
-    fileEvaluation6Ref: fileEvaluation6Ref.value,
-    downloadFile: [
-      downloadFile1.value,
-      downloadFile2.value,
-      downloadFile3.value,
-      downloadFile4.value,
-      downloadFile5.value,
-      downloadFile6.value,
-    ],
-    performance: performanceRef.value,
-    performanceOwner: performanceOwnerRef.value,
-    statusUpload: store.statusUpload,
+    statusUpload: false,
+    downloadFile: formTemplates.value.map((e) => e.downloadFile),
   };
   emit("update:form", val, ref); // ส่งข้อมูลไปอัปเดท
 }
 
-/** ตัวแปร file*/
-const fileEvaluation1 = ref<File | null>();
-const fileEvaluation2 = ref<File | null>();
-const fileEvaluation3 = ref<File | null>();
-const fileEvaluation4 = ref<File | null>();
-const fileEvaluation5 = ref<File | null>();
-const fileEvaluation6 = ref<File | null>();
-
 const modalView = ref<boolean>(false);
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
@@ -123,13 +123,13 @@ async function onClickDowloadFile(
   fileName: string
 ) {
   showLoader();
-
   const body = {
     template: tp,
     reportName: templateName,
     data: profile.value,
   };
   await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
+  hideLoader();
 }
 
 /**
@@ -170,10 +170,9 @@ async function fetchPathUpload(
       })
       .catch((err) => {
         messageError($q, err);
-        hideLoader();
       })
       .finally(() => {
-        // hideLoader();
+        hideLoader();
       });
   }
 }
@@ -195,9 +194,6 @@ async function uploadfile(uploadUrl: string, file: any) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -206,16 +202,20 @@ async function uploadfile(uploadUrl: string, file: any) {
  * @param id evaluate ID
  */
 function fetcheSigner(id: string) {
-  showLoader();
   http
     .get(config.API.evaluationSignerDoc1(id))
     .then((res) => {
       const data = res.data.result;
-
       formCommand.commanderFullname = data.commanderFullname;
       formCommand.commanderPosition = data.commanderPosition;
+      formCommand.commanderPositionOld = data.commanderPositionOld;
+      formCommand.commanderOrg = data.commanderOrg;
+      formCommand.commanderOrgOld = data.commanderOrgOld;
       formCommand.commanderAboveFullname = data.commanderAboveFullname;
       formCommand.commanderAbovePosition = data.commanderAbovePosition;
+      formCommand.commanderAbovePositionOld = data.commanderAbovePositionOld;
+      formCommand.commanderAboveOrgOld = data.commanderAboveOrgOld;
+      formCommand.commanderAboveOrg = data.commanderAboveOrg;
       formCommand.author = data.author;
       formCommand.subject = data.subject;
       store.statusUpload = true;
@@ -223,11 +223,6 @@ function fetcheSigner(id: string) {
     .catch(() => {
       store.statusUpload = false;
       getCommander();
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
@@ -236,7 +231,6 @@ function fetcheSigner(id: string) {
  * @param id  evaluate ID
  */
 async function fetchCheckSpec(id: string) {
-  showLoader();
   await http
     .get(config.API.evaluationReportCheckspecByid(id))
     .then((res) => {
@@ -245,85 +239,31 @@ async function fetchCheckSpec(id: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
-const downloadFile1 = ref<string>("");
-const downloadFile2 = ref<string>("");
-const downloadFile3 = ref<string>("");
-const downloadFile4 = ref<string>("");
-const downloadFile5 = ref<string>("");
-const downloadFile6 = ref<string>("");
-
 /**
  * function ดาวน์โหลดไฟล์
  * @param fileName ชื่อไฟล์
  */
 async function downloadFile(fileName: string) {
-  // showLoader();
   await http
     .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
     .then((res) => {
-      if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
-        downloadFile1.value = res.data.downloadUrl;
-        // fileEvaluation1.value = res.data.upload;
-      } else if (fileName === "2-แบบแสดงรายละเอียดการเสนอผลงาน") {
-        downloadFile2.value = res.data.downloadUrl;
-        // fileEvaluation2.value = res.data.upload;
-      } else if (
-        fileName ===
-        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
-      ) {
-        downloadFile3.value = res.data.downloadUrl;
-        // fileEvaluation3.value = res.data.upload;
-      } else if (fileName === "4-แบบประเมินคุณลักษณะบุคคล") {
-        downloadFile4.value = res.data.downloadUrl;
-        // fileEvaluation4.value = res.data.upload;
-      } else if (
-        fileName === "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"
-      ) {
-        downloadFile5.value = res.data.downloadUrl;
-        // fileEvaluation5.value = res.data.upload;
-      } else if (fileName === "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)") {
-        downloadFile6.value = res.data.downloadUrl;
-        // fileEvaluation6.value = res.data.upload;
+      const index = formTemplates.value.findIndex(
+        (item) => item.fileName === fileName
+      );
+      if (index !== -1) {
+        formTemplates.value[index].downloadFile = res.data.downloadUrl;
       }
     })
     .finally(() => {
       const ref = {
-        commanderFullnameRef: commanderFullnameRef.value,
-        commanderPositionRef: commanderPositionRef.value,
-        commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-        commanderAbovePositionRef: commanderAbovePositionRef.value,
-        fileEvaluation1Ref: fileEvaluation1Ref.value,
-        fileEvaluation2Ref: fileEvaluation2Ref.value,
-        fileEvaluation3Ref: fileEvaluation3Ref.value,
-        fileEvaluation4Ref: fileEvaluation4Ref.value,
-        fileEvaluation5Ref: fileEvaluation5Ref.value,
-        fileEvaluation6Ref: fileEvaluation6Ref.value,
-        performance: performanceRef.value,
-        performanceOwner: performanceOwnerRef.value,
-        downloadFile: [
-          downloadFile1.value,
-          downloadFile2.value,
-          downloadFile3.value,
-          downloadFile4.value,
-          downloadFile5.value,
-          downloadFile6.value,
-        ],
         statusUpload: false,
+        downloadFile: formTemplates.value.map((e) => e.downloadFile),
       };
 
       emit("update:form", formCommand, ref);
-
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
@@ -339,32 +279,24 @@ function getCommander() {
     })
     .catch((e) => {
       console.log(e);
-      // messageError($q, e);
     });
 }
+
+function onAddSubject() {
+  formCommand.subject.push("");
+}
+
+function onDeleteSubject(index: number) {
+  formCommand.subject.splice(index, 1);
+}
+
 /** callback function */
 watch(
   () => store.checkFileupload,
   () => {
-    const fileEvaluationValues = [
-      fileEvaluation1,
-      fileEvaluation2,
-      fileEvaluation3,
-      fileEvaluation4,
-      fileEvaluation5,
-      fileEvaluation6,
-    ];
-    const downloadFileValues = [
-      downloadFile1,
-      downloadFile2,
-      downloadFile3,
-      downloadFile4,
-      downloadFile5,
-      downloadFile6,
-    ];
-    for (let i = 0; i < downloadFileValues.length; i++) {
-      if (downloadFileValues[i].value === "") {
-        fileEvaluationValues[i].value = null;
+    for (let i = 0; i < formTemplates.value.length; i++) {
+      if (formTemplates.value[i].downloadFile === "") {
+        formTemplates.value[i].file = null;
       }
     }
   }
@@ -385,19 +317,29 @@ onMounted(async () => {
   if (user) {
     formCommand.author = user.name;
   }
-  showLoader();
-  await Promise.all([
-    fetcheSigner(evaluateId.value),
-    fetchCheckSpec(evaluateId.value),
-    downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
-    downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
-    downloadFile(
-      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
-    ),
-    downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
-    downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
-    downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
-  ]);
+
+  try {
+    showLoader();
+    await Promise.all([
+      fetcheSigner(evaluateId.value),
+      fetchCheckSpec(evaluateId.value),
+      formTemplates.value.forEach((e) => {
+        downloadFile(e.fileName);
+      }),
+      // downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
+      // downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
+      // downloadFile(
+      //   "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
+      // ),
+      // downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
+      // downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
+      // downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
+    ]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -412,32 +354,67 @@ onMounted(async () => {
         <div class="col-12"><q-separator /></div>
         <div class="col-12 q-pa-sm">
           <div class="row q-col-gutter-sm">
-            <q-input
-              :readonly="store.currentStep != 2 || store.statusUpload"
-              ref="performanceRef"
-              dense
-              class="col-xs-12 col-sm-6"
-              outlined
-              label="ชื่อผลงาน"
-              v-model="formCommand.subject"
-              @update:model-value="updateInput(formCommand)"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-              lazy-rules
-              hide-bottom-space
-            />
-            <q-input
-              :readonly="store.currentStep != 2 || store.statusUpload"
-              ref="performanceOwnerRef"
-              class="col-xs-12 col-sm-6"
-              dense
-              outlined
-              v-model="formCommand.author"
-              @update:model-value="updateInput(formCommand)"
-              label="เจ้าของผลงาน"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
-              lazy-rules
-              hide-bottom-space
-            />
+            <div class="col-12">
+              <q-input
+                :readonly="store.currentStep != 2 || store.statusUpload"
+                dense
+                outlined
+                v-model="formCommand.author"
+                @update:model-value="updateInput(formCommand)"
+                label="เจ้าของผลงาน"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div
+              class="col-12"
+              v-if="store.currentStep === 2 && !store.statusUpload"
+            >
+              <q-btn
+                flat
+                round
+                color="primary"
+                icon="add"
+                @click="onAddSubject"
+              >
+                <q-tooltip>เพิ่มชื่อผลงาน</q-tooltip>
+              </q-btn>
+            </div>
+            <div
+              class="row col-12 q-col-gutter-sm"
+              v-for="(item, index) in formCommand.subject"
+              :key="index"
+            >
+              <div class="col-11">
+                <q-input
+                  :readonly="store.currentStep != 2 || store.statusUpload"
+                  dense
+                  outlined
+                  label="ชื่อผลงาน"
+                  v-model="formCommand.subject[index]"
+                  @update:model-value="updateInput(formCommand)"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div
+                class="row col-1 items-centet justify-center"
+                v-if="index !== 0"
+              >
+                <q-btn
+                  v-if="store.currentStep === 2 && !store.statusUpload"
+                  flat
+                  round
+                  color="red"
+                  icon="delete"
+                  @click="onDeleteSubject(index)"
+                >
+                  <q-tooltip>ลบ</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
           </div>
         </div>
       </q-card>
@@ -459,7 +436,6 @@ onMounted(async () => {
               <div class="row col-12 q-col-gutter-sm q-pa-sm">
                 <q-input
                   :readonly="store.currentStep != 2 || store.statusUpload"
-                  ref="commanderFullnameRef"
                   dense
                   class="col-xs-12 col-sm-6"
                   outlined
@@ -470,19 +446,58 @@ onMounted(async () => {
                   lazy-rules
                   hide-bottom-space
                 />
-                <q-input
-                  :readonly="store.currentStep != 2 || store.statusUpload"
-                  ref="commanderPositionRef"
-                  class="col-xs-12 col-sm-6"
-                  dense
-                  outlined
-                  v-model="formCommand.commanderPosition"
-                  @update:model-value="updateInput(formCommand)"
-                  label="ตำแหน่ง"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                  lazy-rules
-                  hide-bottom-space
-                />
+                <div class="col-12">
+                  <div class="row col-12 q-col-gutter-sm">
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderPosition"
+                      @update:model-value="updateInput(formCommand)"
+                      label="ตำแหน่ง"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderPositionOld"
+                      @update:model-value="updateInput(formCommand)"
+                      label="ตำแหน่งเดิม"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderOrg"
+                      @update:model-value="updateInput(formCommand)"
+                      label="สังกัด"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderOrgOld"
+                      @update:model-value="updateInput(formCommand)"
+                      label="สังกัดเดิม"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -494,7 +509,6 @@ onMounted(async () => {
               <div class="row col-12 q-col-gutter-md q-pa-sm">
                 <q-input
                   :readonly="store.currentStep != 2 || store.statusUpload"
-                  ref="commanderAboveFullnameRef"
                   dense
                   class="col-xs-12 col-sm-6"
                   outlined
@@ -505,19 +519,59 @@ onMounted(async () => {
                   @update:model-value="updateInput(formCommand)"
                   hide-bottom-space
                 />
-                <q-input
-                  :readonly="store.currentStep != 2 || store.statusUpload"
-                  ref="commanderAbovePositionRef"
-                  class="col-xs-12 col-sm-6"
-                  dense
-                  outlined
-                  v-model="formCommand.commanderAbovePosition"
-                  label="ตำแหน่ง"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                  lazy-rules
-                  hide-bottom-space
-                  @update:model-value="updateInput(formCommand)"
-                />
+
+                <div class="col-12">
+                  <div class="row col-12 q-col-gutter-sm">
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAbovePosition"
+                      label="ตำแหน่ง"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAbovePositionOld"
+                      label="ตำแหน่งเดิม"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAboveOrg"
+                      label="สังกัด"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-3"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAboveOrgOld"
+                      label="สังกัดเดิม"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -527,8 +581,97 @@ onMounted(async () => {
 
     <!-- v-if="store.statusUpload -->
     <div class="row q-col-gutter-sm">
+      <div
+        class="col-6"
+        v-if="store.currentStep === 2"
+        v-for="(item, index) in formTemplates"
+        :key="index"
+      >
+        <q-card bordered class="cardSp1">
+          <div
+            class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+          >
+            <div>{{ item.title }}</div>
+            <q-space />
+            <div>
+              <q-btn
+                flat
+                dense
+                icon="download"
+                color="indigo"
+                @click="
+                  onClickDowloadFile(item.code, item.templateName, item.title)
+                "
+              >
+                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+              >
+            </div>
+            <div>
+              <q-btn
+                v-if="item.downloadFile != ''"
+                :href="item.downloadFile"
+                target="_blank"
+                class="q-ml-sm"
+                color="blue"
+                flat
+                dense
+                icon="visibility"
+              >
+                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+              >
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="row">
+            <div class="col-12 q-pa-sm">
+              <div class="row q-col-gutter-md col-12">
+                <q-file
+                  v-model="item.file"
+                  :disable="!store.statusUpload"
+                  class="col-xs-12 col-sm-12"
+                  label="อัปโหลดไฟล์"
+                  outlined
+                  dense
+                  lazy-rules
+                  hide-bottom-space
+                  accept=".pdf"
+                  :rules="
+                  item.downloadFile === ''
+                      ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
+                      : []
+                  "
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                  <template v-slot:after>
+                    <q-btn
+                      :disable="!store.statusUpload"
+                      flat
+                      round
+                      dense
+                      color="primary"
+                      icon="mdi-upload"
+                      @click="
+                        fetchPathUpload(
+                          'เล่ม 1',
+                          evaluateId,
+                          item.fileName,
+                          item.file
+                        )
+                      "
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </template>
+                </q-file>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
       <!-- แบบพิจารณาคุณสมบัติบุคคล -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
@@ -615,10 +758,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
@@ -705,10 +848,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
@@ -795,10 +938,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
@@ -884,10 +1027,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!-- แบบประเมินคุณลักษณะบุคคล -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
@@ -972,10 +1115,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
 
       <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
-      <div class="col-6" v-if="store.currentStep === 2">
+      <!-- <div class="col-6" v-if="store.currentStep === 2">
         <q-card bordered class="cardSp1">
           <div
             class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
@@ -1060,7 +1203,7 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
-      </div>
+      </div> -->
     </div>
   </div>
 
diff --git a/src/modules/06_evaluate/components/step/step3.vue b/src/modules/06_evaluate/components/step/step3.vue
index 8333f63..019a960 100644
--- a/src/modules/06_evaluate/components/step/step3.vue
+++ b/src/modules/06_evaluate/components/step/step3.vue
@@ -22,13 +22,23 @@ const evaluateId = ref<string>(route.params.id.toString());
 const emit = defineEmits(["update:file"]);
 
 const selectedItem = ref(1);
-const fileName = ref([
-  "1-แบบพิจารณาคุณสมบัติบุคคล",
-  "2-แบบแสดงรายละเอียดการเสนอผลงาน",
-  "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
-  "4-แบบประเมินคุณลักษณะบุคคล",
-  "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
-  "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+const formTemplates = ref([
+  {
+    title: "แบบพิจารณาคุณสมบัติบุคคล",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
+  },
+  {
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+  },
+  {
+    title: "แบบประเมินคุณลักษณะบุคคล",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล",
+  },
+  {
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+  },
 ]);
 
 /**
@@ -38,7 +48,7 @@ const fileName = ref([
 function handleItemClick(itemNumber: number) {
   store.tabPanels = itemNumber.toString();
   selectedItem.value = itemNumber;
-  fetchDocument(fileName.value[itemNumber - 1]);
+  fetchDocument(formTemplates.value[itemNumber - 1].fileName);
 }
 
 /**
@@ -50,14 +60,14 @@ async function fetchDocument(fileName: string) {
   evaluateId.value &&
     (await http
       .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
-      .then((res) => {
-        downloadFile(res.data.downloadUrl);
+      .then(async (res) => {
+        await downloadFile(res.data.downloadUrl);
       })
       .catch((err) => {
         messageError($q, err);
       })
       .finally(() => {
-        showLoader();
+        hideLoader();
       }));
 }
 
@@ -66,7 +76,6 @@ async function fetchDocument(fileName: string) {
  * @param url ลิงก์ดาวน์โหลดไฟล์
  */
 async function downloadFile(url: string) {
-  showLoader();
   await axios
     .get(url, {
       responseType: "blob",
@@ -81,84 +90,28 @@ async function downloadFile(url: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /** HooK lifecycle*/
 onMounted(async () => {
-  await fetchDocument(fileName.value[selectedItem.value - 1]);
+  await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
 });
 </script>
 
 <template>
   <q-list separator>
     <q-item
+      v-for="(item, index) in formTemplates"
+      :key="index"
       clickable
       v-ripple
-      :active="selectedItem === 1 ? true : false"
+      :active="selectedItem === index + 1 ? true : false"
       active-class="text-primary"
-      @click="handleItemClick(1)"
+      @click="handleItemClick(index + 1)"
       class="cursor-pointer"
     >
-      <q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 2 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(2)"
-      class="cursor-pointer"
-    >
-      <q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 3 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(3)"
-      class="cursor-pointer"
-    >
-      <q-item-section
-        >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-        (เอกสารแบบ ก)</q-item-section
-      >
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 4 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(4)"
-      class="cursor-pointer"
-    >
-      <q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 5 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(5)"
-      class="cursor-pointer"
-    >
-      <q-item-section>
-        แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
-      </q-item-section>
-    </q-item>
-    <q-item
-      clickable
-      v-ripple
-      :active="selectedItem === 6 ? true : false"
-      active-class="text-primary"
-      @click="handleItemClick(6)"
-      class="cursor-pointer"
-    >
-      <q-item-section> ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) </q-item-section>
+      <q-item-section>{{ item.title }}</q-item-section>
     </q-item>
   </q-list>
 </template>
diff --git a/src/modules/06_evaluate/components/step/step4.vue b/src/modules/06_evaluate/components/step/step4.vue
index d4ed7b9..839f63b 100644
--- a/src/modules/06_evaluate/components/step/step4.vue
+++ b/src/modules/06_evaluate/components/step/step4.vue
@@ -1,7 +1,215 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReport from "@/plugins/genreport";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
+
+const $q = useQuasar();
+const route = useRoute();
+const store = useEvaluateStore();
+const { showLoader, hideLoader, messageError, success } = useCounterMixin();
+
+const formTemplates = ref<any[]>([
+  {
+    code: "EV1_005",
+    templateName: "template-1",
+    title: "แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
+    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_006",
+    templateName: "template-2",
+    title: "แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
+    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_008",
+    templateName: "template-4",
+    title: "แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
+    fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+  {
+    code: "EV1_010",
+    templateName: "template-6",
+    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
+    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
+    downloadFile: "",
+    file: null,
+  },
+]);
+
+const evaluateId = ref<string>(route.params.id.toString());
 const status = ref<string>("WAIT_CHECK_DOC_V1");
+
+const profile = ref<any>();
+const author = ref<string>("");
+const subject = ref<string>("");
+
+/**
+ * function
+ * @param id  evaluate ID
+ */
+async function fetchCheckSpec(id: string) {
+  await http
+    .get(config.API.evaluationReportCheckspecByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      profile.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function fecth รายชื่อผู้เซ็นเอกสาร
+ * @param id evaluate ID
+ */
+function fetcheSigner(id: string) {
+  http
+    .get(config.API.evaluationSignerDoc1(id))
+    .then((res) => {
+      const data = res.data.result;
+      author.value = data.author;
+      subject.value = data.subject;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * funcion ดาวน์โหลดไฟล์
+ * @param tp templatname
+ * @param templateName
+ * @param fileName ชือ่ไฟล์
+ */
+async function onClickDowloadFile(
+  tp: string,
+  templateName: string,
+  fileName: string
+) {
+  showLoader();
+  const body = {
+    template: tp,
+    reportName: templateName,
+    data: profile.value,
+  };
+  await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
+  hideLoader();
+}
+
+/**
+ * function fetch ลิงก์อัปโหลดไฟล์
+ * @param volume เล่ม
+ * @param id  evaluate ID
+ * @param type ประเภทไฟล์
+ * @param file ไฟล์
+ */
+async function fetchPathUpload(
+  volume: string,
+  id: string | undefined,
+  type: string,
+  file: any
+) {
+  const body = {
+    fileList: {
+      fileName: type,
+      metadata: {
+        subject: subject.value,
+        author: author.value,
+      },
+    },
+  };
+
+  if (id && file) {
+    showLoader();
+    await http
+      .post(config.API.loadPathDocument(volume, id), body)
+      .then(async (res) => {
+        const foundKey: string | undefined = Object.keys(res.data).find(
+          (key) =>
+            res.data[key]?.fileName !== undefined &&
+            res.data[key]?.fileName !== ""
+        );
+        foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
+        await downloadFile(type);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ *  functoin อัปโหลดไฟล์
+ * @param uploadUrl  link อัปโหลด
+ * @param file  ไฟล์
+ */
+async function uploadfile(uploadUrl: string, file: any) {
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      success($q, "อัปโหลไฟล์สำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function ดาวน์โหลดไฟล์
+ * @param fileName ชื่อไฟล์
+ */
+async function downloadFile(fileName: string) {
+  await http
+    .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
+    .then((res) => {
+      const index = formTemplates.value.findIndex(
+        (item) => item.fileName === fileName
+      );
+      if (index !== -1) {
+        formTemplates.value[index].downloadFile = res.data.downloadUrl;
+      }
+    });
+}
+
+/**lifecycle Hooks*/
+onMounted(async () => {
+  try {
+    showLoader();
+    await Promise.all([
+      fetcheSigner(evaluateId.value),
+      fetchCheckSpec(evaluateId.value),
+      formTemplates.value.forEach((e) => {
+        downloadFile(e.fileName);
+      }),
+    ]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
+});
 </script>
 
 <template>
@@ -15,6 +223,91 @@ const status = ref<string>("WAIT_CHECK_DOC_V1");
       style="font-size: 16px"
     />
   </div>
+
+  <div class="row q-col-gutter-sm q-pa-sm">
+    <div class="col-6" v-for="(item, index) in formTemplates" :key="index">
+      <q-card bordered class="cardSp1">
+        <div
+          class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+        >
+          <div>{{ item.title }}</div>
+          <q-space />
+          <!-- <div>
+            <q-btn
+              flat
+              dense
+              icon="download"
+              color="indigo"
+              @click="
+                onClickDowloadFile(item.code, item.templateName, item.title)
+              "
+            >
+              <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+            >
+          </div> -->
+          <div>
+            <q-btn
+              v-if="item.downloadFile != ''"
+              :href="item.downloadFile"
+              target="_blank"
+              class="q-ml-sm"
+              color="blue"
+              flat
+              dense
+              icon="visibility"
+            >
+              <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+            >
+          </div>
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row" v-if="store.currentStep === 4">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-md col-12">
+              <q-file
+                v-model="item.file"
+                class="col-xs-12 col-sm-12"
+                label="อัปโหลดไฟล์"
+                outlined
+                dense
+                lazy-rules
+                hide-bottom-space
+                accept=".pdf"
+                :rules="
+                item.downloadFile === ''
+                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
+                    : []
+                "
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+                <template v-slot:after>
+                  <q-btn
+                    :disable="!item.file"
+                    flat
+                    round
+                    dense
+                    color="primary"
+                    icon="mdi-upload"
+                    @click="
+                      fetchPathUpload(
+                        'เล่ม 1',
+                        evaluateId,
+                        item.fileName,
+                        item.file
+                      )
+                    "
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/06_evaluate/components/step/step6.vue b/src/modules/06_evaluate/components/step/step6.vue
index 7a37b25..450c22b 100644
--- a/src/modules/06_evaluate/components/step/step6.vue
+++ b/src/modules/06_evaluate/components/step/step6.vue
@@ -34,36 +34,25 @@ const fileEvaluation1 = ref<any>();
 const formCommand = reactive<FormCommand>({
   commanderFullname: "",
   commanderPosition: "",
+  commanderPositionOld: "",
+  commanderOrg: "",
+  commanderOrgOld: "",
   commanderAboveFullname: "",
   commanderAbovePosition: "",
+  commanderAbovePositionOld: "",
+  commanderAboveOrgOld: "",
+  commanderAboveOrg: "",
   author: "",
-  subject: "",
+  subject: [""],
   assignedPosition: "",
 });
-/** ref input*/
-const commanderFullnameRef = ref<object | null>(null);
-const commanderPositionRef = ref<object | null>(null);
-const commanderAboveFullnameRef = ref<object | null>(null);
-const commanderAbovePositionRef = ref<object | null>(null);
-const fileEvaluation1Ref = ref<object | null>(null);
-const performanceRef = ref<object | null>(null);
-const performanceOwnerRef = ref<object | null>(null);
-const assignedPositionRef = ref<object | null>(null);
 
 const modalView = ref<boolean>(false);
 
 /** function อัปเดท ผลงาน,ผู้เซ็นเอกสาร*/
 function updateInput(value: any) {
   const ref = {
-    commanderFullnameRef: commanderFullnameRef.value,
-    commanderPositionRef: commanderPositionRef.value,
-    commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-    commanderAbovePositionRef: commanderAbovePositionRef.value,
-    fileEvaluation1Ref: fileEvaluation1Ref.value,
     downloadFile: [downloadUrl.value],
-    performance: performanceRef.value,
-    performanceOwner: performanceOwnerRef.value,
-    assignedPosition: assignedPositionRef.value,
   };
   emit("update:form", value, ref);
 }
@@ -146,17 +135,25 @@ async function fetcheSigner(id: string) {
       const data = res.data.result;
       formCommand.commanderFullname = data.commanderFullnameDoc2;
       formCommand.commanderPosition = data.commanderPositionDoc2;
+      formCommand.commanderPositionOld = data.commanderPositionOldDoc2;
+      formCommand.commanderOrg = data.commanderOrgDoc2;
+      formCommand.commanderOrgOld = data.commanderOrgOldDoc2;
       formCommand.commanderAboveFullname = data.commanderAboveFullnameDoc2;
       formCommand.commanderAbovePosition = data.commanderAbovePositionDoc2;
+      formCommand.commanderAbovePositionOld =
+        data.commanderAbovePositionOldDoc2;
+      formCommand.commanderAboveOrgOld = data.commanderAboveOrgOldDoc2;
+      formCommand.commanderAboveOrg = data.commanderAboveOrgDoc2;
       formCommand.author = data.authorDoc2;
       formCommand.subject = data.subjectDoc2;
       formCommand.assignedPosition = data.assignedPosition;
 
-      store.statusUpload6 = data.commanderFullnameDoc2 === null ? false : true;
+      store.statusUpload6 = data.isUpdated;
     })
-    .catch(() => {
-      store.statusUpload6 = false;
-      getCommander();
+    .catch((err) => {
+      messageError($q, err);
+      // store.statusUpload6 = false;
+      // getCommander();
     })
     .finally(() => {
       hideLoader();
@@ -181,28 +178,17 @@ async function fetchCheckDate() {
 
 const downloadUrl = ref<string>("");
 /** function เช็คไฟล์อัปโหลด*/
-function checkDoc() {
-  // showLoader();
-  http
+async function checkDoc() {
+  await http
     .get(
       config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
     )
     .then((res: any) => {
       downloadUrl.value = res.data.downloadUrl;
     })
-    .catch(() => {})
     .finally(() => {
-      // hideLoader();
       const ref = {
-        commanderFullnameRef: commanderFullnameRef.value,
-        commanderPositionRef: commanderPositionRef.value,
-        commanderAboveFullnameRef: commanderAboveFullnameRef.value,
-        commanderAbovePositionRef: commanderAbovePositionRef.value,
-        fileEvaluation1Ref: fileEvaluation1Ref.value,
         downloadFile: [downloadUrl.value],
-        performance: performanceRef.value,
-        performanceOwner: performanceOwnerRef.value,
-        assignedPosition: assignedPositionRef.value,
       };
 
       emit("update:form", formCommand, ref);
@@ -221,8 +207,15 @@ function getCommander() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {});
+    });
+}
+
+function onAddSubject() {
+  formCommand.subject.push("");
+}
+
+function onDeleteSubject(index: number) {
+  formCommand.subject.splice(index, 1);
 }
 
 watch(
@@ -273,27 +266,12 @@ onMounted(async () => {
         <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
           <div class="col-12"><q-separator /></div>
-          <div class="col-12">
-            <div class="row q-col-gutter-sm col-12">
-              <div class="col-xs-12 col-sm-12 row">
-                <div class="row col-12 q-col-gutter-sm q-pa-sm">
+          <div class="col-12 q-pa-sm">
+            <div class="row q-col-gutter-sm">
+              <div class="col-12 row q-col-gutter-sm">
+                <div class="col-6">
                   <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="performanceRef"
-                    dense
-                    class="col-xs-12 col-sm-6"
-                    outlined
-                    label="ชื่อผลงาน"
-                    v-model="formCommand.subject"
-                    @update:model-value="updateInput(formCommand)"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-                    hide-bottom-space
-                    lazy-rules
-                  />
-                  <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="performanceOwnerRef"
-                    class="col-xs-12 col-sm-6"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
                     dense
                     outlined
                     v-model="formCommand.author"
@@ -303,9 +281,10 @@ onMounted(async () => {
                     :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
                     lazy-rules
                   />
+                </div>
+                <div class="col-6">
                   <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="assignedPositionRef"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
                     class="col-xs-12 col-sm-6"
                     dense
                     outlined
@@ -314,12 +293,62 @@ onMounted(async () => {
                     label="ตำแหน่งที่ได้รับ"
                     hide-bottom-space
                     :rules="[
-                      (val:string) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
-                    ]"
+                    (val:string) => !!val || `${'กรุณากรอกตำแหน่งที่ได้รับ'}`,
+                  ]"
                     lazy-rules
                   />
                 </div>
               </div>
+
+              <div
+                class="col-12"
+                v-if="store.currentStep === 6 && !store.statusUpload6"
+              >
+                <q-btn
+                  flat
+                  round
+                  color="primary"
+                  icon="add"
+                  @click="onAddSubject"
+                >
+                  <q-tooltip>เพิ่มชื่อผลงาน</q-tooltip>
+                </q-btn>
+              </div>
+
+              <div
+                class="row col-12 q-col-gutter-sm"
+                v-for="(item, index) in formCommand.subject"
+                :key="index"
+              >
+                <div class="col-11">
+                  <q-input
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
+                    dense
+                    outlined
+                    label="ชื่อผลงาน"
+                    v-model="formCommand.subject[index]"
+                    @update:model-value="updateInput(formCommand)"
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                    hide-bottom-space
+                    lazy-rules
+                  />
+                </div>
+                <div
+                  class="row col-1 items-centet justify-center"
+                  v-if="index !== 0"
+                >
+                  <q-btn
+                    v-if="store.currentStep === 6 && !store.statusUpload6"
+                    flat
+                    round
+                    color="red"
+                    icon="delete"
+                    @click="onDeleteSubject(index)"
+                  >
+                    <q-tooltip>ลบ</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
             </div>
           </div>
         </q-card>
@@ -340,8 +369,7 @@ onMounted(async () => {
                 </div>
                 <div class="row col-12 q-col-gutter-sm q-pa-sm">
                   <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="commanderFullnameRef"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
                     dense
                     class="col-xs-12 col-sm-6"
                     outlined
@@ -352,19 +380,68 @@ onMounted(async () => {
                     lazy-rules
                     hide-bottom-space
                   />
-                  <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="commanderPositionRef"
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="formCommand.commanderPosition"
-                    @update:model-value="updateInput(formCommand)"
-                    label="ตำแหน่ง"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                    lazy-rules
-                    hide-bottom-space
-                  />
+                  <div class="col-12">
+                    <div class="row col-12 q-col-gutter-sm">
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderPosition"
+                        @update:model-value="updateInput(formCommand)"
+                        label="ตำแหน่ง"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderPositionOld"
+                        @update:model-value="updateInput(formCommand)"
+                        label="ตำแหน่งเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderOrg"
+                        @update:model-value="updateInput(formCommand)"
+                        label="สังกัด"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderOrgOld"
+                        @update:model-value="updateInput(formCommand)"
+                        label="สังกัดเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -376,8 +453,7 @@ onMounted(async () => {
                 </div>
                 <div class="row col-12 q-col-gutter-sm q-pa-sm">
                   <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="commanderAboveFullnameRef"
+                    :readonly="store.currentStep != 6 || store.statusUpload6"
                     dense
                     class="col-xs-12 col-sm-6"
                     outlined
@@ -388,19 +464,67 @@ onMounted(async () => {
                     @update:model-value="updateInput(formCommand)"
                     hide-bottom-space
                   />
-                  <q-input
-                    :readonly="store.currentStep != 6"
-                    ref="commanderAbovePositionRef"
-                    class="col-xs-12 col-sm-6"
-                    dense
-                    outlined
-                    v-model="formCommand.commanderAbovePosition"
-                    label="ตำแหน่ง"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                    lazy-rules
-                    @update:model-value="updateInput(formCommand)"
-                    hide-bottom-space
-                  />
+
+                  <div class="col-12">
+                    <div class="row col-12 q-col-gutter-sm">
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAbovePosition"
+                        label="ตำแหน่ง"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                        lazy-rules
+                        @update:model-value="updateInput(formCommand)"
+                        hide-bottom-space
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAbovePositionOld"
+                        label="ตำแหน่งเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                        @update:model-value="updateInput(formCommand)"
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAboveOrg"
+                        label="สังกัด"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                        @update:model-value="updateInput(formCommand)"
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-3"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAboveOrgOld"
+                        label="สังกัดเดิม"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
+                        lazy-rules
+                        hide-bottom-space
+                        @update:model-value="updateInput(formCommand)"
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -434,7 +558,6 @@ onMounted(async () => {
                 <div class="col-12">
                   <q-file
                     :disable="!store.statusUpload6"
-                    ref="fileEvaluation1Ref"
                     v-model="fileEvaluation1"
                     class="col-12"
                     outlined
diff --git a/src/modules/06_evaluate/components/step/step7.vue b/src/modules/06_evaluate/components/step/step7.vue
index 6afb48c..8586ce3 100644
--- a/src/modules/06_evaluate/components/step/step7.vue
+++ b/src/modules/06_evaluate/components/step/step7.vue
@@ -35,11 +35,14 @@ async function fetchDocument() {
           "1-เอกสารเล่ม 2"
         )
       )
-      .then((res) => {
-        downloadFile(res.data.downloadUrl);
+      .then(async (res) => {
+        await downloadFile(res.data.downloadUrl);
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
       }));
 }
 
diff --git a/src/modules/06_evaluate/components/step/step8.vue b/src/modules/06_evaluate/components/step/step8.vue
index cd8dcf2..93794c9 100644
--- a/src/modules/06_evaluate/components/step/step8.vue
+++ b/src/modules/06_evaluate/components/step/step8.vue
@@ -69,20 +69,20 @@ async function fetchPathUpload(
     showLoader();
     await http
       .post(config.API.loadPathDocument(volume, id), body)
-      .then((res) => {
+      .then(async (res) => {
         const foundKey: string | undefined = Object.keys(res.data).find(
           (key) =>
             res.data[key]?.fileName !== undefined &&
             res.data[key]?.fileName !== ""
         );
-        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
+        foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
-    // .finally(() => {
-    // });
   }
 }
 
@@ -103,16 +103,12 @@ async function uploadfile(uploadUrl: string, file: any) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 const downloadUrl = ref<string>("");
 /** function เช็คไฟล์อัปโหลด*/
 function checkDoc() {
-  showLoader();
   http
     .get(
       config.API.loadFileDocument(
@@ -123,12 +119,6 @@ function checkDoc() {
     )
     .then((res: any) => {
       downloadUrl.value = res.data.downloadUrl;
-    })
-    .catch((e) => {
-      // messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -141,7 +131,6 @@ const assignedPosition = ref<string>("");
  * @param id ประเมิน
  */
 async function fetcheSigner(id: string) {
-  showLoader();
   await http
     .get(config.API.evaluationSignerDoc2(id))
     .then((res) => {
@@ -151,16 +140,21 @@ async function fetcheSigner(id: string) {
       assignedPosition.value = data.assignedPosition;
       evaluationResult.value = data.evaluationResult;
     })
-    .catch(() => {})
-    .finally(() => {
-      hideLoader();
+    .catch((err) => {
+      messageError($q, err);
     });
 }
 
 /** lifecycleHook*/
 onMounted(async () => {
-  await checkDoc();
-  await fetcheSigner(evaluateId.value);
+  try {
+    showLoader();
+    await Promise.all([checkDoc(), fetcheSigner(evaluateId.value)]);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
@@ -178,7 +172,7 @@ onMounted(async () => {
         />
       </div>
 
-      <div class="col-12">
+      <div class="col-12" v-if="(store.currentStep !== 8 && downloadUrl) ||  store.currentStep == 8 ">
         <q-card class="shadow-0" bordered>
           <div class="row col-12 bg-grey-1 q-px-sm q-py-xs items-center">
             <div class="text-weight-medium">เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
@@ -224,7 +218,7 @@ onMounted(async () => {
                 </div>
               </div>
               <div v-else>
-                <div class="row col-12 q-px-sm q-py-xs items-center">
+                <div class="row col-12 q-px-sm q-py-xs items-center"> 
                   <div>เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
                   <q-space />
                   <q-btn
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 8cfc4c8..28eeb77 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -69,11 +69,10 @@ const formDetail = reactive<any>({
 
 /** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
 async function fetchDetail() {
-  showLoader();
   await http
     .get(config.API.positionBykeycloak())
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       formDetail.root = data.root;
       formDetail.rootId = data.rootId;
       formDetail.userId = data.id;
@@ -89,58 +88,62 @@ async function fetchDetail() {
       formDetail.birthDate = data.birthDate;
       // formDetail.govAge = data.govAge; // ยังไม่มี
       formDetail.salary = data.salary;
-
-      http.get(config.API.dataUserEducations).then((res) => {
-        formDetail.educations = res.data.result;
-      });
-
-      http.get(config.API.dataUserCertificate("certificate")).then((res) => {
-        formDetail.certificates = res.data.result.map(
-          (e: CertificatesForm) => ({
-            certificateNo: e.certificateNo,
-            certificateType: e.certificateType,
-            expireDate: e.expireDate,
-            issueDate: e.issueDate,
-            issuer: e.issuer,
-          })
-        );
-      });
-
-      http.get(config.API.dataUserSalary).then((res) => {
-        formDetail.salaries = res.data.result;
-      });
-
-      http.get(config.API.dataUserCertificate("training")).then((res) => {
-        formDetail.trainings = res.data.result.map((e: any) => ({
-          dateOrder: e.dateOrder,
-          department: e.department,
-          duration: e.duration,
-          endDate: e.endDate,
-          name: e.name,
-          numberOrder: e.numberOrder,
-          place: e.place,
-          startDate: e.startDate,
-          topic: e.topic,
-          yearly: e.yearly,
-        }));
-      });
-
-      http.get(config.API.dataUserAssessments).then((res) => {
-        formDetail.assessments = res.data.result;
-      });
+      await fetchDataAllDetail();
 
       emit("update:formDeital", formDetail);
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2500);
     });
 }
 
+async function fetchDataAllDetail() {
+  // ดึงข้อมูลประวัติการศึกษา
+  http.get(config.API.dataUserEducations).then((res) => {
+    formDetail.educations = res.data.result;
+  });
+
+  // ดึงข้อมูลใบอนุญาตประกอบวิชาชีพ
+  http.get(config.API.dataUserCertificate("certificate")).then((res) => {
+    formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
+      certificateNo: e.certificateNo,
+      certificateType: e.certificateType,
+      expireDate: e.expireDate,
+      issueDate: e.issueDate,
+      issuer: e.issuer,
+    }));
+  });
+
+  // ดึงข้อมูลประวัติการรับราชการ
+  http.get(config.API.dataUserSalary).then((res) => {
+    formDetail.salaries = res.data.result;
+  });
+
+  // ดึงข้อมูลประวัติการฝึกอบรมดูงาน
+  http.get(config.API.dataUserCertificate("training")).then((res) => {
+    formDetail.trainings = res.data.result.map((e: any) => ({
+      dateOrder: e.dateOrder,
+      department: e.department,
+      duration: e.duration,
+      endDate: e.endDate,
+      name: e.name,
+      numberOrder: e.numberOrder,
+      place: e.place,
+      startDate: e.startDate,
+      topic: e.topic,
+      yearly: e.yearly,
+    }));
+  });
+
+  http.get(config.API.dataUserPerformance).then((res) => {
+    formDetail.assessments = res.data.result;
+  });
+
+  http.get(config.API.dataUserPortfolio).then((res) => {
+    formDetail.experience = res.data.result;
+  });
+}
+
 /**
  *  function fetchData ตรวจสอบคุณสมบัติ
  * @param id ประเมิน
@@ -178,7 +181,8 @@ async function fetchCheckSpec(data: any) {
     topic: e.topic,
     yearly: e.yearly,
   }));
-  formDetail.assessments = data.assessments;
+  formDetail.assessments = data.performances;
+  formDetail.experience = data.portfolios;
 }
 
 /**
@@ -195,7 +199,6 @@ function formattedNumber(x: number) {
 
 /** get data */
 function getData() {
-  showLoader();
   http
     .get(config.API.dataUserGovernment)
     .then(async (res) => {
@@ -207,28 +210,30 @@ function getData() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2500);
     });
 }
 
 onMounted(async () => {
-  const promises = [];
+  try {
+    showLoader();
+    const promises = [];
 
-  if (route.name === "evaluate-add") {
-    promises.push(fetchDetail());
+    if (route.name === "evaluate-add") {
+      promises.push(fetchDetail());
+    }
+
+    if (props.data) {
+      promises.push(fetchCheckSpec(props.data));
+    }
+
+    promises.push(getData());
+
+    await Promise.all(promises);
+  } catch (error) {
+    console.log(error);
+  } finally {
+    hideLoader();
   }
-
-  if (props.data) {
-    promises.push(fetchCheckSpec(props.data));
-  }
-
-  promises.push(getData());
-
-  await Promise.all(promises);
 });
 </script>
 
@@ -537,7 +542,6 @@ onMounted(async () => {
               </q-tr>
             </template>
           </d-table>
-          <!-- <TableData :columns="columnSalaries" :row="formDetail.salaries" /> -->
         </div>
       </q-card>
 
@@ -561,7 +565,7 @@ onMounted(async () => {
         <TableData
           class="col-12"
           :columns="columnExperience"
-          :row="formDetail.trainings"
+          :row="formDetail.experience"
         />
       </q-card>
 
@@ -570,13 +574,12 @@ onMounted(async () => {
           <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm">-</div>
-        <!-- <div class="col-10">
+        <div class="col-10">
           <TableData
             :columns="columnAssessments"
             :row="formDetail.assessments"
           />
-        </div> -->
+        </div>
       </q-card>
     </div>
   </q-card>
diff --git a/src/modules/06_evaluate/interface/evalute.ts b/src/modules/06_evaluate/interface/evalute.ts
index 593a27b..1db407c 100644
--- a/src/modules/06_evaluate/interface/evalute.ts
+++ b/src/modules/06_evaluate/interface/evalute.ts
@@ -38,10 +38,16 @@ interface FormSpec {
 interface FormCommand {
   commanderFullname: string;
   commanderPosition: string;
+  commanderPositionOld: string;
+  commanderOrgOld: string;
+  commanderOrg: string;
   commanderAboveFullname: string;
   commanderAbovePosition: string;
+  commanderAbovePositionOld: string;
+  commanderAboveOrgOld: string;
+  commanderAboveOrg: string;
   author: string;
-  subject: string;
+  subject: string[];
   assignedPosition: string;
 }
 
@@ -134,5 +140,5 @@ export type {
   ListMenu,
   FormRef,
   FormData,
-  FormCommandSe
+  FormCommandSe,
 };
diff --git a/src/modules/06_evaluate/stores/evaluteDetail.ts b/src/modules/06_evaluate/stores/evaluteDetail.ts
index 02aa6df..0ae6bad 100644
--- a/src/modules/06_evaluate/stores/evaluteDetail.ts
+++ b/src/modules/06_evaluate/stores/evaluteDetail.ts
@@ -360,94 +360,40 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
   //ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)
   const columnAssessments = ref<QTableProps["columns"]>([
     {
-      name: "date",
+      name: "year",
       align: "left",
-      label: "วันที่ได้รับ",
+      label: "ปี พ.ศ.",
       sortable: true,
-      field: "date",
+      field: "year",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      format: (v) => date2Thai(v),
     },
     {
-      name: "point1Total",
+      name: "type",
       align: "left",
-      label: "ส่วนที่1 (น้ำหนัก)",
+      label: "ระดับตอนที่ยื่นขอ",
       sortable: true,
-      field: "point1Total",
+      field: "type",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "point1",
+      name: "subject",
       align: "left",
-      label: "ผลประเมินส่วนที่1 (คะแนน)",
+      label: "เรื่อง/ชื่อเรื่อง",
       sortable: true,
-      field: "point1",
+      field: "subject",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "point2Total",
+      name: "evaluationResult",
       align: "left",
-      label: "ส่วนที่2 (น้ำหนัก)",
+      label: "ผลการประเมิน (ผ่าน/ไม่ผ่าน)",
       sortable: true,
-      field: "point2Total",
+      field: "evaluationResult",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "point2",
-      align: "left",
-      label: "ผลประเมินส่วนที่2 (คะแนน)",
-      sortable: true,
-      field: "point2",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "pointSumTotal",
-      align: "left",
-      label: "ผลรวม (น้ำหนัก)",
-      sortable: true,
-      field: "pointSumTotal",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "pointSum",
-      align: "left",
-      label: "ผลประเมินรวม (คะแนน)",
-      sortable: true,
-      field: "pointSum",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    },
-    {
-      name: "name",
-      align: "left",
-      label: "ผลประเมิน",
-      sortable: true,
-      field: "name",
-      format(val, row) {
-        return `${textPoint(row.pointSum)} ${textRangePoint(row.pointSum)}`;
-      },
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
   ]);
 

From 8103ea7d9dcf7c537ea4a733475c2171f567a64d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 23 Apr 2025 15:30:29 +0700
Subject: [PATCH 066/195] fix

---
 src/modules/06_evaluate/components/EvaluateStepMain.vue   | 4 ++--
 src/modules/06_evaluate/components/viewstep/viewStep1.vue | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index d207626..980e619 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -87,8 +87,6 @@ async function onCilckNextStep() {
 /** function validateForm Step 2,4*/
 async function onSubmitFormData() {
   store.checkFileupload = !store.checkFileupload;
-  console.log(store.statusUpload6);
-
   if (store.step === 2) {
     if (!store.statusUpload) {
       saveStep2();
@@ -364,6 +362,8 @@ async function saveStep1() {
     isHaveSpecificQft: formSpec.isHaveSpecificQft,
     isHaveProLicense: formSpec.isHaveProLicense,
     isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
+    posExecutive: formDetail.value.posExecutive ?? "",
+    positionArea: formDetail.value.positionArea ?? "",
     reason: "",
     educations: [...educations],
     certificates: [...certificates],
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 28eeb77..773715a 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -58,6 +58,8 @@ const formDetail = reactive<any>({
     month: 0,
     day: 0,
   },
+  posExecutive: "",
+  positionArea: "",
   educations: [] as EducationForm[],
   certificates: [],
   salaries: [],
@@ -88,6 +90,8 @@ async function fetchDetail() {
       formDetail.birthDate = data.birthDate;
       // formDetail.govAge = data.govAge; // ยังไม่มี
       formDetail.salary = data.salary;
+      formDetail.posExecutive = data.posExecutive;
+      formDetail.positionArea = data.positionArea;
       await fetchDataAllDetail();
 
       emit("update:formDeital", formDetail);

From 965304339dc4ab4c5f407ed8fabb8747a51cfaa7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 24 Apr 2025 09:12:33 +0700
Subject: [PATCH 067/195] =?UTF-8?q?fix=20=E0=B9=80=E0=B8=A5=E0=B8=82?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/data.ts  | 1 -
 src/stores/mixin.ts | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/stores/data.ts b/src/stores/data.ts
index 2000d80..dad7009 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -100,7 +100,6 @@ export const useDataStore = defineStore("dataMain", () => {
   async function getData(dataPerson: any) {
     const data = await dataPerson;
     isProbation.value = data.isProbation;
-
     formData.profileId = data.profileId;
     formData.rank = data.rank;
     formData.prefix = data.prefix;
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index e232b31..fb73de0 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -1096,7 +1096,7 @@ export const useCounterMixin = defineStore("mixin", () => {
           ? obj.child1ShortName
           : obj.rootShortName != null
           ? obj.rootShortName
-          : "") + (obj.posMasterNo != null ? obj.posMasterNo : "");
+          : "") + (obj.posMasterNo != null ? ` ${obj.posMasterNo}` : "");
       return shortName == "" ? "-" : shortName;
     } else {
       return "";

From 3b6172ee037cda5fce93592858da6871fa1ecaf1 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 24 Apr 2025 11:04:38 +0700
Subject: [PATCH 068/195] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20?=
 =?UTF-8?q?ui=20=E0=B8=97=E0=B8=B8=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../09_scholarship/interface/request/index.ts |    1 +
 src/modules/09_scholarship/views/detail.vue   | 2094 ++++++++++-------
 src/modules/09_scholarship/views/main.vue     |   14 +-
 3 files changed, 1226 insertions(+), 883 deletions(-)

diff --git a/src/modules/09_scholarship/interface/request/index.ts b/src/modules/09_scholarship/interface/request/index.ts
index 1ad74ac..a25579f 100644
--- a/src/modules/09_scholarship/interface/request/index.ts
+++ b/src/modules/09_scholarship/interface/request/index.ts
@@ -61,6 +61,7 @@ interface FormsSholarship {
   totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
   planType: string; // INPLAN ในแผนฯ, OUTPLAN นอกแผนฯ
   isNoUseBudget: boolean; //
+  budgetSourceOther: string; //
 }
 
 interface DataSholarship {
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 5f13b1c..a3fa770 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -48,6 +48,21 @@ const budgetSourceOp = ref<DataOptions[]>([
   { id: "OTHER", name: "เงินอื่นๆ" },
 ]);
 
+const useOfficialTimeOp = ref<DataOptions[]>([
+  {
+    id: "NOUSETIME",
+    name: "ไม่ใช้เวลาราชการ",
+  },
+  {
+    id: "USETIME",
+    name: "ใช้เวลาราชการ",
+  },
+  {
+    id: "SOMETIME",
+    name: "ใช้เวลาราชการบางส่วน",
+  },
+]);
+
 const formBody = reactive<FormsSholarship>({
   profileId: "",
   rank: "", //ยศ
@@ -110,6 +125,7 @@ const formBody = reactive<FormsSholarship>({
   studyAbroadEndDate: null, //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
   totalPeriod: "", //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
   planType: "",
+  budgetSourceOther: "",
   isNoUseBudget: false,
 });
 
@@ -156,8 +172,12 @@ const scholarshipTypeOp = ref<DataOptions[]>([
     name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
   },
   {
-    id: "RESEARCH",
-    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
+    id: "STUDY",
+    name: "ทุนการศึกษา ณ ต่างประเทศ",
+  },
+  {
+    id: "TRAINING",
+    name: "ทุนฝึกอบรม ณ ต่างประเทศ",
   },
 ]);
 
@@ -525,86 +545,9 @@ onMounted(async () => {
       <q-card flat bordered class="col-12 q-pa-md">
         <q-toolbar class="q-px-none q-pb-sm">
           <div class="row q-col-gutter-x-sm full-width">
-            <div class="col-2 q-pa-none">
-              <q-btn
-                flat
-                icon="mdi-dots-vertical"
-                color="grey-8"
-                for="#cancel"
-                dense
-                round
-                unelevated
-              >
-                <q-menu>
-                  <q-list>
-                    <q-item clickable v-close-popup @click="onOpenReturn">
-                      <q-item-section>
-                        <q-item-label>
-                          <q-icon name="edit" color="edit" size="18px" />
-                          แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                    <q-item clickable v-close-popup @click="onDownload('docx')">
-                      <q-item-section>
-                        <q-item-label>
-                          <q-icon
-                            name="mdi-file-word"
-                            color="blue"
-                            size="18px"
-                          />
-                          ดาวน์โหลดฟอร์มต้นแบบ .docx
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                    <q-item clickable v-close-popup @click="onDownload('pdf')">
-                      <q-item-section>
-                        <q-item-label>
-                          <q-icon
-                            name="mdi-file-pdf-box"
-                            color="red"
-                            size="18px"
-                          />
-                          ดาวน์โหลดฟอร์มต้นแบบ .pdf
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </div>
-
             <q-space />
-            <div v-if="fileList == null" class="col-xs-8 col-sm-3">
-              <q-file
-                for="inputFiles"
-                class="col-12"
-                outlined
-                dense
-                v-model="documentFile"
-                label="ไฟล์เอกสารหลักฐาน"
-                accept=".pdf"
-                clearable
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    size="14px"
-                    v-if="documentFile"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="clickUpload(documentFile)"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-            <div v-else class="col-2 text-right">
+
+            <div v-if="fileList" class="col-2 text-right">
               <q-btn
                 size="12px"
                 flat
@@ -671,284 +614,358 @@ onMounted(async () => {
         </q-card>
 
         <div class="row q-col-gutter-md q-mt-sm">
-          <div class="col-md-9 col-xs-12">
+          <div class="col-12 col-md-9">
             <q-select
-              dense
+              class="inputgreen"
               readonly
+              dense
               outlined
+              hide-bottom-space
+              lazy-rules
               v-model="formBody.scholarshipType"
               :options="scholarshipTypeOp"
               option-label="name"
               option-value="id"
               emit-value
               map-options
-              class="inputgreen"
               label="เลือกประเภททุน"
+              :rules="[
+                (val: string) =>
+                  !!val || `${'กรุณาเลือกประเภททุน'}`,
+              ]"
             />
           </div>
           <div
-            class="col-md-3 col-xs-12"
+            class="col-12 col-md-3"
             v-if="
               formBody.scholarshipType !== '' &&
-              formBody.scholarshipType !== 'EXECUTIVE' &&
-              formBody.scholarshipType !== 'RESEARCH'
+              formBody.scholarshipType !== 'EXECUTIVE'
             "
           >
             <q-select
+              readonly
               dense
               outlined
+              hide-bottom-space
+              lazy-rules
               class="inputgreen"
               v-model="formBody.fundType"
               :options="fundTypeOp"
               option-label="name"
               option-value="id"
               emit-value
-              readonly
               map-options
               label="ประเภททุน"
+              :rules="[
+                (val: string) =>
+                  !!val || `${'กรุณาเลือกประเภททุน'}`,
+              ]"
             />
           </div>
 
-          <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
+          <div class="col-12">
             <q-radio
+              disable
               v-model="formBody.planType"
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="INPLAN"
               label="ในแผน ฯ"
               dense
-              disable
             />
             <q-radio
+              disable
               v-model="formBody.planType"
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="OUTPLAN"
               label="นอกแผน ฯ"
               dense
-              disable
               class="q-pl-sm"
             />
           </div>
 
-          <div class="row col-12 q-col-gutter-md">
-            <div class="col-xs-12 col-md-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.scholarshipYear"
-                :locale="'th'"
-                autoApply
-                readonly
-                year-picker
-                :enableTimePicker="false"
+          <div class="col-12">
+            <div class="row q-col-gutter-md">
+              <div class="col-12 col-md-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.scholarshipYear"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  readonly
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      readonly
+                      dense
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.scholarshipYear
+                          ? Number(formBody.scholarshipYear) + 543
+                          : null
+                      "
+                      :label="`${
+                        formBody.scholarshipType === 'STUDY' ||
+                        formBody.scholarshipType === 'TRAINING'
+                          ? 'ปีงบประมาณที่ได้รับอนุมัติ '
+                          : 'ปีงบประมาณที่ได้รับทุน'
+                      }`"
+                      hide-bottom-space
+                      :rules="[
+                      (val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
+                    ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-12 col-md-3">
+                <q-select
+                  readonly
+                  dense
+                  outlined
+                  class="inputgreen"
+                  label="แหล่งงบประมาณ"
+                  hide-bottom-space
+                  v-model="formBody.budgetSource"
+                  :options="budgetSourceOp"
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  :clearable="formBody.fundType == 'FUND4' ? true : false"
+                  :rules="[
+                    (val: any) => {
+                      if (!val && !formBody.isNoUseBudget && formBody.fundType != 'FUND4') {
+                        return 'กรุณาเลือกแหล่งงบประมาณ';
+                      }
+                      return true;
+                    },
+                  ]"
+                />
+              </div>
+              <div
+                class="col-12 col-md-3"
+                v-if="formBody.budgetSource == 'OTHER'"
               >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    readonly
-                    class="inputgreen"
-                    :model-value="
-                      formBody.scholarshipYear
-                        ? Number(formBody.scholarshipYear) + 543
-                        : null
-                    "
-                    :label="`${
-                      formBody.scholarshipType === 'RESEARCH'
-                        ? 'ปีงบประมาณที่ได้รับอนุมัติ '
-                        : 'ปีงบประมาณที่ได้รับทุน'
-                    }`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div
-              v-if="formBody.scholarshipType !== 'RESEARCH'"
-              class="col-xs-12 col-md-3"
-            >
-              <q-select
-                dense
-                outlined
-                class="inputgreen"
-                label="แหล่งงบประมาณ"
-                v-model="formBody.budgetSource"
-                :options="budgetSourceOp"
-                option-label="name"
-                option-value="id"
-                emit-value
-                map-options
-                readonly
-              />
-            </div>
-            <div class="col-xs-12 col-md-3">
-              <q-input
-                dense
-                outlined
-                readonly
-                class="inputgreen"
-                v-model="formBody.budgetApprove"
-                label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
-                mask="###,###,###,###,###,###"
-                reverse-fill-mask
-              />
-            </div>
-            <div class="col-xs-12 col-md-3">
-              <q-checkbox
-                keep-color
-                disable
-                color="primary"
-                v-model="formBody.isNoUseBudget"
-                label="ไม่ใช้งบประมาณ"
-              />
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  hide-bottom-space
+                  class="inputgreen"
+                  v-model="formBody.budgetSourceOther"
+                  label="เงินอื่นๆ โปรดระบุ"
+                  hide-botom-space
+                  :rules="[
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกเงินอื่นๆ โปรดระบุ'}`,
+                ]"
+                />
+              </div>
+              <div class="col-12 col-md-3">
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  hide-bottom-space
+                  class="inputgreen"
+                  v-model="formBody.budgetApprove"
+                  label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
+                  mask="###,###,###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[
+                    (val: any) => {
+                      if (!val && !formBody.isNoUseBudget && formBody.fundType != 'FUND4') {
+                        return 'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร';
+                      }
+                      return true;
+                    },
+                  ]"
+                />
+              </div>
             </div>
           </div>
 
-          <div class="row col-12 q-col-gutter-md">
-            <div class="col-xs-12 col-md-3">
-              <q-input
-                dense
-                readonly
-                outlined
-                class="inputgreen"
-                v-model="formBody.bookNo"
-                label="เลขที่หนังสืออนุมัติ"
-              />
-            </div>
-            <div class="col-xs-12 col-md-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.bookNoDate"
-                :locale="'th'"
-                readonly
-                autoApply
-                :enableTimePicker="false"
+          <div class="col-12">
+            <div class="row q-col-gutter-md">
+              <div class="col-12 col-md-3">
+                <q-input
+                  readonly
+                  dense
+                  outlined
+                  class="inputgreen"
+                  v-model="formBody.bookNo"
+                  label="เลขที่หนังสืออนุมัติ"
+                  hide-bottom-space
+                  :rules="[
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกเลขที่หนังสืออนุมัติ'}`,
+                ]"
+                />
+              </div>
+              <div class="col-12 col-md-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.bookNoDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  readonly
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      readonly
+                      dense
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.bookNoDate
+                          ? date2Thai(formBody.bookNoDate)
+                          : null
+                      "
+                      :label="`${'ลงวันที่'}`"
+                      hide-bottom-space
+                      :rules="[
+                      (val: string) =>
+                        !!val || `${'กรุณาเลือกวันที่'}`,
+                    ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-12 col-md-3">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="formBody.bookApproveDate"
+                  :locale="'th'"
+                  autoApply
+                  readonly
+                  :enableTimePicker="false"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      class="inputgreen"
+                      :model-value="
+                        formBody.bookApproveDate
+                          ? date2Thai(formBody.bookApproveDate)
+                          : null
+                      "
+                      :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
+                      hide-bottom-space
+                      :rules="[
+                      (val: string) =>
+                        !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
+                    ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div
+                v-if="
+                  formBody.scholarshipType !== 'STUDY' &&
+                  formBody.scholarshipType !== 'TRAINING'
+                "
+                class="col-12 col-md-2"
               >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    outlined
-                    readonly
-                    class="inputgreen"
-                    :model-value="
-                      formBody.bookNoDate
-                        ? date2Thai(formBody.bookNoDate)
-                        : null
-                    "
-                    :label="`${'ลงวันที่'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+                <q-select
+                  outlined
+                  dense
+                  label="เวลาราชการ"
+                  readonly
+                  v-model="formBody.useOfficialTime"
+                  :options="useOfficialTimeOp"
+                  option-value="id"
+                  option-label="name"
+                  class="inputgreen"
+                  emit-value
+                  map-options
+                >
+                </q-select>
+              </div>
+              <div class="col-12 col-md-2">
+                <q-checkbox
+                  disable
+                  keep-color
+                  color="primary"
+                  v-model="formBody.isNoUseBudget"
+                  label="ไม่ใช้งบประมาณ"
+                />
+              </div>
             </div>
-            <div class="col-xs-12 col-md-3">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formBody.bookApproveDate"
-                :locale="'th'"
-                autoApply
-                readonly
-                :enableTimePicker="false"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    readonly
-                    outlined
-                    class="inputgreen"
-                    :model-value="
-                      formBody.bookApproveDate
-                        ? date2Thai(formBody.bookApproveDate)
-                        : null
-                    "
-                    :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div
-              v-if="formBody.scholarshipType !== 'RESEARCH'"
-              class="col-xs-12 col-md-3"
-            >
-              <q-checkbox
-                keep-color
-                disable
-                color="primary"
-                v-model="formBody.useOfficialTime"
-                label="ใช้เวลาราชการ"
-              />
-            </div>
-          </div>
-
-          <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
-            <q-input
-              outlined
-              dense
-              readonly
-              class="inputgreen"
-              v-model="formBody.changeDetail"
-              label="เปลี่ยนแปลงรายละเอียด"
-              rows="3"
-              type="textarea"
-            />
           </div>
 
           <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
             <div class="row col-12 q-col-gutter-md">
-              <div class="col-xs-12 col-md-3">
+              <div class="col-12 col-md-3">
                 <q-input
-                  dense
                   readonly
+                  dense
                   outlined
+                  lazy-rules
+                  hide-bottom-space
                   label="เลขที่สัญญา"
                   class="inputgreen"
                   v-model="formBody.contractNo"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
+                  ]"
                 />
               </div>
-              <div class="col-xs-12 col-md-2">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.contractDate"
                   :locale="'th'"
                   autoApply
+                  :enableTimePicker="false"
+                  readonly
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -966,101 +983,11 @@ onMounted(async () => {
                           : null
                       "
                       :label="`${'ลงวันที่'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div
-                v-if="formBody.scholarshipType !== 'RESEARCH'"
-                class="col-xs-12 col-md-3"
-              >
-                <q-input
-                  dense
-                  readonly
-                  outlined
-                  class="inputgreen"
-                  v-model="formBody.reportBackNo"
-                  label="เลขที่หนังสือรายงานตัวกลับ"
-                />
-              </div>
-              <div
-                v-if="formBody.scholarshipType !== 'RESEARCH'"
-                class="col-xs-12 col-md-2"
-              >
-                <datepicker
-                  readonly
-                  menu-class-name="modalfix"
-                  v-model="formBody.reportBackNoDate"
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      class="inputgreen"
-                      :model-value="
-                        formBody.reportBackNoDate
-                          ? date2Thai(formBody.reportBackNoDate)
-                          : null
-                      "
-                      :label="`${'ลงวันที่'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div
-                v-if="formBody.scholarshipType !== 'RESEARCH'"
-                class="col-xs-12 col-md-2"
-              >
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="formBody.reportBackDate"
-                  :locale="'th'"
-                  autoApply
-                  readonly
-                  :enableTimePicker="false"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      readonly
-                      class="inputgreen"
-                      :model-value="
-                        formBody.reportBackDate
-                          ? date2Thai(formBody.reportBackDate)
-                          : null
-                      "
-                      :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณาเลือกวันที่'}`,
+                      ]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -1075,63 +1002,99 @@ onMounted(async () => {
                 </datepicker>
               </div>
 
-              <div class="col-12" v-if="dataGuarantor.citizenId">
-                <q-card bordered tyle="border: 1px solid #d6dee1">
-                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                    ข้อมูลผู้ค้ำประกัน
+              <div class="col-12">
+                <div class="row q-col-gutter-md">
+                  <div class="col-12 col-md-3">
+                    <q-input
+                      dense
+                      readonly
+                      outlined
+                      hide-bottom-space
+                      lazy-rules
+                      class="inputgreen"
+                      v-model="formBody.reportBackNo"
+                      label="เลขที่หนังสือรายงานตัวกลับ"
+                    />
                   </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="row col-12 q-col-gutter-md q-pa-md">
-                    <div class="col-xs-12 col-md-6">
-                      <div class="row q-col-gutter-md">
-                        <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
-                        <div class="col-8 text-weight-medium">
-                          {{
-                            dataGuarantor.citizenId
-                              ? dataGuarantor.citizenId
-                              : "-"
-                          }}
-                        </div>
-                        <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
-                        <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.name ? dataGuarantor.name : "-" }}
-                        </div>
-                        <div class="col-4 text-grey">ตำแหน่ง</div>
-                        <div class="col-8 text-weight-medium">
-                          {{
-                            dataGuarantor.position
-                              ? dataGuarantor.position
-                              : "-"
-                          }}
-                        </div>
-                        <div class="col-4 text-grey">ประเภท</div>
-                        <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.type ? dataGuarantor.type : "-" }}
-                        </div>
-                      </div>
-                    </div>
-                    <div class="col-xs-12 col-md-6">
-                      <div class="row q-col-gutter-md">
-                        <div class="col-4 text-grey">ระดับตำแหน่ง</div>
-                        <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.level ? dataGuarantor.level : "-" }}
-                        </div>
-                        <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
-                        <div class="col-8 text-weight-medium">
-                          {{
-                            dataGuarantor.positionSide
-                              ? dataGuarantor.positionSide
-                              : "-"
-                          }}
-                        </div>
-                        <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                        <div class="col-8 text-weight-medium text-html">
-                          {{ dataGuarantor.org ? dataGuarantor.org : "-" }}
-                        </div>
-                      </div>
-                    </div>
+                  <div class="col-12 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.reportBackNoDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      readonly
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          readonly
+                          dense
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.reportBackNoDate
+                              ? date2Thai(formBody.reportBackNoDate)
+                              : null
+                          "
+                          :label="`${'ลงวันที่'}`"
+                          hide-bottom-space
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
                   </div>
-                </q-card>
+                  <div class="col-12 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.reportBackDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      readonly
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          readonly
+                          dense
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.reportBackDate
+                              ? date2Thai(formBody.reportBackDate)
+                              : null
+                          "
+                          :label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
+                          hide-bottom-space
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
               </div>
 
               <!-- เลือกทุน 1 -->
@@ -1140,65 +1103,115 @@ onMounted(async () => {
                 v-if="formBody.scholarshipType === 'DOMESTICE'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-xs-12 col-md-3">
-                    <q-input
-                      dense
+                  <div class="col-12 col-md-3">
+                    <!-- <q-input
                       readonly
+                      dense
                       outlined
+                      lazy-rules
+                      hide-bottom-space
                       label="ระดับปริญญา"
                       class="inputgreen"
                       v-model="formBody.degreeLevel"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                      ]"
+                    /> -->
+                    <q-select
+                      dense
+                      outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      class="inputgreen"
+                      label="ระดับปริญญา"
+                      v-model="formBody.degreeLevel"
+                      :options="[
+                        'ปริญญาตรี',
+                        'สูงกว่าปริญญาตรี',
+                        'ปริญญาโท',
+                        'ปริญญาเอก',
+                      ]"
+                      :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                  ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <q-input
-                      dense
                       readonly
+                      dense
                       outlined
+                      lazy-rules
+                      hide-bottom-space
                       label="หลักสูตรการศึกษา"
                       class="inputgreen"
                       v-model="formBody.course"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกหลักสูตรการศึกษา'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <q-input
+                      readonly
                       dense
                       outlined
-                      readonly
+                      lazy-rules
+                      hide-bottom-space
                       label="สาขาวิชา"
                       class="inputgreen"
                       v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขาวิชา'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      outlined
                       readonly
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
                       label="คณะ"
                       class="inputgreen"
                       v-model="formBody.faculty"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกคณะ'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      outlined
                       readonly
+                      outlined
+                      lazy-rules
+                      hide-bottom-space
                       label="สถาบันการศึกษา"
                       class="inputgreen"
                       v-model="formBody.educationalInstitution"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถาบันการศึกษา'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
-                      readonly
                       :enableTimePicker="false"
                       week-start="0"
+                      readonly
                       @update:model-value="changeStartDate('startDate')"
                     >
                       <template #year="{ year }">{{ year + 543 }}</template>
@@ -1208,8 +1221,8 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          outlined
                           readonly
+                          outlined
                           class="inputgreen"
                           :model-value="
                             formBody.startDate
@@ -1217,6 +1230,11 @@ onMounted(async () => {
                               : null
                           "
                           :label="`${'วันเริ่มต้นการศึกษา'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษา'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1230,16 +1248,19 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       v-model="formBody.endDate"
                       :locale="'th'"
-                      readonly
                       autoApply
                       :enableTimePicker="false"
                       week-start="0"
                       :min-date="formBody.startDate"
+                      readonly
+                      @update:model-value="
+                        updateTotalPeriod(formBody.startDate, formBody.endDate)
+                      "
                     >
                       <template #year="{ year }">{{ year + 543 }}</template>
                       <template #year-overlay-value="{ value }">{{
@@ -1248,8 +1269,8 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          outlined
                           readonly
+                          outlined
                           class="inputgreen"
                           :model-value="
                             formBody.endDate
@@ -1257,6 +1278,11 @@ onMounted(async () => {
                               : null
                           "
                           :label="`${'วันสิ้นสุดการศึกษา'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษา'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1270,34 +1296,50 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="สถานที่ไปศึกษาดูงาน"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="รวมระยะเวลาในการศึกษา"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
+                  <div class="col-12 col-md-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="สถานที่ไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyPlace"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="หัวข้อการไปศึกษาดูงาน"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyTopic"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
+                      readonly
                       week-start="0"
                       @update:model-value="changeStartDate('studyStartDate')"
                     >
@@ -1316,7 +1358,8 @@ onMounted(async () => {
                               ? date2Thai(formBody.studyStartDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                          :label="`${'วันเริ่มต้นการดูงาน'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1330,12 +1373,12 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
-                      readonly
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
+                      readonly
                       autoApply
                       :enableTimePicker="false"
                       week-start="0"
@@ -1356,7 +1399,8 @@ onMounted(async () => {
                               ? date2Thai(formBody.studyEndDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                          :label="`${'วันสิ้นสุดการดูงาน'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1370,36 +1414,40 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6" v-if="!$q.screen.gt.xs"></div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
                       readonly
                       outlined
-                      label="ประเทศที่ไปศึกษาดูงาน"
+                      lazy-rules
+                      hide-bottom-space
+                      label="ประเทศที่ไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyCountry"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
                       readonly
                       outlined
-                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปดูงานต่างประเทศ"
                       class="inputgreen"
                       v-model="formBody.studyAbroadTopic"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
                       week-start="0"
+                      readonly
                       @update:model-value="
                         changeStartDate('studyAbroadStartDate')
                       "
@@ -1411,15 +1459,16 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
                           class="inputgreen"
+                          readonly
                           :model-value="
                             formBody.studyAbroadStartDate
                               ? date2Thai(formBody.studyAbroadStartDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันเริ่มต้นการดูงานต่างประเทศ'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1433,14 +1482,14 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
+                      readonly
                       week-start="0"
                       :min-date="formBody.studyAbroadStartDate"
                       @update:model-value="
@@ -1457,15 +1506,16 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.studyAbroadEndDate
                               ? date2Thai(formBody.studyAbroadEndDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันสิ้นสุดการดูงานต่างประเทศ'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1479,16 +1529,6 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="รวมระยะเวลาในการศึกษา"
-                      class="inputgreen"
-                      v-model="formBody.totalPeriod"
-                    />
-                  </div>
                 </div>
               </div>
 
@@ -1498,45 +1538,63 @@ onMounted(async () => {
                 v-else-if="formBody.scholarshipType === 'NOABROAD'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
                       outlined
                       readonly
+                      lazy-rules
+                      hide-bottom-space
                       label="หลักสูตรการฝึกอบรม"
                       class="inputgreen"
                       v-model="formBody.course"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `กรุณากรอกหลักสูตรการฝึกอบรม`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
                       label="สาขา"
                       class="inputgreen"
                       v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขา'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-3">
                     <q-input
-                      readonly
                       dense
                       outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
                       label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                       class="inputgreen"
                       v-model="formBody.educationalInstitution"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                      ]"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
                       week-start="0"
+                      readonly
                       @update:model-value="changeStartDate('startDate')"
                     >
                       <template #year="{ year }">{{ year + 543 }}</template>
@@ -1546,8 +1604,8 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.startDate
@@ -1555,6 +1613,11 @@ onMounted(async () => {
                               : null
                           "
                           :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1568,121 +1631,18 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.endDate"
                       :locale="'th'"
+                      readonly
                       autoApply
                       :enableTimePicker="false"
                       week-start="0"
                       :min-date="formBody.startDate"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          dense
-                          outlined
-                          readonly
-                          class="inputgreen"
-                          :model-value="
-                            formBody.endDate
-                              ? date2Thai(formBody.endDate)
-                              : null
-                          "
-                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                  <div class="col-xs-12 col-md-6">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="สถานที่ไปศึกษาดูงาน"
-                      class="inputgreen"
-                      v-model="formBody.studyPlace"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-md-6">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="หัวข้อการไปศึกษาดูงาน"
-                      class="inputgreen"
-                      v-model="formBody.studyTopic"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-md-3">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formBody.studyStartDate"
-                      :locale="'th'"
-                      autoApply
-                      readonly
-                      :enableTimePicker="false"
-                      week-start="0"
-                      @update:model-value="changeStartDate('studyStartDate')"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          dense
-                          outlined
-                          readonly
-                          class="inputgreen"
-                          :model-value="
-                            formBody.studyStartDate
-                              ? date2Thai(formBody.studyStartDate)
-                              : null
-                          "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                  <div class="col-xs-12 col-md-3">
-                    <datepicker
-                      readonly
-                      menu-class-name="modalfix"
-                      v-model="formBody.studyEndDate"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                      :min-date="formBody.studyStartDate"
                       @update:model-value="
-                        updateTotalPeriod(
-                          formBody.studyStartDate,
-                          formBody.studyEndDate
-                        )
+                        updateTotalPeriod(formBody.startDate, formBody.endDate)
                       "
                     >
                       <template #year="{ year }">{{ year + 543 }}</template>
@@ -1695,141 +1655,17 @@ onMounted(async () => {
                           outlined
                           readonly
                           class="inputgreen"
-                          :model-value="
-                            formBody.studyEndDate
-                              ? date2Thai(formBody.studyEndDate)
-                              : null
-                          "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                  <div class="col-xs-12 col-md-3">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="รวมระยะเวลาในการฝึกอบรม"
-                      class="inputgreen"
-                      v-model="formBody.totalPeriod"
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <!-- เลือกทุน 3 -->
-              <div
-                class="col-12"
-                v-else-if="formBody.scholarshipType === 'ABROAD'"
-              >
-                <div class="row q-col-gutter-md">
-                  <div class="col-xs-12 col-md-6">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="หลักสูตรการฝึกอบรม"
-                      class="inputgreen"
-                      v-model="formBody.course"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-md-6">
-                    <q-input
-                      dense
-                      outlined
-                      readonly
-                      label="สาขา"
-                      class="inputgreen"
-                      v-model="formBody.field"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-md-6">
-                    <q-input
-                      dense
-                      readonly
-                      outlined
-                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
-                      class="inputgreen"
-                      v-model="formBody.educationalInstitution"
-                    />
-                  </div>
-                  <div class="col-xs-12 col-md-3">
-                    <datepicker
-                      readonly
-                      menu-class-name="modalfix"
-                      v-model="formBody.startDate"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                      @update:model-value="changeStartDate('startDate')"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          readonly
-                          dense
-                          outlined
-                          class="inputgreen"
-                          :model-value="
-                            formBody.startDate
-                              ? date2Thai(formBody.startDate)
-                              : null
-                          "
-                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                  <div class="col-xs-12 col-md-3">
-                    <datepicker
-                      readonly
-                      menu-class-name="modalfix"
-                      v-model="formBody.endDate"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                      :min-date="formBody.startDate"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          dense
-                          readonly
-                          outlined
-                          class="inputgreen"
                           :model-value="
                             formBody.endDate
                               ? date2Thai(formBody.endDate)
                               : null
                           "
                           :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1843,32 +1679,48 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="สถานที่ไปศึกษาดูงานในประเทศ"
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="รวมระยะเวลาในการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
+                  <div class="col-12 col-md-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="สถานที่ไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyPlace"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="หัวข้อการไปศึกษาดูงานในประเทศ"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyTopic"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
+                      readonly
                       autoApply
                       :enableTimePicker="false"
                       week-start="0"
@@ -1889,7 +1741,8 @@ onMounted(async () => {
                               ? date2Thai(formBody.studyStartDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
+                          :label="`${'วันเริ่มต้นการดูงาน'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1903,13 +1756,281 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
                       autoApply
+                      readonly
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.studyStartDate"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.studyEndDate
+                              ? date2Thai(formBody.studyEndDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการดูงาน'}`"
+                          hide-bottom-space
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </div>
+
+              <!-- เลือกทุน 3 -->
+              <div
+                class="col-12"
+                v-else-if="formBody.scholarshipType === 'ABROAD'"
+              >
+                <div class="row q-col-gutter-md">
+                  <div class="col-12 col-md-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="หลักสูตรการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.course"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-12 col-md-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="สาขา"
+                      class="inputgreen"
+                      v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขา'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-12 col-md-3">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.educationalInstitution"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                      ]"
+                    />
+                  </div>
+                  <div class="col-12 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.startDate"
+                      :locale="'th'"
+                      readonly
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('startDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          readonly
+                          class="inputgreen"
+                          :model-value="
+                            formBody.startDate
+                              ? date2Thai(formBody.startDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
+                          ]"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-12 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.endDate"
+                      :locale="'th'"
+                      autoApply
+                      readonly
+                      :enableTimePicker="false"
+                      week-start="0"
+                      :min-date="formBody.startDate"
+                      @update:model-value="
+                        updateTotalPeriod(formBody.startDate, formBody.endDate)
+                      "
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          readonly
+                          outlined
+                          class="inputgreen"
+                          :model-value="
+                            formBody.endDate
+                              ? date2Thai(formBody.endDate)
+                              : null
+                          "
+                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
+                          ]"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-12 col-md-3">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="รวมระยะเวลาในการฝึกอบรม"
+                      class="inputgreen"
+                      v-model="formBody.totalPeriod"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="สถานที่ไปดูงานในประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyPlace"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="หัวข้อการไปดูงานในประเทศ"
+                      class="inputgreen"
+                      v-model="formBody.studyTopic"
+                    />
+                  </div>
+                  <div class="col-12 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyStartDate"
+                      :locale="'th'"
+                      readonly
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                      @update:model-value="changeStartDate('studyStartDate')"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          class="inputgreen"
+                          readonly
+                          :model-value="
+                            formBody.studyStartDate
+                              ? date2Thai(formBody.studyStartDate)
+                              : null
+                          "
+                          :label="`${'วันเริ่มต้นการดูงานในประเทศ'}`"
+                          hide-bottom-space
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-12 col-md-3">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formBody.studyEndDate"
+                      readonly
+                      :locale="'th'"
+                      autoApply
                       :enableTimePicker="false"
                       week-start="0"
                       :min-date="formBody.studyStartDate"
@@ -1928,15 +2049,16 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.studyEndDate
                               ? date2Thai(formBody.studyEndDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
+                          :label="`${'วันสิ้นสุดการดูงานในประเทศ'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -1950,35 +2072,39 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6" v-if="!$q.screen.gt.xs"></div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="ประเทศที่เดินทางไปศึกษาดูงาน"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="ประเทศที่เดินทางไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyCountry"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      label="หัวข้อการไปดูงานต่างประเทศ"
                       class="inputgreen"
                       v-model="formBody.studyAbroadTopic"
                     />
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
+                      readonly
                       week-start="0"
                       @update:model-value="
                         changeStartDate('studyAbroadStartDate')
@@ -1991,15 +2117,16 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.studyAbroadStartDate
                               ? date2Thai(formBody.studyAbroadStartDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันเริ่มต้นการดูงานต่างประเทศ'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2013,22 +2140,16 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
+                      readonly
                       week-start="0"
                       :min-date="formBody.studyAbroadStartDate"
-                      @update:model-value="
-                        updateTotalPeriod(
-                          formBody.studyAbroadStartDate,
-                          formBody.studyAbroadEndDate
-                        )
-                      "
                     >
                       <template #year="{ year }">{{ year + 543 }}</template>
                       <template #year-overlay-value="{ value }">{{
@@ -2037,15 +2158,16 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
                           class="inputgreen"
+                          readonly
                           :model-value="
                             formBody.studyAbroadEndDate
                               ? date2Thai(formBody.studyAbroadEndDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันสิ้นสุดการดูงานต่างประเทศ'}`"
+                          hide-bottom-space
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2059,30 +2181,25 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
-                    <q-input
-                      readonly
-                      dense
-                      outlined
-                      label="รวมระยะเวลาในการศึกษา"
-                      class="inputgreen"
-                      v-model="formBody.totalPeriod"
-                    />
-                  </div>
                 </div>
               </div>
 
-              <!-- เลือกทุน 5 -->
+              <!-- เลือกทุน 5 || 6 -->
               <div
                 class="col-12"
-                v-else-if="formBody.scholarshipType === 'RESEARCH'"
+                v-else-if="
+                  formBody.scholarshipType === 'STUDY' ||
+                  formBody.scholarshipType === 'TRAINING'
+                "
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-xs-12 col-md-3">
+                  <!-- <div class="col-3">
                     <q-select
                       dense
-                      readonly
                       outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
                       class="inputgreen"
                       label="ประเภทการพัฒนา"
                       v-model="formBody.studyTopic"
@@ -2093,71 +2210,144 @@ onMounted(async () => {
                         'ดูงาน',
                         'ปฏิบัติการวิจัย',
                       ]"
+                      :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกประเภทการพัฒนา'}`,
+                  ]"
                     />
-                  </div>
+                  </div> -->
 
-                  <div class="col-xs-12 col-md-3">
-                    <q-input
+                  <div
+                    class="col-12 col-md-3"
+                    v-if="formBody.scholarshipType !== 'TRAINING'"
+                  >
+                    <!-- <q-input
                       dense
-                      readonly
                       outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
                       label="ระดับปริญญา"
                       class="inputgreen"
                       v-model="formBody.degreeLevel"
-                    />
-                  </div>
-
-                  <div class="col-xs-12 col-md-6">
-                    <q-input
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                      ]"
+                    /> -->
+                    <q-select
                       dense
-                      readonly
                       outlined
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
                       class="inputgreen"
-                      :label="convertCourse()"
-                      v-model="formBody.course"
+                      label="ระดับปริญญา"
+                      v-model="formBody.degreeLevel"
+                      :options="[
+                        'ปริญญาตรี',
+                        'สูงกว่าปริญญาตรี',
+                        'ปริญญาโท',
+                        'ปริญญาเอก',
+                      ]"
+                      :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                  ]"
                     />
                   </div>
 
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      readonly
                       outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      class="inputgreen"
+                      :label="
+                        formBody.scholarshipType === 'STUDY'
+                          ? 'หลักสูตรการศึกษา'
+                          : 'หลักสูตรการฝึกอบรม'
+                      "
+                      v-model="formBody.course"
+                      :rules="[
+                    (val: string) =>
+                      !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY'
+                          ? 'หลักสูตรการศึกษา'
+                          : 'หลักสูตรการฝึกอบรม'}`,
+                  ]"
+                    />
+                  </div>
+
+                  <div
+                    class="col-12 col-md-3"
+                    v-if="formBody.scholarshipType !== 'TRAINING'"
+                  >
+                    <q-input
+                      dense
+                      outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
                       label="สาขาวิชา"
                       class="inputgreen"
                       v-model="formBody.field"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกสาขาวิชา'}`,
+                      ]"
                     />
                   </div>
 
-                  <div class="col-xs-12 col-md-3">
+                  <div
+                    class="col-12 col-md-3"
+                    v-if="formBody.scholarshipType !== 'TRAINING'"
+                  >
                     <q-input
                       dense
-                      readonly
                       outlined
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
                       label="คณะ"
                       class="inputgreen"
                       v-model="formBody.faculty"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกคณะ'}`,
+                      ]"
                     />
                   </div>
 
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
-                      readonly
                       dense
                       outlined
-                      label="สถาบันการศึกษา/หน่วยงานผู้จัด"
+                      readonly
+                      lazy-rules
+                      hide-bottom-space
+                      :label="
+                        formBody.scholarshipType === 'STUDY'
+                          ? 'สถาบันการศึกษา'
+                          : 'หน่วยงานผู้จัด'
+                      "
                       class="inputgreen"
                       v-model="formBody.studyPlace"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY' ? 'สถาบันการศึกษา':'หน่วยงานผู้จัด'}`,
+                      ]"
                     />
                   </div>
 
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
+                      readonly
                       :enableTimePicker="false"
                       week-start="0"
                       @update:model-value="changeStartDate('startDate')"
@@ -2177,7 +2367,16 @@ onMounted(async () => {
                               ? date2Thai(formBody.startDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                          :label="`${
+                            formBody.scholarshipType === 'STUDY'
+                              ? 'วันเริ่มต้นการศึกษา'
+                              : 'วันเริ่มต้นการอบรม'
+                          }`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `กรุณาเลือก${formBody.scholarshipType === 'STUDY' ? 'วันเริ่มต้นการศึกษา':'วันเริ่มต้นการอบรม'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2191,14 +2390,13 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
+                      readonly
                       :enableTimePicker="false"
                       week-start="0"
                       :min-date="formBody.startDate"
@@ -2218,7 +2416,16 @@ onMounted(async () => {
                               ? date2Thai(formBody.endDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                          :label="`${
+                            formBody.scholarshipType === 'STUDY'
+                              ? 'วันสิ้นสุดการศึกษา'
+                              : 'วันสิ้นสุดการอบรม'
+                          }`"
+                          hide-bottom-space
+                          :rules="[
+                            (val: string) =>
+                              !!val || `กรุณาเลือก${formBody.scholarshipType === 'STUDY' ? 'วันสิ้นสุดการศึกษา':'วันสิ้นสุดการอบรม'}`,
+                          ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2232,39 +2439,51 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-
-                  <div class="col-xs-12 col-md-6">
+                  <div class="col-12 col-md-6">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      :label="'สถานที่ (เมือง/ประเทศ)'"
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      :label="
+                        formBody.scholarshipType === 'STUDY'
+                          ? 'สถานที่ไปศึกษา (เมือง/ประเทศ)'
+                          : 'สถานที่เข้ารับการฝึกอบรม (เมือง/ประเทศ)'
+                      "
                       class="inputgreen"
                       v-model="formBody.studyCountry"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY' ? 'สถานที่ไปศึกษา (เมือง/ประเทศ)':'สถานที่เข้ารับการฝึกอบรม (เมือง/ประเทศ)'}`,
+                      ]"
                     />
                   </div>
 
-                  <div
-                    v-if="formBody.studyTopic == 'ดูงาน'"
-                    class="col-xs-12 col-md-3"
-                  >
+                  <div v-if="formBody.studyTopic == 'ดูงาน'" class="col-12 col-md-3">
                     <q-input
                       dense
                       readonly
                       outlined
+                      lazy-rules
+                      hide-bottom-space
                       label="ประเทศที่ไปดูงาน"
                       class="inputgreen"
                       v-model="formBody.studyCountry"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอประเทศที่ไปดูงาน'}`,
+                      ]"
                     />
                   </div>
 
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
+                      readonly
                       :enableTimePicker="false"
                       week-start="0"
                       @update:model-value="
@@ -2278,15 +2497,20 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.studyAbroadStartDate
                               ? date2Thai(formBody.studyAbroadStartDate)
                               : null
                           "
-                          :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันขออนุมัติเดินทางออกจากประเทศไทย'}`"
+                          hide-bottom-space
+                          :rules="[
+                        (val: string) =>
+                          !!val || `${'วันขออนุมัติเดินทางออกจากประเทศไทย'}`,
+                      ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2300,14 +2524,14 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <datepicker
-                      readonly
                       menu-class-name="modalfix"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
                       :enableTimePicker="false"
+                      readonly
                       week-start="0"
                       :min-date="formBody.studyAbroadStartDate"
                       @update:model-value="
@@ -2324,15 +2548,20 @@ onMounted(async () => {
                       <template #trigger>
                         <q-input
                           dense
-                          readonly
                           outlined
+                          readonly
                           class="inputgreen"
                           :model-value="
                             formBody.studyAbroadEndDate
                               ? date2Thai(formBody.studyAbroadEndDate)
                               : null
                           "
-                          :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                          :label="`${'วันเดินทางกลับถึงประเทศไทย'}`"
+                          hide-bottom-space
+                          :rules="[
+                        (val: string) =>
+                          !!val || `${'วันเดินทางกลับถึงประเทศไทย'}`,
+                      ]"
                         >
                           <template v-slot:prepend>
                             <q-icon
@@ -2346,14 +2575,20 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-xs-12 col-md-3">
+                  <div class="col-12 col-md-3">
                     <q-input
                       dense
-                      readonly
                       outlined
-                      label="รวมระยะเวลาในการศึกษา"
+                      lazy-rules
+                      readonly
+                      hide-bottom-space
+                      label="รวมระยะเวลาทั้งสิ้น"
                       class="inputgreen"
                       v-model="formBody.totalPeriod"
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณากรอกรวมระยะเวลาทั้งสิ้น'}`,
+                      ]"
                     />
                   </div>
                 </div>
@@ -2367,33 +2602,45 @@ onMounted(async () => {
             v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
           >
             <div class="row q-col-gutter-md">
-              <div class="col-xs-12 col-md-md-6">
+              <div class="col-12 col-md-6">
                 <q-input
-                  readonly
                   dense
                   outlined
+                  lazy-rules
+                  readonly
+                  hide-bottom-space
                   class="inputgreen"
                   label="หลักสูตรการฝึกอบรม"
                   v-model="formBody.course"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+                  ]"
                 />
               </div>
-              <div class="col-xs-12 col-md-md-6">
+              <div class="col-12 col-md-6">
                 <q-input
                   dense
-                  readonly
                   outlined
+                  lazy-rules
+                  readonly
+                  hide-bottom-space
                   class="inputgreen"
                   label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                   v-model="formBody.educationalInstitution"
+                  :rules="[
+                    (val: string) =>
+                      !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
+                  ]"
                 />
               </div>
-              <div class="col-xs-12 col-md-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.startDate"
                   :locale="'th'"
                   autoApply
+                  readonly
                   :enableTimePicker="false"
                   week-start="0"
                   @update:model-value="changeStartDate('startDate')"
@@ -2406,15 +2653,20 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      readonly
                       outlined
                       class="inputgreen"
+                      readonly
                       :model-value="
                         formBody.startDate
                           ? date2Thai(formBody.startDate)
                           : null
                       "
                       :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณาเลือกวันที่เริ่มต้นการฝึกอบรม'}`,
+                      ]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2428,12 +2680,12 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-xs-12 col-md-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.endDate"
                   :locale="'th'"
+                  readonly
                   autoApply
                   :enableTimePicker="false"
                   week-start="0"
@@ -2453,6 +2705,11 @@ onMounted(async () => {
                         formBody.endDate ? date2Thai(formBody.endDate) : null
                       "
                       :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                      hide-bottom-space
+                      :rules="[
+                        (val: string) =>
+                          !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
+                      ]"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2466,37 +2723,46 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-6" v-if="!$q.screen.gt.xs"></div>
-              <div class="col-xs-12 col-md-6">
+              <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
+              <div class="col-12 col-md-6">
                 <q-input
                   dense
-                  readonly
                   outlined
-                  label="สถานที่ไปศึกษาดูงานในประเทศ"
+                  lazy-rules
+                  readonly
+                  hide-bottom-space
+                  label="สถานที่ไปดูงานในประเทศ"
                   class="inputgreen"
                   v-model="formBody.studyPlace"
                 />
               </div>
-              <div class="col-xs-12 col-md-6">
+              <div class="col-12 col-md-6">
                 <q-input
                   dense
-                  readonly
                   outlined
-                  label="หัวข้อการไปศึกษาดูงานในประเทศ"
+                  readonly
+                  lazy-rules
+                  hide-bottom-space
+                  label="หัวข้อการไปดูงานในประเทศ"
                   class="inputgreen"
                   v-model="formBody.studyTopic"
                 />
               </div>
-              <div class="col-xs-12 col-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.studyStartDate"
                   :locale="'th'"
+                  readonly
                   autoApply
                   :enableTimePicker="false"
                   week-start="0"
-                  @update:model-value="changeStartDate('studyAbroadStartDate')"
+                  @update:model-value="
+                    updateTotalPeriod(
+                      formBody.studyStartDate,
+                      formBody.studyEndDate
+                    )
+                  "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -2505,15 +2771,16 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      readonly
                       outlined
+                      readonly
                       class="inputgreen"
                       :model-value="
                         formBody.studyStartDate
                           ? date2Thai(formBody.studyStartDate)
                           : null
                       "
-                      :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
+                      :label="`${'วันเริ่มต้นการดูงานในประเทศ'}`"
+                      hide-bottom-space
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2527,14 +2794,14 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-xs-12 col-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.studyEndDate"
                   :locale="'th'"
                   autoApply
                   :enableTimePicker="false"
+                  readonly
                   week-start="0"
                   :min-date="formBody.studyStartDate"
                   @update:model-value="
@@ -2551,15 +2818,16 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      readonly
                       outlined
+                      readonly
                       class="inputgreen"
                       :model-value="
                         formBody.studyEndDate
                           ? date2Thai(formBody.studyEndDate)
                           : null
                       "
-                      :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
+                      :label="`${'วันสิ้นสุดการดูงานในประเทศ'}`"
+                      hide-bottom-space
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2573,34 +2841,50 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-6" v-if="!$q.screen.gt.xs"></div>
-              <div class="col-xs-12 col-md-6">
+              <div class="col-12 col-md-3">
                 <q-input
                   dense
-                  readonly
                   outlined
-                  label="ประเทศที่ไปศึกษาดูงาน"
+                  lazy-rules
+                  readonly
+                  hide-bottom-space
+                  label="รวมระยะเวลาในการฝึกอบรม"
+                  class="inputgreen"
+                  v-model="formBody.totalPeriod"
+                />
+              </div>
+              <div class="col-md-3" v-if="$q.screen.gt.sm"></div>
+              <div class="col-12 col-md-6">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  readonly
+                  hide-bottom-space
+                  label="ประเทศที่ไปดูงาน"
                   class="inputgreen"
                   v-model="formBody.studyCountry"
                 />
               </div>
-              <div class="col-xs-12 col-md-6">
+              <div class="col-12 col-md-6">
                 <q-input
                   dense
                   outlined
+                  lazy-rules
                   readonly
-                  label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
+                  hide-bottom-space
+                  label="หัวข้อการไปดูงานต่างประเทศ"
                   class="inputgreen"
                   v-model="formBody.studyAbroadTopic"
                 />
               </div>
-              <div class="col-xs-12 col-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.studyAbroadStartDate"
                   :locale="'th'"
                   autoApply
+                  readonly
                   :enableTimePicker="false"
                   week-start="0"
                   @update:model-value="changeStartDate('studyAbroadStartDate')"
@@ -2612,15 +2896,16 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      readonly
                       outlined
+                      readonly
                       class="inputgreen"
                       :model-value="
                         formBody.studyAbroadStartDate
                           ? date2Thai(formBody.studyAbroadStartDate)
                           : null
                       "
-                      :label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
+                      :label="`${'วันเริ่มต้นการดูงานต่างประเทศ'}`"
+                      hide-bottom-space
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2634,22 +2919,16 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="ccol-xs-12 ol-md-3">
+              <div class="col-12 col-md-3">
                 <datepicker
-                  readonly
                   menu-class-name="modalfix"
                   v-model="formBody.studyAbroadEndDate"
                   :locale="'th'"
                   autoApply
                   :enableTimePicker="false"
+                  readonly
                   week-start="0"
                   :min-date="formBody.studyAbroadStartDate"
-                  @update:model-value="
-                    updateTotalPeriod(
-                      formBody.studyAbroadStartDate,
-                      formBody.studyAbroadEndDate
-                    )
-                  "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -2658,15 +2937,16 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
-                      readonly
                       outlined
+                      readonly
                       class="inputgreen"
                       :model-value="
                         formBody.studyAbroadEndDate
                           ? date2Thai(formBody.studyAbroadEndDate)
                           : null
                       "
-                      :label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
+                      :label="`${'วันสิ้นสุดการดูงานต่างประเทศ'}`"
+                      hide-bottom-space
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -2680,18 +2960,74 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-xs-12 col-md-3">
-                <q-input
-                  readonly
-                  dense
-                  outlined
-                  label="รวมระยะเวลาในการฝึกอบรม "
-                  class="inputgreen"
-                  v-model="formBody.totalPeriod"
-                />
-              </div>
             </div>
           </div>
+
+          <div class="col-12">
+            <q-input
+              readonly
+              outlined
+              dense
+              class="inputgreen"
+              v-model="formBody.changeDetail"
+              label="เปลี่ยนแปลงรายละเอียด"
+              rows="3"
+              hide-bottom-space
+              type="textarea"
+            />
+          </div>
+
+          <!-- ผู้ค้ำประกัน -->
+          <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
+            <q-card bordered tyle="border: 1px solid #d6dee1">
+              <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                ข้อมูลผู้ค้ำประกัน
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div
+                class="row col-12 q-col-gutter-md q-pa-md"
+                v-if="isGuarantor"
+              >
+                <div class="col">
+                  <div class="row q-col-gutter-md">
+                    <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.citizenId }}
+                    </div>
+                    <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.name }}
+                    </div>
+                    <div class="col-4 text-grey">ตำแหน่ง</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.position }}
+                    </div>
+                    <div class="col-4 text-grey">ตำแหน่งประเภท</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.type }}
+                    </div>
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="row q-col-gutter-md">
+                    <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.level }}
+                    </div>
+                    <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataGuarantor.positionSide }}
+                    </div>
+                    <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                    <div class="col-8 text-weight-medium text-html">
+                      {{ dataGuarantor.org }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <!-- ผู้ค้ำประกัน -->
         </div>
       </q-card>
     </div>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index a22a888..e7813d7 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -41,8 +41,12 @@ const scholarshipTypeOp = ref<DataOptions[]>([
     name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
   },
   {
-    id: "RESEARCH",
-    name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
+    id: "STUDY",
+    name: "ทุนการศึกษา ณ ต่างประเทศ",
+  },
+  {
+    id: "TRAINING",
+    name: "ทุนฝึกอบรม ณ ต่างประเทศ",
   },
 ]);
 
@@ -144,8 +148,10 @@ function convertType(val: string) {
       return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)";
     case "EXECUTIVE":
       return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)";
-    case "RESEARCH":
-      return "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ";
+    case "STUDY":
+      return "ทุนการศึกษา ณ ต่างประเทศ";
+    case "TRAINING":
+      return "ทุนฝึกอบรม ณ ต่างประเทศ";
   }
 }
 

From 6813d496e8cb1fbd5714caa759dd69034748c3dc Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 24 Apr 2025 15:05:48 +0700
Subject: [PATCH 069/195] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20?=
 =?UTF-8?q?=20Eva?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EvaluateStepMain.vue           |  10 +-
 .../06_evaluate/components/step/step2.vue     |  61 ++---
 .../06_evaluate/components/step/step4.vue     |  10 +-
 .../06_evaluate/components/step/step6.vue     |  69 +++--
 .../06_evaluate/components/step/step7.vue     |   3 -
 .../06_evaluate/components/step/step8.vue     |   9 +-
 .../components/viewstep/popupHistory.vue      |   2 +-
 .../components/viewstep/viewStep1.vue         | 245 +++++++++++++++++-
 8 files changed, 317 insertions(+), 92 deletions(-)

diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index 980e619..a497936 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -321,7 +321,7 @@ async function saveStep1() {
   }));
 
   const performances = formDetail.value.assessments.map(
-    ({ id, ...rest }: any) => ({
+    ({ id, isAdd, ...rest }: any) => ({
       ...rest,
     })
   );
@@ -444,8 +444,8 @@ async function saveStep2() {
           ),
           { ...formCommand, assignedPosition: undefined }
         )
-        .then(() => {
-          route.params.id && fetchCheckStep(route.params.id.toString());
+        .then(async () => {
+          route.params.id && (await fetchCheckStep(route.params.id.toString()));
         })
         .catch((err) => {
           messageError($q, err);
@@ -534,8 +534,8 @@ async function saveStep6() {
           ),
           body
         )
-        .then(() => {
-          route.params.id && fetchCheckStep(route.params.id.toString());
+        .then(async () => {
+          route.params.id && (await fetchCheckStep(route.params.id.toString()));
         })
         .catch((err) => {
           messageError($q, err);
diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index 3050195..cb21e06 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -450,7 +450,7 @@ onMounted(async () => {
                   <div class="row col-12 q-col-gutter-sm">
                     <q-input
                       :readonly="store.currentStep != 2 || store.statusUpload"
-                      class="col-xs-6 col-sm-3"
+                      class="col-xs-6 col-sm-6"
                       dense
                       outlined
                       v-model="formCommand.commanderPosition"
@@ -460,21 +460,10 @@ onMounted(async () => {
                       lazy-rules
                       hide-bottom-space
                     />
+
                     <q-input
                       :readonly="store.currentStep != 2 || store.statusUpload"
-                      class="col-xs-6 col-sm-3"
-                      dense
-                      outlined
-                      v-model="formCommand.commanderPositionOld"
-                      @update:model-value="updateInput(formCommand)"
-                      label="ตำแหน่งเดิม"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
-                      lazy-rules
-                      hide-bottom-space
-                    />
-                    <q-input
-                      :readonly="store.currentStep != 2 || store.statusUpload"
-                      class="col-xs-6 col-sm-3"
+                      class="col-xs-6 col-sm-6"
                       dense
                       outlined
                       v-model="formCommand.commanderOrg"
@@ -486,14 +475,22 @@ onMounted(async () => {
                     />
                     <q-input
                       :readonly="store.currentStep != 2 || store.statusUpload"
-                      class="col-xs-6 col-sm-3"
+                      class="col-xs-6 col-sm-6"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderPositionOld"
+                      @update:model-value="updateInput(formCommand)"
+                      label="ตำแหน่งเดิม"
+                      hide-bottom-space
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-6"
                       dense
                       outlined
                       v-model="formCommand.commanderOrgOld"
                       @update:model-value="updateInput(formCommand)"
                       label="สังกัดเดิม"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
-                      lazy-rules
                       hide-bottom-space
                     />
                   </div>
@@ -524,7 +521,7 @@ onMounted(async () => {
                   <div class="row col-12 q-col-gutter-sm">
                     <q-input
                       :readonly="store.currentStep != 2 || store.statusUpload"
-                      class="col-xs-6 col-sm-3"
+                      class="col-xs-6 col-sm-6"
                       dense
                       outlined
                       v-model="formCommand.commanderAbovePosition"
@@ -536,19 +533,7 @@ onMounted(async () => {
                     />
                     <q-input
                       :readonly="store.currentStep != 2 || store.statusUpload"
-                      class="col-xs-6 col-sm-3"
-                      dense
-                      outlined
-                      v-model="formCommand.commanderAbovePositionOld"
-                      label="ตำแหน่งเดิม"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
-                      lazy-rules
-                      hide-bottom-space
-                      @update:model-value="updateInput(formCommand)"
-                    />
-                    <q-input
-                      :readonly="store.currentStep != 2 || store.statusUpload"
-                      class="col-xs-6 col-sm-3"
+                      class="col-xs-6 col-sm-6"
                       dense
                       outlined
                       v-model="formCommand.commanderAboveOrg"
@@ -560,13 +545,21 @@ onMounted(async () => {
                     />
                     <q-input
                       :readonly="store.currentStep != 2 || store.statusUpload"
-                      class="col-xs-6 col-sm-3"
+                      class="col-xs-6 col-sm-6"
+                      dense
+                      outlined
+                      v-model="formCommand.commanderAbovePositionOld"
+                      label="ตำแหน่งเดิม"
+                      hide-bottom-space
+                      @update:model-value="updateInput(formCommand)"
+                    />
+                    <q-input
+                      :readonly="store.currentStep != 2 || store.statusUpload"
+                      class="col-xs-6 col-sm-6"
                       dense
                       outlined
                       v-model="formCommand.commanderAboveOrgOld"
                       label="สังกัดเดิม"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
-                      lazy-rules
                       hide-bottom-space
                       @update:model-value="updateInput(formCommand)"
                     />
diff --git a/src/modules/06_evaluate/components/step/step4.vue b/src/modules/06_evaluate/components/step/step4.vue
index 839f63b..56d583d 100644
--- a/src/modules/06_evaluate/components/step/step4.vue
+++ b/src/modules/06_evaluate/components/step/step4.vue
@@ -226,7 +226,15 @@ onMounted(async () => {
 
   <div class="row q-col-gutter-sm q-pa-sm">
     <div class="col-6" v-for="(item, index) in formTemplates" :key="index">
-      <q-card bordered class="cardSp1">
+      <q-card
+        bordered
+        class="cardSp1"
+        v-if="
+          (store.currentStep !== 4 &&
+            formTemplates.some((e) => e.downloadFile !== '')) ||
+          store.currentStep == 4
+        "
+      >
         <div
           class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
         >
diff --git a/src/modules/06_evaluate/components/step/step6.vue b/src/modules/06_evaluate/components/step/step6.vue
index 450c22b..9907555 100644
--- a/src/modules/06_evaluate/components/step/step6.vue
+++ b/src/modules/06_evaluate/components/step/step6.vue
@@ -386,7 +386,7 @@ onMounted(async () => {
                         :readonly="
                           store.currentStep != 6 || store.statusUpload6
                         "
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.commanderPosition"
@@ -401,22 +401,7 @@ onMounted(async () => {
                         :readonly="
                           store.currentStep != 6 || store.statusUpload6
                         "
-                        class="col-xs-6 col-sm-3"
-                        dense
-                        outlined
-                        v-model="formCommand.commanderPositionOld"
-                        @update:model-value="updateInput(formCommand)"
-                        label="ตำแหน่งเดิม"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
-                        lazy-rules
-                        hide-bottom-space
-                      />
-
-                      <q-input
-                        :readonly="
-                          store.currentStep != 6 || store.statusUpload6
-                        "
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.commanderOrg"
@@ -430,14 +415,24 @@ onMounted(async () => {
                         :readonly="
                           store.currentStep != 6 || store.statusUpload6
                         "
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderPositionOld"
+                        @update:model-value="updateInput(formCommand)"
+                        label="ตำแหน่งเดิม"
+                        hide-bottom-space
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.commanderOrgOld"
                         @update:model-value="updateInput(formCommand)"
                         label="สังกัดเดิม"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
-                        lazy-rules
                         hide-bottom-space
                       />
                     </div>
@@ -471,7 +466,7 @@ onMounted(async () => {
                         :readonly="
                           store.currentStep != 6 || store.statusUpload6
                         "
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.commanderAbovePosition"
@@ -485,21 +480,7 @@ onMounted(async () => {
                         :readonly="
                           store.currentStep != 6 || store.statusUpload6
                         "
-                        class="col-xs-6 col-sm-3"
-                        dense
-                        outlined
-                        v-model="formCommand.commanderAbovePositionOld"
-                        label="ตำแหน่งเดิม"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งเดิม'}`]"
-                        lazy-rules
-                        hide-bottom-space
-                        @update:model-value="updateInput(formCommand)"
-                      />
-                      <q-input
-                        :readonly="
-                          store.currentStep != 6 || store.statusUpload6
-                        "
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.commanderAboveOrg"
@@ -513,13 +494,23 @@ onMounted(async () => {
                         :readonly="
                           store.currentStep != 6 || store.statusUpload6
                         "
-                        class="col-xs-6 col-sm-3"
+                        class="col-xs-6 col-sm-6"
+                        dense
+                        outlined
+                        v-model="formCommand.commanderAbovePositionOld"
+                        label="ตำแหน่งเดิม"
+                        hide-bottom-space
+                        @update:model-value="updateInput(formCommand)"
+                      />
+                      <q-input
+                        :readonly="
+                          store.currentStep != 6 || store.statusUpload6
+                        "
+                        class="col-xs-6 col-sm-6"
                         dense
                         outlined
                         v-model="formCommand.commanderAboveOrgOld"
                         label="สังกัดเดิม"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกสังกัดเดิม'}`]"
-                        lazy-rules
                         hide-bottom-space
                         @update:model-value="updateInput(formCommand)"
                       />
diff --git a/src/modules/06_evaluate/components/step/step7.vue b/src/modules/06_evaluate/components/step/step7.vue
index 8586ce3..a6cf6b9 100644
--- a/src/modules/06_evaluate/components/step/step7.vue
+++ b/src/modules/06_evaluate/components/step/step7.vue
@@ -66,9 +66,6 @@ async function downloadFile(url: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
diff --git a/src/modules/06_evaluate/components/step/step8.vue b/src/modules/06_evaluate/components/step/step8.vue
index 93794c9..ef226e4 100644
--- a/src/modules/06_evaluate/components/step/step8.vue
+++ b/src/modules/06_evaluate/components/step/step8.vue
@@ -172,7 +172,12 @@ onMounted(async () => {
         />
       </div>
 
-      <div class="col-12" v-if="(store.currentStep !== 8 && downloadUrl) ||  store.currentStep == 8 ">
+      <div
+        class="col-12"
+        v-if="
+          (store.currentStep !== 8 && downloadUrl) || store.currentStep == 8
+        "
+      >
         <q-card class="shadow-0" bordered>
           <div class="row col-12 bg-grey-1 q-px-sm q-py-xs items-center">
             <div class="text-weight-medium">เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
@@ -218,7 +223,7 @@ onMounted(async () => {
                 </div>
               </div>
               <div v-else>
-                <div class="row col-12 q-px-sm q-py-xs items-center"> 
+                <div class="row col-12 q-px-sm q-py-xs items-center">
                   <div>เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
                   <q-space />
                   <q-btn
diff --git a/src/modules/06_evaluate/components/viewstep/popupHistory.vue b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
index 90af293..fd03ab9 100644
--- a/src/modules/06_evaluate/components/viewstep/popupHistory.vue
+++ b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
@@ -73,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const row = ref<any>();
+const row = ref<any[]>([]);
 
 /**
  * function เรียกข้อมูลประวัติการประเมิน
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 773715a..d749a44 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -1,5 +1,6 @@
+div
 <script setup lang="ts">
-import { reactive, onMounted } from "vue";
+import { reactive, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -7,6 +8,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDetail";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
 
 /** importType*/
 import type {
@@ -16,10 +18,12 @@ import type {
 
 /** importComponents*/
 import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
+import HeaderDialog from "@/components/DialogHeader.vue";
 
 /** use*/
 const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
+const storeEva = useEvaluateStore();
 const $q = useQuasar();
 const route = useRoute();
 const { showLoader, hideLoader, messageError, date2Thai, findOrgNameHtml } =
@@ -140,7 +144,10 @@ async function fetchDataAllDetail() {
   });
 
   http.get(config.API.dataUserPerformance).then((res) => {
-    formDetail.assessments = res.data.result;
+    formDetail.assessments = res.data.result.map((e: any) => ({
+      ...e,
+      isAdd: false,
+    }));
   });
 
   http.get(config.API.dataUserPortfolio).then((res) => {
@@ -217,6 +224,70 @@ function getData() {
     });
 }
 
+/** ผลงานที่เคยเสนอขอ*/
+const modalPerformance = ref<boolean>(false);
+const isEdit = ref<boolean>(false);
+const isIndex = ref<number>();
+const formPerformance = reactive<any>({
+  year: null,
+  type: "",
+  subject: "",
+  evaluationResult: "",
+});
+const typeOptions = ref<string[]>([
+  "ประเมินชำนาญการ",
+  "ประเมินชำนาญการพิเศษ",
+  "ประเมินเชี่ยวชาญ",
+]);
+
+const resultOptions = ref<any[]>([
+  { label: "ผ่าน", value: "ผ่าน" },
+  { label: "ไม่ผ่าน", value: "ไม่ผ่าน" },
+]);
+
+function onOpenDialogPerformance(
+  stetusEdit: boolean = false,
+  index: number | null = null
+) {
+  if (stetusEdit && index) {
+    isIndex.value = index;
+    const data = formDetail.assessments[index];
+    formPerformance.year = data.year ? Number(data.year) - 543 : null;
+    formPerformance.type = data.type;
+    formPerformance.subject = data.subject;
+    formPerformance.evaluationResult = data.evaluationResult;
+  }
+  isEdit.value = stetusEdit;
+  modalPerformance.value = true;
+}
+
+function onCloseDialogPerformance() {
+  modalPerformance.value = false;
+  formPerformance.year = null;
+  formPerformance.type = "";
+  formPerformance.subject = "";
+  formPerformance.evaluationResult = "";
+}
+
+function onSubmitPerformance() {
+  const body = {
+    ...formPerformance,
+    year: formPerformance.year ? Number(formPerformance.year) + 543 : null,
+    isAdd: true,
+  };
+
+  if (isEdit.value && isIndex.value) {
+    formDetail.assessments[isIndex.value] = body;
+  } else {
+    formDetail.assessments.push(body);
+  }
+  onCloseDialogPerformance();
+}
+
+function onDeletePerformance(index: number) {
+  formDetail.assessments.splice(index, 1);
+}
+
 onMounted(async () => {
   try {
     showLoader();
@@ -575,18 +646,178 @@ onMounted(async () => {
 
       <q-card class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
-          <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
+          <span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี) </span>
+          <q-btn
+            v-if="storeEva.currentStep === 1"
+            class="q-ml-sm"
+            flat
+            round
+            dense
+            color="primary"
+            icon="add"
+            @click.stop="onOpenDialogPerformance(false)"
+          >
+            <q-tooltip>เพิ่มข้อมูล </q-tooltip>
+          </q-btn>
         </div>
         <div class="col-12"><q-separator /></div>
         <div class="col-10">
-          <TableData
-            :columns="columnAssessments"
-            :row="formDetail.assessments"
-          />
+          <div class="q-pa-sm row col-12">
+            <d-table
+              flat
+              bordered
+              :columns="columnAssessments"
+              :rows="formDetail.assessments"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              virtual-scroll
+              class="row col-12"
+              :style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props" class="bg-grey-2">
+                  <q-th auto-widt v-if="storeEva.currentStep === 1" />
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-body2 text-black">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td auto-widt v-if="storeEva.currentStep === 1">
+                    <q-btn
+                      v-if="props.row.isAdd"
+                      flat
+                      dense
+                      round
+                      color="edit"
+                      icon="edit"
+                      @Click.stop.prevent="
+                        onOpenDialogPerformance(true, props.rowIndex)
+                      "
+                    >
+                      <q-tooltip>แก้ไข</q-tooltip>
+                    </q-btn>
+
+                    <q-btn
+                      v-if="props.row.isAdd"
+                      flat
+                      dense
+                      round
+                      color="red"
+                      icon="delete"
+                      @click.stop.pervent="onDeletePerformance(props.rowIndex)"
+                    >
+                      <q-tooltip>ลบ</q-tooltip>
+                    </q-btn>
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div>
+                      {{ !col.value ? "-" : col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
         </div>
       </q-card>
     </div>
   </q-card>
+
+  <q-dialog v-model="modalPerformance" persistent>
+    <q-card style="min-width: 35%">
+      <q-form greedy @submit.prevent @validation-success="onSubmitPerformance">
+        <HeaderDialog
+          :tittle="'ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)'"
+          :close="onCloseDialogPerformance"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formPerformance.year"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      !formPerformance.year
+                        ? null
+                        : Number(formPerformance.year) + 543
+                    "
+                    :label="`${'ปี พ.ศ.'}`"
+                    :rules="[(val:string) => !!val || 'กรุณาเลือกปี พ.ศ.']"
+                    hide-bottom-space
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-12">
+              <q-select
+                dense
+                outlined
+                label="ระดับตอนที่ยืนขอ"
+                hide-bottom-space
+                v-model="formPerformance.type"
+                :options="typeOptions"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formPerformance.subject"
+                label="เรื่อง/ชื่อเรื่อง"
+                outlined
+                dense
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-12">
+              <q-option-group
+                :options="resultOptions"
+                type="radio"
+                v-model="formPerformance.evaluationResult"
+                inline
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="public" type="submit" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style>

From 888385426cda774bba8bec599b4272d1b89fae89 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 25 Apr 2025 14:37:01 +0700
Subject: [PATCH 070/195] =?UTF-8?q?fix=20=E0=B8=A3=E0=B8=B0=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=E0=B8=8A=E0=B8=B1=E0=B9=89=E0=B8=99=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/data.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/stores/data.ts b/src/stores/data.ts
index dad7009..2b4d032 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -13,7 +13,8 @@ export const useDataStore = defineStore("dataMain", () => {
   const storeRegistry = useRegistryInFormationStore();
   const $q = useQuasar();
   const mixin = useCounterMixin();
-  const { messageError, showLoader, hideLoader, findPosMasterNo,findOrgName } = mixin;
+  const { messageError, showLoader, hideLoader, findPosMasterNo, findOrgName } =
+    mixin;
   // ref() คือการประกาศ state เหมือน vuex
   const formData = reactive<ProfileData>({
     profileId: "",
@@ -26,7 +27,7 @@ export const useDataStore = defineStore("dataMain", () => {
     posTypeName: "",
     posLevelName: "",
     salary: null,
-    birthDate: '',
+    birthDate: "",
     posNo: "",
     org: "",
     dateStart: "",
@@ -111,7 +112,12 @@ export const useDataStore = defineStore("dataMain", () => {
     formData.birthDate = data.birthDate;
     formData.posTypeName = data.posTypeName;
     formData.posExecutiveName = data.posExecutiveName;
-    formData.posLevelName = data.posLevelName;
+    formData.posLevelName =
+      data.profileType === "EMPLOYEE"
+        ? data.posTypeShortName
+          ? `${data.posTypeShortName} ${data.posLevelName}`
+          : `${data.posLevelName}`
+        : data.posLevelName;
     formData.dateStart = data.dateStart;
     formData.dateRetireLaw = data.dateRetireLaw;
     formData.posNo = findPosMasterNo(data);

From ea7af9e29cd014ab02bddfc16140f8e4b8cc483e Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 25 Apr 2025 16:01:57 +0700
Subject: [PATCH 071/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20UI=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/components/DialogDetail.vue      |  34 +-
 .../components/FormLeave/01_SickForm.vue      | 139 ++++---
 .../components/FormLeave/03_Birth.vue         | 307 +++++++++------
 .../FormLeave/04_HelpWifeBirthForm.vue        | 334 ++++++++++-------
 .../components/FormLeave/05_VacationForm.vue  | 329 ++++++++++-------
 .../FormLeave/06_OrdinationForm.vue           | 349 ++++++++++++------
 .../components/FormLeave/07_HajjForm.vue      | 182 ++++++---
 .../components/FormLeave/08_MilitaryForm.vue  | 323 ++++++++++------
 .../components/FormLeave/09_StudyForm.vue     | 315 ++++++++++------
 .../components/FormLeave/10_TrainForm.vue     | 308 ++++++++++------
 .../FormLeave/11_WorkInternationalForm.vue    | 280 +++++++++-----
 .../FormLeave/12_FollowSpouseForm.vue         | 316 ++++++++++------
 .../FormLeave/13_RehabilitationForm.vue       | 279 ++++++++------
 src/modules/05_leave/components/ListView.vue  |   2 +-
 .../components/formDetail/01_SickForm.vue     |  16 +-
 .../formDetail/04_HelpWifeBirthForm.vue       |   8 +-
 .../components/formDetail/05_VacationForm.vue |  16 +-
 .../formDetail/06_OrdinationForm.vue          |   8 +-
 .../components/formDetail/07_HajjForm.vue     |   8 +-
 .../components/formDetail/08_MilitaryForm.vue |   8 +-
 .../components/formDetail/09_StudyForm.vue    |  10 +-
 .../components/formDetail/10_TrainForm.vue    |  10 +-
 .../formDetail/11_WorkInternationalForm.vue   |   8 +-
 .../formDetail/12_FollowSpouseForm.vue        |   8 +-
 .../formDetail/13_RehabilitationForm.vue      |   8 +-
 .../components/formDetail/formCancel.vue      |  34 +-
 src/modules/05_leave/interface/index/main.ts  |   2 +
 .../05_leave/interface/response/leave.ts      |   9 +
 src/modules/05_leave/store.ts                 |  72 ++--
 src/modules/05_leave/views/AddPage.vue        |  33 +-
 src/modules/05_leave/views/EditPage.vue       |  49 ++-
 31 files changed, 2463 insertions(+), 1341 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index dd0aece..d3cbabb 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -140,6 +140,8 @@ const formData = reactive<FremDetail>({
   approveStep: "",
   dear: "",
   leaveRange: "",
+  leaveRangeEnd: "",
+  leaveSubTypeName: "",
 });
 
 /** Form รายละเอียดข้อมูล*/
@@ -154,6 +156,7 @@ const formDataCancle = reactive<FromCancelDetail>({
   leaveAddress: "",
   leaveNumber: "",
   leaveDetail: "",
+  leaveSubTypeName: "",
   leaveTotal: 0,
   leaveStartDate: new Date(),
   leaveEndDate: new Date(),
@@ -194,8 +197,7 @@ async function fetchDataDetail(id: string) {
       formData.dateSendLeave =
         data.dateSendLeave && date2Thai(data.dateSendLeave);
       formData.status = data.status ?? "-";
-      formData.leaveDateStart =
-        data.leaveStartDate && date2Thai(data.leaveStartDate);
+      formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate);
       formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
       formData.leaveCount = calculateDurationYmd(
         data.leaveStartDate,
@@ -205,9 +207,11 @@ async function fetchDataDetail(id: string) {
       formData.leaveAddress = data.leaveAddress ?? "-";
       formData.leaveNumber = data.leaveNumber ?? "-";
       formData.leaveDetail = data.leaveDetail ?? "-";
+      formData.leaveSubTypeName = data.leaveSubTypeName ?? null;
       formData.leaveDocument = data.leaveDocument;
       formData.leaveDraftDocument = data.leaveDraftDocument;
       formData.leaveRange = data.leaveRange;
+      formData.leaveRangeEnd = data.leaveRangeEnd;
       formData.leaveLastStart =
         data.leaveLastStart && date2Thai(data.leaveLastStart);
       formData.leaveLastEnd =
@@ -226,7 +230,7 @@ async function fetchDataDetail(id: string) {
         data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
       formData.restDayOldTotal = data.restDayOldTotal ?? "-";
       formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
-      formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช";
+      formData.ordainDayStatus = data.ordainDayStatus;
       formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
       formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
       formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
@@ -236,9 +240,7 @@ async function fetchDataDetail(id: string) {
         data.ordainDayBuddhistLentName ?? "-";
       formData.ordainDayBuddhistLentAddress =
         data.ordainDayBuddhistLentAddress ?? "-";
-      formData.hajjDayStatus = data.hajjDayStatus
-        ? "เคย"
-        : "ไม่เคยไปประกอบพิธีฮัจญ์";
+      formData.hajjDayStatus = data.hajjDayStatus;
       formData.absentDaySummon = data.absentDaySummon ?? "-";
       formData.absentDayLocation = data.absentDayLocation ?? "-";
       formData.absentDayRegistorDate =
@@ -301,15 +303,24 @@ function checkLeaveType(
       checkForm.value = "FormChildbirth";
     } else if (type === "LV-005") {
       checkForm.value = "FormHoliday";
-    } else if (type === "LV-006" && ordainDayLocationName === "") {
-      checkForm.value = "FormHajj";
-    } else if (type === "LV-006") {
+    } else if (type === "LV-006" && formData.leaveSubTypeName === "ลาอุปสมบท") {
       checkForm.value = "FormUpasom";
+    } else if (
+      type === "LV-006" &&
+      formData.leaveSubTypeName === "ลาประกอบพิธีฮัจญ์"
+    ) {
+      checkForm.value = "FormHajj";
     } else if (type === "LV-007") {
       checkForm.value = "FormCheckSelect";
-    } else if (type === "LV-008" && studyDayTrainingSubject === "") {
+    } else if (
+      type === "LV-008" &&
+      formData.leaveSubTypeName === "ลาไปศึกษาต่อ"
+    ) {
       checkForm.value = "FormStudy";
-    } else if (type === "LV-008") {
+    } else if (
+      type === "LV-008" &&
+      formData.leaveSubTypeName === "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน"
+    ) {
       checkForm.value = "FormLeaveToTraining";
     } else if (type === "LV-009") {
       checkForm.value = "FormLeaveToWorkInternational";
@@ -344,6 +355,7 @@ async function fetchDataCancelDetail(id: string) {
       formDataCancle.leaveNumber = data.leaveNumber ?? "-";
       formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
       formDataCancle.leaveDetail = data.leaveDetail ?? "-";
+      formDataCancle.leaveSubTypeName = data.leaveSubTypeName ?? null;
       formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
     })
     .catch((err) => {
diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 188effb..6cf443d 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -15,7 +15,14 @@ const typeForm = defineModel<string>("type", { required: true });
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 const edit = ref<boolean>(true);
 const leaveDocumentRef = ref<any>(null);
 
@@ -46,6 +53,7 @@ const formDataSick = reactive<any>({
   leaveStartDate: null,
   leaveEndDate: null,
   leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveTotal: "",
   leaveLast: null,
   leaveDetail: "",
@@ -121,6 +129,7 @@ function onValidate() {
 
     formData.append("type", formDataSick.type);
     formData.append("leaveRange", formDataSick.leaveRange);
+    formData.append("leaveRangeEnd", formDataSick.leaveRangeEnd);
     formData.append(
       "leaveStartDate",
       convertDateToAPI(formDataSick.leaveStartDate) ?? ""
@@ -144,12 +153,29 @@ function onValidate() {
  */
 const isLeave = ref<boolean>(true);
 const reasonLeave = ref<string>("");
+
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataSick.leaveStartDate) ==
+    convertDateToAPI(formDataSick.leaveEndDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataSick.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataSick.leaveEndDate) ?? null,
+      leaveRange: formDataSick.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataSick.leaveRange
+        : formDataSick.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
@@ -162,8 +188,10 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     })
     .finally(() => {
+      hideLoader();
       leaveDocumentRef.value.resetValidation();
     });
 }
@@ -212,6 +240,7 @@ watch(props.data, () => {
     formDataSick.leaveTotal = props.data.leaveTotal;
     formDataSick.leaveDetail = props.data.leaveDetail;
     formDataSick.leaveRange = props.data.leaveRange;
+    formDataSick.leaveRangeEnd = props.data.leaveRangeEnd;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     formDataSick.leaveDocument = [];
@@ -228,6 +257,7 @@ onMounted(() => {
     formDataSick.leaveTotal = props.data.leaveTotal;
     formDataSick.leaveDetail = props.data.leaveDetail;
     formDataSick.leaveRange = props.data.leaveRange;
+    formDataSick.leaveRangeEnd = props.data.leaveRangeEnd;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
@@ -257,45 +287,22 @@ onMounted(() => {
           :readonly="!edit || statusCheck === 'NEW'"
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
-
-        <div class="col-12 col-md-4 col-sm-12">
-          <q-radio
-            v-model="formDataSick.leaveRange"
-            :disable="!edit || statusCheck === 'NEW'"
-            val="ALL"
-            label="ลาทั้งวัน"
-            checked-icon="task_alt"
-          />
-          <q-radio
-            v-model="formDataSick.leaveRange"
-            :disable="!edit || statusCheck === 'NEW'"
-            val="MORNING"
-            label="ลาครึ่งวันเช้า"
-            checked-icon="task_alt"
-            @update:model-value="resetDate"
-          />
-          <q-radio
-            v-model="formDataSick.leaveRange"
-            :disable="!edit || statusCheck === 'NEW'"
-            val="AFTERNOON"
-            label="ลาครึ่งวันบ่าย"
-            checked-icon="task_alt"
-            @update:model-value="resetDate"
-          />
-        </div>
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
             <datepicker
-              class="col-12 col-md-3 col-sm-6"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               menu-class-name="modalfix"
               v-model="formDataSick.leaveStartDate"
               :locale="'th'"
               autoApply
+              hide-bottom-space
               borderless
               :enableTimePicker="false"
               week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="formDataSick.leaveEndDate = null"
+              @update:model-value="
+                (formDataSick.leaveEndDate = null), fetchCheck()
+              "
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -310,17 +317,16 @@ onMounted(() => {
                   ref="leaveStartDateRef"
                   for="leaveStartDateRef"
                   hide-bottom-space
-                  :readonly="!edit || statusCheck === 'NEW'"
                   bg-color="white"
-                  class="full-width cursor-pointer inputgreen"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
                   :model-value="
                     formDataSick.leaveStartDate != null
                       ? date2Thai(formDataSick.leaveStartDate)
                       : null
                   "
-                  :label="`${'ลาตั้งแต่วันที่'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-                  style="color: var(--q-primary)"
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -333,18 +339,41 @@ onMounted(() => {
                 </q-input>
               </template>
             </datepicker>
-
+            <q-select
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataSick.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
             <datepicker
-              class="col-12 col-md-3 col-sm-6"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               menu-class-name="modalfix"
               v-model="formDataSick.leaveEndDate"
               :locale="'th'"
               autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
               borderless
               :enableTimePicker="false"
               week-start="0"
-              :readonly="isReadOnly"
-              @update:model-value="fetchCheck()"
               :min-date="formDataSick.leaveStartDate"
             >
               <template #year="{ year }">
@@ -361,15 +390,14 @@ onMounted(() => {
                   for="leaveEndDateRef"
                   hide-bottom-space
                   bg-color="white"
-                  :readonly="isReadOnly"
-                  :class="inputEdit(isReadOnly)"
+                  class="full-width datepicker"
                   :model-value="
                     formDataSick.leaveEndDate != null
                       ? date2Thai(formDataSick.leaveEndDate)
                       : null
                   "
-                  :label="`${'ลาถึงวันที่'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -382,6 +410,27 @@ onMounted(() => {
                 </q-input>
               </template>
             </datepicker>
+            <q-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataSick.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
             <q-input
               :bottom-slots="!isLeave ? true : false"
               :color="!isLeave ? 'red' : 'black'"
@@ -403,7 +452,6 @@ onMounted(() => {
                 </span>
               </template>
             </q-input>
-
             <q-input
               class="col-12 col-md-3 col-sm-6"
               dense
@@ -418,6 +466,7 @@ onMounted(() => {
             />
           </div>
         </div>
+
         <div class="full-width">
           <div class="q-col-gutter-sm row">
             <q-input
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index 9f481de..f9c41c4 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -13,7 +13,7 @@ import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, convertDateToAPI } = mixin;
+const { date2Thai, dateToISO, messageError, convertDateToAPI,showLoader,hideLoader } = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -46,6 +46,8 @@ const formDataBirth = reactive<any>({
   leaveEndDate: null,
   leaveTotal: "",
   leaveLast: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveDetail: "",
   leaveDocument: [],
 });
@@ -115,6 +117,8 @@ function onValidate() {
     formData.append("leaveNumber", dataStore.telephoneNumber);
     formData.append("leaveDetail", formDataBirth.leaveDetail);
     formData.append("leaveTotal", formDataBirth.leaveTotal);
+    formData.append("leaveRange", formDataBirth.leaveRange);
+    formData.append("leaveRangeEnd", formDataBirth.leaveRangeEnd);
 
     props.onSubmit(formData, isLeave.value);
   }
@@ -122,18 +126,34 @@ function onValidate() {
 
 const isLeave = ref<boolean>(true);
 const reasonLeave = ref<string>("");
+
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataBirth.leaveEndDate) ==
+    convertDateToAPI(formDataBirth.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
 async function fetchCheck() {
+  showLoader()
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataBirth.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataBirth.leaveEndDate) ?? null,
+      leaveRange: formDataBirth.leaveRange,
+      leaveRangeEnd: checkDate.value ? formDataBirth.leaveRange : formDataBirth.leaveRangeEnd
     })
     .then((res: any) => {
+      hideLoader()
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataBirth.leaveTotal = data.totalDate;
@@ -142,6 +162,7 @@ async function fetchCheck() {
         : "จำนวนวันลาเกินที่กำหนด";
     })
     .catch((e: any) => {
+      hideLoader()
       messageError($q, e);
     });
 }
@@ -161,6 +182,7 @@ watch(props.data, () => {
     formDataBirth.leaveEndDate = props.data.leaveEndDate;
     formDataBirth.leaveTotal = props.data.leaveTotal;
     formDataBirth.leaveDetail = props.data.leaveDetail;
+    formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     formDataBirth.leaveDocument = [];
@@ -176,6 +198,8 @@ onMounted(() => {
     formDataBirth.leaveTotal = props.data.leaveTotal;
     formDataBirth.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataBirth.leaveRange = props.data.leaveRange;
+    formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
   }
@@ -205,137 +229,186 @@ onMounted(() => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
-          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataBirth.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @update:model-value="formDataBirth.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveStartDateRef"
-              for="leaveStartDateRef"
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataBirth.leaveStartDate"
+              :locale="'th'"
+              autoApply
               hide-bottom-space
-              bg-color="white"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataBirth.leaveStartDate != null
-                  ? date2Thai(formDataBirth.leaveStartDate)
-                  : null
+              @update:model-value="
+                (formDataBirth.leaveEndDate = null), fetchCheck()
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
+              <template #year="{ year }">
+                {{ year + 543 }}
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <datepicker
-          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataBirth.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          @update:model-value="fetchCheck()"
-          borderless
-          hide-bottom-space
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!formDataBirth.leaveStartDate"
-          :min-date="formDataBirth.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataBirth.leaveStartDate != null
+                      ? date2Thai(formDataBirth.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveEndDateRef"
-              for="leaveEndDateRef"
-              hide-bottom-space
-              :readonly="!formDataBirth.leaveStartDate"
-              class="full-width datepicker"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              :model-value="
-                formDataBirth.leaveEndDate != null
-                  ? date2Thai(formDataBirth.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+              v-model="formDataBirth.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
-                  class="cursor-pointer"
+                  name="mdi-clock-outline"
                   style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataBirth.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :min-date="formDataBirth.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataBirth.leaveEndDate != null
+                      ? date2Thai(formDataBirth.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
                 >
-                </q-icon>
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+            v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataBirth.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataBirth.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
               </template>
             </q-input>
-          </template>
-        </datepicker>
-        <q-input
-          class="col-12 col-md-3 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataBirth.leaveTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-          :bottom-slots="!isLeave ? true : false"
-          :color="!isLeave ? 'red' : 'black'"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
-          :border-color="!isLeave ? 'red' : 'gray'"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
-        >
-          <template v-slot:hint>
-            <span style="color: red">
-              {{ !isLeave ? reasonLeave : "" }}
-            </span>
-          </template>
-        </q-input>
-        <q-input
-          class="col-12 col-md-3 col-sm-6"
-          dense
-          outlined
-          ref="leaveLastRef"
-          for="leaveLastRef"
-          v-model="dataStore.leaveLast"
-          label="ลาครั้งสุดท้ายเมื่อวันที่"
-          readonly
-          hide-bottom-space
-          bg-color="white"
-        />
+            <q-input
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveLastRef"
+              for="leaveLastRef"
+              v-model="dataStore.leaveLast"
+              label="ลาครั้งสุดท้ายเมื่อวันที่"
+              readonly
+              hide-bottom-space
+              bg-color="white"
+            />
+          </div>
+        </div>
+
         <div class="full-width">
           <div class="q-col-gutter-sm row">
             <q-input
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index 8dca57c..ee44839 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -14,8 +14,17 @@ import type { FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  calculateDurationYmd,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 
+const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 
@@ -49,6 +58,8 @@ const formDataHelpWife = reactive<any>({
   leaveEndDate: null,
   leaveTotal: "",
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveDocument: [],
 });
 
@@ -115,20 +126,22 @@ function onValidate() {
     formData.append("type", formDataHelpWife.type);
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataHelpWife.leaveStartDate)??''
+      convertDateToAPI(formDataHelpWife.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataHelpWife.leaveEndDate)??''
+      convertDateToAPI(formDataHelpWife.leaveEndDate) ?? ""
     );
     formData.append("leaveWrote", formDataHelpWife.leaveWrote);
     formData.append("leaveAddress", dataStore.currentAddress);
     formData.append("leaveNumber", dataStore.telephoneNumber);
     formData.append("leaveDetail", formDataHelpWife.leaveDetail);
     formData.append("wifeDayName", formDataHelpWife.wifeDayName);
+    formData.append("leaveRange", formDataHelpWife.leaveRange);
+    formData.append("leaveRangeEnd", formDataHelpWife.leaveRangeEnd);
     formData.append(
       "wifeDayDateBorn",
-      convertDateToAPI(formDataHelpWife.wifeDayDateBorn)??''
+      convertDateToAPI(formDataHelpWife.wifeDayDateBorn) ?? ""
     );
     formData.append("leaveTotal", formDataHelpWife.leaveTotal);
 
@@ -136,48 +149,57 @@ function onValidate() {
   }
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataHelpWife.leaveStartDate,
-    formDataHelpWife.leaveEndDate
-  );
-  formDataHelpWife.leaveTotal = newLeaveTotal;
-}
-
 const reasonLeave = ref<string>("");
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataHelpWife.leaveEndDate) ==
+    convertDateToAPI(formDataHelpWife.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataHelpWife.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataHelpWife.leaveEndDate) ?? null,
+      leaveRange: formDataHelpWife.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataHelpWife.leaveRange
+        : formDataHelpWife.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataHelpWife.leaveTotal =
         data.totalDate - data.sumDateWork - data.sumDateHoliday;
-
+      leaveText.value = calculateDurationYmd(
+        formDataHelpWife.leaveStartDate,
+        formDataHelpWife.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 
-watch(props.data, () => {
+watch(props.data, async () => {
   if (props.data) {
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
@@ -185,7 +207,14 @@ watch(props.data, () => {
     formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
     formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
     formDataHelpWife.leaveTotal = props.data.leaveTotal;
+    formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
+    formDataHelpWife.leaveRange = props.data.leaveRange;
     formDataHelpWife.leaveDetail = props.data.leaveDetail;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     formDataHelpWife.leaveDocument = [];
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -193,7 +222,7 @@ watch(props.data, () => {
 });
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
@@ -203,6 +232,14 @@ onMounted(() => {
     formDataHelpWife.leaveTotal = props.data.leaveTotal;
     formDataHelpWife.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataHelpWife.leaveRange = props.data.leaveRange;
+    formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
+
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
   }
@@ -230,125 +267,174 @@ onMounted(() => {
           :readonly="!edit || statusCheck === 'NEW'"
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
-        <datepicker
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataHelpWife.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @update:model-value="formDataHelpWife.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveStartDateRef"
-              for="leaveStartDateRef"
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataHelpWife.leaveStartDate"
+              :locale="'th'"
+              autoApply
               hide-bottom-space
-              bg-color="white"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataHelpWife.leaveStartDate != null
-                  ? date2Thai(formDataHelpWife.leaveStartDate)
-                  : null
+              @update:model-value="
+                (formDataHelpWife.leaveEndDate = null), fetchCheck()
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
+              <template #year="{ year }">
+                {{ year + 543 }}
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <datepicker
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataHelpWife.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          hide-bottom-space
-          :enableTimePicker="false"
-          @update:model-value="updateLeaveTotal, fetchCheck()"
-          week-start="0"
-          :readonly="!formDataHelpWife.leaveStartDate"
-          :min-date="formDataHelpWife.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataHelpWife.leaveStartDate != null
+                      ? date2Thai(formDataHelpWife.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveEndDateRef"
-              for="leaveEndDateRef"
-              hide-bottom-space
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              :readonly="!formDataHelpWife.leaveStartDate"
-              class="full-width datepicker"
-              :model-value="
-                formDataHelpWife.leaveEndDate != null
-                  ? date2Thai(formDataHelpWife.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+              v-model="formDataHelpWife.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
-                  class="cursor-pointer"
+                  name="mdi-clock-outline"
                   style="color: var(--q-primary)"
-                >
-                </q-icon>
+                />
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-input
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataHelpWife.leaveTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-          :bottom-slots="!isLeave ? true : false"
-          :color="!isLeave ? 'red' : 'black'"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
-          :border-color="!isLeave ? 'red' : 'gray'"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
-        >
-          <template v-slot:hint>
-            <span style="color: red">
-              {{ !isLeave ? reasonLeave : "" }}
-            </span>
-          </template>
-        </q-input>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataHelpWife.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :min-date="formDataHelpWife.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataHelpWife.leaveEndDate != null
+                      ? date2Thai(formDataHelpWife.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataHelpWife.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+          <q-input
+            :bottom-slots="!isLeave ? true : false"
+            :color="!isLeave ? 'red' : 'black'"
+            :bg-color="!isLeave ? 'red-2' : 'white'"
+            :border-color="!isLeave ? 'red' : 'gray'"
+            :input-class="!isLeave ? dateEndInputStyle : ''"
+            dense
+            outlined
+            ref="leaveTotalRef"
+            for="leaveTotalRef"
+            v-model="leaveText"
+            label="จำนวนวันที่ลา"
+            readonly
+          >
+            <template v-slot:hint>
+              <span style="color: red">
+                {{ !isLeave ? reasonLeave : "" }}
+              </span>
+            </template>
+          </q-input>
+        </div>
         <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
           <q-input
             class="col-12 col-sm-12"
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 1844424..47b0ebc 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -9,12 +9,20 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
 import type { FormRef } from "@/modules/05_leave/interface/request/VacationForm";
+import type { DataOption } from "@/modules/14_IDP/interface/Main";
 
 /** Use */
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -50,6 +58,7 @@ const formDataVacation = reactive<any>({
   leaveEndDate: null,
   leaveTotal: "",
   leaveDetail: "",
+  leaveRangeEnd: "ALL",
   leaveDocument: [],
 });
 
@@ -134,13 +143,14 @@ function onValidate() {
     // formData.append("leaveDocument", formDataVacation.leaveDocument);
     formData.append("type", formDataVacation.type);
     formData.append("leaveRange", formDataVacation.leaveRange);
+    formData.append("leaveRangeEnd", formDataVacation.leaveRangeEnd);
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataVacation.leaveStartDate)??''
+      convertDateToAPI(formDataVacation.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataVacation.leaveEndDate)??''
+      convertDateToAPI(formDataVacation.leaveEndDate) ?? ""
     );
     formData.append("leaveWrote", formDataVacation.leaveWrote);
     formData.append("leaveAddress", dataStore.currentAddress);
@@ -158,12 +168,28 @@ function onValidate() {
 const isLeave = ref<boolean>(true);
 const reasonLeave = ref<string>("");
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataVacation.leaveEndDate) ==
+    convertDateToAPI(formDataVacation.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataVacation.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataVacation.leaveEndDate) ?? null,
+      leaveRange: formDataVacation.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataVacation.leaveRange
+        : formDataVacation.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
@@ -174,9 +200,11 @@ async function fetchCheck() {
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -203,6 +231,7 @@ watch(props.data, () => {
     formDataVacation.leaveTotal = props.data.leaveTotal;
 
     formDataVacation.leaveDetail = props.data.leaveDetail;
+    formDataVacation.leaveRangeEnd = props.data.leaveRangeEnd;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     formDataVacation.leaveRange = props.data.leaveRange;
@@ -224,6 +253,7 @@ onMounted(() => {
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     formDataVacation.leaveRange = props.data.leaveRange;
+    formDataVacation.leaveRangeEnd = props.data.leaveRangeEnd;
     leaveId.value = props.data.id;
   }
 });
@@ -248,9 +278,177 @@ onMounted(() => {
           v-model="formDataVacation.leaveWrote"
           label="เขียนที่"
           :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          :rules="[(val:string) => !!val || `${'กรุณากรอกเขียนที่'}`]"
         />
-        <div class="col-12 col-md-4 col-sm-6">
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataVacation.leaveStartDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!edit || statusCheck === 'NEW'"
+              @update:model-value="
+                (formDataVacation.leaveEndDate = null), fetchCheck()
+              "
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataVacation.leaveStartDate != null
+                      ? date2Thai(formDataVacation.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataVacation.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataVacation.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :min-date="formDataVacation.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataVacation.leaveEndDate != null
+                      ? date2Thai(formDataVacation.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataVacation.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-2 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataVacation.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
+              </template>
+            </q-input>
+          </div>
+        </div>
+
+        <!-- <div class="col-12 col-md-4 col-sm-6">
           <q-radio
             v-model="formDataVacation.leaveRange"
             val="ALL"
@@ -271,7 +469,7 @@ onMounted(() => {
             checked-icon="task_alt"
             @update:model-value="resetDate"
           />
-        </div>
+        </div> -->
         <q-input
           class="col-12 col-md-4 col-sm-6"
           ref="restDayOldTotalRef"
@@ -298,125 +496,6 @@ onMounted(() => {
           label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
         />
 
-        <datepicker
-          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataVacation.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @update:model-value="formDataVacation.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveStartDateRef"
-              for="leaveStartDateRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataVacation.leaveStartDate != null
-                  ? date2Thai(formDataVacation.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <datepicker
-          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataVacation.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          @update:model-value="fetchCheck()"
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="isReadOnly"
-          :min-date="formDataVacation.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveEndDateRef"
-              for="leaveEndDateRef"
-              hide-bottom-space
-              bg-color="white"
-              class="full-width datepicker"
-              :readonly="isReadOnly"
-              :model-value="
-                formDataVacation.leaveEndDate != null
-                  ? date2Thai(formDataVacation.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-input
-          :bottom-slots="!isLeave ? true : false"
-          :color="!isLeave ? 'red' : 'black'"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
-          :border-color="!isLeave ? 'red' : 'gray'"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataVacation.leaveTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-        >
-          <template v-slot:hint>
-            <span style="color: red">
-              {{ !isLeave ? reasonLeave : "" }}
-            </span>
-          </template>
-        </q-input>
         <div class="full-width">
           <div class="q-col-gutter-sm row">
             <q-input
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 0111e95..0414330 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -13,10 +13,18 @@ import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbs
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  calculateDurationYmd,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
-
+const leaveText = ref<string>("");
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
@@ -70,6 +78,8 @@ const formDataOrdination = reactive<any>({
   ordainDayStatus: true,
   leaveDocument: [],
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -122,15 +132,15 @@ function onValidate() {
     formData.append("type", formDataOrdination.type);
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataOrdination.leaveStartDate)??''
+      convertDateToAPI(formDataOrdination.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataOrdination.leaveEndDate)??''
+      convertDateToAPI(formDataOrdination.leaveEndDate) ?? ""
     );
     formData.append(
       "ordainDayOrdination",
-      convertDateToAPI(formDataOrdination.ordainDayOrdination)??''
+      convertDateToAPI(formDataOrdination.ordainDayOrdination) ?? ""
     );
     formData.append(
       "ordainDayLocationName",
@@ -138,7 +148,7 @@ function onValidate() {
     );
     formData.append(
       "ordainDayLocationNumber",
-      dataStore.telephoneNumber
+      formDataOrdination.ordainDayLocationNumber
     );
     formData.append(
       "ordainDayLocationAddress",
@@ -156,33 +166,59 @@ function onValidate() {
     formData.append("leaveWrote", formDataOrdination.leaveWrote);
     formData.append("leaveDetail", formDataOrdination.leaveDetail);
     formData.append("leaveTotal", formDataOrdination.leaveTotal);
+    formData.append("leaveRange", formDataOrdination.leaveRange);
+    formData.append("leaveRangeEnd", formDataOrdination.leaveRangeEnd);
     props.onSubmit(formData, isLeave.value);
   }
 }
 
 const isLeave = ref<boolean>(true);
 const reasonLeave = ref<string>("");
+
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataOrdination.leaveEndDate) ==
+    convertDateToAPI(formDataOrdination.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataOrdination.leaveStartDate) ?? null,
+      StartLeaveDate:
+        convertDateToAPI(formDataOrdination.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataOrdination.leaveEndDate) ?? null,
+      leaveRange: formDataOrdination.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataOrdination.leaveRange
+        : formDataOrdination.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataOrdination.leaveTotal = data.totalDate;
+      leaveText.value = calculateDurationYmd(
+        formDataOrdination.leaveStartDate,
+        formDataOrdination.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -206,7 +242,7 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<string>("");
 
-watch(props.data, () => {
+watch(props.data, async () => {
   if (props.data) {
     formDataOrdination.leaveWrote = props.data.leaveWrote;
     formDataOrdination.leaveStartDate = props.data.leaveStartDate;
@@ -214,7 +250,11 @@ watch(props.data, () => {
     formDataOrdination.leaveTotal = props.data.leaveTotal;
     formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
     formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
-
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     formDataOrdination.ordainDayLocationAddress =
       props.data.ordainDayLocationAddress;
     formDataOrdination.ordainDayBuddhistLentName =
@@ -224,13 +264,17 @@ watch(props.data, () => {
     formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
     formDataOrdination.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataOrdination.ordainDayLocationNumber =
+      props.data.ordainDayLocationNumber;
+    formDataOrdination.leaveRange = props.data.leaveRange;
+    formDataOrdination.leaveRangeEnd = props.data.leaveRangeEnd;
     statusCheck.value = props.data.status;
     formDataOrdination.leaveDocument = [];
   }
 });
 
 /** Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataOrdination.leaveWrote = props.data.leaveWrote;
     formDataOrdination.leaveStartDate = props.data.leaveStartDate;
@@ -247,8 +291,24 @@ onMounted(() => {
       props.data.ordainDayBuddhistLentAddress;
     formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
     formDataOrdination.leaveDetail = props.data.leaveDetail;
+
+    formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
+    formDataOrdination.ordainDayLocationNumber =
+      props.data.ordainDayLocationNumber;
+    formDataOrdination.leaveRange = props.data.leaveRange;
+    formDataOrdination.leaveRangeEnd = props.data.leaveRangeEnd;
+
+    formDataOrdination.ordainDayLocationNumber =
+      props.data.ordainDayLocationNumber;
+    formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
+
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     leaveId.value = props.data.id;
   }
 });
@@ -275,129 +335,176 @@ onMounted(() => {
           :readonly="!edit || statusCheck === 'NEW'"
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
-
-        <datepicker
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataOrdination.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @update:model-value="formDataOrdination.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              bg-color="white"
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataOrdination.leaveStartDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              dense
-              ref="leaveStartDateRef"
-              hide-bottom-space
-              class="full-width datepicker"
-              :model-value="
-                formDataOrdination.leaveStartDate != null
-                  ? date2Thai(formDataOrdination.leaveStartDate)
-                  : null
+              @update:model-value="
+                (formDataOrdination.leaveEndDate = null), fetchCheck()
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
+              <template #year="{ year }">
+                {{ year + 543 }}
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <datepicker
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataOrdination.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          @update:model-value="updateLeaveTotal, fetchCheck()"
-          :readonly="
-            !formDataOrdination.leaveStartDate || statusCheck === 'NEW'
-          "
-          :enableTimePicker="false"
-          :min-date="formDataOrdination.leaveStartDate"
-          week-start="0"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataOrdination.leaveStartDate != null
+                      ? date2Thai(formDataOrdination.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveEndDateRef"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              hide-bottom-space
-              class="full-width datepicker"
-              :model-value="
-                formDataOrdination.leaveEndDate != null
-                  ? date2Thai(formDataOrdination.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-              :readonly="
-                !formDataOrdination.leaveStartDate || statusCheck === 'NEW'
-              "
+              v-model="formDataOrdination.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
-                  class="cursor-pointer"
+                  name="mdi-clock-outline"
                   style="color: var(--q-primary)"
-                >
-                </q-icon>
+                />
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-input
-          :bottom-slots="!isLeave ? true : false"
-          :color="!isLeave ? 'red' : 'black'"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
-          :border-color="!isLeave ? 'red' : 'gray'"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataOrdination.leaveTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-        >
-          <template v-slot:hint>
-            <span style="color: red">
-              {{ !isLeave ? reasonLeave : "" }}
-            </span>
-          </template>
-        </q-input>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataOrdination.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :min-date="formDataOrdination.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataOrdination.leaveEndDate != null
+                      ? date2Thai(formDataOrdination.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataOrdination.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-4 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="leaveText"
+              label="จำนวนวันที่ลา"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
+              </template>
+            </q-input>
             <datepicker
               class="col-12 col-md-4 col-sm-6"
               menu-class-name="modalfix"
@@ -497,7 +604,7 @@ onMounted(() => {
           <q-radio
             v-model="formDataOrdination.ordainDayStatus"
             :disable="!edit || statusCheck === 'NEW'"
-            :val="'true'"
+            :val="true"
             label="เคยบวช"
             checked-icon="task_alt "
             hide-bottom-space
@@ -505,7 +612,7 @@ onMounted(() => {
           <q-radio
             v-model="formDataOrdination.ordainDayStatus"
             :disable="!edit || statusCheck === 'NEW'"
-            :val="'false'"
+            :val="false"
             label="ไม่เคยบวช"
             checked-icon="task_alt"
             hide-bottom-space
@@ -581,7 +688,7 @@ onMounted(() => {
           dense
           full-width
           outlined
-          v-model="dataStore.telephoneNumber"
+          v-model="formDataOrdination.ordainDayLocationNumber"
           bg-color="white"
           mask="(###)-###-####"
           lazy-rules
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index d25e3ed..7440191 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -13,10 +13,19 @@ import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, messageError, dateToISO,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  calculateDurationYmd,
+  messageError,
+  dateToISO,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<any>("");
+const leaveText = ref<string>("");
 
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveWroteRef = ref<object | null>(null);
@@ -56,6 +65,8 @@ const formDataHaji = reactive<any>({
   hajjDayStatus: true,
   leaveDocument: [],
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -99,16 +110,18 @@ function onValidate() {
     formData.append("type", formDataHaji.type);
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataHaji.leaveStartDate)??''
+      convertDateToAPI(formDataHaji.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataHaji.leaveEndDate)??''
+      convertDateToAPI(formDataHaji.leaveEndDate) ?? ""
     );
     formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
     formData.append("leaveWrote", formDataHaji.leaveWrote);
     formData.append("leaveDetail", formDataHaji.leaveDetail);
     formData.append("leaveTotal", formDataHaji.leaveTotal);
+    formData.append("leaveRange", formDataHaji.leaveRange);
+    formData.append("leaveRangeEnd", formDataHaji.leaveRangeEnd);
     props.onSubmit(formData, isLeave.value);
   }
 }
@@ -119,24 +132,46 @@ function onValidate() {
  */
 const isLeave = ref<boolean>(true);
 const reasonLeave = ref<string>("");
+
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataHaji.leaveEndDate) ==
+    convertDateToAPI(formDataHaji.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataHaji.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataHaji.leaveEndDate) ?? null,
+      leaveRange: formDataHaji.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataHaji.leaveRange
+        : formDataHaji.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataHaji.leaveTotal = data.totalDate;
-
+      leaveText.value = calculateDurationYmd(
+        formDataHaji.leaveStartDate,
+        formDataHaji.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -159,7 +194,7 @@ const dateEndInputStyle = computed(() => {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-watch(props.data, () => {
+watch(props.data, async () => {
   if (props.data) {
     formDataHaji.leaveWrote = props.data.leaveWrote;
     formDataHaji.leaveTotal = props.data.leaveTotal;
@@ -168,14 +203,21 @@ watch(props.data, () => {
     formDataHaji.totalLeave = props.data.totalLeave;
     formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
     formDataHaji.leaveDetail = props.data.leaveDetail;
+    formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
+    formDataHaji.leaveRange = props.data.leaveRange;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     formDataHaji.leaveDocument = [];
   }
 });
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataHaji.leaveWrote = props.data.leaveWrote;
     formDataHaji.leaveTotal = props.data.leaveTotal;
@@ -185,6 +227,14 @@ onMounted(() => {
     formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
     formDataHaji.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataHaji.leaveRange = props.data.leaveRange;
+    formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
+
     statusCheck.value = props.data.status;
     // formDataHaji.leaveDocument = props.data.leaveDocument;
     leaveId.value = props.data.id;
@@ -213,19 +263,22 @@ onMounted(() => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
             <datepicker
-              v-model="formDataHaji.leaveStartDate"
-              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               menu-class-name="modalfix"
-              autoApply
-              borderless
-              week-start="0"
-              :enableTimePicker="false"
+              v-model="formDataHaji.leaveStartDate"
               :locale="'th'"
+              autoApply
+              hide-bottom-space
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="formDataHaji.leaveEndDate = null"
+              @update:model-value="
+                (formDataHaji.leaveEndDate = null), fetchCheck()
+              "
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -235,20 +288,21 @@ onMounted(() => {
               </template>
               <template #trigger>
                 <q-input
-                  ref="leaveStartDateRef"
-                  bg-color="white"
-                  class="full-width datepicker"
                   outlined
                   dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
                   hide-bottom-space
-                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  bg-color="white"
                   :readonly="!edit || statusCheck === 'NEW'"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  class="full-width datepicker"
                   :model-value="
                     formDataHaji.leaveStartDate != null
                       ? date2Thai(formDataHaji.leaveStartDate)
                       : null
                   "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -261,18 +315,41 @@ onMounted(() => {
                 </q-input>
               </template>
             </datepicker>
-
+            <q-select
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataHaji.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
             <datepicker
-              v-model="formDataHaji.leaveEndDate"
-              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               menu-class-name="modalfix"
-              autoApply
-              borderless
-              week-start="0"
-              :enableTimePicker="false"
+              v-model="formDataHaji.leaveEndDate"
               :locale="'th'"
-              @update:model-value="updateLeaveTotal(), fetchCheck()"
-              :readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :min-date="formDataHaji.leaveStartDate"
             >
               <template #year="{ year }">
@@ -283,23 +360,20 @@ onMounted(() => {
               </template>
               <template #trigger>
                 <q-input
-                  ref="leaveEndDateRef"
-                  class="full-width datepicker"
-                  bg-color="white"
                   outlined
                   dense
-                  :readonly="
-                    !formDataHaji.leaveStartDate || statusCheck === 'NEW'
-                  "
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
                   hide-bottom-space
-                  :label="`${'ลาถึงวันที่'}`"
+                  bg-color="white"
+                  class="full-width datepicker"
                   :model-value="
                     formDataHaji.leaveEndDate != null
                       ? date2Thai(formDataHaji.leaveEndDate)
                       : null
                   "
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-                  @update:model-value="fetchCheck()"
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -312,19 +386,44 @@ onMounted(() => {
                 </q-input>
               </template>
             </datepicker>
+            <q-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataHaji.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
 
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
             <q-input
               :bottom-slots="!isLeave ? true : false"
               :color="!isLeave ? 'red' : 'black'"
               :bg-color="!isLeave ? 'red-2' : 'white'"
               :border-color="!isLeave ? 'red' : 'gray'"
               :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-2 col-sm-6"
+              class="col-12 col-md-3 col-sm-6"
               dense
               outlined
               ref="leaveTotalRef"
               for="leaveTotalRef"
-              v-model="formDataHaji.leaveTotal"
+              v-model="leaveText"
               label="จำนวนวันที่ลา"
               readonly
             >
@@ -334,9 +433,8 @@ onMounted(() => {
                 </span>
               </template>
             </q-input>
-
             <datepicker
-              class="col-12 col-md-4 col-sm-6"
+              class="col-12 col-md-3 col-sm-6"
               menu-class-name="modalfix"
               autoApply
               borderless
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index baac03b..be73451 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -13,10 +13,18 @@ import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsen
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  calculateDurationYmd,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
-
+const leaveText = ref<string>("");
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveStartDateRef = ref<object | null>(null);
 const leaveEndDateRef = ref<object | null>(null);
@@ -60,6 +68,8 @@ const formDataMilitary = reactive<any>({
   absentDayLocation: "",
   absentDayRegistorDate: null,
   absentDayGetIn: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   absentDayAt: "",
   leaveDetail: "",
 });
@@ -117,49 +127,74 @@ function onValidate() {
     formData.append("type", formDataMilitary.type);
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataMilitary.leaveStartDate)??''
+      convertDateToAPI(formDataMilitary.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataMilitary.leaveEndDate)??''
+      convertDateToAPI(formDataMilitary.leaveEndDate) ?? ""
     );
     formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
     formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
     formData.append(
       "absentDayRegistorDate",
-      convertDateToAPI(formDataMilitary.absentDayRegistorDate)??''
+      convertDateToAPI(formDataMilitary.absentDayRegistorDate) ?? ""
     );
     formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
     formData.append("absentDayAt", formDataMilitary.absentDayAt);
     formData.append("leaveWrote", formDataMilitary.leaveWrote);
     formData.append("leaveDetail", formDataMilitary.leaveDetail);
     formData.append("leaveTotal", formDataMilitary.leaveTotal);
+
+    formData.append("leaveRange", formDataMilitary.leaveRange);
+    formData.append("leaveRangeEnd", formDataMilitary.leaveRangeEnd);
     props.onSubmit(formData, isLeave.value);
   }
 }
 const reasonLeave = ref<string>("");
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataMilitary.leaveEndDate) ==
+    convertDateToAPI(formDataMilitary.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataMilitary.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataMilitary.leaveEndDate) ?? null,
+      leaveRange: formDataMilitary.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataMilitary.leaveRange
+        : formDataMilitary.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataMilitary.leaveTotal = data.totalDate;
+      leaveText.value = calculateDurationYmd(
+        formDataMilitary.leaveStartDate,
+        formDataMilitary.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -174,7 +209,7 @@ function updateLeaveTotal() {
   formDataMilitary.leaveTotal = newLeaveTotal;
 }
 
-watch(props.data, () => {
+watch(props.data, async () => {
   if (props.data) {
     formDataMilitary.leaveWrote = props.data.leaveWrote;
     formDataMilitary.leaveStartDate = props.data.leaveStartDate;
@@ -185,6 +220,13 @@ watch(props.data, () => {
     formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
     formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
     formDataMilitary.absentDayAt = props.data.absentDayAt;
+    formDataMilitary.leaveRange = props.data.leaveRange;
+    formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     formDataMilitary.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -193,7 +235,7 @@ watch(props.data, () => {
 });
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataMilitary.leaveWrote = props.data.leaveWrote;
     formDataMilitary.leaveStartDate = props.data.leaveStartDate;
@@ -205,6 +247,14 @@ onMounted(() => {
     formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
     formDataMilitary.absentDayAt = props.data.absentDayAt;
     formDataMilitary.leaveDetail = props.data.leaveDetail;
+
+    formDataMilitary.leaveRange = props.data.leaveRange;
+    formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
@@ -233,127 +283,176 @@ onMounted(() => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataMilitary.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @update:model-value="formDataMilitary.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              bg-color="white"
-              dense
-              ref="leaveStartDateRef"
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataMilitary.leaveStartDate"
+              :locale="'th'"
+              autoApply
               hide-bottom-space
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataMilitary.leaveStartDate != null
-                  ? date2Thai(formDataMilitary.leaveStartDate)
-                  : null
+              @update:model-value="
+                (formDataMilitary.leaveEndDate = null), fetchCheck()
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
+              <template #year="{ year }">
+                {{ year + 543 }}
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <datepicker
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataMilitary.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          @update:model-value="updateLeaveTotal, fetchCheck()"
-          :readonly="!formDataMilitary.leaveStartDate || statusCheck === 'NEW'"
-          :min-date="formDataMilitary.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataMilitary.leaveStartDate != null
+                      ? date2Thai(formDataMilitary.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveEndDateRef"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              hide-bottom-space
-              :readonly="
-                !formDataMilitary.leaveStartDate || statusCheck === 'NEW'
-              "
-              class="full-width datepicker"
-              :model-value="
-                formDataMilitary.leaveEndDate != null
-                  ? date2Thai(formDataMilitary.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+              v-model="formDataMilitary.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
-                  class="cursor-pointer"
+                  name="mdi-clock-outline"
                   style="color: var(--q-primary)"
-                >
-                </q-icon>
+                />
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <q-input
-          :bottom-slots="!isLeave ? true : false"
-          :color="!isLeave ? 'red' : 'black'"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
-          :border-color="!isLeave ? 'red' : 'gray'"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataMilitary.leaveTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-        >
-          <template v-slot:hint>
-            <span style="color: red">
-              {{ !isLeave ? reasonLeave : "" }}
-            </span>
-          </template>
-        </q-input>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataMilitary.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :min-date="formDataMilitary.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataMilitary.leaveEndDate != null
+                      ? date2Thai(formDataMilitary.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataMilitary.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-4 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="leaveText"
+              label="จำนวนวันที่ลา"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
+              </template>
+            </q-input>
             <q-input
               ref="absentDaySummonRef"
               class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 2fa2a10..33e9a05 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -19,9 +19,12 @@ const {
   dateToISO,
   messageError,
   arabicNumberToText,
-  convertDateToAPI
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
 } = mixin;
 
+const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 const leaveStartDateRef = ref<object | null>(null);
@@ -76,6 +79,8 @@ const formDataStudy = reactive<any>({
   leaveDocument: [], //
   leaveDetail: "",
   leaveTotal: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveTotalDay: "", //จำนวนวันลา
 });
 
@@ -133,11 +138,11 @@ function onValidate() {
     formData.append("type", formDataStudy.type); //
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataStudy.leaveStartDate)??''
+      convertDateToAPI(formDataStudy.leaveStartDate) ?? ""
     );
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataStudy.leaveEndDate)??''
+      convertDateToAPI(formDataStudy.leaveEndDate) ?? ""
     );
     formData.append("studyDaySubject", formDataStudy.studyDaySubject);
     formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
@@ -155,30 +160,56 @@ function onValidate() {
     formData.append("studyDayScholarship", formDataStudy.studyDayScholarship);
     formData.append("leaveAddress", dataStore.currentAddress); //
     formData.append("leaveNumber", dataStore.telephoneNumber); //
-    formData.append("leaveTotal", formDataStudy.leaveTotalDay); //
+    formData.append("leaveTotal", formDataStudy.leaveTotal); //
+
+    formData.append("leaveRange", formDataStudy.leaveRange);
+    formData.append("leaveRangeEnd", formDataStudy.leaveRangeEnd);
+
     props.onSubmit(formData, isLeave.value);
   }
 }
 
 const reasonLeave = ref<string>("");
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataStudy.leaveEndDate) ==
+    convertDateToAPI(formDataStudy.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataStudy.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataStudy.leaveEndDate) ?? null,
+      leaveRange: formDataStudy.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataStudy.leaveRange
+        : formDataStudy.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
-      formDataStudy.leaveTotalDay = data.totalDate;
+      formDataStudy.leaveTotal = data.totalDate;
+      leaveText.value = calculateDurationYmd(
+        formDataStudy.leaveStartDate,
+        formDataStudy.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -211,13 +242,15 @@ watch(props.data, async () => {
     formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
     formDataStudy.studyDaySubject = props.data.studyDaySubject;
     formDataStudy.leaveDetail = props.data.leaveDetail;
+    formDataStudy.leaveRange = props.data.leaveRange;
+    formDataStudy.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataStudy.leaveDocument = [];
     leaveDocumentList.value = props.data.leaveDocument;
     const leaveTotal = await calculateDurationYmd(
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataStudy.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
     statusCheck.value = props.data.status;
   }
 });
@@ -228,7 +261,6 @@ onMounted(async () => {
     formDataStudy.leaveWrote = props.data.leaveWrote;
     formDataStudy.leaveStartDate = props.data.leaveStartDate;
     formDataStudy.leaveEndDate = props.data.leaveEndDate;
-    formDataStudy.leaveTotal = props.data.leaveTotal;
     formDataStudy.leavebirthDate = props.data.leavebirthDate;
     formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate;
     formDataStudy.leaveSalary = props.data.leaveSalary;
@@ -240,12 +272,18 @@ onMounted(async () => {
     formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
     formDataStudy.studyDaySubject = props.data.studyDaySubject;
     formDataStudy.leaveDetail = props.data.leaveDetail;
+
+    formDataStudy.leaveRange = props.data.leaveRange;
+    formDataStudy.leaveRangeEnd = props.data.leaveRangeEnd;
+
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataStudy.leaveTotal = props.data.leaveTotal;
+
     const leaveTotal = await calculateDurationYmd(
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataStudy.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
   }
@@ -273,127 +311,176 @@ onMounted(async () => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
-          v-model="formDataStudy.leaveStartDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :enableTimePicker="false"
-          :locale="'th'"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @update:model-value="formDataStudy.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveStartDateRef"
-              class="full-width datepicker"
-              bg-color="white"
-              outlined
-              dense
-              lazy-rules
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataStudy.leaveStartDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              hide-bottom-space
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :model-value="
-                formDataStudy.leaveStartDate != null
-                  ? date2Thai(formDataStudy.leaveStartDate)
-                  : null
+              @update:model-value="
+                (formDataStudy.leaveEndDate = null), fetchCheck()
               "
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
+              <template #year="{ year }">
+                {{ year + 543 }}
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <datepicker
-          v-model="formDataStudy.leaveEndDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :locale="'th'"
-          @update:model-value="updateLeaveTotal(), fetchCheck()"
-          :readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
-          :enableTimePicker="false"
-          :min-date="formDataStudy.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveEndDateRef"
-              class="full-width datepicker"
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataStudy.leaveStartDate != null
+                      ? date2Thai(formDataStudy.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              lazy-rules
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              hide-bottom-space
-              :label="`${'ลาถึงวันที่'}`"
-              :readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-              :model-value="
-                formDataStudy.leaveEndDate != null
-                  ? date2Thai(formDataStudy.leaveEndDate)
-                  : null
-              "
+              v-model="formDataStudy.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
-                  class="cursor-pointer"
+                  name="mdi-clock-outline"
                   style="color: var(--q-primary)"
-                >
-                </q-icon>
+                />
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <q-input
-          :bottom-slots="!isLeave ? true : false"
-          :color="!isLeave ? 'red' : 'black'"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
-          :border-color="!isLeave ? 'red' : 'gray'"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataStudy.leaveTotal"
-          label="มีกำหนด"
-          readonly
-        >
-          <template v-slot:hint>
-            <span style="color: red">
-              {{ !isLeave ? reasonLeave : "" }}
-            </span>
-          </template>
-        </q-input>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataStudy.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :min-date="formDataStudy.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataStudy.leaveEndDate != null
+                      ? date2Thai(formDataStudy.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataStudy.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="leaveText"
+              label="มีกำหนด"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
+              </template>
+            </q-input>
             <datepicker
               class="col-12 col-md-3 col-sm-6"
               menu-class-name="modalfix"
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index ce97d07..26edb8d 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -19,9 +19,12 @@ const {
   calculateDurationYmd,
   dateToISO,
   messageError,
-  convertDateToAPI
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
 } = mixin;
 
+const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<any>("");
 
@@ -58,6 +61,8 @@ const formDataTrain = reactive<any>({
   studyDayScholarship: "",
   studyDayCountry: "",
   studyDayTrainingSubject: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   studyDayTrainingName: "",
   leaveDocument: [],
   leaveDetail: "",
@@ -123,11 +128,11 @@ function onValidate() {
     formData.append("type", formDataTrain.type); //
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataTrain.leaveStartDate)??''
+      convertDateToAPI(formDataTrain.leaveStartDate) ?? ""
     ); //
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataTrain.leaveEndDate)??''
+      convertDateToAPI(formDataTrain.leaveEndDate) ?? ""
     ); //
     formData.append("studyDayCountry", formDataTrain.studyDayCountry);
     formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
@@ -142,31 +147,55 @@ function onValidate() {
     formData.append("leaveNumber", dataStore.telephoneNumber); //
     formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
     formData.append("leaveSalary", formDataTrain.leaveSalary); //
-    formData.append("leaveTotal", formDataTrain.leaveTotalDay); //
+    formData.append("leaveTotal", formDataTrain.leaveTotal); //
+
+    formData.append("leaveRange", formDataTrain.leaveRange);
+    formData.append("leaveRangeEnd", formDataTrain.leaveRangeEnd);
     props.onSubmit(formData, isLeave.value);
   }
 }
 
 const reasonLeave = ref<string>("");
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataTrain.leaveEndDate) ==
+    convertDateToAPI(formDataTrain.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataTrain.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataTrain.leaveEndDate) ?? null,
+      leaveRange: formDataTrain.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataTrain.leaveRange
+        : formDataTrain.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataTrain.leaveTotalDay = data.totalDate;
-
+      leaveText.value = calculateDurationYmd(
+        formDataTrain.leaveStartDate,
+        formDataTrain.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -196,12 +225,14 @@ watch(props.data, async () => {
     formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
     formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
     formDataTrain.leaveDetail = props.data.leaveDetail;
+    formDataTrain.leaveRange = props.data.leaveRange;
+    formDataTrain.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataTrain.leaveDocument = [];
     const leaveTotal = await calculateDurationYmd(
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataTrain.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
   }
@@ -221,6 +252,10 @@ onMounted(async () => {
     formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
     formDataTrain.studyDayCountry = props.data.studyDayCountry;
     formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
+
+    formDataTrain.leaveRange = props.data.leaveRange;
+    formDataTrain.leaveRangeEnd = props.data.leaveRangeEnd;
+
     formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
     formDataTrain.leaveDetail = props.data.leaveDetail;
     // formDataTrain.leaveDocument = props.data.leaveDocument;
@@ -228,7 +263,7 @@ onMounted(async () => {
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataTrain.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
@@ -257,127 +292,176 @@ onMounted(async () => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
-          v-model="formDataTrain.leaveStartDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :enableTimePicker="false"
-          :locale="'th'"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @update:model-value="formDataTrain.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveStartDateRef"
-              class="full-width datepicker"
-              bg-color="white"
-              outlined
-              dense
-              lazy-rules
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataTrain.leaveStartDate"
+              :locale="'th'"
+              autoApply
               hide-bottom-space
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :model-value="
-                formDataTrain.leaveStartDate != null
-                  ? date2Thai(formDataTrain.leaveStartDate)
-                  : null
+              @update:model-value="
+                (formDataTrain.leaveEndDate = null), fetchCheck()
               "
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
+              <template #year="{ year }">
+                {{ year + 543 }}
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <datepicker
-          v-model="formDataTrain.leaveEndDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          @update:model-value="updateLeaveTotal(), fetchCheck()"
-          week-start="0"
-          :readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
-          :locale="'th'"
-          :enableTimePicker="false"
-          :min-date="formDataTrain.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveEndDateRef"
-              class="full-width datepicker"
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataTrain.leaveStartDate != null
+                      ? date2Thai(formDataTrain.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              lazy-rules
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              hide-bottom-space
-              :label="`${'ลาถึงวันที่'}`"
-              :readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-              :model-value="
-                formDataTrain.leaveEndDate != null
-                  ? date2Thai(formDataTrain.leaveEndDate)
-                  : null
-              "
+              v-model="formDataTrain.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
-                  class="cursor-pointer"
+                  name="mdi-clock-outline"
                   style="color: var(--q-primary)"
-                >
-                </q-icon>
+                />
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <q-input
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataTrain.leaveTotal"
-          label="มีกำหนด"
-          readonly
-          :bottom-slots="!isLeave ? true : false"
-          :color="!isLeave ? 'red' : 'black'"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
-          :border-color="!isLeave ? 'red' : 'gray'"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
-        >
-          <template v-slot:hint>
-            <span style="color: red">
-              {{ !isLeave ? reasonLeave : "" }}
-            </span>
-          </template>
-        </q-input>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataTrain.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :min-date="formDataTrain.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataTrain.leaveEndDate != null
+                      ? date2Thai(formDataTrain.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataTrain.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="leaveText"
+              label="มีกำหนด"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? reasonLeave : "" }}
+                </span>
+              </template>
+            </q-input>
             <datepicker
               v-model="formDataTrain.leavegovernmentDate"
               class="col-12 col-md-3 col-sm-6"
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 7920aa0..29ba1b6 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -15,7 +15,14 @@ import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternati
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, showLoader, hideLoader,convertDateToAPI } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDateToAPI,
+} = mixin;
 
 const edit = ref<boolean>(true);
 const isSave = ref<boolean>(false);
@@ -48,6 +55,8 @@ const formDataWorkInternational = reactive<any>({
   leaveStartDate: null,
   leaveEndDate: null,
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveDocument: [],
   leaveDraftDocument: null,
 });
@@ -109,15 +118,19 @@ async function onValidate() {
     formData.append("type", formDataWorkInternational.type); //
     formData.append(
       "leaveStartDate",
-      convertDateToAPI(formDataWorkInternational.leaveStartDate)??''
+      convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? ""
     ); //
     formData.append(
       "leaveEndDate",
-      convertDateToAPI(formDataWorkInternational.leaveEndDate)??''
+      convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? ""
     ); //
     formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
     formData.append("leaveDetail", formDataWorkInternational.leaveDetail);
     formData.append("leaveTotal", formDataWorkInternational.leaveTotal); //
+
+    formData.append("leaveRange", formDataWorkInternational.leaveRange);
+    formData.append("leaveRangeEnd", formDataWorkInternational.leaveRangeEnd);
+
     await props.onSubmit(formData, isLeave.value);
   }
 }
@@ -141,6 +154,17 @@ async function onClickDownloadFile(id: string, fileName: string) {
 
 const reasonLeave = ref<string>("");
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataWorkInternational.leaveEndDate) ==
+    convertDateToAPI(formDataWorkInternational.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
@@ -150,14 +174,19 @@ async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? null,
-      EndLeaveDate: convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? null,
+      StartLeaveDate:
+        convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? null,
+      EndLeaveDate:
+        convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? null,
+      leaveRange: formDataWorkInternational.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataWorkInternational.leaveRange
+        : formDataWorkInternational.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataWorkInternational.leaveTotal = data.totalDate;
-
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
@@ -186,6 +215,9 @@ watch(props, () => {
     formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataWorkInternational.leaveDetail = props.data.leaveDetail;
     leaveDraftDocument.value = props.data.leaveDraftDocument;
+    formDataWorkInternational.leaveRange = props.data.leaveRange;
+    formDataWorkInternational.leaveRangeEnd = props.data.leaveRangeEnd;
+    formDataWorkInternational.leaveTotal = props.data.leaveTotal;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     formDataWorkInternational.leaveDraftDocument = null;
@@ -209,6 +241,11 @@ watch(
 onMounted(() => {
   if (props.data) {
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
+
+    formDataWorkInternational.leaveRange = props.data.leaveRange;
+    formDataWorkInternational.leaveRangeEnd = props.data.leaveRangeEnd;
+    formDataWorkInternational.leaveTotal = props.data.leaveTotal;
+
     formDataWorkInternational.leaveStartDate = new Date(
       props.data.leaveStartDate
     );
@@ -244,114 +281,173 @@ onMounted(() => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
-          class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataWorkInternational.leaveStartDate"
-          :locale="'th'"
-          hide-bottom-space
-          autoApply
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @update:model-value="formDataWorkInternational.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataWorkInternational.leaveStartDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!edit || statusCheck === 'NEW'"
+              @update:model-value="
+                (formDataWorkInternational.leaveEndDate = null), fetchCheck()
+              "
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataWorkInternational.leaveStartDate != null
+                      ? date2Thai(formDataWorkInternational.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveStartDateRef"
-              for="leaveStartDateRef"
-              hide-bottom-space
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataWorkInternational.leaveStartDate != null
-                  ? date2Thai(formDataWorkInternational.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+              v-model="formDataWorkInternational.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
-                  class="cursor-pointer"
+                  name="mdi-clock-outline"
                   style="color: var(--q-primary)"
-                >
-                </q-icon>
+                />
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <datepicker
-          :class="!isLeave ? dateEndInputStyle : ''"
-          class="col-12 col-md-6 col-sm-6 cursor-pointer"
-          menu-class-name="modalfix"
-          v-model="formDataWorkInternational.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="
-            !formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
-          "
-          :min-date="formDataWorkInternational.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataWorkInternational.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :min-date="formDataWorkInternational.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataWorkInternational.leaveEndDate != null
+                      ? date2Thai(formDataWorkInternational.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveEndDateRef"
-              for="leaveEndDateRef"
-              :readonly="
-                !formDataWorkInternational.leaveStartDate ||
-                statusCheck === 'NEW'
-              "
-              class="full-width datepicker"
-              :model-value="
-                formDataWorkInternational.leaveEndDate != null
-                  ? date2Thai(formDataWorkInternational.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+              v-if="!checkDate"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataWorkInternational.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+            <q-input
               :bottom-slots="!isLeave ? true : false"
               :color="!isLeave ? 'red' : 'black'"
               :bg-color="!isLeave ? 'red-2' : 'white'"
               :border-color="!isLeave ? 'red' : 'gray'"
               :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataWorkInternational.leaveTotal"
+              label="เป็นเวลา"
+              readonly
             >
-              <template v-slot:prepend>
-                <q-icon name="event" class="cursor-pointer" color="primary">
-                </q-icon>
-              </template>
-
               <template v-slot:hint>
                 <span style="color: red">
                   {{ !isLeave ? reasonLeave : "" }}
                 </span>
               </template>
             </q-input>
-          </template>
-        </datepicker>
+          </div>
+        </div>
         <q-input
           hide-bottom-space
           type="textarea"
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 0138567..33fa73a 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -21,9 +21,24 @@ const {
   dateToISO,
   messageError,
   convertDateToAPI,
+  showLoader,
+  hideLoader,
 } = mixin;
+
+const leaveText = ref<string>("");
+const leaveHistoryText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataFollowSpouse.leaveEndDate) ==
+    convertDateToAPI(formDataFollowSpouse.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -54,6 +69,8 @@ const formDataFollowSpouse = reactive<any>({
   leaveTotal: "", //จำนวนวันลา
   leaveTotalDay: "", //จำนวนวันลา
   leaveSalaryText: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveSalary: 0, //เงินเดือนปัจจุบัน
   coupleDayName: "", //ชื่อคู่สมรส
   coupleDayPosition: "", //ตำแหน่งคู่สมรส
@@ -173,7 +190,10 @@ function onValidate() {
       formDataFollowSpouse.coupleDayPosition
     ); //
     formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
-    formData.append("leaveTotal", formDataFollowSpouse.leaveTotalDay); //
+    formData.append("leaveTotal", formDataFollowSpouse.leaveTotal); //
+
+    formData.append("leaveRange", formDataFollowSpouse.leaveRange);
+    formData.append("leaveRangeEnd", formDataFollowSpouse.leaveRangeEnd);
     props.onSubmit(formData, isLeave.value);
   }
 }
@@ -186,23 +206,34 @@ const reasonLeave = ref<string>("");
  */
 const isLeave = ref<boolean>(true);
 async function fetchCheck() {
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate:
         convertDateToAPI(formDataFollowSpouse.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataFollowSpouse.leaveEndDate) ?? null,
+      leaveRange: formDataFollowSpouse.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataFollowSpouse.leaveRange
+        : formDataFollowSpouse.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataFollowSpouse.leaveTotalDay = data.totalDate;
+      leaveText.value = calculateDurationYmd(
+        formDataFollowSpouse.leaveStartDate,
+        formDataFollowSpouse.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      hideLoader();
     })
     .catch((e: any) => {
       messageError($q, e);
+      hideLoader();
     });
 }
 
@@ -250,6 +281,8 @@ watch(props.data, async () => {
     formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
     formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
     formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
+    formDataFollowSpouse.leaveRange = props.data.leaveRange;
+    formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataFollowSpouse.coupleDayLevelCountry =
       props.data.coupleDayLevelCountry;
     formDataFollowSpouse.coupleDayCountryHistory =
@@ -266,7 +299,8 @@ watch(props.data, async () => {
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataFollowSpouse.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
+
     const coupleDayTotalHistory = await calculateDurationYmd(
       props.data.coupleDayStartDateHistory,
       props.data.coupleDayEndDateHistory
@@ -285,6 +319,9 @@ onMounted(async () => {
     formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
     formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
+    formDataFollowSpouse.leaveRange = props.data.leaveRange;
+    formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
+
     formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
     formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
     formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
@@ -306,7 +343,8 @@ onMounted(async () => {
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
-    formDataFollowSpouse.leaveTotal = leaveTotal;
+    leaveText.value = leaveTotal;
+
     const coupleDayTotalHistory = await calculateDurationYmd(
       props.data.coupleDayStartDateHistory,
       props.data.coupleDayEndDateHistory
@@ -339,131 +377,175 @@ onMounted(async () => {
           :readonly="!edit || statusCheck === 'NEW'"
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
-        <datepicker
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataFollowSpouse.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @update:model-value="formDataFollowSpouse.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveStartDateRef"
-              for="leaveStartDateRef"
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataFollowSpouse.leaveStartDate"
+              :locale="'th'"
+              autoApply
               hide-bottom-space
-              bg-color="white"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
               :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataFollowSpouse.leaveStartDate != null
-                  ? date2Thai(formDataFollowSpouse.leaveStartDate)
-                  : null
+              @update:model-value="
+                (formDataFollowSpouse.leaveEndDate = null), fetchCheck()
               "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
             >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
+              <template #year="{ year }">
+                {{ year + 543 }}
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <datepicker
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataFollowSpouse.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          hide-bottom-space
-          :enableTimePicker="false"
-          week-start="0"
-          @update:model-value="updateLeaveTotal(), fetchCheck()"
-          :readonly="
-            !formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
-          "
-          :min-date="formDataFollowSpouse.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataFollowSpouse.leaveStartDate != null
+                      ? date2Thai(formDataFollowSpouse.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              ref="leaveEndDateRef"
-              for="leaveEndDateRef"
-              hide-bottom-space
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
               bg-color="white"
-              :readonly="
-                !formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
-              "
-              class="full-width datepicker"
-              :model-value="
-                formDataFollowSpouse.leaveEndDate != null
-                  ? date2Thai(formDataFollowSpouse.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+              v-model="formDataFollowSpouse.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
-                  class="cursor-pointer"
+                  name="mdi-clock-outline"
                   style="color: var(--q-primary)"
-                >
-                </q-icon>
+                />
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-input
-          :bottom-slots="!isLeave ? true : false"
-          :color="!isLeave ? 'red' : 'black'"
-          :bg-color="!isLeave ? 'red-2' : 'white'"
-          :border-color="!isLeave ? 'red' : 'gray'"
-          :input-class="!isLeave ? dateEndInputStyle : ''"
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataFollowSpouse.leaveTotal"
-          label="เป็นเวลา"
-          readonly
-        >
-          <template v-slot:hint>
-            <span style="color: red">
-              {{ !isLeave ? reasonLeave : "" }}
-            </span>
-          </template>
-        </q-input>
-
-        <div class="col-12 col-md-6 col-sm-12">
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataFollowSpouse.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :min-date="formDataFollowSpouse.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataFollowSpouse.leaveEndDate != null
+                      ? date2Thai(formDataFollowSpouse.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              v-if="!checkDate"
+              outlined
+              dense
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataFollowSpouse.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12 col-md-4 col-sm-12">
+          <q-input
+            :bottom-slots="!isLeave ? true : false"
+            :color="!isLeave ? 'red' : 'black'"
+            :bg-color="!isLeave ? 'red-2' : 'white'"
+            :border-color="!isLeave ? 'red' : 'gray'"
+            :input-class="!isLeave ? dateEndInputStyle : ''"
+            dense
+            outlined
+            ref="leaveTotalRef"
+            for="leaveTotalRef"
+            v-model="leaveText"
+            label="เป็นเวลา"
+            readonly
+          >
+            <template v-slot:hint>
+              <span style="color: red">
+                {{ !isLeave ? reasonLeave : "" }}
+              </span>
+            </template>
+          </q-input>
+        </div>
+        <div class="col-12 col-md-4 col-sm-12">
           <q-input
             hide-bottom-space
             bg-color="white"
@@ -477,7 +559,7 @@ onMounted(async () => {
             readonly
           />
         </div>
-        <div class="col-12 col-md-6 col-sm-12">
+        <div class="col-12 col-md-4 col-sm-12">
           <q-input
             hide-bottom-space
             bg-color="white"
@@ -555,6 +637,7 @@ onMounted(async () => {
         <div class="text-weight-bold text-dark col-12">
           ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
         </div>
+
         <datepicker
           class="col-12 col-md-3 col-sm-12 inputgreen"
           menu-class-name="modalfix"
@@ -612,6 +695,7 @@ onMounted(async () => {
           borderless
           :enableTimePicker="false"
           :readonly="!edit || statusCheck === 'NEW'"
+          :min-date="formDataFollowSpouse.coupleDayStartDateHistory"
           week-start="0"
           @update:model-value="updateLeaveHistoryTotal()"
         >
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index d78a51a..a85b490 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -56,6 +56,8 @@ const formDataRehabilitation = reactive<any>({
   leaveEndDate: null,
   leaveDocument: [],
   leaveDetail: "",
+  leaveRange: "ALL",
+  leaveRangeEnd: "ALL",
   leaveDraftDocument: null,
 });
 
@@ -94,6 +96,9 @@ async function onValidate() {
   formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
   formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
   formData.append("leaveTotal", formDataRehabilitation.leaveTotal); //
+
+  formData.append("leaveRange", formDataRehabilitation.leaveRange);
+  formData.append("leaveRangeEnd", formDataRehabilitation.leaveRangeEnd);
   props.onSubmit(formData, isLeave.value);
 }
 
@@ -108,11 +113,22 @@ const fileUploadDoc = async (files: any) => {
 const reasonLeave = ref<string>("");
 const isLeave = ref<boolean>(true);
 
+const checkDate = computed(() => {
+  if (
+    convertDateToAPI(formDataRehabilitation.leaveEndDate) ==
+    convertDateToAPI(formDataRehabilitation.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-async function FetchCheck() {
+async function fetchCheck() {
   showLoader();
   await http
     .post(config.API.leaveCheck(), {
@@ -121,6 +137,10 @@ async function FetchCheck() {
         convertDateToAPI(formDataRehabilitation.leaveStartDate) ?? null,
       EndLeaveDate:
         convertDateToAPI(formDataRehabilitation.leaveEndDate) ?? null,
+      leaveRange: formDataRehabilitation.leaveRange,
+      leaveRangeEnd: checkDate.value
+        ? formDataRehabilitation.leaveRange
+        : formDataRehabilitation.leaveRangeEnd,
     })
     .then((res: any) => {
       const data = res.data.result;
@@ -173,6 +193,8 @@ watch(props.data, () => {
     formDataRehabilitation.leaveDetail = props.data.leaveDetail;
     leaveDraftDocument.value = props.data.leaveDraftDocument;
     leaveDocumentList.value = props.data.leaveDocument;
+    formDataRehabilitation.leaveRange = props.data.leaveRange;
+    formDataRehabilitation.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataRehabilitation.leaveDraftDocument = null;
     formDataRehabilitation.leaveDocument = [];
     statusCheck.value = props.data.status;
@@ -186,11 +208,15 @@ onMounted(() => {
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataRehabilitation.leaveDetail = props.data.leaveDetail;
+
+    formDataRehabilitation.leaveRange = props.data.leaveRange;
+    formDataRehabilitation.leaveRangeEnd = props.data.leaveRangeEnd;
+
     leaveDraftDocument.value = props.data.leaveDraftDocument;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
-    FetchCheck();
+    fetchCheck();
   }
 });
 </script>
@@ -217,130 +243,173 @@ onMounted(() => {
           :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
         />
 
-        <datepicker
-          v-model="formDataRehabilitation.leaveStartDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :enableTimePicker="false"
-          :locale="'th'"
-          :readonly="!edit || statusCheck === 'NEW'"
-          @update:model-value="formDataRehabilitation.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveStartDateRef"
-              class="full-width datepicker"
-              bg-color="white"
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataRehabilitation.leaveStartDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!edit || statusCheck === 'NEW'"
+              @update:model-value="
+                (formDataRehabilitation.leaveEndDate = null), fetchCheck()
+              "
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataRehabilitation.leaveStartDate != null
+                      ? date2Thai(formDataRehabilitation.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'วันที่เริ่มต้น'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
               outlined
               dense
-              lazy-rules
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :model-value="
-                formDataRehabilitation.leaveStartDate != null
-                  ? date2Thai(formDataRehabilitation.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataRehabilitation.leaveRange"
+              :options="dataStore.rangeOptions"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
             >
               <template v-slot:prepend>
                 <q-icon
-                  name="event"
-                  class="cursor-pointer"
+                  name="mdi-clock-outline"
                   style="color: var(--q-primary)"
-                >
-                </q-icon>
+                />
               </template>
-            </q-input>
-          </template>
-        </datepicker>
-
-        <datepicker
-          :class="!isLeave ? dateEndInputStyle : ''"
-          v-model="formDataRehabilitation.leaveEndDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :locale="'th'"
-          @update:model-value="FetchCheck()"
-          :readonly="
-            !formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
-          "
-          :enableTimePicker="false"
-          :min-date="formDataRehabilitation.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveEndDateRef"
-              class="full-width datepicker"
+            </q-select>
+          </div>
+        </div>
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataRehabilitation.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              hide-bottom-space
+              @update:model-value="fetchCheck()"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :min-date="formDataRehabilitation.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataRehabilitation.leaveEndDate != null
+                      ? date2Thai(formDataRehabilitation.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'วันที่สิ้นสุด'}`"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              v-if="!checkDate"
               outlined
               dense
-              lazy-rules
-              hide-bottom-space
-              :readonly="
-                !formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
-              "
-              :model-value="
-                formDataRehabilitation.leaveEndDate != null
-                  ? date2Thai(formDataRehabilitation.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              bg-color="white"
+              v-model="formDataRehabilitation.leaveRangeEnd"
+              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              @update:model-value="fetchCheck()"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="mdi-clock-outline"
+                  style="color: var(--q-primary)"
+                />
+              </template>
+            </q-select>
+            <q-input
               :bottom-slots="!isLeave ? true : false"
               :color="!isLeave ? 'red' : 'black'"
               :bg-color="!isLeave ? 'red-2' : 'white'"
               :border-color="!isLeave ? 'red' : 'gray'"
               :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-2 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataRehabilitation.leaveTotal"
+              label="เป็นเวลา"
+              readonly
             >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-
               <template v-slot:hint>
                 <span style="color: red">
                   {{ !isLeave ? reasonLeave : "" }}
                 </span>
               </template>
             </q-input>
-          </template>
-        </datepicker>
-
-        <q-input
-          class="col-12 col-md-4 col-sm-12"
-          dense
-          outlined
-          readonly
-          hide-bottom-space
-          bg-color="white"
-          ref="coupleDayTotalHistoryRef"
-          for="coupleDayTotalHistoryRef"
-          v-model="formDataRehabilitation.leaveTotal"
-          label="เป็นเวลา"
-        />
+          </div>
+        </div>
 
         <q-input
           v-model="formDataRehabilitation.leaveDetail"
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index c6ac5f1..ce4c666 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -202,7 +202,7 @@ onMounted(async () => {
           :props="props"
           @click="onClickView(props.row.id, props.row.status)"
         >
-          {{ convert(props.row) }}
+          {{ props.row.leaveTypeName ? `${props.row.leaveTypeName} ${props.row.leaveSubTypeName ? `(${props.row.leaveSubTypeName})`:''}`: '-' }}
         </q-td>
         <q-td
           key="dateLeave"
diff --git a/src/modules/05_leave/components/formDetail/01_SickForm.vue b/src/modules/05_leave/components/formDetail/01_SickForm.vue
index 7eec67b..d186c94 100644
--- a/src/modules/05_leave/components/formDetail/01_SickForm.vue
+++ b/src/modules/05_leave/components/formDetail/01_SickForm.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+const store = useLeaveStore();
+const { converstType } = store;
 /**
  * รับ prop จาก component
  */
@@ -26,22 +30,16 @@ 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 }}</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 }}</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>
       <div class="col-xs-12 col-md-6">
-        {{
-          props.data.leaveRange == "ALL"
-            ? props.data.leaveTotal + " วัน"
-            : props.data.leaveRange == "MORNING"
-            ? "ลาครึ่งวันเช้า (0.5)"
-            : "ลาครึ่งวันบ่าย (0.5)"
-        }}
+        {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
       </div>
     </div>
     <div class="row">
diff --git a/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
index cbc3e8e..80ec85d 100644
--- a/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -25,11 +29,11 @@ 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 }}</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 }}</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>
diff --git a/src/modules/05_leave/components/formDetail/05_VacationForm.vue b/src/modules/05_leave/components/formDetail/05_VacationForm.vue
index fb0b9be..1b928aa 100644
--- a/src/modules/05_leave/components/formDetail/05_VacationForm.vue
+++ b/src/modules/05_leave/components/formDetail/05_VacationForm.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+const store = useLeaveStore();
+const { converstType } = store;
 /**
  * รับ prop จาก component
  */
@@ -38,22 +42,16 @@ 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 }}</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 }}</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>
       <div class="col-xs-12 col-md-6">
-        {{
-          props.data.leaveRange == "ALL"
-            ? props.data.leaveTotal + " วัน"
-            : props.data.leaveRange == "MORNING"
-            ? "ลาครึ่งวันเช้า (0.5)"
-            : "ลาครึ่งวันบ่าย (0.5)"
-        }}
+        {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
       </div>
     </div>
     <div class="row">
diff --git a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
index 9e4e567..675f6b4 100644
--- a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -26,11 +30,11 @@ 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 }}</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 }}</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>
diff --git a/src/modules/05_leave/components/formDetail/07_HajjForm.vue b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
index 403c089..f20c5db 100644
--- a/src/modules/05_leave/components/formDetail/07_HajjForm.vue
+++ b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -26,11 +30,11 @@ 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 }}</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 }}</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>
diff --git a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
index c3a7d9d..1579024 100644
--- a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -26,11 +30,11 @@ 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 }}</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 }}</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>
diff --git a/src/modules/05_leave/components/formDetail/09_StudyForm.vue b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
index 2196ae8..3f2cdb4 100644
--- a/src/modules/05_leave/components/formDetail/09_StudyForm.vue
+++ b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -18,7 +22,7 @@ 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.leaveTypeName }}</div>
+      <div class="col-xs-12 col-md-6">ลาไปศึกษาต่อ</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
@@ -26,11 +30,11 @@ 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 }}</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 }}</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>
diff --git a/src/modules/05_leave/components/formDetail/10_TrainForm.vue b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
index 32cae53..5096c27 100644
--- a/src/modules/05_leave/components/formDetail/10_TrainForm.vue
+++ b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -17,7 +21,7 @@ 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.leaveTypeName }}</div>
+      <div class="col-xs-12 col-md-6">ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
@@ -25,11 +29,11 @@ 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 }}</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 }}</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>
diff --git a/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
index 027c386..8e38fae 100644
--- a/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -25,11 +29,11 @@ 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 }}</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 }}</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>
diff --git a/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue b/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
index d1ff5cb..3c6189d 100644
--- a/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -25,11 +29,11 @@ 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 }}</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 }}</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>
diff --git a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
index 676d062..668b7d6 100644
--- a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from '@/modules/05_leave/store'
+
+const store = useLeaveStore()
+const { converstType } = store
 /**
  * รับ prop จาก component
  */
@@ -25,11 +29,11 @@ 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 }}</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 }}</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>
diff --git a/src/modules/05_leave/components/formDetail/formCancel.vue b/src/modules/05_leave/components/formDetail/formCancel.vue
index dceb8f0..40411b9 100644
--- a/src/modules/05_leave/components/formDetail/formCancel.vue
+++ b/src/modules/05_leave/components/formDetail/formCancel.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+const store = useLeaveStore();
+const { converstType } = store;
 /**
  * รับ prop จาก component
  */
@@ -20,7 +24,13 @@ const props = defineProps({
     <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.leaveTypeName ? props.data.leaveTypeName : "-" }}
+        {{
+          props.data.leaveSubTypeName
+            ? props.data.leaveSubTypeName
+            : props.data.leaveTypeName
+            ? props.data.leaveTypeName
+            : "-"
+        }}
       </div>
     </div>
     <div class="row">
@@ -38,13 +48,31 @@ const props = defineProps({
     <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.leaveStartDate ? props.data.leaveStartDate : "-" }}
+        {{ 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.leaveEndDate ? props.data.leaveEndDate : "-" }}
+        {{ 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">
diff --git a/src/modules/05_leave/interface/index/main.ts b/src/modules/05_leave/interface/index/main.ts
index 18d57ec..7b710b4 100644
--- a/src/modules/05_leave/interface/index/main.ts
+++ b/src/modules/05_leave/interface/index/main.ts
@@ -122,7 +122,9 @@ interface FormData {
   coupleDaySumTotalHistory: string;
   approveStep: string;
   dear: string;
+  leaveRangeEnd: string;
   leaveLast: string;
+  leaveSubTypeName: string;
   leaveRange: string;
 }
 
diff --git a/src/modules/05_leave/interface/response/leave.ts b/src/modules/05_leave/interface/response/leave.ts
index 181d282..5df0e38 100644
--- a/src/modules/05_leave/interface/response/leave.ts
+++ b/src/modules/05_leave/interface/response/leave.ts
@@ -7,6 +7,9 @@ interface ListLeave {
   fullName: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
   dateSendLeave: Date | null; //วันที่ยื่นใบลา
   status: string; //สถานะการของลา
+  leaveSubTypeName: string;
+  leaveRange: string;
+  leaveRangeEnd: string;
   isDelete: boolean; //ขอยกเลิกคำขอลา ถ้าเคยขอแล้วจะเป็น true ไม่เคยเป็น false
   hajjDayStatus: boolean;
 }
@@ -18,6 +21,9 @@ interface ListLeaveTable {
   fullName: string;
   dateSendLeave: string | null;
   status: string;
+  leaveSubTypeName: string;
+  leaveRange: string;
+  leaveRangeEnd: string;
   isDelete: boolean;
   hajjDayStatus: boolean;
 }
@@ -82,6 +88,8 @@ interface FremDetail {
   approveStep: string;
   dear: string;
   leaveRange: string;
+  leaveRangeEnd: string;
+  leaveSubTypeName: string;
 }
 
 interface FromCancelDetail {
@@ -90,6 +98,7 @@ interface FromCancelDetail {
   fullname: String; //คำนำหน้า ชื่อ นามสกุล คนขอลา
   status: String; //สถานะการของลา
   leaveDocDelete: string; //เอกสารการยกเลิกการลา
+  leaveSubTypeName: string;
   leaveResonDelete: String; //เหตุผลการยกเลิกการลา
   leaveWrote: String; //เขียนที่
   leaveAddress: String; //สถานที่ติดต่อขณะลา
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 9588480..d9d37b7 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -15,6 +15,7 @@ import type {
   ListLeave,
   ListLeaveTable,
 } from "@/modules/05_leave/interface/response/leave";
+import type { DataOption } from "../14_IDP/interface/Main";
 
 const mixin = useCounterMixin();
 const { date2Thai, messageError, showLoader, hideLoader } = mixin;
@@ -41,9 +42,22 @@ export const useLeaveStore = defineStore("Leave", () => {
       fullName: e.fullName,
       dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave, false, true),
       dateLeave:
-        date2Thai(e.leaveStartDate) + " - " + date2Thai(e.leaveEndDate),
+        e.leaveStartDate && e.leaveEndDate
+          ? e.leaveStartDate === e.leaveEndDate
+            ? date2Thai(e.leaveEndDate)
+            : `${date2Thai(e.leaveStartDate)}${
+                e.leaveRange !== "ALL" ? ` (${converstType(e.leaveRange)})` : ""
+              } - ${date2Thai(e.leaveEndDate)}${
+                e.leaveRangeEnd !== "ALL"
+                  ? ` (${converstType(e.leaveRangeEnd)})`
+                  : ""
+              }`
+          : "-",
       status: e.status,
       hajjDayStatus: e.hajjDayStatus,
+      leaveRange: e.leaveRange,
+      leaveRangeEnd: e.leaveRangeEnd,
+      leaveSubTypeName: e.leaveSubTypeName,
       statusConvert: convertStatud(e.status),
       isDelete: e.isDelete,
     }));
@@ -143,17 +157,39 @@ export const useLeaveStore = defineStore("Leave", () => {
     }
   }
 
+  const rangeOptions = ref<DataOption[]>([
+    {
+      id: "ALL",
+      name: "เต็มวัน",
+    },
+    {
+      id: "MORNING",
+      name: "ครึ่งวันเช้า",
+    },
+    {
+      id: "AFTERNOON",
+      name: "ครึ่งวันบ่าย",
+    },
+  ]);
+
+  function converstType(val: string) {
+    switch (val) {
+      case "ALL":
+        return "";
+      case "MORNING":
+        return "ครึ่งวันเช้า";
+      case "AFTERNOON":
+        return "ครึ่งวันบ่าย";
+    }
+  }
   /** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
-  const optionsSpecific = ref<OptionData[]>([
-    { id: "s1", name: "ลาไปศึกษาต่อ", code: "s1" },
-    { id: "s2", name: "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน", code: "s2" },
+  const optionsSpecific = ref<string[]>([
+    "ลาไปศึกษาต่อ",
+    "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน",
   ]);
 
   /** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์*/
-  const optionsOrdination = ref<OptionData[]>([
-    { id: "b1", name: "ลาอุปสมบท", code: "b1" },
-    { id: "b2", name: "ลาประกอบพิธีฮัจญ์", code: "b2" },
-  ]);
+  const optionsOrdination = ref<string[]>(["ลาอุปสมบท", "ลาประกอบพิธีฮัจญ์"]);
 
   /** data table filter & column ของรายการลา */
   const visibleColumns = ref<string[]>([
@@ -233,24 +269,6 @@ export const useLeaveStore = defineStore("Leave", () => {
     return options.value.find((x) => x.code == val)?.name;
   }
 
-  /**
-   *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจญ์ ย่อย
-   * @param val ค่า string
-   * @returns ส่งค่าที่แปลงแล้ว
-   */
-  function convertSubtitleInfo(val: string) {
-    return optionsOrdination.value.find((x) => x.id == val)?.name;
-  }
-
-  /**
-   *ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
-   * @param val ค่า string
-   * @returns ส่งค่าที่แปลงแล้ว
-   */
-  function convertSubtitleInfo2(val: string) {
-    return optionsSpecific.value.find((x) => x.id == val)?.name;
-  }
-
   /**
    *ฟังก์ชั่นหา id จาก api
    * @param val ค่า string
@@ -432,5 +450,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     statusOptionsMain,
     telephoneNumber,
     currentAddress,
+    rangeOptions,
+    converstType,
   };
 });
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 2f36dd5..6afe67f 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -29,7 +29,14 @@ const myform = ref<QForm | null>(null);
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
 const { fetchLeaveType } = dataStore;
-const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDateToAPI,
+} = mixin;
 
 const model = ref<string>("");
 const modelSpecific = ref<string>("");
@@ -53,8 +60,16 @@ function onSubmit(postData: FormData, isLeave: boolean = true) {
   if (isLeave) {
     dialogConfirm($q, async () => {
       showLoader();
+      if (model.value === "LV-006" || model.value === "LV-008") {
+        postData.append("leaveSubTypeName", modelSpecific.value);
+      }
+      if (postData.get("leaveEndDate") === postData.get("leaveStartDate")) {
+        postData.set("leaveRangeEnd", postData.get("leaveRange") as string);
+      }
+
       await http
         .post(config.API.leaveUser(), postData)
+
         .then((res) => {
           router.push(`/leave/edit/${res.data.result.id}`);
           success($q, "บันทึกสำเร็จ");
@@ -167,14 +182,11 @@ onMounted(async () => {
                           ? dataStore.optionsOrdination
                           : dataStore.optionsSpecific
                       "
-                      option-value="code"
+                      option-value="id"
                       option-label="name"
                       emit-value
                       map-options
                       prefix="ประเภทการลา :"
-                      @update:model-value="
-                        dataStore.typeConvert(model, modelSpecific)
-                      "
                     />
                   </div>
                 </div>
@@ -208,11 +220,13 @@ onMounted(async () => {
               />
               <VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
               <OrdinationForm
-                v-if="model === 'LV-006' && modelSpecific == 'b1'"
+                v-if="model === 'LV-006' && modelSpecific == 'ลาอุปสมบท'"
                 :on-submit="onSubmit"
               />
               <HajjForm
-                v-if="model === 'LV-006' && modelSpecific == 'b2'"
+                v-if="
+                  model === 'LV-006' && modelSpecific == 'ลาประกอบพิธีฮัจญ์'
+                "
                 :on-submit="onSubmit"
               />
               <MilitaryForm
@@ -221,15 +235,14 @@ onMounted(async () => {
                 :on-submit="onSubmit"
               />
               <StudyForm
-                v-if="model === 'LV-008' && modelSpecific === 's1'"
+                v-if="model === 'LV-008' && modelSpecific === 'ลาไปศึกษาต่อ'"
                 style="width: 100%"
                 :on-submit="onSubmit"
               />
               <TrainForm
                 v-if="
                   model === 'LV-008' &&
-                  modelSpecific != 's1' &&
-                  modelSpecific != ''
+                  modelSpecific == 'ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน'
                 "
                 :on-submit="onSubmit"
               />
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 40107ac..d37807b 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -99,9 +99,11 @@ const formData = reactive<FormData>({
   coupleDayEndDateHistory: null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
   coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
   approveStep: "",
+  leaveRangeEnd: "",
   dear: "",
   leaveLast: "",
   leaveRange: "",
+  leaveSubTypeName: "",
 });
 
 const model = computed(() => {
@@ -109,23 +111,7 @@ const model = computed(() => {
     dataStore.options.find((x) => x.id == formData.leaveTypeId)?.code ?? ""
   );
 });
-const modelSpecific = computed(() => {
-  const code = dataStore.options.find(
-    (x) => x.id == formData.leaveTypeId
-  )?.code;
-
-  if (code == "LV-006" && formData.ordainDayLocationName != "") {
-    return "b1";
-  } else if (code == "LV-006" && formData.ordainDayLocationName == "") {
-    return "b2";
-  } else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
-    return "s1";
-  } else if (code == "LV-008" && formData.studyDayTrainingSubject != "") {
-    return "s2";
-  } else {
-    return "";
-  }
-});
+const modelSpecific = ref<string>("");
 
 /**
  * function เรียกข้อมูลการลา
@@ -208,6 +194,11 @@ async function fetchDataDetail(id: string) {
       formData.dear = data.dear ?? "-";
       formData.leaveLast = data.leaveLast ?? "-";
       formData.leaveRange = data.leaveRange;
+      formData.leaveRangeEnd =
+        data.leaveRangeEnd == "AFTERNOON" ? "ALL" : data.leaveRangeEnd;
+      formData.ordainDayLocationNumber = data.ordainDayLocationNumber;
+      formData.ordainDayStatus = data.ordainDayStatus;
+      modelSpecific.value = data.leaveSubTypeName;
 
       dataStore.telephoneNumber =
         data.leaveNumber && data.leaveNumber !== "-" ? data.leaveNumber : null;
@@ -228,10 +219,16 @@ async function fetchDataDetail(id: string) {
  * @param formData  ข้อมูลใน formdata
  * @param isLeave  ตัวแปรเช็คว่าใช้หน้า edit หรือไม่
  */
-function onSubmit(formData: FormData, isLeave: boolean = true) {
+function onSubmit(formData: any, isLeave: boolean = true) {
   if (isLeave) {
     dialogConfirm($q, async () => {
       showLoader();
+      if (model.value === "LV-006" || model.value === "LV-008") {
+        formData.append("leaveSubTypeName", modelSpecific.value);
+      }
+      if (formData.get("leaveEndDate") === formData.get("leaveStartDate")) {
+        formData.set("leaveRangeEnd", formData.get("leaveRange") as string);
+      }
       await http
         .put(config.API.leaveUserId(personalId.value), formData)
         .then(async () => {
@@ -386,14 +383,11 @@ onMounted(async () => {
                           ? dataStore.optionsOrdination
                           : dataStore.optionsSpecific
                       "
-                      option-value="code"
+                      option-value="id"
                       option-label="name"
                       emit-value
                       map-options
                       prefix="ประเภทการลา :"
-                      @update:model-value="
-                        dataStore.typeConvert(model, modelSpecific)
-                      "
                     />
                   </div>
                 </div>
@@ -447,14 +441,16 @@ onMounted(async () => {
                 :click-delete="clickDelete"
               />
               <OrdinationForm
-                v-if="model === 'LV-006' && modelSpecific === 'b1'"
+                v-if="model === 'LV-006' && modelSpecific === 'ลาอุปสมบท'"
                 :data="formData"
                 :on-submit="onSubmit"
                 :on-confirm="onConfirm"
                 :click-delete="clickDelete"
               />
               <HajjForm
-                v-if="model === 'LV-006' && modelSpecific === 'b2'"
+                v-if="
+                  model === 'LV-006' && modelSpecific === 'ลาประกอบพิธีฮัจญ์'
+                "
                 :data="formData"
                 :on-submit="onSubmit"
                 :on-confirm="onConfirm"
@@ -469,7 +465,7 @@ onMounted(async () => {
                 :click-delete="clickDelete"
               />
               <StudyForm
-                v-if="model === 'LV-008' && modelSpecific === 's1'"
+                v-if="model === 'LV-008' && modelSpecific === 'ลาไปศึกษาต่อ'"
                 style="width: 100%"
                 :data="formData"
                 :on-submit="onSubmit"
@@ -479,8 +475,7 @@ onMounted(async () => {
               <TrainForm
                 v-if="
                   model === 'LV-008' &&
-                  modelSpecific != 's1' &&
-                  modelSpecific != ''
+                  modelSpecific == 'ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน'
                 "
                 :data="formData"
                 :on-submit="onSubmit"

From 457f1ef8160b42dcb2ae14d1b276085ab42767fe Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 25 Apr 2025 16:55:23 +0700
Subject: [PATCH 072/195] no message

---
 src/modules/05_leave/components/DialogDetail.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index d3cbabb..163ff1b 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -510,7 +510,7 @@ watch(
             />
 
             <!-- ข้าราชการแสดงเฉพาะที่ยื่นใบลาไปแล้วเท่านั้น ลูกจ้างไม่มี workflow -->
-            <Workflow
+            <!-- <Workflow
               v-if="leaveStatus != 'DRAFT'"
               :id="props.leaveId"
               :sys-name="
@@ -518,7 +518,7 @@ watch(
                   ? 'SYS_LEAVE_LIST'
                   : 'SYS_LEAVE_LIST_EMP'
               "
-            />
+            /> -->
           </div>
 
           <div

From 84738fbfd823b4be01e322cb7f5ca7966a3368f7 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 28 Apr 2025 17:50:02 +0700
Subject: [PATCH 073/195] updated all form leave

---
 .../components/FormLeave/01_SickForm.vue      | 540 ++++++-----
 .../components/FormLeave/03_Birth.vue         | 527 ++++++-----
 .../FormLeave/04_HelpWifeBirthForm.vue        | 605 ++++++------
 .../components/FormLeave/05_VacationForm.vue  | 541 +++++------
 .../FormLeave/06_OrdinationForm.vue           | 870 +++++++++---------
 .../components/FormLeave/07_HajjForm.vue      | 102 +-
 .../components/FormLeave/08_MilitaryForm.vue  | 441 ++++-----
 .../components/FormLeave/09_StudyForm.vue     | 798 ++++++++--------
 .../components/FormLeave/10_TrainForm.vue     | 715 +++++++-------
 .../FormLeave/11_WorkInternationalForm.vue    | 408 ++++----
 .../FormLeave/12_FollowSpouseForm.vue         | 380 ++++----
 .../FormLeave/13_RehabilitationForm.vue       | 398 ++++----
 .../05_leave/components/FormLeave/Form.vue    |   3 +-
 .../05_leave/interface/request/AddAbsence.ts  |   2 +-
 src/modules/05_leave/store.ts                 |   5 +
 src/modules/05_leave/views/AddPage.vue        |   4 +-
 src/modules/05_leave/views/EditPage.vue       |   4 +-
 17 files changed, 3248 insertions(+), 3095 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 6cf443d..21eecf0 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -196,33 +196,6 @@ async function fetchCheck() {
     });
 }
 
-/**
- * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
- */
-const isReadOnly = computed(() => {
-  const conditionleaveRange =
-    formDataSick.leaveRange === "MORNING" ||
-    formDataSick.leaveRange === "AFTERNOON";
-  if (conditionleaveRange) {
-    formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
-    formDataSick.leaveTotal = 0.5;
-  } else {
-    formDataSick.leaveTotal = null;
-  }
-  return conditionleaveRange;
-});
-
-/**
- * แก้ไขClassเมื่อ status เป็น edit
- * @param val status edit true/false
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -273,274 +246,297 @@ onMounted(() => {
   </div>
   <q-form greedy @submit.prevent @validation-success="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="formDataSick.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+      <div class="row q-col-gutter-sm">
+        <div class="col-12 col-sm-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            for="leaveWroteRef"
+            dense
+            hide-bottom-space
+            bg-color="white"
+            outlined
+            v-model="formDataSick.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataSick.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataSick.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataSick.leaveStartDate != null
-                      ? date2Thai(formDataSick.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataSick.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataSick.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataSick.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataSick.leaveStartDate != null
+                        ? date2Thai(formDataSick.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataSick.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataSick.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataSick.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataSick.leaveEndDate != null
-                      ? date2Thai(formDataSick.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataSick.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataSick.leaveTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <q-input
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveLastRef"
-              for="leaveLastRef"
-              v-model="dataStore.leaveLast"
-              label="ลาครั้งสุดท้ายเมื่อวันที่"
-              readonly
-              hide-bottom-space
-              bg-color="white"
-            />
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataSick.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataSick.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataSick.leaveEndDate != null
+                        ? date2Thai(formDataSick.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataSick.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="formDataSick.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                dense
+                outlined
+                ref="leaveLastRef"
+                for="leaveLastRef"
+                v-model="dataStore.leaveLast"
+                label="ลาครั้งสุดท้ายเมื่อวันที่"
+                readonly
+                hide-bottom-space
+                bg-color="white"
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              dense
-              outlined
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="dataStore.telephoneNumber"
-              mask="(###)-###-####"
-              hide-bottom-space
-              bg-color="white"
-              lazy-rules
-              unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                ref="leaveNumberRef"
+                for="leaveNumberRef"
+                v-model="dataStore.telephoneNumber"
+                mask="(###)-###-####"
+                hide-bottom-space
+                bg-color="white"
+                lazy-rules
+                unmasked-value
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
-            />
+              />
+            </div>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-              dense
-              outlined
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                ref="leaveAddressRef"
+                for="leaveAddressRef"
+                v-model="dataStore.currentAddress"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
               ]"
-              hide-bottom-space
-              bg-color="white"
-            />
+                hide-bottom-space
+                bg-color="white"
+              />
+            </div>
           </div>
         </div>
-        <q-input
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataSick.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-          bg-color="white"
-        />
+
+        <div class="col-12 inputgreen">
+          <q-input
+            type="textarea"
+            dense
+            outlined
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataSick.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
-            <q-file
-              ref="leaveDocumentRef"
-              for="leaveDocumentRef"
-              v-model="formDataSick.leaveDocument"
-              dense
-              label="เอกสารประกอบ"
-              outlined
-              use-chips
-              lazy-rules
-              multiple
-              hide-bottom-space
-              bg-color="white"
-              class="col-12 q-pl-sm col-12"
-              :rules="typeForm == 'LV-001' && formDataSick.leaveTotal >= 30 ?[
+            <div class="col-12 q-pl-sm col-12">
+              <q-file
+                ref="leaveDocumentRef"
+                for="leaveDocumentRef"
+                v-model="formDataSick.leaveDocument"
+                dense
+                label="เอกสารประกอบ"
+                outlined
+                use-chips
+                lazy-rules
+                multiple
+                hide-bottom-space
+                bg-color="white"
+                :rules="typeForm == 'LV-001' && formDataSick.leaveTotal >= 30 ?[
                 (val:string) => !!val && val.length >= 30 || `${'กรุณาแนบเอกสารประกอบ หรือ ใบรับรองแพทย์ กรณีลาป่วยตั้งเเต่ 30 วันขึ้นไป'}`,
               ]:[]"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12" v-if="data">
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index f9c41c4..d851308 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -13,7 +13,14 @@ import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, convertDateToAPI,showLoader,hideLoader } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  convertDateToAPI,
+  showLoader,
+  hideLoader,
+} = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -143,17 +150,19 @@ const checkDate = computed(() => {
  * @param formData
  */
 async function fetchCheck() {
-  showLoader()
+  showLoader();
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
       StartLeaveDate: convertDateToAPI(formDataBirth.leaveStartDate) ?? null,
       EndLeaveDate: convertDateToAPI(formDataBirth.leaveEndDate) ?? null,
       leaveRange: formDataBirth.leaveRange,
-      leaveRangeEnd: checkDate.value ? formDataBirth.leaveRange : formDataBirth.leaveRangeEnd
+      leaveRangeEnd: checkDate.value
+        ? formDataBirth.leaveRange
+        : formDataBirth.leaveRangeEnd,
     })
     .then((res: any) => {
-      hideLoader()
+      hideLoader();
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataBirth.leaveTotal = data.totalDate;
@@ -162,7 +171,7 @@ async function fetchCheck() {
         : "จำนวนวันลาเกินที่กำหนด";
     })
     .catch((e: any) => {
-      hideLoader()
+      hideLoader();
       messageError($q, e);
     });
 }
@@ -214,271 +223,293 @@ onMounted(() => {
   </div>
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          outlined
-          v-model="formDataBirth.leaveWrote"
-          label="เขียนที่"
-          hide-bottom-space
-          bg-color="white"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+      <div class="col-12 row q-col-gutter-sm">
+        <div class="col-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            for="leaveWroteRef"
+            dense
+            outlined
+            v-model="formDataBirth.leaveWrote"
+            label="เขียนที่"
+            hide-bottom-space
+            bg-color="white"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataBirth.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataBirth.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataBirth.leaveStartDate != null
-                      ? date2Thai(formDataBirth.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataBirth.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataBirth.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataBirth.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataBirth.leaveStartDate != null
+                        ? date2Thai(formDataBirth.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataBirth.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataBirth.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataBirth.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataBirth.leaveEndDate != null
-                      ? date2Thai(formDataBirth.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-            v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataBirth.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataBirth.leaveTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <q-input
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveLastRef"
-              for="leaveLastRef"
-              v-model="dataStore.leaveLast"
-              label="ลาครั้งสุดท้ายเมื่อวันที่"
-              readonly
-              hide-bottom-space
-              bg-color="white"
-            />
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataBirth.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataBirth.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataBirth.leaveEndDate != null
+                        ? date2Thai(formDataBirth.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataBirth.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="formDataBirth.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                dense
+                outlined
+                ref="leaveLastRef"
+                for="leaveLastRef"
+                v-model="dataStore.leaveLast"
+                label="ลาครั้งสุดท้ายเมื่อวันที่"
+                readonly
+                hide-bottom-space
+                bg-color="white"
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="dataStore.telephoneNumber"
-              mask="(###)-###-####"
-              unmasked-value
-              lazy-rules
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveNumberRef"
+                for="leaveNumberRef"
+                v-model="dataStore.telephoneNumber"
+                mask="(###)-###-####"
+                unmasked-value
+                lazy-rules
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
-            />
+              />
+            </div>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveAddressRef"
+                for="leaveAddressRef"
+                v-model="dataStore.currentAddress"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
               ]"
-            />
+              />
+            </div>
           </div>
         </div>
-        <q-input
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          bg-color="white"
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataBirth.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+
+        <div class="col-12 inputgreen">
+          <q-input
+            type="textarea"
+            dense
+            outlined
+            bg-color="white"
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataBirth.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
-            <q-file
-              for="leaveDocumentRef"
-              hide-bottom-space
-              v-model="formDataBirth.leaveDocument"
-              @added="fileUploadDoc"
-              dense
-              bg-color="white"
-              label="เอกสารประกอบ"
-              outlined
-              multiple
-              use-chips
-              class="q-pl-sm col-12"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
+            <div class="q-pl-sm col-12">
+              <q-file
+                for="leaveDocumentRef"
+                hide-bottom-space
+                v-model="formDataBirth.leaveDocument"
+                @added="fileUploadDoc"
+                dense
+                bg-color="white"
+                label="เอกสารประกอบ"
+                outlined
+                multiple
+                use-chips
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12 row" v-if="data">
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index ee44839..590f2ea 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -182,10 +182,6 @@ async function fetchCheck() {
       isLeave.value = data.isLeave;
       formDataHelpWife.leaveTotal =
         data.totalDate - data.sumDateWork - data.sumDateHoliday;
-      leaveText.value = calculateDurationYmd(
-        formDataHelpWife.leaveStartDate,
-        formDataHelpWife.leaveEndDate
-      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
@@ -210,11 +206,6 @@ watch(props.data, async () => {
     formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataHelpWife.leaveRange = props.data.leaveRange;
     formDataHelpWife.leaveDetail = props.data.leaveDetail;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
     formDataHelpWife.leaveDocument = [];
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -234,12 +225,6 @@ onMounted(async () => {
     leaveDocumentList.value = props.data.leaveDocument;
     formDataHelpWife.leaveRange = props.data.leaveRange;
     formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
-
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
   }
@@ -254,188 +239,204 @@ onMounted(async () => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          outlined
-          hide-bottom-space
-          bg-color="white"
-          v-model="formDataHelpWife.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
-        <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataHelpWife.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataHelpWife.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataHelpWife.leaveStartDate != null
-                      ? date2Thai(formDataHelpWife.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataHelpWife.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
-        </div>
-        <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataHelpWife.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataHelpWife.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataHelpWife.leaveEndDate != null
-                      ? date2Thai(formDataHelpWife.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataHelpWife.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
-        </div>
-        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+        <div class="col-12 inputgreen">
           <q-input
-            :bottom-slots="!isLeave ? true : false"
-            :color="!isLeave ? 'red' : 'black'"
-            :bg-color="!isLeave ? 'red-2' : 'white'"
-            :border-color="!isLeave ? 'red' : 'gray'"
-            :input-class="!isLeave ? dateEndInputStyle : ''"
+            ref="leaveWroteRef"
+            for="leaveWroteRef"
             dense
             outlined
-            ref="leaveTotalRef"
-            for="leaveTotalRef"
-            v-model="leaveText"
-            label="จำนวนวันที่ลา"
-            readonly
-          >
-            <template v-slot:hint>
-              <span style="color: red">
-                {{ !isLeave ? reasonLeave : "" }}
-              </span>
-            </template>
-          </q-input>
+            hide-bottom-space
+            bg-color="white"
+            v-model="formDataHelpWife.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
         </div>
-        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataHelpWife.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataHelpWife.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataHelpWife.leaveStartDate != null
+                        ? date2Thai(formDataHelpWife.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataHelpWife.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataHelpWife.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataHelpWife.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataHelpWife.leaveEndDate != null
+                        ? date2Thai(formDataHelpWife.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataHelpWife.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                class="col-12 col-md-3 col-sm-6"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="formDataHelpWife.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-md-8 col-sm-12 inputgreen">
           <q-input
             class="col-12 col-sm-12"
             ref="wifeDayNameRef"
@@ -451,122 +452,130 @@ onMounted(async () => {
           />
         </div>
 
-        <datepicker
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataHelpWife.wifeDayDateBorn"
-          :locale="'th'"
-          autoApply
-          borderless
-          hide-bottom-space
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit || statusCheck === 'NEW'"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="wifeDayDateBornRef"
-              for="wifeDayDateBornRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataHelpWife.wifeDayDateBorn != null
-                  ? date2Thai(formDataHelpWife.wifeDayDateBorn)
-                  : null
-              "
-              :label="`${'วันที่คลอด'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+        <div class="col-12 col-md-4 col-sm-12 inputgreen">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formDataHelpWife.wifeDayDateBorn"
+            :locale="'th'"
+            autoApply
+            borderless
+            hide-bottom-space
+            :enableTimePicker="false"
+            week-start="0"
+            :readonly="!edit || statusCheck === 'NEW'"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                ref="wifeDayDateBornRef"
+                for="wifeDayDateBornRef"
+                hide-bottom-space
+                bg-color="white"
+                :readonly="!edit || statusCheck === 'NEW'"
+                class="full-width datepicker"
+                :model-value="
+                  formDataHelpWife.wifeDayDateBorn != null
+                    ? date2Thai(formDataHelpWife.wifeDayDateBorn)
+                    : null
+                "
+                :label="`${'วันที่คลอด'}`"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="dataStore.telephoneNumber"
-              mask="(###)-###-####"
-              unmasked-value
-              hide-bottom-space
-              lazy-rules
-              bg-color="white"
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                ref="leaveNumberRef"
+                for="leaveNumberRef"
+                v-model="dataStore.telephoneNumber"
+                mask="(###)-###-####"
+                unmasked-value
+                hide-bottom-space
+                lazy-rules
+                bg-color="white"
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
-            />
+              />
+            </div>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveAddressRef"
+                for="leaveAddressRef"
+                v-model="dataStore.currentAddress"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
               ]"
-            />
+              />
+            </div>
           </div>
         </div>
-        <q-input
-          hide-bottom-space
-          bg-color="white"
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataHelpWife.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+
+        <div class="col-12 inputgreen">
+          <q-input
+            hide-bottom-space
+            bg-color="white"
+            type="textarea"
+            dense
+            outlined
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataHelpWife.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
-            <q-file
-              bg-color="white"
-              ref="leaveDocumentRef"
-              v-model="formDataHelpWife.leaveDocument"
-              @added="fileUploadDoc"
-              dense
-              label="เอกสารประกอบ"
-              outlined
-              use-chips
-              class="q-pl-sm col-12"
-              multiple
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
+            <div class="q-pl-sm col-12">
+              <q-file
+                bg-color="white"
+                ref="leaveDocumentRef"
+                v-model="formDataHelpWife.leaveDocument"
+                @added="fileUploadDoc"
+                dense
+                label="เอกสารประกอบ"
+                outlined
+                use-chips
+                multiple
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12" v-if="data">
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 47b0ebc..2c6730d 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -102,20 +101,6 @@ const fileUploadDoc = async (files: any) => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<string>("");
 
-/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
-const isReadOnly = computed(() => {
-  const conditionleaveRange =
-    formDataVacation.leaveRange === "MORNING" ||
-    formDataVacation.leaveRange === "AFTERNOON";
-  if (conditionleaveRange) {
-    formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
-    formDataVacation.leaveTotal = 0.5;
-  } else {
-    formDataVacation.leaveTotal = null;
-  }
-  return conditionleaveRange;
-});
-
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -267,184 +252,171 @@ onMounted(() => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="formDataVacation.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกเขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            for="leaveWroteRef"
+            dense
+            hide-bottom-space
+            bg-color="white"
+            outlined
+            v-model="formDataVacation.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกเขียนที่'}`]"
+          />
+        </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataVacation.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataVacation.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataVacation.leaveStartDate != null
-                      ? date2Thai(formDataVacation.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataVacation.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataVacation.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataVacation.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataVacation.leaveStartDate != null
+                        ? date2Thai(formDataVacation.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataVacation.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataVacation.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataVacation.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataVacation.leaveEndDate != null
-                      ? date2Thai(formDataVacation.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataVacation.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-2 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataVacation.leaveTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataVacation.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataVacation.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataVacation.leaveEndDate != null
+                        ? date2Thai(formDataVacation.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataVacation.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
 
@@ -470,102 +442,133 @@ onMounted(() => {
             @update:model-value="resetDate"
           />
         </div> -->
-        <q-input
-          class="col-12 col-md-4 col-sm-6"
-          ref="restDayOldTotalRef"
-          for="restDayOldTotalRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          readonly
-          outlined
-          v-model="dataStore.restDayTotalOld"
-          label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
-        />
+        <div class="col-12 col-md-3 col-sm-6">
+          <q-input
+            :bottom-slots="!isLeave ? true : false"
+            :color="!isLeave ? 'red' : 'black'"
+            :bg-color="!isLeave ? 'red-2' : 'white'"
+            :border-color="!isLeave ? 'red' : 'gray'"
+            :input-class="!isLeave ? dateEndInputStyle : ''"
+            dense
+            outlined
+            ref="leaveTotalRef"
+            for="leaveTotalRef"
+            v-model="formDataVacation.leaveTotal"
+            label="จำนวนวันที่ลา (วัน)"
+            readonly
+          >
+            <template v-slot:hint>
+              <span style="color: red">
+                {{ !isLeave ? reasonLeave : "" }}
+              </span>
+            </template>
+          </q-input>
+        </div>
 
-        <q-input
-          class="col-12 col-md-4 col-sm-6"
-          ref="restDayCurrentTotalRef"
-          for="restDayCurrentTotalRef"
-          dense
-          readonly
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="dataStore.restDayCurrentTotal"
-          label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
-        />
+        <div class="col-12 col-md-3 col-sm-6">
+          <q-input
+            ref="restDayOldTotalRef"
+            for="restDayOldTotalRef"
+            dense
+            hide-bottom-space
+            bg-color="white"
+            readonly
+            outlined
+            v-model="dataStore.restDayTotalOld"
+            label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
+          />
+        </div>
+
+        <div class="col-12 col-md-3 col-sm-6">
+          <q-input
+            ref="restDayCurrentTotalRef"
+            for="restDayCurrentTotalRef"
+            dense
+            readonly
+            hide-bottom-space
+            bg-color="white"
+            outlined
+            v-model="dataStore.restDayCurrentTotal"
+            label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+          />
+        </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="dataStore.telephoneNumber"
-              mask="(###)-###-####"
-              lazy-rules
-              unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-3 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveNumberRef"
+                for="leaveNumberRef"
+                v-model="dataStore.telephoneNumber"
+                mask="(###)-###-####"
+                lazy-rules
+                unmasked-value
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
               ]"
-            />
+              />
+            </div>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="dataStore.currentAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[
+            <div class="col-12 col-md-9 col-sm-12 inputgreen">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                bg-color="white"
+                ref="leaveAddressRef"
+                for="leaveAddressRef"
+                v-model="dataStore.currentAddress"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[
                 (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
               ]"
-            />
+              />
+            </div>
           </div>
         </div>
-        <q-input
-          type="textarea"
-          hide-bottom-space
-          bg-color="white"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataVacation.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+
+        <div class="col-12 inputgreen">
+          <q-input
+            type="textarea"
+            hide-bottom-space
+            bg-color="white"
+            dense
+            outlined
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataVacation.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
-            <q-file
-              ref="leaveDocumentRef"
-              bg-color="white"
-              v-model="formDataVacation.leaveDocument"
-              @added="fileUploadDoc"
-              dense
-              label="เอกสารประกอบ"
-              multiple
-              outlined
-              use-chips
-              class="q-pl-sm col-12"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
+            <div class="q-pl-sm col-12">
+              <q-file
+                ref="leaveDocumentRef"
+                bg-color="white"
+                v-model="formDataVacation.leaveDocument"
+                @added="fileUploadDoc"
+                dense
+                label="เอกสารประกอบ"
+                multiple
+                outlined
+                use-chips
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12" v-if="data">
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 0414330..d32430f 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -13,18 +13,10 @@ import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbs
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
+  mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
-const leaveText = ref<string>("");
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
@@ -50,7 +42,7 @@ const ordainDayLocationNumberRef = ref<object | null>(null);
 const leaveWroteRef = ref<object | null>(null);
 const leavebirthDateRef = ref<object | null>(null);
 const leavegovernmentDateRef = ref<object | null>(null);
-const totalLeaveRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
 const leaveEndDateRef = ref<object | null>(null);
 const ordainDayOrdinationRef = ref<object | null>(null);
 const leaveStartDateRef = ref<object | null>(null);
@@ -68,7 +60,7 @@ const formDataOrdination = reactive<any>({
   leavebirthDate: null,
   leaveStartDate: null,
   leaveEndDate: null,
-  totalLeave: 0,
+  leaveTotal: 0,
   ordainDayOrdination: null,
   ordainDayLocationName: "",
   ordainDayLocationNumber: null,
@@ -89,7 +81,7 @@ const formRef: OrdinationForm = {
   leavebirthDate: leavebirthDateRef,
   leaveStartDate: leaveStartDateRef,
   leaveEndDate: leaveEndDateRef,
-  totalLeave: totalLeaveRef,
+  leaveTotal: leaveTotalRef,
   ordainDayOrdination: ordainDayOrdinationRef,
   ordainDayLocationName: ordainDayLocationNameRef,
   ordainDayLocationNumber: ordainDayLocationNumberRef,
@@ -207,10 +199,6 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataOrdination.leaveTotal = data.totalDate;
-      leaveText.value = calculateDurationYmd(
-        formDataOrdination.leaveStartDate,
-        formDataOrdination.leaveEndDate
-      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
@@ -222,17 +210,6 @@ async function fetchCheck() {
     });
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataOrdination.leaveStartDate,
-    formDataOrdination.leaveEndDate
-  );
-  formDataOrdination.leaveTotal = newLeaveTotal;
-}
-
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -250,11 +227,6 @@ watch(props.data, async () => {
     formDataOrdination.leaveTotal = props.data.leaveTotal;
     formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
     formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
     formDataOrdination.ordainDayLocationAddress =
       props.data.ordainDayLocationAddress;
     formDataOrdination.ordainDayBuddhistLentName =
@@ -304,11 +276,6 @@ onMounted(async () => {
 
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
     leaveId.value = props.data.id;
   }
 });
@@ -323,277 +290,290 @@ onMounted(async () => {
   <form @submit.prevent="onValidate" class="full-width">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          bg-color="white"
-          hide-bottom-space
-          v-model="formDataOrdination.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            dense
+            outlined
+            bg-color="white"
+            hide-bottom-space
+            v-model="formDataOrdination.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataOrdination.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataOrdination.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataOrdination.leaveStartDate != null
-                      ? date2Thai(formDataOrdination.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataOrdination.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataOrdination.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataOrdination.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataOrdination.leaveStartDate != null
+                        ? date2Thai(formDataOrdination.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataOrdination.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
+
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataOrdination.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataOrdination.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataOrdination.leaveEndDate != null
-                      ? date2Thai(formDataOrdination.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataOrdination.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataOrdination.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataOrdination.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataOrdination.leaveEndDate != null
+                        ? date2Thai(formDataOrdination.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataOrdination.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-4 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="leaveText"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <datepicker
-              class="col-12 col-md-4 col-sm-6"
-              menu-class-name="modalfix"
-              v-model="formDataOrdination.leavegovernmentDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              readonly
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  ref="leavegovernmentDateRef"
-                  dense
-                  bg-color="white"
-                  hide-bottom-space
-                  readonly
-                  class="full-width"
-                  :model-value="
-                    dataStore.dateAppoint != null
-                      ? date2Thai(dataStore.dateAppoint)
-                      : null
-                  "
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="formDataOrdination.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
 
-            <datepicker
-              class="col-12 col-md-4 col-sm-6"
-              menu-class-name="modalfix"
-              v-model="formDataOrdination.leavebirthDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              readonly
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  ref="leavebirthDateRef"
-                  dense
-                  bg-color="white"
-                  hide-bottom-space
-                  readonly
-                  class="full-width"
-                  :model-value="
-                    dataStore.birthDate != null
-                      ? date2Thai(dataStore.birthDate)
-                      : null
-                  "
-                  :label="`${'วันเดือนปีเกิด'}`"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+            <div class="col-12 col-md-3 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataOrdination.leavegovernmentDate"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                readonly
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    ref="leavegovernmentDateRef"
+                    dense
+                    bg-color="white"
+                    hide-bottom-space
+                    readonly
+                    class="full-width"
+                    :model-value="
+                      dataStore.dateAppoint != null
+                        ? date2Thai(dataStore.dateAppoint)
+                        : null
+                    "
+                    :label="`${'วันที่เข้ารับราชการ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataOrdination.leavebirthDate"
+                :locale="'th'"
+                autoApply
+                borderless
+                readonly
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    ref="leavebirthDateRef"
+                    dense
+                    bg-color="white"
+                    hide-bottom-space
+                    readonly
+                    class="full-width"
+                    :model-value="
+                      dataStore.birthDate != null
+                        ? date2Thai(dataStore.birthDate)
+                        : null
+                    "
+                    :label="`${'วันเดือนปีเกิด'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
           </div>
         </div>
 
@@ -620,158 +600,170 @@ onMounted(async () => {
         </div>
 
         <div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
-        <datepicker
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataOrdination.ordainDayOrdination"
-          :locale="'th'"
-          autoApply
-          full-width
-          borderless
-          :readonly="!edit || statusCheck === 'NEW'"
-          hide-bottom-space
-          :enableTimePicker="false"
-          week-start="0"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              ref="ordainDayOrdinationRef"
-              dense
-              bg-color="white"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              class="full-width datepicker"
-              :model-value="
-                formDataOrdination.ordainDayOrdination != null
-                  ? date2Thai(formDataOrdination.ordainDayOrdination)
-                  : null
-              "
-              :label="`${'วันอุปสมบท'}`"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+        <div class="col-12 col-md-4 col-sm-6 inputgreen">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formDataOrdination.ordainDayOrdination"
+            :locale="'th'"
+            autoApply
+            full-width
+            borderless
+            :readonly="!edit || statusCheck === 'NEW'"
+            hide-bottom-space
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                ref="ordainDayOrdinationRef"
+                dense
+                bg-color="white"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                class="full-width datepicker"
+                :model-value="
+                  formDataOrdination.ordainDayOrdination != null
+                    ? date2Thai(formDataOrdination.ordainDayOrdination)
+                    : null
+                "
+                :label="`${'วันอุปสมบท'}`"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
 
-        <q-input
-          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-          dense
-          hide-bottom-space
-          ref="ordainDayLocationNameRef"
-          bg-color="white"
-          outlined
-          full-width
-          :readonly="!edit || statusCheck === 'NEW'"
-          v-model="formDataOrdination.ordainDayLocationName"
-          label="ชื่อวัด"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-        />
+        <div class="col-12 col-md-4 col-sm-6 inputgreen">
+          <q-input
+            dense
+            hide-bottom-space
+            ref="ordainDayLocationNameRef"
+            bg-color="white"
+            outlined
+            full-width
+            :readonly="!edit || statusCheck === 'NEW'"
+            v-model="formDataOrdination.ordainDayLocationName"
+            label="ชื่อวัด"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+          />
+        </div>
 
-        <q-input
-          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-          ref="ordainDayLocationNumberRef"
-          dense
-          full-width
-          outlined
-          v-model="formDataOrdination.ordainDayLocationNumber"
-          bg-color="white"
-          mask="(###)-###-####"
-          lazy-rules
-          unmasked-value
-          :readonly="!edit || statusCheck === 'NEW'"
-          hide-bottom-space
-          label="หมายเลขโทรศัพท์"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
-        />
-        <q-input
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          ref="ordainDayLocationAddressRef"
-          bg-color="white"
-          outlined
-          hide-bottom-space
-          v-model="formDataOrdination.ordainDayLocationAddress"
-          label="ที่อยู่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]"
-          type="textarea"
-        />
+        <div class="col-12 col-md-4 col-sm-12 inputgreen">
+          <q-input
+            ref="ordainDayLocationNumberRef"
+            dense
+            full-width
+            outlined
+            v-model="formDataOrdination.ordainDayLocationNumber"
+            bg-color="white"
+            mask="(###)-###-####"
+            lazy-rules
+            unmasked-value
+            :readonly="!edit || statusCheck === 'NEW'"
+            hide-bottom-space
+            label="หมายเลขโทรศัพท์"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
+          />
+        </div>
+
+        <div class="col-12 inputgreen">
+          <q-input
+            dense
+            ref="ordainDayLocationAddressRef"
+            bg-color="white"
+            outlined
+            hide-bottom-space
+            v-model="formDataOrdination.ordainDayLocationAddress"
+            label="ที่อยู่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+            type="textarea"
+          />
+        </div>
 
         <div class="q-pl-sm text-weight-bold text-dark col-12">
           สถานที่จำพรรษา
         </div>
-        <q-input
-          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-          dense
-          ref="ordainDayBuddhistLentNameRef"
-          bg-color="white"
-          hide-bottom-space
-          outlined
-          :readonly="!edit || statusCheck === 'NEW'"
-          v-model="formDataOrdination.ordainDayBuddhistLentName"
-          label="ชื่อวัด"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-        />
 
-        <q-input
-          class="col-12 cursor-pointer inputgreen"
-          dense
-          ref="ordainDayBuddhistLentAddressRef"
-          bg-color="white"
-          outlined
-          :readonly="!edit || statusCheck === 'NEW'"
-          v-model="formDataOrdination.ordainDayBuddhistLentAddress"
-          label="ที่อยู่"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]"
-          type="textarea"
-          hide-bottom-space
-        />
-        <q-input
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          bg-color="white"
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataOrdination.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+        <div class="col-12 col-md-6 col-sm-12 inputgreen">
+          <q-input
+            dense
+            ref="ordainDayBuddhistLentNameRef"
+            bg-color="white"
+            hide-bottom-space
+            outlined
+            :readonly="!edit || statusCheck === 'NEW'"
+            v-model="formDataOrdination.ordainDayBuddhistLentName"
+            label="ชื่อวัด"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+          />
+        </div>
+
+        <div class="col-12 inputgreen">
+          <q-input
+            dense
+            ref="ordainDayBuddhistLentAddressRef"
+            bg-color="white"
+            outlined
+            :readonly="!edit || statusCheck === 'NEW'"
+            v-model="formDataOrdination.ordainDayBuddhistLentAddress"
+            label="ที่อยู่"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+            type="textarea"
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="col-12 inputgreen">
+          <q-input
+            type="textarea"
+            dense
+            bg-color="white"
+            outlined
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataOrdination.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
-            <q-file
-              ref="leaveDocumentRef"
-              v-model="formDataOrdination.leaveDocument"
-              @added="fileUploadDoc"
-              dense
-              label="เอกสารประกอบ"
-              multiple
-              outlined
-              bg-color="white"
-              use-chips
-              class="col-12 q-pl-sm col-12"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
+            <div class="col-12 q-pl-sm col-12">
+              <q-file
+                ref="leaveDocumentRef"
+                v-model="formDataOrdination.leaveDocument"
+                @added="fileUploadDoc"
+                dense
+                label="เอกสารประกอบ"
+                multiple
+                outlined
+                bg-color="white"
+                use-chips
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
           </div>
         </div>
         <div class="col-12" v-if="data">
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index 7440191..edfdff6 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -61,7 +61,7 @@ const formDataHaji = reactive<any>({
   leavegovernmentDate: null,
   leaveStartDate: null,
   leaveEndDate: null,
-  totalLeave: 0,
+  leaveTotal: 0,
   hajjDayStatus: true,
   leaveDocument: [],
   leaveDetail: "",
@@ -175,17 +175,6 @@ async function fetchCheck() {
     });
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataHaji.leaveStartDate,
-    formDataHaji.leaveEndDate
-  );
-  formDataHaji.leaveTotal = newLeaveTotal;
-}
-
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -200,18 +189,12 @@ watch(props.data, async () => {
     formDataHaji.leaveTotal = props.data.leaveTotal;
     formDataHaji.leaveStartDate = props.data.leaveStartDate;
     formDataHaji.leaveEndDate = props.data.leaveEndDate;
-    formDataHaji.totalLeave = props.data.totalLeave;
     formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
     formDataHaji.leaveDetail = props.data.leaveDetail;
     formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
     formDataHaji.leaveRange = props.data.leaveRange;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
     formDataHaji.leaveDocument = [];
   }
 });
@@ -223,18 +206,11 @@ onMounted(async () => {
     formDataHaji.leaveTotal = props.data.leaveTotal;
     formDataHaji.leaveStartDate = props.data.leaveStartDate;
     formDataHaji.leaveEndDate = props.data.leaveEndDate;
-    formDataHaji.totalLeave = props.data.totalLeave;
     formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
     formDataHaji.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     formDataHaji.leaveRange = props.data.leaveRange;
     formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
-
     statusCheck.value = props.data.status;
     // formDataHaji.leaveDocument = props.data.leaveDocument;
     leaveId.value = props.data.id;
@@ -253,7 +229,7 @@ onMounted(async () => {
         <q-input
           v-model="formDataHaji.leaveWrote"
           ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          class="col-12 col-sm-12 inputgreen"
           bg-color="white"
           dense
           outlined
@@ -266,7 +242,7 @@ onMounted(async () => {
         <div class="col-12">
           <div class="row q-col-gutter-sm">
             <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-3 col-sm-6 inputgreen"
               menu-class-name="modalfix"
               v-model="formDataHaji.leaveStartDate"
               :locale="'th'"
@@ -318,7 +294,7 @@ onMounted(async () => {
             <q-select
               outlined
               dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-3 col-sm-6 inputgreen"
               bg-color="white"
               v-model="formDataHaji.leaveRange"
               :options="dataStore.rangeOptions"
@@ -340,7 +316,7 @@ onMounted(async () => {
         <div class="col-12">
           <div class="row q-col-gutter-sm">
             <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-3 col-sm-6 inputgreen"
               menu-class-name="modalfix"
               v-model="formDataHaji.leaveEndDate"
               :locale="'th'"
@@ -390,7 +366,7 @@ onMounted(async () => {
               v-if="!checkDate"
               outlined
               dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-3 col-sm-6 inputgreen"
               bg-color="white"
               v-model="formDataHaji.leaveRangeEnd"
               :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@@ -412,27 +388,29 @@ onMounted(async () => {
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="leaveText"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="formDataHaji.leaveTotal"
+                label="จำนวนวันที่ลา (วัน)"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+
             <datepicker
               class="col-12 col-md-3 col-sm-6"
               menu-class-name="modalfix"
@@ -502,16 +480,18 @@ onMounted(async () => {
           />
         </div>
 
-        <q-input
-          v-model="formDataHaji.leaveDetail"
-          class="col-12 q-mt-sm cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataHaji.leaveDetail"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+            dense
+            outlined
+            type="textarea"
+            label="สาเหตุการลา"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <!-- multiple -->
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index be73451..6fe3ded 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -270,221 +270,237 @@ onMounted(async () => {
   <form @submit.prevent="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          bg-color="white"
-          hide-bottom-space
-          v-model="formDataMilitary.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            dense
+            outlined
+            bg-color="white"
+            hide-bottom-space
+            v-model="formDataMilitary.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataMilitary.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataMilitary.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataMilitary.leaveStartDate != null
-                      ? date2Thai(formDataMilitary.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataMilitary.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataMilitary.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataMilitary.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataMilitary.leaveStartDate != null
+                        ? date2Thai(formDataMilitary.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-sm-3 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataMilitary.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
+
         <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataMilitary.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataMilitary.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataMilitary.leaveEndDate != null
-                      ? date2Thai(formDataMilitary.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataMilitary.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataMilitary.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataMilitary.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataMilitary.leaveEndDate != null
+                        ? date2Thai(formDataMilitary.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-sm-3 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataMilitary.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
 
         <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-4 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="leaveText"
-              label="จำนวนวันที่ลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <q-input
-              ref="absentDaySummonRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              outlined
-              v-model="formDataMilitary.absentDaySummon"
-              label="ได้รับหมายเรียกของ"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
-            />
+          <div class="q-col-gutter-sm row"> -->
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="จำนวนวันที่ลา"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </div>
 
-            <q-input
-              ref="atRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              outlined
-              v-model="formDataMilitary.absentDayLocation"
-              label="ที่"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกที่'}`]"
-            />
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-8 col-sm-6 inputgreen">
+              <q-input
+                ref="absentDaySummonRef"
+                dense
+                bg-color="white"
+                outlined
+                v-model="formDataMilitary.absentDaySummon"
+                label="ได้รับหมายเรียกของ"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
+              <q-input
+                ref="atRef"
+                dense
+                bg-color="white"
+                outlined
+                v-model="formDataMilitary.absentDayLocation"
+                label="ที่"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกที่'}`]"
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
             <datepicker
-              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              class="col-12 col-md-4 col-sm-6 inputgreen"
               menu-class-name="modalfix"
               v-model="formDataMilitary.absentDayRegistorDate"
               :locale="'th'"
@@ -530,7 +546,7 @@ onMounted(async () => {
             </datepicker>
 
             <q-input
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              class="col-12 col-md-4 col-sm-6 inputgreen"
               dense
               bg-color="white"
               ref="absentDayGetInRef"
@@ -543,7 +559,7 @@ onMounted(async () => {
             />
 
             <q-input
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              class="col-12 col-md-4 col-sm-12 inputgreen"
               dense
               bg-color="white"
               outlined
@@ -557,16 +573,17 @@ onMounted(async () => {
           </div>
         </div>
 
-        <q-input
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          :readonly="!edit || statusCheck === 'NEW'"
-          bg-color="white"
-          outlined
-          v-model="formDataMilitary.leaveDetail"
-          type="textarea"
-          label="สาเหตุการลา"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataMilitary.leaveDetail"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+            dense
+            outlined
+            type="textarea"
+            label="สาเหตุการลา"
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <!-- multiple -->
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 33e9a05..4abf949 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -298,417 +298,447 @@ onMounted(async () => {
   <form @submit.prevent="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          v-model="formDataStudy.leaveWrote"
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          label="เขียนที่"
-          hide-bottom-space
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataStudy.leaveWrote"
+            ref="leaveWroteRef"
+            bg-color="white"
+            dense
+            outlined
+            label="เขียนที่"
+            hide-bottom-space
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataStudy.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataStudy.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataStudy.leaveStartDate != null
-                      ? date2Thai(formDataStudy.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataStudy.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataStudy.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataStudy.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataStudy.leaveStartDate != null
+                        ? date2Thai(formDataStudy.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-sm-3 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataStudy.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
+
         <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataStudy.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataStudy.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataStudy.leaveEndDate != null
-                      ? date2Thai(formDataStudy.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataStudy.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataStudy.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataStudy.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataStudy.leaveEndDate != null
+                        ? date2Thai(formDataStudy.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-sm-3  inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataStudy.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row"> -->
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="มีกำหนด"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="leaveText"
-              label="มีกำหนด"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <datepicker
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              week-start="0"
-              readonly
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavegovernmentDateRef"
-                  class="full-width"
-                  bg-color="white"
-                  outlined
-                  readonly
-                  dense
-                  hide-bottom-space
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                  :model-value="
-                    dataStore.dateAppoint != null
-                      ? date2Thai(dataStore.dateAppoint)
-                      : null
-                  "
-                  :rules="[
+            <div class="col-12 col-md-3 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                autoApply
+                borderless
+                week-start="0"
+                readonly
+                :enableTimePicker="false"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="leavegovernmentDateRef"
+                    class="full-width"
+                    bg-color="white"
+                    outlined
+                    readonly
+                    dense
+                    hide-bottom-space
+                    :label="`${'วันที่เข้ารับราชการ'}`"
+                    :model-value="
+                      dataStore.dateAppoint != null
+                        ? date2Thai(dataStore.dateAppoint)
+                        : null
+                    "
+                    :rules="[
                     (val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
                   ]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-            <datepicker
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              readonly
-              week-start="0"
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavebirthDateRef"
-                  class="full-width"
-                  bg-color="white"
-                  outlined
-                  dense
-                  readonly
-                  hide-bottom-space
-                  :label="`${'วันเดือนปีเกิด'}`"
-                  :model-value="
-                    dataStore.birthDate != null
-                      ? date2Thai(dataStore.birthDate)
-                      : null
-                  "
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+            <div class="col-12 col-md-3 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                autoApply
+                borderless
+                readonly
+                week-start="0"
+                :enableTimePicker="false"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="leavebirthDateRef"
+                    class="full-width"
+                    bg-color="white"
+                    outlined
+                    dense
+                    readonly
+                    hide-bottom-space
+                    :label="`${'วันเดือนปีเกิด'}`"
+                    :model-value="
+                      dataStore.birthDate != null
+                        ? date2Thai(dataStore.birthDate)
+                        : null
+                    "
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-            <q-input
-              :model-value="dataStore.salary"
-              ref="leaveSalaryRef"
-              class="col-12 col-sm-6 col-md-3"
-              bg-color="white"
-              dense
-              outlined
-              readonly
-              label="เงินเดือนปัจจุบัน"
-            />
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :model-value="dataStore.salary"
+                ref="leaveSalaryRef"
+                bg-color="white"
+                dense
+                outlined
+                readonly
+                label="เงินเดือนปัจจุบัน"
+              />
+            </div>
 
-            <q-input
-              :model-value="dataStore.salaryText"
-              ref="leaveSalaryRef"
-              class="col-12 col-sm-6 col-md-3"
-              bg-color="white"
-              dense
-              readonly
-              outlined
-              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
-            />
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :model-value="dataStore.salaryText"
+                ref="leaveSalaryRef"
+                bg-color="white"
+                dense
+                readonly
+                outlined
+                label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              v-model="formDataStudy.studyDayUniversityName"
-              ref="studyDayUniversityNameRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ชื่อสถานศึกษา"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
-            />
+            <div class="col-12 col-md-4 col-sm-12 inputgreen">
+              <q-input
+                v-model="formDataStudy.studyDayUniversityName"
+                ref="studyDayUniversityNameRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ชื่อสถานศึกษา"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
+              />
+            </div>
 
-            <q-input
-              v-model="formDataStudy.studyDayDegreeLevel"
-              ref="studyDayDegreeLevelRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ชั้นปริญญา"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
-            />
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
+              <q-input
+                v-model="formDataStudy.studyDayDegreeLevel"
+                ref="studyDayDegreeLevelRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ชั้นปริญญา"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
+              />
+            </div>
 
-            <q-input
-              v-model="formDataStudy.studyDaySubject"
-              ref="studyDaySubjectRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ศึกษาวิชา"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
-            />
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
+              <q-input
+                v-model="formDataStudy.studyDaySubject"
+                ref="studyDaySubjectRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ศึกษาวิชา"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
+              />
+            </div>
 
-            <q-input
-              v-model="formDataStudy.studyDayCountry"
-              ref="studyDayCountryRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ประเทศ"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
-            />
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
+              <q-input
+                v-model="formDataStudy.studyDayCountry"
+                ref="studyDayCountryRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ประเทศ"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
+              />
+            </div>
 
-            <q-input
-              v-model="formDataStudy.studyDayScholarship"
-              ref="studyDayScholarshipRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ด้วยทุน"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-            />
-
-            <q-input
-              v-model="dataStore.telephoneNumber"
-              ref="leaveNumberRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              unmasked-value
-              hide-bottom-space
-              mask="(###)-###-####"
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :rules="[
-                (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
-
-            <q-input
-              v-model="dataStore.currentAddress"
-              ref="leaveAddressRef"
-              class="col-12 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              :readonly="!edit || statusCheck === 'NEW'"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              hide-bottom-space
-              :rules="[
-                (val:string) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
+            <div class="col-12 col-md-4 col-sm-6 inputgreen">
+              <q-input
+                v-model="formDataStudy.studyDayScholarship"
+                ref="studyDayScholarshipRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ด้วยทุน"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+              />
+            </div>
           </div>
         </div>
 
-        <q-input
-          v-model="formDataStudy.leaveDetail"
-          :readonly="!edit || statusCheck === 'NEW'"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="สาเหตุการลา"
-        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <div class="col-12 col-md-4 col-sm-12 inputgreen">
+              <q-input
+                v-model="dataStore.telephoneNumber"
+                ref="leaveNumberRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                unmasked-value
+                hide-bottom-space
+                mask="(###)-###-####"
+                label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+                :rules="[
+                (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+              />
+            </div>
+
+            <div class="col-12 col-md-8 col-sm-12 inputgreen">
+              <q-input
+                v-model="dataStore.currentAddress"
+                ref="leaveAddressRef"
+                bg-color="white"
+                dense
+                outlined
+                :readonly="!edit || statusCheck === 'NEW'"
+                label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+                hide-bottom-space
+                :rules="[
+                (val:string) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataStudy.leaveDetail"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+            dense
+            outlined
+            type="textarea"
+            label="สาเหตุการลา"
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <q-file
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 26edb8d..6b7ae52 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -17,7 +17,6 @@ const {
   date2Thai,
   arabicNumberToText,
   calculateDurationYmd,
-  dateToISO,
   messageError,
   convertDateToAPI,
   showLoader,
@@ -279,361 +278,386 @@ onMounted(async () => {
   <form @submit.prevent="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          v-model="formDataTrain.leaveWrote"
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          hide-bottom-space
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataTrain.leaveWrote"
+            ref="leaveWroteRef"
+            bg-color="white"
+            dense
+            outlined
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            hide-bottom-space
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataTrain.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataTrain.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataTrain.leaveStartDate != null
-                      ? date2Thai(formDataTrain.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataTrain.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataTrain.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataTrain.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataTrain.leaveStartDate != null
+                        ? date2Thai(formDataTrain.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-sm-3 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataTrain.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
         <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataTrain.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataTrain.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataTrain.leaveEndDate != null
-                      ? date2Thai(formDataTrain.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataTrain.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataTrain.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataTrain.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataTrain.leaveEndDate != null
+                        ? date2Thai(formDataTrain.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-sm-3 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataTrain.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row"> -->
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="มีกำหนด"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="leaveText"
-              label="มีกำหนด"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
-            <datepicker
-              v-model="formDataTrain.leavegovernmentDate"
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              week-start="0"
-              readonly
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavegovernmentDateRef"
-                  class="full-width"
-                  outlined
-                  readonly
-                  bg-color="white"
-                  dense
-                  hide-bottom-space
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                  :model-value="
-                    dataStore.dateAppoint != null
-                      ? date2Thai(dataStore.dateAppoint)
-                      : null
-                  "
-                  :rules="[
+            <div class="col-12 col-sm-3">
+              <datepicker
+                v-model="formDataTrain.leavegovernmentDate"
+                menu-class-name="modalfix"
+                autoApply
+                borderless
+                week-start="0"
+                readonly
+                :enableTimePicker="false"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="leavegovernmentDateRef"
+                    class="full-width"
+                    outlined
+                    readonly
+                    bg-color="white"
+                    dense
+                    hide-bottom-space
+                    :label="`${'วันที่เข้ารับราชการ'}`"
+                    :model-value="
+                      dataStore.dateAppoint != null
+                        ? date2Thai(dataStore.dateAppoint)
+                        : null
+                    "
+                    :rules="[
                     (val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
                   ]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-            <datepicker
-              v-model="formDataTrain.leavebirthDate"
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              readonly
-              week-start="0"
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavebirthDateRef"
-                  class="full-width"
-                  bg-color="white"
-                  outlined
-                  dense
-                  readonly
-                  hide-bottom-space
-                  :label="`${'วันเดือนปีเกิด'}`"
-                  :model-value="
-                    dataStore.birthDate != null
-                      ? date2Thai(dataStore.birthDate)
-                      : null
-                  "
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(---black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+            <div class="col-12 col-sm-3">
+              <datepicker
+                v-model="formDataTrain.leavebirthDate"
+                menu-class-name="modalfix"
+                autoApply
+                borderless
+                readonly
+                week-start="0"
+                :enableTimePicker="false"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="leavebirthDateRef"
+                    class="full-width"
+                    bg-color="white"
+                    outlined
+                    dense
+                    readonly
+                    hide-bottom-space
+                    :label="`${'วันเดือนปีเกิด'}`"
+                    :model-value="
+                      dataStore.birthDate != null
+                        ? date2Thai(dataStore.birthDate)
+                        : null
+                    "
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(---black)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-            <q-input
-              v-model="dataStore.salary"
-              class="col-12 col-sm-6 col-md-3"
-              bg-color="white"
-              dense
-              outlined
-              readonly
-              label="เงินเดือนปัจจุบัน"
-            />
+            <div class="col-12 col-sm-3">
+              <q-input
+                v-model="dataStore.salary"
+                bg-color="white"
+                dense
+                outlined
+                readonly
+                label="เงินเดือนปัจจุบัน"
+              />
+            </div>
 
-            <q-input
-              v-model="dataStore.salaryText"
-              class="col-12 col-sm-6 col-md-3"
-              dense
-              readonly
-              outlined
-              bg-color="white"
-              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-            />
+            <div class="col-12 col-sm-3">
+              <q-input
+                v-model="dataStore.salaryText"
+                dense
+                readonly
+                outlined
+                bg-color="white"
+                label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <div class="col-12 col-sm-8 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayTrainingSubject"
+                ref="studyDayTrainingSubjectRef"
+                bg-color="white"
+                dense
+                outlined
+                label="ด้าน/หลักสูตร"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-sm-4 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayTrainingName"
+                ref="studyDayTrainingNameRef"
+                bg-color="white"
+                dense
+                outlined
+                label="ณ สถานที่"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-sm-4 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayCountry"
+                ref="studyDayCountryRef"
+                dense
+                bg-color="white"
+                outlined
+                label="ประเทศ"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
+              />
+            </div>
+
+            <div class="col-12 col-sm-8 inputgreen">
+              <q-input
+                v-model="formDataTrain.studyDayScholarship"
+                ref="studyDayScholarshipRef"
+                bg-color="white"
+                dense
+                outlined
+                label="ด้วยทุน"
+                hide-bottom-space
+                :readonly="!edit || statusCheck === 'NEW'"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+              />
+            </div>
           </div>
         </div>
 
         <div class="full-width">
           <div class="q-col-gutter-sm row">
-            <q-input
-              v-model="formDataTrain.studyDayTrainingSubject"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              ref="studyDayTrainingSubjectRef"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้าน/หลักสูตร"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
-            />
-
-            <q-input
-              v-model="formDataTrain.studyDayTrainingName"
-              ref="studyDayTrainingNameRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ณ สถานที่"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
-            />
-
-            <q-input
-              v-model="formDataTrain.studyDayCountry"
-              ref="studyDayCountryRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              outlined
-              label="ประเทศ"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
-            />
-
-            <q-input
-              v-model="formDataTrain.studyDayScholarship"
-              ref="studyDayScholarshipRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้วยทุน"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-            />
-
             <q-input
               v-model="dataStore.telephoneNumber"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              class="col-12 col-sm-4 inputgreen"
               ref="leaveNumberRef"
               dense
               outlined
@@ -651,7 +675,7 @@ onMounted(async () => {
             <q-input
               v-model="dataStore.currentAddress"
               ref="leaveAddressRef"
-              class="col-12 cursor-pointer inputgreen"
+              class="col-12 col-sm-8 inputgreen"
               bg-color="white"
               dense
               outlined
@@ -665,16 +689,17 @@ onMounted(async () => {
           </div>
         </div>
 
-        <q-input
-          v-model="formDataTrain.leaveDetail"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          :readonly="!edit || statusCheck === 'NEW'"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="สาเหตุการลา"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            v-model="formDataTrain.leaveDetail"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+            dense
+            outlined
+            type="textarea"
+            label="สาเหตุการลา"
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <q-file
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 29ba1b6..682e0d3 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -17,7 +17,7 @@ const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
 const {
   date2Thai,
-  dateToISO,
+  calculateDurationYmd,
   messageError,
   showLoader,
   hideLoader,
@@ -27,6 +27,7 @@ const {
 const edit = ref<boolean>(true);
 const isSave = ref<boolean>(false);
 const leaveId = ref<string>("");
+const leaveText = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -187,6 +188,11 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataWorkInternational.leaveTotal = data.totalDate;
+
+      leaveText.value = calculateDurationYmd(
+        formDataWorkInternational.leaveStartDate,
+        formDataWorkInternational.leaveEndDate
+      );
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
@@ -206,7 +212,7 @@ const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
 
-watch(props, () => {
+watch(props, async () => {
   if (props.data) {
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
     formDataWorkInternational.leaveStartDate = new Date(
@@ -222,6 +228,11 @@ watch(props, () => {
     statusCheck.value = props.data.status;
     formDataWorkInternational.leaveDraftDocument = null;
     formDataWorkInternational.leaveDocument = [];
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
   }
 });
 
@@ -238,7 +249,7 @@ watch(
 );
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
 
@@ -255,6 +266,11 @@ onMounted(() => {
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
   }
 });
 </script>
@@ -267,200 +283,212 @@ onMounted(() => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          hide-bottom-space
-          bg-color="white"
-          for="leaveWroteRef"
-          dense
-          outlined
-          v-model="formDataWorkInternational.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 inputgreen">
+          <q-input
+            ref="leaveWroteRef"
+            hide-bottom-space
+            bg-color="white"
+            for="leaveWroteRef"
+            dense
+            outlined
+            v-model="formDataWorkInternational.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataWorkInternational.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataWorkInternational.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataWorkInternational.leaveStartDate != null
-                      ? date2Thai(formDataWorkInternational.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataWorkInternational.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataWorkInternational.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataWorkInternational.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataWorkInternational.leaveStartDate != null
+                        ? date2Thai(formDataWorkInternational.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataWorkInternational.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
         <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataWorkInternational.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataWorkInternational.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataWorkInternational.leaveEndDate != null
-                      ? date2Thai(formDataWorkInternational.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              v-if="!checkDate"
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataWorkInternational.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataWorkInternational.leaveTotal"
-              label="เป็นเวลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataWorkInternational.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataWorkInternational.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataWorkInternational.leaveEndDate != null
+                        ? date2Thai(formDataWorkInternational.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                v-if="!checkDate"
+                bg-color="white"
+                v-model="formDataWorkInternational.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="มีกำหนด"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
           </div>
         </div>
-        <q-input
-          hide-bottom-space
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          bg-color="white"
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataWorkInternational.leaveDetail"
-          label="สาเหตุการลา"
-          :readonly="!edit || statusCheck === 'NEW'"
-        />
+
+        <div class="col-12 inputgreen">
+          <q-input
+            hide-bottom-space
+            type="textarea"
+            dense
+            bg-color="white"
+            outlined
+            ref="leaveDetailRef"
+            for="leaveDetailRef"
+            v-model="formDataWorkInternational.leaveDetail"
+            label="สาเหตุการลา"
+            :readonly="!edit || statusCheck === 'NEW'"
+          />
+        </div>
+
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
             <q-file
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 33fa73a..0328139 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -26,7 +26,6 @@ const {
 } = mixin;
 
 const leaveText = ref<string>("");
-const leaveHistoryText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 const checkDate = computed(() => {
@@ -364,188 +363,199 @@ onMounted(async () => {
   <form @submit.prevent.stop="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="formDataFollowSpouse.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
-        <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataFollowSpouse.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataFollowSpouse.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataFollowSpouse.leaveStartDate != null
-                      ? date2Thai(formDataFollowSpouse.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataFollowSpouse.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
-        </div>
-        <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataFollowSpouse.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataFollowSpouse.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataFollowSpouse.leaveEndDate != null
-                      ? date2Thai(formDataFollowSpouse.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataFollowSpouse.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
-        </div>
-        <div class="col-12 col-md-4 col-sm-12">
+        <div class="col-12 col-sm-12 inputgreen">
           <q-input
-            :bottom-slots="!isLeave ? true : false"
-            :color="!isLeave ? 'red' : 'black'"
-            :bg-color="!isLeave ? 'red-2' : 'white'"
-            :border-color="!isLeave ? 'red' : 'gray'"
-            :input-class="!isLeave ? dateEndInputStyle : ''"
+            ref="leaveWroteRef"
+            for="leaveWroteRef"
             dense
+            hide-bottom-space
+            bg-color="white"
             outlined
-            ref="leaveTotalRef"
-            for="leaveTotalRef"
-            v-model="leaveText"
-            label="เป็นเวลา"
-            readonly
-          >
-            <template v-slot:hint>
-              <span style="color: red">
-                {{ !isLeave ? reasonLeave : "" }}
-              </span>
-            </template>
-          </q-input>
+            v-model="formDataFollowSpouse.leaveWrote"
+            label="เขียนที่"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
         </div>
-        <div class="col-12 col-md-4 col-sm-12">
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataFollowSpouse.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataFollowSpouse.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataFollowSpouse.leaveStartDate != null
+                        ? date2Thai(formDataFollowSpouse.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataFollowSpouse.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
+        </div>
+
+        <div class="col-12">
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataFollowSpouse.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataFollowSpouse.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataFollowSpouse.leaveEndDate != null
+                        ? date2Thai(formDataFollowSpouse.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataFollowSpouse.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="เป็นเวลา"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-md-3 col-sm-12">
           <q-input
             hide-bottom-space
             bg-color="white"
@@ -559,7 +569,7 @@ onMounted(async () => {
             readonly
           />
         </div>
-        <div class="col-12 col-md-4 col-sm-12">
+        <div class="col-12 col-md-9 col-sm-12">
           <q-input
             hide-bottom-space
             bg-color="white"
@@ -576,7 +586,7 @@ onMounted(async () => {
 
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             hide-bottom-space
             ref="coupleDayNameRef"
             for="coupleDayNameRef"
@@ -591,7 +601,7 @@ onMounted(async () => {
         </div>
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             hide-bottom-space
             ref="coupleDayPositionRef"
             for="coupleDayPositionRef"
@@ -606,7 +616,7 @@ onMounted(async () => {
         </div>
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             ref="coupleDayLevelRef"
             for="coupleDayLevelRef"
             dense
@@ -621,7 +631,7 @@ onMounted(async () => {
         </div>
         <div class="col-md-3 col-sm-12">
           <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            class="col-12 col-sm-12 inputgreen"
             ref="coupleDayLevelCountryRef"
             for="coupleDayLevelCountryRef"
             hide-bottom-space
@@ -765,7 +775,7 @@ onMounted(async () => {
         <q-input
           hide-bottom-space
           type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          class="col-12 col-md-12 col-sm-12 inputgreen"
           dense
           bg-color="white"
           outlined
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index a85b490..4bf8adb 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -14,7 +14,7 @@ const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
 const {
   date2Thai,
-  dateToISO,
+  calculateDurationYmd,
   messageError,
   showLoader,
   hideLoader,
@@ -27,6 +27,7 @@ const leaveId = ref<any>("");
 const leaveStartDateRef = ref<object | null>(null);
 const leaveEndDateRef = ref<object | null>(null);
 const leaveWroteRef = ref<object | null>(null);
+const leaveText = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -146,6 +147,10 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataRehabilitation.leaveTotal = data.totalDate;
+      leaveText.value = calculateDurationYmd(
+        formDataRehabilitation.leaveStartDate,
+        formDataRehabilitation.leaveEndDate
+      );
 
       reasonLeave.value = data.message
         ? data.message
@@ -185,7 +190,7 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
-watch(props.data, () => {
+watch(props.data, async () => {
   if (props.data) {
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
@@ -198,11 +203,16 @@ watch(props.data, () => {
     formDataRehabilitation.leaveDraftDocument = null;
     formDataRehabilitation.leaveDocument = [];
     statusCheck.value = props.data.status;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
   }
 });
 
 /**Hook */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
@@ -216,6 +226,12 @@ onMounted(() => {
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    leaveText.value = leaveTotal;
+
     fetchCheck();
   }
 });
@@ -230,197 +246,207 @@ onMounted(() => {
   <q-form greedy @submit.prevent @validation-success="onValidate">
     <q-card bordered class="q-pa-md bg-grey-1">
       <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          v-model="formDataRehabilitation.leaveWrote"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          dense
-          outlined
-          bg-color="white"
-          label="เขียนที่"
-          hide-bottom-space
-          :readonly="!edit || statusCheck === 'NEW'"
-          :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
-        />
+        <div class="col-12 col-sm-12 inputgreen">
+          <q-input
+            v-model="formDataRehabilitation.leaveWrote"
+            ref="leaveWroteRef"
+            dense
+            outlined
+            bg-color="white"
+            label="เขียนที่"
+            hide-bottom-space
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
+          />
+        </div>
 
         <div class="col-12">
           <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataRehabilitation.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit || statusCheck === 'NEW'"
-              @update:model-value="
-                (formDataRehabilitation.leaveEndDate = null), fetchCheck()
-              "
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!edit || statusCheck === 'NEW'"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataRehabilitation.leaveStartDate != null
-                      ? date2Thai(formDataRehabilitation.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'วันที่เริ่มต้น'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataRehabilitation.leaveRange"
-              :options="dataStore.rangeOptions"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-          </div>
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataRehabilitation.leaveStartDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="!edit || statusCheck === 'NEW'"
+                @update:model-value="
+                  (formDataRehabilitation.leaveEndDate = null), fetchCheck()
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveStartDateRef"
+                    for="leaveStartDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    :readonly="!edit || statusCheck === 'NEW'"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataRehabilitation.leaveStartDate != null
+                        ? date2Thai(formDataRehabilitation.leaveStartDate)
+                        : null
+                    "
+                    :label="`${'วันที่เริ่มต้น'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataRehabilitation.leaveRange"
+                :options="dataStore.rangeOptions"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+            <!-- </div>
         </div>
         <div class="col-12">
-          <div class="row q-col-gutter-sm">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataRehabilitation.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              hide-bottom-space
-              @update:model-value="fetchCheck()"
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :min-date="formDataRehabilitation.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataRehabilitation.leaveEndDate != null
-                      ? date2Thai(formDataRehabilitation.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'วันที่สิ้นสุด'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              v-if="!checkDate"
-              outlined
-              dense
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              bg-color="white"
-              v-model="formDataRehabilitation.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
-              emit-value
-              map-options
-              option-value="id"
-              option-label="name"
-              @update:model-value="fetchCheck()"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-clock-outline"
-                  style="color: var(--q-primary)"
-                />
-              </template>
-            </q-select>
-            <q-input
-              :bottom-slots="!isLeave ? true : false"
-              :color="!isLeave ? 'red' : 'black'"
-              :bg-color="!isLeave ? 'red-2' : 'white'"
-              :border-color="!isLeave ? 'red' : 'gray'"
-              :input-class="!isLeave ? dateEndInputStyle : ''"
-              class="col-12 col-md-2 col-sm-6"
-              dense
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataRehabilitation.leaveTotal"
-              label="เป็นเวลา"
-              readonly
-            >
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? reasonLeave : "" }}
-                </span>
-              </template>
-            </q-input>
+          <div class="row q-col-gutter-sm"> -->
+            <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formDataRehabilitation.leaveEndDate"
+                :locale="'th'"
+                autoApply
+                hide-bottom-space
+                @update:model-value="fetchCheck()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formDataRehabilitation.leaveStartDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    ref="leaveEndDateRef"
+                    for="leaveEndDateRef"
+                    hide-bottom-space
+                    bg-color="white"
+                    class="full-width datepicker"
+                    :model-value="
+                      formDataRehabilitation.leaveEndDate != null
+                        ? date2Thai(formDataRehabilitation.leaveEndDate)
+                        : null
+                    "
+                    :label="`${'วันที่สิ้นสุด'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
+              <q-select
+                v-if="!checkDate"
+                outlined
+                dense
+                bg-color="white"
+                v-model="formDataRehabilitation.leaveRangeEnd"
+                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
+                @update:model-value="fetchCheck()"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="mdi-clock-outline"
+                    style="color: var(--q-primary)"
+                  />
+                </template>
+              </q-select>
+            </div> -->
+
+            <div class="col-12 col-md-3 col-sm-6">
+              <q-input
+                :bottom-slots="!isLeave ? true : false"
+                :color="!isLeave ? 'red' : 'black'"
+                :bg-color="!isLeave ? 'red-2' : 'white'"
+                :border-color="!isLeave ? 'red' : 'gray'"
+                :input-class="!isLeave ? dateEndInputStyle : ''"
+                dense
+                outlined
+                ref="leaveTotalRef"
+                for="leaveTotalRef"
+                v-model="leaveText"
+                label="เป็นเวลา"
+                readonly
+              >
+                <template v-slot:hint>
+                  <span style="color: red">
+                    {{ !isLeave ? reasonLeave : "" }}
+                  </span>
+                </template>
+              </q-input>
+            </div>
           </div>
         </div>
 
-        <q-input
-          v-model="formDataRehabilitation.leaveDetail"
-          :readonly="!edit || statusCheck === 'NEW'"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="สาเหตุการลา"
-        />
+        <div class="col-12 col-md-12 col-sm-12 inputgreen">
+          <q-input
+            v-model="formDataRehabilitation.leaveDetail"
+            :readonly="!edit || statusCheck === 'NEW'"
+            bg-color="white"
+            dense
+            outlined
+            type="textarea"
+            label="สาเหตุการลา"
+          />
+        </div>
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
           <q-file
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index 0b73d8e..7a53d6e 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -84,9 +84,10 @@ onMounted(() => {
         outlined
         readonly
         bg-color="white"
-        v-model="dataStore.dear"
+        v-model="dataStore.commanderPosition"
         label="เรียน"
       />
+
       <q-input
         class="col-12 col-sm-4"
         dense
diff --git a/src/modules/05_leave/interface/request/AddAbsence.ts b/src/modules/05_leave/interface/request/AddAbsence.ts
index 06f9356..014d020 100644
--- a/src/modules/05_leave/interface/request/AddAbsence.ts
+++ b/src/modules/05_leave/interface/request/AddAbsence.ts
@@ -16,7 +16,7 @@ interface OrdinationForm {
   leavebirthDate: object | null;
   leaveStartDate: object | null;
   leaveEndDate: object | null;
-  totalLeave: object | null;
+  leaveTotal: object | null;
   ordainDayOrdination: object | null;
   ordainDayLocationName: object | null;
   ordainDayLocationNumber: object | null;
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index d9d37b7..d280ef1 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -284,6 +284,7 @@ export const useLeaveStore = defineStore("Leave", () => {
   const dateSendLeave = ref<Date>(); //วันที่ยื่นใบลา
   const leaveTypeName = ref<string>(""); //Name ประเภทการลา
   const dear = ref<string>(""); //เรียน
+  const commanderPosition = ref<string>(""); //ตำแหน่งผู้บังคับบัญชา
   const fullName = ref<string>(""); //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ
   const positionName = ref<string>(""); //ตำแหน่งผู้ยื่นขอ
   const positionLevelName = ref<string>(""); //ระดับผู้ยื่นขอ
@@ -312,6 +313,7 @@ export const useLeaveStore = defineStore("Leave", () => {
         dateSendLeave.value = data.dateSendLeave;
         leaveTypeName.value = data.leaveTypeName;
         dear.value = data.dear;
+        commanderPosition.value = data.commanderPosition;
         fullName.value = data.fullName;
         positionName.value = data.positionName;
         positionLevelName.value = data.positionLevelName;
@@ -370,6 +372,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     dateSendLeave.value = data.dateSendLeave;
     typeLeave.value = data.leaveTypeName;
     dear.value = data.dear;
+    commanderPosition.value = data.commanderPosition;
     fullName.value = data.fullName;
     positionName.value = data.positionName;
     positionLevelName.value = data.positionLevelName;
@@ -383,6 +386,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     dateSendLeave.value = undefined;
     leaveTypeName.value = "";
     dear.value = "";
+    commanderPosition.value = "";
     fullName.value = "";
     positionName.value = "";
     positionLevelName.value = "";
@@ -427,6 +431,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     dateSendLeave,
     leaveTypeName,
     dear,
+    commanderPosition,
     fullName,
     positionName,
     positionLevelName,
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 6afe67f..6688e3e 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -141,7 +141,7 @@ onMounted(async () => {
                 <div class="row">
                   <q-select
                     dense
-                    class="col-12 col-sm-6 col-md-4 inputgreen"
+                    class="col-12 col-sm-9 col-md-6 inputgreen"
                     outlined
                     v-model="model"
                     :options="option"
@@ -170,7 +170,7 @@ onMounted(async () => {
 
                 <div class="row q-mt-sm">
                   <div
-                    class="col-12 col-sm-6 col-md-3"
+                    class="col-12 col-sm-6 col-md-4"
                     v-if="model === 'LV-006' || model === 'LV-008'"
                   >
                     <q-select
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index d37807b..73a5005 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -358,7 +358,7 @@ onMounted(async () => {
                   <q-select
                     readonly
                     dense
-                    class="col-12 col-sm-6 col-md-4"
+                    class="col-12 col-sm-9 col-md-6"
                     outlined
                     v-model="formData.leaveTypeName"
                     option-value="code"
@@ -370,7 +370,7 @@ onMounted(async () => {
                 </div>
                 <div class="row q-mt-sm">
                   <div
-                    class="col-12 col-sm-6 col-md-3"
+                    class="col-12 col-sm-6 col-md-4"
                     v-if="model === 'LV-006' || model === 'LV-008'"
                   >
                     <q-select

From 6e36c5ffd7b1fcf53b0bd8303048dce95be05a65 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 29 Apr 2025 09:41:49 +0700
Subject: [PATCH 074/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=A5=20=E0=B8=88=E0=B8=B3=E0=B8=99=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99=E0=B8=A7=E0=B8=B1=E0=B8=99=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/FormLeave/10_TrainForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 6b7ae52..46eec3c 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -182,7 +182,7 @@ async function fetchCheck() {
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
-      formDataTrain.leaveTotalDay = data.totalDate;
+      formDataTrain.leaveTotal = data.totalDate;
       leaveText.value = calculateDurationYmd(
         formDataTrain.leaveStartDate,
         formDataTrain.leaveEndDate

From 86104d2926ae712af636eb2303cf8456cd869300 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 29 Apr 2025 10:56:06 +0700
Subject: [PATCH 075/195] =?UTF-8?q?=E0=B8=94=E0=B8=B1=E0=B8=81=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20=E0=B9=83=E0=B8=AB?=
 =?UTF-8?q?=E0=B9=89=E0=B8=A1=E0=B8=B2=E0=B8=81=E0=B8=81=E0=B8=A7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=B2=200=20=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/views/Main.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 3e7f446..2516698 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -135,11 +135,14 @@ async function fetchStatsTable() {
                 : el.leaveTypeName === "ลากิจส่วนตัว"
                 ? "text-deep-purple"
                 : "text-indigo",
-            value: Math.round(
-              (Number(el.leaveCountApprove) /
-                (Number(el.leaveLimit) + Number(el.leaveExtend))) *
-                100
-            ),
+            value:
+              el.leaveLimit > 0 || el.leaveExtend > 0
+                ? Math.round(
+                    (Number(el.leaveCountApprove) /
+                      (Number(el.leaveLimit) + Number(el.leaveExtend))) *
+                      100
+                  )
+                : 0,
             all: Number(el.leaveLimit) + Number(el.leaveExtend),
             use: el.leaveCountApprove,
             remain:

From 704884b2014fb4ac4e449c2cf06371d3d59912c2 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 29 Apr 2025 21:09:30 +0700
Subject: [PATCH 076/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=94=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/components/DialogDetail.vue      | 26 ++++++++-----------
 .../components/formDetail/formCancel.vue      | 26 +++++++++++++------
 .../05_leave/interface/response/leave.ts      |  9 +++++--
 3 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 163ff1b..8139d16 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -158,8 +158,11 @@ const formDataCancle = reactive<FromCancelDetail>({
   leaveDetail: "",
   leaveSubTypeName: "",
   leaveTotal: 0,
-  leaveStartDate: new Date(),
-  leaveEndDate: new Date(),
+  leaveDateStart: new Date(),
+  leaveDateEnd: new Date(),
+  leaveRange: "",
+  leaveRangeEnd: "",
+  leaveDirectorComment: "",
 });
 
 /** form ขอยกเลิก*/
@@ -197,7 +200,8 @@ async function fetchDataDetail(id: string) {
       formData.dateSendLeave =
         data.dateSendLeave && date2Thai(data.dateSendLeave);
       formData.status = data.status ?? "-";
-      formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate);
+      formData.leaveDateStart =
+        data.leaveStartDate && date2Thai(data.leaveStartDate);
       formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
       formData.leaveCount = calculateDurationYmd(
         data.leaveStartDate,
@@ -269,11 +273,7 @@ async function fetchDataDetail(id: string) {
       formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
       formData.approveStep = data.approveStep ?? "-";
       formData.dear = data.dear ?? "-";
-      checkLeaveType(
-        formData.leaveTypeId,
-        formData.ordainDayLocationName,
-        formData.studyDayTrainingSubject
-      );
+      checkLeaveType(formData.leaveTypeId);
     })
     .catch((err) => {
       props.onClickClose?.();
@@ -289,11 +289,7 @@ async function fetchDataDetail(id: string) {
  * @param leaveTypeId  ประเภทการลา
  * @param leaveTypeName  ประเภทการลา
  */
-function checkLeaveType(
-  leaveTypeId: string,
-  ordainDayLocationName: string,
-  studyDayTrainingSubject: string
-) {
+function checkLeaveType(leaveTypeId: string) {
   if (props.leaveType) {
     const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
     const type = filtertype.code;
@@ -346,9 +342,9 @@ async function fetchDataCancelDetail(id: string) {
       formDataCancle.leaveWrote = data.leaveWrote ?? "-";
       formDataCancle.fullname = data.fullName ?? "-";
       formDataCancle.status = convertStatud(data.status) ?? "-";
-      formDataCancle.leaveStartDate =
+      formDataCancle.leaveDateStart =
         data.leaveStartDate && date2Thai(data.leaveStartDate);
-      formDataCancle.leaveEndDate =
+      formDataCancle.leaveDateEnd =
         data.leaveEndDate && date2Thai(data.leaveEndDate);
       formDataCancle.leaveTotal = data.leaveTotal ?? "-";
       formDataCancle.leaveAddress = data.leaveAddress ?? "-";
diff --git a/src/modules/05_leave/components/formDetail/formCancel.vue b/src/modules/05_leave/components/formDetail/formCancel.vue
index 40411b9..c43564e 100644
--- a/src/modules/05_leave/components/formDetail/formCancel.vue
+++ b/src/modules/05_leave/components/formDetail/formCancel.vue
@@ -39,12 +39,6 @@ const props = defineProps({
         {{ props.data.fullname ? props.data.fullname : "-" }}
       </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.status ? props.data.status : "-" }}
-      </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">
@@ -93,6 +87,12 @@ const props = defineProps({
         {{ props.data.leaveNumber ? props.data.leaveNumber : "-" }}
       </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.leaveDetail ? props.data.leaveDetail : "-" }}
+      </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">
@@ -100,9 +100,19 @@ const props = defineProps({
       </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 text-grey-8">สถานะการขอยกเลิก</div>
       <div class="col-xs-12 col-md-6">
-        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+        {{ props.data.status ? props.data.status : "-" }}
+      </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.leaveDirectorComment
+            ? props.data.leaveDirectorComment
+            : "-"
+        }}
       </div>
     </div>
     <div class="row">
diff --git a/src/modules/05_leave/interface/response/leave.ts b/src/modules/05_leave/interface/response/leave.ts
index 5df0e38..f45547d 100644
--- a/src/modules/05_leave/interface/response/leave.ts
+++ b/src/modules/05_leave/interface/response/leave.ts
@@ -105,8 +105,13 @@ interface FromCancelDetail {
   leaveNumber: String; //หมายเลขที่ติดต่อขณะลา
   leaveDetail: String; //รายละเอียดการลา
   leaveTotal: number; //จำนวนวันที่ลา
-  leaveStartDate: Date; //วัน เดือน ปีเริ่มต้นลา
-  leaveEndDate: Date; //วัน เดือน ปีสิ้นสุดลา
+  leaveStartDate?: Date; //วัน เดือน ปีเริ่มต้นลา
+  leaveEndDate?: Date; //วัน เดือน ปีสิ้นสุดลา
+  leaveDateStart?: Date;
+  leaveDateEnd?: Date; //วัน เดือน ปีสิ้นสุดลา
+  leaveRange?: string; //ช่วงการลา
+  leaveRangeEnd?: string; //ช่วงการลา
+  leaveDirectorComment?: string; //ความคิดเห็นของผู้บังคับบัญชา
 }
 
 interface FormDelete {

From 13bc2b2003b10820fb879f284d70ac0ce8272ba8 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 29 Apr 2025 22:09:30 +0700
Subject: [PATCH 077/195] =?UTF-8?q?fixing=20=E0=B8=A2=E0=B8=81=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B4=E0=B8=81=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/DialogDetail.vue          | 3 +++
 src/modules/05_leave/components/formDetail/formCancel.vue | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 8139d16..3d26510 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -353,6 +353,9 @@ async function fetchDataCancelDetail(id: string) {
       formDataCancle.leaveDetail = data.leaveDetail ?? "-";
       formDataCancle.leaveSubTypeName = data.leaveSubTypeName ?? null;
       formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
+      formDataCancle.leaveRange = data.leaveRange;
+      formDataCancle.leaveRangeEnd = data.leaveRangeEnd;
+      formDataCancle.leaveDirectorComment = data.leaveDirectorComment;
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/05_leave/components/formDetail/formCancel.vue b/src/modules/05_leave/components/formDetail/formCancel.vue
index c43564e..4444b9e 100644
--- a/src/modules/05_leave/components/formDetail/formCancel.vue
+++ b/src/modules/05_leave/components/formDetail/formCancel.vue
@@ -102,14 +102,14 @@ const props = defineProps({
     <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.status ? props.data.status : "-" }}
+        {{ props.data.status != "ใหม่" ? props.data.status : "-" }}
       </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.leaveDirectorComment
+          props.data.leaveDirectorComment && props.data.status != "ใหม่"
             ? props.data.leaveDirectorComment
             : "-"
         }}

From 3349d71906fd82cd8d69a3e29e2bcf368bb8a9fc Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 30 Apr 2025 10:08:56 +0700
Subject: [PATCH 078/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=99=E0=B8=A7=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/views/Main.vue | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 2516698..87cfde4 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -136,19 +136,14 @@ async function fetchStatsTable() {
                 ? "text-deep-purple"
                 : "text-indigo",
             value:
-              el.leaveLimit > 0 || el.leaveExtend > 0
+              el.leaveLimit > 0
                 ? Math.round(
-                    (Number(el.leaveCountApprove) /
-                      (Number(el.leaveLimit) + Number(el.leaveExtend))) *
-                      100
+                    (Number(el.leaveCountApprove) / Number(el.leaveLimit)) * 100
                   )
                 : 0,
-            all: Number(el.leaveLimit) + Number(el.leaveExtend),
+            all: Number(el.leaveLimit),
             use: el.leaveCountApprove,
-            remain:
-              Number(el.leaveLimit) +
-              Number(el.leaveExtend) -
-              Number(el.leaveCountApprove),
+            remain: Number(el.leaveLimit) - Number(el.leaveCountApprove),
           }));
       });
       stat.forEach((item) => itemPie.value.push(...item));

From 9af702f459d4cdd4e6e2c4afcafd9a12da71ea6a Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 30 Apr 2025 17:57:47 +0700
Subject: [PATCH 079/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/components/DialogDetail.vue      |  7 ++--
 .../components/FormLeave/07_HajjForm.vue      |  4 +--
 .../components/FormLeave/08_MilitaryForm.vue  |  4 +--
 .../components/FormLeave/09_StudyForm.vue     |  4 +--
 .../components/FormLeave/10_TrainForm.vue     |  4 +--
 .../FormLeave/11_WorkInternationalForm.vue    |  4 +--
 .../FormLeave/12_FollowSpouseForm.vue         |  6 ++--
 .../FormLeave/13_RehabilitationForm.vue       |  4 +--
 .../components/formDetail/09_StudyForm.vue    |  2 +-
 .../components/formDetail/10_TrainForm.vue    | 34 +++++++++++++++----
 src/modules/05_leave/store.ts                 |  6 ++--
 src/modules/05_leave/views/AddPage.vue        |  7 ++--
 src/modules/05_leave/views/EditPage.vue       |  7 ++--
 13 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 3d26510..1a37468 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -310,12 +310,13 @@ function checkLeaveType(leaveTypeId: string) {
       checkForm.value = "FormCheckSelect";
     } else if (
       type === "LV-008" &&
-      formData.leaveSubTypeName === "ลาไปศึกษาต่อ"
+      formData.leaveSubTypeName === "ศึกษาต่อ"
     ) {
       checkForm.value = "FormStudy";
     } else if (
-      type === "LV-008" &&
-      formData.leaveSubTypeName === "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน"
+      (type === "LV-008" && formData.leaveSubTypeName === "ฝึกอบรม") ||
+      (type === "LV-008" && formData.leaveSubTypeName === "ปฎิบัติการวิจัย") ||
+      (type === "LV-008" && formData.leaveSubTypeName === "ดูงาน")
     ) {
       checkForm.value = "FormLeaveToTraining";
     } else if (type === "LV-009") {
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index edfdff6..912597c 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -161,8 +161,8 @@ async function fetchCheck() {
       isLeave.value = data.isLeave;
       formDataHaji.leaveTotal = data.totalDate;
       leaveText.value = calculateDurationYmd(
-        formDataHaji.leaveStartDate,
-        formDataHaji.leaveEndDate
+        convertDateToAPI(formDataHaji.leaveStartDate),
+        convertDateToAPI(formDataHaji.leaveEndDate)
       );
       reasonLeave.value = data.message
         ? data.message
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index 6fe3ded..ba7af1b 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -184,8 +184,8 @@ async function fetchCheck() {
       isLeave.value = data.isLeave;
       formDataMilitary.leaveTotal = data.totalDate;
       leaveText.value = calculateDurationYmd(
-        formDataMilitary.leaveStartDate,
-        formDataMilitary.leaveEndDate
+        convertDateToAPI(formDataMilitary.leaveStartDate),
+        convertDateToAPI(formDataMilitary.leaveEndDate)
       );
       reasonLeave.value = data.message
         ? data.message
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 4abf949..0b3fc74 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -199,8 +199,8 @@ async function fetchCheck() {
       isLeave.value = data.isLeave;
       formDataStudy.leaveTotal = data.totalDate;
       leaveText.value = calculateDurationYmd(
-        formDataStudy.leaveStartDate,
-        formDataStudy.leaveEndDate
+        convertDateToAPI(formDataStudy.leaveStartDate),
+        convertDateToAPI(formDataStudy.leaveEndDate)
       );
       reasonLeave.value = data.message
         ? data.message
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 46eec3c..4b71237 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -184,8 +184,8 @@ async function fetchCheck() {
       isLeave.value = data.isLeave;
       formDataTrain.leaveTotal = data.totalDate;
       leaveText.value = calculateDurationYmd(
-        formDataTrain.leaveStartDate,
-        formDataTrain.leaveEndDate
+        convertDateToAPI(formDataTrain.leaveStartDate),
+        convertDateToAPI(formDataTrain.leaveEndDate)
       );
       reasonLeave.value = data.message
         ? data.message
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 682e0d3..6d2bc34 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -190,8 +190,8 @@ async function fetchCheck() {
       formDataWorkInternational.leaveTotal = data.totalDate;
 
       leaveText.value = calculateDurationYmd(
-        formDataWorkInternational.leaveStartDate,
-        formDataWorkInternational.leaveEndDate
+        convertDateToAPI(formDataWorkInternational.leaveStartDate),
+        convertDateToAPI(formDataWorkInternational.leaveEndDate)
       );
       reasonLeave.value = data.message
         ? data.message
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 0328139..141c2a8 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -220,10 +220,10 @@ async function fetchCheck() {
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
-      formDataFollowSpouse.leaveTotalDay = data.totalDate;
+      formDataFollowSpouse.leaveTotal = data.totalDate;
       leaveText.value = calculateDurationYmd(
-        formDataFollowSpouse.leaveStartDate,
-        formDataFollowSpouse.leaveEndDate
+        convertDateToAPI(formDataFollowSpouse.leaveStartDate),
+        convertDateToAPI(formDataFollowSpouse.leaveEndDate)
       );
       reasonLeave.value = data.message
         ? data.message
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index 4bf8adb..6e08aab 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -148,8 +148,8 @@ async function fetchCheck() {
       isLeave.value = data.isLeave;
       formDataRehabilitation.leaveTotal = data.totalDate;
       leaveText.value = calculateDurationYmd(
-        formDataRehabilitation.leaveStartDate,
-        formDataRehabilitation.leaveEndDate
+        convertDateToAPI(formDataRehabilitation.leaveStartDate),
+        convertDateToAPI(formDataRehabilitation.leaveEndDate)
       );
 
       reasonLeave.value = data.message
diff --git a/src/modules/05_leave/components/formDetail/09_StudyForm.vue b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
index 3f2cdb4..3a6c7af 100644
--- a/src/modules/05_leave/components/formDetail/09_StudyForm.vue
+++ b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
@@ -22,7 +22,7 @@ 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">ลาไปศึกษาต่อ</div>
+      <div class="col-xs-12 col-md-6">ศึกษาต่อ</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
diff --git a/src/modules/05_leave/components/formDetail/10_TrainForm.vue b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
index 5096c27..e9ea16d 100644
--- a/src/modules/05_leave/components/formDetail/10_TrainForm.vue
+++ b/src/modules/05_leave/components/formDetail/10_TrainForm.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
  */
@@ -21,7 +21,7 @@ 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">ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน</div>
+      <div class="col-xs-12 col-md-6">{{ props.data.leaveSubTypeName }}</div>
     </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
@@ -29,11 +29,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>
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index d280ef1..638de68 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -184,8 +184,10 @@ export const useLeaveStore = defineStore("Leave", () => {
   }
   /** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
   const optionsSpecific = ref<string[]>([
-    "ลาไปศึกษาต่อ",
-    "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน",
+    "ศึกษาต่อ",
+    "ฝึกอบรม",
+    "ปฎิบัติการวิจัย",
+    "ดูงาน",
   ]);
 
   /** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์*/
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 6688e3e..76f6dc0 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -235,14 +235,15 @@ onMounted(async () => {
                 :on-submit="onSubmit"
               />
               <StudyForm
-                v-if="model === 'LV-008' && modelSpecific === 'ลาไปศึกษาต่อ'"
+                v-if="model === 'LV-008' && modelSpecific === 'ศึกษาต่อ'"
                 style="width: 100%"
                 :on-submit="onSubmit"
               />
               <TrainForm
                 v-if="
-                  model === 'LV-008' &&
-                  modelSpecific == 'ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน'
+                  (model === 'LV-008' && modelSpecific == 'ฝึกอบรม') ||
+                  (model === 'LV-008' && modelSpecific == 'ปฎิบัติการวิจัย') ||
+                  (model === 'LV-008' && modelSpecific == 'ดูงาน')
                 "
                 :on-submit="onSubmit"
               />
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 73a5005..6f2c64a 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -465,7 +465,7 @@ onMounted(async () => {
                 :click-delete="clickDelete"
               />
               <StudyForm
-                v-if="model === 'LV-008' && modelSpecific === 'ลาไปศึกษาต่อ'"
+                v-if="model === 'LV-008' && modelSpecific === 'ศึกษาต่อ'"
                 style="width: 100%"
                 :data="formData"
                 :on-submit="onSubmit"
@@ -474,8 +474,9 @@ onMounted(async () => {
               />
               <TrainForm
                 v-if="
-                  model === 'LV-008' &&
-                  modelSpecific == 'ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน'
+                  (model === 'LV-008' && modelSpecific == 'ฝึกอบรม') ||
+                  (model === 'LV-008' && modelSpecific == 'ปฎิบัติการวิจัย') ||
+                  (model === 'LV-008' && modelSpecific == 'ดูงาน')
                 "
                 :data="formData"
                 :on-submit="onSubmit"

From b936c356ec7f56dfc516509376c3c8c1ffc75aee Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 1 May 2025 09:36:15 +0700
Subject: [PATCH 080/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20=E0=B8=A7=E0=B8=B1=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/formDetail/formCancel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_leave/components/formDetail/formCancel.vue b/src/modules/05_leave/components/formDetail/formCancel.vue
index 4444b9e..a389647 100644
--- a/src/modules/05_leave/components/formDetail/formCancel.vue
+++ b/src/modules/05_leave/components/formDetail/formCancel.vue
@@ -72,7 +72,7 @@ const props = defineProps({
     <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.leaveTotal ? props.data.leaveTotal : "-" }}
+        {{ props.data.leaveTotal ? props.data.leaveTotal + ` วัน` : "-" }}
       </div>
     </div>
     <div class="row">

From 6b0a091405a876187c9b0766b2caf27b274ab34e Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 1 May 2025 11:46:00 +0700
Subject: [PATCH 081/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20coupleDaySumTotalHistory?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FormLeave/12_FollowSpouseForm.vue         | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 141c2a8..19c0109 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -77,6 +77,7 @@ const formDataFollowSpouse = reactive<any>({
   coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
   coupleDayCountryHistory: "", //ประวัติการลาติดตามคู่สมรส
   coupleDayTotalHistory: null,
+  coupleDaySumTotalHistory: null,
   coupleDayStartDateHistory: null,
   coupleDayEndDateHistory: null,
   leaveDetail:
@@ -175,6 +176,10 @@ function onValidate() {
       "coupleDayTotalHistory",
       formDataFollowSpouse.coupleDayTotalHistory
     ); //
+    formData.append(
+      "coupleDaySumTotalHistory",
+      formDataFollowSpouse.coupleDaySumTotalHistory
+    ); //
     formData.append(
       "coupleDayCountryHistory",
       formDataFollowSpouse.coupleDayCountryHistory
@@ -258,8 +263,23 @@ function updateLeaveHistoryTotal() {
     formDataFollowSpouse.coupleDayEndDateHistory
   );
   formDataFollowSpouse.coupleDayTotalHistory = newLeaveTotal;
+  checkTotalHistory();
 }
 
+function checkTotalHistory() {
+  if (
+    formDataFollowSpouse.coupleDayStartDateHistory &&
+    formDataFollowSpouse.coupleDayEndDateHistory
+  ) {
+    const start = new Date(formDataFollowSpouse.coupleDayStartDateHistory);
+    const end = new Date(formDataFollowSpouse.coupleDayEndDateHistory);
+    const msInDay = 1000 * 60 * 60 * 24;
+    const diffTime = end.getTime() - start.getTime();
+    const diffDays = Math.abs(Math.ceil(diffTime / msInDay)) + 1;
+    formDataFollowSpouse.coupleDaySumTotalHistory =
+      diffDays + formDataFollowSpouse.leaveTotal;
+  }
+}
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -282,6 +302,8 @@ watch(props.data, async () => {
     formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
     formDataFollowSpouse.leaveRange = props.data.leaveRange;
     formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
+    formDataFollowSpouse.coupleDaySumTotalHistory =
+      props.data.coupleDaySumTotalHistory;
     formDataFollowSpouse.coupleDayLevelCountry =
       props.data.coupleDayLevelCountry;
     formDataFollowSpouse.coupleDayCountryHistory =
@@ -323,6 +345,8 @@ onMounted(async () => {
 
     formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
     formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
+    formDataFollowSpouse.coupleDaySumTotalHistory =
+      props.data.coupleDaySumTotalHistory;
     formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
     formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
     formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;

From 5851010d40fac952921afbe362b3dddde44270e7 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 1 May 2025 13:21:57 +0700
Subject: [PATCH 082/195] =?UTF-8?q?=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=20=E0=B8=9F=E0=B8=B4=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/components/formDetail/13_RehabilitationForm.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
index 668b7d6..2398a24 100644
--- a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
@@ -51,7 +51,7 @@ const props = defineProps({
       <div class="col-xs-12 col-md-6 text-grey-8">เอกสารประกอบ</div>
       <div class="col-xs-12 col-md-6" v-if="props.data.leaveDocument">
         <q-btn
-          :href="props.data.leaveDocument"
+          :href="props.data.leaveDraftDocument"
           target="_blank"
           outline
           color="blue"

From e12da05ffe0561b2ee8f1240bf90703e9a8b69b3 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 1 May 2025 15:15:52 +0700
Subject: [PATCH 083/195] =?UTF-8?q?=E0=B8=9F=E0=B8=B4=E0=B8=A5=E0=B9=80?=
 =?UTF-8?q?=E0=B8=95=E0=B8=AD=E0=B8=A3=E0=B9=8C=20store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/components/FormLeave/12_FollowSpouseForm.vue    | 5 +++--
 src/modules/05_leave/components/ListView.vue                 | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 19c0109..a41e91f 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -233,6 +233,7 @@ async function fetchCheck() {
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
+      checkTotalHistory();
       hideLoader();
     })
     .catch((e: any) => {
@@ -315,7 +316,7 @@ watch(props.data, async () => {
     formDataFollowSpouse.coupleDayEndDateHistory =
       props.data.coupleDayEndDateHistory;
     leaveDocumentList.value = props.data.leaveDocument;
-
+    checkTotalHistory();
     const leaveTotal = await calculateDurationYmd(
       props.data.leaveStartDate,
       props.data.leaveEndDate
@@ -361,7 +362,7 @@ onMounted(async () => {
     formDataFollowSpouse.coupleDayEndDateHistory =
       props.data.coupleDayEndDateHistory;
     leaveDocumentList.value = props.data.leaveDocument;
-
+    checkTotalHistory();
     const leaveTotal = await calculateDurationYmd(
       props.data.leaveStartDate,
       props.data.leaveEndDate
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index ce4c666..9c0df62 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -41,8 +41,8 @@ async function fetchDataTable() {
   showLoader();
   const body = {
     year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
-    type: type.value, //*Id ประเภทการลา
-    status: status.value, //*สถานะการของลา
+    type: LeaveData.type, //*Id ประเภทการลา
+    status: LeaveData.status, //*สถานะการของลา
     page: page.value.toString(), //*หน้า
     pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
     keyword: filter.value, //keyword ค้นหา

From 45fdb9c8b8b92a66414b26bca558b5399f7cee07 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 1 May 2025 17:06:06 +0700
Subject: [PATCH 084/195] =?UTF-8?q?=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/ListView.vue | 4 +++-
 src/modules/05_leave/components/Table.vue    | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index 9c0df62..af64c6c 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -35,7 +35,7 @@ const filter = ref<string>("");
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const pageSize = ref<number>(10);
-
+const total = ref<number>(0)
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
   showLoader();
@@ -53,6 +53,7 @@ async function fetchDataTable() {
       const data = res.data.result.data;
       LeaveData.fetchListLeave(data);
       maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
+      total.value = res.data.result.total;
     })
     .catch((err) => {
       messageError($q, err);
@@ -187,6 +188,7 @@ onMounted(async () => {
     :maxPage="maxPage"
     :pageSize="pageSize"
     :leaveType="leaveType"
+    :total="total"
   >
     <template #columns="props">
       <q-tr :props="props" class="cursor-pointer">
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index eed96f0..1ec87de 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -14,6 +14,7 @@ const props = defineProps({
   count: Number,
   pass: Number,
   notpass: Number,
+  total: Number,
 
   name: String,
   icon: String,
@@ -252,6 +253,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         </q-tr>
       </template>
       <template v-slot:pagination="scope">
+        ทั้งหมด {{ props.total }} รายการ
         <q-pagination
           v-model="currentPage"
           active-color="primary"

From ba63d258270668da5a94056e7fe4420ab865f05c Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 2 May 2025 11:23:18 +0700
Subject: [PATCH 085/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20dissable=20=E0=B8=88=E0=B8=B3=E0=B8=99=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99=E0=B8=A7=E0=B8=B1=E0=B8=99=E0=B8=A5=E0=B8=B2=20=3D=20?=
 =?UTF-8?q?0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/components/FormLeave/01_SickForm.vue    |  7 +++++++
 .../05_leave/components/FormLeave/03_Birth.vue       |  7 +++++++
 .../components/FormLeave/04_HelpWifeBirthForm.vue    |  7 +++++++
 .../components/FormLeave/05_VacationForm.vue         | 12 +++++++++---
 .../components/FormLeave/06_OrdinationForm.vue       |  7 +++++++
 .../05_leave/components/FormLeave/07_HajjForm.vue    |  7 +++++++
 .../components/FormLeave/08_MilitaryForm.vue         |  7 +++++++
 .../05_leave/components/FormLeave/09_StudyForm.vue   |  7 +++++++
 .../05_leave/components/FormLeave/10_TrainForm.vue   |  7 +++++++
 .../FormLeave/11_WorkInternationalForm.vue           |  8 +++++++-
 .../components/FormLeave/12_FollowSpouseForm.vue     |  7 +++++++
 .../components/FormLeave/13_RehabilitationForm.vue   |  7 +++++++
 12 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 21eecf0..70fe533 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -165,6 +165,7 @@ const checkDate = computed(() => {
   }
 });
 
+const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   showLoader();
   await http
@@ -181,6 +182,7 @@ async function fetchCheck() {
       const data = res.data.result;
       formDataSick.leaveTotal =
         data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        totalCheck.value = data.totalDate - data.sumDateWork - data.sumDateHoliday;
       isLeave.value = data.isLeave;
       reasonLeave.value = data.message
         ? data.message
@@ -188,6 +190,7 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      totalCheck.value = null
       hideLoader();
     })
     .finally(() => {
@@ -206,6 +209,7 @@ const leaveId = ref<any>("");
 const statusCheck = ref<any>("");
 watch(props.data, () => {
   if (props.data) {
+    totalCheck.value = null
     formDataSick.leaveWrote = props.data.leaveWrote;
     formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -223,6 +227,7 @@ watch(props.data, () => {
 /** Hook */
 onMounted(() => {
   if (props.data) {
+    totalCheck.value = null
     formDataSick.leaveWrote = props.data.leaveWrote;
     formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -622,6 +627,7 @@ onMounted(() => {
     <q-separator class="q-mt-sm" />
 
     <q-card-actions align="right" class="bg-white text-teal q-pa-none q-pt-sm">
+      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -629,6 +635,7 @@ onMounted(() => {
         unelevated
         class="q-px-md items-center btnBlue"
         label="บันทึก"
+        :disable="totalCheck == 0"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index d851308..e689e11 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -149,6 +149,7 @@ const checkDate = computed(() => {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
+ const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   showLoader();
   await http
@@ -166,12 +167,14 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataBirth.leaveTotal = data.totalDate;
+      totalCheck.value = data.totalDate;
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
     })
     .catch((e: any) => {
       hideLoader();
+      totalCheck.value = null
       messageError($q, e);
     });
 }
@@ -186,6 +189,7 @@ const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 watch(props.data, () => {
   if (props.data) {
+    totalCheck.value = null
     formDataBirth.leaveWrote = props.data.leaveWrote;
     formDataBirth.leaveStartDate = props.data.leaveStartDate;
     formDataBirth.leaveEndDate = props.data.leaveEndDate;
@@ -201,6 +205,7 @@ watch(props.data, () => {
 /** Hook */
 onMounted(() => {
   if (props.data) {
+    totalCheck.value = null
     formDataBirth.leaveWrote = props.data.leaveWrote;
     formDataBirth.leaveStartDate = props.data.leaveStartDate;
     formDataBirth.leaveEndDate = props.data.leaveEndDate;
@@ -572,12 +577,14 @@ onMounted(() => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
+      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
         dense
+        :disable="totalCheck == 0"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index 590f2ea..687aace 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -165,6 +165,7 @@ const checkDate = computed(() => {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
+ const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   showLoader();
   await http
@@ -182,6 +183,7 @@ async function fetchCheck() {
       isLeave.value = data.isLeave;
       formDataHelpWife.leaveTotal =
         data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        totalCheck.value = data.totalDate - data.sumDateWork - data.sumDateHoliday;
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
@@ -189,6 +191,7 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      totalCheck.value = null
       hideLoader();
     });
 }
@@ -197,6 +200,7 @@ async function fetchCheck() {
 
 watch(props.data, async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
     formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@@ -215,6 +219,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
     formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@@ -638,12 +643,14 @@ onMounted(async () => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
+      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
         dense
+        :disable="totalCheck == 0"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 2c6730d..13b6f0a 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -164,6 +164,7 @@ const checkDate = computed(() => {
   }
 });
 
+const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   showLoader();
   await http
@@ -179,8 +180,8 @@ async function fetchCheck() {
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
-      formDataVacation.leaveTotal =
-        data.totalDate - data.sumDateWork - data.sumDateHoliday;
+      formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday;
+      totalCheck.value = data.totalDate - data.sumDateWork - data.sumDateHoliday;
 
       reasonLeave.value = data.message
         ? data.message
@@ -189,6 +190,7 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      totalCheck.value = null
       hideLoader();
     });
 }
@@ -208,6 +210,7 @@ function resetDate() {
 
 watch(props.data, () => {
   if (props.data) {
+    totalCheck.value = null
     formDataVacation.leaveWrote = props.data.leaveWrote;
     formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
     formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
@@ -227,6 +230,7 @@ watch(props.data, () => {
 /**Hook */
 onMounted(() => {
   if (props.data) {
+    totalCheck.value = null
     formDataVacation.leaveWrote = props.data.leaveWrote;
     formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
     formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
@@ -628,14 +632,16 @@ onMounted(() => {
     </q-card>
 
     <q-separator class="q-mt-sm" />
-    <div class="row col-12 q-pt-md">
+    <div class="row col-12 q-pt-md items-center">
       <q-space />
+      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
         dense
+        :disable="totalCheck == 0"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index d32430f..f1a00d5 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -182,6 +182,7 @@ const checkDate = computed(() => {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
+ const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   showLoader();
   await http
@@ -199,6 +200,7 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataOrdination.leaveTotal = data.totalDate;
+      totalCheck.value = data.totalDate;
       reasonLeave.value = data.message
         ? data.message
         : "จำนวนวันลาเกินที่กำหนด";
@@ -206,6 +208,7 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      totalCheck.value = null
       hideLoader();
     });
 }
@@ -221,6 +224,7 @@ const statusCheck = ref<string>("");
 
 watch(props.data, async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataOrdination.leaveWrote = props.data.leaveWrote;
     formDataOrdination.leaveStartDate = props.data.leaveStartDate;
     formDataOrdination.leaveEndDate = props.data.leaveEndDate;
@@ -248,6 +252,7 @@ watch(props.data, async () => {
 /** Hook */
 onMounted(async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataOrdination.leaveWrote = props.data.leaveWrote;
     formDataOrdination.leaveStartDate = props.data.leaveStartDate;
     formDataOrdination.leaveEndDate = props.data.leaveEndDate;
@@ -826,6 +831,7 @@ onMounted(async () => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
+      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -834,6 +840,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
+        :disable="totalCheck == 0"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index 912597c..406a5d0 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -144,6 +144,7 @@ const checkDate = computed(() => {
   }
 });
 
+const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   showLoader();
   await http
@@ -160,6 +161,7 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataHaji.leaveTotal = data.totalDate;
+      totalCheck.value = data.totalDate;
       leaveText.value = calculateDurationYmd(
         convertDateToAPI(formDataHaji.leaveStartDate),
         convertDateToAPI(formDataHaji.leaveEndDate)
@@ -171,6 +173,7 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      totalCheck.value = null
       hideLoader();
     });
 }
@@ -185,6 +188,7 @@ const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 watch(props.data, async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataHaji.leaveWrote = props.data.leaveWrote;
     formDataHaji.leaveTotal = props.data.leaveTotal;
     formDataHaji.leaveStartDate = props.data.leaveStartDate;
@@ -202,6 +206,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataHaji.leaveWrote = props.data.leaveWrote;
     formDataHaji.leaveTotal = props.data.leaveTotal;
     formDataHaji.leaveStartDate = props.data.leaveStartDate;
@@ -571,6 +576,7 @@ onMounted(async () => {
     <q-separator class="q-mt-sm" />
     <div class="row col-12 q-pt-md">
       <q-space />
+      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -579,6 +585,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
+        :disable="totalCheck == 0"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index ba7af1b..012977d 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -167,6 +167,7 @@ const checkDate = computed(() => {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
+ const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   showLoader();
   await http
@@ -183,6 +184,7 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataMilitary.leaveTotal = data.totalDate;
+      totalCheck.value = data.totalDate;
       leaveText.value = calculateDurationYmd(
         convertDateToAPI(formDataMilitary.leaveStartDate),
         convertDateToAPI(formDataMilitary.leaveEndDate)
@@ -194,6 +196,7 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      totalCheck.value = null
       hideLoader();
     });
 }
@@ -211,6 +214,7 @@ function updateLeaveTotal() {
 
 watch(props.data, async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataMilitary.leaveWrote = props.data.leaveWrote;
     formDataMilitary.leaveStartDate = props.data.leaveStartDate;
     formDataMilitary.leaveEndDate = props.data.leaveEndDate;
@@ -237,6 +241,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataMilitary.leaveWrote = props.data.leaveWrote;
     formDataMilitary.leaveStartDate = props.data.leaveStartDate;
     formDataMilitary.leaveEndDate = props.data.leaveEndDate;
@@ -661,6 +666,7 @@ onMounted(async () => {
     <q-separator class="q-mt-sm" />
     <div class="row col-12 q-pt-md">
       <q-space />
+      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -669,6 +675,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
+        :disable="totalCheck == 0"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 0b3fc74..f91f248 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -182,6 +182,7 @@ const checkDate = computed(() => {
   }
 });
 
+const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   showLoader();
   await http
@@ -198,6 +199,7 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataStudy.leaveTotal = data.totalDate;
+      totalCheck.value = data.totalDate;
       leaveText.value = calculateDurationYmd(
         convertDateToAPI(formDataStudy.leaveStartDate),
         convertDateToAPI(formDataStudy.leaveEndDate)
@@ -209,6 +211,7 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      totalCheck.value = null
       hideLoader();
     });
 }
@@ -227,6 +230,7 @@ function updateLeaveTotal() {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataStudy.leaveWrote = props.data.leaveWrote;
     formDataStudy.leaveStartDate = props.data.leaveStartDate;
     formDataStudy.leaveEndDate = props.data.leaveEndDate;
@@ -258,6 +262,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataStudy.leaveWrote = props.data.leaveWrote;
     formDataStudy.leaveStartDate = props.data.leaveStartDate;
     formDataStudy.leaveEndDate = props.data.leaveEndDate;
@@ -816,6 +821,7 @@ onMounted(async () => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
+      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -824,6 +830,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
+        :disable="totalCheck == 0"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 4b71237..8e518a3 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -167,6 +167,7 @@ const checkDate = computed(() => {
   }
 });
 
+const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   showLoader();
   await http
@@ -183,6 +184,7 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataTrain.leaveTotal = data.totalDate;
+      totalCheck.value = data.totalDate;
       leaveText.value = calculateDurationYmd(
         convertDateToAPI(formDataTrain.leaveStartDate),
         convertDateToAPI(formDataTrain.leaveEndDate)
@@ -193,6 +195,7 @@ async function fetchCheck() {
       hideLoader();
     })
     .catch((e: any) => {
+      totalCheck.value = null
       messageError($q, e);
       hideLoader();
     });
@@ -211,6 +214,7 @@ function updateLeaveTotal() {
 
 watch(props.data, async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataTrain.leaveWrote = props.data.leaveWrote;
     formDataTrain.leaveStartDate = props.data.leaveStartDate;
     formDataTrain.leaveEndDate = props.data.leaveEndDate;
@@ -240,6 +244,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataTrain.leaveWrote = props.data.leaveWrote;
     formDataTrain.leaveStartDate = props.data.leaveStartDate;
     formDataTrain.leaveEndDate = props.data.leaveEndDate;
@@ -776,6 +781,7 @@ onMounted(async () => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
+      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -784,6 +790,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
+        :disable="totalCheck == 0"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 6d2bc34..72db237 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -171,6 +171,7 @@ const checkDate = computed(() => {
  * @param formData
  */
 const isLeave = ref<boolean>(true);
+  const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
@@ -188,7 +189,7 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataWorkInternational.leaveTotal = data.totalDate;
-
+      totalCheck.value = data.totalDate;
       leaveText.value = calculateDurationYmd(
         convertDateToAPI(formDataWorkInternational.leaveStartDate),
         convertDateToAPI(formDataWorkInternational.leaveEndDate)
@@ -198,6 +199,7 @@ async function fetchCheck() {
         : "จำนวนวันลาเกินที่กำหนด";
     })
     .catch((e: any) => {
+      totalCheck.value = null
       messageError($q, e);
     });
 }
@@ -214,6 +216,7 @@ const statusCheck = ref<string>("");
 
 watch(props, async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
     formDataWorkInternational.leaveStartDate = new Date(
       props.data.leaveStartDate
@@ -251,6 +254,7 @@ watch(
 /**Hook */
 onMounted(async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
 
     formDataWorkInternational.leaveRange = props.data.leaveRange;
@@ -626,6 +630,7 @@ onMounted(async () => {
       <q-separator class="q-mt-sm" />
       <div class="row col-12 q-pt-md">
         <q-space />
+        <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
         <q-btn
           v-if="!props.data || props.data.status == 'DRAFT'"
           id="onSubmit"
@@ -634,6 +639,7 @@ onMounted(async () => {
           dense
           class="q-px-md items-center btnBlue"
           label="บันทึก"
+          :disable="totalCheck == 0"
           ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
         >
         <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index a41e91f..b8feb22 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -209,6 +209,7 @@ const reasonLeave = ref<string>("");
  * @param formData
  */
 const isLeave = ref<boolean>(true);
+const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
   showLoader();
   await http
@@ -226,6 +227,7 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataFollowSpouse.leaveTotal = data.totalDate;
+      totalCheck.value = data.totalDate;
       leaveText.value = calculateDurationYmd(
         convertDateToAPI(formDataFollowSpouse.leaveStartDate),
         convertDateToAPI(formDataFollowSpouse.leaveEndDate)
@@ -238,6 +240,7 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      totalCheck.value = null
       hideLoader();
     });
 }
@@ -291,6 +294,7 @@ const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 watch(props.data, async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
     formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -336,6 +340,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
     formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -914,6 +919,7 @@ onMounted(async () => {
     <q-separator class="q-mt-sm" />
     <div class="row col-12 q-pt-md">
       <q-space />
+      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -922,6 +928,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
+        :disable="totalCheck == 0"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index 6e08aab..8e72003 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -129,6 +129,7 @@ const checkDate = computed(() => {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
+ const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
   showLoader();
   await http
@@ -147,6 +148,7 @@ async function fetchCheck() {
       const data = res.data.result;
       isLeave.value = data.isLeave;
       formDataRehabilitation.leaveTotal = data.totalDate;
+      totalCheck.value = data.totalDate;
       leaveText.value = calculateDurationYmd(
         convertDateToAPI(formDataRehabilitation.leaveStartDate),
         convertDateToAPI(formDataRehabilitation.leaveEndDate)
@@ -158,6 +160,7 @@ async function fetchCheck() {
     })
     .catch((e: any) => {
       messageError($q, e);
+      totalCheck.value = null
     })
     .finally(() => {
       hideLoader();
@@ -192,6 +195,7 @@ const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
 watch(props.data, async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -214,6 +218,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
+    totalCheck.value = null
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -581,6 +586,7 @@ onMounted(async () => {
       <q-separator class="q-mt-sm" />
       <div class="row col-12 q-pt-md">
         <q-space />
+        <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
         <q-btn
           v-if="!props.data || props.data.status == 'DRAFT'"
           id="onSubmit"
@@ -589,6 +595,7 @@ onMounted(async () => {
           dense
           class="q-px-md items-center btnBlue"
           label="บันทึก"
+          :disable="totalCheck == 0"
           ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
         >
         <q-btn

From 4320ef42ddecd7916e68d8d72edefc1017fd2780 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 2 May 2025 18:40:48 +0700
Subject: [PATCH 086/195] fixing message select date 0 day

---
 .../components/FormLeave/01_SickForm.vue      | 91 +++++++++---------
 .../components/FormLeave/03_Birth.vue         | 78 ++++++++++------
 .../FormLeave/04_HelpWifeBirthForm.vue        | 71 +++++++-------
 .../components/FormLeave/05_VacationForm.vue  | 81 ++++++++--------
 .../FormLeave/06_OrdinationForm.vue           | 70 +++++++-------
 .../components/FormLeave/07_HajjForm.vue      | 76 ++++++++-------
 .../components/FormLeave/08_MilitaryForm.vue  | 93 ++++++++++---------
 .../components/FormLeave/09_StudyForm.vue     | 92 +++++++++---------
 .../components/FormLeave/10_TrainForm.vue     | 72 +++++++-------
 .../FormLeave/11_WorkInternationalForm.vue    | 73 ++++++++-------
 .../FormLeave/12_FollowSpouseForm.vue         | 91 +++++++++---------
 .../FormLeave/13_RehabilitationForm.vue       | 81 ++++++++--------
 src/stores/mixin.ts                           |  2 +-
 13 files changed, 504 insertions(+), 467 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 70fe533..63e77e3 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -93,19 +93,6 @@ async function fileUploadDoc(files: any) {
   });
 }
 
-/**
- * function รีเซทค่า leaveStartDate เเละ leaveEndDate
- */
-function resetDate() {
-  if (
-    formDataSick.leaveRange === "MORNING" ||
-    formDataSick.leaveRange === "AFTERNOON"
-  ) {
-    formDataSick.leaveStartDate = null;
-    formDataSick.leaveEndDate = null;
-  }
-}
-
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
   const hasError = [];
@@ -165,38 +152,44 @@ const checkDate = computed(() => {
   }
 });
 
-const totalCheck = ref<number|null>(null)
+// const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
-  showLoader();
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataSick.leaveStartDate) ?? null,
-      EndLeaveDate: convertDateToAPI(formDataSick.leaveEndDate) ?? null,
-      leaveRange: formDataSick.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataSick.leaveRange
-        : formDataSick.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      formDataSick.leaveTotal =
-        data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        totalCheck.value = data.totalDate - data.sumDateWork - data.sumDateHoliday;
-      isLeave.value = data.isLeave;
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-      totalCheck.value = null
-      hideLoader();
-    })
-    .finally(() => {
-      hideLoader();
-      leaveDocumentRef.value.resetValidation();
-    });
+  if (formDataSick.leaveStartDate && formDataSick.leaveEndDate) {
+    showLoader();
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate: convertDateToAPI(formDataSick.leaveStartDate) ?? null,
+        EndLeaveDate: convertDateToAPI(formDataSick.leaveEndDate) ?? null,
+        leaveRange: formDataSick.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataSick.leaveRange
+          : formDataSick.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        const data = res.data.result;
+        formDataSick.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // totalCheck.value =
+        //   data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        reasonLeave.value =
+          data.message != ""
+            ? data.message
+            : formDataSick.leaveTotal > 0
+            ? "จำนวนวันลาเกินที่กำหนด"
+            : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
+        isLeave.value = formDataSick.leaveTotal > 0 ? data.isLeave : false;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        // totalCheck.value = null;
+        hideLoader();
+      })
+      .finally(() => {
+        hideLoader();
+        leaveDocumentRef.value.resetValidation();
+      });
+  }
 }
 
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
@@ -209,7 +202,7 @@ const leaveId = ref<any>("");
 const statusCheck = ref<any>("");
 watch(props.data, () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataSick.leaveWrote = props.data.leaveWrote;
     formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -227,7 +220,7 @@ watch(props.data, () => {
 /** Hook */
 onMounted(() => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataSick.leaveWrote = props.data.leaveWrote;
     formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -627,15 +620,17 @@ onMounted(() => {
     <q-separator class="q-mt-sm" />
 
     <q-card-actions align="right" class="bg-white text-teal q-pa-none q-pt-sm">
-      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">
+        **จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด
+      </div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
+        :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        :disable="totalCheck == 0"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index e689e11..b10b05b 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -149,34 +149,52 @@ const checkDate = computed(() => {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
- const totalCheck = ref<number|null>(null)
+// const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
-  showLoader();
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataBirth.leaveStartDate) ?? null,
-      EndLeaveDate: convertDateToAPI(formDataBirth.leaveEndDate) ?? null,
-      leaveRange: formDataBirth.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataBirth.leaveRange
-        : formDataBirth.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      hideLoader();
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      formDataBirth.leaveTotal = data.totalDate;
-      totalCheck.value = data.totalDate;
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-    })
-    .catch((e: any) => {
-      hideLoader();
-      totalCheck.value = null
-      messageError($q, e);
+  if (formDataBirth.leaveStartDate && formDataBirth.leaveEndDate) {
+    showLoader();
+    const checkDate = computed(() => {
+      if (
+        convertDateToAPI(formDataBirth.leaveEndDate) ==
+        convertDateToAPI(formDataBirth.leaveStartDate)
+      ) {
+        return true;
+      } else {
+        return false;
+      }
     });
+    // console.log("checkDate.value", checkDate.value);
+    // console.log("formDataBirth.leaveRangeEnd", formDataBirth.leaveRangeEnd);
+    // console.log("formDataBirth.leaveRange", formDataBirth.leaveRange);
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate: convertDateToAPI(formDataBirth.leaveStartDate) ?? null,
+        EndLeaveDate: convertDateToAPI(formDataBirth.leaveEndDate) ?? null,
+        leaveRange: formDataBirth.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataBirth.leaveRange
+          : formDataBirth.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        hideLoader();
+        const data = res.data.result;
+        formDataBirth.leaveTotal = data.totalDate;
+        // totalCheck.value = data.totalDate;
+        reasonLeave.value =
+          data.message != ""
+            ? data.message
+            : formDataBirth.leaveTotal > 0
+            ? "จำนวนวันลาเกินที่กำหนด"
+            : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
+        isLeave.value = formDataBirth.leaveTotal > 0 ? data.isLeave : false;
+      })
+      .catch((e: any) => {
+        hideLoader();
+        // totalCheck.value = null;
+        messageError($q, e);
+      });
+  }
 }
 
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
@@ -189,7 +207,7 @@ const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 watch(props.data, () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataBirth.leaveWrote = props.data.leaveWrote;
     formDataBirth.leaveStartDate = props.data.leaveStartDate;
     formDataBirth.leaveEndDate = props.data.leaveEndDate;
@@ -205,7 +223,7 @@ watch(props.data, () => {
 /** Hook */
 onMounted(() => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataBirth.leaveWrote = props.data.leaveWrote;
     formDataBirth.leaveStartDate = props.data.leaveStartDate;
     formDataBirth.leaveEndDate = props.data.leaveEndDate;
@@ -577,14 +595,14 @@ onMounted(() => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
-      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
         dense
-        :disable="totalCheck == 0"
+        :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index 687aace..358ef09 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -165,42 +165,49 @@ const checkDate = computed(() => {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
- const totalCheck = ref<number|null>(null)
+// const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
-  showLoader();
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataHelpWife.leaveStartDate) ?? null,
-      EndLeaveDate: convertDateToAPI(formDataHelpWife.leaveEndDate) ?? null,
-      leaveRange: formDataHelpWife.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataHelpWife.leaveRange
-        : formDataHelpWife.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      formDataHelpWife.leaveTotal =
-        data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        totalCheck.value = data.totalDate - data.sumDateWork - data.sumDateHoliday;
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-      hideLoader();
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-      totalCheck.value = null
-      hideLoader();
-    });
+  if (formDataHelpWife.leaveStartDate && formDataHelpWife.leaveEndDate) {
+    showLoader();
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate:
+          convertDateToAPI(formDataHelpWife.leaveStartDate) ?? null,
+        EndLeaveDate: convertDateToAPI(formDataHelpWife.leaveEndDate) ?? null,
+        leaveRange: formDataHelpWife.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataHelpWife.leaveRange
+          : formDataHelpWife.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        const data = res.data.result;
+        formDataHelpWife.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // totalCheck.value =
+        //   data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        reasonLeave.value =
+          data.message != ""
+            ? data.message
+            : formDataHelpWife.leaveTotal > 0
+            ? "จำนวนวันลาเกินที่กำหนด"
+            : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
+        isLeave.value = formDataHelpWife.leaveTotal > 0 ? data.isLeave : false;
+        hideLoader();
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        // totalCheck.value = null;
+        hideLoader();
+      });
+  }
 }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 
 watch(props.data, async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
     formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@@ -219,7 +226,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
     formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@@ -643,14 +650,14 @@ onMounted(async () => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
-      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
         dense
-        :disable="totalCheck == 0"
+        :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 13b6f0a..90ed483 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -164,53 +164,48 @@ const checkDate = computed(() => {
   }
 });
 
-const totalCheck = ref<number|null>(null)
+// const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
-  showLoader();
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataVacation.leaveStartDate) ?? null,
-      EndLeaveDate: convertDateToAPI(formDataVacation.leaveEndDate) ?? null,
-      leaveRange: formDataVacation.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataVacation.leaveRange
-        : formDataVacation.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday;
-      totalCheck.value = data.totalDate - data.sumDateWork - data.sumDateHoliday;
+  if (formDataVacation.leaveStartDate && formDataVacation.leaveEndDate) {
+    showLoader();
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate:
+          convertDateToAPI(formDataVacation.leaveStartDate) ?? null,
+        EndLeaveDate: convertDateToAPI(formDataVacation.leaveEndDate) ?? null,
+        leaveRange: formDataVacation.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataVacation.leaveRange
+          : formDataVacation.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        const data = res.data.result;
+        formDataVacation.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // totalCheck.value =
+        //   data.totalDate - data.sumDateWork - data.sumDateHoliday;
 
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-      hideLoader();
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-      totalCheck.value = null
-      hideLoader();
-    });
-}
-
-/**
- * function รีเซทค่า leaveStartDate เเละ leaveEndDate
- */
-function resetDate() {
-  if (
-    formDataVacation.leaveRange === "MORNING" ||
-    formDataVacation.leaveRange === "AFTERNOON"
-  ) {
-    formDataVacation.leaveStartDate = null;
-    formDataVacation.leaveEndDate = null;
+        reasonLeave.value =
+          data.message != ""
+            ? data.message
+            : formDataVacation.leaveTotal > 0
+            ? "จำนวนวันลาเกินที่กำหนด"
+            : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
+        isLeave.value = formDataVacation.leaveTotal > 0 ? data.isLeave : false;
+        hideLoader();
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        // totalCheck.value = null;
+        hideLoader();
+      });
   }
 }
 
 watch(props.data, () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataVacation.leaveWrote = props.data.leaveWrote;
     formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
     formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
@@ -230,7 +225,7 @@ watch(props.data, () => {
 /**Hook */
 onMounted(() => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataVacation.leaveWrote = props.data.leaveWrote;
     formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
     formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
@@ -634,14 +629,14 @@ onMounted(() => {
     <q-separator class="q-mt-sm" />
     <div class="row col-12 q-pt-md items-center">
       <q-space />
-      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
         dense
-        :disable="totalCheck == 0"
+        :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index f1a00d5..5ab2efc 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -182,35 +182,41 @@ const checkDate = computed(() => {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
- const totalCheck = ref<number|null>(null)
+//  const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
-  showLoader();
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate:
-        convertDateToAPI(formDataOrdination.leaveStartDate) ?? null,
-      EndLeaveDate: convertDateToAPI(formDataOrdination.leaveEndDate) ?? null,
-      leaveRange: formDataOrdination.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataOrdination.leaveRange
-        : formDataOrdination.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      formDataOrdination.leaveTotal = data.totalDate;
-      totalCheck.value = data.totalDate;
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-      hideLoader();
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-      totalCheck.value = null
-      hideLoader();
-    });
+  if (formDataOrdination.leaveStartDate && formDataOrdination.leaveEndDate) {
+    showLoader();
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate:
+          convertDateToAPI(formDataOrdination.leaveStartDate) ?? null,
+        EndLeaveDate: convertDateToAPI(formDataOrdination.leaveEndDate) ?? null,
+        leaveRange: formDataOrdination.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataOrdination.leaveRange
+          : formDataOrdination.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        const data = res.data.result;
+        formDataOrdination.leaveTotal = data.totalDate;
+        // totalCheck.value = data.totalDate;
+        reasonLeave.value =
+          data.message != ""
+            ? data.message
+            : formDataOrdination.leaveTotal > 0
+            ? "จำนวนวันลาเกินที่กำหนด"
+            : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
+        isLeave.value =
+          formDataOrdination.leaveTotal > 0 ? data.isLeave : false;
+        hideLoader();
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        // totalCheck.value = null;
+        hideLoader();
+      });
+  }
 }
 
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
@@ -224,7 +230,7 @@ const statusCheck = ref<string>("");
 
 watch(props.data, async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataOrdination.leaveWrote = props.data.leaveWrote;
     formDataOrdination.leaveStartDate = props.data.leaveStartDate;
     formDataOrdination.leaveEndDate = props.data.leaveEndDate;
@@ -252,7 +258,7 @@ watch(props.data, async () => {
 /** Hook */
 onMounted(async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataOrdination.leaveWrote = props.data.leaveWrote;
     formDataOrdination.leaveStartDate = props.data.leaveStartDate;
     formDataOrdination.leaveEndDate = props.data.leaveEndDate;
@@ -831,7 +837,7 @@ onMounted(async () => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
-      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -840,7 +846,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        :disable="totalCheck == 0"
+        :disable="!isLeave"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index 406a5d0..db88acf 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -144,38 +144,44 @@ const checkDate = computed(() => {
   }
 });
 
-const totalCheck = ref<number|null>(null)
+// const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
-  showLoader();
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataHaji.leaveStartDate) ?? null,
-      EndLeaveDate: convertDateToAPI(formDataHaji.leaveEndDate) ?? null,
-      leaveRange: formDataHaji.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataHaji.leaveRange
-        : formDataHaji.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      formDataHaji.leaveTotal = data.totalDate;
-      totalCheck.value = data.totalDate;
-      leaveText.value = calculateDurationYmd(
-        convertDateToAPI(formDataHaji.leaveStartDate),
-        convertDateToAPI(formDataHaji.leaveEndDate)
-      );
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-      hideLoader();
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-      totalCheck.value = null
-      hideLoader();
-    });
+  if (formDataHaji.leaveStartDate && formDataHaji.leaveEndDate) {
+    showLoader();
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate: convertDateToAPI(formDataHaji.leaveStartDate) ?? null,
+        EndLeaveDate: convertDateToAPI(formDataHaji.leaveEndDate) ?? null,
+        leaveRange: formDataHaji.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataHaji.leaveRange
+          : formDataHaji.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        const data = res.data.result;
+        // isLeave.value = data.isLeave;
+        formDataHaji.leaveTotal = data.totalDate;
+        // totalCheck.value = data.totalDate;
+        leaveText.value = calculateDurationYmd(
+          convertDateToAPI(formDataHaji.leaveStartDate),
+          convertDateToAPI(formDataHaji.leaveEndDate)
+        );
+        reasonLeave.value =
+          data.message != ""
+            ? data.message
+            : formDataHaji.leaveTotal > 0
+            ? "จำนวนวันลาเกินที่กำหนด"
+            : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
+        isLeave.value = formDataHaji.leaveTotal > 0 ? data.isLeave : false;
+        hideLoader();
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        // totalCheck.value = null;
+        hideLoader();
+      });
+  }
 }
 
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
@@ -188,7 +194,7 @@ const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 watch(props.data, async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataHaji.leaveWrote = props.data.leaveWrote;
     formDataHaji.leaveTotal = props.data.leaveTotal;
     formDataHaji.leaveStartDate = props.data.leaveStartDate;
@@ -206,7 +212,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataHaji.leaveWrote = props.data.leaveWrote;
     formDataHaji.leaveTotal = props.data.leaveTotal;
     formDataHaji.leaveStartDate = props.data.leaveStartDate;
@@ -576,7 +582,7 @@ onMounted(async () => {
     <q-separator class="q-mt-sm" />
     <div class="row col-12 q-pt-md">
       <q-space />
-      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -585,7 +591,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        :disable="totalCheck == 0"
+        :disable="!isLeave"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index 012977d..ff7be45 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -167,54 +167,57 @@ const checkDate = computed(() => {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
- const totalCheck = ref<number|null>(null)
+//  const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
-  showLoader();
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataMilitary.leaveStartDate) ?? null,
-      EndLeaveDate: convertDateToAPI(formDataMilitary.leaveEndDate) ?? null,
-      leaveRange: formDataMilitary.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataMilitary.leaveRange
-        : formDataMilitary.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      formDataMilitary.leaveTotal = data.totalDate;
-      totalCheck.value = data.totalDate;
-      leaveText.value = calculateDurationYmd(
-        convertDateToAPI(formDataMilitary.leaveStartDate),
-        convertDateToAPI(formDataMilitary.leaveEndDate)
-      );
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-      hideLoader();
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-      totalCheck.value = null
-      hideLoader();
-    });
+  if (formDataMilitary.leaveStartDate && formDataMilitary.leaveEndDate) {
+    showLoader();
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate:
+          convertDateToAPI(formDataMilitary.leaveStartDate) ?? null,
+        EndLeaveDate: convertDateToAPI(formDataMilitary.leaveEndDate) ?? null,
+        leaveRange: formDataMilitary.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataMilitary.leaveRange
+          : formDataMilitary.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        const data = res.data.result;
+        isLeave.value = data.isLeave;
+        formDataMilitary.leaveTotal = data.totalDate;
+        // totalCheck.value = data.totalDate;
+        leaveText.value = calculateDurationYmd(
+          convertDateToAPI(formDataMilitary.leaveStartDate),
+          convertDateToAPI(formDataMilitary.leaveEndDate)
+        );
+        reasonLeave.value =
+          data.message != "" ? data.message : "จำนวนวันลาเกินที่กำหนด";
+
+        hideLoader();
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        // totalCheck.value = null
+        hideLoader();
+      });
+  }
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataMilitary.leaveStartDate,
-    formDataMilitary.leaveEndDate
-  );
-  formDataMilitary.leaveTotal = newLeaveTotal;
-}
+// /**
+//  * function อัพเดทค่า LeaveTotal
+//  */
+// function updateLeaveTotal() {
+//   const newLeaveTotal = calculateDurationYmd(
+//     formDataMilitary.leaveStartDate,
+//     formDataMilitary.leaveEndDate
+//   );
+//   formDataMilitary.leaveTotal = newLeaveTotal;
+// }
 
 watch(props.data, async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataMilitary.leaveWrote = props.data.leaveWrote;
     formDataMilitary.leaveStartDate = props.data.leaveStartDate;
     formDataMilitary.leaveEndDate = props.data.leaveEndDate;
@@ -241,7 +244,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataMilitary.leaveWrote = props.data.leaveWrote;
     formDataMilitary.leaveStartDate = props.data.leaveStartDate;
     formDataMilitary.leaveEndDate = props.data.leaveEndDate;
@@ -666,7 +669,7 @@ onMounted(async () => {
     <q-separator class="q-mt-sm" />
     <div class="row col-12 q-pt-md">
       <q-space />
-      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -675,7 +678,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        :disable="totalCheck == 0"
+        :disable="!isLeave"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index f91f248..f67c402 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -182,55 +182,57 @@ const checkDate = computed(() => {
   }
 });
 
-const totalCheck = ref<number|null>(null)
+// const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
-  showLoader();
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataStudy.leaveStartDate) ?? null,
-      EndLeaveDate: convertDateToAPI(formDataStudy.leaveEndDate) ?? null,
-      leaveRange: formDataStudy.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataStudy.leaveRange
-        : formDataStudy.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      formDataStudy.leaveTotal = data.totalDate;
-      totalCheck.value = data.totalDate;
-      leaveText.value = calculateDurationYmd(
-        convertDateToAPI(formDataStudy.leaveStartDate),
-        convertDateToAPI(formDataStudy.leaveEndDate)
-      );
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-      hideLoader();
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-      totalCheck.value = null
-      hideLoader();
-    });
+  if (formDataStudy.leaveStartDate && formDataStudy.leaveEndDate) {
+    showLoader();
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate: convertDateToAPI(formDataStudy.leaveStartDate) ?? null,
+        EndLeaveDate: convertDateToAPI(formDataStudy.leaveEndDate) ?? null,
+        leaveRange: formDataStudy.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataStudy.leaveRange
+          : formDataStudy.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        const data = res.data.result;
+        isLeave.value = data.isLeave;
+        formDataStudy.leaveTotal = data.totalDate;
+        // totalCheck.value = data.totalDate;
+        leaveText.value = calculateDurationYmd(
+          convertDateToAPI(formDataStudy.leaveStartDate),
+          convertDateToAPI(formDataStudy.leaveEndDate)
+        );
+        reasonLeave.value = data.message
+          ? data.message
+          : "จำนวนวันลาเกินที่กำหนด";
+        hideLoader();
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        // totalCheck.value = null;
+        hideLoader();
+      });
+  }
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataStudy.leaveStartDate,
-    formDataStudy.leaveEndDate
-  );
-  formDataStudy.leaveTotal = newLeaveTotal;
-}
+// /**
+//  * function อัพเดทค่า LeaveTotal
+//  */
+// function updateLeaveTotal() {
+//   const newLeaveTotal = calculateDurationYmd(
+//     formDataStudy.leaveStartDate,
+//     formDataStudy.leaveEndDate
+//   );
+//   formDataStudy.leaveTotal = newLeaveTotal;
+// }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataStudy.leaveWrote = props.data.leaveWrote;
     formDataStudy.leaveStartDate = props.data.leaveStartDate;
     formDataStudy.leaveEndDate = props.data.leaveEndDate;
@@ -262,7 +264,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataStudy.leaveWrote = props.data.leaveWrote;
     formDataStudy.leaveStartDate = props.data.leaveStartDate;
     formDataStudy.leaveEndDate = props.data.leaveEndDate;
@@ -821,7 +823,7 @@ onMounted(async () => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
-      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -830,7 +832,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        :disable="totalCheck == 0"
+        :disable="!isLeave"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 8e518a3..51037a9 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -167,38 +167,40 @@ const checkDate = computed(() => {
   }
 });
 
-const totalCheck = ref<number|null>(null)
+// const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
-  showLoader();
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: convertDateToAPI(formDataTrain.leaveStartDate) ?? null,
-      EndLeaveDate: convertDateToAPI(formDataTrain.leaveEndDate) ?? null,
-      leaveRange: formDataTrain.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataTrain.leaveRange
-        : formDataTrain.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      formDataTrain.leaveTotal = data.totalDate;
-      totalCheck.value = data.totalDate;
-      leaveText.value = calculateDurationYmd(
-        convertDateToAPI(formDataTrain.leaveStartDate),
-        convertDateToAPI(formDataTrain.leaveEndDate)
-      );
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-      hideLoader();
-    })
-    .catch((e: any) => {
-      totalCheck.value = null
-      messageError($q, e);
-      hideLoader();
-    });
+  if (formDataTrain.leaveStartDate && formDataTrain.leaveEndDate) {
+    showLoader();
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate: convertDateToAPI(formDataTrain.leaveStartDate) ?? null,
+        EndLeaveDate: convertDateToAPI(formDataTrain.leaveEndDate) ?? null,
+        leaveRange: formDataTrain.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataTrain.leaveRange
+          : formDataTrain.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        const data = res.data.result;
+        isLeave.value = data.isLeave;
+        formDataTrain.leaveTotal = data.totalDate;
+        // totalCheck.value = data.totalDate;
+        leaveText.value = calculateDurationYmd(
+          convertDateToAPI(formDataTrain.leaveStartDate),
+          convertDateToAPI(formDataTrain.leaveEndDate)
+        );
+        reasonLeave.value = data.message
+          ? data.message
+          : "จำนวนวันลาเกินที่กำหนด";
+        hideLoader();
+      })
+      .catch((e: any) => {
+        // totalCheck.value = null;
+        messageError($q, e);
+        hideLoader();
+      });
+  }
 }
 
 /**
@@ -214,7 +216,7 @@ function updateLeaveTotal() {
 
 watch(props.data, async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataTrain.leaveWrote = props.data.leaveWrote;
     formDataTrain.leaveStartDate = props.data.leaveStartDate;
     formDataTrain.leaveEndDate = props.data.leaveEndDate;
@@ -244,7 +246,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataTrain.leaveWrote = props.data.leaveWrote;
     formDataTrain.leaveStartDate = props.data.leaveStartDate;
     formDataTrain.leaveEndDate = props.data.leaveEndDate;
@@ -781,7 +783,7 @@ onMounted(async () => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
-      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -790,7 +792,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        :disable="totalCheck == 0"
+        :disable="!isLeave"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 72db237..b789d01 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -171,37 +171,42 @@ const checkDate = computed(() => {
  * @param formData
  */
 const isLeave = ref<boolean>(true);
-  const totalCheck = ref<number|null>(null)
+// const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate:
-        convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? null,
-      EndLeaveDate:
-        convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? null,
-      leaveRange: formDataWorkInternational.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataWorkInternational.leaveRange
-        : formDataWorkInternational.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      formDataWorkInternational.leaveTotal = data.totalDate;
-      totalCheck.value = data.totalDate;
-      leaveText.value = calculateDurationYmd(
-        convertDateToAPI(formDataWorkInternational.leaveStartDate),
-        convertDateToAPI(formDataWorkInternational.leaveEndDate)
-      );
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-    })
-    .catch((e: any) => {
-      totalCheck.value = null
-      messageError($q, e);
-    });
+  if (
+    formDataWorkInternational.leaveStartDate &&
+    formDataWorkInternational.leaveEndDate
+  ) {
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate:
+          convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? null,
+        EndLeaveDate:
+          convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? null,
+        leaveRange: formDataWorkInternational.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataWorkInternational.leaveRange
+          : formDataWorkInternational.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        const data = res.data.result;
+        isLeave.value = data.isLeave;
+        formDataWorkInternational.leaveTotal = data.totalDate;
+        // totalCheck.value = data.totalDate;
+        leaveText.value = calculateDurationYmd(
+          convertDateToAPI(formDataWorkInternational.leaveStartDate),
+          convertDateToAPI(formDataWorkInternational.leaveEndDate)
+        );
+        reasonLeave.value = data.message
+          ? data.message
+          : "จำนวนวันลาเกินที่กำหนด";
+      })
+      .catch((e: any) => {
+        // totalCheck.value = null;
+        messageError($q, e);
+      });
+  }
 }
 
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
@@ -216,7 +221,7 @@ const statusCheck = ref<string>("");
 
 watch(props, async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
     formDataWorkInternational.leaveStartDate = new Date(
       props.data.leaveStartDate
@@ -254,7 +259,7 @@ watch(
 /**Hook */
 onMounted(async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
 
     formDataWorkInternational.leaveRange = props.data.leaveRange;
@@ -630,7 +635,7 @@ onMounted(async () => {
       <q-separator class="q-mt-sm" />
       <div class="row col-12 q-pt-md">
         <q-space />
-        <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+        <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
         <q-btn
           v-if="!props.data || props.data.status == 'DRAFT'"
           id="onSubmit"
@@ -639,7 +644,7 @@ onMounted(async () => {
           dense
           class="q-px-md items-center btnBlue"
           label="บันทึก"
-          :disable="totalCheck == 0"
+          :disable="!isLeave"
           ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
         >
         <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index b8feb22..d07bb2e 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -209,53 +209,46 @@ const reasonLeave = ref<string>("");
  * @param formData
  */
 const isLeave = ref<boolean>(true);
-const totalCheck = ref<number | null>(null);
+// const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
-  showLoader();
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate:
-        convertDateToAPI(formDataFollowSpouse.leaveStartDate) ?? null,
-      EndLeaveDate: convertDateToAPI(formDataFollowSpouse.leaveEndDate) ?? null,
-      leaveRange: formDataFollowSpouse.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataFollowSpouse.leaveRange
-        : formDataFollowSpouse.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      formDataFollowSpouse.leaveTotal = data.totalDate;
-      totalCheck.value = data.totalDate;
-      leaveText.value = calculateDurationYmd(
-        convertDateToAPI(formDataFollowSpouse.leaveStartDate),
-        convertDateToAPI(formDataFollowSpouse.leaveEndDate)
-      );
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-      checkTotalHistory();
-      hideLoader();
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-      totalCheck.value = null
-      hideLoader();
-    });
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  fetchCheck();
-
-  const newLeaveTotal = calculateDurationYmd(
-    formDataFollowSpouse.leaveStartDate,
+  if (
+    formDataFollowSpouse.leaveStartDate &&
     formDataFollowSpouse.leaveEndDate
-  );
-  formDataFollowSpouse.leaveTotal = newLeaveTotal;
+  ) {
+    showLoader();
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate:
+          convertDateToAPI(formDataFollowSpouse.leaveStartDate) ?? null,
+        EndLeaveDate:
+          convertDateToAPI(formDataFollowSpouse.leaveEndDate) ?? null,
+        leaveRange: formDataFollowSpouse.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataFollowSpouse.leaveRange
+          : formDataFollowSpouse.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        const data = res.data.result;
+        isLeave.value = data.isLeave;
+        formDataFollowSpouse.leaveTotal = data.totalDate;
+        // totalCheck.value = data.totalDate;
+        leaveText.value = calculateDurationYmd(
+          convertDateToAPI(formDataFollowSpouse.leaveStartDate),
+          convertDateToAPI(formDataFollowSpouse.leaveEndDate)
+        );
+        reasonLeave.value = data.message
+          ? data.message
+          : "จำนวนวันลาเกินที่กำหนด";
+        checkTotalHistory();
+        hideLoader();
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        // totalCheck.value = null
+        hideLoader();
+      });
+  }
 }
 
 /**
@@ -294,7 +287,7 @@ const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 watch(props.data, async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
     formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -340,7 +333,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
     formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -919,7 +912,7 @@ onMounted(async () => {
     <q-separator class="q-mt-sm" />
     <div class="row col-12 q-pt-md">
       <q-space />
-      <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
@@ -928,7 +921,7 @@ onMounted(async () => {
         dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        :disable="totalCheck == 0"
+        :disable="!isLeave"
         ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
       >
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index 8e72003..755318f 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -129,42 +129,47 @@ const checkDate = computed(() => {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
- const totalCheck = ref<number|null>(null)
+//  const totalCheck = ref<number|null>(null)
 async function fetchCheck() {
-  showLoader();
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate:
-        convertDateToAPI(formDataRehabilitation.leaveStartDate) ?? null,
-      EndLeaveDate:
-        convertDateToAPI(formDataRehabilitation.leaveEndDate) ?? null,
-      leaveRange: formDataRehabilitation.leaveRange,
-      leaveRangeEnd: checkDate.value
-        ? formDataRehabilitation.leaveRange
-        : formDataRehabilitation.leaveRangeEnd,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      formDataRehabilitation.leaveTotal = data.totalDate;
-      totalCheck.value = data.totalDate;
-      leaveText.value = calculateDurationYmd(
-        convertDateToAPI(formDataRehabilitation.leaveStartDate),
-        convertDateToAPI(formDataRehabilitation.leaveEndDate)
-      );
+  if (
+    formDataRehabilitation.leaveStartDate &&
+    formDataRehabilitation.leaveEndDate
+  ) {
+    showLoader();
+    await http
+      .post(config.API.leaveCheck(), {
+        type: dataStore.typeId ?? null,
+        StartLeaveDate:
+          convertDateToAPI(formDataRehabilitation.leaveStartDate) ?? null,
+        EndLeaveDate:
+          convertDateToAPI(formDataRehabilitation.leaveEndDate) ?? null,
+        leaveRange: formDataRehabilitation.leaveRange,
+        leaveRangeEnd: checkDate.value
+          ? formDataRehabilitation.leaveRange
+          : formDataRehabilitation.leaveRangeEnd,
+      })
+      .then((res: any) => {
+        const data = res.data.result;
+        isLeave.value = data.isLeave;
+        formDataRehabilitation.leaveTotal = data.totalDate;
+        // totalCheck.value = data.totalDate;
+        leaveText.value = calculateDurationYmd(
+          convertDateToAPI(formDataRehabilitation.leaveStartDate),
+          convertDateToAPI(formDataRehabilitation.leaveEndDate)
+        );
 
-      reasonLeave.value = data.message
-        ? data.message
-        : "จำนวนวันลาเกินที่กำหนด";
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-      totalCheck.value = null
-    })
-    .finally(() => {
-      hideLoader();
-    });
+        reasonLeave.value = data.message
+          ? data.message
+          : "จำนวนวันลาเกินที่กำหนด";
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        // totalCheck.value = null
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 }
 
 //download function
@@ -195,7 +200,7 @@ const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
 watch(props.data, async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -218,7 +223,7 @@ watch(props.data, async () => {
 /**Hook */
 onMounted(async () => {
   if (props.data) {
-    totalCheck.value = null
+    // totalCheck.value = null;
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
@@ -586,7 +591,7 @@ onMounted(async () => {
       <q-separator class="q-mt-sm" />
       <div class="row col-12 q-pt-md">
         <q-space />
-        <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div>
+        <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
         <q-btn
           v-if="!props.data || props.data.status == 'DRAFT'"
           id="onSubmit"
@@ -595,7 +600,7 @@ onMounted(async () => {
           dense
           class="q-px-md items-center btnBlue"
           label="บันทึก"
-          :disable="totalCheck == 0"
+          :disable="!isLeave"
           ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
         >
         <q-btn
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index fb73de0..c7650da 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -365,7 +365,7 @@ export const useCounterMixin = defineStore("mixin", () => {
         component: CustomComponent,
         componentProps: {
           title: `ข้อความแจ้งเตือน`,
-          message: `ไม่สามารถลาได้ เนื่องจากจำนวนวันลาเกินที่กำหนด`,
+          message: `ไม่สามารถลาได้ เนื่องจากจำนวนวันลาเกินที่กำหนด/ช่วงวันลาที่ระบุไม่ถูกต้อง`,
           icon: "warning",
           color: "red",
           onlycancel: true,

From 9762b4e6759a399ce76d5a4c723adcbd0d726f00 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 7 May 2025 22:31:36 +0700
Subject: [PATCH 087/195] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20?=
 =?UTF-8?q?ui=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/03_retire/interface/Main.ts   |  28 ++-
 src/modules/03_retire/store.ts            |  19 +-
 src/modules/03_retire/views/addRetire.vue | 232 +++++++++++++++-------
 3 files changed, 204 insertions(+), 75 deletions(-)

diff --git a/src/modules/03_retire/interface/Main.ts b/src/modules/03_retire/interface/Main.ts
index 7c5a42b..1bb3486 100644
--- a/src/modules/03_retire/interface/Main.ts
+++ b/src/modules/03_retire/interface/Main.ts
@@ -54,15 +54,35 @@ interface MainListResponse {
   isActive: boolean;
 }
 
-interface DataOptions{
-  id:string
-  name:string
+interface DataOptions {
+  id: string;
+  name: string;
 }
+
+interface RowsType {
+  commanders: SeqTypeRow[];
+  approvers: SeqTypeRow[];
+}
+interface SeqTypeRow {
+  seq: number;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  positionName: string;
+  profileId: string;
+  keycloakId: string;
+  approveStatus: string;
+  comment: string;
+  rejectDate: Date | null;
+}
+
 export type {
   QuestionDescription,
   OptionQuestions,
   OptionQuestions2,
   MainList,
   MainListResponse,
-  DataOptions
+  DataOptions,
+  RowsType,
+  SeqTypeRow,
 };
diff --git a/src/modules/03_retire/store.ts b/src/modules/03_retire/store.ts
index c133f06..3c48e6f 100644
--- a/src/modules/03_retire/store.ts
+++ b/src/modules/03_retire/store.ts
@@ -4,9 +4,9 @@ export const useRestDataStore = defineStore("Rest", () => {
   const statusText = (val: string) => {
     switch (val) {
       case "WAITTING":
-        return "รอดำเนินการ";
+        return "ใหม่";
       case "PENDING":
-        return "เลือกตำแหน่งแล้ว";
+        return "รอดำเนินการ";
       case "APPROVE":
         return "อนุมัติ";
       case "REJECT":
@@ -16,7 +16,7 @@ export const useRestDataStore = defineStore("Rest", () => {
       case "WAITING":
         return "รอออกคำสั่ง";
       case "DONE":
-        return "ออกคำสั่งเสร็จแล้ว";
+        return "ออกคำสั่งเสร็จสิ้น";
       case "DONECANCEL":
         return "ยกเลิกการลาออก";
       case "CANCEL":
@@ -28,7 +28,20 @@ export const useRestDataStore = defineStore("Rest", () => {
     }
   };
 
+  function convertStatusText(val: string) {
+    switch (val) {
+      case "PENDING":
+        return "รอดำเนินการ";
+      case "APPROVE":
+        return "อนุญาต";
+      case "REJECT":
+        return "ยับยั้ง";
+    }
+  }
+
+  
   return {
     statusText,
+    convertStatusText
   };
 });
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index e341707..d1b164e 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import type { QForm } from "quasar";
+import type { QForm, QTableProps } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRestDataStore } from "@/modules/03_retire/store";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
-import type { DataOptions } from "@/modules/03_retire/interface/Main";
+import type {
+  DataOptions,
+  RowsType,
+  SeqTypeRow,
+} from "@/modules/03_retire/interface/Main";
 
 import Dialog from "@/modules/03_retire/views/DialogRetire.vue";
 import Header from "@/components/DialogHeader.vue";
@@ -18,6 +23,8 @@ import Workflow from "@/components/Workflow/Main.vue";
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
+const store = useRestDataStore();
+const { convertStatusText } = store;
 const link = ref<string>("");
 const dataStore = useDataStore();
 const routeName = router.currentRoute.value.name;
@@ -37,6 +44,7 @@ const id = ref<string>(
     ? route.params.id.toString()
     : ""
 ); //เก็บ id path
+const rowsApprover = ref<RowsType>();
 const myform = ref<QForm | null>(null); //form
 const tranferOrg = ref(""); //สถานที่ยื่นขอลาออกจากราชการ
 const dateCommand = ref<Date>(new Date()); //วันที่ยื่นขอลาออกจากราชการ
@@ -73,6 +81,69 @@ const dataDetail = ref<any>({});
 
 const modalWorkflow = ref<boolean>(false);
 
+const columnsCommanders = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "approveStatus",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "approveStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "comment",
+    align: "left",
+    label: "ความคิดเห็นและเหตุผล",
+    field: "comment",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "rejectDate",
+    align: "left",
+    label: "วันสุดท้ายที่ยับยั้ง",
+    field: "rejectDate",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.rejectDate ? date2Thai(row.rejectDate) : "-"}`;
+    },
+  },
+]);
+
 /**
  * ฟังก์ชั่นเปลี่ยนเป็น string ของ status
  * @param val value ของ status true/false
@@ -159,6 +230,10 @@ async function fectDataresign(id: string) {
 
       noteReason.value = data.reason;
       remark.value = data.remark;
+      rowsApprover.value = {
+        commanders: data.commanders,
+        approvers: data.approvers,
+      };
       files.value = data.docs;
       dataDetail.value = data;
     })
@@ -521,52 +596,56 @@ onMounted(async () => {
                   </div>
                 </div>
                 <q-separator />
-                <div class="row col-12 q-pa-md">
-                  <div class="col-12 row bg-white q-col-gutter-md">
-                    <div class="col-xs-6 row items-start">
-                      <div class="col-12 text-top">สถานะ</div>
-                      <div class="col-12 text-detail">
-                        {{
-                          dataDetail.commanderReject !== null
-                            ? statusOrder(dataDetail.commanderReject)
-                            : "-"
-                        }}
-                      </div>
-                    </div>
-                    <div class="col-xs-6 row items-start">
-                      <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-                      <div class="col-12 text-detail">
-                        {{
-                          dataDetail.commanderRejectDate !== null
-                            ? date2Thai(dataDetail.commanderRejectDate)
-                            : "-"
-                        }}
-                      </div>
-                    </div>
-                    <div class="col-xs-12 row items-start">
-                      <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-                      <div
-                        class="col-12 text-detail"
-                        v-if="dataDetail.commanderReject === false"
-                      >
-                        {{
-                          dataDetail.commanderApproveReason !== null
-                            ? dataDetail.commanderApproveReason
-                            : "-"
-                        }}
-                      </div>
-                      <div
-                        class="col-12 text-detail"
-                        v-if="dataDetail.commanderReject === true"
-                      >
-                        {{
-                          dataDetail.commanderRejectReason !== null
-                            ? dataDetail.commanderRejectReason
-                            : "-"
-                        }}
-                      </div>
-                    </div>
-                  </div>
+                <div class="col-12">
+                  <d-table
+                    ref="table"
+                    :columns="columnsCommanders"
+                    :rows="rowsApprover?.commanders ?? []"
+                    row-key="key"
+                    flat
+                    bordered
+                    :paging="true"
+                    dense
+                    :rows-per-page-options="[1, 25, 50, 100]"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr :props="props">
+                        <q-th
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <span class="text-weight-medium">{{
+                            col.label
+                          }}</span>
+                        </q-th>
+                      </q-tr>
+                    </template>
+                    <template v-slot:body="props">
+                      <q-tr :props="props" class="cursor-pointer">
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div v-if="col.name == 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </div>
+
+                          <div v-else-if="col.name == 'approveStatus'">
+                            {{
+                              props.row.approveStatus
+                                ? convertStatusText(props.row.approveStatus)
+                                : "-"
+                            }}
+                          </div>
+                          <div v-else>
+                            {{ col.value ? col.value : "-" }}
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </d-table>
                 </div>
               </q-card>
             </div>
@@ -584,12 +663,28 @@ onMounted(async () => {
                 <q-separator />
                 <div class="row col-12 q-pa-md">
                   <div class="col-12 row bg-white q-col-gutter-md">
+                    <div class="col-xs-6 row items-start">
+                      <div class="col-12 text-top">ชื่อ - นามสกุล</div>
+                      <div class="col-12 text-detail">
+                        {{
+                          rowsApprover &&
+                          rowsApprover.approvers &&
+                          rowsApprover.approvers[0]?.firstName
+                            ? `${rowsApprover?.approvers[0].prefix}${rowsApprover?.approvers[0].firstName} ${rowsApprover?.approvers[0].lastName}`
+                            : "-"
+                        }}
+                      </div>
+                    </div>
                     <div class="col-xs-6 row items-start">
                       <div class="col-12 text-top">สถานะ</div>
                       <div class="col-12 text-detail">
                         {{
-                          dataDetail.oligarchReject !== null
-                            ? statusOrder(dataDetail.oligarchReject)
+                          rowsApprover &&
+                          rowsApprover.approvers &&
+                          rowsApprover.approvers[0]?.approveStatus
+                            ? convertStatusText(
+                                rowsApprover?.approvers[0].approveStatus
+                              )
                             : "-"
                         }}
                       </div>
@@ -598,31 +693,22 @@ onMounted(async () => {
                       <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
                       <div class="col-12 text-detail">
                         {{
-                          dataDetail.oligarchRejectDate !== null
-                            ? date2Thai(dataDetail.oligarchRejectDate)
+                          rowsApprover &&
+                          rowsApprover.approvers &&
+                          rowsApprover.approvers[0]?.rejectDate
+                            ? date2Thai(rowsApprover?.approvers[0].rejectDate)
                             : "-"
                         }}
                       </div>
                     </div>
                     <div class="col-xs-12 row items-start">
                       <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-                      <div
-                        class="col-12 text-detail"
-                        v-if="dataDetail.oligarchReject == false"
-                      >
+                      <div class="col-12 text-detail">
                         {{
-                          dataDetail.oligarchApproveReason !== null
-                            ? dataDetail.oligarchApproveReason
-                            : "-"
-                        }}
-                      </div>
-                      <div
-                        class="col-12 text-detail"
-                        v-else-if="dataDetail.oligarchReject == true"
-                      >
-                        {{
-                          dataDetail.oligarchRejectReason !== null
-                            ? dataDetail.oligarchRejectReason
+                          rowsApprover &&
+                          rowsApprover.approvers &&
+                          rowsApprover.approvers[0]?.comment
+                            ? rowsApprover?.approvers[0].comment
                             : "-"
                         }}
                       </div>
@@ -691,3 +777,13 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 </template>
+<style scoped>
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>

From f41cb5a7f88c70e7a3fcd11d1a7aadca0a0901c7 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 8 May 2025 09:38:28 +0700
Subject: [PATCH 088/195] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20?=
 =?UTF-8?q?sort?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/Table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index 1ec87de..0892325 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -241,7 +241,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
       :virtual-scroll-sticky-size-start="48"
       dense
       :rows-per-page-options="[10, 25, 50, 100]"
-      :pagination="pagination"
+      v-model:pagination="pagination"
       @update:pagination="updatePageSize"
       :grid="$q.screen.gt.xs ? false : true"
     >

From 1447b789efe3b4b1bd5f1fd65a75ce4f82c1fa45 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 8 May 2025 09:47:55 +0700
Subject: [PATCH 089/195] =?UTF-8?q?=E0=B9=80=E0=B9=80=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9B=E0=B9=87=E0=B8=99=E0=B8=A7=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=84=E0=B8=87=E0=B9=80=E0=B8=AB=E0=B8=A5=E0=B8=B7=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/views/Main.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 87cfde4..d2ae71f 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -248,7 +248,7 @@ onMounted(async () => {
                       class="text-indigo"
                     >
                       <span class="text-subtitle2 text-weight-bold">{{
-                        item.value
+                        item.remain
                       }}</span>
                     </q-knob>
                   </div>

From 39f969a5f2cee14d2edfb6af8018780c94769ff9 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 8 May 2025 15:08:26 +0700
Subject: [PATCH 090/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/org/api.org.ts                        |   2 +
 .../Tab/Dialog/DialogGovernment.vue           | 159 +++++++-----------
 2 files changed, 61 insertions(+), 100 deletions(-)

diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index 8705ab9..a80edf0 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -170,4 +170,6 @@ export default {
   workflow: `${workflow}/`,
 
   keycloakLogSSO: `${org}/keycloak/log/sso`,
+
+  orgAssistance:(id:string)=>`${profileOrg}/assistance/${id}`
 };
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
index 75d2dc1..1ba8e29 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -28,101 +28,40 @@ const filterKeyword = ref<string>("");
 const rows = ref<any[]>([]);
 
 const visibleColumns = ref<string[]>([
-  "no",
-  "name",
-  "posMasterNoOld",
-  "positionOld",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
+  "commandName",
+  "agency",
   "dateStart",
   "dateEnd",
-  "createdAt",
-  "status",
   "commandNo",
+  "document",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 
 //หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "no",
+    name: "commandName",
     align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
+    label: "ประเภทคำสั่ง",
     sortable: true,
-    field: "name",
+    field: "commandName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format(val, row) {
-      return `${row.prefix}${row.firstName} ${row.lastName}`;
-    },
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+
   {
-    name: "posMasterNoOld",
+    name: "agency",
     align: "left",
-    label: "เลขที่ตำแหน่ง",
+    label: "หน่วยงานที่ให้ช่วยราชการ/ส่งตัวกลับ",
     sortable: true,
-    field: "posMasterNoOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return findPosMasterNoOld(row);
-    },
-  },
-  {
-    name: "positionOld",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "positionOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ตำแหน่งประเภท",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      let name = "";
-      if (row.posTypeNameOld && row.posLevelNameOld) {
-        name = `${row.posTypeNameOld} (${row.posLevelNameOld})`;
-      } else if (row.posTypeNameOld) {
-        name = `${row.posTypeNameOld}`;
-      } else if (row.posLevelNameOld) {
-        name = `(${row.posLevelNameOld})`;
-      } else name = "-";
-      return name;
-    },
-  },
-  {
-    name: "organizationPositionOld",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "หน่วยงานที่ให้ช่วยราชการ",
-    sortable: true,
-    field: "organization",
+    field: "agency",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateStart",
@@ -130,9 +69,11 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันเริ่มช่วยราชการ",
     sortable: true,
     field: "dateStart",
+    format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (val) => date2Thai(val),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "dateEnd",
@@ -140,29 +81,11 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันสิ้นสุดการช่วยราชการ",
     sortable: true,
     field: "dateEnd",
+    format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (val) => date2Thai(val),
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (val) => date2Thai(val),
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (val) => statusText(val),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "commandNo",
@@ -172,6 +95,42 @@ const columns = ref<QTableProps["columns"]>([
     field: "commandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "document",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "document",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -207,7 +166,7 @@ function close() {
 function getData() {
   showLoader();
   http
-    .get(config.API.placementKeycloak + `/${store.dataEvaluation.profileId}`)
+    .get(config.API.orgAssistance(store.dataEvaluation.profileId))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;

From 5b47c9a9da58b19f29e266322975816b4df481ea Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 8 May 2025 17:22:50 +0700
Subject: [PATCH 091/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/ListView.vue | 21 ++++++++++++++++----
 src/modules/05_leave/store.ts                |  4 +++-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index af64c6c..f045c9b 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -35,7 +35,7 @@ const filter = ref<string>("");
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const pageSize = ref<number>(10);
-const total = ref<number>(0)
+const total = ref<number>(0);
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
   showLoader();
@@ -204,7 +204,15 @@ onMounted(async () => {
           :props="props"
           @click="onClickView(props.row.id, props.row.status)"
         >
-          {{ props.row.leaveTypeName ? `${props.row.leaveTypeName} ${props.row.leaveSubTypeName ? `(${props.row.leaveSubTypeName})`:''}`: '-' }}
+          {{
+            props.row.leaveTypeName
+              ? `${props.row.leaveTypeName} ${
+                  props.row.leaveSubTypeName
+                    ? `(${props.row.leaveSubTypeName})`
+                    : ""
+                }`
+              : "-"
+          }}
         </q-td>
         <q-td
           key="dateLeave"
@@ -260,7 +268,9 @@ onMounted(async () => {
                 class="q-mr-sm"
               />
               <q-icon
-                v-if="props.row.status == 'DELETE'"
+                v-if="
+                  props.row.status == 'DELETING' || props.row.status == 'DELETE'
+                "
                 size="10px"
                 color="grey-10"
                 name="mdi-circle"
@@ -428,7 +438,10 @@ onMounted(async () => {
                     class="q-mr-sm"
                   />
                   <q-icon
-                    v-if="props.row.status == 'DELETE'"
+                    v-if="
+                      props.row.status == 'DELETING' ||
+                      props.row.status == 'DELETE'
+                    "
                     size="10px"
                     color="grey-10"
                     name="mdi-circle"
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 638de68..050e5ed 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -77,8 +77,10 @@ export const useLeaveStore = defineStore("Leave", () => {
         return "อนุมัติ";
       case "REJECT":
         return "ไม่อนุมัติ";
+      case "DELETING":
+        return "กำลังดำเนินการยกเลิก";
       case "DELETE":
-        return "ยกเลิก";
+        return "ยกเลิกสำเร็จ";
     }
   }
 

From 2329e7242ff331b65e3c0de60204a6adcb51025e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 13 May 2025 11:58:45 +0700
Subject: [PATCH 092/195] =?UTF-8?q?fix=20columns=20=E0=B8=97=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=20=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A8=E0=B8=B6=E0=B8=81=E0=B8=A9=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_Information/05_Educations.vue          | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/modules/10_registry/01_Information/05_Educations.vue b/src/modules/10_registry/01_Information/05_Educations.vue
index 435c123..2fb6e5d 100644
--- a/src/modules/10_registry/01_Information/05_Educations.vue
+++ b/src/modules/10_registry/01_Information/05_Educations.vue
@@ -78,10 +78,14 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ตั้งแต่",
     sortable: true,
-    field: "startDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    field: (v) =>
+      v.startDate
+        ? v.isDate
+          ? date2Thai(v.startDate)
+          : new Date(v.startDate).getFullYear() + 543
+        : "-",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -91,7 +95,11 @@ const columns = ref<QTableProps["columns"]>([
     label: "ถึง",
     sortable: true,
     field: (v) =>
-      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+      v.endDate
+        ? v.isDate
+          ? date2Thai(v.endDate)
+          : new Date(v.endDate).getFullYear() + 543
+        : "-",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -291,9 +299,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "ตั้งแต่",
     sortable: true,
     field: (v) =>
-      v.isDate
-        ? date2Thai(v.startDate)
-        : new Date(v.startDate).getFullYear() + 543,
+      v.startDate
+        ? v.isDate
+          ? date2Thai(v.startDate)
+          : new Date(v.startDate).getFullYear() + 543
+        : "-",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -305,7 +315,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "ถึง",
     sortable: true,
     field: (v) =>
-      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+      v.endDate
+        ? v.isDate
+          ? date2Thai(v.endDate)
+          : new Date(v.endDate).getFullYear() + 543
+        : "-",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>

From 9f922680870b2173bda7cb33d9173afec167330f Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 13 May 2025 15:48:12 +0700
Subject: [PATCH 093/195] =?UTF-8?q?=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B9=80=E0=B8=AA=E0=B9=89=E0=B8=99?=
 =?UTF-8?q?=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/org/api.org.ts                                    | 1 +
 src/modules/06_evaluate/components/viewstep/viewStep1.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index a80edf0..dd86f6f 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -52,6 +52,7 @@ export default {
     `${org}/profile${emType}/salary/position/history/${id}`,
 
   dataUserSalary: `${profileOrg}/salary/user`,
+  dataUserSalaryPosition: `${profileOrg}/salary/position/user`,
   dataUserSalaryByType: (type: string) => `${org}/profile${type}/salary/user`,
   dataUserAssessments: `${profileOrg}/assessments/user`,
   dataUserPortfolio: `${env.API_URI}/development/portfolio/user`,
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index d749a44..a6e7c29 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -123,7 +123,7 @@ async function fetchDataAllDetail() {
   });
 
   // ดึงข้อมูลประวัติการรับราชการ
-  http.get(config.API.dataUserSalary).then((res) => {
+  http.get(config.API.dataUserSalaryPosition).then((res) => {
     formDetail.salaries = res.data.result;
   });
 

From 9688d7e22e46ae3ad2137ff2ecf858be480a694d Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 14 May 2025 09:28:49 +0700
Subject: [PATCH 094/195] =?UTF-8?q?=E0=B9=80=E0=B8=81=E0=B9=87=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_evaluate/components/step/step2.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index cb21e06..bfeab2b 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -272,6 +272,7 @@ function getCommander() {
     .get(config.API.searchCommander)
     .then((res) => {
       const data = res.data.result;
+       formCommand.author = data.fullname;
       formCommand.commanderFullname = data.commanderFullname;
       formCommand.commanderPosition = data.commanderPosition;
       formCommand.commanderAboveFullname = data.commanderAboveFullname;
@@ -314,9 +315,7 @@ watch(
 /**lifecycle Hooks*/
 onMounted(async () => {
   const user = await tokenParsed();
-  if (user) {
-    formCommand.author = user.name;
-  }
+
 
   try {
     showLoader();

From 49c316c062b26b3877eb34a489105c985baf4f66 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 14 May 2025 15:01:02 +0700
Subject: [PATCH 095/195] =?UTF-8?q?=E0=B8=9B=E0=B8=B4=E0=B8=94=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=B8=E0=B9=88=E0=B8=A1=20=E0=B8=81=E0=B8=B3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=87=E0=B8=94=E0=B8=B3=E0=B9=80=E0=B8=99=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A2=E0=B8=81=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B4=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/ListView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index f045c9b..f294958 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -285,7 +285,8 @@ onMounted(async () => {
               v-if="
                 props.row.status != 'DELETE' &&
                 props.row.status != 'REJECT' &&
-                props.row.status != 'CANCEL'
+                props.row.status != 'CANCEL' &&
+                props.row.status != 'DELETING'
               "
               flat
               icon="mdi-dots-vertical"

From 48d0c9febc8efbc9c2c75051e9149ff885600e77 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 15 May 2025 11:38:52 +0700
Subject: [PATCH 096/195] =?UTF-8?q?=E0=B9=80=E0=B8=A3=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99=E0=B9=83=E0=B8=99=E0=B9=83=E0=B8=9A=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/org/api.org.ts                        |   1 +
 src/interface/Main.ts                         |   1 +
 .../05_leave/components/FormLeave/Form.vue    | 287 +++++++++++++++++-
 src/modules/05_leave/store.ts                 |   2 -
 src/modules/05_leave/views/AddPage.vue        |  50 +--
 src/modules/05_leave/views/EditPage.vue       |  51 ++--
 src/stores/data.ts                            |   2 +
 7 files changed, 342 insertions(+), 52 deletions(-)

diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index dd86f6f..e4dd00d 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -169,6 +169,7 @@ export default {
    * workflow
    */
   workflow: `${workflow}/`,
+  commanderPosexe: (type:string)=>`${workflow}/commander-posexe/${type}`,
 
   keycloakLogSSO: `${org}/keycloak/log/sso`,
 
diff --git a/src/interface/Main.ts b/src/interface/Main.ts
index 61e21db..d73d63f 100644
--- a/src/interface/Main.ts
+++ b/src/interface/Main.ts
@@ -12,6 +12,7 @@ interface ProfileData {
   citizenId?: string;
   salary?: number|null;
   birthDate?: string;
+  keycloakId?: string;
   org?: string;
   dateStart?: string;
   dateRetireLaw?: string;
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index 7a53d6e..36cd08d 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -1,13 +1,21 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { onMounted, ref, watch } from "vue";
 
+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 DialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 const mixin = useCounterMixin();
 const dataStore = useLeaveStore();
-const { date2Thai } = mixin;
+const storeData = useDataStore();
+const { date2Thai, showLoader, hideLoader, messageError } = mixin;
 
+const modal = ref<boolean>(false);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   model: {
@@ -16,6 +24,110 @@ const props = defineProps({
   },
 });
 
+const $q = useQuasar();
+const isAct = ref<boolean>(false);
+const search = ref<string>("");
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const selected = ref<any[]>([]);
+const rows = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveNameOrg",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveNameOrg",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function onPerson() {
+  modal.value = true;
+  getCommander();
+}
+
+function onSubmit() {
+  modal.value = false;
+  dataStore.dear = selected.value[0].firstName
+    ? `${selected.value[0].prefix}${selected.value[0].firstName} ${selected.value[0].lastName}`
+    : "";
+
+  dataStore.commanderPosition = selected.value[0].posExecutiveNameOrg;
+}
+
+function closeDialog() {
+  modal.value = false;
+}
+
+function getCommander() {
+  showLoader();
+  http
+    .put(config.API.commanderPosexe("operate"), {
+      isAct: isAct.value,
+      keyword: search.value,
+      page: pagination.value.page,
+      pageSize: pagination.value.rowsPerPage,
+      keycloakId: storeData.formData.keycloakId,
+    })
+    .then((res) => {
+      rows.value = res.data.result.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function getSearch() {
+  pagination.value.page = 1;
+  getCommander();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /**Hook */
 onMounted(() => {
   dataStore.typeLeave = "";
@@ -24,9 +136,37 @@ onMounted(() => {
 
 <template>
   <q-card bordered class="q-pa-md bg-grey-1">
+    <div class="col-12 row q-pa-sm q-col-gutter-sm items-center">
+      <q-input
+        v-model="dataStore.dear"
+        dense
+        outlined
+        bg-color="white"
+        label="เรียน (ชื่อ - นามสกุล)"
+        class="col-4"
+      ></q-input>
+      <q-input
+        v-model="dataStore.commanderPosition"
+        dense
+        outlined
+        bg-color="white"
+        label="เรียน (ตำแหน่ง)"
+        class="col-4"
+      ></q-input>
+      <div class="col-4">
+        <q-btn
+          class="bg-secondary text-white"
+          icon="add"
+          unelevated
+          @click="onPerson"
+          ><q-tooltip>เพิ่มรายชื่อ</q-tooltip></q-btn
+        >
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
     <div class="col-12 row q-pa-sm q-col-gutter-sm">
       <datepicker
-        class="col-12 col-sm-4"
+        class="col-12 col-sm-6"
         menu-class-name="modalfix"
         v-model="dataStore.dateSendLeave"
         :locale="'th'"
@@ -70,7 +210,7 @@ onMounted(() => {
         </template>
       </datepicker>
       <q-input
-        class="col-12 col-sm-4"
+        class="col-12 col-sm-6"
         dense
         bg-color="white"
         outlined
@@ -78,7 +218,7 @@ onMounted(() => {
         v-model="dataStore.typeLeave"
         label="เรื่อง"
       />
-      <q-input
+      <!-- <q-input
         class="col-12 col-sm-4"
         dense
         outlined
@@ -86,7 +226,7 @@ onMounted(() => {
         bg-color="white"
         v-model="dataStore.commanderPosition"
         label="เรียน"
-      />
+      /> -->
 
       <q-input
         class="col-12 col-sm-4"
@@ -155,4 +295,139 @@ onMounted(() => {
       />
     </div>
   </q-card>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="`เลือกผู้บังคับบัญชา`" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <div class="row q-col-gutter-md items-start">
+                <div class="col-12 col-sm-4 col-md-4">
+                  <q-input
+                    v-model="search"
+                    outlined
+                    hide-bottom-space
+                    dense
+                    label="คำค้น"
+                  />
+                </div>
+                <q-checkbox
+                  keep-color
+                  v-model="isAct"
+                  label="แสดงเฉพาะรักษาการแทน"
+                  color="primary"
+                >
+                  <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
+                </q-checkbox>
+                <q-space />
+
+                <div class="col-12 col-sm-6 col-md-3">
+                  <q-btn
+                    color="primary"
+                    icon="search"
+                    label="ค้นหา"
+                    class="full-width q-pa-sm"
+                    outline
+                    @click.prevent="getCommander"
+                  >
+                  </q-btn>
+                </div>
+              </div>
+            </div>
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                row-key="key"
+                flat
+                bordered
+                :paging="true"
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                selection="single"
+                @update:pagination="updatePagination"
+                v-model:selected="selected"
+              >
+                <template v-slot:pagination="scope">
+                  ทั้งหมด {{ total }} รายการ
+                  <q-pagination
+                    v-model="pagination.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="Number(totalList)"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    :max-pages="5"
+                    @update:model-value="getSearch"
+                  ></q-pagination>
+                </template>
+
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.checkBox"
+                  />
+                </template>
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width />
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td>
+                      <q-checkbox
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="props.selected"
+                      />
+                    </q-td>
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'">
+                        {{
+                          (pagination.page - 1) * pagination.rowsPerPage +
+                          props.rowIndex +
+                          1
+                        }}
+                      </div>
+                      <div v-else>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 050e5ed..353754b 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -316,8 +316,6 @@ export const useLeaveStore = defineStore("Leave", () => {
         const data = res.data.result;
         dateSendLeave.value = data.dateSendLeave;
         leaveTypeName.value = data.leaveTypeName;
-        dear.value = data.dear;
-        commanderPosition.value = data.commanderPosition;
         fullName.value = data.fullName;
         positionName.value = data.positionName;
         positionLevelName.value = data.positionLevelName;
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 76f6dc0..72dedf6 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -36,6 +36,7 @@ const {
   showLoader,
   hideLoader,
   convertDateToAPI,
+  dialogMessageNotify,
 } = mixin;
 
 const model = ref<string>("");
@@ -58,29 +59,34 @@ async function fectOptionType() {
 
 function onSubmit(postData: FormData, isLeave: boolean = true) {
   if (isLeave) {
-    dialogConfirm($q, async () => {
-      showLoader();
-      if (model.value === "LV-006" || model.value === "LV-008") {
-        postData.append("leaveSubTypeName", modelSpecific.value);
-      }
-      if (postData.get("leaveEndDate") === postData.get("leaveStartDate")) {
-        postData.set("leaveRangeEnd", postData.get("leaveRange") as string);
-      }
+    if (dataStore.commanderPosition !== "" && dataStore.dear !== "") {
+      dialogConfirm($q, async () => {
+        showLoader();
+        if (model.value === "LV-006" || model.value === "LV-008") {
+          postData.append("leaveSubTypeName", modelSpecific.value);
+        }
+        if (postData.get("leaveEndDate") === postData.get("leaveStartDate")) {
+          postData.set("leaveRangeEnd", postData.get("leaveRange") as string);
+        }
+        postData.append("commanderPosition", dataStore.commanderPosition);
+        postData.append("dear", dataStore.dear);
+        await http
+          .post(config.API.leaveUser(), postData)
 
-      await http
-        .post(config.API.leaveUser(), postData)
-
-        .then((res) => {
-          router.push(`/leave/edit/${res.data.result.id}`);
-          success($q, "บันทึกสำเร็จ");
-        })
-        .catch((e: any) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    });
+          .then((res) => {
+            router.push(`/leave/edit/${res.data.result.id}`);
+            success($q, "บันทึกสำเร็จ");
+          })
+          .catch((e: any) => {
+            messageError($q, e);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      });
+    } else {
+      dialogMessageNotify($q, "กรุณาเพิ่มรายชื่อ ผู้บังคับบัญชา");
+    }
   } else {
     messageError($q, "", "ไม่มีสิทธิ์ลา");
   }
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 6f2c64a..2b08e82 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -38,6 +38,7 @@ const {
   success,
   date2Thai,
   dialogRemove,
+  dialogMessageNotify,
 } = mixin;
 
 const titleName = ref<string>("");
@@ -221,27 +222,33 @@ async function fetchDataDetail(id: string) {
  */
 function onSubmit(formData: any, isLeave: boolean = true) {
   if (isLeave) {
-    dialogConfirm($q, async () => {
-      showLoader();
-      if (model.value === "LV-006" || model.value === "LV-008") {
-        formData.append("leaveSubTypeName", modelSpecific.value);
-      }
-      if (formData.get("leaveEndDate") === formData.get("leaveStartDate")) {
-        formData.set("leaveRangeEnd", formData.get("leaveRange") as string);
-      }
-      await http
-        .put(config.API.leaveUserId(personalId.value), formData)
-        .then(async () => {
-          await fetchDataDetail(personalId.value);
-          success($q, "บันทึกสำเร็จ");
-        })
-        .catch((e: any) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    });
+    if (dataStore.commanderPosition !== "" && dataStore.dear !== "") {
+      dialogConfirm($q, async () => {
+        showLoader();
+        if (model.value === "LV-006" || model.value === "LV-008") {
+          formData.append("leaveSubTypeName", modelSpecific.value);
+        }
+        if (formData.get("leaveEndDate") === formData.get("leaveStartDate")) {
+          formData.set("leaveRangeEnd", formData.get("leaveRange") as string);
+        }
+        formData.append("commanderPosition", dataStore.commanderPosition);
+        formData.append("dear", dataStore.dear);
+        await http
+          .put(config.API.leaveUserId(personalId.value), formData)
+          .then(async () => {
+            await fetchDataDetail(personalId.value);
+            success($q, "บันทึกสำเร็จ");
+          })
+          .catch((e: any) => {
+            messageError($q, e);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      });
+    } else {
+      dialogMessageNotify($q, "กรุณาเพิ่มรายชื่อ ผู้บังคับบัญชา");
+    }
   } else {
     messageError($q, "", "ไม่มีสิทธิ์ลา");
   }
@@ -426,7 +433,7 @@ onMounted(async () => {
                 :on-confirm="onConfirm"
                 :click-delete="clickDelete"
               />
-              <HelpWifeBirthForm
+              <HelpWifeBirthForm5
                 v-if="model === 'LV-004'"
                 :data="formData"
                 :on-submit="onSubmit"
diff --git a/src/stores/data.ts b/src/stores/data.ts
index 2b4d032..29e9851 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -28,6 +28,7 @@ export const useDataStore = defineStore("dataMain", () => {
     posLevelName: "",
     salary: null,
     birthDate: "",
+    keycloakId: "",
     posNo: "",
     org: "",
     dateStart: "",
@@ -108,6 +109,7 @@ export const useDataStore = defineStore("dataMain", () => {
     formData.lastName = data.lastName;
     formData.position = data.position;
     formData.salary = data.salary;
+    formData.keycloakId = data.keycloak;
     formData.citizenId = data.citizenId;
     formData.birthDate = data.birthDate;
     formData.posTypeName = data.posTypeName;

From a87c2d30fe2e9d358924f3bb328c7656c1e267da Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 16 May 2025 14:54:07 +0700
Subject: [PATCH 097/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20hajj?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue | 1 +
 src/modules/05_leave/components/FormLeave/07_HajjForm.vue       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 5ab2efc..ce9394d 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -160,6 +160,7 @@ function onValidate() {
     formData.append("leaveTotal", formDataOrdination.leaveTotal);
     formData.append("leaveRange", formDataOrdination.leaveRange);
     formData.append("leaveRangeEnd", formDataOrdination.leaveRangeEnd);
+    formData.append("hajj", "false");
     props.onSubmit(formData, isLeave.value);
   }
 }
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index db88acf..c630c62 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -122,6 +122,7 @@ function onValidate() {
     formData.append("leaveTotal", formDataHaji.leaveTotal);
     formData.append("leaveRange", formDataHaji.leaveRange);
     formData.append("leaveRangeEnd", formDataHaji.leaveRangeEnd);
+    formData.append("hajj", 'true');
     props.onSubmit(formData, isLeave.value);
   }
 }

From 22f223178ab1654ad1b4f1426a083fb61ea9c40e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 23 May 2025 11:48:59 +0700
Subject: [PATCH 098/195] fix .prevent

---
 src/modules/02_transfer/views/Main.vue                        | 2 +-
 src/modules/08_KPI/components/Tab/02_Evaluator.vue            | 2 +-
 src/modules/10_registry/01_Information/02_ChangeName.vue      | 2 +-
 src/modules/10_registry/01_Information/05_Educations.vue      | 2 +-
 src/modules/10_registry/01_Information/06_Ability.vue         | 2 +-
 src/modules/10_registry/02_Government/03_Leave.vue            | 2 +-
 src/modules/10_registry/02_Government/04_Duty.vue             | 2 +-
 src/modules/10_registry/02_Government/05_Actposition.vue      | 2 +-
 src/modules/10_registry/02_Government/06_Assistance.vue       | 2 +-
 src/modules/10_registry/02_Government/07_Position.vue         | 2 +-
 src/modules/10_registry/03_Salary/01_Salary.vue               | 2 +-
 src/modules/10_registry/03_Salary/02_Nopaid.vue               | 2 +-
 src/modules/10_registry/04_Achievement/01_Certificate.vue     | 2 +-
 src/modules/10_registry/04_Achievement/02_Training.vue        | 2 +-
 src/modules/10_registry/04_Achievement/03_Insignia.vue        | 2 +-
 src/modules/10_registry/04_Achievement/04_Honor.vue           | 2 +-
 src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue | 2 +-
 src/modules/10_registry/05_Other/01_Other.vue                 | 2 +-
 src/modules/10_registry/Dialog/DialogHistory.vue              | 2 +-
 src/modules/10_registry/views/requestEditMain.vue             | 2 +-
 src/modules/11_probation/views/main.vue                       | 2 +-
 src/modules/11_probation/views/mainDetail.vue                 | 2 +-
 src/modules/13_portfolio/views/Main.vue                       | 2 +-
 src/modules/14_IDP/views/main.vue                             | 2 +-
 24 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index fe86ae3..5d4c3b5 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -219,7 +219,7 @@ onMounted(async () => {
                 debounce="300"
                 placeholder="ค้นหา"
                 style="max-width: 200px"
-                @keydown.enter="onSearch"
+                @keydown.enter.prevent="onSearch"
               >
                 <template v-slot:append>
                   <q-icon name="search" />
diff --git a/src/modules/08_KPI/components/Tab/02_Evaluator.vue b/src/modules/08_KPI/components/Tab/02_Evaluator.vue
index 3974086..51e47e4 100644
--- a/src/modules/08_KPI/components/Tab/02_Evaluator.vue
+++ b/src/modules/08_KPI/components/Tab/02_Evaluator.vue
@@ -175,7 +175,7 @@ onMounted(() => {
           debounce="300"
           v-model="filterKeyword"
           placeholder="ค้นหา"
-          @keydown.enter="onSearch"
+          @keydown.enter.prevent="onSearch"
         >
           <template v-slot:append>
             <q-icon name="search" />
diff --git a/src/modules/10_registry/01_Information/02_ChangeName.vue b/src/modules/10_registry/01_Information/02_ChangeName.vue
index 0a36de2..dcac788 100644
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/src/modules/10_registry/01_Information/02_ChangeName.vue
@@ -279,7 +279,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/01_Information/05_Educations.vue b/src/modules/10_registry/01_Information/05_Educations.vue
index 2fb6e5d..515fe2a 100644
--- a/src/modules/10_registry/01_Information/05_Educations.vue
+++ b/src/modules/10_registry/01_Information/05_Educations.vue
@@ -581,7 +581,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/01_Information/06_Ability.vue b/src/modules/10_registry/01_Information/06_Ability.vue
index a05e7ca..be54300 100644
--- a/src/modules/10_registry/01_Information/06_Ability.vue
+++ b/src/modules/10_registry/01_Information/06_Ability.vue
@@ -287,7 +287,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/02_Government/03_Leave.vue b/src/modules/10_registry/02_Government/03_Leave.vue
index 7120f43..c959295 100644
--- a/src/modules/10_registry/02_Government/03_Leave.vue
+++ b/src/modules/10_registry/02_Government/03_Leave.vue
@@ -361,7 +361,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/02_Government/04_Duty.vue b/src/modules/10_registry/02_Government/04_Duty.vue
index 1ff8476..e1efc99 100644
--- a/src/modules/10_registry/02_Government/04_Duty.vue
+++ b/src/modules/10_registry/02_Government/04_Duty.vue
@@ -320,7 +320,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/02_Government/05_Actposition.vue b/src/modules/10_registry/02_Government/05_Actposition.vue
index ffc0371..4e5ca14 100644
--- a/src/modules/10_registry/02_Government/05_Actposition.vue
+++ b/src/modules/10_registry/02_Government/05_Actposition.vue
@@ -260,7 +260,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/02_Government/06_Assistance.vue b/src/modules/10_registry/02_Government/06_Assistance.vue
index b9526ce..aac3697 100644
--- a/src/modules/10_registry/02_Government/06_Assistance.vue
+++ b/src/modules/10_registry/02_Government/06_Assistance.vue
@@ -337,7 +337,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 6f076ee..c32aba6 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -501,7 +501,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 25bb95f..b516136 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -703,7 +703,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/03_Salary/02_Nopaid.vue b/src/modules/10_registry/03_Salary/02_Nopaid.vue
index 1757c39..aa4d72f 100644
--- a/src/modules/10_registry/03_Salary/02_Nopaid.vue
+++ b/src/modules/10_registry/03_Salary/02_Nopaid.vue
@@ -301,7 +301,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/04_Achievement/01_Certificate.vue b/src/modules/10_registry/04_Achievement/01_Certificate.vue
index 6ec2af0..609ccea 100644
--- a/src/modules/10_registry/04_Achievement/01_Certificate.vue
+++ b/src/modules/10_registry/04_Achievement/01_Certificate.vue
@@ -302,7 +302,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/04_Achievement/02_Training.vue b/src/modules/10_registry/04_Achievement/02_Training.vue
index 1416ae5..9763c1e 100644
--- a/src/modules/10_registry/04_Achievement/02_Training.vue
+++ b/src/modules/10_registry/04_Achievement/02_Training.vue
@@ -419,7 +419,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/04_Achievement/03_Insignia.vue b/src/modules/10_registry/04_Achievement/03_Insignia.vue
index d8b0323..0e65605 100644
--- a/src/modules/10_registry/04_Achievement/03_Insignia.vue
+++ b/src/modules/10_registry/04_Achievement/03_Insignia.vue
@@ -517,7 +517,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/04_Achievement/04_Honor.vue b/src/modules/10_registry/04_Achievement/04_Honor.vue
index 58035f2..3a6366c 100644
--- a/src/modules/10_registry/04_Achievement/04_Honor.vue
+++ b/src/modules/10_registry/04_Achievement/04_Honor.vue
@@ -301,7 +301,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
index 698b13b..9c51513 100644
--- a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
+++ b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
@@ -225,7 +225,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/05_Other/01_Other.vue b/src/modules/10_registry/05_Other/01_Other.vue
index c1be9da..98c91ee 100644
--- a/src/modules/10_registry/05_Other/01_Other.vue
+++ b/src/modules/10_registry/05_Other/01_Other.vue
@@ -205,7 +205,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/10_registry/Dialog/DialogHistory.vue b/src/modules/10_registry/Dialog/DialogHistory.vue
index 0b67b99..e615ee9 100644
--- a/src/modules/10_registry/Dialog/DialogHistory.vue
+++ b/src/modules/10_registry/Dialog/DialogHistory.vue
@@ -88,7 +88,7 @@ watch(
               dense
               v-model="filter"
               label="ค้นหา"
-              @keydown.enter="onSearch"
+              @keydown.enter.prevent="onSearch"
             >
               <template v-slot:append>
                 <q-icon name="search" />
diff --git a/src/modules/10_registry/views/requestEditMain.vue b/src/modules/10_registry/views/requestEditMain.vue
index a271391..a1dce77 100644
--- a/src/modules/10_registry/views/requestEditMain.vue
+++ b/src/modules/10_registry/views/requestEditMain.vue
@@ -360,7 +360,7 @@ onMounted(async () => {
               clearable
               dense
               label="ค้นหา"
-              @keydown.enter="updateStatusValue()"
+              @keydown.enter.prevent="updateStatusValue()"
             >
             </q-input>
           </div>
diff --git a/src/modules/11_probation/views/main.vue b/src/modules/11_probation/views/main.vue
index eac8c35..86245ea 100644
--- a/src/modules/11_probation/views/main.vue
+++ b/src/modules/11_probation/views/main.vue
@@ -301,7 +301,7 @@ onMounted(async () => {
                 v-model="filter"
                 label="ค้นหา"
                 :style="mode ? `max-width: 200px` : `max-width: 150px`"
-                @keydown.enter="onSearch"
+                @keydown.enter.prevent="onSearch"
               >
                 <template v-slot:append>
                   <q-icon name="search" />
diff --git a/src/modules/11_probation/views/mainDetail.vue b/src/modules/11_probation/views/mainDetail.vue
index 6a35432..4efbad1 100644
--- a/src/modules/11_probation/views/mainDetail.vue
+++ b/src/modules/11_probation/views/mainDetail.vue
@@ -337,7 +337,7 @@ onMounted(async () => {
                 v-model="filter"
                 label="ค้นหา"
                 :style="mode ? `max-width: 200px` : `max-width: 150px`"
-                @keydown.enter="onSearch"
+                @keydown.enter.prevent="onSearch"
               >
                 <template v-slot:append>
                   <q-icon name="search" />
diff --git a/src/modules/13_portfolio/views/Main.vue b/src/modules/13_portfolio/views/Main.vue
index f9de056..8d1141d 100644
--- a/src/modules/13_portfolio/views/Main.vue
+++ b/src/modules/13_portfolio/views/Main.vue
@@ -173,7 +173,7 @@ onMounted(async () => {
                 debounce="300"
                 placeholder="ค้นหา"
                 style="max-width: 200px"
-                @keydown.enter="onSearch"
+                @keydown.enter.prevent="onSearch"
               >
                 <template v-slot:append>
                   <q-icon name="search" />
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index 0c1fddf..7a6b366 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -346,7 +346,7 @@ onMounted(async () => {
               outlined
               dense
               label="ค้นหา"
-              @keydown.enter="getSerach()"
+              @keydown.enter.prevent="getSerach()"
               style="width: 200px"
             >
               <template v-slot:append>

From dee3eb824ab824220f8bf913d3470a0556532e23 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 23 May 2025 11:50:26 +0700
Subject: [PATCH 099/195] fix

---
 src/modules/10_registry/02_Government/02_Discipline.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/10_registry/02_Government/02_Discipline.vue b/src/modules/10_registry/02_Government/02_Discipline.vue
index d8f1c4c..bda0aad 100644
--- a/src/modules/10_registry/02_Government/02_Discipline.vue
+++ b/src/modules/10_registry/02_Government/02_Discipline.vue
@@ -215,7 +215,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter.pervent="onSearch"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />

From 57df5cc8d5eee6e468cdb12da3fe80d4dc626c80 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 28 May 2025 11:10:07 +0700
Subject: [PATCH 100/195] fix load

---
 src/modules/03_retire/views/DialogRetire.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/03_retire/views/DialogRetire.vue b/src/modules/03_retire/views/DialogRetire.vue
index 7762614..ee1c638 100644
--- a/src/modules/03_retire/views/DialogRetire.vue
+++ b/src/modules/03_retire/views/DialogRetire.vue
@@ -45,8 +45,8 @@ function onSubmit() {
         .put(config.API.cancelResignByType(link.value, id.value), {
           reason: reason.value,
         })
-        .then(() => {
-          props.fectData?.(id.value);
+        .then(async () => {
+          await props.fectData?.(id.value);
           success($q, "ยกเลิกการลาออกสำเร็จ");
         })
         .catch((err) => {

From 5211555eae87b0b76b53a5273e083ac2354be036 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 29 May 2025 14:27:15 +0700
Subject: [PATCH 101/195] =?UTF-8?q?fix=20=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/03_retire/store.ts            | 9 +++++----
 src/modules/03_retire/views/addRetire.vue | 1 +
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/modules/03_retire/store.ts b/src/modules/03_retire/store.ts
index 3c48e6f..e322d20 100644
--- a/src/modules/03_retire/store.ts
+++ b/src/modules/03_retire/store.ts
@@ -18,11 +18,13 @@ export const useRestDataStore = defineStore("Rest", () => {
       case "DONE":
         return "ออกคำสั่งเสร็จสิ้น";
       case "DONECANCEL":
-        return "ยกเลิกการลาออก";
+        return "ยกเลิกการลาออกสำเร็จ";
       case "CANCEL":
-        return "ยกเลิกการลาออก";
+        return "ยกเลิกการลาออกสำเร็จ";
       case "DONEREJECT":
         return "ออกคำสั่งยกเลิกลาออกเสร็จแล้ว";
+      case "CANCELING":
+        return "กำลังดำเนิดการยกเลิกการ";
       default:
         return "-";
     }
@@ -39,9 +41,8 @@ export const useRestDataStore = defineStore("Rest", () => {
     }
   }
 
-  
   return {
     statusText,
-    convertStatusText
+    convertStatusText,
   };
 });
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index d1b164e..2dfe2ff 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -303,6 +303,7 @@ onMounted(async () => {
               v-if="
                 dataDetail.statusMain !== 'CANCEL' &&
                 dataDetail.statusMain !== 'DONECANCEL' &&
+                dataDetail.statusMain !== 'CANCELING' &&
                 checkCancleLeave
               "
               unelevated

From f9ac5b015f27c306492c79bca0f6b362faec5ce5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 30 May 2025 14:17:51 +0700
Subject: [PATCH 102/195] =?UTF-8?q?fix=20=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2=20=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=9A=E0=B8=B1=E0=B8=87=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=E0=B8=9A=E0=B8=B1=E0=B8=8D=E0=B8=8A=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/components/FormLeave/Form.vue    | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index 36cd08d..ac50dc6 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -87,11 +87,14 @@ function onSubmit() {
 
 function closeDialog() {
   modal.value = false;
+  search.value = "";
+  rows.value = [];
+  selected.value = [];
 }
 
-function getCommander() {
+async function getCommander() {
   showLoader();
-  http
+  await http
     .put(config.API.commanderPosexe("operate"), {
       isAct: isAct.value,
       keyword: search.value,
@@ -104,7 +107,6 @@ function getCommander() {
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
     .finally(() => {
       hideLoader();
@@ -313,6 +315,7 @@ onMounted(() => {
                     hide-bottom-space
                     dense
                     label="คำค้น"
+                    @keydown.enter.prevent="getSearch()"
                   />
                 </div>
                 <q-checkbox
@@ -332,7 +335,7 @@ onMounted(() => {
                     label="ค้นหา"
                     class="full-width q-pa-sm"
                     outline
-                    @click.prevent="getCommander"
+                    @click.prevent="getSearch()"
                   >
                   </q-btn>
                 </div>
@@ -423,9 +426,14 @@ onMounted(() => {
         <q-separator />
 
         <q-card-actions align="right">
-          <q-btn label="บันทึก" color="secondary" type="submit"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          <q-btn
+            label="บันทึก"
+            color="secondary"
+            type="submit"
+            :disable="selected.length === 0"
           >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
         </q-card-actions>
       </q-form>
     </q-card>

From 7e2132f45f5fa7c52f63431b70f71c15fc0552eb Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 30 May 2025 14:21:29 +0700
Subject: [PATCH 103/195] check space report

---
 .../components/ExpertPageDetail.vue           | 292 +++++++++---------
 1 file changed, 154 insertions(+), 138 deletions(-)

diff --git a/src/modules/06_evaluate/components/ExpertPageDetail.vue b/src/modules/06_evaluate/components/ExpertPageDetail.vue
index 070a51b..c722a0a 100644
--- a/src/modules/06_evaluate/components/ExpertPageDetail.vue
+++ b/src/modules/06_evaluate/components/ExpertPageDetail.vue
@@ -181,150 +181,150 @@ async function onClickDowloadFile(
   fileName: string
 ) {
   showLoader();
-  let educations: any = [];
-  if (profile.value != null) {
-    profile.value.educations.map((e: any) => {
-      educations.push({
-        educationLevel: e.educationLevel ?? "",
-        finishYear:
-          e.finishDate == null
-            ? ""
-            : new Date(e.finishDate).getFullYear() + 543,
-        institute: e.institute ?? "",
-      });
-    });
-  }
-  let certificates: any = [];
-  if (profile.value != null) {
-    profile.value.certificates.map((e: any) => {
-      certificates.push({
-        certificateNo: e.certificateNo ?? "",
-        certificateType: e.certificateType ?? "",
-        issuer: e.issuer ?? "",
-      });
-    });
-  }
-  let salaries: any = [];
-  if (profile.value != null) {
-    profile.value.salaries.map((e: any) => {
-      salaries.push({
-        date: e.date == null ? "" : date2Thai(new Date(e.date)),
-        position: e.position ?? "",
-        amount: e.amount ?? "",
-      });
-    });
-  }
-  let trainings: any = [];
-  if (profile.value != null) {
-    profile.value.trainings.map((e: any) => {
-      trainings.push({
-        yearly: e.yearly ?? "",
-        startDate: e.startDate == null ? "" : date2Thai(new Date(e.startDate)),
-        endDate: e.endDate == null ? "" : date2Thai(new Date(e.endDate)),
-        name: e.name ?? "",
-        topic: e.topic ?? "",
-      });
-    });
-  }
-  const data = Object.assign(
-    { educations: educations },
-    { certificates: certificates },
-    { salaries: salaries },
-    { trainings: trainings },
-    {
-      fullName: dataPerson.formData.firstName
-        ? `${dataPerson.formData.prefix}${dataPerson.formData.firstName} ${dataPerson.formData.lastName}`
-        : "",
-    },
-    {
-      position: dataPerson.formData.position
-        ? dataPerson.formData.position
-        : "",
-    },
-    {
-      positionLevel: dataPerson.formData.posLevelName
-        ? dataPerson.formData.posLevelName
-        : "",
-    },
-    { posNo: dataPerson.formData.posNo ? dataPerson.formData.posNo : "" },
-    { org: dataPerson.formData ? dataPerson.formData.org : "" },
-    {
-      birthDate: dataPerson.formData.birthDate
-        ? date2Thai(new Date(dataPerson.formData.birthDate))
-        : "",
-    },
-    {
-      govAge: profile.value.government
-        ? `${
-            profile.value.government.govAge.year !== 0
-              ? `${profile.value.government.govAge.year} ปี`
-              : ""
-          } ${
-            profile.value.government.govAge.month !== 0
-              ? `${profile.value.government.govAge.month} เดือน`
-              : ""
-          } ${
-            profile.value.government.govAge.day !== 0
-              ? `${profile.value.government.govAge.day} วัน`
-              : ""
-          }`
-        : ``,
-    },
-    {
-      positionLevelNew:
-        profile.value == null
-          ? ""
-          : profile.value.type == "EXPERT"
-          ? "ชำนาญการ"
-          : "ชำนาญการพิเศษ",
-    },
+  // let educations: any = [];
+  // if (profile.value != null) {
+  //   profile.value.educations.map((e: any) => {
+  //     educations.push({
+  //       educationLevel: e.educationLevel ?? "",
+  //       finishYear:
+  //         e.finishDate == null
+  //           ? ""
+  //           : new Date(e.finishDate).getFullYear() + 543,
+  //       institute: e.institute ?? "",
+  //     });
+  //   });
+  // }
+  // let certificates: any = [];
+  // if (profile.value != null) {
+  //   profile.value.certificates.map((e: any) => {
+  //     certificates.push({
+  //       certificateNo: e.certificateNo ?? "",
+  //       certificateType: e.certificateType ?? "",
+  //       issuer: e.issuer ?? "",
+  //     });
+  //   });
+  // }
+  // let salaries: any = [];
+  // if (profile.value != null) {
+  //   profile.value.salaries.map((e: any) => {
+  //     salaries.push({
+  //       date: e.date == null ? "" : date2Thai(new Date(e.date)),
+  //       position: e.position ?? "",
+  //       amount: e.amount ?? "",
+  //     });
+  //   });
+  // }
+  // let trainings: any = [];
+  // if (profile.value != null) {
+  //   profile.value.trainings.map((e: any) => {
+  //     trainings.push({
+  //       yearly: e.yearly ?? "",
+  //       startDate: e.startDate == null ? "" : date2Thai(new Date(e.startDate)),
+  //       endDate: e.endDate == null ? "" : date2Thai(new Date(e.endDate)),
+  //       name: e.name ?? "",
+  //       topic: e.topic ?? "",
+  //     });
+  //   });
+  // }
+  // const data = Object.assign(
+  //   { educations: educations },
+  //   { certificates: certificates },
+  //   { salaries: salaries },
+  //   { trainings: trainings },
+  //   {
+  //     fullName: dataPerson.formData.firstName
+  //       ? `${dataPerson.formData.prefix}${dataPerson.formData.firstName} ${dataPerson.formData.lastName}`
+  //       : "",
+  //   },
+  //   {
+  //     position: dataPerson.formData.position
+  //       ? dataPerson.formData.position
+  //       : "",
+  //   },
+  //   {
+  //     positionLevel: dataPerson.formData.posLevelName
+  //       ? dataPerson.formData.posLevelName
+  //       : "",
+  //   },
+  //   { posNo: dataPerson.formData.posNo ? dataPerson.formData.posNo : "" },
+  //   { org: dataPerson.formData ? dataPerson.formData.org : "" },
+  //   {
+  //     birthDate: dataPerson.formData.birthDate
+  //       ? date2Thai(new Date(dataPerson.formData.birthDate))
+  //       : "",
+  //   },
+  //   {
+  //     govAge: profile.value.government
+  //       ? `${
+  //           profile.value.government.govAge.year !== 0
+  //             ? `${profile.value.government.govAge.year} ปี`
+  //             : ""
+  //         } ${
+  //           profile.value.government.govAge.month !== 0
+  //             ? `${profile.value.government.govAge.month} เดือน`
+  //             : ""
+  //         } ${
+  //           profile.value.government.govAge.day !== 0
+  //             ? `${profile.value.government.govAge.day} วัน`
+  //             : ""
+  //         }`
+  //       : ``,
+  //   },
+  //   {
+  //     positionLevelNew:
+  //       profile.value == null
+  //         ? ""
+  //         : profile.value.type == "EXPERT"
+  //         ? "ชำนาญการ"
+  //         : "ชำนาญการพิเศษ",
+  //   },
 
-    tp === "EV1_005"
-      ? { salary: dataPerson.formData.salary ? dataPerson.formData.salary : "" }
-      : null,
+  //   tp === "EV1_005"
+  //     ? { salary: dataPerson.formData.salary ? dataPerson.formData.salary : "" }
+  //     : null,
 
-    tp === "EV1_006"
-      ? {
-          years: {
-            lastTwoYear: toThaiNumber(currentYear - 2 + 543),
-            lastOneYear: toThaiNumber(currentYear - 1 + 543),
-            currentYear: toThaiNumber(currentYear + 543),
-          },
-        }
-      : null,
-    tp === "EV1_006" || tp === "EV1_008"
-      ? { commanderFullname: formData.commanderFullname }
-      : null,
-    tp === "EV1_006" || tp === "EV1_008"
-      ? { commanderPosition: formData.commanderPosition }
-      : null,
-    tp === "EV1_006" ? { commanderOrg: "" } : null,
-    tp === "EV1_006" || tp === "EV1_008"
-      ? { commanderAboveFullname: formData.commanderAboveFullname }
-      : null,
-    tp === "EV1_006" || tp === "EV1_008"
-      ? { commanderAbovePosition: formData.commanderAbovePosition }
-      : null,
-    tp === "EV1_006" ? { commanderAboveOrg: "" } : null,
+  //   tp === "EV1_006"
+  //     ? {
+  //         years: {
+  //           lastTwoYear: toThaiNumber(currentYear - 2 + 543),
+  //           lastOneYear: toThaiNumber(currentYear - 1 + 543),
+  //           currentYear: toThaiNumber(currentYear + 543),
+  //         },
+  //       }
+  //     : null,
+  //   tp === "EV1_006" || tp === "EV1_008"
+  //     ? { commanderFullname: formData.commanderFullname }
+  //     : null,
+  //   tp === "EV1_006" || tp === "EV1_008"
+  //     ? { commanderPosition: formData.commanderPosition }
+  //     : null,
+  //   tp === "EV1_006" ? { commanderOrg: "" } : null,
+  //   tp === "EV1_006" || tp === "EV1_008"
+  //     ? { commanderAboveFullname: formData.commanderAboveFullname }
+  //     : null,
+  //   tp === "EV1_006" || tp === "EV1_008"
+  //     ? { commanderAbovePosition: formData.commanderAbovePosition }
+  //     : null,
+  //   tp === "EV1_006" ? { commanderAboveOrg: "" } : null,
 
-    tp === "EV1_007" ? { positionName: "-" } : null,
-    tp === "EV1_007" ? { positionLeaveName: "-" } : null,
+  //   tp === "EV1_007" ? { positionName: "-" } : null,
+  //   tp === "EV1_007" ? { positionLeaveName: "-" } : null,
 
-    tp === "EV1_009" ? { dateStart: dataPerson.formData.dateStart } : null,
-    tp === "EV1_009"
-      ? { dateRetireLaw: dataPerson.formData.dateRetireLaw }
-      : null,
+  //   tp === "EV1_009" ? { dateStart: dataPerson.formData.dateStart } : null,
+  //   tp === "EV1_009"
+  //     ? { dateRetireLaw: dataPerson.formData.dateRetireLaw }
+  //     : null,
 
-    tp === "EV1_010" ? { subject: formData.subject } : null,
-    { typeTh: "เชี่ยวชาญ" },
-    { posNoWithSym: `(${dataPerson.formData.posNo})` },
-    { orgNoNewLine: dataPerson.formData.org }
-  );
+  //   tp === "EV1_010" ? { subject: formData.subject } : null,
+  //   { typeTh: "เชี่ยวชาญ" },
+  //   { posNoWithSym: `(${dataPerson.formData.posNo})` },
+  //   { orgNoNewLine: dataPerson.formData.org }
+  // );
 
   const body = {
     template: tp,
     reportName: templateName,
-    data: data,
+    data: reportData.value,
   };
   await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
 }
@@ -402,7 +402,7 @@ async function uploadfile(uploadUrl: string, file: any) {
     });
 }
 
-function getData() {
+async function getData() {
   showLoader();
   http
     .get(config.API.evaluationExpertise + `/${evaluateId.value}`)
@@ -418,9 +418,10 @@ function getData() {
     })
     .catch((e) => {
       messageError($q, e);
+      hideLoader();
     })
     .finally(() => {
-      hideLoader();
+      
     });
 }
 
@@ -447,9 +448,24 @@ const keyObject = ref<string[]>([
   "assessments",
   "government",
 ]);
+const reportData = ref<any>()
+async function getCheckSpace(){
+  http
+  .get(config.API.evaluationReportCheckspecByid(evaluateId.value))
+  .then((res)=>{
+    reportData.value = res.data.result
+  })
+  .catch((e)=>{
+    messageError($q,e)
+    hideLoader();
+  }).finally(()=>{
+
+  })
+}
+
 onMounted(() => {
   showLoader();
-  Promise.all([getData(), ...keyObject.value.map(getDetail)])
+  Promise.all([getData(),getCheckSpace(), ...keyObject.value.map(getDetail)])
     .then(() => {})
     .catch((e) => {
       hideLoader();

From c1622582d2580bb193c5ae20edede7a56355197b Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 30 May 2025 14:29:16 +0700
Subject: [PATCH 104/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B9=80=E0=B9=80=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ExpertPageDetail.vue           | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/modules/06_evaluate/components/ExpertPageDetail.vue b/src/modules/06_evaluate/components/ExpertPageDetail.vue
index c722a0a..048da81 100644
--- a/src/modules/06_evaluate/components/ExpertPageDetail.vue
+++ b/src/modules/06_evaluate/components/ExpertPageDetail.vue
@@ -41,8 +41,14 @@ const formCommand = reactive<FormCommand>({
   commanderAboveFullname: "", //ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
   commanderAbovePosition: "", //ตำแหน่ง ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
   author: "", //เจ้าของผลงาน
-  subject: "", //ชื่อผลงาน
+  subject: [], //ชื่อผลงาน
   assignedPosition: "",
+  commanderPositionOld: "",
+  commanderOrgOld: "",
+  commanderOrg: "",
+  commanderAbovePositionOld: "",
+  commanderAboveOrgOld: "",
+  commanderAboveOrg: "",
 });
 
 const formData = reactive<FormData>({
@@ -420,9 +426,7 @@ async function getData() {
       messageError($q, e);
       hideLoader();
     })
-    .finally(() => {
-      
-    });
+    .finally(() => {});
 }
 
 function getDetail(type: any) {
@@ -448,24 +452,23 @@ const keyObject = ref<string[]>([
   "assessments",
   "government",
 ]);
-const reportData = ref<any>()
-async function getCheckSpace(){
+const reportData = ref<any>();
+async function getCheckSpace() {
   http
-  .get(config.API.evaluationReportCheckspecByid(evaluateId.value))
-  .then((res)=>{
-    reportData.value = res.data.result
-  })
-  .catch((e)=>{
-    messageError($q,e)
-    hideLoader();
-  }).finally(()=>{
-
-  })
+    .get(config.API.evaluationReportCheckspecByid(evaluateId.value))
+    .then((res) => {
+      reportData.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
 }
 
 onMounted(() => {
   showLoader();
-  Promise.all([getData(),getCheckSpace(), ...keyObject.value.map(getDetail)])
+  Promise.all([getData(), getCheckSpace(), ...keyObject.value.map(getDetail)])
     .then(() => {})
     .catch((e) => {
       hideLoader();

From f9402606389dace937106d958a1837817d2bf80d Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 30 May 2025 16:36:32 +0700
Subject: [PATCH 105/195] fix status

---
 src/modules/03_retire/store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/03_retire/store.ts b/src/modules/03_retire/store.ts
index e322d20..c5b28f5 100644
--- a/src/modules/03_retire/store.ts
+++ b/src/modules/03_retire/store.ts
@@ -24,7 +24,7 @@ export const useRestDataStore = defineStore("Rest", () => {
       case "DONEREJECT":
         return "ออกคำสั่งยกเลิกลาออกเสร็จแล้ว";
       case "CANCELING":
-        return "กำลังดำเนิดการยกเลิกการ";
+        return "กำลังดำเนินการยกเลิก";
       default:
         return "-";
     }

From a1bffb7e3b040bfcffe2a02a80617c4a9b08774a Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 5 Jun 2025 10:53:02 +0700
Subject: [PATCH 106/195] =?UTF-8?q?=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B9=80=E0=B8=AA=E0=B9=89=E0=B8=99?=
 =?UTF-8?q?=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/org/api.org.ts                             |  1 +
 src/modules/05_leave/components/FormLeave/Form.vue | 11 ++++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/api/org/api.org.ts b/src/api/org/api.org.ts
index e4dd00d..0ab91e2 100644
--- a/src/api/org/api.org.ts
+++ b/src/api/org/api.org.ts
@@ -170,6 +170,7 @@ export default {
    */
   workflow: `${workflow}/`,
   commanderPosexe: (type:string)=>`${workflow}/commander-posexe/${type}`,
+  commanderOperate: `${workflow}/commander/operate`,
 
   keycloakLogSSO: `${org}/keycloak/log/sso`,
 
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index ac50dc6..f92d057 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -61,11 +61,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "posExecutiveNameOrg",
+    name: "posExecutiveName",
     align: "left",
     label: "ตำแหน่งทางการบริหาร",
     sortable: true,
-    field: "posExecutiveNameOrg",
+    field: "posExecutiveName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -82,7 +82,7 @@ function onSubmit() {
     ? `${selected.value[0].prefix}${selected.value[0].firstName} ${selected.value[0].lastName}`
     : "";
 
-  dataStore.commanderPosition = selected.value[0].posExecutiveNameOrg;
+  dataStore.commanderPosition = selected.value[0].posExecutiveName;
 }
 
 function closeDialog() {
@@ -95,12 +95,13 @@ function closeDialog() {
 async function getCommander() {
   showLoader();
   await http
-    .put(config.API.commanderPosexe("operate"), {
+    .put(config.API.commanderOperate, {
       isAct: isAct.value,
-      keyword: search.value,
+      keyword: search.value.trim(),
       page: pagination.value.page,
       pageSize: pagination.value.rowsPerPage,
       keycloakId: storeData.formData.keycloakId,
+      type:storeData.officerType.toLocaleUpperCase() == 'OFFICER' ? 'officer':'employee'
     })
     .then((res) => {
       rows.value = res.data.result.data;

From 7081399c2fce5bf7010a0d37148f82c3acd98948 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Jun 2025 10:25:38 +0700
Subject: [PATCH 107/195] fix class modalfix ==> 03_retire

---
 src/modules/03_retire/views/addRetire.vue | 1 -
 src/style/quasar-variables.sass           | 3 +++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 2dfe2ff..2e82e3b 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -398,7 +398,6 @@ onMounted(async () => {
                   ? 'col-md-3 col-xs-12'
                   : 'col-md-3 col-xs-12 inputgreen'
               "
-              menu-class-name="modalfix"
               v-model="dateLeave"
               :locale="'th'"
               autoApply
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index 3ae97d0..7271c98 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -132,3 +132,6 @@ input.input-alert
 
 .filter-card
     background-color: #f1f1f1b0
+
+.modalfix
+    position: fixed !important

From ecc0a27ec79e5b6000c56488b5b65727bd76aeb5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Jun 2025 10:38:41 +0700
Subject: [PATCH 108/195] fix class nodalfix ==> 05_leave

---
 .../components/FormLeave/01_SickForm.vue      | 45 ++++-----
 .../components/FormLeave/03_Birth.vue         | 31 ++++---
 .../FormLeave/04_HelpWifeBirthForm.vue        | 38 ++++----
 .../components/FormLeave/05_VacationForm.vue  | 37 ++++----
 .../FormLeave/06_OrdinationForm.vue           | 59 ++++++------
 .../components/FormLeave/07_HajjForm.vue      | 38 ++++----
 .../components/FormLeave/08_MilitaryForm.vue  | 54 +++++------
 .../components/FormLeave/09_StudyForm.vue     | 63 +++++++------
 .../components/FormLeave/10_TrainForm.vue     | 62 ++++++-------
 .../FormLeave/11_WorkInternationalForm.vue    | 53 ++++++-----
 .../FormLeave/12_FollowSpouseForm.vue         | 91 +++++++++----------
 .../FormLeave/13_RehabilitationForm.vue       | 47 +++++-----
 .../05_leave/components/FormLeave/Form.vue    |  6 +-
 src/modules/05_leave/components/Table.vue     |  1 -
 src/modules/05_leave/store.ts                 |  6 +-
 src/plugins/genreport.ts                      |  7 +-
 16 files changed, 317 insertions(+), 321 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 63e77e3..42ebfc1 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -15,14 +15,8 @@ const typeForm = defineModel<string>("type", { required: true });
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
+  mixin;
 const edit = ref<boolean>(true);
 const leaveDocumentRef = ref<any>(null);
 
@@ -200,22 +194,25 @@ const dateEndInputStyle = computed(() => {
 const leaveId = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const statusCheck = ref<any>("");
-watch(props.data, () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataSick.leaveWrote = props.data.leaveWrote;
-    formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
-    formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
-    formDataSick.contractTel = props.data.contractTel;
-    formDataSick.leaveTotal = props.data.leaveTotal;
-    formDataSick.leaveDetail = props.data.leaveDetail;
-    formDataSick.leaveRange = props.data.leaveRange;
-    formDataSick.leaveRangeEnd = props.data.leaveRangeEnd;
-    leaveDocumentList.value = props.data.leaveDocument;
-    statusCheck.value = props.data.status;
-    formDataSick.leaveDocument = [];
+watch(
+  () => props.data,
+  () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataSick.leaveWrote = props.data.leaveWrote;
+      formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
+      formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
+      formDataSick.contractTel = props.data.contractTel;
+      formDataSick.leaveTotal = props.data.leaveTotal;
+      formDataSick.leaveDetail = props.data.leaveDetail;
+      formDataSick.leaveRange = props.data.leaveRange;
+      formDataSick.leaveRangeEnd = props.data.leaveRangeEnd;
+      leaveDocumentList.value = props.data.leaveDocument;
+      statusCheck.value = props.data.status;
+      formDataSick.leaveDocument = [];
+    }
   }
-});
+);
 
 /** Hook */
 onMounted(() => {
@@ -264,7 +261,6 @@ onMounted(() => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataSick.leaveStartDate"
                 :locale="'th'"
                 autoApply
@@ -342,7 +338,6 @@ onMounted(() => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataSick.leaveEndDate"
                 :locale="'th'"
                 autoApply
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index b10b05b..ce3533b 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -205,20 +205,23 @@ const dateEndInputStyle = computed(() => {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-watch(props.data, () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataBirth.leaveWrote = props.data.leaveWrote;
-    formDataBirth.leaveStartDate = props.data.leaveStartDate;
-    formDataBirth.leaveEndDate = props.data.leaveEndDate;
-    formDataBirth.leaveTotal = props.data.leaveTotal;
-    formDataBirth.leaveDetail = props.data.leaveDetail;
-    formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
-    leaveDocumentList.value = props.data.leaveDocument;
-    statusCheck.value = props.data.status;
-    formDataBirth.leaveDocument = [];
+watch(
+  () => props.data,
+  () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataBirth.leaveWrote = props.data.leaveWrote;
+      formDataBirth.leaveStartDate = props.data.leaveStartDate;
+      formDataBirth.leaveEndDate = props.data.leaveEndDate;
+      formDataBirth.leaveTotal = props.data.leaveTotal;
+      formDataBirth.leaveDetail = props.data.leaveDetail;
+      formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
+      leaveDocumentList.value = props.data.leaveDocument;
+      statusCheck.value = props.data.status;
+      formDataBirth.leaveDocument = [];
+    }
   }
-});
+);
 
 /** Hook */
 onMounted(() => {
@@ -266,7 +269,6 @@ onMounted(() => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataBirth.leaveStartDate"
                 :locale="'th'"
                 autoApply
@@ -344,7 +346,6 @@ onMounted(() => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataBirth.leaveEndDate"
                 :locale="'th'"
                 autoApply
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index 358ef09..e3e29fe 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -205,23 +205,26 @@ async function fetchCheck() {
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 
-watch(props.data, async () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataHelpWife.leaveWrote = props.data.leaveWrote;
-    formDataHelpWife.wifeDayName = props.data.wifeDayName;
-    formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
-    formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
-    formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
-    formDataHelpWife.leaveTotal = props.data.leaveTotal;
-    formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
-    formDataHelpWife.leaveRange = props.data.leaveRange;
-    formDataHelpWife.leaveDetail = props.data.leaveDetail;
-    formDataHelpWife.leaveDocument = [];
-    leaveDocumentList.value = props.data.leaveDocument;
-    statusCheck.value = props.data.status;
+watch(
+  () => props.data,
+  async () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataHelpWife.leaveWrote = props.data.leaveWrote;
+      formDataHelpWife.wifeDayName = props.data.wifeDayName;
+      formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
+      formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
+      formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
+      formDataHelpWife.leaveTotal = props.data.leaveTotal;
+      formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
+      formDataHelpWife.leaveRange = props.data.leaveRange;
+      formDataHelpWife.leaveDetail = props.data.leaveDetail;
+      formDataHelpWife.leaveDocument = [];
+      leaveDocumentList.value = props.data.leaveDocument;
+      statusCheck.value = props.data.status;
+    }
   }
-});
+);
 
 /**Hook */
 onMounted(async () => {
@@ -270,7 +273,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataHelpWife.leaveStartDate"
                 :locale="'th'"
                 autoApply
@@ -348,7 +350,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataHelpWife.leaveEndDate"
                 :locale="'th'"
                 autoApply
@@ -466,7 +467,6 @@ onMounted(async () => {
 
         <div class="col-12 col-md-4 col-sm-12 inputgreen">
           <datepicker
-            menu-class-name="modalfix"
             v-model="formDataHelpWife.wifeDayDateBorn"
             :locale="'th'"
             autoApply
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 90ed483..8603957 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -203,24 +203,27 @@ async function fetchCheck() {
   }
 }
 
-watch(props.data, () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataVacation.leaveWrote = props.data.leaveWrote;
-    formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
-    formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
-    formDataVacation.leaveStartDate = props.data.leaveStartDate;
-    formDataVacation.leaveEndDate = props.data.leaveEndDate;
-    formDataVacation.leaveTotal = props.data.leaveTotal;
+watch(
+  () => props.data,
+  () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataVacation.leaveWrote = props.data.leaveWrote;
+      formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
+      formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
+      formDataVacation.leaveStartDate = props.data.leaveStartDate;
+      formDataVacation.leaveEndDate = props.data.leaveEndDate;
+      formDataVacation.leaveTotal = props.data.leaveTotal;
 
-    formDataVacation.leaveDetail = props.data.leaveDetail;
-    formDataVacation.leaveRangeEnd = props.data.leaveRangeEnd;
-    leaveDocumentList.value = props.data.leaveDocument;
-    statusCheck.value = props.data.status;
-    formDataVacation.leaveRange = props.data.leaveRange;
-    formDataVacation.leaveDocument = [];
+      formDataVacation.leaveDetail = props.data.leaveDetail;
+      formDataVacation.leaveRangeEnd = props.data.leaveRangeEnd;
+      leaveDocumentList.value = props.data.leaveDocument;
+      statusCheck.value = props.data.status;
+      formDataVacation.leaveRange = props.data.leaveRange;
+      formDataVacation.leaveDocument = [];
+    }
   }
-});
+);
 
 /**Hook */
 onMounted(() => {
@@ -270,7 +273,6 @@ onMounted(() => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataVacation.leaveStartDate"
                 :locale="'th'"
                 autoApply
@@ -347,7 +349,6 @@ onMounted(() => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataVacation.leaveEndDate"
                 :locale="'th'"
                 autoApply
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index ce9394d..64eeb67 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -229,32 +229,36 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<string>("");
 
-watch(props.data, async () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataOrdination.leaveWrote = props.data.leaveWrote;
-    formDataOrdination.leaveStartDate = props.data.leaveStartDate;
-    formDataOrdination.leaveEndDate = props.data.leaveEndDate;
-    formDataOrdination.leaveTotal = props.data.leaveTotal;
-    formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
-    formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
-    formDataOrdination.ordainDayLocationAddress =
-      props.data.ordainDayLocationAddress;
-    formDataOrdination.ordainDayBuddhistLentName =
-      props.data.ordainDayBuddhistLentName;
-    formDataOrdination.ordainDayBuddhistLentAddress =
-      props.data.ordainDayBuddhistLentAddress;
-    formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
-    formDataOrdination.leaveDetail = props.data.leaveDetail;
-    leaveDocumentList.value = props.data.leaveDocument;
-    formDataOrdination.ordainDayLocationNumber =
-      props.data.ordainDayLocationNumber;
-    formDataOrdination.leaveRange = props.data.leaveRange;
-    formDataOrdination.leaveRangeEnd = props.data.leaveRangeEnd;
-    statusCheck.value = props.data.status;
-    formDataOrdination.leaveDocument = [];
+watch(
+  () => props.data,
+  async () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataOrdination.leaveWrote = props.data.leaveWrote;
+      formDataOrdination.leaveStartDate = props.data.leaveStartDate;
+      formDataOrdination.leaveEndDate = props.data.leaveEndDate;
+      formDataOrdination.leaveTotal = props.data.leaveTotal;
+      formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
+      formDataOrdination.ordainDayLocationName =
+        props.data.ordainDayLocationName;
+      formDataOrdination.ordainDayLocationAddress =
+        props.data.ordainDayLocationAddress;
+      formDataOrdination.ordainDayBuddhistLentName =
+        props.data.ordainDayBuddhistLentName;
+      formDataOrdination.ordainDayBuddhistLentAddress =
+        props.data.ordainDayBuddhistLentAddress;
+      formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
+      formDataOrdination.leaveDetail = props.data.leaveDetail;
+      leaveDocumentList.value = props.data.leaveDocument;
+      formDataOrdination.ordainDayLocationNumber =
+        props.data.ordainDayLocationNumber;
+      formDataOrdination.leaveRange = props.data.leaveRange;
+      formDataOrdination.leaveRangeEnd = props.data.leaveRangeEnd;
+      statusCheck.value = props.data.status;
+      formDataOrdination.leaveDocument = [];
+    }
   }
-});
+);
 
 /** Hook */
 onMounted(async () => {
@@ -320,7 +324,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataOrdination.leaveStartDate"
                 :locale="'th'"
                 autoApply
@@ -398,7 +401,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataOrdination.leaveEndDate"
                 :locale="'th'"
                 autoApply
@@ -497,7 +499,6 @@ onMounted(async () => {
 
             <div class="col-12 col-md-3 col-sm-6">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataOrdination.leavegovernmentDate"
                 :locale="'th'"
                 autoApply
@@ -543,7 +544,6 @@ onMounted(async () => {
 
             <div class="col-12 col-md-3 col-sm-6">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataOrdination.leavebirthDate"
                 :locale="'th'"
                 autoApply
@@ -614,7 +614,6 @@ onMounted(async () => {
         <div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
         <div class="col-12 col-md-4 col-sm-6 inputgreen">
           <datepicker
-            menu-class-name="modalfix"
             v-model="formDataOrdination.ordainDayOrdination"
             :locale="'th'"
             autoApply
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index c630c62..b19441c 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -122,7 +122,7 @@ function onValidate() {
     formData.append("leaveTotal", formDataHaji.leaveTotal);
     formData.append("leaveRange", formDataHaji.leaveRange);
     formData.append("leaveRangeEnd", formDataHaji.leaveRangeEnd);
-    formData.append("hajj", 'true');
+    formData.append("hajj", "true");
     props.onSubmit(formData, isLeave.value);
   }
 }
@@ -193,22 +193,25 @@ const dateEndInputStyle = computed(() => {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-watch(props.data, async () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataHaji.leaveWrote = props.data.leaveWrote;
-    formDataHaji.leaveTotal = props.data.leaveTotal;
-    formDataHaji.leaveStartDate = props.data.leaveStartDate;
-    formDataHaji.leaveEndDate = props.data.leaveEndDate;
-    formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
-    formDataHaji.leaveDetail = props.data.leaveDetail;
-    formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
-    formDataHaji.leaveRange = props.data.leaveRange;
-    leaveDocumentList.value = props.data.leaveDocument;
-    statusCheck.value = props.data.status;
-    formDataHaji.leaveDocument = [];
+watch(
+  () => props.data,
+  async () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataHaji.leaveWrote = props.data.leaveWrote;
+      formDataHaji.leaveTotal = props.data.leaveTotal;
+      formDataHaji.leaveStartDate = props.data.leaveStartDate;
+      formDataHaji.leaveEndDate = props.data.leaveEndDate;
+      formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
+      formDataHaji.leaveDetail = props.data.leaveDetail;
+      formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
+      formDataHaji.leaveRange = props.data.leaveRange;
+      leaveDocumentList.value = props.data.leaveDocument;
+      statusCheck.value = props.data.status;
+      formDataHaji.leaveDocument = [];
+    }
   }
-});
+);
 
 /**Hook */
 onMounted(async () => {
@@ -255,7 +258,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <datepicker
               class="col-12 col-md-3 col-sm-6 inputgreen"
-              menu-class-name="modalfix"
               v-model="formDataHaji.leaveStartDate"
               :locale="'th'"
               autoApply
@@ -329,7 +331,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <datepicker
               class="col-12 col-md-3 col-sm-6 inputgreen"
-              menu-class-name="modalfix"
               v-model="formDataHaji.leaveEndDate"
               :locale="'th'"
               autoApply
@@ -425,7 +426,6 @@ onMounted(async () => {
 
             <datepicker
               class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
               autoApply
               borderless
               readonly
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index ff7be45..9f1d176 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -215,31 +215,34 @@ async function fetchCheck() {
 //   formDataMilitary.leaveTotal = newLeaveTotal;
 // }
 
-watch(props.data, async () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataMilitary.leaveWrote = props.data.leaveWrote;
-    formDataMilitary.leaveStartDate = props.data.leaveStartDate;
-    formDataMilitary.leaveEndDate = props.data.leaveEndDate;
-    formDataMilitary.leaveTotal = props.data.leaveTotal;
-    formDataMilitary.absentDaySummon = props.data.absentDaySummon;
-    formDataMilitary.absentDayLocation = props.data.absentDayLocation;
-    formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
-    formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
-    formDataMilitary.absentDayAt = props.data.absentDayAt;
-    formDataMilitary.leaveRange = props.data.leaveRange;
-    formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
-    formDataMilitary.leaveDetail = props.data.leaveDetail;
-    leaveDocumentList.value = props.data.leaveDocument;
-    statusCheck.value = props.data.status;
-    formDataMilitary.leaveDocument = [];
+watch(
+  () => props.data,
+  async () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataMilitary.leaveWrote = props.data.leaveWrote;
+      formDataMilitary.leaveStartDate = props.data.leaveStartDate;
+      formDataMilitary.leaveEndDate = props.data.leaveEndDate;
+      formDataMilitary.leaveTotal = props.data.leaveTotal;
+      formDataMilitary.absentDaySummon = props.data.absentDaySummon;
+      formDataMilitary.absentDayLocation = props.data.absentDayLocation;
+      formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
+      formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
+      formDataMilitary.absentDayAt = props.data.absentDayAt;
+      formDataMilitary.leaveRange = props.data.leaveRange;
+      formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
+      const leaveTotal = await calculateDurationYmd(
+        props.data.leaveStartDate,
+        props.data.leaveEndDate
+      );
+      leaveText.value = leaveTotal;
+      formDataMilitary.leaveDetail = props.data.leaveDetail;
+      leaveDocumentList.value = props.data.leaveDocument;
+      statusCheck.value = props.data.status;
+      formDataMilitary.leaveDocument = [];
+    }
   }
-});
+);
 
 /**Hook */
 onMounted(async () => {
@@ -296,7 +299,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataMilitary.leaveStartDate"
                 :locale="'th'"
                 autoApply
@@ -374,7 +376,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm"> -->
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataMilitary.leaveEndDate"
                 :locale="'th'"
                 autoApply
@@ -509,7 +510,6 @@ onMounted(async () => {
           <div class="q-col-gutter-sm row">
             <datepicker
               class="col-12 col-md-4 col-sm-6 inputgreen"
-              menu-class-name="modalfix"
               v-model="formDataMilitary.absentDayRegistorDate"
               :locale="'th'"
               autoApply
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index f67c402..df99247 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -230,36 +230,39 @@ async function fetchCheck() {
 // }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataStudy.leaveWrote = props.data.leaveWrote;
-    formDataStudy.leaveStartDate = props.data.leaveStartDate;
-    formDataStudy.leaveEndDate = props.data.leaveEndDate;
-    formDataStudy.leaveTotal = props.data.leaveTotal;
-    formDataStudy.leavebirthDate = props.data.leavebirthDate;
-    formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate;
-    formDataStudy.leaveSalary = props.data.leaveSalary;
-    formDataStudy.leaveSalaryText = props.data.leaveSalaryText;
+watch(
+  () => props.data,
+  async () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataStudy.leaveWrote = props.data.leaveWrote;
+      formDataStudy.leaveStartDate = props.data.leaveStartDate;
+      formDataStudy.leaveEndDate = props.data.leaveEndDate;
+      formDataStudy.leaveTotal = props.data.leaveTotal;
+      formDataStudy.leavebirthDate = props.data.leavebirthDate;
+      formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate;
+      formDataStudy.leaveSalary = props.data.leaveSalary;
+      formDataStudy.leaveSalaryText = props.data.leaveSalaryText;
 
-    formDataStudy.studyDayScholarship = props.data.studyDayScholarship;
-    formDataStudy.studyDayCountry = props.data.studyDayCountry;
-    formDataStudy.studyDayUniversityName = props.data.studyDayUniversityName;
-    formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
-    formDataStudy.studyDaySubject = props.data.studyDaySubject;
-    formDataStudy.leaveDetail = props.data.leaveDetail;
-    formDataStudy.leaveRange = props.data.leaveRange;
-    formDataStudy.leaveRangeEnd = props.data.leaveRangeEnd;
-    formDataStudy.leaveDocument = [];
-    leaveDocumentList.value = props.data.leaveDocument;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
-    statusCheck.value = props.data.status;
+      formDataStudy.studyDayScholarship = props.data.studyDayScholarship;
+      formDataStudy.studyDayCountry = props.data.studyDayCountry;
+      formDataStudy.studyDayUniversityName = props.data.studyDayUniversityName;
+      formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
+      formDataStudy.studyDaySubject = props.data.studyDaySubject;
+      formDataStudy.leaveDetail = props.data.leaveDetail;
+      formDataStudy.leaveRange = props.data.leaveRange;
+      formDataStudy.leaveRangeEnd = props.data.leaveRangeEnd;
+      formDataStudy.leaveDocument = [];
+      leaveDocumentList.value = props.data.leaveDocument;
+      const leaveTotal = await calculateDurationYmd(
+        props.data.leaveStartDate,
+        props.data.leaveEndDate
+      );
+      leaveText.value = leaveTotal;
+      statusCheck.value = props.data.status;
+    }
   }
-});
+);
 
 /**Hook */
 onMounted(async () => {
@@ -323,7 +326,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataStudy.leaveStartDate"
                 :locale="'th'"
                 autoApply
@@ -401,7 +403,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm"> -->
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataStudy.leaveEndDate"
                 :locale="'th'"
                 autoApply
@@ -504,7 +505,6 @@ onMounted(async () => {
           <div class="q-col-gutter-sm row">
             <div class="col-12 col-md-3 col-sm-6">
               <datepicker
-                menu-class-name="modalfix"
                 autoApply
                 borderless
                 week-start="0"
@@ -552,7 +552,6 @@ onMounted(async () => {
 
             <div class="col-12 col-md-3 col-sm-6">
               <datepicker
-                menu-class-name="modalfix"
                 autoApply
                 borderless
                 readonly
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 51037a9..42553e9 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -214,34 +214,38 @@ function updateLeaveTotal() {
   formDataTrain.leaveTotal = newLeaveTotal;
 }
 
-watch(props.data, async () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataTrain.leaveWrote = props.data.leaveWrote;
-    formDataTrain.leaveStartDate = props.data.leaveStartDate;
-    formDataTrain.leaveEndDate = props.data.leaveEndDate;
-    formDataTrain.leaveTotal = props.data.leaveTotal;
-    formDataTrain.leavebirthDate = props.data.leavebirthDate;
-    formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
-    formDataTrain.leaveSalary = props.data.leaveSalary;
-    formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
-    formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
-    formDataTrain.studyDayCountry = props.data.studyDayCountry;
-    formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
-    formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
-    formDataTrain.leaveDetail = props.data.leaveDetail;
-    formDataTrain.leaveRange = props.data.leaveRange;
-    formDataTrain.leaveRangeEnd = props.data.leaveRangeEnd;
-    formDataTrain.leaveDocument = [];
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
-    leaveDocumentList.value = props.data.leaveDocument;
-    statusCheck.value = props.data.status;
+watch(
+  () => props.data,
+  async () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataTrain.leaveWrote = props.data.leaveWrote;
+      formDataTrain.leaveStartDate = props.data.leaveStartDate;
+      formDataTrain.leaveEndDate = props.data.leaveEndDate;
+      formDataTrain.leaveTotal = props.data.leaveTotal;
+      formDataTrain.leavebirthDate = props.data.leavebirthDate;
+      formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
+      formDataTrain.leaveSalary = props.data.leaveSalary;
+      formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
+      formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
+      formDataTrain.studyDayCountry = props.data.studyDayCountry;
+      formDataTrain.studyDayTrainingSubject =
+        props.data.studyDayTrainingSubject;
+      formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
+      formDataTrain.leaveDetail = props.data.leaveDetail;
+      formDataTrain.leaveRange = props.data.leaveRange;
+      formDataTrain.leaveRangeEnd = props.data.leaveRangeEnd;
+      formDataTrain.leaveDocument = [];
+      const leaveTotal = await calculateDurationYmd(
+        props.data.leaveStartDate,
+        props.data.leaveEndDate
+      );
+      leaveText.value = leaveTotal;
+      leaveDocumentList.value = props.data.leaveDocument;
+      statusCheck.value = props.data.status;
+    }
   }
-});
+);
 
 /**Hook */
 onMounted(async () => {
@@ -303,7 +307,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataTrain.leaveStartDate"
                 :locale="'th'"
                 autoApply
@@ -380,7 +383,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm"> -->
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataTrain.leaveEndDate"
                 :locale="'th'"
                 autoApply
@@ -484,7 +486,6 @@ onMounted(async () => {
             <div class="col-12 col-sm-3">
               <datepicker
                 v-model="formDataTrain.leavegovernmentDate"
-                menu-class-name="modalfix"
                 autoApply
                 borderless
                 week-start="0"
@@ -533,7 +534,6 @@ onMounted(async () => {
             <div class="col-12 col-sm-3">
               <datepicker
                 v-model="formDataTrain.leavebirthDate"
-                menu-class-name="modalfix"
                 autoApply
                 borderless
                 readonly
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index b789d01..1455a29 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -219,30 +219,35 @@ const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
 
-watch(props, async () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataWorkInternational.leaveWrote = props.data.leaveWrote;
-    formDataWorkInternational.leaveStartDate = new Date(
-      props.data.leaveStartDate
-    );
-    formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
-    formDataWorkInternational.leaveDetail = props.data.leaveDetail;
-    leaveDraftDocument.value = props.data.leaveDraftDocument;
-    formDataWorkInternational.leaveRange = props.data.leaveRange;
-    formDataWorkInternational.leaveRangeEnd = props.data.leaveRangeEnd;
-    formDataWorkInternational.leaveTotal = props.data.leaveTotal;
-    leaveDocumentList.value = props.data.leaveDocument;
-    statusCheck.value = props.data.status;
-    formDataWorkInternational.leaveDraftDocument = null;
-    formDataWorkInternational.leaveDocument = [];
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
+watch(
+  () => props,
+  async () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataWorkInternational.leaveWrote = props.data.leaveWrote;
+      formDataWorkInternational.leaveStartDate = new Date(
+        props.data.leaveStartDate
+      );
+      formDataWorkInternational.leaveEndDate = new Date(
+        props.data.leaveEndDate
+      );
+      formDataWorkInternational.leaveDetail = props.data.leaveDetail;
+      leaveDraftDocument.value = props.data.leaveDraftDocument;
+      formDataWorkInternational.leaveRange = props.data.leaveRange;
+      formDataWorkInternational.leaveRangeEnd = props.data.leaveRangeEnd;
+      formDataWorkInternational.leaveTotal = props.data.leaveTotal;
+      leaveDocumentList.value = props.data.leaveDocument;
+      statusCheck.value = props.data.status;
+      formDataWorkInternational.leaveDraftDocument = null;
+      formDataWorkInternational.leaveDocument = [];
+      const leaveTotal = await calculateDurationYmd(
+        props.data.leaveStartDate,
+        props.data.leaveEndDate
+      );
+      leaveText.value = leaveTotal;
+    }
   }
-});
+);
 
 watch(
   () => formDataWorkInternational.leaveEndDate,
@@ -311,7 +316,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataWorkInternational.leaveStartDate"
                 :locale="'th'"
                 autoApply
@@ -388,7 +392,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm"> -->
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataWorkInternational.leaveEndDate"
                 :locale="'th'"
                 autoApply
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index d07bb2e..fc3785c 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -285,50 +285,53 @@ const dateEndInputStyle = computed(() => {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-watch(props.data, async () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
-    formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
-    formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
-    formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
-    formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
-    formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
-    formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
-    formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
-    formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
-    formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
-    formDataFollowSpouse.leaveRange = props.data.leaveRange;
-    formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
-    formDataFollowSpouse.coupleDaySumTotalHistory =
-      props.data.coupleDaySumTotalHistory;
-    formDataFollowSpouse.coupleDayLevelCountry =
-      props.data.coupleDayLevelCountry;
-    formDataFollowSpouse.coupleDayCountryHistory =
-      props.data.coupleDayCountryHistory;
-    formDataFollowSpouse.coupleDayTotalHistory =
-      props.data.coupleDayTotalHistory;
-    formDataFollowSpouse.coupleDayStartDateHistory =
-      props.data.coupleDayStartDateHistory;
-    formDataFollowSpouse.coupleDayEndDateHistory =
-      props.data.coupleDayEndDateHistory;
-    leaveDocumentList.value = props.data.leaveDocument;
-    checkTotalHistory();
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
+watch(
+  () => props.data,
+  async () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
+      formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
+      formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
+      formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
+      formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
+      formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
+      formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
+      formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
+      formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
+      formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
+      formDataFollowSpouse.leaveRange = props.data.leaveRange;
+      formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
+      formDataFollowSpouse.coupleDaySumTotalHistory =
+        props.data.coupleDaySumTotalHistory;
+      formDataFollowSpouse.coupleDayLevelCountry =
+        props.data.coupleDayLevelCountry;
+      formDataFollowSpouse.coupleDayCountryHistory =
+        props.data.coupleDayCountryHistory;
+      formDataFollowSpouse.coupleDayTotalHistory =
+        props.data.coupleDayTotalHistory;
+      formDataFollowSpouse.coupleDayStartDateHistory =
+        props.data.coupleDayStartDateHistory;
+      formDataFollowSpouse.coupleDayEndDateHistory =
+        props.data.coupleDayEndDateHistory;
+      leaveDocumentList.value = props.data.leaveDocument;
+      checkTotalHistory();
+      const leaveTotal = await calculateDurationYmd(
+        props.data.leaveStartDate,
+        props.data.leaveEndDate
+      );
+      leaveText.value = leaveTotal;
 
-    const coupleDayTotalHistory = await calculateDurationYmd(
-      props.data.coupleDayStartDateHistory,
-      props.data.coupleDayEndDateHistory
-    );
-    formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
-    statusCheck.value = props.data.status;
-    formDataFollowSpouse.leaveDocument = [];
+      const coupleDayTotalHistory = await calculateDurationYmd(
+        props.data.coupleDayStartDateHistory,
+        props.data.coupleDayEndDateHistory
+      );
+      formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
+      statusCheck.value = props.data.status;
+      formDataFollowSpouse.leaveDocument = [];
+    }
   }
-});
+);
 
 /**Hook */
 onMounted(async () => {
@@ -405,7 +408,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataFollowSpouse.leaveStartDate"
                 :locale="'th'"
                 autoApply
@@ -483,7 +485,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm"> -->
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataFollowSpouse.leaveEndDate"
                 :locale="'th'"
                 autoApply
@@ -673,7 +674,6 @@ onMounted(async () => {
 
         <datepicker
           class="col-12 col-md-3 col-sm-12 inputgreen"
-          menu-class-name="modalfix"
           v-model="formDataFollowSpouse.coupleDayStartDateHistory"
           :locale="'th'"
           autoApply
@@ -720,7 +720,6 @@ onMounted(async () => {
         </datepicker>
         <datepicker
           class="col-12 col-md-3 col-sm-12 inputgreen"
-          menu-class-name="modalfix"
           v-model="formDataFollowSpouse.coupleDayEndDateHistory"
           :locale="'th'"
           autoApply
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index 755318f..bc17d96 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -198,27 +198,32 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
-watch(props.data, async () => {
-  if (props.data) {
-    // totalCheck.value = null;
-    formDataRehabilitation.leaveWrote = props.data.leaveWrote;
-    formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
-    formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
-    formDataRehabilitation.leaveDetail = props.data.leaveDetail;
-    leaveDraftDocument.value = props.data.leaveDraftDocument;
-    leaveDocumentList.value = props.data.leaveDocument;
-    formDataRehabilitation.leaveRange = props.data.leaveRange;
-    formDataRehabilitation.leaveRangeEnd = props.data.leaveRangeEnd;
-    formDataRehabilitation.leaveDraftDocument = null;
-    formDataRehabilitation.leaveDocument = [];
-    statusCheck.value = props.data.status;
-    const leaveTotal = await calculateDurationYmd(
-      props.data.leaveStartDate,
-      props.data.leaveEndDate
-    );
-    leaveText.value = leaveTotal;
+watch(
+  () => props.data,
+  async () => {
+    if (props.data) {
+      // totalCheck.value = null;
+      formDataRehabilitation.leaveWrote = props.data.leaveWrote;
+      formDataRehabilitation.leaveStartDate = new Date(
+        props.data.leaveStartDate
+      );
+      formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
+      formDataRehabilitation.leaveDetail = props.data.leaveDetail;
+      leaveDraftDocument.value = props.data.leaveDraftDocument;
+      leaveDocumentList.value = props.data.leaveDocument;
+      formDataRehabilitation.leaveRange = props.data.leaveRange;
+      formDataRehabilitation.leaveRangeEnd = props.data.leaveRangeEnd;
+      formDataRehabilitation.leaveDraftDocument = null;
+      formDataRehabilitation.leaveDocument = [];
+      statusCheck.value = props.data.status;
+      const leaveTotal = await calculateDurationYmd(
+        props.data.leaveStartDate,
+        props.data.leaveEndDate
+      );
+      leaveText.value = leaveTotal;
+    }
   }
-});
+);
 
 /**Hook */
 onMounted(async () => {
@@ -274,7 +279,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataRehabilitation.leaveStartDate"
                 :locale="'th'"
                 autoApply
@@ -351,7 +355,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm"> -->
             <div class="col-12 col-md-3 col-sm-6 inputgreen">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formDataRehabilitation.leaveEndDate"
                 :locale="'th'"
                 autoApply
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index f92d057..e0fd86a 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -101,7 +101,10 @@ async function getCommander() {
       page: pagination.value.page,
       pageSize: pagination.value.rowsPerPage,
       keycloakId: storeData.formData.keycloakId,
-      type:storeData.officerType.toLocaleUpperCase() == 'OFFICER' ? 'officer':'employee'
+      type:
+        storeData.officerType.toLocaleUpperCase() == "OFFICER"
+          ? "officer"
+          : "employee",
     })
     .then((res) => {
       rows.value = res.data.result.data;
@@ -170,7 +173,6 @@ onMounted(() => {
     <div class="col-12 row q-pa-sm q-col-gutter-sm">
       <datepicker
         class="col-12 col-sm-6"
-        menu-class-name="modalfix"
         v-model="dataStore.dateSendLeave"
         :locale="'th'"
         autoApply
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index 0892325..bddea14 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -101,7 +101,6 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
       <div class="items-center col-12 row q-col-gutter-sm">
         <datepicker
           v-if="leaveStore.tabValue === 'list'"
-          menu-class-name="modalfix"
           v-model="year"
           class="col-xs-12 col-sm-auto"
           :locale="'th'"
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 353754b..5abf71f 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -1,6 +1,5 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -19,7 +18,6 @@ import type { DataOption } from "../14_IDP/interface/Main";
 
 const mixin = useCounterMixin();
 const { date2Thai, messageError, showLoader, hideLoader } = mixin;
-const $q = useQuasar();
 const type = ref<string>("00000000-0000-0000-0000-000000000000");
 const status = ref<string>("ALL");
 export const useLeaveStore = defineStore("Leave", () => {
@@ -344,7 +342,7 @@ export const useLeaveStore = defineStore("Leave", () => {
           Number(data.leaveLimit) - Number(data.restDayTotalOld);
       })
       .catch((e: any) => {
-        messageError($q, e);
+        console.log(e);
       })
       .finally(() => {
         hideLoader();
@@ -368,7 +366,7 @@ export const useLeaveStore = defineStore("Leave", () => {
           Number(data.leaveLimit) - Number(data.restDayTotalOld);
       })
       .catch((e: any) => {
-        messageError($q, e);
+        console.log(e);
       });
 
     dateSendLeave.value = data.dateSendLeave;
diff --git a/src/plugins/genreport.ts b/src/plugins/genreport.ts
index 3c8a638..8b2b917 100644
--- a/src/plugins/genreport.ts
+++ b/src/plugins/genreport.ts
@@ -1,13 +1,10 @@
 import axios from "axios";
 import config from "@/app.config";
 
-import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
-const $q = useQuasar();
-
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const { showLoader, hideLoader } = mixin;
 
 async function genReport(data: any, fileName: string, type: string = "docx") {
   showLoader();
@@ -49,7 +46,7 @@ async function genReport(data: any, fileName: string, type: string = "docx") {
       }
     })
     .catch((err) => {
-      messageError($q, err);
+      console.log(err);
     })
     .finally(() => {
       hideLoader();

From 712e83399f20fb91d8ac4fc603a5c43145e3f2cf Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Jun 2025 10:40:32 +0700
Subject: [PATCH 109/195] fix class modalfix ==> 07_appealComplain

---
 src/modules/07_appealComplain/views/Main.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index 9abeffb..a526a1d 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -264,13 +264,13 @@ onMounted(async () => {
             color="primary"
             icon="mdi-plus"
             @click="redirectToPageadd()"
-            ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
           >
+            <q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip>
+          </q-btn>
 
           <div class="row col-12 q-col-gutter-sm q-mb-sm">
             <div class="col-xs-12 col-md-2">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formData.year"
                 class="col-2"
                 :locale="'th'"

From f14be7fcf0fc9cb76aaa843a8b0490a55ff33cb7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Jun 2025 10:41:39 +0700
Subject: [PATCH 110/195] fix class modalfix ==> 08_KPI

---
 src/modules/08_KPI/views/main.vue          | 1 -
 src/modules/08_KPI/views/mainEvaluator.vue | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 272ef00..5712266 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -435,7 +435,6 @@ onMounted(async () => {
             <div class="row col-12 q-col-gutter-sm">
               <div class="col-xs-12 col-md-1">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="year"
                   :locale="'th'"
                   autoApply
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
index b09b2ca..7b76576 100644
--- a/src/modules/08_KPI/views/mainEvaluator.vue
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -219,13 +219,14 @@ onMounted(async () => {
           <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
             <datepicker
               class="col-md-1 col-xs-12"
-              menu-class-name="modalfix"
               v-model="store.yearRound"
               :locale="'th'"
               autoApply
               year-picker
               :enableTimePicker="false"
-              @update:model-value="  store.formQuery.page = 1,fetchRoundOption(true)"
+              @update:model-value="
+                (store.formQuery.page = 1), fetchRoundOption(true)
+              "
             >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
@@ -300,7 +301,6 @@ onMounted(async () => {
               :options="columns"
               option-value="name"
               style="min-width: 140px"
-              
             />
           </div>
 

From 9577ed6ea8534c8be0c595d3a4555288ad2765a8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Jun 2025 11:03:26 +0700
Subject: [PATCH 111/195] fix bug watch

---
 src/modules/07_appealComplain/views/Form.vue | 58 +++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index 64360b7..6411e5f 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -148,34 +148,40 @@ function onSubmit(data: FormDataType) {
   );
 }
 
-watch(props.formProfile, () => {
-  if (props.formProfile !== null) {
-    formData.fullname = props.formProfile.fullname;
-    formData.profileId = props.formProfile.profileId;
-    formData.citizenId = props.formProfile.citizenId;
-    formData.oc = props.formProfile.oc;
-    formData.position = props.formProfile.position;
+watch(
+  () => props.formProfile,
+  () => {
+    if (props.formProfile !== null) {
+      formData.fullname = props.formProfile.fullname;
+      formData.profileId = props.formProfile.profileId;
+      formData.citizenId = props.formProfile.citizenId;
+      formData.oc = props.formProfile.oc;
+      formData.position = props.formProfile.position;
+    }
   }
-});
+);
 
-watch(props.data, () => {
-  isReadOnly.value = true;
-  formData.id = props.data.id;
-  formData.title = props.data.title;
-  formData.description = props.data.description;
-  formData.status = props.data.status;
-  formData.type = props.data.type;
-  formData.year = props.data.year;
-  formData.caseType = props.data.caseType;
-  formData.caseNumber = props.data.caseNumber;
-  formData.fullname = props.data.fullname;
-  formData.citizenId = props.data.citizenId;
-  formData.profileId = props.data.profileId;
-  formData.lastUpdatedAt = props.data.lastUpdatedAt;
-  formData.disciplineComplaint_Appeal_Docs =
-    props.data.disciplineComplaint_Appeal_Docs;
-  formData.historyStatus = props.data.historyStatus;
-});
+watch(
+  () => props.data,
+  () => {
+    isReadOnly.value = true;
+    formData.id = props.data.id;
+    formData.title = props.data.title;
+    formData.description = props.data.description;
+    formData.status = props.data.status;
+    formData.type = props.data.type;
+    formData.year = props.data.year;
+    formData.caseType = props.data.caseType;
+    formData.caseNumber = props.data.caseNumber;
+    formData.fullname = props.data.fullname;
+    formData.citizenId = props.data.citizenId;
+    formData.profileId = props.data.profileId;
+    formData.lastUpdatedAt = props.data.lastUpdatedAt;
+    formData.disciplineComplaint_Appeal_Docs =
+      props.data.disciplineComplaint_Appeal_Docs;
+    formData.historyStatus = props.data.historyStatus;
+  }
+);
 </script>
 <template>
   <div class="row">

From ee94b55742368d1ee42b3519fe1acb24e45201b2 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Jun 2025 11:07:32 +0700
Subject: [PATCH 112/195] fix class modalfix ==> 09_scholarship

---
 src/modules/09_scholarship/views/detail.vue | 37 +++------------------
 src/modules/09_scholarship/views/main.vue   |  1 -
 2 files changed, 4 insertions(+), 34 deletions(-)

diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index a3fa770..4e84434 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -689,7 +689,6 @@ onMounted(async () => {
             <div class="row q-col-gutter-md">
               <div class="col-12 col-md-3">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="formBody.scholarshipYear"
                   :locale="'th'"
                   autoApply
@@ -822,7 +821,6 @@ onMounted(async () => {
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="formBody.bookNoDate"
                   :locale="'th'"
                   autoApply
@@ -865,7 +863,6 @@ onMounted(async () => {
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="formBody.bookApproveDate"
                   :locale="'th'"
                   autoApply
@@ -960,7 +957,6 @@ onMounted(async () => {
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="formBody.contractDate"
                   :locale="'th'"
                   autoApply
@@ -1018,7 +1014,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.reportBackNoDate"
                       :locale="'th'"
                       autoApply
@@ -1057,7 +1052,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.reportBackDate"
                       :locale="'th'"
                       autoApply
@@ -1205,7 +1199,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -1250,7 +1243,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -1334,7 +1326,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       autoApply
@@ -1375,7 +1366,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
                       readonly
@@ -1441,7 +1431,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -1484,7 +1473,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -1588,7 +1576,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -1633,7 +1620,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       readonly
@@ -1717,7 +1703,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       readonly
@@ -1758,7 +1743,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
                       autoApply
@@ -1856,7 +1840,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       readonly
@@ -1901,7 +1884,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -1985,7 +1967,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       readonly
@@ -2026,7 +2007,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyEndDate"
                       readonly
                       :locale="'th'"
@@ -2099,7 +2079,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -2142,7 +2121,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -2343,7 +2321,6 @@ onMounted(async () => {
 
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -2392,7 +2369,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -2460,7 +2436,10 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div v-if="formBody.studyTopic == 'ดูงาน'" class="col-12 col-md-3">
+                  <div
+                    v-if="formBody.studyTopic == 'ดูงาน'"
+                    class="col-12 col-md-3"
+                  >
                     <q-input
                       dense
                       readonly
@@ -2479,7 +2458,6 @@ onMounted(async () => {
 
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -2526,7 +2504,6 @@ onMounted(async () => {
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
-                      menu-class-name="modalfix"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -2636,7 +2613,6 @@ onMounted(async () => {
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="formBody.startDate"
                   :locale="'th'"
                   autoApply
@@ -2682,7 +2658,6 @@ onMounted(async () => {
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="formBody.endDate"
                   :locale="'th'"
                   readonly
@@ -2750,7 +2725,6 @@ onMounted(async () => {
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="formBody.studyStartDate"
                   :locale="'th'"
                   readonly
@@ -2796,7 +2770,6 @@ onMounted(async () => {
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="formBody.studyEndDate"
                   :locale="'th'"
                   autoApply
@@ -2880,7 +2853,6 @@ onMounted(async () => {
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="formBody.studyAbroadStartDate"
                   :locale="'th'"
                   autoApply
@@ -2921,7 +2893,6 @@ onMounted(async () => {
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="formBody.studyAbroadEndDate"
                   :locale="'th'"
                   autoApply
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index e7813d7..be093ef 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -181,7 +181,6 @@ onMounted(async () => {
           <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
             <datepicker
               class="col-xs-12 col-md-1"
-              menu-class-name="modalfix"
               v-model="year"
               :locale="'th'"
               autoApply

From 90aebd5af2c3f5e661ee424e679387b0d8cdbd78 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Jun 2025 11:08:46 +0700
Subject: [PATCH 113/195] fix class modalfix ==> 10_registry

---
 src/modules/10_registry/views/requestEditDetail.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/10_registry/views/requestEditDetail.vue b/src/modules/10_registry/views/requestEditDetail.vue
index 1984a38..b9884f1 100644
--- a/src/modules/10_registry/views/requestEditDetail.vue
+++ b/src/modules/10_registry/views/requestEditDetail.vue
@@ -159,7 +159,6 @@ onMounted(async () => {
                 <!-- วันที่ยื่นขอ -->
                 <div class="col-md-2 col-xs-12">
                   <datepicker
-                    menu-class-name="modalfix"
                     v-model="dataRequest.createdAt"
                     :locale="'th'"
                     autoApply

From 8d569bb32171ce71d5c1218b20314d30af845794 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Jun 2025 11:14:09 +0700
Subject: [PATCH 114/195] fix class modalfix ==> 11_probation

---
 src/modules/11_probation/component/01_Assign.vue           | 7 +------
 src/modules/11_probation/component/06_EvaluateResult.vue   | 5 -----
 src/modules/11_probation/component/07_EvaluateReport.vue   | 1 -
 .../11_probation/component/addPage/01_addresult.vue        | 3 ---
 .../component/addPage/02_addevaluacommander.vue            | 3 ---
 src/modules/11_probation/component/editPage/01_result.vue  | 1 -
 6 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/src/modules/11_probation/component/01_Assign.vue b/src/modules/11_probation/component/01_Assign.vue
index cacc9ad..6c68298 100644
--- a/src/modules/11_probation/component/01_Assign.vue
+++ b/src/modules/11_probation/component/01_Assign.vue
@@ -1036,6 +1036,7 @@ onMounted(async () => {
       <div>แบบมอบหมายงานฯ</div>
     </div>
   </div>
+
   <q-form
     greedy
     @submit.prevent
@@ -1164,7 +1165,6 @@ onMounted(async () => {
       </div>
       <div class="col-xs-12 col-sm-4">
         <datepicker
-          menu-class-name="modalfix"
           v-model="date_start"
           :locale="'th'"
           autoApply
@@ -1200,7 +1200,6 @@ onMounted(async () => {
       </div>
       <div class="col-xs-12 col-sm-4">
         <datepicker
-          menu-class-name="modalfix"
           v-model="date_finish"
           :locale="'th'"
           autoApply
@@ -2338,7 +2337,6 @@ onMounted(async () => {
 
             <div class="col-xs-12 col-sm-4">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="date1"
                 :locale="'th'"
                 autoApply
@@ -2441,7 +2439,6 @@ onMounted(async () => {
 
           <div class="col-xs-12 col-sm-4">
             <datepicker
-              menu-class-name="modalfix"
               v-model="date2"
               :locale="'th'"
               autoApply
@@ -2532,7 +2529,6 @@ onMounted(async () => {
 
           <div class="col-xs-12 col-sm-4">
             <datepicker
-              menu-class-name="modalfix"
               v-model="date3"
               :locale="'th'"
               autoApply
@@ -2644,7 +2640,6 @@ onMounted(async () => {
 
               <div class="col-xs-12 col-sm-4">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="date4"
                   :locale="'th'"
                   autoApply
diff --git a/src/modules/11_probation/component/06_EvaluateResult.vue b/src/modules/11_probation/component/06_EvaluateResult.vue
index 665653e..6a4add7 100644
--- a/src/modules/11_probation/component/06_EvaluateResult.vue
+++ b/src/modules/11_probation/component/06_EvaluateResult.vue
@@ -340,7 +340,6 @@ onMounted(async () => {
           <div class="row q-col-gutter-sm">
             <div class="col-12 col-sm-6">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="date_start"
                 :locale="'th'"
                 autoApply
@@ -382,7 +381,6 @@ onMounted(async () => {
             </div>
             <div class="col-12 col-sm-6">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="date_finish"
                 :locale="'th'"
                 autoApply
@@ -554,7 +552,6 @@ onMounted(async () => {
                 </div>
                 <div class="col-12 col-sm-4">
                   <datepicker
-                    menu-class-name="modalfix"
                     v-model="chairman_dated"
                     :locale="'th'"
                     :readonly="!status"
@@ -613,7 +610,6 @@ onMounted(async () => {
                 </div>
                 <div class="col-12 col-sm-4">
                   <datepicker
-                    menu-class-name="modalfix"
                     v-model="director1_dated"
                     :locale="'th'"
                     autoApply
@@ -672,7 +668,6 @@ onMounted(async () => {
                 </div>
                 <div class="col-12 col-sm-4">
                   <datepicker
-                    menu-class-name="modalfix"
                     v-model="director2_dated"
                     :locale="'th'"
                     autoApply
diff --git a/src/modules/11_probation/component/07_EvaluateReport.vue b/src/modules/11_probation/component/07_EvaluateReport.vue
index aebe1e5..fda891d 100644
--- a/src/modules/11_probation/component/07_EvaluateReport.vue
+++ b/src/modules/11_probation/component/07_EvaluateReport.vue
@@ -550,7 +550,6 @@ onMounted(() => {
         <div class="column q-gutter-y-sm">
           <div class="text-dark text-weight-bold">วัน เดือน ปี ที่ประเมิน</div>
           <datepicker
-            menu-class-name="modalfix"
             v-model="evaluate_date"
             :locale="'th'"
             autoApply
diff --git a/src/modules/11_probation/component/addPage/01_addresult.vue b/src/modules/11_probation/component/addPage/01_addresult.vue
index 46c58f1..2ad82db 100644
--- a/src/modules/11_probation/component/addPage/01_addresult.vue
+++ b/src/modules/11_probation/component/addPage/01_addresult.vue
@@ -412,7 +412,6 @@ onMounted(async () => {
       <div class="row q-col-gutter-sm">
         <div class="col-12 col-sm-6">
           <datepicker
-            menu-class-name="modalfix"
             v-model="start_date"
             :locale="'th'"
             autoApply
@@ -450,7 +449,6 @@ onMounted(async () => {
         </div>
         <div class="col-12 col-sm-6">
           <datepicker
-            menu-class-name="modalfix"
             v-model="date_finish"
             :locale="'th'"
             autoApply
@@ -2190,7 +2188,6 @@ onMounted(async () => {
                 />
                 <div class="col-xs-12 col-sm-4">
                   <datepicker
-                    menu-class-name="modalfix"
                     v-model="dateAutherise"
                     :locale="'th'"
                     autoApply
diff --git a/src/modules/11_probation/component/addPage/02_addevaluacommander.vue b/src/modules/11_probation/component/addPage/02_addevaluacommander.vue
index db80751..360e6ea 100644
--- a/src/modules/11_probation/component/addPage/02_addevaluacommander.vue
+++ b/src/modules/11_probation/component/addPage/02_addevaluacommander.vue
@@ -429,7 +429,6 @@ onMounted(async () => {
           <div class="col-12 text-top0 row items-top q-col-gutter-sm">
             <div class="col-12 col-sm-6">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="start_date"
                 :locale="'th'"
                 autoApply
@@ -470,7 +469,6 @@ onMounted(async () => {
 
             <div class="col-12 col-sm-6">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="date_finish"
                 :locale="'th'"
                 autoApply
@@ -1691,7 +1689,6 @@ onMounted(async () => {
               />
               <div class="col-xs-12 col-sm-4">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="dateAutherise"
                   :locale="'th'"
                   autoApply
diff --git a/src/modules/11_probation/component/editPage/01_result.vue b/src/modules/11_probation/component/editPage/01_result.vue
index c63d17f..b0e27ae 100644
--- a/src/modules/11_probation/component/editPage/01_result.vue
+++ b/src/modules/11_probation/component/editPage/01_result.vue
@@ -2313,7 +2313,6 @@ onMounted(async () => {
               />
               <div class="col-xs-12 col-sm-4">
                 <datepicker
-                  menu-class-name="modalfix"
                   v-model="dateAutherise"
                   :locale="'th'"
                   autoApply

From 192787030237c3f7259ee58574f838e3bdba5dfd Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Jun 2025 11:15:53 +0700
Subject: [PATCH 115/195] fix class modalfix ==> 15_probationReport

---
 src/modules/15_probationReport/components/02_ResultPage.vue | 1 -
 src/modules/15_probationReport/components/03_AssignPage.vue | 2 --
 2 files changed, 3 deletions(-)

diff --git a/src/modules/15_probationReport/components/02_ResultPage.vue b/src/modules/15_probationReport/components/02_ResultPage.vue
index 76162c3..07617cd 100644
--- a/src/modules/15_probationReport/components/02_ResultPage.vue
+++ b/src/modules/15_probationReport/components/02_ResultPage.vue
@@ -470,7 +470,6 @@ onMounted(async () => {
             </div>
             <div class="col-12">
               <datepicker
-                menu-class-name="modalfix"
                 v-model="formData.evaluate_date"
                 :locale="'th'"
                 autoApply
diff --git a/src/modules/15_probationReport/components/03_AssignPage.vue b/src/modules/15_probationReport/components/03_AssignPage.vue
index 0806c88..0ff38b3 100644
--- a/src/modules/15_probationReport/components/03_AssignPage.vue
+++ b/src/modules/15_probationReport/components/03_AssignPage.vue
@@ -1216,7 +1216,6 @@ onMounted(async () => {
                     </div>
                     <div class="col-xs-12 col-sm-4">
                       <datepicker
-                        menu-class-name="modalfix"
                         v-model="date_start"
                         :locale="'th'"
                         autoApply
@@ -1256,7 +1255,6 @@ onMounted(async () => {
                     </div>
                     <div class="col-xs-12 col-sm-4">
                       <datepicker
-                        menu-class-name="modalfix"
                         v-model="date_finish"
                         :locale="'th'"
                         autoApply

From 60bda24d1d1ff183877d9b502d12d1ada84bf26a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 6 Jun 2025 13:50:04 +0700
Subject: [PATCH 116/195] delete const $q = useQuasar();  .ts

---
 src/modules/00_support/store/Main.ts          | 13 +++--
 .../06_evaluate/stores/evaluationFunction.ts  | 20 +++----
 src/modules/08_KPI/store.ts                   | 53 +------------------
 src/modules/10_registry/store/Main.ts         |  8 +--
 src/modules/10_registry/store/Position.ts     |  1 -
 5 files changed, 17 insertions(+), 78 deletions(-)

diff --git a/src/modules/00_support/store/Main.ts b/src/modules/00_support/store/Main.ts
index 12383f0..d4b3174 100644
--- a/src/modules/00_support/store/Main.ts
+++ b/src/modules/00_support/store/Main.ts
@@ -17,7 +17,6 @@ import { getToken, tokenParsed } from "@/plugins/auth";
 
 export const useSupportStore = defineStore("supportServiceStore", () => {
   const { showLoader, hideLoader, messageError } = useCounterMixin();
-  const $q = useQuasar();
   const openChat = ref<boolean>(false);
   const icon = ref<string>("mdi-account-check");
 
@@ -114,7 +113,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     const res = await http
       .get(config.API.supportMessageStatus(issueId))
       .catch((err) => {
-        messageError($q, err);
+        console.log(err);
       })
       .finally(() => {
         hideLoader();
@@ -129,7 +128,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     const res = await http
       .get(config.API.supportMessage(issueId))
       .catch((err) => {
-        messageError($q, err);
+        console.log(err);
       })
       .finally(() => {
         hideLoader();
@@ -149,7 +148,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     const res = await http
       .get(config.API.supportIssueUserId(userId.value))
       .catch((err) => {
-        messageError($q, err);
+        console.log(err);
       })
       .finally(() => {
         hideLoader();
@@ -166,7 +165,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     const res = await http
       .get(config.API.supportIssueCategory)
       .catch((err) => {
-        messageError($q, err);
+        console.log(err);
       })
       .finally(() => {
         hideLoader();
@@ -188,7 +187,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     const res = await http
       .post(config.API.supportNewIssue, requestBody)
       .catch((err) => {
-        messageError($q, err);
+        console.log(err);
       })
       .finally(() => {
         hideLoader();
@@ -203,7 +202,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     const res = await http
       .get(config.API.supportSearchIssue(searchData))
       .catch((err) => {
-        messageError($q, err);
+        console.log(err);
       });
     if (res && res.data) {
       issue.value = res.data;
diff --git a/src/modules/06_evaluate/stores/evaluationFunction.ts b/src/modules/06_evaluate/stores/evaluationFunction.ts
index a683f9c..faf7e37 100644
--- a/src/modules/06_evaluate/stores/evaluationFunction.ts
+++ b/src/modules/06_evaluate/stores/evaluationFunction.ts
@@ -1,15 +1,13 @@
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
-const $q = useQuasar();
 
-const { showLoader, hideLoader, messageError } = mixin;
+const { showLoader, hideLoader } = mixin;
 
 /** function เช็คการยื่นข้อประเมิน*/
 async function fetchCheckStatus() {
@@ -26,7 +24,7 @@ async function fetchCheckStatus() {
       fetchCheckStep(store?.evaluateId);
     })
     .catch((err) => {
-      messageError($q, err);
+      console.log(err);
     })
     .finally(() => {
       hideLoader();
@@ -65,7 +63,7 @@ async function fetchCheckStep(id: string) {
         store.step = step;
       })
       .catch((err) => {
-        messageError($q, err);
+        console.log(err);
       })
       .finally(() => {
         store.showLoadStatus = true;
@@ -143,7 +141,7 @@ async function saveEvaluation(formSpec: any, detail: any) {
       fetchCheckStatus();
     })
     .catch((err) => {
-      messageError($q, err);
+      console.log(err);
     })
     .finally(() => {
       fetchCheckStep(store?.evaluateId);
@@ -155,10 +153,9 @@ async function nextPrapare(type: string, body: any) {
   showLoader();
   await http
     .put(config.API.evaluationPreparedoc(store.evaluateId, type), body)
-    .then((res) => {
-    })
+    .then((res) => {})
     .catch((err) => {
-      messageError($q, err);
+      console.log(err);
     })
     .finally(() => {
       hideLoader();
@@ -170,10 +167,9 @@ async function nextCheckDoc(type: string) {
   showLoader();
   await http
     .put(config.API.evaluationCheckdoc(store.evaluateId, type))
-    .then((res) => {
-    })
+    .then((res) => {})
     .catch((err) => {
-      messageError($q, err);
+      console.log(err);
     })
     .finally(() => {
       hideLoader();
diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index ebf25b4..25eb139 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -1,17 +1,9 @@
 import { defineStore } from "pinia";
-import { ref, reactive, watch } from "vue";
+import { ref, reactive } from "vue";
 import type { DataOptions } from "./interface/index/Main";
 import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
-import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
 
 export const useKpiDataStore = defineStore("KPIDate", () => {
-  const $q = useQuasar();
-  const mixin = useCounterMixin();
-  const { showLoader, hideLoader, messageError } = mixin;
-
   const mainRowData = ref<any>();
   const isUpdate = ref<boolean>(false);
   const tabMainevaluator = ref<string>("1");
@@ -432,47 +424,6 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
   const devProbationScore = ref<number>(10); // สรุปผลการประเมินพฤติกรรมการปฏิบัติราชการ (สมรรถนะ+การพัฒนาตนเอง) (คะแนนเต็ม competencyDevScore คะแนน)
   const competencyDevProbationScore = ref<number>(50); // สรุปผลการประเมินพฤติกรรมการปฏิบัติราชการ (สมรรถนะ+การพัฒนาตนเอง) (คะแนนเต็ม competencyDevScore คะแนน)
 
-  // function getDataWork() {
-  //   showLoader();
-  //   http
-  //     .get(config.API.orgPosition + `/${dataProfile.value.profileId}`)
-  //     .then((res) => {
-  //       const data = res.data.result.isProbation;
-  //       work.value = data;
-  //       if (data) {
-  //         indicatorScore.value = 50;
-  //         competencyScore.value = 40;
-  //         excusiveCompetencyScore.value = 40;
-  //         competencyDevScore.value = 10;
-  //       } else {
-  //         indicatorScore.value = 70;
-  //         competencyScore.value = 20;
-  //         excusiveCompetencyScore.value = 20;
-  //         competencyDevScore.value = 30;
-  //       }
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
-  // }
-
-  // watch(
-  //   () => tabMain.value,
-  //   () => {
-  //     if (tabMain.value == "3" && tabOpen.value == 3) {
-  //       getDataWork();
-  //     } else {
-  //       indicatorScore.value = 70;
-  //       competencyScore.value = 20;
-  //       excusiveCompetencyScore.value = 20;
-  //       competencyDevScore.value = 30;
-  //     }
-  //   }
-  // );
-
   return {
     tabMain,
     dataProfile,
@@ -526,6 +477,6 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     mainRowData,
     resultsOptions,
     statusOptions,
-    roleText
+    roleText,
   };
 });
diff --git a/src/modules/10_registry/store/Main.ts b/src/modules/10_registry/store/Main.ts
index 47c2ab6..bff947e 100644
--- a/src/modules/10_registry/store/Main.ts
+++ b/src/modules/10_registry/store/Main.ts
@@ -1,13 +1,7 @@
 import { defineStore } from "pinia";
-import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { messageError } = mixin;
 
 export const useRegistryDataStore = defineStore("RegistryDataStoreMain", () => {
   async function getPathUploadFlie(
@@ -27,7 +21,7 @@ export const useRegistryDataStore = defineStore("RegistryDataStoreMain", () => {
       );
       return res.data;
     } catch (err) {
-      messageError($q, err);
+      console.log(err);
     }
   }
 
diff --git a/src/modules/10_registry/store/Position.ts b/src/modules/10_registry/store/Position.ts
index 7fee4f6..ad14276 100644
--- a/src/modules/10_registry/store/Position.ts
+++ b/src/modules/10_registry/store/Position.ts
@@ -6,7 +6,6 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/10_registry/interface/index/Main";
 
-const $q = useQuasar();
 const mixin = useCounterMixin();
 const {} = mixin;
 

From 119973255db537fe6ae71540197d6ce142ec35e4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 10 Jun 2025 15:48:28 +0700
Subject: [PATCH 117/195] fix bug  formLeave

---
 src/modules/05_leave/views/EditPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 2b08e82..129a61c 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -433,7 +433,7 @@ onMounted(async () => {
                 :on-confirm="onConfirm"
                 :click-delete="clickDelete"
               />
-              <HelpWifeBirthForm5
+              <HelpWifeBirthForm
                 v-if="model === 'LV-004'"
                 :data="formData"
                 :on-submit="onSubmit"

From 4fe6e23de80225138ee6bd51a51fd9a6e5c7b6c9 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 11 Jun 2025 14:33:21 +0700
Subject: [PATCH 118/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20path=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=94=E0=B8=82=E0=B8=AD=E0=B8=A5=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B8=9C=E0=B8=A5=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=88=E0=B8=B2=E0=B8=A3=E0=B8=93=E0=B8=B2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=93=E0=B8=B5=E0=B8=82=E0=B8=AD=E0=B8=A1=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A2=E0=B8=81=E0=B9=80=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=81=E0=B8=82=E0=B8=AD=E0=B8=A5=E0=B8=B2=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/leave/api.leave.ts                |  10 +-
 src/modules/03_retire/interface/Main.ts   |   2 +
 src/modules/03_retire/views/addRetire.vue | 419 +++++++++++++++-------
 3 files changed, 298 insertions(+), 133 deletions(-)

diff --git a/src/api/leave/api.leave.ts b/src/api/leave/api.leave.ts
index 8c2b537..6101b03 100644
--- a/src/api/leave/api.leave.ts
+++ b/src/api/leave/api.leave.ts
@@ -6,16 +6,18 @@ const holiday = `${env.API_URI}/metadata/holiday/`;
 
 export default {
   listUser: () => `${retirementResign}/resign/user`,
-  listUserByType:(type:string) => `${retirementResign}/resign${type}/user`,
+  listUserByType: (type: string) => `${retirementResign}/resign${type}/user`,
   listResign: () => `${retirementResign}/resign`,
-  listResignByType: (type:string) => `${retirementResign}/resign${type}`,
+  listResignByType: (type: string) => `${retirementResign}/resign${type}`,
   resingByid: (id: string) => `${retirementResign}/resign/${id}`,
-  resingByidType: (type:string,id: string) => `${retirementResign}/resign${type}/${id}`,
+  resingByidType: (type: string, id: string) =>
+    `${retirementResign}/resign${type}/user/${id}`,
   questionnaireByid: (id: string) =>
     `${retirementResign}/resign/questionnaire/${id}`,
   listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
   cancelResign: (id: string) => `${retirementResign}/resign/cancel/${id}`,
-  cancelResignByType: (type:string,id: string) => `${retirementResign}/resign${type}/cancel/${id}`,
+  cancelResignByType: (type: string, id: string) =>
+    `${retirementResign}/resign${type}/cancel/${id}`,
 
   // คำถาม
   questionList: () => `${retirementResign}/resign/questionnaire/question`,
diff --git a/src/modules/03_retire/interface/Main.ts b/src/modules/03_retire/interface/Main.ts
index 1bb3486..28b5f01 100644
--- a/src/modules/03_retire/interface/Main.ts
+++ b/src/modules/03_retire/interface/Main.ts
@@ -62,6 +62,8 @@ interface DataOptions {
 interface RowsType {
   commanders: SeqTypeRow[];
   approvers: SeqTypeRow[];
+  cancelCommanders: SeqTypeRow[] | null;
+  cancelApprovers: SeqTypeRow[] | null;
 }
 interface SeqTypeRow {
   seq: number;
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 2e82e3b..c6c3a6c 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -144,19 +144,6 @@ const columnsCommanders = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
- * ฟังก์ชั่นเปลี่ยนเป็น string ของ status
- * @param val value ของ status true/false
- */
-function statusOrder(val: boolean) {
-  switch (val) {
-    case true:
-      return "ยับยั้ง";
-    case false:
-      return "อนุญาต";
-  }
-}
-
 /**
  * บันทึกข้อมูลการลาออก
  */
@@ -233,6 +220,8 @@ async function fectDataresign(id: string) {
       rowsApprover.value = {
         commanders: data.commanders,
         approvers: data.approvers,
+        cancelCommanders: data.cancelCommanders ?? null,
+        cancelApprovers: data.cancelApprovers ?? null,
       };
       files.value = data.docs;
       dataDetail.value = data;
@@ -398,6 +387,7 @@ onMounted(async () => {
                   ? 'col-md-3 col-xs-12'
                   : 'col-md-3 col-xs-12 inputgreen'
               "
+              menu-class-name="modalfix"
               v-model="dateLeave"
               :locale="'th'"
               autoApply
@@ -585,137 +575,308 @@ onMounted(async () => {
               </q-card>
             </div> -->
 
-            <!-- ผลการพิจารณาของผู้บังคับบัญชา -->
-            <div class="col-12 row" v-if="routeName != 'AddRetire'">
-              <q-card bordered class="row col-12 text-dark q-mt-sm">
-                <div
-                  class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
-                >
-                  <div class="q-pl-sm text-weight-bold text-dark">
-                    ผลการพิจารณาของผู้บังคับบัญชา
-                  </div>
-                </div>
-                <q-separator />
-                <div class="col-12">
-                  <d-table
-                    ref="table"
-                    :columns="columnsCommanders"
-                    :rows="rowsApprover?.commanders ?? []"
-                    row-key="key"
-                    flat
-                    bordered
-                    :paging="true"
-                    dense
-                    :rows-per-page-options="[1, 25, 50, 100]"
-                  >
-                    <template v-slot:header="props">
-                      <q-tr :props="props">
-                        <q-th
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                        >
-                          <span class="text-weight-medium">{{
-                            col.label
-                          }}</span>
-                        </q-th>
-                      </q-tr>
-                    </template>
-                    <template v-slot:body="props">
-                      <q-tr :props="props" class="cursor-pointer">
-                        <q-td
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                        >
-                          <div v-if="col.name == 'no'">
-                            {{ props.rowIndex + 1 }}
-                          </div>
+            <div class="row col-12" v-if="routeName != 'AddRetire'">
+              <div class="col-12 q-mt-sm text-weight-bold text-primary">
+                ผลการพิจารณาการขอลาออก
+              </div>
 
-                          <div v-else-if="col.name == 'approveStatus'">
+              <div class="col-12 q-mt-md">
+                <!-- ผลการพิจารณาของผู้บังคับบัญชา -->
+                <div class="col-12 row" v-if="routeName != 'AddRetire'">
+                  <q-card bordered class="row col-12 text-dark">
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        ผลการพิจารณาของผู้บังคับบัญชา
+                      </div>
+                    </div>
+                    <q-separator />
+                    <div class="col-12 q-pa-sm">
+                      <d-table
+                        ref="table"
+                        :columns="columnsCommanders"
+                        :rows="rowsApprover?.commanders ?? []"
+                        row-key="key"
+                        flat
+                        bordered
+                        :paging="true"
+                        dense
+                        :rows-per-page-options="[1, 25, 50, 100]"
+                      >
+                        <template v-slot:header="props">
+                          <q-tr :props="props">
+                            <q-th
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                            >
+                              <span class="text-weight-medium">{{
+                                col.label
+                              }}</span>
+                            </q-th>
+                          </q-tr>
+                        </template>
+                        <template v-slot:body="props">
+                          <q-tr :props="props" class="cursor-pointer">
+                            <q-td
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                            >
+                              <div v-if="col.name == 'no'">
+                                {{ props.rowIndex + 1 }}
+                              </div>
+
+                              <div v-else-if="col.name == 'approveStatus'">
+                                {{
+                                  props.row.approveStatus
+                                    ? convertStatusText(props.row.approveStatus)
+                                    : "-"
+                                }}
+                              </div>
+                              <div v-else>
+                                {{ col.value ? col.value : "-" }}
+                              </div>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </d-table>
+                    </div>
+                  </q-card>
+                </div>
+
+                <!-- ผลการพิจารณาของผู้มีอำนาจ -->
+                <div class="col-12 row" v-if="routeName != 'AddRetire'">
+                  <q-card bordered class="row col-12 text-dark q-mt-sm">
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        ผลการพิจารณาของผู้มีอำนาจ
+                      </div>
+                    </div>
+                    <q-separator />
+                    <div class="row col-12 q-pa-md">
+                      <div class="col-12 row bg-white q-col-gutter-md">
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">ชื่อ - นามสกุล</div>
+                          <div class="col-12 text-detail">
                             {{
-                              props.row.approveStatus
-                                ? convertStatusText(props.row.approveStatus)
+                              rowsApprover &&
+                              rowsApprover.approvers &&
+                              rowsApprover.approvers[0]?.firstName
+                                ? `${rowsApprover?.approvers[0].prefix}${rowsApprover?.approvers[0].firstName} ${rowsApprover?.approvers[0].lastName}`
                                 : "-"
                             }}
                           </div>
-                          <div v-else>
-                            {{ col.value ? col.value : "-" }}
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">สถานะ</div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.approvers &&
+                              rowsApprover.approvers[0]?.approveStatus
+                                ? convertStatusText(
+                                    rowsApprover?.approvers[0].approveStatus
+                                  )
+                                : "-"
+                            }}
                           </div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </d-table>
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">
+                            วันสุดท้ายที่ยับยั้ง
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.approvers &&
+                              rowsApprover.approvers[0]?.rejectDate
+                                ? date2Thai(
+                                    rowsApprover?.approvers[0].rejectDate
+                                  )
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-12 row items-start">
+                          <div class="col-12 text-top">
+                            ความคิดเห็นและเหตุผล
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.approvers &&
+                              rowsApprover.approvers[0]?.comment
+                                ? rowsApprover?.approvers[0].comment
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
                 </div>
-              </q-card>
+              </div>
             </div>
 
-            <!-- ผลการพิจารณาของผู้มีอำนาจ -->
-            <div class="col-12 row" v-if="routeName != 'AddRetire'">
-              <q-card bordered class="row col-12 text-dark q-mt-sm">
-                <div
-                  class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
-                >
-                  <div class="q-pl-sm text-weight-bold text-dark">
-                    ผลการพิจารณาของผู้มีอำนาจ
-                  </div>
+            <!-- ยกเลิกการลาออก -->
+            <div
+              class="row col-12"
+              v-if="
+                routeName != 'AddRetire' &&
+                rowsApprover &&
+                rowsApprover?.cancelCommanders &&
+                rowsApprover?.cancelCommanders?.length > 0
+              "
+            >
+              <div class="col-12 q-mt-sm text-weight-bold text-red">
+                ผลการพิจารณาการขอยกเลิกลาออก
+              </div>
+
+              <div class="col-12 q-pa-sm">
+                <!-- ผลการพิจารณาของผู้บังคับบัญชา -->
+                <div class="col-12 row" v-if="routeName != 'AddRetire'">
+                  <q-card bordered class="row col-12 text-dark q-mt-sm">
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        ผลการพิจารณาของผู้บังคับบัญชา
+                      </div>
+                    </div>
+                    <q-separator />
+                    <div class="col-12 q-pa-sm">
+                      <d-table
+                        ref="table"
+                        :columns="columnsCommanders"
+                        :rows="rowsApprover?.cancelCommanders ?? []"
+                        row-key="key"
+                        flat
+                        bordered
+                        :paging="true"
+                        dense
+                        :rows-per-page-options="[1, 25, 50, 100]"
+                      >
+                        <template v-slot:header="props">
+                          <q-tr :props="props">
+                            <q-th
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                            >
+                              <span class="text-weight-medium">{{
+                                col.label
+                              }}</span>
+                            </q-th>
+                          </q-tr>
+                        </template>
+                        <template v-slot:body="props">
+                          <q-tr :props="props" class="cursor-pointer">
+                            <q-td
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                            >
+                              <div v-if="col.name == 'no'">
+                                {{ props.rowIndex + 1 }}
+                              </div>
+
+                              <div v-else-if="col.name == 'approveStatus'">
+                                {{
+                                  props.row.approveStatus
+                                    ? convertStatusText(props.row.approveStatus)
+                                    : "-"
+                                }}
+                              </div>
+                              <div v-else>
+                                {{ col.value ? col.value : "-" }}
+                              </div>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </d-table>
+                    </div>
+                  </q-card>
                 </div>
-                <q-separator />
-                <div class="row col-12 q-pa-md">
-                  <div class="col-12 row bg-white q-col-gutter-md">
-                    <div class="col-xs-6 row items-start">
-                      <div class="col-12 text-top">ชื่อ - นามสกุล</div>
-                      <div class="col-12 text-detail">
-                        {{
-                          rowsApprover &&
-                          rowsApprover.approvers &&
-                          rowsApprover.approvers[0]?.firstName
-                            ? `${rowsApprover?.approvers[0].prefix}${rowsApprover?.approvers[0].firstName} ${rowsApprover?.approvers[0].lastName}`
-                            : "-"
-                        }}
+
+                <!-- ผลการพิจารณาของผู้มีอำนาจ -->
+                <div class="col-12 row" v-if="routeName != 'AddRetire'">
+                  <q-card bordered class="row col-12 text-dark q-mt-sm">
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        ผลการพิจารณาของผู้มีอำนาจ
                       </div>
                     </div>
-                    <div class="col-xs-6 row items-start">
-                      <div class="col-12 text-top">สถานะ</div>
-                      <div class="col-12 text-detail">
-                        {{
-                          rowsApprover &&
-                          rowsApprover.approvers &&
-                          rowsApprover.approvers[0]?.approveStatus
-                            ? convertStatusText(
-                                rowsApprover?.approvers[0].approveStatus
-                              )
-                            : "-"
-                        }}
+                    <q-separator />
+                    <div class="row col-12 q-pa-md">
+                      <div class="col-12 row bg-white q-col-gutter-md">
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">ชื่อ - นามสกุล</div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.cancelApprovers &&
+                              rowsApprover.cancelApprovers[0]?.firstName
+                                ? `${rowsApprover?.cancelApprovers[0].prefix}${rowsApprover?.cancelApprovers[0].firstName} ${rowsApprover?.cancelApprovers[0].lastName}`
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">สถานะ</div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.cancelApprovers &&
+                              rowsApprover.cancelApprovers[0]?.approveStatus
+                                ? convertStatusText(
+                                    rowsApprover?.cancelApprovers[0]
+                                      .approveStatus
+                                  )
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">
+                            วันสุดท้ายที่ยับยั้ง
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.cancelApprovers &&
+                              rowsApprover.cancelApprovers[0]?.rejectDate
+                                ? date2Thai(
+                                    rowsApprover?.cancelApprovers[0].rejectDate
+                                  )
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-12 row items-start">
+                          <div class="col-12 text-top">
+                            ความคิดเห็นและเหตุผล
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.cancelApprovers &&
+                              rowsApprover.cancelApprovers[0]?.comment
+                                ? rowsApprover?.cancelApprovers[0].comment
+                                : "-"
+                            }}
+                          </div>
+                        </div>
                       </div>
                     </div>
-                    <div class="col-xs-6 row items-start">
-                      <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-                      <div class="col-12 text-detail">
-                        {{
-                          rowsApprover &&
-                          rowsApprover.approvers &&
-                          rowsApprover.approvers[0]?.rejectDate
-                            ? date2Thai(rowsApprover?.approvers[0].rejectDate)
-                            : "-"
-                        }}
-                      </div>
-                    </div>
-                    <div class="col-xs-12 row items-start">
-                      <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-                      <div class="col-12 text-detail">
-                        {{
-                          rowsApprover &&
-                          rowsApprover.approvers &&
-                          rowsApprover.approvers[0]?.comment
-                            ? rowsApprover?.approvers[0].comment
-                            : "-"
-                        }}
-                      </div>
-                    </div>
-                  </div>
+                  </q-card>
                 </div>
-              </q-card>
+              </div>
             </div>
           </div>
 

From 7025a797f2b72fa235d134e5b72f4b61b719486d Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 11 Jun 2025 16:16:58 +0700
Subject: [PATCH 119/195] fix col layout register edit phone & email

---
 .../01_Information/01_Information.vue         | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/modules/10_registry/01_Information/01_Information.vue b/src/modules/10_registry/01_Information/01_Information.vue
index f97a40e..fc736f7 100644
--- a/src/modules/10_registry/01_Information/01_Information.vue
+++ b/src/modules/10_registry/01_Information/01_Information.vue
@@ -411,10 +411,10 @@ onMounted(async () => {
       <div class="row">
         <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">
+            <div class="col-4 text-grey-6 text-weight-medium">
               เลขประจำตัวประชาชน
             </div>
-            <div class="col-7">
+            <div class="col-8">
               {{
                 formDataInformation.citizenId
                   ? formDataInformation.citizenId
@@ -424,8 +424,8 @@ onMounted(async () => {
           </div>
 
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">ชื่อ - สกุล</div>
-            <div class="col-7">
+            <div class="col-4 text-grey-6 text-weight-medium">ชื่อ - สกุล</div>
+            <div class="col-8">
               {{
                 formDataInformation.firstName
                   ? `${
@@ -441,10 +441,10 @@ onMounted(async () => {
           </div>
 
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">
+            <div class="col-4 text-grey-6 text-weight-medium">
               วัน/เดือน/ปีเกิด
             </div>
-            <div class="col-7">
+            <div class="col-8">
               {{
                 formDataInformation.birthDate
                   ? date2Thai(formDataInformation.birthDate)
@@ -454,8 +454,8 @@ onMounted(async () => {
           </div>
 
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">เพศ</div>
-            <div class="col-7">
+            <div class="col-4 text-grey-6 text-weight-medium">เพศ</div>
+            <div class="col-8">
               {{
                 formDataInformation.gender ? formDataInformation.gender : "-"
               }}
@@ -463,8 +463,8 @@ onMounted(async () => {
           </div>
 
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">สถานภาพ</div>
-            <div class="col-7">
+            <div class="col-4 text-grey-6 text-weight-medium">สถานภาพ</div>
+            <div class="col-8">
               {{
                 formDataInformation.relationship
                   ? formDataInformation.relationship
@@ -476,8 +476,8 @@ onMounted(async () => {
 
         <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">สัญชาติ</div>
-            <div class="col-7">
+            <div class="col-4 text-grey-6 text-weight-medium">สัญชาติ</div>
+            <div class="col-8">
               {{
                 formDataInformation.nationality
                   ? formDataInformation.nationality
@@ -486,8 +486,8 @@ onMounted(async () => {
             </div>
           </div>
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">เชื้อชาติ</div>
-            <div class="col-7">
+            <div class="col-4 text-grey-6 text-weight-medium">เชื้อชาติ</div>
+            <div class="col-8">
               {{
                 formDataInformation.ethnicity
                   ? formDataInformation.ethnicity
@@ -496,8 +496,8 @@ onMounted(async () => {
             </div>
           </div>
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">ศาสนา</div>
-            <div class="col-7">
+            <div class="col-4 text-grey-6 text-weight-medium">ศาสนา</div>
+            <div class="col-8">
               {{
                 formDataInformation.religion
                   ? formDataInformation.religion
@@ -506,8 +506,8 @@ onMounted(async () => {
             </div>
           </div>
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">หมู่เลือด</div>
-            <div class="col-7">
+            <div class="col-4 text-grey-6 text-weight-medium">หมู่เลือด</div>
+            <div class="col-8">
               {{
                 formDataInformation.bloodGroup
                   ? formDataInformation.bloodGroup
@@ -516,8 +516,8 @@ onMounted(async () => {
             </div>
           </div>
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">เบอร์โทร</div>
-            <div class="col-7">
+            <div class="col-4 text-grey-6 text-weight-medium">เบอร์โทร</div>
+            <div class="col-8">
               <div class="row q-col-gutter-sm">
                 <div class="col-9">
                   <q-input
@@ -580,8 +580,8 @@ onMounted(async () => {
             </div>
           </div>
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">อีเมล</div>
-            <div class="col-7">
+            <div class="col-4 text-grey-6 text-weight-medium">อีเมล</div>
+            <div class="col-8">
               <div class="row q-col-gutter-sm">
                 <div class="col-9">
                   <q-input

From ef9a805cb4ddeacf4a45721412ab25fc90b62778 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 11 Jun 2025 16:55:14 +0700
Subject: [PATCH 120/195] fix display and sort registry

---
 .../01_Information/05_Educations.vue          |  2 +-
 .../02_Government/01_Government.vue           | 36 +++++++++----------
 .../10_registry/02_Government/07_Position.vue |  2 +-
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/modules/10_registry/01_Information/05_Educations.vue b/src/modules/10_registry/01_Information/05_Educations.vue
index 515fe2a..83dd3ef 100644
--- a/src/modules/10_registry/01_Information/05_Educations.vue
+++ b/src/modules/10_registry/01_Information/05_Educations.vue
@@ -267,7 +267,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const pagination = ref({
-  sortBy: "lastUpdatedAt",
+  // sortBy: "lastUpdatedAt",
 });
 
 const columnsHistory = ref<QTableProps["columns"]>([
diff --git a/src/modules/10_registry/02_Government/01_Government.vue b/src/modules/10_registry/02_Government/01_Government.vue
index 153d08b..f47c4db 100644
--- a/src/modules/10_registry/02_Government/01_Government.vue
+++ b/src/modules/10_registry/02_Government/01_Government.vue
@@ -497,19 +497,19 @@ onMounted(async () => {
       <div class="row">
         <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">
+            <div class="col-6 text-grey-6 text-weight-medium">
               วันที่สั่งบรรจุ
             </div>
-            <div class="col-7">
+            <div class="col-6">
               {{ formData.dateAppoint ? date2Thai(formData.dateAppoint) : "-" }}
             </div>
           </div>
 
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">
+            <div class="col-6 text-grey-6 text-weight-medium">
               วันที่เริ่มปฏิบัติราชการ
             </div>
-            <div class="col-7">
+            <div class="col-6">
               {{ formData.dateStart ? date2Thai(formData.dateStart) : "-" }}
             </div>
           </div>
@@ -518,22 +518,32 @@ onMounted(async () => {
             v-if="dateToISO(formData.dateAppoint as Date) !== dateToISO(formData.dateStart as Date)"
             class="row"
           >
-            <div class="col-5 text-grey-6 text-weight-medium">
+            <div class="col-6 text-grey-6 text-weight-medium">
               เหตุผลที่วันที่ไม่ตรงกัน
             </div>
-            <div class="col-7">
+            <div class="col-6">
               {{ formData.reasonSameDate ? formData.reasonSameDate : "-" }}
             </div>
           </div>
 
           <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">
+            <div class="col-6 text-grey-6 text-weight-medium">
               วันครบเกษียณอายุ
             </div>
-            <div class="col-7">
+            <div class="col-6">
               {{ formData.dateLeave ? date2Thai(formData.dateLeave) : "-" }}
             </div>
           </div>
+          <div class="row">
+            <div class="col-6 text-grey-6 text-weight-medium">
+              วันที่เกษียณอายุราชการตามกฏหมาย
+            </div>
+            <div class="col-6">
+              {{
+                formData.dateRetireLaw ? date2Thai(formData.dateRetireLaw) : "-"
+              }}
+            </div>
+          </div>
         </div>
 
         <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
@@ -561,16 +571,6 @@ onMounted(async () => {
               {{ formData.govAgePlus ? formData.govAgePlus : 0 }}
             </div>
           </div>
-          <div class="row">
-            <div class="col-5 text-grey-6 text-weight-medium">
-              วันที่เกษียณอายุราชการตามกฏหมาย
-            </div>
-            <div class="col-7">
-              {{
-                formData.dateRetireLaw ? date2Thai(formData.dateRetireLaw) : "-"
-              }}
-            </div>
-          </div>
         </div>
       </div>
     </q-card>
diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index c32aba6..7989543 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -114,7 +114,7 @@ const baseColumns = ref<QTableColumn[]>([
     style: "font-size: 14px",
     format(val, row) {
       return row.posNoAbb && row.posNo
-        ? `${row.posNoAbb}${row.posNo}`
+        ? `${row.posNoAbb} ${row.posNo}`
         : row.posNo
         ? row.posNo
         : "-";

From 2cba11b36fe0aeabd108edaa0751619f2b103b75 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 12 Jun 2025 09:43:46 +0700
Subject: [PATCH 121/195] fix search person in workflow

---
 src/components/Workflow/DialogSelectPerson.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Workflow/DialogSelectPerson.vue b/src/components/Workflow/DialogSelectPerson.vue
index bc52e15..9dfae70 100644
--- a/src/components/Workflow/DialogSelectPerson.vue
+++ b/src/components/Workflow/DialogSelectPerson.vue
@@ -162,12 +162,12 @@ watch(modal, (val) => {
   }
 });
 
-watch(
-  () => [formDataQuery.isAct, formDataQuery.pageSize],
-  () => {
-    onSearchData();
-  }
-);
+// watch(
+//   () => [formDataQuery.isAct, formDataQuery.pageSize],
+//   () => {
+//     onSearchData();
+//   }
+// );
 
 /**
  * function updatePagination

From b8edb00a19f11200941c9836cfb910231446c714 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 12 Jun 2025 11:22:29 +0700
Subject: [PATCH 122/195] =?UTF-8?q?-=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=84=E0=B8=82=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AD=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20sys-name=20=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=20-=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B9=81=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=94=E0=B8=87=20workflow=20=E0=B8=AB=E0=B8=99=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=82=E0=B8=AD=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20IDP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../10_registry/views/requestEditDetail.vue        |  7 +++++--
 src/modules/14_IDP/views/registry.vue              | 14 ++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/modules/10_registry/views/requestEditDetail.vue b/src/modules/10_registry/views/requestEditDetail.vue
index b9884f1..9c21f6f 100644
--- a/src/modules/10_registry/views/requestEditDetail.vue
+++ b/src/modules/10_registry/views/requestEditDetail.vue
@@ -312,10 +312,13 @@ onMounted(async () => {
 
           <div class="col-12 q-mt-sm">
             <Workflow
-              v-if="dataStore.officerType === 'OFFICER'"
               ref="workflowRef"
               :id="requestId"
-              sys-name="REGISTRY_PROFILE"
+              :sys-name="
+                dataStore.officerType === 'OFFICER'
+                  ? 'REGISTRY_PROFILE'
+                  : 'REGISTRY_PROFILE_EMP'
+              "
             />
           </div>
         </div>
diff --git a/src/modules/14_IDP/views/registry.vue b/src/modules/14_IDP/views/registry.vue
index a024f19..dc1be6d 100644
--- a/src/modules/14_IDP/views/registry.vue
+++ b/src/modules/14_IDP/views/registry.vue
@@ -3,6 +3,9 @@ import { reactive, ref, computed, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import axios from "axios";
+import { useDataStore } from "@/stores/data";
+
+import Workflow from "@/components/Workflow/Main.vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -16,12 +19,14 @@ import type {
 const $q = useQuasar();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
+const dataStore = useDataStore();
 
 const idRow = ref<string>("");
 const router = useRouter();
 const route = useRoute();
 const isReadOnly = ref<boolean>(false);
 const isEdit = ref<boolean>(false); // เก็บ เช็ค รายละเอียด/แก้ไข
+const requestId = ref<string>(route.params.id.toString());
 
 const formData = reactive<FormDataIDP>({
   topic: "",
@@ -538,6 +543,15 @@ onMounted(() => {
               ><q-tooltip>บันทึก</q-tooltip></q-btn
             >
           </q-card-actions>
+
+          <div class="col-12 q-mt-sm">
+            <Workflow
+              v-if="dataStore.officerType === 'OFFICER'"
+              ref="workflowRef"
+              :id="requestId"
+              sys-name="REGISTRY_IDP"
+            />
+          </div>
         </q-form>
       </q-card>
     </div>

From b720074409da0737f12e59c596f7c082417da279 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 12 Jun 2025 12:23:14 +0700
Subject: [PATCH 123/195] fix bug watch props of appeal complain

---
 src/modules/07_appealComplain/views/Form.vue | 57 +++++++++++---------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index 6411e5f..322d4e5 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -150,39 +150,44 @@ function onSubmit(data: FormDataType) {
 
 watch(
   () => props.formProfile,
-  () => {
-    if (props.formProfile !== null) {
-      formData.fullname = props.formProfile.fullname;
-      formData.profileId = props.formProfile.profileId;
-      formData.citizenId = props.formProfile.citizenId;
-      formData.oc = props.formProfile.oc;
-      formData.position = props.formProfile.position;
+  (newValue) => {
+    if (newValue !== null) {
+      formData.fullname = newValue.fullname;
+      formData.profileId = newValue.profileId;
+      formData.citizenId = newValue.citizenId;
+      formData.oc = newValue.oc;
+      formData.position = newValue.position;
     }
-  }
+  },
+  { deep: true }
 );
 
 watch(
   () => props.data,
-  () => {
-    isReadOnly.value = true;
-    formData.id = props.data.id;
-    formData.title = props.data.title;
-    formData.description = props.data.description;
-    formData.status = props.data.status;
-    formData.type = props.data.type;
-    formData.year = props.data.year;
-    formData.caseType = props.data.caseType;
-    formData.caseNumber = props.data.caseNumber;
-    formData.fullname = props.data.fullname;
-    formData.citizenId = props.data.citizenId;
-    formData.profileId = props.data.profileId;
-    formData.lastUpdatedAt = props.data.lastUpdatedAt;
-    formData.disciplineComplaint_Appeal_Docs =
-      props.data.disciplineComplaint_Appeal_Docs;
-    formData.historyStatus = props.data.historyStatus;
-  }
+  (newValue) => {
+    if (newValue !== null) {
+      isReadOnly.value = true;
+      formData.id = props.data.id;
+      formData.title = props.data.title;
+      formData.description = props.data.description;
+      formData.status = props.data.status;
+      formData.type = props.data.type;
+      formData.year = props.data.year;
+      formData.caseType = props.data.caseType;
+      formData.caseNumber = props.data.caseNumber;
+      formData.fullname = props.data.fullname;
+      formData.citizenId = props.data.citizenId;
+      formData.profileId = props.data.profileId;
+      formData.lastUpdatedAt = props.data.lastUpdatedAt;
+      formData.disciplineComplaint_Appeal_Docs =
+        props.data.disciplineComplaint_Appeal_Docs;
+      formData.historyStatus = props.data.historyStatus;
+    }
+  },
+  { deep: true }
 );
 </script>
+
 <template>
   <div class="row">
     <div class="col-sm-12 col-md-12 col-xs-12">

From 1db13be8b001b39bcd958d9a704e4ade0032b42e Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 12 Jun 2025 14:09:45 +0700
Subject: [PATCH 124/195] =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99?=
 =?UTF-8?q?=20=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=8A=E0=B9=87=E0=B8=84=20index?=
 =?UTF-8?q?=20=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=A7=E0=B8=88=E0=B8=AA=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B8=E0=B8=93=E0=B8=AA=E0=B8=A1=E0=B8=9A=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=20=E0=B8=9C=E0=B8=A5=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B9=80=E0=B8=84=E0=B8=A2?=
 =?UTF-8?q?=E0=B9=80=E0=B8=AA=E0=B8=99=E0=B8=AD=E0=B8=82=E0=B8=AD=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_evaluate/components/viewstep/viewStep1.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index a6e7c29..a3057f8 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -249,7 +249,7 @@ function onOpenDialogPerformance(
   stetusEdit: boolean = false,
   index: number | null = null
 ) {
-  if (stetusEdit && index) {
+  if (stetusEdit && index !== null) {
     isIndex.value = index;
     const data = formDetail.assessments[index];
     formPerformance.year = data.year ? Number(data.year) - 543 : null;
@@ -276,7 +276,7 @@ function onSubmitPerformance() {
     isAdd: true,
   };
 
-  if (isEdit.value && isIndex.value) {
+  if (isEdit.value && isIndex.value !== null && isIndex.value !== undefined) {
     formDetail.assessments[isIndex.value] = body;
   } else {
     formDetail.assessments.push(body);

From d203a319b517b1915e508b980db12d2f98d1b1ab Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 12 Jun 2025 15:46:10 +0700
Subject: [PATCH 125/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20step=202=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=99=20=E0=B9=84=E0=B8=A1=E0=B9=88?=
 =?UTF-8?q?=E0=B9=84=E0=B8=94=E0=B9=89=E0=B8=94=E0=B8=B6=E0=B8=87=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AA=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87=E0=B8=81=E0=B8=B1=E0=B8=94=E0=B8=A1=E0=B8=B2=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B9=80=E0=B8=9B=E0=B9=87=E0=B8=99?=
 =?UTF-8?q?=E0=B8=84=E0=B9=88=E0=B8=B2=E0=B9=80=E0=B8=A3=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=95=E0=B9=89=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../06_evaluate/components/step/step2.vue     |  5 ++--
 .../06_evaluate/components/step/step6.vue     | 30 ++++++++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index bfeab2b..70e3757 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -272,11 +272,13 @@ function getCommander() {
     .get(config.API.searchCommander)
     .then((res) => {
       const data = res.data.result;
-       formCommand.author = data.fullname;
+      formCommand.author = data.fullname;
       formCommand.commanderFullname = data.commanderFullname;
       formCommand.commanderPosition = data.commanderPosition;
       formCommand.commanderAboveFullname = data.commanderAboveFullname;
       formCommand.commanderAbovePosition = data.commanderAbovePosition;
+      formCommand.commanderOrg = data.commanderOrg;
+      formCommand.commanderAboveOrg = data.commanderAboveOrg;
     })
     .catch((e) => {
       console.log(e);
@@ -316,7 +318,6 @@ watch(
 onMounted(async () => {
   const user = await tokenParsed();
 
-
   try {
     showLoader();
     await Promise.all([
diff --git a/src/modules/06_evaluate/components/step/step6.vue b/src/modules/06_evaluate/components/step/step6.vue
index 9907555..f1c21aa 100644
--- a/src/modules/06_evaluate/components/step/step6.vue
+++ b/src/modules/06_evaluate/components/step/step6.vue
@@ -195,20 +195,22 @@ async function checkDoc() {
     });
 }
 
-function getCommander() {
-  http
-    .get(config.API.searchCommander)
-    .then((res) => {
-      const data = res.data.result;
-      formCommand.commanderFullname = data.commanderFullname;
-      formCommand.commanderPosition = data.commanderPosition;
-      formCommand.commanderAboveFullname = data.commanderAboveFullname;
-      formCommand.commanderAbovePosition = data.commanderAbovePosition;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-}
+// function getCommander() {
+//   http
+//     .get(config.API.searchCommander)
+//     .then((res) => {
+//       const data = res.data.result;
+//       formCommand.commanderFullname = data.commanderFullname;
+//       formCommand.commanderPosition = data.commanderPosition;
+//       formCommand.commanderAboveFullname = data.commanderAboveFullname;
+//       formCommand.commanderAbovePosition = data.commanderAbovePosition;
+//       formCommand.commanderOrg = data.commanderOrg;
+//       formCommand.commanderAboveOrg = data.commanderAboveOrg;
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     });
+// }
 
 function onAddSubject() {
   formCommand.subject.push("");

From 3817416ba9f3924bff6846d94c2e81fefa1b9f90 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 13 Jun 2025 13:50:56 +0700
Subject: [PATCH 126/195] =?UTF-8?q?fix=20bug=20=E0=B8=A2=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=99=E0=B8=84=E0=B8=B3=E0=B8=A3=E0=B9=89=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=9E=E0=B8=B1=E0=B8=92=E0=B8=99=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/14_IDP/views/registry.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/modules/14_IDP/views/registry.vue b/src/modules/14_IDP/views/registry.vue
index dc1be6d..c16a8fb 100644
--- a/src/modules/14_IDP/views/registry.vue
+++ b/src/modules/14_IDP/views/registry.vue
@@ -26,7 +26,9 @@ const router = useRouter();
 const route = useRoute();
 const isReadOnly = ref<boolean>(false);
 const isEdit = ref<boolean>(false); // เก็บ เช็ค รายละเอียด/แก้ไข
-const requestId = ref<string>(route.params.id.toString());
+const requestId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 
 const formData = reactive<FormDataIDP>({
   topic: "",
@@ -546,7 +548,7 @@ onMounted(() => {
 
           <div class="col-12 q-mt-sm">
             <Workflow
-              v-if="dataStore.officerType === 'OFFICER'"
+              v-if="dataStore.officerType === 'OFFICER' && requestId"
               ref="workflowRef"
               :id="requestId"
               sys-name="REGISTRY_IDP"

From ce94ea009a14d1058286e5d51d0342aab05c262c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 16 Jun 2025 11:15:31 +0700
Subject: [PATCH 127/195] =?UTF-8?q?fix=20Load=20=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/Calendar.vue | 76 +++++++--------
 src/modules/05_leave/components/ListView.vue | 61 ++++++------
 src/modules/05_leave/components/Table.vue    |  4 +
 src/modules/05_leave/store.ts                | 24 ++++-
 src/modules/05_leave/views/Main.vue          | 99 ++++++++++++++++++--
 5 files changed, 184 insertions(+), 80 deletions(-)

diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
index 67c483e..7150f73 100644
--- a/src/modules/05_leave/components/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -6,6 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { tokenParsed } from "@/plugins/auth";
 import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
 
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
@@ -23,6 +24,7 @@ import type {
 import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
 
 const $q = useQuasar();
+const store = useLeaveStore();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
 const emit = defineEmits(["update:dateYear"]);
@@ -74,7 +76,6 @@ const dateMonth = ref<DataDateMonthObject>({
 
 /** function เรียกข้อมูล calendar*/
 async function fetchDataCalendar() {
-  showLoader();
   await http
     .post(config.API.leaveCalendar(), {
       year: dateMonth.value.year,
@@ -118,9 +119,6 @@ async function fetchDataCalendar() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -128,7 +126,6 @@ async function fetchDataCalendar() {
  * fetch วันหยุดในปฏิทิน
  */
 async function fetchData() {
-  showLoader();
   await http
     .get(
       config.API.listHolidayHistoryYearMonth(
@@ -138,7 +135,6 @@ async function fetchData() {
     )
     .then((res) => {
       const dataNormal = res.data.result.normal;
-      const dataSixDays = res.data.result.sixDays;
       const data = dataNormal;
       const event = data.map((e: any) => ({
         id: e.id,
@@ -155,23 +151,9 @@ async function fetchData() {
         ...calendarOptions.value.events,
         ...event,
       ];
-      // const dataSix = dataSixDays
-      // const eventSix = dataSix.map((e: any) => ({
-      // 	id: e.id,
-      // 	title: `${e.name} `,
-      // 	start: e.holidayDate,
-      // 	end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(),
-      // 	allDay: e.holidayDate === e.holidayDate ? true : false,
-      // 	color: "#FFE5CC",
-      // 	textColor: "#FF8000",
-      // }))
-      // calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix]
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
     });
 }
 
@@ -184,14 +166,11 @@ function convertKeycloakId(id: any) {
 /** function เรียกประเภทการลา */
 const leaveType = ref<LeaveType[]>([]);
 async function fectOptionType() {
-  await http
-    .get(config.API.leaveType())
-    .then(async (res) => {
-      leaveType.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+  const data = await store.fetchLeaveTypeData();
+  if (!data) {
+    return;
+  }
+  leaveType.value = data;
 }
 
 /**
@@ -205,11 +184,17 @@ function monthYearThai(val: DataDateMonthObject) {
 
 /** function อัปเดท Calendar */
 async function updateMonth() {
-  await fetchDataCalendar();
-  await fetchData();
-  const calen = fullCalendar.value.getApi();
-  const date = new Date(dateMonth.value.year, dateMonth.value.month);
-  calen.gotoDate(date);
+  try {
+    await fetchDataCalendar();
+    await fetchData();
+    const calen = fullCalendar.value.getApi();
+    const date = new Date(dateMonth.value.year, dateMonth.value.month);
+    calen.gotoDate(date);
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
 /**
@@ -226,10 +211,11 @@ async function onClickClose() {
   modal.value = false;
 }
 
-/**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่Calendar */
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่Calendar */
 watch(
   () => filterVal.value,
   async () => {
+    showLoader();
     const eventData = filterVal.value.map((item: any) => {
       return mainData.value
         .filter(
@@ -250,24 +236,32 @@ watch(
     const allEventData = [].concat(...eventData);
     calendarOptions.value.events = allEventData;
     await fetchData();
+    hideLoader();
   }
 );
 
 /**Hook */
 onMounted(async () => {
-  const user = await tokenParsed();
-  keycloakId.value = await (user ? user.sub : "");
-  filterVal.value.push(keycloakId.value);
-  await fetchDataCalendar();
-  await fetchData();
-  await fectOptionType();
+  try {
+    showLoader();
+    // เรียกข้อมูล keycloakId
+    const user = await tokenParsed();
+    keycloakId.value = await (user ? user.sub : "");
+    filterVal.value.push(keycloakId.value);
+    await Promise.all([fetchDataCalendar(), fectOptionType()]);
+    await fetchData();
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 
 <template>
   <div class="row">
     <div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
-      <q-card class="col-12" flat bordered >
+      <q-card class="col-12" flat bordered>
         <q-scroll-area style="height: 38vw">
           <div class="q-gutter-sm col-12">
             <q-list class="rounded-borders q-pt-sm" dense>
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index f294958..92f9041 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -65,15 +65,12 @@ async function fetchDataTable() {
 
 /** function เรียกประเภทการลา */
 async function fectOptionType() {
-  await http
-    .get(config.API.leaveType())
-    .then(async (res) => {
-      leaveType.value = res.data.result;
-      LeaveData.fetchLeaveType(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+  const data = await LeaveData.fetchLeaveTypeData();
+  if (!data) {
+    return;
+  }
+  leaveType.value = data;
+  LeaveData.fetchLeaveType(data);
 }
 
 /**
@@ -95,25 +92,26 @@ async function onClickEdit(id: string) {
   router.push(`/leave/edit/${id}`);
 }
 
-//เเจ้งเตือนลบข้อมูล
-function clickDelete(id: string) {
-  dialogRemove($q, () => onClickDelete(id));
-}
-
 /**
- * function ลบรายการ
- * @param id
+ * ฟังก์ชันลบข้อมูลการลา
+ * @param id รายการลาที่ต้องการลบ
  */
-async function onClickDelete(id: string) {
-  await http
-    .delete(config.API.leaveUserId(id))
-    .then(async (res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-      fetchDataTable();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+function clickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.leaveUserId(id))
+      .then(async () => {
+        await fetchDataTable();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 /** function closePopup*/
@@ -170,8 +168,15 @@ function convert(val: any) {
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  await fectOptionType();
-  await fetchDataTable();
+  try {
+    showLoader();
+    await fectOptionType();
+    await fetchDataTable();
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 });
 </script>
 <template>
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index bddea14..ad36ea9 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -134,6 +134,8 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         </datepicker>
         <!-- ค้นหาข้อความใน table -->
         <q-select
+          fill-input
+          hide-selected
           outlined
           dense
           v-model="leaveStore.type"
@@ -173,6 +175,8 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
             /> </template
         ></q-select>
         <q-select
+          fill-input
+          hide-selected
           outlined
           dense
           v-model="leaveStore.status"
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 5abf71f..6993294 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -17,7 +17,7 @@ import type {
 import type { DataOption } from "../14_IDP/interface/Main";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, showLoader, hideLoader } = mixin;
 const type = ref<string>("00000000-0000-0000-0000-000000000000");
 const status = ref<string>("ALL");
 export const useLeaveStore = defineStore("Leave", () => {
@@ -27,6 +27,7 @@ export const useLeaveStore = defineStore("Leave", () => {
   const LeaveStatus = ref<string | null>("0");
   const fiscalYearyear = ref<Number | null>(new Date().getFullYear());
   const rows = ref<ListLeaveTable[]>([]);
+  const leaveTypeData = ref<TypeLeave[]>([]);
 
   /**
    * function เรียกข้อมูลรายการลา Table
@@ -134,10 +135,9 @@ export const useLeaveStore = defineStore("Leave", () => {
    * @param update  อัพเดทค่า
    * @param refData ดาต้าที่ต้องการฟิลเตอร์
    */
-  function filterOption(val: any, update: Function, refData: string) {
+  function filterOption(val: string, update: Function, refData: string) {
     switch (refData) {
       case "LeaveTypeOption":
-        type.value = "";
         update(() => {
           typeOptions.value = typeOptionsMain.value.filter(
             (v: any) => v.name.indexOf(val) > -1
@@ -145,7 +145,6 @@ export const useLeaveStore = defineStore("Leave", () => {
         });
         break;
       case "LeaveStatusOption":
-        status.value = "";
         update(() => {
           statusOptions.value = statusOptionsMain.value.filter(
             (v: any) => v.name.indexOf(val) > -1
@@ -403,6 +402,21 @@ export const useLeaveStore = defineStore("Leave", () => {
     restDayCurrentTotal.value = 0;
   }
 
+  /** ฟังก์ชันเรียกข้อมูลประเภทการลา */
+  async function fetchLeaveTypeData() {
+    if (leaveTypeData.value.length > 0) {
+      return leaveTypeData.value;
+    } else {
+      try {
+        const res = await http.get(config.API.leaveType());
+        leaveTypeData.value = res.data.result;
+        return leaveTypeData.value;
+      } catch (error) {
+        console.error("Fetch leave type error:", error);
+      }
+    }
+  }
+
   return {
     tabValue,
     typeOptions,
@@ -457,5 +471,7 @@ export const useLeaveStore = defineStore("Leave", () => {
     currentAddress,
     rangeOptions,
     converstType,
+
+    fetchLeaveTypeData,
   };
 });
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index d2ae71f..6628a59 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -118,8 +118,11 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const isloading = ref<boolean>(false);
+
 /** function เรียกข้อมูลตารางสถิติการลา*/
 async function fetchStatsTable() {
+  isloading.value = true;
   await http
     .get(config.API.leaveStats())
     .then((res) => {
@@ -168,9 +171,11 @@ async function fetchStatsTable() {
         leaveCountReject: e.leaveCountReject,
         leaveCountDelete: e.leaveCountDelete,
       }));
+      isloading.value = false;
     })
     .catch((err) => {
       messageError($q, err);
+      isloading.value = true;
     });
 }
 
@@ -210,7 +215,7 @@ onMounted(async () => {
     <div class="col-xs-12 col-sm-12 col-md-11 row">
       <!-- สถิติการลา -->
       <div class="col-12 row q-pb-sm">
-        <q-card bordered class="col-12 row">
+        <q-card bordered class="col-12 row" v-if="!isloading">
           <div class="row col-12 items-center q-px-md q-py-sm">
             <div class="text-weight-bold">สถิติการลา</div>
             <q-space />
@@ -230,12 +235,7 @@ onMounted(async () => {
             :key="item.text"
           >
             <div class="col-xs-12 col-sm-12">
-              <q-card
-                bordered
-                flat
-                class="col-12 row shadow-0 no-wrap"
-                v-if="item.text === 'ลาพักผ่อน'"
-              >
+              <q-card bordered flat class="col-12 row shadow-0 no-wrap">
                 <div class="col-xs-12 col-sm-8 row justify-center q-py-md">
                   <div class="col-12 row items-center justify-center q-pb-sm">
                     <q-knob
@@ -327,6 +327,91 @@ onMounted(async () => {
             </div>
           </div>
         </q-card>
+
+        <q-card bordered class="col-12 row q-px-md q-py-sm" v-else>
+          <div class="row col-12 items-center q-px-md q-py-sm">
+            <div class="text-weight-bold">สถิติการลา</div>
+            <q-space />
+            <q-skeleton type="QBtn" size="20px" style="width: 100px" />
+          </div>
+          <div
+            bordered
+            class="col-6 row justify-center q-px-md q-pb-md q-col-gutter-sm"
+          >
+            <div class="col-xs-12 col-sm-12">
+              <q-card bordered flat class="col-12 row shadow-0 no-wrap">
+                <div class="col-xs-12 col-sm-8 row justify-center q-py-md">
+                  <div class="col-12 row items-center justify-center q-pb-sm">
+                    <q-skeleton type="circle" size="60px" />
+
+                    <div class="col-12 row items-center justify-center">
+                      <q-skeleton type="text" size="20px" style="width: 50px" />
+                    </div>
+                  </div>
+                </div>
+                <div class="row gt-xs"><q-separator vertical /></div>
+                <div class="col-xs-12 col-sm-4 gt-xs row">
+                  <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>
+                      <q-skeleton type="text" style="width: 50px" />
+                    </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>
+                      <q-skeleton type="text" style="width: 50px" />
+                    </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>
+                      <q-skeleton type="text" style="width: 50px" />
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+          <div class="col-6 row">
+            <div bordered class="col-12 row justify-center q-px-md q-pb-md">
+              <div class="col-xs-12 col-sm-12 row">
+                <div class="col-12 row">
+                  <q-card
+                    bordered
+                    flat
+                    class="shadow-0 col-12 fit row items-center q-px-lg"
+                  >
+                    <div class="text-subtitle2 col-4">
+                      <q-skeleton type="text" style="width: 50px" />
+                    </div>
+                    <div class="text-subtitle2 col-8 row">
+                      <span class="text-grey-7 q-pr-md">ใช้ไป</span>
+                      <q-skeleton type="text" style="width: 50px" />
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+            <div bordered class="col-12 row justify-center q-px-md q-pb-md">
+              <div class="col-xs-12 col-sm-12 row">
+                <div class="col-12 row">
+                  <q-card
+                    bordered
+                    flat
+                    class="shadow-0 col-12 fit row items-center q-px-lg"
+                  >
+                    <div class="text-subtitle2 col-4">
+                      <q-skeleton type="text" style="width: 50px" />
+                    </div>
+                    <div class="text-subtitle2 col-8 row">
+                      <span class="text-grey-7 q-pr-md">ใช้ไป</span>
+                      <q-skeleton type="text" style="width: 50px" />
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
       </div>
 
       <div class="row col-12">

From 5268bf901ae487c860fa70e850fac09fe73e542d Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 16 Jun 2025 12:58:07 +0700
Subject: [PATCH 128/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=96=E0=B9=89=E0=B8=B2=E0=B8=A2=E0=B8=B1=E0=B8=87?=
 =?UTF-8?q?=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=84=E0=B8=94=E0=B9=89=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=B7=E0=B9=88=E0=B8=99=E0=B9=83=E0=B8=9A=E0=B8=A5=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B0=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B9=81=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=94=E0=B8=87=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=81=E0=B9=80=E0=B8=A5=E0=B8=B4=E0=B8=81=20=E0=B9=81?=
 =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=A5=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=84=E0=B8=9B=E0=B9=80=E0=B8=A5=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/ListView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index 92f9041..8fbb085 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -304,6 +304,7 @@ onMounted(async () => {
               <q-menu>
                 <q-list>
                   <q-item
+                    v-if="props.row.status != 'DRAFT'"
                     clickable
                     v-close-popup
                     @click="onClickView(props.row.id, 'CANCEL')"

From 2cb056cf92d471b11f26754de15d08c2d003da21 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 16 Jun 2025 16:55:30 +0700
Subject: [PATCH 129/195] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=99=20eva=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=94=E0=B8=B1=E0=B8=9A=E0=B8=95=E0=B8=B3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B9=84=E0=B8=94=E0=B9=89=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../06_evaluate/components/step/step6.vue        | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/modules/06_evaluate/components/step/step6.vue b/src/modules/06_evaluate/components/step/step6.vue
index f1c21aa..efccae3 100644
--- a/src/modules/06_evaluate/components/step/step6.vue
+++ b/src/modules/06_evaluate/components/step/step6.vue
@@ -29,6 +29,7 @@ const evaluateId = ref<string>(route.params.id.toString());
 const emit = defineEmits(["update:form"]);
 
 const fileEvaluation1 = ref<any>();
+const assignedPosLevel = ref<string>(""); // ระดับตำแหน่งที่ได้รับ
 
 /** form จัดเตรียมเอกสารเล่ม 2*/
 const formCommand = reactive<FormCommand>({
@@ -148,6 +149,8 @@ async function fetcheSigner(id: string) {
       formCommand.subject = data.subjectDoc2;
       formCommand.assignedPosition = data.assignedPosition;
 
+      assignedPosLevel.value = data.assignedPosLevel;
+
       store.statusUpload6 = data.isUpdated;
     })
     .catch((err) => {
@@ -284,7 +287,7 @@ onMounted(async () => {
                     lazy-rules
                   />
                 </div>
-                <div class="col-6">
+                <div class="col-3">
                   <q-input
                     :readonly="store.currentStep != 6 || store.statusUpload6"
                     class="col-xs-12 col-sm-6"
@@ -300,6 +303,17 @@ onMounted(async () => {
                     lazy-rules
                   />
                 </div>
+                <div class="col-3">
+                  <q-input
+                    readonly
+                    class="col-xs-12 col-sm-6"
+                    dense
+                    outlined
+                    v-model="assignedPosLevel"
+                    label="ระดับตำแหน่งที่ได้รับ"
+                    hide-bottom-space
+                  />
+                </div>
               </div>
 
               <div

From c1b7bb424f836930370700c0c24080f49802a0ec Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 17 Jun 2025 16:44:50 +0700
Subject: [PATCH 130/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94/=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=82=E0=B8=AD=E0=B9=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=E0=B8=81=E0=B8=A5=E0=B8=B1=E0=B8=9A=E0=B9=84=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=AB=E0=B8=A5=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_transfer/views/AddTransfer.vue | 321 ++++++++++--------
 1 file changed, 177 insertions(+), 144 deletions(-)

diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index fa53bde..b1c980e 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -1,60 +1,64 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter, useRoute } from "vue-router"
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
 
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useCounterMixin } from "@/stores/mixin"
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
-import type { QForm } from "quasar"
+import type { QForm } from "quasar";
 
-import Workflow from "@/components/Workflow/Main.vue"
+import Workflow from "@/components/Workflow/Main.vue";
 
-const $q = useQuasar()
-const route = useRoute()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 
-const id = ref<string>(router.currentRoute.value.name === "addTransfer" ? "" : route.params.id.toString()) //id path
+const id = ref<string>(
+  router.currentRoute.value.name === "addTransfer"
+    ? ""
+    : route.params.id.toString()
+); //id path
 
-const files = ref<any>() //ไฟล์
-const tranferOrg = ref<string>("") //ชื่อหน่วยงานที่ขอโอนไป
-const noteReason = ref<string>("") //เหตุผล
-const routeName = router.currentRoute.value.name //ชื่อ path
+const files = ref<any>(); //ไฟล์
+const tranferOrg = ref<string>(""); //ชื่อหน่วยงานที่ขอโอนไป
+const noteReason = ref<string>(""); //เหตุผล
+const routeName = router.currentRoute.value.name; //ชื่อ path
 
 /** Dialog Save */
 async function saveData() {
-	dialogConfirm(
-		$q,
-		() => {
-			createTransfer()
-		},
-		"ยืนยันการยื่นข้อมูลการโอน",
-		"ต้องการยื่นข้อมูลการโอนนี้ใช่หรือไม่"
-	)
+  dialogConfirm(
+    $q,
+    () => {
+      createTransfer();
+    },
+    "ยืนยันการยื่นข้อมูลการโอน",
+    "ต้องการยื่นข้อมูลการโอนนี้ใช่หรือไม่"
+  );
 }
 
 /** ฟังก์ชั่นสร้างขอโอน */
 async function createTransfer() {
-	showLoader()
-	const formData = new FormData()
-	formData.append("Organization", tranferOrg.value)
-	formData.append("Reason", noteReason.value)
-	formData.append("file", files.value)
-	await http
-		.post(config.API.listtransfer(), formData)
-		.then(res => {
-			router.push(`/transfer/` + res.data.result)
-			success($q, "บันทึกข้อมูลสำเร็จ")
-		})
-		.catch(e => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+  showLoader();
+  const formData = new FormData();
+  formData.append("Organization", tranferOrg.value);
+  formData.append("Reason", noteReason.value);
+  formData.append("file", files.value);
+  await http
+    .post(config.API.listtransfer(), formData)
+    .then((res) => {
+      router.push(`/transfer/` + res.data.result);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**
@@ -62,21 +66,21 @@ async function createTransfer() {
  * @param id ไอดีของข้อมูล
  */
 async function fecthDataTransfer(id: string) {
-	showLoader()
-	await http
-		.get(config.API.transferByid(id))
-		.then((res: any) => {
-			let data = res.data.result
-			tranferOrg.value = data.organization
-			noteReason.value = data.reason
-			files.value = data.docs
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+  showLoader();
+  await http
+    .get(config.API.transferByid(id))
+    .then((res: any) => {
+      let data = res.data.result;
+      tranferOrg.value = data.organization;
+      noteReason.value = data.reason;
+      files.value = data.docs;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**
@@ -84,104 +88,133 @@ async function fecthDataTransfer(id: string) {
  * @param url URL File
  */
 function fileOpen(url: string) {
-	window.open(url, "_blank")
+  window.open(url, "_blank");
 }
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(() => {
-	if (route.params.id !== undefined) {
-		fecthDataTransfer(id.value)
-	}
-})
+  if (route.params.id !== undefined) {
+    fecthDataTransfer(id.value);
+  }
+});
 </script>
 
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
-				<div v-if="routeName == 'addTransfer'">เพิ่มเรื่องขอโอน</div>
-				<div v-else>รายละเอียดเรื่องขอโอน</div>
-			</div>
-			<q-form class="col-12" greedy @submit.prevent @validation-success="saveData">
-				<q-card bordered>
-					<q-card-section>
-						<div class="row">
-							<div class="col-12 row q-col-gutter-sm">
-								<q-input
-									:class="routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'"
-									dense
-									outlined
-									v-model="tranferOrg"
-									hide-bottom-space
-									label="หน่วยงานที่ขอโอนไป"
-									:readonly="routeName != 'addTransfer'"
-									:rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
-								/>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push('/transfer')"
+        />
+        <div v-if="routeName == 'addTransfer'">เพิ่มเรื่องขอโอน</div>
+        <div v-else>รายละเอียดเรื่องขอโอน</div>
+      </div>
+      <q-form
+        class="col-12"
+        greedy
+        @submit.prevent
+        @validation-success="saveData"
+      >
+        <q-card bordered>
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 row q-col-gutter-sm">
+                <q-input
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
+                  dense
+                  outlined
+                  v-model="tranferOrg"
+                  hide-bottom-space
+                  label="หน่วยงานที่ขอโอนไป"
+                  :readonly="routeName != 'addTransfer'"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
+                />
 
-								<q-input
-									:class="routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'"
-									dense
-									outlined
-									v-model="noteReason"
-									label="เหตุผล"
-									hide-bottom-space
-									type="textarea"
-									:readonly="routeName != 'addTransfer'"
-									:rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
-								/>
+                <q-input
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
+                  dense
+                  outlined
+                  v-model="noteReason"
+                  label="เหตุผล"
+                  hide-bottom-space
+                  type="textarea"
+                  :readonly="routeName != 'addTransfer'"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                />
 
-								<div class="col-12 row" v-if="routeName == 'addTransfer'">
-									<q-file
-										v-model="files"
-										class="col-xs-12 col-sm-12 inputgreen"
-										outlined
-										dense
-										lazy-rules
-										hide-bottom-space
-										accept=".pdf"
-										:rules="[(val: string) => !!val || 'กรุณาเลือกไฟล์เอกสารเพิ่มเติม']"
-										label="เอกสารเพิ่มเติม"
-									>
-										<template v-slot:prepend> <q-icon name="attach_file" /> </template
-									></q-file>
-								</div>
+                <div class="col-12 row" v-if="routeName == 'addTransfer'">
+                  <q-file
+                    v-model="files"
+                    class="col-xs-12 col-sm-12 inputgreen"
+                    outlined
+                    dense
+                    lazy-rules
+                    hide-bottom-space
+                    accept=".pdf"
+                    :rules="[(val: string) => !!val || 'กรุณาเลือกไฟล์เอกสารเพิ่มเติม']"
+                    label="เอกสารเพิ่มเติม"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" /> </template
+                  ></q-file>
+                </div>
 
-								<div class="col-12 row" v-if="routeName != 'addTransfer'">
-									<q-card bordered flat class="full-width">
-										<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-											<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-										</div>
-										<q-separator />
-										<q-list separator>
-											<q-item v-for="file in files" :key="file.key">
-												<q-item-section>
-													{{ file.fileName }}
-												</q-item-section>
-												<q-item-section avatar>
-													<q-btn color="teal-5" round flat icon="mdi-download" @click="fileOpen(file.pathName)"></q-btn>
-												</q-item-section>
-											</q-item>
-										</q-list>
-									</q-card>
-								</div>
+                <div class="col-12 row" v-if="routeName != 'addTransfer'">
+                  <q-card bordered flat class="full-width">
+                    <div
+                      class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                    >
+                      <div class="q-pl-sm text-weight-bold text-dark">
+                        เอกสารเพิ่มเติม
+                      </div>
+                    </div>
+                    <q-separator />
+                    <q-list separator>
+                      <q-item v-for="file in files" :key="file.key">
+                        <q-item-section>
+                          {{ file.fileName }}
+                        </q-item-section>
+                        <q-item-section avatar>
+                          <q-btn
+                            color="teal-5"
+                            round
+                            flat
+                            icon="mdi-download"
+                            @click="fileOpen(file.pathName)"
+                          ></q-btn>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
 
-								<!-- Workflow -->
-								<div class="col-12" v-if="routeName != 'addTransfer'">
-									<Workflow :id="id" :sys-name="`SYS_TRANSFER_REQ`" />
-								</div>
-							</div>
-						</div>
-					</q-card-section>
+                <!-- Workflow -->
+                <div class="col-12" v-if="routeName != 'addTransfer'">
+                  <Workflow :id="id" :sys-name="`SYS_TRANSFER_REQ`" />
+                </div>
+              </div>
+            </div>
+          </q-card-section>
 
-					<q-separator v-if="routeName == 'addTransfer'" />
-					<q-card-actions align="right" v-if="routeName == 'addTransfer'">
-						<q-btn color="primary" label="ยื่นเรื่องขอโอน" type="onsubmit" />
-					</q-card-actions>
-				</q-card>
-			</q-form>
-		</div>
-	</div>
+          <q-separator v-if="routeName == 'addTransfer'" />
+          <q-card-actions align="right" v-if="routeName == 'addTransfer'">
+            <q-btn color="primary" label="ยื่นเรื่องขอโอน" type="onsubmit" />
+          </q-card-actions>
+        </q-card>
+      </q-form>
+    </div>
+  </div>
 </template>

From 665c24b77218fff57adfe370af01ad25f7ab51c9 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 17 Jun 2025 16:45:39 +0700
Subject: [PATCH 131/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=AA=E0=B8=94?=
 =?UTF-8?q?=E0=B8=87=E0=B8=9C=E0=B8=A5=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A9=E0=B8=B2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=83?=
 =?UTF-8?q?=E0=B8=99=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87/=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A9=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=97=E0=B8=99=E0=B9=83=E0=B8=99?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=20KPI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_KPI/views/form.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index bd71b83..4c44598 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -1244,10 +1244,18 @@ onMounted(async () => {
               <div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
             </div>
             <div class="row">
-              <div class="col-12" v-if="evaluator.isPosmasterAct">
+              <div
+                class="col-12"
+                v-if="evaluator.isPosmasterAct"
+                v-for="(data, index) in evaluator.posmasterAct"
+                :key="index"
+              >
                 {{
-                  `${evaluator.posmasterAct[0].prefix}${evaluator.posmasterAct[0].firstName} ${evaluator.posmasterAct[0].lastName} (${evaluator.posmasterAct[0].posNo})`
+                  data.firstName
+                    ? `- ${data.prefix}${data.firstName} ${data.lastName}`
+                    : "- ว่าง"
                 }}
+                {{ `(${data.posNo})` }}
               </div>
               <div class="col-12" v-else>-</div>
             </div>

From a5a967c09fb17f84d9e548efdbc33f061301cbc1 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 17 Jun 2025 17:25:16 +0700
Subject: [PATCH 132/195] fixing modal datepicker

---
 src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue    | 4 ----
 src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue | 3 ---
 src/modules/10_registry/Dialog/DialogDevelopmant.vue          | 2 --
 3 files changed, 9 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
index f73776a..373051a 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -236,8 +236,6 @@ function onSubmit() {
   }
 }
 
-const customPosition = () => ({ top: "490px", left: "410px" });
-
 async function getDataByYear() {
   if (formData.year) {
     showLoader();
@@ -388,9 +386,7 @@ watch(
                 v-model="formData.year"
                 :locale="'th'"
                 autoApply
-                position="center"
                 year-picker
-                :alt-position="customPosition"
                 :enableTimePicker="false"
                 @update:model-value="getDataByYear(), (projectName = '')"
               >
diff --git a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
index 9c51513..eff42db 100644
--- a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
+++ b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
@@ -7,9 +7,6 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useDataStore } from "@/stores/data";
 
-//history dialog
-import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-
 import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
 
 const typeIDP = ref<string>("");
diff --git a/src/modules/10_registry/Dialog/DialogDevelopmant.vue b/src/modules/10_registry/Dialog/DialogDevelopmant.vue
index 5f18e68..1a24492 100644
--- a/src/modules/10_registry/Dialog/DialogDevelopmant.vue
+++ b/src/modules/10_registry/Dialog/DialogDevelopmant.vue
@@ -254,7 +254,6 @@ watch(
   }
 );
 
-const customPosition = () => ({ top: "385px", left: "410px" });
 async function getDataByYear() {
   if (formData.year) {
     showLoader();
@@ -409,7 +408,6 @@ function filterOptionFn(val: string, update: Function) {
                 autoApply
                 position="center"
                 year-picker
-                :alt-position="customPosition"
                 :enableTimePicker="false"
                 @update:model-value="getDataByYear(), (projectName = '')"
               >

From 0c1176a552029b701505d752e776b68e4fe2d62c Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 17 Jun 2025 18:11:37 +0700
Subject: [PATCH 133/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B8=81=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=E0=B9=84=E0=B8=9B=E0=B8=AB=E0=B8=99=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_evaluate/components/ExpertPage.vue   | 2 +-
 src/modules/06_evaluate/views/EvaluateMain.vue      | 2 +-
 src/modules/07_appealComplain/views/Add.vue         | 2 +-
 src/modules/10_registry/tabs/01_information.vue     | 2 +-
 src/modules/10_registry/tabs/02_government.vue      | 2 +-
 src/modules/10_registry/tabs/03_salary.vue          | 2 +-
 src/modules/10_registry/tabs/04_Achievement.vue     | 2 +-
 src/modules/10_registry/tabs/05_other.vue           | 2 +-
 src/modules/10_registry/views/requestEditDetail.vue | 2 +-
 src/modules/12_organization/views/main.vue          | 2 +-
 src/modules/13_portfolio/views/Add.vue              | 2 +-
 src/modules/14_IDP/views/registry.vue               | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/modules/06_evaluate/components/ExpertPage.vue b/src/modules/06_evaluate/components/ExpertPage.vue
index cdf4bf9..8779d66 100644
--- a/src/modules/06_evaluate/components/ExpertPage.vue
+++ b/src/modules/06_evaluate/components/ExpertPage.vue
@@ -96,7 +96,7 @@ onMounted(() => {
             flat
             color="primary"
             class="q-mr-sm"
-            @click="router.go(-1)"
+            @click="router.push('/evaluate')"
           />
           <div>ประเมินเชี่ยวชาญ</div>
         </div>
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index 12e78be..6c44144 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -206,7 +206,7 @@ onMounted(async () => {
           flat
           color="primary"
           class="q-mr-sm"
-          @click="router.go(-1)"
+          @click="router.push('/')"
         />
         <div>ประเมินบุคคล</div>
       </div>
diff --git a/src/modules/07_appealComplain/views/Add.vue b/src/modules/07_appealComplain/views/Add.vue
index 7fe459d..52932a8 100644
--- a/src/modules/07_appealComplain/views/Add.vue
+++ b/src/modules/07_appealComplain/views/Add.vue
@@ -100,7 +100,7 @@ onMounted(() => {
           flat
           color="primary"
           class="q-mr-sm"
-          @click="router.go(-1)"
+          @click="router.push('/appeal-complain')"
         />
         เพิ่มอุทธรณ์/ร้องทุกข์
       </div>
diff --git a/src/modules/10_registry/tabs/01_information.vue b/src/modules/10_registry/tabs/01_information.vue
index 5407e56..a56fa8c 100644
--- a/src/modules/10_registry/tabs/01_information.vue
+++ b/src/modules/10_registry/tabs/01_information.vue
@@ -23,7 +23,7 @@ const router = useRouter();
         flat
         color="primary"
         class="q-mr-sm"
-        @click="router.go(-1)"
+        @click="router.push('/registry')"
       />
       <div>ข้อมูลส่วนตัว</div>
     </div>
diff --git a/src/modules/10_registry/tabs/02_government.vue b/src/modules/10_registry/tabs/02_government.vue
index 6fe38ab..cab0c4a 100644
--- a/src/modules/10_registry/tabs/02_government.vue
+++ b/src/modules/10_registry/tabs/02_government.vue
@@ -23,7 +23,7 @@ const router = useRouter();
         flat
         color="primary"
         class="q-mr-sm"
-        @click="router.go(-1)"
+        @click="router.push('/registry')"
       />
       <div>ข้อมูลราชการ</div>
     </div>
diff --git a/src/modules/10_registry/tabs/03_salary.vue b/src/modules/10_registry/tabs/03_salary.vue
index ff34869..22a83ac 100644
--- a/src/modules/10_registry/tabs/03_salary.vue
+++ b/src/modules/10_registry/tabs/03_salary.vue
@@ -18,7 +18,7 @@ const router = useRouter();
         flat
         color="primary"
         class="q-mr-sm"
-        @click="router.go(-1)"
+        @click="router.push('/registry')"
       />
       <div>ข้อมูลเงินเดือน/ค่าจ้าง</div>
     </div>
diff --git a/src/modules/10_registry/tabs/04_Achievement.vue b/src/modules/10_registry/tabs/04_Achievement.vue
index d5f9d67..74ee560 100644
--- a/src/modules/10_registry/tabs/04_Achievement.vue
+++ b/src/modules/10_registry/tabs/04_Achievement.vue
@@ -22,7 +22,7 @@ const router = useRouter();
         flat
         color="primary"
         class="q-mr-sm"
-        @click="router.go(-1)"
+        @click="router.push('/registry')"
       />
       <div>ข้อมูลผลงานและเครื่องราชฯ</div>
     </div>
diff --git a/src/modules/10_registry/tabs/05_other.vue b/src/modules/10_registry/tabs/05_other.vue
index 7dde665..1d4f4e9 100644
--- a/src/modules/10_registry/tabs/05_other.vue
+++ b/src/modules/10_registry/tabs/05_other.vue
@@ -19,7 +19,7 @@ const router = useRouter();
         flat
         color="primary"
         class="q-mr-sm"
-        @click="router.go(-1)"
+        @click="router.push('/registry')"
       />
       <div>เอกสารหลักฐานและอื่นๆ</div>
     </div>
diff --git a/src/modules/10_registry/views/requestEditDetail.vue b/src/modules/10_registry/views/requestEditDetail.vue
index 9c21f6f..4ad8548 100644
--- a/src/modules/10_registry/views/requestEditDetail.vue
+++ b/src/modules/10_registry/views/requestEditDetail.vue
@@ -140,7 +140,7 @@ onMounted(async () => {
           flat
           color="primary"
           class="q-mr-sm"
-          @click="router.go(-1)"
+          @click="router.push('/registry/request-edit')"
         />
         รายละเอียดคำร้องขอแก้ไขทะเบียนประวัติ
       </div>
diff --git a/src/modules/12_organization/views/main.vue b/src/modules/12_organization/views/main.vue
index 0986604..40a2cea 100644
--- a/src/modules/12_organization/views/main.vue
+++ b/src/modules/12_organization/views/main.vue
@@ -217,7 +217,7 @@ onMounted(async () => {
           flat
           color="primary"
           class="q-mr-sm"
-          @click="router.go(-1)"
+          @click="router.push('/')"
         />
         <div>แผนผังองค์กร</div>
       </div>
diff --git a/src/modules/13_portfolio/views/Add.vue b/src/modules/13_portfolio/views/Add.vue
index b18ab7e..ad0ed23 100644
--- a/src/modules/13_portfolio/views/Add.vue
+++ b/src/modules/13_portfolio/views/Add.vue
@@ -188,7 +188,7 @@ onMounted(() => {
           flat
           color="primary"
           class="q-mr-sm"
-          @click="router.go(-1)"
+          @click="router.push('/portfolio')"
         />
         <div v-if="routeName == 'addTransfer'">เพิ่มเอกสาร/ผลงาน</div>
         <div v-else>รายละเอียดเอกสาร/ผลงาน</div>
diff --git a/src/modules/14_IDP/views/registry.vue b/src/modules/14_IDP/views/registry.vue
index c16a8fb..37eb522 100644
--- a/src/modules/14_IDP/views/registry.vue
+++ b/src/modules/14_IDP/views/registry.vue
@@ -328,7 +328,7 @@ onMounted(() => {
           flat
           color="primary"
           class="q-mr-sm"
-          @click="router.go(-1)"
+          @click="router.push('/IDP')"
         />
         {{
           isEdit

From bf022bdb7341e3bc387d937d734f79261f4c9e11 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 18 Jun 2025 14:35:58 +0700
Subject: [PATCH 134/195] =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20filter=20=E0=B8=81=E0=B8=B3=E0=B8=A5=E0=B8=B1=E0=B8=87?=
 =?UTF-8?q?=E0=B8=94=E0=B8=B3=E0=B9=80=E0=B8=99=E0=B8=B4=E0=B8=99=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A2=E0=B8=81=E0=B9=80=E0=B8=A5=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=81=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=A2=E0=B8=81=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B4=E0=B8=81=E0=B8=AA=E0=B8=B3=E0=B9=80=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=87=E0=B8=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/store.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 6993294..2ee8f9f 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -125,7 +125,8 @@ export const useLeaveStore = defineStore("Leave", () => {
     { id: "PENDING", name: "กำลังดำเนินการ" },
     { id: "APPROVE", name: "อนุญาต " },
     { id: "REJECT", name: "ไม่อนุญาต" },
-    { id: "DELETE", name: "ยกเลิก" },
+    { id: "DELETING", name: "กำลังดำเนินการยกเลิก" },
+    { id: "DELETE", name: "ยกเลิกสำเร็จ" },
   ]);
   const statusOptions = ref<any[]>(statusOptionsMain.value);
 

From af8af8641af5d7a19f8797773eb0d3741dcdad62 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 20 Jun 2025 14:53:02 +0700
Subject: [PATCH 135/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
index 373051a..35acdb6 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -268,15 +268,15 @@ function getProjectDetail(val: any) {
       development.value = data.developmentProjectTechniqueActuals;
       reasonDevelopment70.value =
         data.developmentProjectTechniqueActuals.includes("other1")
-          ? data.reasonDevelopment70
+          ? data.reasonActual70
           : "";
       reasonDevelopment20.value =
         data.developmentProjectTechniqueActuals.includes("other2")
-          ? data.reasonDevelopment20
+          ? data.reasonActual20
           : "";
       reasonDevelopment10.value =
         data.developmentProjectTechniqueActuals.includes("other3")
-          ? data.reasonDevelopment10
+          ? data.reasonActual10
           : "";
     })
     .catch((e) => {

From 1530d538caf6b43d05e1f4ae59e07564ec0c2397 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 20 Jun 2025 17:35:32 +0700
Subject: [PATCH 136/195] fix ==> redirectToLink

---
 src/plugins/auth.ts      | 44 +++++++++++++++++++++++++++++++---------
 src/plugins/http.ts      |  2 ++
 src/router/index.ts      |  3 ++-
 src/views/MainLayout.vue |  9 ++++++--
 src/views/auth.vue       |  6 +++++-
 5 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/plugins/auth.ts b/src/plugins/auth.ts
index 0c116a5..71bd05c 100644
--- a/src/plugins/auth.ts
+++ b/src/plugins/auth.ts
@@ -1,6 +1,7 @@
 const ACCESS_TOKEN = "BMAHRISUSER_KEYCLOAK_IDENTITY";
 const key_C_Config = {
   url_Logout: import.meta.env.VITE_URL_SSO,
+  landing_PageUrl: import.meta.env.VITE_URL_LANDING,
 };
 interface AuthResponse {
   access_token: string;
@@ -10,22 +11,32 @@ interface AuthResponse {
 
 const authenticated = async () => ((await getToken()) ? true : false);
 
-async function setAuthen(r: AuthResponse, val: string) {
-  await setCookie(ACCESS_TOKEN, r.access_token, r.expires_in);
-  setCookie("SSO", val, r.expires_in);
-  window.location.href = "/";
+async function setAuthen(r: AuthResponse, val: string, url?: string) {
+  if (r && r.access_token) {
+    await setCookie(ACCESS_TOKEN, r.access_token, r.expires_in);
+    setCookie("SSO", val, r.expires_in);
+    window.location.href = url ? encodeURI(url) : "/";
+  }
 }
 
-async function logout() {
-  await deleteCookie(ACCESS_TOKEN);
-  window.location.href = key_C_Config.url_Logout;
+async function logout(force: boolean = false) {
+  if (!force) {
+    await deleteCookie(ACCESS_TOKEN);
+    window.location.href = key_C_Config.url_Logout;
+  } else {
+    const currentUrl = window.location.href;
+    const loginUrl = `${
+      key_C_Config.landing_PageUrl
+    }?system=user&redirectUrl=${encodeURIComponent(currentUrl)}`;
+    window.location.href = loginUrl;
+  }
 }
 
 async function getToken() {
   return getCookie(ACCESS_TOKEN);
 }
 // 2024-08-29T02:55:13.000Z
-function setCookie(name: string, value: any, time: number) {
+async function setCookie(name: string, value: any, time: number) {
   let expires = "";
   if (time) {
     const date = new Date();
@@ -47,7 +58,7 @@ function getCookie(name: string) {
   return null;
 }
 
-function deleteCookie(name: string) {
+async function deleteCookie(name: string) {
   document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
 }
 
@@ -71,4 +82,17 @@ async function tokenParsed() {
   return JSON.parse(jsonPayload);
 }
 
-export { getToken, authenticated, logout, setAuthen, tokenParsed, getCookie };
+async function redirectToLandingPage() {
+  await deleteCookie(ACCESS_TOKEN);
+  window.location.href = key_C_Config.landing_PageUrl;
+}
+
+export {
+  getToken,
+  authenticated,
+  logout,
+  setAuthen,
+  tokenParsed,
+  getCookie,
+  redirectToLandingPage,
+};
diff --git a/src/plugins/http.ts b/src/plugins/http.ts
index 22f18a1..f12682e 100644
--- a/src/plugins/http.ts
+++ b/src/plugins/http.ts
@@ -32,6 +32,8 @@ http.interceptors.response.use(
     if (typeof error !== undefined) {
       // eslint-disable-next-line no-prototype-builtins
       if (error.hasOwnProperty("response")) {
+        console.log("error.response.status", error.response.status);
+
         if (error.response.status === 403) {
           window.location.href = "/error";
           // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
diff --git a/src/router/index.ts b/src/router/index.ts
index 04b4901..351fbaf 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -95,7 +95,8 @@ router.beforeEach(async (to, from, next) => {
   if (to.meta.Auth) {
     const checkAuthen = await authenticated();
     if (!checkAuthen && to.meta.Auth) {
-      logout();
+      logout(true);
+      return;
     }
   }
   next();
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 56ae845..c99d63f 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -7,7 +7,12 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import CustomComponent from "@/components/CustomDialog.vue";
 import avatar from "@/assets/avatar_user.jpg";
-import { tokenParsed, logout, getCookie } from "@/plugins/auth";
+import {
+  tokenParsed,
+  logout,
+  getCookie,
+  redirectToLandingPage,
+} from "@/plugins/auth";
 
 import { useDataStore } from "@/stores/data";
 
@@ -502,7 +507,7 @@ function onViewDetailNoti(url: string) {
             <q-item
               clickable
               v-close-popup
-              :href="landingPageUrl"
+              @click="redirectToLandingPage"
               v-if="isSsoToken"
             >
               <q-item-section avatar style="min-width: 30px">
diff --git a/src/views/auth.vue b/src/views/auth.vue
index e68a009..3d2c6ab 100644
--- a/src/views/auth.vue
+++ b/src/views/auth.vue
@@ -12,7 +12,11 @@ onMounted(async () => {
       expires_in: route.query.expires ? route.query.expires : 36000,
       refresh_token: route.query.accessToken,
     };
-    setAuthen(params, "y");
+    setAuthen(
+      params,
+      "y",
+      route.query.redirectUrl ? (route.query.redirectUrl as string) : "/"
+    );
   }
 });
 </script>

From 66a8302e68644969c7360e1f8a6350a0d16b041e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 23 Jun 2025 10:47:10 +0700
Subject: [PATCH 137/195] logoutSSO

---
 src/plugins/auth.ts      | 6 ++++++
 src/views/MainLayout.vue | 3 ++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/plugins/auth.ts b/src/plugins/auth.ts
index 71bd05c..d9adf60 100644
--- a/src/plugins/auth.ts
+++ b/src/plugins/auth.ts
@@ -87,6 +87,11 @@ async function redirectToLandingPage() {
   window.location.href = key_C_Config.landing_PageUrl;
 }
 
+async function logoutSSO() {
+  await deleteCookie(ACCESS_TOKEN);
+  window.location.href = key_C_Config.landing_PageUrl + `/logout`;
+}
+
 export {
   getToken,
   authenticated,
@@ -95,4 +100,5 @@ export {
   tokenParsed,
   getCookie,
   redirectToLandingPage,
+  logoutSSO,
 };
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index c99d63f..534beb3 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -12,6 +12,7 @@ import {
   logout,
   getCookie,
   redirectToLandingPage,
+  logoutSSO,
 } from "@/plugins/auth";
 
 import { useDataStore } from "@/stores/data";
@@ -159,7 +160,7 @@ const doLogout = () => {
     async () => {
       await http.post(config.API.keycloakLogSSO, { text: "ออกจากระบบ" });
       // authen with client
-      await logout();
+      await logoutSSO();
     },
     "ยืนยันการออกจากระบบ",
     "ต้องการออกจากระบบใช่หรือไม่"

From ccf2a6d6daf1e9d05afd53144f02e419e3dca98d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 24 Jun 2025 09:33:41 +0700
Subject: [PATCH 138/195] fix path route manual

---
 src/app.config.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app.config.ts b/src/app.config.ts
index 56d83a8..34a4e5d 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -46,14 +46,14 @@ const generatePopupPath = (routeName: any, type: string) => {
   if (routeName.includes("organizationChart")) {
     return `${path}/chapter-1-user${type}-organization-chart`;
   }
-  if (routeName.includes("registry")) {
+  if (routeName.includes("registry") || routeName.includes("request-edit")) {
     return `${path}/chapter-2-user${type}-registry`;
   }
   if (routeName.includes("evaluate")) {
     return `${path}/chapter-3-user-evaluate`;
   }
 
-  if (routeName.includes("leave")) {
+  if (routeName.includes("leave") || routeName.includes("addAbsence")) {
     return `${path}/chapter-${type ? "3" : "4"}-user${type}-leave`;
   }
 
@@ -79,7 +79,7 @@ const generatePopupPath = (routeName: any, type: string) => {
     return `${path}/chapter-14-user-service-testing`;
   }
   if (routeName.includes("Retire")) {
-    return `${path}/chapter-${type ? "5" : "11"}-user${type}-retire`;
+    return `${path}/chapter-${type ? "6" : "12"}-user${type}-retire`;
   } else {
     return manualConfig[routeName as keyof typeof manualConfig];
   }
@@ -93,6 +93,8 @@ const manualConfig = {
   addPortfolio: `${path}/chapter-5-user-portfolio`,
   addTransfer: `${path}/chapter-6-user-transfer`,
   KPIMain: `${path}/chapter-8-user-KPI`,
+  KPIAdd: `${path}/chapter-8-user-KPI`,
+  KPIEdit: `${path}/chapter-8-user-KPI`,
   KPIMainEvaluator: `${path}/chapter-9-user-KPI-evaluator`,
 };
 

From 1ad2d2e6fde3e3798585ae13c27f4c9b25b3b522 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 2 Jul 2025 09:30:46 +0700
Subject: [PATCH 139/195] fix bug img ==> KIP

---
 src/modules/08_KPI/views/form.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 4c44598..5ee322d 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -64,6 +64,8 @@ const evaluatorId = ref<any>(null); // ตัวแปรเก็บ id ผู
 const commanderId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชา
 const commanderHighId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชาเหนือไปอีกขั้น
 
+const imgProfile = ref<string>(""); // ตัวแปรเก็บรูปโปรไฟล์
+
 const formProfile = reactive<FormProfile>({
   fullName: "",
   position: "",
@@ -112,6 +114,7 @@ async function fetchProfile(id: string, avatarName: string) {
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
     .then(async (res) => {
       store.dataEvaluation.avartar = res.data.downloadUrl;
+      imgProfile.value = res.data.downloadUrl;
     });
 }
 
@@ -684,10 +687,7 @@ onMounted(async () => {
         <q-card bordered flat class="relative-position">
           <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
             <q-avatar :size="sizeImg">
-              <q-img
-                :src="store.dataEvaluation.avartar"
-                v-if="store.dataEvaluation.avartar !== undefined"
-              />
+              <q-img :src="imgProfile" v-if="imgProfile !== ''" />
               <q-img src="@/assets/avatar_user.jpg" v-else />
             </q-avatar>
           </div>
@@ -697,10 +697,7 @@ onMounted(async () => {
             style="left: 2%; top: 50%; transform: translateY(-50%)"
           >
             <q-avatar :size="sizeImg">
-              <q-img
-                :src="store.dataEvaluation.avartar"
-                v-if="store.dataEvaluation.avartar !== undefined"
-              />
+              <q-img :src="imgProfile" v-if="imgProfile !== ''" />
               <q-img src="@/assets/avatar_user.jpg" v-else />
             </q-avatar>
           </div>

From 889d757b9f30efbf4bb8abecb5600891d9d4cd48 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 9 Jul 2025 11:56:45 +0700
Subject: [PATCH 140/195] =?UTF-8?q?feat:=20add=20label=20"=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9B=E0=B9=82=E0=B8=AB=E0=B8=A5=E0=B8=94=E0=B9=84?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=A5=E0=B9=8C"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_evaluate/components/ExpertPageDetail.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/modules/06_evaluate/components/ExpertPageDetail.vue b/src/modules/06_evaluate/components/ExpertPageDetail.vue
index 048da81..22e5b8b 100644
--- a/src/modules/06_evaluate/components/ExpertPageDetail.vue
+++ b/src/modules/06_evaluate/components/ExpertPageDetail.vue
@@ -687,6 +687,7 @@ onMounted(() => {
                               class="col-xs-12 col-sm-12"
                               outlined
                               dense
+                              label="อัปโหลดไฟล์"
                               lazy-rules
                               hide-bottom-space
                               accept=".pdf"
@@ -774,6 +775,7 @@ onMounted(() => {
                               class="col-12"
                               outlined
                               dense
+                              label="อัปโหลดไฟล์"
                               lazy-rules
                               accept=".pdf"
                               hide-bottom-space
@@ -862,6 +864,7 @@ onMounted(() => {
                             class="col-12"
                             outlined
                             dense
+                            label="อัปโหลดไฟล์"
                             lazy-rules
                             hide-bottom-space
                             accept=".pdf"
@@ -947,6 +950,7 @@ onMounted(() => {
                             v-model="fileEvaluation5"
                             class="col-12"
                             outlined
+                            label="อัปโหลดไฟล์"
                             dense
                             lazy-rules
                             accept=".pdf"
@@ -1034,6 +1038,7 @@ onMounted(() => {
                             outlined
                             dense
                             lazy-rules
+                            label="อัปโหลดไฟล์"
                             hide-bottom-space
                             accept=".pdf"
                             :rules="
@@ -1117,6 +1122,7 @@ onMounted(() => {
                             v-model="fileEvaluation6"
                             class="col-12"
                             outlined
+                            label="อัปโหลดไฟล์"
                             hide-bottom-space
                             dense
                             lazy-rules

From d7db31234f2e5f0921205d19a7a2ca4673b30b0c Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 14 Jul 2025 11:49:57 +0700
Subject: [PATCH 141/195] =?UTF-8?q?fix:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=84=E0=B8=B0=E0=B9=81=E0=B8=99=E0=B8=99=20KPI=20?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=93=E0=B8=B5=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=82=E0=B8=AD=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=A1=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=96=E0=B8=B2=E0=B8=99=E0=B8=B0=E0=B8=97=E0=B8=94?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=B9=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_KPI/components/Tab/01_Assessment.vue  | 12 ++++++------
 .../08_KPI/components/Tab/Topic/02_Competency.vue    |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index e3d7ee0..9544e38 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -195,7 +195,7 @@ watch(
 
       store.indicatorScoreVal =
         store.indicatorPercentVal *
-        ((store.dataProfile.isProbation
+        ((store.dataEvaluation.isProbation
           ? store.indicatorProbationScore
           : store.indicatorScore) /
           100);
@@ -476,11 +476,11 @@ onMounted(() => {
           />
 
           <div class="row text-body2 text-weight-bold">
-            <div class="col-12 text-center row justify-center">
+            <div class="col-12 text-center row justify-center">{{ store.dataProfile.isProbation }}
               <span
                 >สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม
                 {{
-                  store.dataProfile.isProbation
+                  store.dataEvaluation.isProbation
                     ? store.indicatorProbationScore
                     : store.indicatorScore
                 }}
@@ -514,7 +514,7 @@ onMounted(() => {
             name: `สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม ${
               store.dataEvaluation.posTypeName != 'อำนวยการ' &&
               store.dataEvaluation.posTypeName != 'บริหาร'
-                ? store.dataProfile.isProbation
+                ? store.dataEvaluation.isProbation
                   ? store.competencyProbationScore
                   : store.competencyScore
                 : store.excusiveCompetencyScore
@@ -558,7 +558,7 @@ onMounted(() => {
             :rows="[
               {
                 name: `ผลการประเมินการพัฒนาตนเอง (คะแนนเต็ม ${
-                  store.dataProfile.isProbation
+                  store.dataEvaluation.isProbation
                     ? store.devProbationScore
                     : store.devScore
                 } คะแนน)`,
@@ -600,7 +600,7 @@ onMounted(() => {
               สรุปผลการประเมินพฤติกรรมการปฏิบัติราชการ (สมรรถนะ+การพัฒนาตนเอง)
               (คะแนนเต็ม
               {{
-                store.dataProfile.isProbation
+                store.dataEvaluation.isProbation
                   ? store.competencyDevProbationScore
                   : store.competencyDevScore
               }}
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index 717d57e..a8f5d0f 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -209,7 +209,7 @@ function getData(type: string) {
           store.competencyScoreVal =
             weightAvg != 0
               ? (resultAvg / weightAvg) *
-                (store.dataProfile.isProbation
+                (store.dataEvaluation.isProbation
                   ? store.competencyProbationScore
                   : store.competencyScore)
               : 0;

From 4ae28e9470ec89cb5c39895cc16a387be0d21fee Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 14 Jul 2025 14:12:07 +0700
Subject: [PATCH 142/195] fix filter competency by new condition

---
 .../components/Tab/Topic/02_Competency.vue    | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index 717d57e..8f414ff 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -293,9 +293,13 @@ function onLevel(num: number, list: any) {
 }
 
 watch(
-  () => store.dataEvaluation.posTypeName, // ตรวจจับค่า posTypeName
+  () => [store.dataEvaluation.posTypeName, store.dataEvaluation.posExecutiveName, store.dataEvaluation.position, store.dataEvaluation.posLevelName], // ตรวจจับค่า posTypeName และ posExecutiveName
   (newValue) => {
     if (!newValue) return; // ถ้ายังไม่มีค่า ไม่ต้องทำอะไร
+    const posTypeName = newValue[0];
+    const posExecutiveName = newValue[1];
+    const position = newValue[2];
+    const posLevelName = newValue[3];
 
     const competencyTypeList = [
       {
@@ -321,17 +325,27 @@ watch(
     ];
 
     competencyType.value =
-      newValue === "อำนวยการ" || newValue === "บริหาร"
-        ? competencyTypeList.filter(
-            (x: DataOptions) =>
-              x.id === "HEAD" ||
-              x.id === "EXECUTIVE" ||
-              x.id === "INSPECTOR" ||
-              x.id === "DIRECTOR"
-          )
-        : competencyTypeList.filter(
-            (x: DataOptions) => x.id === "HEAD" || x.id === "GROUP"
-          );
+      position === "ผู้ตรวจราชการกรุงเทพมหานคร" || position === "ผู้ตรวจราชการ"
+      ? competencyTypeList.filter(
+          (x: DataOptions) => x.id === "HEAD" || x.id === "INSPECTOR"
+        )
+      : posExecutiveName === "ผู้อำนวยการเขต"
+      ? competencyTypeList.filter(
+          (x: DataOptions) => x.id === "HEAD" || x.id === "DIRECTOR"
+        )
+      : posTypeName === "อำนวยการ" ||
+        posTypeName === "บริหาร" ||
+        (posTypeName === "ทั่วไป" &&
+          posLevelName === "อาวุโส" &&
+          posExecutiveName != null) ||
+        (posTypeName === "วิชาการ" &&
+          posExecutiveName != null)
+      ? competencyTypeList.filter(
+          (x: DataOptions) => x.id === "HEAD" || x.id === "EXECUTIVE"
+        )
+      : competencyTypeList.filter(
+          (x: DataOptions) => x.id === "HEAD" || x.id === "GROUP"
+        );
 
     for (let index = 0; index < competencyType.value.length; index++) {
       const element = competencyType.value[index];

From bf4422877bbbd527b25a2646001f018c84aca598 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 14 Jul 2025 14:16:31 +0700
Subject: [PATCH 143/195] fix: delete show {{}}

---
 src/modules/08_KPI/components/Tab/01_Assessment.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 9544e38..4f74ab3 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -476,7 +476,7 @@ onMounted(() => {
           />
 
           <div class="row text-body2 text-weight-bold">
-            <div class="col-12 text-center row justify-center">{{ store.dataProfile.isProbation }}
+            <div class="col-12 text-center row justify-center">
               <span
                 >สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม
                 {{

From 911e6dd8ad91d122d397ff0744d0575cf0413963 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 14 Jul 2025 16:15:51 +0700
Subject: [PATCH 144/195] check group of form

---
 .../08_KPI/components/Tab/01_Assessment.vue   | 56 ++++++++++++-------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 4f74ab3..b4f626c 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -228,6 +228,37 @@ async function onSubmitReject() {
   });
 }
 
+// check group of form
+const groupNo = computed(() => {
+  if (
+    store.dataEvaluation.posExecutiveName == "ปลัดกรุงเทพมหานคร" ||
+    store.dataEvaluation.posExecutiveName == "รองปลัดกรุงเทพมหานคร" ||
+    store.dataEvaluation.posExecutiveName == "ผู้อำนวยการสำนัก" ||
+    store.dataEvaluation.posExecutiveName == "หัวหน้าสำนักงานก.ก." ||
+    store.dataEvaluation.posExecutiveName == "หัวหน้าสำนักงาน ก.ก." ||
+    store.dataEvaluation.posExecutiveName ==
+      "หัวหน้าสำนักงานเลขานุการผู้ว่าราชการกรุงเทพมหานคร" ||
+    store.dataEvaluation.posExecutiveName == "เลขานุการสภากรุงเทพมหานคร" ||
+    store.dataEvaluation.posExecutiveName == "ผู้อำนวยการเขต" ||
+    store.dataEvaluation.posExecutiveName ==
+      "หัวหน้าส่วนราชการในสังกัดสำนักปลัดกรุงเทพมหานคร"
+  ) {
+    return 1;
+  } else if (
+    store.dataEvaluation.posTypeName == "อำนวยการ" ||
+    store.dataEvaluation.posTypeName == "บริหาร" ||
+    (store.dataEvaluation.posTypeName == "วิชาการ" &&
+      store.dataEvaluation.posExecutiveName != null) ||
+    (store.dataEvaluation.posTypeName == "ทั่วไป" &&
+      store.dataEvaluation.posLevelName == "อาวุโส" &&
+      store.dataEvaluation.posExecutiveName != null)
+  ) {
+    return 2;
+  } else {
+    return 3;
+  }
+});
+
 onMounted(() => {
   getCriteria();
   fetchListPlanned();
@@ -309,12 +340,7 @@ onMounted(() => {
     </div>
     <div class="q-gutter-md q-mt-sm">
       <!-- องค์ประกอบที่ 1 -->
-      <div
-        v-if="
-          store.dataEvaluation.posTypeName == 'อำนวยการ' ||
-          store.dataEvaluation.posTypeName == 'บริหาร'
-        "
-      >
+      <div v-if="groupNo == 1">
         <Work
           v-model:data="rows_01"
           :title="`มิติที่ 1 ภารกิจตามนโยบายและยุทธศาสตร์ของกรุงเทพมหานคร`"
@@ -512,8 +538,7 @@ onMounted(() => {
         :rows="[
           {
             name: `สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม ${
-              store.dataEvaluation.posTypeName != 'อำนวยการ' &&
-              store.dataEvaluation.posTypeName != 'บริหาร'
+              groupNo == 3
                 ? store.dataEvaluation.isProbation
                   ? store.competencyProbationScore
                   : store.competencyScore
@@ -542,12 +567,7 @@ onMounted(() => {
         class="q-mt-xs q-mb-md"
       />
 
-      <div
-        v-if="
-          store.dataEvaluation.posTypeName != 'อำนวยการ' &&
-          store.dataEvaluation.posTypeName != 'บริหาร'
-        "
-      >
+      <div v-if="groupNo == 3">
         <Develop />
 
         <div v-if="isShowScore">
@@ -588,13 +608,7 @@ onMounted(() => {
       </div>
 
       <div v-if="isShowScore">
-        <div
-          v-if="
-            store.dataEvaluation.posTypeName != 'อำนวยการ' &&
-            store.dataEvaluation.posTypeName != 'บริหาร'
-          "
-          class="row text-body2 text-weight-bold"
-        >
+        <div v-if="groupNo == 3" class="row text-body2 text-weight-bold">
           <div class="col-12 text-center row justify-center">
             <span>
               สรุปผลการประเมินพฤติกรรมการปฏิบัติราชการ (สมรรถนะ+การพัฒนาตนเอง)

From 6516bb1969f3fb258d862e07b8c4a7abbe6232ae Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 15 Jul 2025 11:04:34 +0700
Subject: [PATCH 145/195] =?UTF-8?q?fix=20bug=20=E0=B8=9B=E0=B8=B8=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=A2=E0=B8=81=E0=B9=80=E0=B8=A5=E0=B8=B4=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/03_retire/views/addRetire.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index c6c3a6c..afbdadb 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -293,6 +293,7 @@ onMounted(async () => {
                 dataDetail.statusMain !== 'CANCEL' &&
                 dataDetail.statusMain !== 'DONECANCEL' &&
                 dataDetail.statusMain !== 'CANCELING' &&
+                dataDetail.statusCancel === null &&
                 checkCancleLeave
               "
               unelevated

From 491b6e778aaa6a7f3283bccb5a1a726e81d1dd43 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 15 Jul 2025 11:48:04 +0700
Subject: [PATCH 146/195] =?UTF-8?q?fix:=20=E0=B8=84=E0=B8=B0=E0=B9=81?=
 =?UTF-8?q?=E0=B8=99=E0=B8=99=20group=202?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_KPI/components/Tab/01_Assessment.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index b4f626c..eedb529 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -506,14 +506,23 @@ onMounted(() => {
               <span
                 >สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม
                 {{
-                  store.dataEvaluation.isProbation
+                  groupNo == 2
+                    ? store.excusiveIndicatorScore
+                    : store.dataEvaluation.isProbation
                     ? store.indicatorProbationScore
                     : store.indicatorScore
                 }}
                 คะแนน)</span
               >
               <div class="text-primary q-pl-md">
-                {{ store.indicatorScoreVal.toFixed(2) }}
+                {{
+                  groupNo == 2
+                    ? (
+                        store.excusiveIndicator1ScoreVal +
+                        store.excusiveIndicator2ScoreVal
+                      ).toFixed(2)
+                    : store.indicatorScoreVal.toFixed(2)
+                }}
               </div>
             </div>
           </div>

From 21ffca18bf6342e335f4614364257af7d58b7cfa Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 15 Jul 2025 13:20:18 +0700
Subject: [PATCH 147/195] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=80=E0=B8=8A=E0=B9=87=E0=B8=84=20=E0=B8=97=E0=B8=94?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../08_KPI/components/Tab/01_Assessment.vue     | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index eedb529..fea2f61 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -197,6 +197,8 @@ watch(
         store.indicatorPercentVal *
         ((store.dataEvaluation.isProbation
           ? store.indicatorProbationScore
+          : groupNo.value == 2
+          ? store.excusiveIndicatorScore
           : store.indicatorScore) /
           100);
     }
@@ -506,23 +508,16 @@ onMounted(() => {
               <span
                 >สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม
                 {{
-                  groupNo == 2
-                    ? store.excusiveIndicatorScore
-                    : store.dataEvaluation.isProbation
+                  store.dataEvaluation.isProbation
                     ? store.indicatorProbationScore
+                    : groupNo == 2
+                    ? store.excusiveIndicatorScore
                     : store.indicatorScore
                 }}
                 คะแนน)</span
               >
               <div class="text-primary q-pl-md">
-                {{
-                  groupNo == 2
-                    ? (
-                        store.excusiveIndicator1ScoreVal +
-                        store.excusiveIndicator2ScoreVal
-                      ).toFixed(2)
-                    : store.indicatorScoreVal.toFixed(2)
-                }}
+                {{ store.indicatorScoreVal.toFixed(2) }}
               </div>
             </div>
           </div>

From 11631b733bae884a0205bca91ef5cc9f9bca0def Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 16 Jul 2025 15:09:14 +0700
Subject: [PATCH 148/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20error=20U?=
 =?UTF-8?q?ndefined=20NaN=20=E0=B8=82=E0=B8=AD=E0=B8=87=20month-picker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index c7650da..421dbe6 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -225,7 +225,13 @@ export const useCounterMixin = defineStore("mixin", () => {
   }
 
   function monthYear2Thai(month: number, year: number, isFullMonth = false) {
-    const date = new Date(`${year}-${month + 1}-1`);
+    if (
+      month < 0 ||
+      month > 11 ||
+      !Number.isFinite(month) ||
+      !Number.isFinite(year)
+    )
+      return "";
     const fullMonthThai = [
       "มกราคม",
       "กุมภาพันธ์",
@@ -254,19 +260,12 @@ export const useCounterMixin = defineStore("mixin", () => {
       "พ.ย.",
       "ธ.ค.",
     ];
-    let dstYear = 0;
-    if (date.getFullYear() > 2500) {
-      dstYear = date.getFullYear();
-    } else {
-      dstYear = date.getFullYear() + 543;
-    }
-    let dstMonth = "";
-    if (isFullMonth) {
-      dstMonth = fullMonthThai[date.getMonth()];
-    } else {
-      dstMonth = abbrMonthThai[date.getMonth()];
-    }
-    return dstMonth + " " + dstYear;
+
+    // assume year is in BE if > 2500
+    let dstYear = year > 2500 ? year : year + 543;
+    // month is already 0-based
+    let dstMonth = isFullMonth ? fullMonthThai[month] : abbrMonthThai[month];
+    return `${dstMonth} ${dstYear}`;
   }
 
   function dateToISO(date: Date) {

From 6097caf22d727615a330b71d80a5ed8f3b70e3dd Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 18 Jul 2025 10:35:49 +0700
Subject: [PATCH 149/195] =?UTF-8?q?fix=20=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=20=E0=B9=80=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=82=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=84=E0=B8=B3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/10_registry/02_Government/07_Position.vue | 9 ++++++++-
 src/modules/10_registry/03_Salary/01_Salary.vue       | 9 ++++++++-
 src/modules/10_registry/interface/index/Main.ts       | 1 +
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 7989543..17486b4 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -176,6 +176,11 @@ const baseColumns = ref<QTableColumn[]>([
     label: "ตำแหน่งทางการบริหาร",
     sortable: true,
     field: "positionExecutive",
+    format(val, row) {
+      return !row.positionExecutiveField
+        ? val
+        : `${val} (${row.positionExecutiveField})`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -189,7 +194,9 @@ const baseColumns = ref<QTableColumn[]>([
     field: "commandNo",
     format(val, row) {
       return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+        ? row.commandType !== "C-PM-47"
+          ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+          : `${row.commandNo}`
         : "";
     },
     headerStyle: "font-size: 14px",
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index b516136..efe717d 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -160,6 +160,11 @@ const baseColumns = ref<QTableColumn[]>([
     label: "ตำแหน่งทางการบริหาร",
     sortable: true,
     field: "positionExecutive",
+    format(val, row) {
+      return !row.positionExecutiveField
+        ? val
+        : `${val} (${row.positionExecutiveField})`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -173,7 +178,9 @@ const baseColumns = ref<QTableColumn[]>([
     field: "commandNo",
     format(val, row) {
       return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+        ? row.commandType !== "C-PM-47"
+          ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+          : `${row.commandNo}`
         : "";
     },
     headerStyle: "font-size: 14px",
diff --git a/src/modules/10_registry/interface/index/Main.ts b/src/modules/10_registry/interface/index/Main.ts
index 34ada80..f61e739 100644
--- a/src/modules/10_registry/interface/index/Main.ts
+++ b/src/modules/10_registry/interface/index/Main.ts
@@ -196,6 +196,7 @@ interface SalaryFormType {
   refCommandNo: string | null;
   templateDoc: string;
   order: number;
+  commandType: string;
 }
 
 interface NopaidFormType {

From fbe3b62a95ce5e24c62c4c084b99da3af432f7ef Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 18 Jul 2025 15:06:41 +0700
Subject: [PATCH 150/195] load orgchart

---
 package-lock.json                          |  50 +++++++++
 package.json                               |   2 +
 src/modules/12_organization/views/main.vue |  54 ++++++----
 src/plugins/exportChart.ts                 | 115 +++++++++++++++++++++
 src/types/dom-to-image-more.d.ts           |  36 +++++++
 5 files changed, 237 insertions(+), 20 deletions(-)
 create mode 100644 src/plugins/exportChart.ts
 create mode 100644 src/types/dom-to-image-more.d.ts

diff --git a/package-lock.json b/package-lock.json
index 91582e9..c62a2dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,8 +19,10 @@
                 "@tato30/vue-pdf": "^1.5.1",
                 "@vuepic/vue-datepicker": "^3.6.3",
                 "bma-org-chart": "^0.0.7",
+                "dom-to-image-more": "^3.6.0",
                 "keycloak-js": "^20.0.2",
                 "moment": "^2.29.4",
+                "pdf-lib": "^1.17.1",
                 "pinia": "^2.0.29",
                 "quasar": "^2.11.1",
                 "socket.io-client": "^4.7.4",
@@ -1143,6 +1145,24 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@pdf-lib/standard-fonts": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz",
+            "integrity": "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==",
+            "license": "MIT",
+            "dependencies": {
+                "pako": "^1.0.6"
+            }
+        },
+        "node_modules/@pdf-lib/upng": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz",
+            "integrity": "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==",
+            "license": "MIT",
+            "dependencies": {
+                "pako": "^1.0.10"
+            }
+        },
         "node_modules/@quasar/extras": {
             "version": "1.15.8",
             "license": "MIT",
@@ -3006,6 +3026,12 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/dom-to-image-more": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.6.0.tgz",
+            "integrity": "sha512-0BB0M9gRRP7znKBNLRAvNyWnkDIzSgMSDcS7WdPDzPnWhW2YJqxUR/dCHiJ2HdCV3K2rVky5Vba8UF31mvrCuQ==",
+            "license": "MIT"
+        },
         "node_modules/domexception": {
             "version": "4.0.0",
             "dev": true,
@@ -5871,6 +5897,12 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/pako": {
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+            "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+            "license": "(MIT AND Zlib)"
+        },
         "node_modules/panzoom": {
             "version": "9.4.3",
             "resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
@@ -5980,6 +6012,24 @@
                 "through": "~2.3"
             }
         },
+        "node_modules/pdf-lib": {
+            "version": "1.17.1",
+            "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
+            "integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==",
+            "license": "MIT",
+            "dependencies": {
+                "@pdf-lib/standard-fonts": "^1.0.0",
+                "@pdf-lib/upng": "^1.0.1",
+                "pako": "^1.0.11",
+                "tslib": "^1.11.1"
+            }
+        },
+        "node_modules/pdf-lib/node_modules/tslib": {
+            "version": "1.14.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+            "license": "0BSD"
+        },
         "node_modules/pdfjs-dist": {
             "version": "3.7.107",
             "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.7.107.tgz",
diff --git a/package.json b/package.json
index 68ab9bf..cdf5646 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,10 @@
         "@tato30/vue-pdf": "^1.5.1",
         "@vuepic/vue-datepicker": "^3.6.3",
         "bma-org-chart": "^0.0.7",
+        "dom-to-image-more": "^3.6.0",
         "keycloak-js": "^20.0.2",
         "moment": "^2.29.4",
+        "pdf-lib": "^1.17.1",
         "pinia": "^2.0.29",
         "quasar": "^2.11.1",
         "socket.io-client": "^4.7.4",
diff --git a/src/modules/12_organization/views/main.vue b/src/modules/12_organization/views/main.vue
index 40a2cea..aa0a5f4 100644
--- a/src/modules/12_organization/views/main.vue
+++ b/src/modules/12_organization/views/main.vue
@@ -10,6 +10,12 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import "structure-chart/structure-chart.css";
 
+import {
+  exportChartToPNG,
+  exportChartToPDF,
+  showLoadingSpinner,
+} from "@/plugins/exportChart";
+
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
@@ -88,30 +94,33 @@ function findPath(id: any) {
   }
 }
 
+const isLoadBtn = ref(false);
 /** function ดาวน์โหลดไฟล์โครงสร้าง PNG*/
 async function savePNG() {
-  try {
-    showLoader();
-    await scrollToCenter();
-    await chartRef.value.savePNG();
-  } catch {
-    messageError($q);
-  } finally {
-    hideLoader();
-  }
+  showLoadingSpinner();
+  isLoadBtn.value = true;
+  setTimeout(async () => {
+    try {
+      // export แบบเต็มๆ
+      scrollContainer.value && (await exportChartToPNG(scrollContainer.value));
+    } finally {
+      isLoadBtn.value = false;
+    }
+  }, 500);
 }
 
 /** function ดาวน์โหลดไฟล์โครงสร้าง PDF*/
 async function savePDF() {
-  try {
-    showLoader();
-    await scrollToCenter();
-    await chartRef.value.savePDF();
-  } catch {
-    messageError($q);
-  } finally {
-    hideLoader();
-  }
+  showLoadingSpinner();
+  isLoadBtn.value = true;
+  setTimeout(async () => {
+    try {
+      // export แบบเต็มๆ
+      scrollContainer.value && (await exportChartToPDF(scrollContainer.value));
+    } finally {
+      isLoadBtn.value = false;
+    }
+  }, 500);
 }
 
 /** ฟังก์ชันเลื่อน scroll ไปที่กึ่งกลาง*/
@@ -127,6 +136,7 @@ async function scrollToCenter() {
  * @param data
  */
 async function refreshChart(data: any, type: number) {
+  if (isLoadBtn.value) return; // ถ้าโหลดอยู่ไม่ให้ทำอะไร
   if (data.value === undefined) {
     fetchStructChart(data, type.toString());
     rootOrgID.value = data;
@@ -229,8 +239,9 @@ onMounted(async () => {
           <div class="q-pa-sm row wrap items-center">
             <q-btn
               flat
+              :diasble="isLoadBtn"
               round
-              color="primary"
+              :color="!isLoadBtn ? 'primary' : 'grey-7'"
               @click="savePNG()"
               icon="mdi-image"
             >
@@ -239,7 +250,8 @@ onMounted(async () => {
             <q-btn
               flat
               round
-              color="red-7"
+              :color="!isLoadBtn ? 'red-7' : 'grey-7'"
+              :diasble="isLoadBtn"
               @click="savePDF()"
               icon="mdi-file-pdf-box"
             >
@@ -263,7 +275,9 @@ onMounted(async () => {
           <div class="col-12">
             <q-separator />
           </div>
+
           <div
+            id="structChart"
             ref="scrollContainer"
             style="
               overflow-x: auto;
diff --git a/src/plugins/exportChart.ts b/src/plugins/exportChart.ts
new file mode 100644
index 0000000..31ea0ff
--- /dev/null
+++ b/src/plugins/exportChart.ts
@@ -0,0 +1,115 @@
+import domtoimage from "dom-to-image-more";
+import { PDFDocument } from "pdf-lib";
+
+/** ฟังก์ชันสำหรับแสดง loading spinner */
+export function showLoadingSpinner() {
+  const loading = document.createElement("div");
+  loading.id = "loading-spinner";
+  loading.style.position = "fixed";
+  loading.style.top = "0";
+  loading.style.left = "0";
+  loading.style.width = "100vw";
+  loading.style.height = "100vh";
+  loading.style.background = "rgba(0,0,0,0.2)";
+  loading.style.display = "flex";
+  loading.style.alignItems = "center";
+  loading.style.justifyContent = "center";
+  loading.style.zIndex = "9999";
+  loading.innerHTML = `
+    <div style="display:flex;flex-direction:column;align-items:center;">
+      <div style="
+        border: 8px solid #f3f3f3;
+        border-top: 8px solid #3498db;
+        border-radius: 50%;
+        width: 60px;
+        height: 60px;
+        animation: spin 1s linear infinite;
+      "></div>
+     
+    </div>
+    <style>
+      @keyframes spin {
+        0% { transform: rotate(0deg);}
+        100% { transform: rotate(360deg);}
+      }
+    </style>
+  `;
+  document.body.appendChild(loading);
+}
+
+/** ฟังก์ชันสำหรับซ่อน loading spinner */
+function hideLoadingSpinner() {
+  const loading = document.getElementById("loading-spinner");
+  if (loading) loading.remove();
+}
+
+/**
+ * ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PNG
+ * @param node HTMLElement ที่ต้องการ export เป็น PNG
+ */
+export async function exportChartToPNG(node: HTMLElement): Promise<void> {
+  if (node) {
+    try {
+      // สร้าง PNG จาก DOM ขนาดเต็ม
+      const imageData = await domtoimage.toPng(node, {
+        bgcolor: "#fff",
+        quality: 1,
+        width: node.scrollWidth,
+        height: node.scrollHeight,
+      });
+
+      const link = document.createElement("a");
+      link.download = "orgchart.png";
+      link.href = imageData;
+      link.click();
+    } catch (error: any) {
+      alert("Export ไม่สำเร็จ: " + error.message);
+    } finally {
+      hideLoadingSpinner();
+    }
+  }
+}
+
+/**
+ * ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PNG
+ * @param node HTMLElement ที่ต้องการ export เป็น PNG
+ */
+export async function exportChartToPDF(node: HTMLElement): Promise<void> {
+  // ใช้ scrollWidth/scrollHeight เพื่อขนาดเต็ม
+  const width = node.scrollWidth;
+  const height = node.scrollHeight;
+
+  try {
+    // สร้าง PNG จาก DOM ขนาดเต็ม
+    const imageData = await domtoimage.toPng(node, {
+      width,
+      height,
+      bgcolor: "#fff",
+    });
+    // สร้าง PDF ด้วย pdf-lib
+    const pdfDoc = await PDFDocument.create();
+    const page = pdfDoc.addPage([width, height]);
+    const pngImage = await pdfDoc.embedPng(imageData);
+    page.drawImage(pngImage, {
+      x: 0,
+      y: 0,
+      width,
+      height,
+    });
+    const pdfBytes = await pdfDoc.save();
+    // ดาวน์โหลด PDF
+    const blob = new Blob([pdfBytes], { type: "application/pdf" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "orgchart.pdf";
+    a.click();
+    URL.revokeObjectURL(url);
+  } catch (err: any) {
+    alert("Export ไม่สำเร็จ: " + err.message);
+
+    console.error(err);
+  } finally {
+    hideLoadingSpinner();
+  }
+}
diff --git a/src/types/dom-to-image-more.d.ts b/src/types/dom-to-image-more.d.ts
new file mode 100644
index 0000000..3e07aba
--- /dev/null
+++ b/src/types/dom-to-image-more.d.ts
@@ -0,0 +1,36 @@
+declare module "dom-to-image-more" {
+  export interface Options {
+    filter?: (node: Node) => boolean;
+    bgcolor?: string;
+    width?: number;
+    height?: number;
+    style?: any;
+    quality?: number;
+    imagePlaceholder?: string;
+    cacheBust?: boolean;
+  }
+
+  export function toPng(node: HTMLElement, options?: Options): Promise<string>;
+  export function toJpeg(node: HTMLElement, options?: Options): Promise<string>;
+  export function toSvg(node: HTMLElement, options?: Options): Promise<string>;
+  export function toPixelData(
+    node: HTMLElement,
+    options?: Options
+  ): Promise<Uint8ClampedArray>;
+  export function toCanvas(
+    node: HTMLElement,
+    options?: Options
+  ): Promise<HTMLCanvasElement>;
+  export function toBlob(node: HTMLElement, options?: Options): Promise<Blob>;
+
+  const domtoimage: {
+    toPng: typeof toPng;
+    toJpeg: typeof toJpeg;
+    toSvg: typeof toSvg;
+    toPixelData: typeof toPixelData;
+    toCanvas: typeof toCanvas;
+    toBlob: typeof toBlob;
+  };
+
+  export default domtoimage;
+}

From d80934cf69c8beee0fcfc6c7ef53576e6b65ac32 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 21 Jul 2025 13:20:54 +0700
Subject: [PATCH 151/195] =?UTF-8?q?fix:=20=E0=B8=A5=E0=B8=9A=20rulse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_transfer/views/AddTransfer.vue | 3 ---
 src/modules/03_retire/views/addRetire.vue     | 3 ---
 src/modules/03_retire/views/result.vue        | 3 +--
 3 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index b1c980e..fb1553d 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -161,10 +161,7 @@ onMounted(() => {
                     class="col-xs-12 col-sm-12 inputgreen"
                     outlined
                     dense
-                    lazy-rules
-                    hide-bottom-space
                     accept=".pdf"
-                    :rules="[(val: string) => !!val || 'กรุณาเลือกไฟล์เอกสารเพิ่มเติม']"
                     label="เอกสารเพิ่มเติม"
                   >
                     <template v-slot:prepend>
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index afbdadb..84c1a61 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -470,10 +470,7 @@ onMounted(async () => {
                 class="col-xs-12 col-sm-12 inputgreen"
                 outlined
                 dense
-                lazy-rules
-                hide-bottom-space
                 accept=".pdf"
-                :rules="[(val: string) => !!val || 'กรุณาเลือกเอกสารเพิ่มเติม']"
                 label="เอกสารเพิ่มเติม"
               >
                 <template v-slot:prepend>
diff --git a/src/modules/03_retire/views/result.vue b/src/modules/03_retire/views/result.vue
index 6d4657b..3745b4f 100644
--- a/src/modules/03_retire/views/result.vue
+++ b/src/modules/03_retire/views/result.vue
@@ -176,8 +176,7 @@ function saveForm() {
         suggestFriendsReason.value == "")) ||
     futureWork.value.length === 0 ||
     (futureWork.value === 1 &&
-      (futureWorkReason.value == null || futureWorkReason.value == "")) ||
-    suggestion.value.length < 1
+      (futureWorkReason.value == null || futureWorkReason.value == ""))
   ) {
     hasError = true;
   } else {

From e22f130361d3702015cbb0ac5c407ce7cd79b1e4 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 21 Jul 2025 15:16:04 +0700
Subject: [PATCH 152/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=88=E0=B8=AA=E0=B8=87=20null=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_transfer/views/AddTransfer.vue | 7 +++++--
 src/modules/03_retire/views/addRetire.vue     | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index fb1553d..60ea015 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -46,7 +46,7 @@ async function createTransfer() {
   const formData = new FormData();
   formData.append("Organization", tranferOrg.value);
   formData.append("Reason", noteReason.value);
-  formData.append("file", files.value);
+  formData.append("file", files.value ? files.value : null);
   await http
     .post(config.API.listtransfer(), formData)
     .then((res) => {
@@ -169,7 +169,10 @@ onMounted(() => {
                   ></q-file>
                 </div>
 
-                <div class="col-12 row" v-if="routeName != 'addTransfer'">
+                <div
+                  class="col-12 row"
+                  v-if="routeName != 'addTransfer' && files && files.length > 0"
+                >
                   <q-card bordered flat class="full-width">
                     <div
                       class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 84c1a61..64080f6 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -161,7 +161,7 @@ async function onSubmit() {
         dateLeave.value !== null ? dateToISO(dateLeave.value) : ""
       );
       formData.append("Reason", noteReason.value);
-      formData.append("file", files.value);
+      formData.append("file", files.value ? files.value : null);
       if (noteReason.value == "OTHER") {
         formData.append("remark", remark.value);
       }
@@ -478,7 +478,10 @@ onMounted(async () => {
               ></q-file>
             </div>
 
-            <div class="col-12 row" v-if="routeName != 'AddRetire'">
+            <div
+              class="col-12 row"
+              v-if="routeName != 'AddRetire' && files && files.length > 0"
+            >
               <q-card bordered flat class="row col-12 text-dark q-mt-sm">
                 <div
                   class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"

From 1888ce2f8ba59048c8b5dd5c59a975be6e3f745f Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 21 Jul 2025 15:50:41 +0700
Subject: [PATCH 153/195] change color download icon & tootip

---
 src/modules/02_transfer/views/AddTransfer.vue             | 6 ++++--
 src/modules/07_appealComplain/views/Form.vue              | 2 +-
 src/modules/11_probation/component/01_Assign.vue          | 2 +-
 src/modules/11_probation/component/06_EvaluateResult.vue  | 2 +-
 src/modules/11_probation/component/editPage/01_result.vue | 2 +-
 src/modules/13_portfolio/views/Add.vue                    | 2 +-
 src/modules/14_IDP/views/main.vue                         | 2 +-
 src/modules/14_IDP/views/registry.vue                     | 2 +-
 8 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index 60ea015..0d013b1 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -189,12 +189,14 @@ onMounted(() => {
                         </q-item-section>
                         <q-item-section avatar>
                           <q-btn
-                            color="teal-5"
+                            color="blue"
                             round
                             flat
                             icon="mdi-download"
                             @click="fileOpen(file.pathName)"
-                          ></q-btn>
+                          >
+                            <q-tooltip> ดาวน์โหลดไฟล์ </q-tooltip>
+                          </q-btn>
                         </q-item-section>
                       </q-item>
                     </q-list>
diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index 322d4e5..124d744 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -335,7 +335,7 @@ watch(
                           flat
                           icon="mdi-download"
                           outline
-                          color="primary"
+                          color="blue"
                           @click="downLoadFile(file.pathName)"
                         >
                           <q-tooltip>ดาวห์โหลดเอกสาร</q-tooltip>
diff --git a/src/modules/11_probation/component/01_Assign.vue b/src/modules/11_probation/component/01_Assign.vue
index 6c68298..d72c9b4 100644
--- a/src/modules/11_probation/component/01_Assign.vue
+++ b/src/modules/11_probation/component/01_Assign.vue
@@ -1065,7 +1065,7 @@ onMounted(async () => {
             flat
             dense
             icon="mdi-download"
-            color="primary"
+            color="blue"
           >
             <q-tooltip>ดาวน์โหลด</q-tooltip>
             <q-menu>
diff --git a/src/modules/11_probation/component/06_EvaluateResult.vue b/src/modules/11_probation/component/06_EvaluateResult.vue
index 6a4add7..431178a 100644
--- a/src/modules/11_probation/component/06_EvaluateResult.vue
+++ b/src/modules/11_probation/component/06_EvaluateResult.vue
@@ -269,7 +269,7 @@ onMounted(async () => {
         dense
         round
         icon="mdi-download"
-        color="primary"
+        color="blue"
       >
         <q-tooltip>ดาวน์โหลด</q-tooltip>
         <q-menu>
diff --git a/src/modules/11_probation/component/editPage/01_result.vue b/src/modules/11_probation/component/editPage/01_result.vue
index b0e27ae..1a4e200 100644
--- a/src/modules/11_probation/component/editPage/01_result.vue
+++ b/src/modules/11_probation/component/editPage/01_result.vue
@@ -549,7 +549,7 @@ onMounted(async () => {
       >
       </q-select>
       <q-space />
-      <q-btn flat rounded dense icon="mdi-download" color="primary">
+      <q-btn flat rounded dense icon="mdi-download" color="blue">
         <q-tooltip>ดาวน์โหลด</q-tooltip>
         <q-menu>
           <q-list style="min-width: 150px">
diff --git a/src/modules/13_portfolio/views/Add.vue b/src/modules/13_portfolio/views/Add.vue
index ad0ed23..4cb6c60 100644
--- a/src/modules/13_portfolio/views/Add.vue
+++ b/src/modules/13_portfolio/views/Add.vue
@@ -263,7 +263,7 @@ onMounted(() => {
                         </q-item-section>
                         <q-item-section avatar>
                           <q-btn
-                            color="teal-5"
+                            color="blue"
                             round
                             flat
                             icon="mdi-download"
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index 7a6b366..9b53dfe 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -420,7 +420,7 @@ onMounted(async () => {
                         round
                         dense
                         flat
-                        color="primary"
+                        color="blue"
                         size="12px"
                         @click.pervent="onDownloadFile(props.row.id)"
                       >
diff --git a/src/modules/14_IDP/views/registry.vue b/src/modules/14_IDP/views/registry.vue
index 37eb522..4494f52 100644
--- a/src/modules/14_IDP/views/registry.vue
+++ b/src/modules/14_IDP/views/registry.vue
@@ -524,7 +524,7 @@ onMounted(() => {
                     />
                     <q-btn
                       v-else
-                      color="primary"
+                      color="blue"
                       flat
                       dense
                       rounded

From 68249883224101d87e1142c50f76499735cd9269 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 24 Jul 2025 11:39:09 +0700
Subject: [PATCH 154/195] fix fetch

---
 src/interface/Main.ts                         | 36 +++++++++++++-
 .../06_evaluate/views/EvaluateMain.vue        |  2 +-
 src/modules/08_KPI/store.ts                   |  3 +-
 src/modules/08_KPI/views/form.vue             | 20 ++++----
 src/modules/08_KPI/views/main.vue             | 47 +++++++++++--------
 src/modules/09_scholarship/views/main.vue     | 28 ++++++-----
 .../components/DialogAddRequestEdit.vue       | 31 ++++++------
 src/modules/11_probation/views/main.vue       |  2 +-
 src/stores/data.ts                            |  3 ++
 9 files changed, 111 insertions(+), 61 deletions(-)

diff --git a/src/interface/Main.ts b/src/interface/Main.ts
index d73d63f..6d31fa4 100644
--- a/src/interface/Main.ts
+++ b/src/interface/Main.ts
@@ -10,7 +10,7 @@ interface ProfileData {
   posNo: string;
   profileId: string;
   citizenId?: string;
-  salary?: number|null;
+  salary?: number | null;
   birthDate?: string;
   keycloakId?: string;
   org?: string;
@@ -35,4 +35,36 @@ interface InformationData {
   email: string;
 }
 
-export type { ProfileData, InformationData };
+interface DataProfile {
+  profileId: string | null;
+  prefix: string;
+  rank: string;
+  firstName: string;
+  lastName: string;
+  citizenId: string;
+  position: string;
+  posMaster: string | null;
+  posLevelName: string | null;
+  posLevelRank: string | null;
+  posLevelId: string | null;
+  posTypeName: string | null;
+  posTypeRank: string | null;
+  posTypeId: string | null;
+  posExecutiveName: string;
+  posExecutivePriority: string | null;
+  posExecutiveId: string | null;
+  rootId: string | null;
+  root: string;
+  child1Id: string | null;
+  child1: string | null;
+  child2Id: string | null;
+  child2: string | null;
+  child3Id: string | null;
+  child3: string | null;
+  child4Id: string | null;
+  child4: string | null;
+  node: string | null;
+  nodeId: string | null;
+}
+
+export type { ProfileData, InformationData, DataProfile };
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index 6c44144..b9bf856 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -86,7 +86,6 @@ async function fetchEvaluteList() {
       );
       total.value = res.data.result.total;
       store.fetchEvaluateList(res.data.result.data);
-      await getProfileCheck();
     })
     .catch((err) => {
       messageError($q, err);
@@ -191,6 +190,7 @@ watch(
 /** hook lifecycle*/
 onMounted(async () => {
   await fetchEvaluteList();
+  await getProfileCheck();
 });
 </script>
 
diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index 25eb139..f9fc0a0 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { ref, reactive } from "vue";
 import type { DataOptions } from "./interface/index/Main";
 import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
+import type { DataProfile } from "@/interface/Main";
 
 export const useKpiDataStore = defineStore("KPIDate", () => {
   const mainRowData = ref<any>();
@@ -17,7 +18,7 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
   const selected = ref([]);
   const work = ref<boolean>(false);
   const tabMain = ref<string>("");
-  const dataProfile = ref<any>({
+  const dataProfile = ref<DataProfile>({
     profileId: null,
     prefix: "",
     rank: "",
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 5ee322d..b29ab9c 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -478,15 +478,17 @@ async function fetchProfileEvaluator(id: string) {
 
 /** ดึงข้อมูลโปรไฟล์ */
 async function getProfile() {
-  await http
-    .get(config.API.profilePosition())
-    .then(async (res) => {
-      const data = await res.data.result;
-      store.dataProfile = await data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
+  if (store.dataProfile.profileId) {
+    await http
+      .get(config.API.profilePosition())
+      .then(async (res) => {
+        const data = await res.data.result;
+        store.dataProfile = await data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      });
+  }
 }
 
 async function downloadReport() {
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 5712266..fd8079b 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -9,6 +9,7 @@ import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type { DataProfile } from "@/interface/Main";
 import type {
   DataOptions,
   MainListKpi,
@@ -285,26 +286,34 @@ function onSubmit() {
 }
 
 /** ดึงข้อมูล */
-function getProfile() {
-  http
-    .get(config.API.profilePosition())
-    .then(async (res) => {
-      const data = await res.data.result;
-      store.dataProfile = data;
+async function getProfile() {
+  if (store.dataProfile.profileId) {
+    assignProfileToForm(store.dataProfile);
+  } else {
+    await http
+      .get(config.API.profilePosition())
+      .then(async (res) => {
+        const data = await res.data.result;
+        store.dataProfile = data;
+        assignProfileToForm(data);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      });
+  }
+}
 
-      formRound.profileId = data.profileId;
-      formRound.prefix = data.prefix;
-      formRound.firstName = data.firstName;
-      formRound.lastName = data.lastName;
-      formRound.position = data.position;
-      formRound.posLevelName = data.posLevelName;
-      formRound.posTypeName = data.posTypeName;
-      formRound.posExecutiveName = data.posExecutiveName;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {});
+function assignProfileToForm(profile: DataProfile) {
+  formRound.profileId = profile.profileId ? profile.profileId : "";
+  formRound.prefix = profile.prefix ? profile.prefix : "";
+  formRound.firstName = profile.firstName ? profile.firstName : "";
+  formRound.lastName = profile.lastName ? profile.lastName : "";
+  formRound.position = profile.position ? profile.position : "";
+  formRound.posLevelName = profile.posLevelName ? profile.posLevelName : "";
+  formRound.posTypeName = profile.posTypeName ? profile.posTypeName : "";
+  formRound.posExecutiveName = profile.posExecutiveName
+    ? profile.posExecutiveName
+    : "";
 }
 
 /** เช็ครอบการประเมิน ปิด */
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index be093ef..ad8856d 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -5,6 +5,7 @@ import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useDataStore } from "@/stores/data";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type {
@@ -17,7 +18,7 @@ const { showLoader, hideLoader, messageError } = mixin;
 const router = useRouter();
 
 const $q = useQuasar();
-
+const dataStore = useDataStore();
 const profilId = ref<string>("");
 const currentPage = ref<number>(1);
 const page = ref<number>(1);
@@ -123,19 +124,22 @@ function onEdit(id: string) {
 // );
 
 async function getProfileId() {
-  showLoader();
-  await http
-    .get(config.API.profilePosition())
-    .then(async (res) => {
-      profilId.value = res.data.result.profileId;
-      await getData();
-    })
-    .catch((e) => {
+  if (dataStore.profileId) {
+    profilId.value = dataStore.profileId;
+  } else {
+    showLoader();
+    try {
+      const res = await http.get(config.API.profilePosition());
+      dataStore.profileId = res.data.result.profileId;
+      profilId.value = dataStore.profileId;
+    } catch (e) {
       messageError($q, e);
-    })
-    .finally(() => {
+    } finally {
       hideLoader();
-    });
+    }
+  }
+
+  await getData();
 }
 
 function convertType(val: string) {
diff --git a/src/modules/10_registry/components/DialogAddRequestEdit.vue b/src/modules/10_registry/components/DialogAddRequestEdit.vue
index 81b06d0..7df4b27 100644
--- a/src/modules/10_registry/components/DialogAddRequestEdit.vue
+++ b/src/modules/10_registry/components/DialogAddRequestEdit.vue
@@ -16,7 +16,7 @@ import { useCounterMixin } from "@/stores/mixin";
  * use
  */
 const $q = useQuasar();
-const link = ref<string>('')
+const link = ref<string>("");
 const store = useRequestEditStore();
 const dataStore = useDataStore();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
@@ -167,20 +167,16 @@ function filterOption(val: string, update: Function) {
 /**
  * function fetch profileId
  */
-function fetchProfile() {
-  showLoader();
-  http
-    .get(config.API.profilePosition())
-    .then((res) => {
-      const data = res.data.result;
-      profileId.value = data.profileId;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+async function fetchProfile() {
+  try {
+    isReadOnly.value = dataStore.officerType === "OFFICER";
+    const res = await http.get(config.API.profilePosition());
+    return res.data.result.profileId;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }
 
 /** popup รายละเอียดของ ขอปรับปรุงข้อมูลจากกรมการปกครอง */
@@ -194,7 +190,10 @@ function onInfo(val: string) {
 watch(
   () => modal.value,
   async () => {
-    modal.value && fetchProfile();
+    profileId.value = dataStore.profileId
+      ? dataStore.profileId
+      : await fetchProfile();
+
     link.value = await dataStore.getProFileType();
   }
 );
diff --git a/src/modules/11_probation/views/main.vue b/src/modules/11_probation/views/main.vue
index 86245ea..c27501a 100644
--- a/src/modules/11_probation/views/main.vue
+++ b/src/modules/11_probation/views/main.vue
@@ -23,7 +23,7 @@ const {
   showLoader,
   hideLoader,
   date2Thai,
-  onSearchDataTable
+  onSearchDataTable,
 } = mixin;
 
 const filter = ref<string>("");
diff --git a/src/stores/data.ts b/src/stores/data.ts
index 29e9851..0da8015 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -16,6 +16,7 @@ export const useDataStore = defineStore("dataMain", () => {
   const { messageError, showLoader, hideLoader, findPosMasterNo, findOrgName } =
     mixin;
   // ref() คือการประกาศ state เหมือน vuex
+  const profileId = ref<string>("");
   const formData = reactive<ProfileData>({
     profileId: "",
     rank: "",
@@ -101,6 +102,7 @@ export const useDataStore = defineStore("dataMain", () => {
 
   async function getData(dataPerson: any) {
     const data = await dataPerson;
+    profileId.value = data.profileId;
     isProbation.value = data.isProbation;
     formData.profileId = data.profileId;
     formData.rank = data.rank;
@@ -166,6 +168,7 @@ export const useDataStore = defineStore("dataMain", () => {
     officerLink,
     getProFileType,
     dataProfile,
+    profileId,
   };
 });
 

From ae059a1d5f0223cf2eafbf590701de936fb0ba59 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 25 Jul 2025 09:35:53 +0700
Subject: [PATCH 155/195] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=81=E0=B8=B2=E0=B8=A8=20api=20/org/prof?=
 =?UTF-8?q?ile/keycloak/position=20=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=B9=E0=B9=88=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=9A=E0=B8=9A=20org=20=E0=B8=AD=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=E0=B9=80=E0=B8=94=E0=B8=B5=E0=B8=A2=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/appeal/api.appeal.ts                              | 2 +-
 src/modules/06_evaluate/components/viewstep/viewStep1.vue | 2 +-
 src/modules/07_appealComplain/views/Add.vue               | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/api/appeal/api.appeal.ts b/src/api/appeal/api.appeal.ts
index 0f1348c..7fb0a1f 100644
--- a/src/api/appeal/api.appeal.ts
+++ b/src/api/appeal/api.appeal.ts
@@ -5,7 +5,7 @@ const profile = `${env.API_URI}/profile/keycloak`;
 
 export default {
   profileBykeycloak: () => `${profile}`,
-  positionBykeycloak: () => `${env.API_URI}/org/profile/keycloak/position`,
+  // positionBykeycloak: () => `${env.API_URI}/org/profile/keycloak/position`,
 
   appealMainList: (
     status: string,
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index a3057f8..9077145 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -76,7 +76,7 @@ const formDetail = reactive<any>({
 /** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
 async function fetchDetail() {
   await http
-    .get(config.API.positionBykeycloak())
+    .get(config.API.profilePosition())
     .then(async (res) => {
       const data = await res.data.result;
       formDetail.root = data.root;
diff --git a/src/modules/07_appealComplain/views/Add.vue b/src/modules/07_appealComplain/views/Add.vue
index 52932a8..10e55f5 100644
--- a/src/modules/07_appealComplain/views/Add.vue
+++ b/src/modules/07_appealComplain/views/Add.vue
@@ -30,7 +30,7 @@ const formProfile = reactive<FormProfile>({
 function getProFile() {
   showLoader();
   http
-    .get(config.API.positionBykeycloak())
+    .get(config.API.profilePosition())
     .then((res) => {
       const data = res.data.result;
       formProfile.profileId = data.profileId;

From efcfda8b0eb0373799849df8414026d56a5e6c60 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 25 Jul 2025 13:17:18 +0700
Subject: [PATCH 156/195] fix fetchprofilePosition

---
 .../06_evaluate/views/EvaluateMain.vue        |  47 +-
 src/modules/11_probation/router.ts            |  10 -
 src/modules/11_probation/views/main.vue       | 430 ------------------
 .../components/01_SurveyPage.vue              |  19 +-
 .../components/02_ResultPage.vue              |   7 +-
 .../components/03_AssignPage.vue              |   6 +-
 src/stores/data.ts                            |   5 +-
 7 files changed, 49 insertions(+), 475 deletions(-)
 delete mode 100644 src/modules/11_probation/views/main.vue

diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index b9bf856..43d520d 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -7,6 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 
 /** import Components*/
 import TableListEvaluate from "@/modules/06_evaluate/components/TableListEvaluate.vue"; // ตารางประเมิน
@@ -20,6 +21,7 @@ import type { OptionStatus } from "@/modules/06_evaluate/interface/main";
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useEvaluateStore();
+const dataStore = useDataStore();
 const router = useRouter();
 const { showLoader, hideLoader, messageError } = mixin;
 
@@ -98,24 +100,33 @@ async function fetchEvaluteList() {
 /** function เรียกรายการประเมิน*/
 const statusSubmit = ref<boolean>(true);
 async function getProfileCheck() {
-  await http
-    .get(config.API.profilePosition())
-    .then(async (res: any) => {
-      const data = res.data.result;
-      if (
-        data.posTypeRank != 2 ||
-        (data.posTypeRank == 2 && data.posLevelRank >= 4)
-      ) {
-        statusSubmit.value = false;
-      } else {
-        listMenu.value = await listMenu.value.filter(
-          (x: ListMenu) => x.level > data.posLevelRank
-        );
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+  if (!dataStore.dataprofilePosition) {
+    await http
+      .get(config.API.profilePosition())
+      .then(async (res: any) => {
+        const data = res.data.result;
+        checkProfilePosition(data);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  } else {
+    const data = dataStore.dataprofilePosition;
+    checkProfilePosition(data);
+  }
+}
+
+function checkProfilePosition(data: any) {
+  if (
+    data.posTypeRank != 2 ||
+    (data.posTypeRank == 2 && data.posLevelRank >= 4)
+  ) {
+    statusSubmit.value = false;
+  } else {
+    listMenu.value = listMenu.value.filter(
+      (x: ListMenu) => x.level > data.posLevelRank
+    );
+  }
 }
 
 const selectedStatus = ref<string[]>([
diff --git a/src/modules/11_probation/router.ts b/src/modules/11_probation/router.ts
index 8284c0b..67c9b70 100644
--- a/src/modules/11_probation/router.ts
+++ b/src/modules/11_probation/router.ts
@@ -1,5 +1,4 @@
 // registry
-const probationPage = () => import("@/modules/11_probation/views/main.vue");
 const probationDetail = () =>
   import("@/modules/11_probation/views/mainDetail.vue");
 
@@ -34,15 +33,6 @@ const probationAddevaluascore = () =>
   import("@/modules/11_probation/component/addPage/04_addevaluascore.vue");
 
 export default [
-  {
-    path: "/probation",
-    name: "probationMain",
-    component: probationPage,
-    meta: {
-      Auth: true,
-      Key: [11],
-    },
-  },
   {
     path: "/probation-detail/:id",
     name: "probationMainDetail",
diff --git a/src/modules/11_probation/views/main.vue b/src/modules/11_probation/views/main.vue
deleted file mode 100644
index c27501a..0000000
--- a/src/modules/11_probation/views/main.vue
+++ /dev/null
@@ -1,430 +0,0 @@
-<script setup lang="ts">
-import avatar from "@/assets/avatar_user.jpg";
-import { ref, reactive, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-
-import { useRouter } from "vue-router";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar, type QTableProps } from "quasar";
-
-import type { ListMain } from "@/modules/11_probation/interface/index/main";
-
-const profileId = ref<string>("");
-const rows = ref<ListMain[]>([]);
-const rowsData = ref<ListMain[]>([]);
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  messageError,
-  dialogConfirm,
-  findOrgName,
-  showLoader,
-  hideLoader,
-  date2Thai,
-  onSearchDataTable,
-} = mixin;
-
-const filter = ref<string>("");
-const mode = ref<any>($q.screen.gt.xs);
-const profileImg = ref<string>("");
-const router = useRouter();
-const formData = reactive<any>({
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  position: "",
-  posExecutiveName: "",
-  posTypeName: "",
-  posLevelName: "",
-  org: "",
-});
-const sizeImg = ref<string>("");
-
-/** ข้อมูลที่เเสดงในตาราง */
-const visibleColumns = ref<string[]>([
-  "no",
-  "date_start",
-  "date_finish",
-  "mentors",
-  "commander",
-]);
-
-/** หัวตาราง */
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "date_start",
-    align: "left",
-    label: "ตั้งแต่วันที่",
-    sortable: true,
-    field: "date_start",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-  },
-  {
-    name: "date_finish",
-    align: "left",
-    label: "ถึงวันที่",
-    sortable: true,
-    field: "date_finish",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-  },
-  {
-    name: "mentors",
-    align: "left",
-    label: "ผู้ดูแล",
-    sortable: true,
-    field: "mentors",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "commander",
-    align: "left",
-    label: "ผู้บังคับบัญชา",
-    sortable: true,
-    field: "commander",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-function onResize(size: any) {
-  const width = size.width > 100 ? 100 : size.width;
-  sizeImg.value = `${width}px`;
-}
-
-function onMobile(type: string) {
-  router.push(`/registry/${type}`);
-}
-
-function getMain() {
-  showLoader();
-  http
-    .get(config.API.profilePosition())
-    .then(async (res) => {
-      const data = res.data.result;
-      formData.prefix = data.prefix;
-      formData.firstName = data.firstName;
-      formData.lastName = data.lastName;
-      formData.position = data.position;
-
-      formData.posTypeName = data.posTypeName;
-      formData.posExecutiveName = data.posExecutiveName;
-      formData.posLevelName = data.posLevelName;
-      formData.org = findOrgName(data);
-      profileId.value = data.profileId;
-      if (data.avatarName) {
-        getImg(data.profileId, data.avatarName);
-      } else {
-        profileImg.value = avatar;
-      }
-      await getList(data.profileId);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function getList(id: string) {
-  http
-    .get(config.API.probationMain(id))
-    .then((res) => {
-      const data = res.data.data;
-      rows.value = data;
-      rowsData.value = data;
-    })
-    .catch((e) => {})
-    .finally(() => {});
-}
-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);
-    })
-    .finally(() => {});
-}
-
-function onDetail(id: string) {
-  router.push(`/probation/detail/${profileId.value}/${id}`);
-}
-
-function onSearch() {
-  rows.value = onSearchDataTable(
-    filter.value,
-    rowsData.value,
-    columns.value ? columns.value : []
-  );
-}
-
-onMounted(async () => {
-  await getMain();
-});
-</script>
-<template>
-  <div class="row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        รายละเอียดงานที่ได้รับมอบหมาย
-      </div>
-      <div class="row q-col-gutter-md">
-        <div v-if="$q.screen.gt.xs" class="col-12">
-          <q-card>
-            <div class="bg-grey-1 row q-pa-sm items-center">
-              <span class="text-teal text-weight-bold text-body2">{{
-                formData.firstName
-                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
-                  : "-"
-              }}</span>
-            </div>
-            <q-resize-observer @resize="onResize" />
-            <q-card-section class="q-pa-md">
-              <div class="row">
-                <div class="col-2 text-center self-center">
-                  <q-avatar :size="sizeImg" rounded>
-                    <img
-                      :src="profileImg"
-                      style="border-radius: 10px; object-fit: cover"
-                    />
-                  </q-avatar>
-                </div>
-                <div class="col-10 column justify-center no-wrap">
-                  <div class="row text-grey-6">
-                    <div class="col-4">ตำแหน่งในสายงาน</div>
-                    <div class="col-4">ระดับ</div>
-                    <div class="col-4">สังกัด</div>
-                  </div>
-                  <div class="row">
-                    <div class="col-4">
-                      {{ formData.position ? formData.position : "-" }}
-                    </div>
-                    <div class="col-4">
-                      {{ formData.posLevelName ? formData.posLevelName : "-" }}
-                    </div>
-                    <div class="col-4">
-                      {{ formData.org ? formData.org : "-" }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </q-card-section>
-          </q-card>
-        </div>
-        <div v-else class="col-12">
-          <q-card bordered>
-            <div class="bg-grey-1 row q-pa-sm items-center">
-              <span class="text-teal text-weight-bold text-body2">{{
-                formData.firstName
-                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
-                  : "-"
-              }}</span>
-            </div>
-            <q-resize-observer @resize="onResize" />
-            <q-card-section>
-              <div class="text-center q-mt-md">
-                <q-avatar :size="sizeImg" rounded>
-                  <img
-                    :src="profileImg"
-                    style="border-radius: 10px; object-fit: cover"
-                  />
-                </q-avatar>
-              </div>
-            </q-card-section>
-
-            <q-list class="q-mt-md">
-              <q-item>
-                <q-item-section>
-                  <q-item-label class="text-grey-6"
-                    >ตำแหน่งในสายงาน</q-item-label
-                  >
-                  <q-item-label>{{
-                    formData.position ? formData.position : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item>
-                <q-item-section>
-                  <q-item-label class="text-grey-6">ระดับ</q-item-label>
-                  <q-item-label>{{
-                    formData.posLevelName ? formData.posLevelName : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item>
-                <q-item-section>
-                  <q-item-label class="text-grey-6">สังกัด</q-item-label>
-                  <q-item-label>{{
-                    formData.org ? formData.org : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-        <div class="col-12 row">
-          <q-card bordered class="col-12 q-pa-md">
-            <div class="row">
-              <q-btn
-                @click="router.push(`/probation/add/${profileId}`)"
-                flat
-                round
-                color="primary"
-                icon="mdi-plus"
-              >
-                <q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
-              </q-btn>
-              <q-space />
-              <q-input
-                class="inputgreen"
-                outlined
-                dense
-                v-model="filter"
-                label="ค้นหา"
-                :style="mode ? `max-width: 200px` : `max-width: 150px`"
-                @keydown.enter.prevent="onSearch"
-              >
-                <template v-slot:append>
-                  <q-icon name="search" />
-                </template>
-              </q-input>
-              <q-select
-                v-if="$q.screen.gt.xs"
-                class="q-ml-sm"
-                dense
-                multiple
-                outlined
-                emit-value
-                map-options
-                options-dense
-                option-value="name"
-                style="min-width: 140px"
-                v-model="visibleColumns"
-                :options="columns"
-                :display-value="$q.lang.table.columns"
-              />
-            </div>
-            <div class="q-mt-sm">
-              <d-table
-                flat
-                dense
-                bordered
-                ref="table"
-                virtual-scroll
-                :rows="rows"
-                :columns="columns"
-                :grid="!$q.screen.gt.xs"
-                :rows-per-page-options="[10, 25, 50, 100]"
-                :visible-columns="visibleColumns"
-                :virtual-scroll-sticky-size-start="48"
-              >
-                <template v-slot:header="props">
-                  <q-tr :props="props">
-                    <q-th
-                      v-for="col in props.cols"
-                      :key="col.name"
-                      :props="props"
-                    >
-                      <span class="text-weight-medium">{{ col.label }}</span>
-                    </q-th>
-                  </q-tr>
-                </template>
-
-                <template v-if="$q.screen.gt.xs" v-slot:body="props">
-                  <q-tr :props="props" class="cursor-pointer">
-                    <q-td
-                      v-for="(col, index) in props.cols"
-                      :key="col.name"
-                      @click="onDetail(props.row.id)"
-                    >
-                      <div v-if="col.name == 'no'">
-                        {{ props.rowIndex + 1 }}
-                      </div>
-                      <div v-else-if="col.name == 'status'">
-                        {{ props.row.status ? props.row.status : "-" }}
-                      </div>
-                      <div v-else>
-                        {{ col.value ? col.value : "-" }}
-                      </div>
-                    </q-td>
-                  </q-tr>
-                </template>
-                <template v-else v-slot:item="props">
-                  <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-                    <q-card bordered flat>
-                      <q-list dense class="q-mt-lg relative-position">
-                        <q-btn
-                          icon="info"
-                          color="info"
-                          flat
-                          dense
-                          round
-                          size="14px"
-                          class="absolute_button"
-                          @click="onDetail(props.row.id)"
-                        >
-                          <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
-                        </q-btn>
-                        <q-item v-for="col in props.cols" :key="col.name">
-                          <q-item-section class="fix_top">
-                            <q-item-label
-                              class="text-grey-6 text-weight-medium"
-                              >{{ col.label }}</q-item-label
-                            >
-                          </q-item-section>
-                          <q-item-section class="fix_top">
-                            <q-item-label
-                              class="text-dark text-weight-medium"
-                              >{{ col.value ? col.value : "-" }}</q-item-label
-                            >
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-card>
-                  </div>
-                </template>
-                <template v-slot:no-data>
-                  <div
-                    class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-                  >
-                    <span> ไม่พบข้อมูล </span>
-                  </div>
-                </template>
-              </d-table>
-            </div>
-          </q-card>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped>
-.absolute_button {
-  position: absolute;
-  right: 5px;
-  top: -20px;
-}
-
-.fix_top {
-  justify-content: start !important;
-}
-</style>
diff --git a/src/modules/15_probationReport/components/01_SurveyPage.vue b/src/modules/15_probationReport/components/01_SurveyPage.vue
index 57456f5..ffb598d 100644
--- a/src/modules/15_probationReport/components/01_SurveyPage.vue
+++ b/src/modules/15_probationReport/components/01_SurveyPage.vue
@@ -56,11 +56,11 @@ async function save() {
       showLoader();
       await http
         .post(config.API.summarySurveyDetail(store.assignId), data)
-        .then((res: any) => {
+        .then(async () => {
+          await props.getSurveyData?.();
           success($q, "บันทึกสำเร็จ");
-          props.getSurveyData?.();
         })
-        .catch((e: any) => {
+        .catch((e) => {
           messageError($q, e);
         })
         .finally(() => {
@@ -93,17 +93,16 @@ watch(
   }
 );
 
-
 /** get ค่า เมื่อโหลดหน้า */
 onMounted(() => {
   if (store.tabMain === "SURVEY") {
-      if (dataSurvey.value !== null) {
-        answer1.value = dataSurvey.value.answer1;
-        answer2.value = dataSurvey.value.answer2;
-        answer3.value = dataSurvey.value.answer3;
-        status.value = false;
-      }
+    if (dataSurvey.value !== null) {
+      answer1.value = dataSurvey.value.answer1;
+      answer2.value = dataSurvey.value.answer2;
+      answer3.value = dataSurvey.value.answer3;
+      status.value = false;
     }
+  }
 });
 </script>
 <template>
diff --git a/src/modules/15_probationReport/components/02_ResultPage.vue b/src/modules/15_probationReport/components/02_ResultPage.vue
index 07617cd..7fadf29 100644
--- a/src/modules/15_probationReport/components/02_ResultPage.vue
+++ b/src/modules/15_probationReport/components/02_ResultPage.vue
@@ -67,7 +67,6 @@ const formData = ref<ProbationReportType>({
  * @param type type file
  */
 async function clickdownloadFile() {
-  console.log(props.page);
   showLoader();
   await http
     .get(
@@ -80,13 +79,13 @@ async function clickdownloadFile() {
     .then(async (res) => {
       const data = res.data.downloadUrl;
       window.open(data);
-      hideLoader();
     })
     .catch(async (e) => {
       messageError($q, JSON.parse(await e.response.data.text()));
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function getData() {
diff --git a/src/modules/15_probationReport/components/03_AssignPage.vue b/src/modules/15_probationReport/components/03_AssignPage.vue
index 0ff38b3..4be7990 100644
--- a/src/modules/15_probationReport/components/03_AssignPage.vue
+++ b/src/modules/15_probationReport/components/03_AssignPage.vue
@@ -185,11 +185,13 @@ async function dataEdit(id: string) {
   const data = putDataEdit(id);
   http
     .put(config.API.saveEditAssign(id), data)
-    .then(() => {})
+    .then(async () => {
+      await getAssign();
+    })
     .catch(() => {})
     .finally(async () => {
       isEdit.value = false;
-      getAssign();
+
       hideLoader();
     });
   // } else {
diff --git a/src/stores/data.ts b/src/stores/data.ts
index 0da8015..57eea19 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -6,7 +6,7 @@ import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 import { useCounterMixin } from "./mixin";
-import type { ProfileData } from "@/interface/Main";
+import type { ProfileData, DataProfile } from "@/interface/Main";
 
 export const useDataStore = defineStore("dataMain", () => {
   const dataProfile = ref<any>();
@@ -17,6 +17,7 @@ export const useDataStore = defineStore("dataMain", () => {
     mixin;
   // ref() คือการประกาศ state เหมือน vuex
   const profileId = ref<string>("");
+  const dataprofilePosition = ref<DataProfile | undefined>(undefined);
   const formData = reactive<ProfileData>({
     profileId: "",
     rank: "",
@@ -102,6 +103,7 @@ export const useDataStore = defineStore("dataMain", () => {
 
   async function getData(dataPerson: any) {
     const data = await dataPerson;
+    dataprofilePosition.value = data;
     profileId.value = data.profileId;
     isProbation.value = data.isProbation;
     formData.profileId = data.profileId;
@@ -169,6 +171,7 @@ export const useDataStore = defineStore("dataMain", () => {
     getProFileType,
     dataProfile,
     profileId,
+    dataprofilePosition,
   };
 });
 

From 7d95116c2560b4fecf1432a7686cc747e61df4a1 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 25 Jul 2025 15:08:35 +0700
Subject: [PATCH 157/195] fix fetch profilePosition

---
 src/interface/Main.ts                         | 84 ++++++++++++-------
 .../components/viewstep/viewStep1.vue         | 62 ++++++++------
 src/modules/07_appealComplain/views/Add.vue   | 45 ++++++----
 3 files changed, 118 insertions(+), 73 deletions(-)

diff --git a/src/interface/Main.ts b/src/interface/Main.ts
index 6d31fa4..59249cb 100644
--- a/src/interface/Main.ts
+++ b/src/interface/Main.ts
@@ -36,35 +36,63 @@ interface InformationData {
 }
 
 interface DataProfile {
-  profileId: string | null;
-  prefix: string;
-  rank: string;
-  firstName: string;
-  lastName: string;
-  citizenId: string;
-  position: string;
-  posMaster: string | null;
-  posLevelName: string | null;
-  posLevelRank: string | null;
-  posLevelId: string | null;
-  posTypeName: string | null;
-  posTypeRank: string | null;
-  posTypeId: string | null;
-  posExecutiveName: string;
-  posExecutivePriority: string | null;
-  posExecutiveId: string | null;
-  rootId: string | null;
-  root: string;
-  child1Id: string | null;
-  child1: string | null;
-  child2Id: string | null;
-  child2: string | null;
-  child3Id: string | null;
-  child3: string | null;
-  child4Id: string | null;
+  amountSpecial: number;
+  avatar: string;
+  avatarName: string;
+  birthDate: string;
+  child1: string;
+  child1DnaId: string;
+  child1Id: string;
+  child1ShortName: string;
+  child2: string;
+  child2DnaId: string;
+  child2Id: string;
+  child2ShortName: string;
+  child3: string;
+  child3DnaId: string;
+  child3Id: string;
+  child3ShortName: string;
   child4: string | null;
-  node: string | null;
-  nodeId: string | null;
+  child4DnaId: string | null;
+  child4Id: string | null;
+  child4ShortName: string | null;
+  citizenId: string;
+  dateRetireLaw: string;
+  dateStart: string;
+  firstName: string;
+  isDirector: boolean;
+  isProbation: boolean;
+  keycloak: string;
+  lastName: string;
+  leaveDate: string | null;
+  node: number;
+  nodeDnaId: string;
+  nodeId: string;
+  nodeShortName: string;
+  posExecutiveId: string | null;
+  posExecutiveName: string | null;
+  posExecutivePriority: number | null;
+  posLevelId: string;
+  posLevelName: string;
+  posLevelRank: number;
+  posMaster: number;
+  posMasterNo: number;
+  posNo: string;
+  posTypeId: string;
+  posTypeName: string;
+  posTypeRank: number;
+  position: string;
+  positionArea: string | null;
+  positionExecutiveField: string | null;
+  prefix: string;
+  profileId: string;
+  profileType: string;
+  rank: string | null;
+  root: string;
+  rootDnaId: string;
+  rootId: string;
+  rootShortName: string;
+  salary: number;
 }
 
 export type { ProfileData, InformationData, DataProfile };
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 9077145..7834f54 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -9,8 +9,10 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDetail";
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
+import { useDataStore } from "@/stores/data";
 
 /** importType*/
+import type { DataProfile } from "@/interface/Main";
 import type {
   EducationForm,
   CertificatesForm,
@@ -24,6 +26,7 @@ import HeaderDialog from "@/components/DialogHeader.vue";
 const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
 const storeEva = useEvaluateStore();
+const storeData = useDataStore();
 const $q = useQuasar();
 const route = useRoute();
 const { showLoader, hideLoader, messageError, date2Thai, findOrgNameHtml } =
@@ -75,34 +78,39 @@ const formDetail = reactive<any>({
 
 /** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
 async function fetchDetail() {
-  await http
-    .get(config.API.profilePosition())
-    .then(async (res) => {
-      const data = await res.data.result;
-      formDetail.root = data.root;
-      formDetail.rootId = data.rootId;
-      formDetail.userId = data.id;
-      formDetail.citizenId = data.citizenId;
-      formDetail.prefix = data.prefix;
-      formDetail.fullName = `${data.firstName}  ${data.lastName}`;
-      formDetail.firstName = data.firstName;
-      formDetail.lastName = data.lastName;
-      formDetail.position = data.position;
-      formDetail.oc = data.rootShortName;
-      formDetail.positionLevel = data.posLevelName;
-      formDetail.posNo = data.posNo ?? "";
-      formDetail.birthDate = data.birthDate;
-      // formDetail.govAge = data.govAge; // ยังไม่มี
-      formDetail.salary = data.salary;
-      formDetail.posExecutive = data.posExecutive;
-      formDetail.positionArea = data.positionArea;
-      await fetchDataAllDetail();
+  try {
+    if (!storeData.dataprofilePosition) {
+      const res = await http.get(config.API.profilePosition());
+      await updateFormDetail(res.data.result);
+    } else {
+      await updateFormDetail(storeData.dataprofilePosition);
+    }
+  } catch (error) {
+    messageError($q, error);
+  }
+}
 
-      emit("update:formDeital", formDetail);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+async function updateFormDetail(data: DataProfile) {
+  formDetail.root = data.root;
+  formDetail.rootId = data.rootId;
+  formDetail.userId = data.profileId;
+  formDetail.citizenId = data.citizenId;
+  formDetail.prefix = data.prefix;
+  formDetail.fullName = `${data.firstName}  ${data.lastName}`;
+  formDetail.firstName = data.firstName;
+  formDetail.lastName = data.lastName;
+  formDetail.position = data.position;
+  formDetail.oc = data.rootShortName;
+  formDetail.positionLevel = data.posLevelName;
+  formDetail.posNo = data.posNo ?? "";
+  formDetail.birthDate = data.birthDate;
+  // formDetail.govAge = data.govAge; // ยังไม่มี
+  formDetail.salary = data.salary;
+  formDetail.posExecutive = data.posExecutiveName;
+  formDetail.positionArea = data.positionArea;
+  await fetchDataAllDetail();
+
+  emit("update:formDeital", formDetail);
 }
 
 async function fetchDataAllDetail() {
diff --git a/src/modules/07_appealComplain/views/Add.vue b/src/modules/07_appealComplain/views/Add.vue
index 10e55f5..dba72b8 100644
--- a/src/modules/07_appealComplain/views/Add.vue
+++ b/src/modules/07_appealComplain/views/Add.vue
@@ -6,15 +6,20 @@ import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 
 import Form from "@/modules/07_appealComplain/views/Form.vue";
+
+import type { DataProfile } from "@/interface/Main";
 import type {
   FormProfile,
   FormDataType,
 } from "@/modules/07_appealComplain/interface/response/mainType";
+
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const storeData = useDataStore();
 
 const { findOrgName, success, messageError, showLoader, hideLoader } = mixin;
 
@@ -27,24 +32,28 @@ const formProfile = reactive<FormProfile>({
 });
 
 /** ดึงข้อมูลจาก keycloak*/
-function getProFile() {
-  showLoader();
-  http
-    .get(config.API.profilePosition())
-    .then((res) => {
-      const data = res.data.result;
-      formProfile.profileId = data.profileId;
-      formProfile.fullname = `${data.prefix}${data.firstName} ${data.lastName}`;
-      formProfile.citizenId = data.citizenId;
-      formProfile.oc = findOrgName(data);
-      formProfile.position = data.position;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+async function getProFile() {
+  try {
+    showLoader();
+    if (!storeData.dataprofilePosition) {
+      const res = await http.get(config.API.profilePosition());
+      await updateFormProfile(res.data.result);
+    } else {
+      await updateFormProfile(storeData.dataprofilePosition);
+    }
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
+}
+
+async function updateFormProfile(data: DataProfile) {
+  formProfile.profileId = data.profileId;
+  formProfile.fullname = `${data.prefix}${data.firstName} ${data.lastName}`;
+  formProfile.citizenId = data.citizenId;
+  formProfile.oc = findOrgName(data);
+  formProfile.position = data.position;
 }
 
 /**

From 8168ede251386e50a30efefad5e95831e5df5c25 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 30 Jul 2025 14:26:36 +0700
Subject: [PATCH 158/195] SkeketonTable

---
 src/components/SkeletonTable.vue | 36 ++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/SkeletonTable.vue

diff --git a/src/components/SkeletonTable.vue b/src/components/SkeletonTable.vue
new file mode 100644
index 0000000..652d9f4
--- /dev/null
+++ b/src/components/SkeletonTable.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+const columns = defineModel<QTableProps["columns"]>("columns", {
+  required: true,
+});
+
+/** จำนวนคอลัมน์ */
+const skeletonColumns = computed(() => columns.value?.length || 5);
+
+/** ตัวอย่างการใช้งาน */
+/// <SkeletonTable v-if="isLoading" :columns="columns" />
+</script>
+
+<template>
+  <q-markup-table flat bordered>
+    <thead>
+      <tr>
+        <th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
+          <q-skeleton type="text" />
+        </th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
+        <td v-for="(col, idx) in skeletonColumns" :key="idx">
+          <q-skeleton type="text" width="80px" />
+        </td>
+      </tr>
+    </tbody>
+  </q-markup-table>
+</template>

From b751615f81af50326eb0e0230c4a7a2ac07317b3 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 30 Jul 2025 17:29:11 +0700
Subject: [PATCH 159/195] =?UTF-8?q?fix:=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=E0=B9=80=E0=B8=81=E0=B9=87=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=20profil?=
 =?UTF-8?q?e=20kpi=20=E0=B8=88=E0=B8=B2=E0=B8=81=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=20main?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_KPI/store.ts | 2 +-
 src/views/MainLayout.vue    | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index f9fc0a0..06fc5a7 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -19,7 +19,7 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
   const work = ref<boolean>(false);
   const tabMain = ref<string>("");
   const dataProfile = ref<DataProfile>({
-    profileId: null,
+    profileId: "",
     prefix: "",
     rank: "",
     firstName: "",
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 534beb3..a5aa38f 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -16,6 +16,7 @@ import {
 } from "@/plugins/auth";
 
 import { useDataStore } from "@/stores/data";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 // landing page config url
 const configParam = {
@@ -27,6 +28,7 @@ const router = useRouter();
 
 const $q = useQuasar();
 const dataStore = useDataStore();
+const dataStoreKpi = useKpiDataStore();
 
 const mixin = useCounterMixin();
 const {
@@ -65,6 +67,7 @@ async function checkUser() {
     .then(async (res) => {
       const data = await res.data.result;
       await dataStore.getData(data);
+      dataStoreKpi.dataProfile = data;
       await dataStore.getProFileType();
       if (data.avatarName) {
         await getImg(data.profileId, data.avatarName);

From 417a6e5618fa0ffcca4c8a5f835cc17f12bf5a8c Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 30 Jul 2025 17:46:23 +0700
Subject: [PATCH 160/195] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A5=E0=B8=B1=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_KPI/store.ts       | 2 +-
 src/modules/08_KPI/views/form.vue | 2 +-
 src/views/MainLayout.vue          | 3 ---
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index 06fc5a7..f9fc0a0 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -19,7 +19,7 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
   const work = ref<boolean>(false);
   const tabMain = ref<string>("");
   const dataProfile = ref<DataProfile>({
-    profileId: "",
+    profileId: null,
     prefix: "",
     rank: "",
     firstName: "",
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index b29ab9c..cb8cd2a 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -478,7 +478,7 @@ async function fetchProfileEvaluator(id: string) {
 
 /** ดึงข้อมูลโปรไฟล์ */
 async function getProfile() {
-  if (store.dataProfile.profileId) {
+  if (!store.dataProfile.profileId) {
     await http
       .get(config.API.profilePosition())
       .then(async (res) => {
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index a5aa38f..534beb3 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -16,7 +16,6 @@ import {
 } from "@/plugins/auth";
 
 import { useDataStore } from "@/stores/data";
-import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 // landing page config url
 const configParam = {
@@ -28,7 +27,6 @@ const router = useRouter();
 
 const $q = useQuasar();
 const dataStore = useDataStore();
-const dataStoreKpi = useKpiDataStore();
 
 const mixin = useCounterMixin();
 const {
@@ -67,7 +65,6 @@ async function checkUser() {
     .then(async (res) => {
       const data = await res.data.result;
       await dataStore.getData(data);
-      dataStoreKpi.dataProfile = data;
       await dataStore.getProFileType();
       if (data.avatarName) {
         await getImg(data.profileId, data.avatarName);

From 1698d86024844b0510c74ea3907f5e8f9a6334c9 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 31 Jul 2025 09:49:22 +0700
Subject: [PATCH 161/195] =?UTF-8?q?fixing=20await=20&=20clear=20code=20=20?=
 =?UTF-8?q?=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=81=E0=B9=87=E0=B8=9A?=
 =?UTF-8?q?=20dataProfile=20=E0=B8=95=E0=B8=AD=E0=B8=99=20get=20profile=20?=
 =?UTF-8?q?main=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_KPI/store.ts       | 80 +++++++++++++++++++++----------
 src/modules/08_KPI/views/form.vue |  6 +--
 src/views/MainLayout.vue          | 31 ++++++------
 3 files changed, 72 insertions(+), 45 deletions(-)

diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index f9fc0a0..d18861d 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -19,35 +19,63 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
   const work = ref<boolean>(false);
   const tabMain = ref<string>("");
   const dataProfile = ref<DataProfile>({
-    profileId: null,
-    prefix: "",
-    rank: "",
-    firstName: "",
-    lastName: "",
+    amountSpecial: 0,
+    avatar: "",
+    avatarName: "",
+    birthDate: "",
+    child1: "",
+    child1DnaId: "",
+    child1Id: "",
+    child1ShortName: "",
+    child2: "",
+    child2DnaId: "",
+    child2Id: "",
+    child2ShortName: "",
+    child3: "",
+    child3DnaId: "",
+    child3Id: "",
+    child3ShortName: "",
+    child4: "",
+    child4DnaId: "",
+    child4Id: "",
+    child4ShortName: "",
     citizenId: "",
-    position: "",
-    posMaster: null,
-    posLevelName: null,
-    posLevelRank: null,
-    posLevelId: null,
-    posTypeName: null,
-    posTypeRank: null,
-    posTypeId: null,
-    posExecutiveName: "",
-    posExecutivePriority: null,
+    dateRetireLaw: "",
+    dateStart: "",
+    firstName: "",
+    isDirector: false,
+    isProbation: false,
+    keycloak: "",
+    lastName: "",
+    leaveDate: null,
+    node: 0,
+    nodeDnaId: "",
+    nodeId: "",
+    nodeShortName: "",
     posExecutiveId: null,
-    rootId: null,
+    posExecutiveName: null,
+    posExecutivePriority: null,
+    posLevelId: "",
+    posLevelName: "",
+    posLevelRank: 0,
+    posMaster: 0,
+    posMasterNo: 0,
+    posNo: "",
+    posTypeId: "",
+    posTypeName: "",
+    posTypeRank: 0,
+    position: "",
+    positionArea: null,
+    positionExecutiveField: null,
+    prefix: "",
+    profileId: "",
+    profileType: "",
+    rank: null,
     root: "",
-    child1Id: null,
-    child1: null,
-    child2Id: null,
-    child2: null,
-    child3Id: null,
-    child3: null,
-    child4Id: null,
-    child4: null,
-    node: null,
-    nodeId: null,
+    rootDnaId: "",
+    rootId: "",
+    rootShortName: "",
+    salary: 0,
   });
 
   const dataEvaluation = ref<any>({
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index cb8cd2a..9bfd689 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -481,9 +481,9 @@ async function getProfile() {
   if (!store.dataProfile.profileId) {
     await http
       .get(config.API.profilePosition())
-      .then(async (res) => {
-        const data = await res.data.result;
-        store.dataProfile = await data;
+      .then((res) => {
+        const data = res.data.result;
+        store.dataProfile = data;
       })
       .catch((e) => {
         messageError($q, e);
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 534beb3..fdbb1ef 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -16,6 +16,7 @@ import {
 } from "@/plugins/auth";
 
 import { useDataStore } from "@/stores/data";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 // landing page config url
 const configParam = {
@@ -27,6 +28,7 @@ const router = useRouter();
 
 const $q = useQuasar();
 const dataStore = useDataStore();
+const kpiDataStore = useKpiDataStore();
 
 const mixin = useCounterMixin();
 const {
@@ -44,15 +46,13 @@ const notiList = ref<any>([]);
 const notiTrigger = ref(false);
 const currentRouteName = router.currentRoute.value.name;
 const tab = ref<any>(currentRouteName);
-const link = ref<string>("");
 const isSsoToken = ref(false);
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  await checkUser();
-  await fetchTotolNotificate();
+  await Promise.all([checkUser(), fetchTotolNotificate()]);
   const user = await tokenParsed();
   const SSO_TOKEN = await getCookie("SSO");
   isSsoToken.value = SSO_TOKEN === "y" ? true : false;
@@ -63,9 +63,10 @@ async function checkUser() {
   await http
     .get(config.API.profilePosition())
     .then(async (res) => {
-      const data = await res.data.result;
+      const data = res.data.result;
       await dataStore.getData(data);
       await dataStore.getProFileType();
+      kpiDataStore.dataProfile = data; // Set dataProfile in kpiDataStore
       if (data.avatarName) {
         await getImg(data.profileId, data.avatarName);
       } else {
@@ -77,17 +78,19 @@ async function checkUser() {
         component: CustomComponent,
         componentProps: {
           title: "ข้อความแจ้งเตือน",
-          message: err.response.data.message,
+          message:
+            err.response?.data?.message || "เกิดข้อผิดพลาดที่ไม่ทราบสาเหตุ",
           icon: "warning",
           color: "red",
           onlycancel: true,
         },
-      }).onCancel(async () => {
+      }).onCancel(() => {
         showLoader();
-        await logout();
-        setTimeout(() => {
-          hideLoader();
-        }, 1000);
+        logout().then(() => {
+          setTimeout(() => {
+            hideLoader();
+          }, 1000);
+        });
       });
     });
 }
@@ -97,11 +100,7 @@ function getImg(id: string, pathName: string) {
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
     .then((res) => {
       dataStore.profileImg = res.data.downloadUrl;
-    })
-    .catch((e) => {
-      // messageError($q, e);
-    })
-    .finally(() => {});
+    });
 }
 
 const totalNoti = ref<number>(0);
@@ -160,7 +159,7 @@ const doLogout = () => {
     async () => {
       await http.post(config.API.keycloakLogSSO, { text: "ออกจากระบบ" });
       // authen with client
-      await logoutSSO();
+      logoutSSO();
     },
     "ยืนยันการออกจากระบบ",
     "ต้องการออกจากระบบใช่หรือไม่"

From 8a13dbe06e789fc3a9fbeb5343f53bb432a80c3d Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 1 Aug 2025 09:50:48 +0700
Subject: [PATCH 162/195] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=AA=E0=B9=88=E0=B8=87=20filter=20year=20in=20kpi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_KPI/views/main.vue          | 1 +
 src/modules/08_KPI/views/mainEvaluator.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index fd8079b..93fbd7c 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -206,6 +206,7 @@ async function fetchList() {
     kpiPeriodId: round.value,
     status: formQuery.status === "" ? undefined : formQuery.status,
     results: formQuery.results === "" ? undefined : formQuery.results,
+    year: year.value,
   };
   await http
     .get(config.API.kpiEvaluation, {
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
index 7b76576..24692d7 100644
--- a/src/modules/08_KPI/views/mainEvaluator.vue
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -133,6 +133,7 @@ async function fetchList() {
     pageSize: store.formQuery.pageSize,
     kpiPeriodId: store.formQuery.round,
     keyword: store.formQuery.keyword,
+    year: store.yearRound,
     status:
       store.tabMainevaluator === "2"
         ? "NEW"

From 2050ac6b9e21141e8848bfb93b36964698333a83 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 1 Aug 2025 10:49:29 +0700
Subject: [PATCH 163/195] fix filter kpi

---
 src/modules/08_KPI/views/main.vue          |  9 ++++--
 src/modules/08_KPI/views/mainEvaluator.vue | 34 ++++++++++++----------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 93fbd7c..6a62d27 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -180,8 +180,13 @@ async function fetchRoundOption(type: string) {
       }));
       if (type === "main") {
         roundMainOp.value = list;
-        round.value = "";
-        await fetchList();
+        if (data.length === 0) {
+          round.value = "";
+          rows.value = [];
+        } else {
+          round.value = roundMainOp.value[0].id;
+          await fetchList();
+        }
       } else {
         roundDialgOp.value = list;
         formRound.kpiPeriodId = { id: "", name: "", isClosed: false };
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
index 24692d7..f74d535 100644
--- a/src/modules/08_KPI/views/mainEvaluator.vue
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -93,7 +93,7 @@ const maxPage = ref<number>(1);
  * ดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
  * @param type
  */
-async function fetchRoundOption(type: boolean = false) {
+async function fetchRoundOption() {
   showLoader();
   await http
     .get(
@@ -101,21 +101,25 @@ async function fetchRoundOption(type: boolean = false) {
         `?page=${1}&pageSize=${10}&keyword=${""}&year=${store.yearRound}`
     )
     .then(async (res) => {
-      const data = await res.data.result.data;
-      const list = data.map((e: ResRound) => ({
-        id: e.id,
-        name:
-          e.durationKPI === "OCT"
-            ? "รอบที่ 2 ตุลาคม"
-            : e.durationKPI === "APR"
-            ? "รอบที่ 1 เมษายน"
-            : "",
-      }));
+      const data = res.data.result.data;
+      const list =
+        data.map((e: ResRound) => ({
+          id: e.id,
+          name:
+            e.durationKPI === "OCT"
+              ? "รอบที่ 2 ตุลาคม"
+              : e.durationKPI === "APR"
+              ? "รอบที่ 1 เมษายน"
+              : "",
+        })) ?? [];
       roundOp.value = list;
-      if (type) {
+      if (data.length === 0) {
         store.formQuery.round = "";
+        dataListMain.value = [];
+      } else {
+        store.formQuery.round = roundOp.value[0].id;
+        await fetchList();
       }
-      await fetchList();
     })
     .catch((err) => {
       messageError($q, err);
@@ -131,7 +135,7 @@ async function fetchList() {
   const body = {
     page: store.formQuery.page,
     pageSize: store.formQuery.pageSize,
-    kpiPeriodId: store.formQuery.round,
+    kpiPeriodId: store.formQuery.round ?? "",
     keyword: store.formQuery.keyword,
     year: store.yearRound,
     status:
@@ -226,7 +230,7 @@ onMounted(async () => {
               year-picker
               :enableTimePicker="false"
               @update:model-value="
-                (store.formQuery.page = 1), fetchRoundOption(true)
+                (store.formQuery.page = 1), fetchRoundOption()
               "
             >
               <template #year="{ year }">{{ year + 543 }}</template>

From 4a8874f385ac1a8c82d002d54b8e887f91effdac Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 5 Aug 2025 13:39:36 +0700
Subject: [PATCH 164/195] Skeleton Workflow

---
 src/components/Workflow/Main.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/Workflow/Main.vue b/src/components/Workflow/Main.vue
index 6c5f5b4..209a9c2 100644
--- a/src/components/Workflow/Main.vue
+++ b/src/components/Workflow/Main.vue
@@ -10,7 +10,6 @@ import type { Permission } from "@/components/Workflow/interface/index/Main";
 import type { DataListState } from "@/components/Workflow/interface/response/Main";
 
 import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
-import Keycloak from "keycloak-js";
 
 const $q = useQuasar();
 const { dialogConfirm, showLoader, hideLoader, messageError } =
@@ -31,6 +30,7 @@ const stateId = ref<string>(""); //id state ปัจุบัน
 const state = ref<number>(1); //state ปัจุบัน
 const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
 const KeycloakId = ref<string>("");
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
 
 const permission = ref<Permission>({
   isChangeState: false, //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
@@ -48,6 +48,7 @@ const itemState = ref<DataListState[]>([]);
 
 /** ฟังก์ชันเรียกข้อมูล Workflow ที่อยู่ปัจุบัน*/
 async function fetchCheckState() {
+  isLoading.value = true;
   await http
     .post(config.API.workflow + `check-user-now`, {
       refId: id,
@@ -74,6 +75,9 @@ async function fetchCheckState() {
     })
     .catch(() => {
       isPermission.value = false;
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -129,7 +133,22 @@ defineExpose({
       <div class="q-pl-sm text-weight-bold text-dark">สถานะการดำเนินเรื่อง</div>
     </div>
     <div class="col-12"><q-separator /></div>
-    <q-card-section>
+    <q-card-section class="col-12 q-px-lg q-py-md" v-if="isLoading">
+      <q-timeline color="primary">
+        <q-timeline-entry
+          v-for="(step, index) in 4"
+          :key="index"
+          :icon="`mdi-numeric-${index + 1}`"
+          color="grey-4"
+        >
+          <template #title>
+            <q-skeleton type="rect" width="150px" height="20px" />
+          </template>
+        </q-timeline-entry>
+      </q-timeline>
+    </q-card-section>
+
+    <q-card-section v-else>
       <div class="q-px-lg q-py-md">
         <q-timeline color="primary">
           <q-timeline-entry

From 016132096e09f99ee171b01feb7c6065a7b55ec0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 5 Aug 2025 15:15:49 +0700
Subject: [PATCH 165/195] fix loading Skeleton

---
 src/components/SkeletonTable.vue              |   64 +-
 src/modules/01_dashboard/views/Dashboard.vue  |   59 +-
 src/modules/05_leave/components/Calendar.vue  |   32 +-
 .../05_leave/components/DialogDetail.vue      |   26 +-
 src/modules/05_leave/components/ListView.vue  |   27 +-
 src/modules/05_leave/components/Table.vue     |   12 +-
 src/modules/05_leave/views/Main.vue           |   12 +-
 .../components/EvaluateStepMain.vue           |   16 +-
 .../06_evaluate/components/ExpertPage.vue     |   39 +-
 .../components/ExpertPageDetail.vue           | 1626 ++++++++---------
 .../06_evaluate/components/PopupPosition.vue  |   19 +-
 .../components/TableListEvaluate.vue          |    7 +
 .../06_evaluate/components/step/step1.vue     |   12 +-
 .../06_evaluate/components/step/step2.vue     |  583 +-----
 .../06_evaluate/components/step/step3.vue     |   24 +-
 .../06_evaluate/components/step/step4.vue     |   22 +-
 .../06_evaluate/components/step/step5.vue     |   35 +-
 .../06_evaluate/components/step/step6.vue     |   93 +-
 .../06_evaluate/components/step/step7.vue     |   45 +-
 .../06_evaluate/components/step/step8.vue     |   19 +-
 .../components/viewstep/popupHistory.vue      |   42 +-
 .../components/viewstep/tableStep1.vue        |    8 +
 .../components/viewstep/viewStep1.vue         |  263 ++-
 .../06_evaluate/views/EvaluateMain.vue        |    9 +-
 .../01_Information/01_Information.vue         |   93 +-
 .../01_Information/02_ChangeName.vue          |  329 ++--
 .../10_registry/01_Information/03_Address.vue |  128 +-
 .../10_registry/01_Information/04_Family.vue  |   97 +-
 .../01_Information/05_Educations.vue          |  119 +-
 .../10_registry/01_Information/06_Ability.vue |   77 +-
 .../02_Government/01_Government.vue           |   67 +-
 .../02_Government/02_Discipline.vue           |   91 +-
 .../10_registry/02_Government/03_Leave.vue    |   89 +-
 .../10_registry/02_Government/04_Duty.vue     |   99 +-
 .../02_Government/05_Actposition.vue          |   89 +-
 .../02_Government/06_Assistance.vue           |   81 +-
 .../10_registry/02_Government/07_Position.vue |  189 +-
 .../10_registry/03_Salary/01_Salary.vue       |  132 +-
 .../10_registry/03_Salary/02_Nopaid.vue       |   98 +-
 .../04_Achievement/01_Certificate.vue         |   98 +-
 .../04_Achievement/02_Training.vue            |   77 +-
 .../04_Achievement/03_Insignia.vue            |   98 +-
 .../10_registry/04_Achievement/04_Honor.vue   |   97 +-
 .../04_Achievement/05_Assessments.vue         |   85 +-
 .../04_Achievement/06_DevelopmentPlan.vue     |   80 +-
 src/modules/10_registry/05_Other/01_Other.vue |   67 +-
 src/modules/10_registry/05_Other/02_File.vue  |   46 +-
 .../10_registry/05_Other/03_FileOther.vue     |   38 +-
 .../10_registry/Dialog/DialogHistory.vue      |  317 ++--
 .../components/DialogAddRequestEdit.vue       |   55 +-
 .../components/skeleton/Address.vue           |   40 +
 .../components/skeleton/Family.vue            |  103 ++
 .../components/skeleton/Government.vue        |  110 ++
 .../10_registry/tabs/01_information.vue       |   12 +-
 src/modules/10_registry/views/main.vue        |  140 +-
 .../10_registry/views/requestEditDetail.vue   |   59 +-
 .../10_registry/views/requestEditMain.vue     |  163 +-
 src/modules/12_organization/views/main.vue    |   65 +-
 src/modules/13_portfolio/views/Add.vue        |  145 +-
 src/modules/13_portfolio/views/Main.vue       |   42 +-
 src/modules/14_IDP/views/main.vue             |   57 +-
 src/modules/14_IDP/views/registry.vue         |   45 +-
 src/stores/data.ts                            |    9 +
 63 files changed, 3468 insertions(+), 3452 deletions(-)
 create mode 100644 src/modules/10_registry/components/skeleton/Address.vue
 create mode 100644 src/modules/10_registry/components/skeleton/Family.vue
 create mode 100644 src/modules/10_registry/components/skeleton/Government.vue

diff --git a/src/components/SkeletonTable.vue b/src/components/SkeletonTable.vue
index 652d9f4..ea9da21 100644
--- a/src/components/SkeletonTable.vue
+++ b/src/components/SkeletonTable.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -8,29 +8,55 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
   required: true,
 });
 
-/** จำนวนคอลัมน์ */
-const skeletonColumns = computed(() => columns.value?.length || 5);
+const rows = ref<Array<{ id: string; name: string }>>([
+  {
+    id: "",
+    name: "",
+  },
+]);
 
 /** ตัวอย่างการใช้งาน */
 /// <SkeletonTable v-if="isLoading" :columns="columns" />
 </script>
 
 <template>
-  <q-markup-table flat bordered>
-    <thead>
-      <tr>
-        <th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
-          <q-skeleton type="text" />
-        </th>
-      </tr>
-    </thead>
+  <d-table
+    flat
+    bordered
+    :columns="columns"
+    :rows="rows"
+    row-key="id"
+    hide-pagination
+  >
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div>
+            <q-skeleton type="text" width="80px" />
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
 
-    <tbody>
-      <tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
-        <td v-for="(col, idx) in skeletonColumns" :key="idx">
-          <q-skeleton type="text" width="80px" />
-        </td>
-      </tr>
-    </tbody>
-  </q-markup-table>
+    <template v-slot:item="props">
+      <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list dense class="q-mt-lg relative-position">
+            <q-item v-for="col in props.cols" :key="col.name">
+              <q-item-section>
+                <q-item-label class="text-grey-6 text-weight-medium">{{
+                  col.label
+                }}</q-item-label>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label class="text-dark text-weight-medium">
+                  <q-skeleton type="text" />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
 </template>
diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index e3b32af..9dec0e0 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -26,8 +26,9 @@ const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 const fullname = ref<string>(""); // ชื่อผู้ใช้
 const inboxList = ref<InboxDetail[]>([]); // รายการกล่องข้อความ
 const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
-// รายการเมนูหลักของระบบ
+const isLoadingInbox = ref<boolean>(true); // สถานะการโหลดกล่องข้อความ
 
+// รายการเมนูหลักของระบบ
 const filteredItems = computed(() => {
   const isOfficer = dataStore.officerType === "OFFICER";
   const conditions: Record<string, boolean> = {
@@ -148,7 +149,10 @@ const items = ref<MenuMainList[]>([
  * @param index หน้าที่โหลดข้อมูล
  */
 const fetchlistInbox = async (index: number) => {
-  index === 1 && showLoader();
+  if (index === 1) {
+    isLoadingInbox.value = true; // เริ่มโหลดข้อมูลกล่องข้อความ
+  }
+
   index != 0 &&
     (await http
       .get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
@@ -173,7 +177,7 @@ const fetchlistInbox = async (index: number) => {
         }
       })
       .finally(() => {
-        hideLoader();
+        isLoadingInbox.value = false;
       }));
 };
 
@@ -249,11 +253,17 @@ const totalInbox = ref<number>(0); // จำนวนข้อความทั
  */
 async function onLoad(index: number, done: Function) {
   const num = index === 1 ? 0 : index++;
-  if (inboxList.value.length < totalInbox.value) {
-    setTimeout(() => {
-      fetchlistInbox(num);
-      done();
-    }, 3000);
+  try {
+    // ถ้าโหลดครบแล้ว ให้หยุด infinite scroll
+    if (inboxList.value.length >= totalInbox.value) {
+      done(true);
+      return;
+    }
+
+    await fetchlistInbox(num);
+    done();
+  } catch (error) {
+    done(true);
   }
 }
 
@@ -284,7 +294,16 @@ onMounted(async () => {
           v-for="(item, j) in filteredItems"
           :key="j"
         >
-          <q-card bordered @click="goToPage(item.path)" class="noactive col-12">
+          <q-card v-if="dataStore.isLoadingMenu" bordered class="col-12">
+            <q-skeleton width="100%" height="180px" />
+          </q-card>
+
+          <q-card
+            v-else
+            bordered
+            @click="goToPage(item.path)"
+            class="noactive col-12"
+          >
             <div class="col-12">
               <q-avatar
                 :color="item.color"
@@ -323,12 +342,24 @@ onMounted(async () => {
             กล่องข้อความ
           </div>
           <q-space />
-          <div class="text-grey-5" style="font-size: 12px">
+          <div v-if="isLoadingInbox">
+            <q-skeleton type="text" width="80px" />
+          </div>
+          <div v-else class="text-grey-5" style="font-size: 12px">
             ทั้งหมด {{ totalInbox }} ข้อความ
           </div>
         </div>
+
         <div
-          v-if="totalInbox != 0"
+          class="q-pa-sm"
+          v-if="isLoadingInbox"
+          style="height: calc(100% - 60px)"
+        >
+          <q-skeleton height="100%" square />
+        </div>
+
+        <div
+          v-if="totalInbox != 0 && !isLoadingInbox"
           ref="scrollTargetRef"
           style="max-height: 90%; overflow: auto"
         >
@@ -400,7 +431,11 @@ onMounted(async () => {
           </q-infinite-scroll>
         </div>
 
-        <q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
+        <q-banner
+          rounded
+          class="bg-amber-1 text-center q-mx-sm"
+          v-else-if="totalInbox === 0 && !isLoadingInbox"
+        >
           <div class="text-yellow-10">
             <q-icon
               name="mdi-alert-box"
diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
index 7150f73..e92bb73 100644
--- a/src/modules/05_leave/components/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -26,7 +26,7 @@ import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
 const $q = useQuasar();
 const store = useLeaveStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
+const { messageError, monthYear2Thai } = mixin;
 const emit = defineEmits(["update:dateYear"]);
 
 const mainData = ref<DataCalendar[]>([]);
@@ -37,10 +37,10 @@ const leaveId = ref<string>("");
 /** filter calendar left */
 const filterLists = ref<any>([]);
 const filterVal = ref<any>([keycloakId.value]);
+const isLoading = ref<boolean>(false);
+const isLoadingHoliday = ref<boolean>(false);
 
-/**
- * Option ของปฏิทิน
- */
+/** Option ของปฏิทิน */
 const fullCalendar = ref<any>(); //ref calendar
 const calendarOptions = ref<any>({
   plugins: [
@@ -76,6 +76,7 @@ const dateMonth = ref<DataDateMonthObject>({
 
 /** function เรียกข้อมูล calendar*/
 async function fetchDataCalendar() {
+  isLoading.value = true;
   await http
     .post(config.API.leaveCalendar(), {
       year: dateMonth.value.year,
@@ -119,6 +120,9 @@ async function fetchDataCalendar() {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -126,6 +130,7 @@ async function fetchDataCalendar() {
  * fetch วันหยุดในปฏิทิน
  */
 async function fetchData() {
+  isLoadingHoliday.value = true;
   await http
     .get(
       config.API.listHolidayHistoryYearMonth(
@@ -154,6 +159,9 @@ async function fetchData() {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      isLoadingHoliday.value = false;
     });
 }
 
@@ -193,7 +201,6 @@ async function updateMonth() {
   } catch (error) {
     messageError($q, error);
   } finally {
-    hideLoader();
   }
 }
 
@@ -215,7 +222,6 @@ async function onClickClose() {
 watch(
   () => filterVal.value,
   async () => {
-    showLoader();
     const eventData = filterVal.value.map((item: any) => {
       return mainData.value
         .filter(
@@ -236,14 +242,13 @@ watch(
     const allEventData = [].concat(...eventData);
     calendarOptions.value.events = allEventData;
     await fetchData();
-    hideLoader();
   }
 );
 
 /**Hook */
 onMounted(async () => {
   try {
-    showLoader();
+    isLoading.value = true;
     // เรียกข้อมูล keycloakId
     const user = await tokenParsed();
     keycloakId.value = await (user ? user.sub : "");
@@ -253,7 +258,7 @@ onMounted(async () => {
   } catch (error) {
     messageError($q, error);
   } finally {
-    hideLoader();
+    isLoading.value = false;
   }
 });
 </script>
@@ -262,7 +267,8 @@ onMounted(async () => {
   <div class="row">
     <div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
       <q-card class="col-12" flat bordered>
-        <q-scroll-area style="height: 38vw">
+        <q-skeleton height="100%" square v-if="isLoading" />
+        <q-scroll-area style="height: 38vw" v-else>
           <div class="q-gutter-sm col-12">
             <q-list class="rounded-borders q-pt-sm" dense>
               <q-item
@@ -333,7 +339,13 @@ onMounted(async () => {
             </q-card>
 
             <div class="main-content">
+              <q-skeleton
+                height="100%"
+                square
+                v-if="isLoading || isLoadingHoliday"
+              />
               <FullCalendar
+                v-else
                 ref="fullCalendar"
                 class="demo-app-calendar"
                 :options="calendarOptions"
diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 1a37468..8c04469 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -164,6 +164,7 @@ const formDataCancle = reactive<FromCancelDetail>({
   leaveRangeEnd: "",
   leaveDirectorComment: "",
 });
+const isLoading = ref<boolean>(false);
 
 /** form ขอยกเลิก*/
 const formDelete = reactive<FormDelete>({
@@ -187,7 +188,7 @@ const formDeleteRef: FormDeleteRef = {
  * @param id การลา
  */
 async function fetchDataDetail(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.leaveUserId(id), {})
     .then((res) => {
@@ -280,7 +281,7 @@ async function fetchDataDetail(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -308,10 +309,7 @@ function checkLeaveType(leaveTypeId: string) {
       checkForm.value = "FormHajj";
     } else if (type === "LV-007") {
       checkForm.value = "FormCheckSelect";
-    } else if (
-      type === "LV-008" &&
-      formData.leaveSubTypeName === "ศึกษาต่อ"
-    ) {
+    } else if (type === "LV-008" && formData.leaveSubTypeName === "ศึกษาต่อ") {
       checkForm.value = "FormStudy";
     } else if (
       (type === "LV-008" && formData.leaveSubTypeName === "ฝึกอบรม") ||
@@ -334,7 +332,7 @@ function checkLeaveType(leaveTypeId: string) {
  * @param id ยกเลิกการลา
  */
 async function fetchDataCancelDetail(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.leaveCancelById(id))
     .then((res) => {
@@ -362,7 +360,7 @@ async function fetchDataCancelDetail(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -401,7 +399,8 @@ async function onSubmit() {
   formData.append("doc", formDelete.doc);
   await http
     .post(config.API.leaveCancelById(id), formData)
-    .then(() => {
+    .then(async () => {
+      await props.fetchDataTable?.();
       success($q, "บันทึกข้อมูลสำเร็จ");
       props.onClickClose?.();
     })
@@ -409,7 +408,6 @@ async function onSubmit() {
       messageError($q, err);
     })
     .finally(() => {
-      props.fetchDataTable?.();
       hideLoader();
     });
 }
@@ -445,7 +443,9 @@ watch(
       <q-separator />
 
       <q-card-section class="scroll" style="max-height: 60vh">
-        <div class="row">
+        <q-skeleton height="400px" square v-if="isLoading" />
+
+        <div class="row" v-else>
           <div
             flat
             :class="
@@ -571,6 +571,7 @@ watch(
           label="ยืนยัน"
           unelevated
           color="secondary"
+          :loading="isLoading"
           @click="onClickSave"
         />
       </q-card-section>
@@ -584,7 +585,8 @@ watch(
 
       <q-separator />
       <q-card-section class="q-p-md row q-gutter-y-md">
-        <div flat class="col-12">
+        <q-skeleton height="400px" width="100%" square v-if="isLoading" />
+        <div flat class="col-12" v-else>
           <div class="col-12 q-col-gutter-sm row items-center"></div>
           <FormCancel :data="formDataCancle" />
         </div>
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index 8fbb085..3dbefca 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -30,6 +30,7 @@ const year = ref<number>(new Date().getFullYear());
 const type = ref<string>("00000000-0000-0000-0000-000000000000");
 const status = ref<string>("ALL");
 const filter = ref<string>("");
+const isLoading = ref<boolean>(false);
 
 /** pagination*/
 const maxPage = ref<number>(1);
@@ -38,7 +39,7 @@ const pageSize = ref<number>(10);
 const total = ref<number>(0);
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
-  showLoader();
+  isLoading.value = true;
   const body = {
     year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
     type: LeaveData.type, //*Id ประเภทการลา
@@ -59,7 +60,7 @@ async function fetchDataTable() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -128,10 +129,10 @@ async function onClickClose() {
  */
 async function updateFilterTable(y: number, t: string, s: string, k: string) {
   if (t && s) {
-    year.value = await y;
-    type.value = await t;
-    status.value = await s;
-    filter.value = await k;
+    year.value = y;
+    type.value = t;
+    status.value = s;
+    filter.value = k;
     await fetchDataTable();
   }
 }
@@ -142,7 +143,7 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
  * @param ps แถวต่อหน้า
  */
 async function updatePagination(p: number, ps: number) {
-  (page.value = await p), (pageSize.value = await ps);
+  (page.value = p), (pageSize.value = ps);
   await fetchDataTable();
 }
 
@@ -168,15 +169,8 @@ function convert(val: any) {
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  try {
-    showLoader();
-    await fectOptionType();
-    await fetchDataTable();
-  } catch (error) {
-    messageError($q, error);
-  } finally {
-    hideLoader();
-  }
+  await fectOptionType();
+  await fetchDataTable();
 });
 </script>
 <template>
@@ -194,6 +188,7 @@ onMounted(async () => {
     :pageSize="pageSize"
     :leaveType="leaveType"
     :total="total"
+    :isloadingData="isLoading"
   >
     <template #columns="props">
       <q-tr :props="props" class="cursor-pointer">
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index ad36ea9..7e9357a 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -3,6 +3,7 @@ import { ref, useAttrs, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useLeaveStore } from "@/modules/05_leave/store";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
@@ -15,7 +16,6 @@ const props = defineProps({
   pass: Number,
   notpass: Number,
   total: Number,
-
   name: String,
   icon: String,
   inputvisible: Array,
@@ -34,6 +34,10 @@ const props = defineProps({
     type: Object,
     require: true,
   },
+  isloadingData: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 /**
@@ -48,9 +52,7 @@ const emit = defineEmits([
 
 const table = ref<any>(null);
 
-/**
- * ตั้งค่า pagination
- */
+/** ตั้งค่า pagination*/
 const currentPage = ref<number>(1);
 const pagination = ref({
   sortBy: "dateSendLeave",
@@ -235,7 +237,9 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
     </q-card>
   </div>
   <div>
+    <SkeletonTable v-if="isloadingData" :columns="leaveStore.columns" />
     <d-table
+      v-else
       ref="table"
       flat
       bordered
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 6628a59..4e36478 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -118,11 +118,11 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const isloading = ref<boolean>(false);
+const isloadingSummary = ref<boolean>(false);
 
 /** function เรียกข้อมูลตารางสถิติการลา*/
 async function fetchStatsTable() {
-  isloading.value = true;
+  isloadingSummary.value = true;
   await http
     .get(config.API.leaveStats())
     .then((res) => {
@@ -171,11 +171,12 @@ async function fetchStatsTable() {
         leaveCountReject: e.leaveCountReject,
         leaveCountDelete: e.leaveCountDelete,
       }));
-      isloading.value = false;
     })
     .catch((err) => {
       messageError($q, err);
-      isloading.value = true;
+    })
+    .finally(() => {
+      isloadingSummary.value = false;
     });
 }
 
@@ -215,7 +216,7 @@ onMounted(async () => {
     <div class="col-xs-12 col-sm-12 col-md-11 row">
       <!-- สถิติการลา -->
       <div class="col-12 row q-pb-sm">
-        <q-card bordered class="col-12 row" v-if="!isloading">
+        <q-card bordered class="col-12 row" v-if="!isloadingSummary">
           <div class="row col-12 items-center q-px-md q-py-sm">
             <div class="text-weight-bold">สถิติการลา</div>
             <q-space />
@@ -278,6 +279,7 @@ onMounted(async () => {
               </q-card>
             </div>
           </div>
+
           <div class="col-6 row">
             <div
               bordered
diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index a497936..c175ab4 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -198,7 +198,7 @@ const formDataStep1 = ref<PersonInformation>();
  * @param id id ประเมิน
  */
 async function fetchDataStep1(id: string) {
-  showLoader();
+  // showLoader();
   showLoadStatus.value = false;
   await http
     .get(config.API.evaluationCheckspecByid(id))
@@ -211,9 +211,6 @@ async function fetchDataStep1(id: string) {
     })
     .finally(() => {
       showLoadStatus.value = true;
-      setTimeout(() => {
-        hideLoader();
-      }, 3000);
     });
 }
 
@@ -581,7 +578,9 @@ async function saveStep7() {
     .then(() => {
       route.params.id && fetchCheckStep(route.params.id.toString());
     })
-    .catch(() => {})
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });
@@ -827,6 +826,13 @@ onMounted(async () => {
                 />
               </q-card-actions>
             </div>
+
+            <div v-else class="col-xs-12 col-sm-9 q-pa-md">
+              <div class="toptitle2">
+                {{ store.step }}.{{ store.title[store.step - 1] }}
+              </div>
+              <q-skeleton height="450px" type="Qcard" square />
+            </div>
           </q-form>
         </q-card>
       </div>
diff --git a/src/modules/06_evaluate/components/ExpertPage.vue b/src/modules/06_evaluate/components/ExpertPage.vue
index 8779d66..29f1e27 100644
--- a/src/modules/06_evaluate/components/ExpertPage.vue
+++ b/src/modules/06_evaluate/components/ExpertPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -25,11 +25,12 @@ const formData = reactive<FormCommandSe>({
   commanderAbovePosition: "",
 });
 
-/**
- * ยืนยันการบันทึกข้อมูล
- */
+const isLoading = ref(false);
+
+/** ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
+    showLoader();
     const body = {
       ...formData,
       citizenId: dataPerson.formData.citizenId,
@@ -40,8 +41,7 @@ function onSubmit() {
       posNo: dataPerson.formData.posNo,
       birthDate: dataPerson.formData.birthDate,
     };
-    showLoader();
-    http
+    await http
       .post(config.API.evaluationExpertise, body)
       .then((res) => {
         router.push(`/evaluate/detail/expertise/${res.data.result.id}`);
@@ -55,12 +55,10 @@ function onSubmit() {
   });
 }
 
-/**
- * fetch รายชื่อ ผู้บังคับบัญชาชั้นต้น,
- */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูลรายชื่อ ผู้บังคับบัญชาชั้นต้น */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.orgSearchCommander())
     .then(async (res) => {
       const data = await res.data.result;
@@ -74,12 +72,12 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-onMounted(() => {
-  getData();
+onMounted(async () => {
+  await getData();
 });
 </script>
 
@@ -103,7 +101,14 @@ onMounted(() => {
       </div>
       <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
         <div class="col-12">
-          <q-card bordered>
+          <q-skeleton
+            v-if="isLoading"
+            height="230px"
+            square
+            style="border-radius: 8px"
+          />
+
+          <q-card bordered v-else>
             <div class="col-12 row q-pa-md q-col-gutter-y-md">
               <div class="col-12">
                 <q-card bordered class="col-12">
diff --git a/src/modules/06_evaluate/components/ExpertPageDetail.vue b/src/modules/06_evaluate/components/ExpertPageDetail.vue
index 22e5b8b..5fcb7d1 100644
--- a/src/modules/06_evaluate/components/ExpertPageDetail.vue
+++ b/src/modules/06_evaluate/components/ExpertPageDetail.vue
@@ -1,5 +1,6 @@
+divdivdiv
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import axios from "axios";
@@ -8,31 +9,24 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
 
 import type {
-  FormRef,
   FormCommand,
   FormData,
 } from "@/modules/06_evaluate/interface/evalute";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const dataPerson = useDataStore();
 const {
-  dialogConfirm,
   messageError,
   showLoader,
   hideLoader,
-  date2Thai,
+
   success,
-  findOrgName,
 } = mixin;
 const router = useRouter();
 const route = useRoute();
-const currentYear = new Date().getFullYear();
 const evaluateId = ref<string>(route.params.id as string);
-let profile = ref<any>();
 
 /** form ผู้เซ็นเอกสาร*/
 const formCommand = reactive<FormCommand>({
@@ -82,8 +76,6 @@ const fileEvaluation3Ref = ref<object | null>(null);
 const fileEvaluation4Ref = ref<object | null>(null);
 const fileEvaluation5Ref = ref<object | null>(null);
 const fileEvaluation6Ref = ref<object | null>(null);
-const performanceRef = ref<object | null>(null);
-const performanceOwnerRef = ref<object | null>(null);
 
 const subjectRef = ref<Object | null>(null);
 const authorRef = ref<Object | null>(null);
@@ -92,22 +84,47 @@ const commanderPositionRef = ref<Object | null>(null);
 const commanderAboveFullnameRef = ref<Object | null>(null);
 const commanderAbovePositionRef = ref<Object | null>(null);
 
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const objectRef: FormRef = {
-  subject: subjectRef,
-  author: authorRef,
-  commanderFullname: commanderFullnameRef,
-  commanderPosition: commanderPositionRef,
-  commanderAboveFullname: commanderAboveFullnameRef,
-  commanderAbovePosition: commanderAbovePositionRef,
+const fileMapping = {
+  "1-แบบพิจารณาคุณสมบัติบุคคล": {
+    loading: "fileEvaluation1",
+  },
+  "2-แบบแสดงรายละเอียดการเสนอผลงาน": {
+    loading: "fileEvaluation2",
+  },
+  "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)":
+    { loading: "fileEvaluation3" },
+  "4-แบบประเมินคุณลักษณะบุคคล": {
+    loading: "fileEvaluation4",
+  },
+  "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)": {
+    loading: "fileEvaluation5",
+  },
+  "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)": {
+    loading: "fileEvaluation6",
+  },
 };
 
+const isLoading = ref<boolean>(false);
+const isLoadingFile = reactive({
+  fileEvaluation1: false,
+  fileEvaluation2: false,
+  fileEvaluation3: false,
+  fileEvaluation4: false,
+  fileEvaluation5: false,
+  fileEvaluation6: false,
+});
+
 /**
  * function ดาวน์โหลดไฟล์
  * @param fileName ชื่อไฟล์
  */
 async function downloadFile(fileName: string) {
-  showLoader();
+  const mapping = fileMapping[fileName as keyof typeof fileMapping];
+  if (!mapping) return;
+
+  const loadingKey = mapping.loading as keyof typeof isLoadingFile;
+  isLoadingFile[loadingKey] = true;
+
   await http
     .get(
       config.API.loadFileDocument(
@@ -117,66 +134,34 @@ async function downloadFile(fileName: string) {
       )
     )
     .then((res) => {
-      if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
-        downloadFile1.value = res.data.downloadUrl;
-      } else if (fileName === "2-แบบแสดงรายละเอียดการเสนอผลงาน") {
-        downloadFile2.value = res.data.downloadUrl;
-      } else if (
-        fileName ===
-        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
-      ) {
-        downloadFile3.value = res.data.downloadUrl;
-      } else if (fileName === "4-แบบประเมินคุณลักษณะบุคคล") {
-        downloadFile4.value = res.data.downloadUrl;
-      } else if (
-        fileName === "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"
-      ) {
-        downloadFile5.value = res.data.downloadUrl;
-      } else if (fileName === "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)") {
-        downloadFile6.value = res.data.downloadUrl;
+      switch (fileName) {
+        case "1-แบบพิจารณาคุณสมบัติบุคคล":
+          downloadFile1.value = res.data.downloadUrl;
+          break;
+        case "2-แบบแสดงรายละเอียดการเสนอผลงาน":
+          downloadFile2.value = res.data.downloadUrl;
+          break;
+        case "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)":
+          downloadFile3.value = res.data.downloadUrl;
+          break;
+        case "4-แบบประเมินคุณลักษณะบุคคล":
+          downloadFile4.value = res.data.downloadUrl;
+          break;
+        case "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)":
+          downloadFile5.value = res.data.downloadUrl;
+          break;
+        case "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)":
+          downloadFile6.value = res.data.downloadUrl;
+          break;
       }
     })
     .finally(() => {
-      hideLoader();
+      isLoadingFile[loadingKey] = false;
     });
 }
 
-function onSubmit() {
-  dialogConfirm($q, () => {
-    showLoader();
-    http
-      .post(config.API.evaluationExpertise, formData)
-      .then((res) => {})
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(async () => {
-        await close();
-        await hideLoader();
-      });
-  });
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateForm() {
-  const hasError = [];
-  for (const key in objectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-      const property = objectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  } else {
-  }
-}
-
 /**
- * funcion ดาวน์โหลดไฟล์
+ *  ดาวน์โหลดไฟล์
  * @param tp templatname
  * @param templateName
  * @param fileName ชือ่ไฟล์
@@ -187,156 +172,18 @@ async function onClickDowloadFile(
   fileName: string
 ) {
   showLoader();
-  // let educations: any = [];
-  // if (profile.value != null) {
-  //   profile.value.educations.map((e: any) => {
-  //     educations.push({
-  //       educationLevel: e.educationLevel ?? "",
-  //       finishYear:
-  //         e.finishDate == null
-  //           ? ""
-  //           : new Date(e.finishDate).getFullYear() + 543,
-  //       institute: e.institute ?? "",
-  //     });
-  //   });
-  // }
-  // let certificates: any = [];
-  // if (profile.value != null) {
-  //   profile.value.certificates.map((e: any) => {
-  //     certificates.push({
-  //       certificateNo: e.certificateNo ?? "",
-  //       certificateType: e.certificateType ?? "",
-  //       issuer: e.issuer ?? "",
-  //     });
-  //   });
-  // }
-  // let salaries: any = [];
-  // if (profile.value != null) {
-  //   profile.value.salaries.map((e: any) => {
-  //     salaries.push({
-  //       date: e.date == null ? "" : date2Thai(new Date(e.date)),
-  //       position: e.position ?? "",
-  //       amount: e.amount ?? "",
-  //     });
-  //   });
-  // }
-  // let trainings: any = [];
-  // if (profile.value != null) {
-  //   profile.value.trainings.map((e: any) => {
-  //     trainings.push({
-  //       yearly: e.yearly ?? "",
-  //       startDate: e.startDate == null ? "" : date2Thai(new Date(e.startDate)),
-  //       endDate: e.endDate == null ? "" : date2Thai(new Date(e.endDate)),
-  //       name: e.name ?? "",
-  //       topic: e.topic ?? "",
-  //     });
-  //   });
-  // }
-  // const data = Object.assign(
-  //   { educations: educations },
-  //   { certificates: certificates },
-  //   { salaries: salaries },
-  //   { trainings: trainings },
-  //   {
-  //     fullName: dataPerson.formData.firstName
-  //       ? `${dataPerson.formData.prefix}${dataPerson.formData.firstName} ${dataPerson.formData.lastName}`
-  //       : "",
-  //   },
-  //   {
-  //     position: dataPerson.formData.position
-  //       ? dataPerson.formData.position
-  //       : "",
-  //   },
-  //   {
-  //     positionLevel: dataPerson.formData.posLevelName
-  //       ? dataPerson.formData.posLevelName
-  //       : "",
-  //   },
-  //   { posNo: dataPerson.formData.posNo ? dataPerson.formData.posNo : "" },
-  //   { org: dataPerson.formData ? dataPerson.formData.org : "" },
-  //   {
-  //     birthDate: dataPerson.formData.birthDate
-  //       ? date2Thai(new Date(dataPerson.formData.birthDate))
-  //       : "",
-  //   },
-  //   {
-  //     govAge: profile.value.government
-  //       ? `${
-  //           profile.value.government.govAge.year !== 0
-  //             ? `${profile.value.government.govAge.year} ปี`
-  //             : ""
-  //         } ${
-  //           profile.value.government.govAge.month !== 0
-  //             ? `${profile.value.government.govAge.month} เดือน`
-  //             : ""
-  //         } ${
-  //           profile.value.government.govAge.day !== 0
-  //             ? `${profile.value.government.govAge.day} วัน`
-  //             : ""
-  //         }`
-  //       : ``,
-  //   },
-  //   {
-  //     positionLevelNew:
-  //       profile.value == null
-  //         ? ""
-  //         : profile.value.type == "EXPERT"
-  //         ? "ชำนาญการ"
-  //         : "ชำนาญการพิเศษ",
-  //   },
-
-  //   tp === "EV1_005"
-  //     ? { salary: dataPerson.formData.salary ? dataPerson.formData.salary : "" }
-  //     : null,
-
-  //   tp === "EV1_006"
-  //     ? {
-  //         years: {
-  //           lastTwoYear: toThaiNumber(currentYear - 2 + 543),
-  //           lastOneYear: toThaiNumber(currentYear - 1 + 543),
-  //           currentYear: toThaiNumber(currentYear + 543),
-  //         },
-  //       }
-  //     : null,
-  //   tp === "EV1_006" || tp === "EV1_008"
-  //     ? { commanderFullname: formData.commanderFullname }
-  //     : null,
-  //   tp === "EV1_006" || tp === "EV1_008"
-  //     ? { commanderPosition: formData.commanderPosition }
-  //     : null,
-  //   tp === "EV1_006" ? { commanderOrg: "" } : null,
-  //   tp === "EV1_006" || tp === "EV1_008"
-  //     ? { commanderAboveFullname: formData.commanderAboveFullname }
-  //     : null,
-  //   tp === "EV1_006" || tp === "EV1_008"
-  //     ? { commanderAbovePosition: formData.commanderAbovePosition }
-  //     : null,
-  //   tp === "EV1_006" ? { commanderAboveOrg: "" } : null,
-
-  //   tp === "EV1_007" ? { positionName: "-" } : null,
-  //   tp === "EV1_007" ? { positionLeaveName: "-" } : null,
-
-  //   tp === "EV1_009" ? { dateStart: dataPerson.formData.dateStart } : null,
-  //   tp === "EV1_009"
-  //     ? { dateRetireLaw: dataPerson.formData.dateRetireLaw }
-  //     : null,
-
-  //   tp === "EV1_010" ? { subject: formData.subject } : null,
-  //   { typeTh: "เชี่ยวชาญ" },
-  //   { posNoWithSym: `(${dataPerson.formData.posNo})` },
-  //   { orgNoNewLine: dataPerson.formData.org }
-  // );
-
-  const body = {
-    template: tp,
-    reportName: templateName,
-    data: reportData.value,
-  };
-  await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
-}
-
-function toThaiNumber(input: number | string) {
-  return input.toString().replace(/\d/g, (d) => "๐๑๒๓๔๕๖๗๘๙"[parseInt(d)]);
+  try {
+    const body = {
+      template: tp,
+      reportName: templateName,
+      data: reportData.value,
+    };
+    await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
 /**
@@ -409,8 +256,8 @@ async function uploadfile(uploadUrl: string, file: any) {
 }
 
 async function getData() {
-  showLoader();
-  http
+  isLoading.value = true;
+  await http
     .get(config.API.evaluationExpertise + `/${evaluateId.value}`)
     .then((res) => {
       const data = res.data.result;
@@ -424,747 +271,746 @@ async function getData() {
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
-function getDetail(type: any) {
-  http.get(config.API.dataUserEvaByType(type)).then((res) => {
-    profile.value = {
-      ...profile.value, // รักษาข้อมูลเดิมที่เก็บไว้ก่อนหน้านี้
-      [type === "salary"
-        ? "salaries"
-        : type === "certificate"
-        ? "certificates"
-        : type === "training"
-        ? "trainings"
-        : type]: res.data.result, // เก็บข้อมูลตามประเภท (type)
-    };
-  });
-}
-
-const keyObject = ref<string[]>([
-  "educations",
-  "certificate",
-  "salary",
-  "training",
-  "assessments",
-  "government",
-]);
 const reportData = ref<any>();
 async function getCheckSpace() {
-  http
+  await http
     .get(config.API.evaluationReportCheckspecByid(evaluateId.value))
     .then((res) => {
       reportData.value = res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
-    })
-    .finally(() => {});
+    });
+}
+
+function fetchDataFile() {
+  Object.keys(fileMapping).forEach((fileName) => {
+    downloadFile(fileName);
+  });
 }
 
 onMounted(() => {
-  showLoader();
-  Promise.all([getData(), getCheckSpace(), ...keyObject.value.map(getDetail)])
-    .then(() => {})
-    .catch((e) => {
-      hideLoader();
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-
-  [
-    "1-แบบพิจารณาคุณสมบัติบุคคล",
-    "2-แบบแสดงรายละเอียดการเสนอผลงาน",
-    "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
-    "4-แบบประเมินคุณลักษณะบุคคล",
-    "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
-    "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
-  ].forEach((fileName) => downloadFile(fileName));
+  Promise.all([getData(), getCheckSpace(), fetchDataFile()]);
 });
 </script>
 
 <template>
-  <q-form @submit.prevent="validateForm">
-    <div class="col-12 row justify-center">
-      <div class="col-xs-12 col-sm-12 col-md-11 q-mb-sm">
-        <div class="toptitle text-white col-12 row items-center">
-          <q-btn
-            icon="mdi-arrow-left"
-            unelevated
-            round
-            dense
-            flat
-            color="primary"
-            class="q-mr-sm"
-            @click="router.push(`/evaluate`)"
-          />
-          <div>ประเมินเชี่ยวชาญ</div>
-        </div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11 q-mb-sm">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/evaluate`)"
+        />
+        <div>ประเมินเชี่ยวชาญ</div>
       </div>
+    </div>
 
-      <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
-        <div class="col-12">
-          <q-card bordered>
-            <div class="col-12 row q-pa-md q-col-gutter-y-md">
-              <div class="col-12">
-                <q-card bordered class="col-12">
-                  <div
-                    class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
-                  >
-                    ผลงาน
-                    <br />
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-12 q-pa-sm">
-                    <div class="row q-col-gutter-sm">
-                      <q-input
-                        ref="subjectRef"
-                        dense
-                        readonly
-                        class="col-xs-12 col-sm-6"
-                        outlined
-                        label="ชื่อผลงาน"
-                        v-model="formData.subject"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
-                        lazy-rules
-                        hide-bottom-space
-                      />
-                      <q-input
-                        ref="authorRef"
-                        class="col-xs-12 col-sm-6"
-                        dense
-                        readonly
-                        outlined
-                        v-model="formData.author"
-                        label="เจ้าของผลงาน"
-                        :rules="[
+    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-pa-md q-col-gutter-y-md">
+            <div v-if="isLoading" class="col-12">
+              <q-skeleton height="40px" square style="border-radius: 8px" />
+            </div>
+            <div v-else class="col-12">
+              <q-card bordered class="col-12">
+                <div
+                  class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
+                >
+                  ผลงาน
+                  <br />
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">
+                  <div class="row q-col-gutter-sm">
+                    <q-input
+                      ref="subjectRef"
+                      dense
+                      readonly
+                      class="col-xs-12 col-sm-6"
+                      outlined
+                      label="ชื่อผลงาน"
+                      v-model="formData.subject"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                    <q-input
+                      ref="authorRef"
+                      class="col-xs-12 col-sm-6"
+                      dense
+                      readonly
+                      outlined
+                      v-model="formData.author"
+                      label="เจ้าของผลงาน"
+                      :rules="[
                           (val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`,
                         ]"
-                        lazy-rules
-                        hide-bottom-space
-                      />
-                    </div>
+                      lazy-rules
+                      hide-bottom-space
+                    />
                   </div>
-                </q-card>
-              </div>
+                </div>
+              </q-card>
+            </div>
 
-              <!-- เลือกผู้เซ็นเอกสาร -->
-              <div class="col-12">
-                <q-card bordered class="col-12">
-                  <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-                    เลือกผู้เซ็นเอกสาร
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-12 q-pa-sm">
-                    <div class="row q-col-gutter-sm">
-                      <div class="col-xs-12 col-sm-12 row">
-                        <div class="text-weight-medium q-pt-xs q-pl-sm">
-                          ผู้บังคับบัญชาชั้นต้น
-                        </div>
-                        <div class="row col-12 q-col-gutter-sm q-pa-sm">
-                          <q-input
-                            ref="commanderFullnameRef"
-                            dense
-                            class="col-xs-12 col-sm-6"
-                            readonly
-                            outlined
-                            label="ชื่อ-นามสกุล"
-                            v-model="formData.commanderFullname"
-                            :rules="[
-                              (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
-                            ]"
-                            lazy-rules
-                            hide-bottom-space
-                          />
-                          <q-input
-                            ref="commanderPositionRef"
-                            class="col-xs-12 col-sm-6"
-                            readonly
-                            dense
-                            outlined
-                            v-model="formData.commanderPosition"
-                            label="ตำแหน่ง"
-                            :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                            lazy-rules
-                            hide-bottom-space
-                          />
-                        </div>
+            <!-- เลือกผู้เซ็นเอกสาร -->
+            <div v-if="isLoading" class="col-12">
+              <q-skeleton height="200px" square style="border-radius: 8px" />
+            </div>
+            <div v-else class="col-12">
+              <q-card bordered class="col-12">
+                <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                  เลือกผู้เซ็นเอกสาร
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-xs-12 col-sm-12 row">
+                      <div class="text-weight-medium q-pt-xs q-pl-sm">
+                        ผู้บังคับบัญชาชั้นต้น
                       </div>
-                    </div>
-                    <div class="row q-col-gutter-sm col-12">
-                      <div class="col-xs-12 col-sm-12 row">
-                        <div class="text-weight-medium q-pl-sm q-pt-sm">
-                          ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
-                        </div>
-                        <div class="row col-12 q-col-gutter-md q-pa-sm">
-                          <q-input
-                            ref="commanderAboveFullnameRef"
-                            dense
-                            class="col-xs-12 col-sm-6"
-                            outlined
-                            readonly
-                            v-model="formData.commanderAboveFullname"
-                            label="ชื่อ-นามสกุล"
-                            :rules="[
+                      <div class="row col-12 q-col-gutter-sm q-pa-sm">
+                        <q-input
+                          ref="commanderFullnameRef"
+                          dense
+                          class="col-xs-12 col-sm-6"
+                          readonly
+                          outlined
+                          label="ชื่อ-นามสกุล"
+                          v-model="formData.commanderFullname"
+                          :rules="[
                               (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
                             ]"
-                            lazy-rules
-                            hide-bottom-space
-                          />
-                          <q-input
-                            ref="commanderAbovePositionRef"
-                            class="col-xs-12 col-sm-6"
-                            dense
-                            readonly
-                            outlined
-                            v-model="formData.commanderAbovePosition"
-                            label="ตำแหน่ง"
-                            :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                            lazy-rules
-                            hide-bottom-space
-                          />
-                        </div>
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          ref="commanderPositionRef"
+                          class="col-xs-12 col-sm-6"
+                          readonly
+                          dense
+                          outlined
+                          v-model="formData.commanderPosition"
+                          label="ตำแหน่ง"
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                          lazy-rules
+                          hide-bottom-space
+                        />
                       </div>
                     </div>
                   </div>
-                </q-card>
-              </div>
-              <div class="col-12">
-                <div class="row q-col-gutter-sm">
-                  <!-- แบบพิจารณาคุณสมบัติบุคคล -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
-                      >
-                        <div>แบบพิจารณาคุณสมบัติบุคคล</div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_005',
-                                'template-1',
-                                'แบบพิจารณาคุณสมบัติบุคคล'
-                              )
-                            "
-                          >
-                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div>
-                          <q-btn
-                            v-if="downloadFile1 != ''"
-                            :href="downloadFile1"
-                            target="_blank"
-                            class="q-ml-sm"
-                            color="blue"
-                            flat
-                            dense
-                            icon="visibility"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                  <div class="row q-col-gutter-sm col-12">
+                    <div class="col-xs-12 col-sm-12 row">
+                      <div class="text-weight-medium q-pl-sm q-pt-sm">
+                        ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <div class="row q-col-gutter-md col-12">
-                            <q-file
-                              ref="fileEvaluation1Ref"
-                              v-model="fileEvaluation1"
-                              class="col-xs-12 col-sm-12"
-                              outlined
-                              dense
-                              label="อัปโหลดไฟล์"
-                              lazy-rules
-                              hide-bottom-space
-                              accept=".pdf"
-                              :rules="
+                      <div class="row col-12 q-col-gutter-md q-pa-sm">
+                        <q-input
+                          ref="commanderAboveFullnameRef"
+                          dense
+                          class="col-xs-12 col-sm-6"
+                          outlined
+                          readonly
+                          v-model="formData.commanderAboveFullname"
+                          label="ชื่อ-นามสกุล"
+                          :rules="[
+                              (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
+                            ]"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                        <q-input
+                          ref="commanderAbovePositionRef"
+                          class="col-xs-12 col-sm-6"
+                          dense
+                          readonly
+                          outlined
+                          v-model="formData.commanderAbovePosition"
+                          label="ตำแหน่ง"
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                          lazy-rules
+                          hide-bottom-space
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+
+            <div class="col-12">
+              <div class="row q-col-gutter-sm">
+                <!-- แบบพิจารณาคุณสมบัติบุคคล -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation1']"
+                    height="120px"
+                    type="QCard"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+                    >
+                      <div>แบบพิจารณาคุณสมบัติบุคคล</div>
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_005',
+                              'template-1',
+                              'แบบพิจารณาคุณสมบัติบุคคล'
+                            )
+                          "
+                        >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
+                      </div>
+                      <div>
+                        <q-btn
+                          v-if="downloadFile1 != ''"
+                          :href="downloadFile1"
+                          target="_blank"
+                          class="q-ml-sm"
+                          color="blue"
+                          flat
+                          dense
+                          icon="visibility"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <div class="row q-col-gutter-md col-12">
+                          <q-file
+                            ref="fileEvaluation1Ref"
+                            v-model="fileEvaluation1"
+                            class="col-xs-12 col-sm-12"
+                            outlined
+                            dense
+                            label="อัปโหลดไฟล์"
+                            lazy-rules
+                            hide-bottom-space
+                            accept=".pdf"
+                            :rules="
                                 downloadFile1 === ''
                                   ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                   : []
                               "
-                            >
-                              <template v-slot:prepend>
-                                <q-icon name="attach_file" />
-                              </template>
-                              <template v-slot:after>
-                                <q-btn
-                                  flat
-                                  round
-                                  dense
-                                  color="primary"
-                                  icon="mdi-upload"
-                                  @click="
-                                    fetchPathUpload(
-                                      'ประเมินเชี่ยวชาญ',
-                                      evaluateId,
-                                      '1-แบบพิจารณาคุณสมบัติบุคคล',
-                                      fileEvaluation1
-                                    )
-                                  "
-                                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                                >
-                              </template>
-                            </q-file>
-                          </div>
+                          >
+                            <template v-slot:prepend>
+                              <q-icon name="attach_file" />
+                            </template>
+                            <template v-slot:after>
+                              <q-btn
+                                flat
+                                round
+                                dense
+                                color="primary"
+                                icon="mdi-upload"
+                                @click="
+                                  fetchPathUpload(
+                                    'ประเมินเชี่ยวชาญ',
+                                    evaluateId,
+                                    '1-แบบพิจารณาคุณสมบัติบุคคล',
+                                    fileEvaluation1
+                                  )
+                                "
+                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                              >
+                            </template>
+                          </q-file>
                         </div>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
+                </div>
 
-                  <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
-                      >
-                        <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_006',
-                                'template-2',
-                                'แบบแสดงรายละเอียดการเสนอผลงาน'
-                              )
-                            "
-                          >
-                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div>
-                          <q-btn
-                            v-if="downloadFile2 != ''"
-                            :href="downloadFile2"
-                            target="_blank"
-                            class="q-ml-sm"
-                            color="blue"
-                            flat
-                            dense
-                            icon="visibility"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation2']"
+                    height="120px"
+                    type="QCard"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
+                    >
+                      <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_006',
+                              'template-2',
+                              'แบบแสดงรายละเอียดการเสนอผลงาน'
+                            )
+                          "
+                        >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <div class="row q-col-gutter-md col-12">
-                            <q-file
-                              ref="fileEvaluation2Ref"
-                              v-model="fileEvaluation2"
-                              class="col-12"
-                              outlined
-                              dense
-                              label="อัปโหลดไฟล์"
-                              lazy-rules
-                              accept=".pdf"
-                              hide-bottom-space
-                              :rules="
+                      <div>
+                        <q-btn
+                          v-if="downloadFile2 != ''"
+                          :href="downloadFile2"
+                          target="_blank"
+                          class="q-ml-sm"
+                          color="blue"
+                          flat
+                          dense
+                          icon="visibility"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <div class="row q-col-gutter-md col-12">
+                          <q-file
+                            ref="fileEvaluation2Ref"
+                            v-model="fileEvaluation2"
+                            class="col-12"
+                            outlined
+                            dense
+                            label="อัปโหลดไฟล์"
+                            lazy-rules
+                            accept=".pdf"
+                            hide-bottom-space
+                            :rules="
                                 downloadFile2 === ''
                                   ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                   : []
                               "
-                            >
-                              <template v-slot:prepend>
-                                <q-icon name="attach_file" />
-                              </template>
-                              <template v-slot:after>
-                                <q-btn
-                                  flat
-                                  round
-                                  dense
-                                  color="primary"
-                                  icon="mdi-upload"
-                                  @click="
-                                    fetchPathUpload(
-                                      'ประเมินเชี่ยวชาญ',
-                                      evaluateId,
-                                      '2-แบบแสดงรายละเอียดการเสนอผลงาน',
-                                      fileEvaluation2
-                                    )
-                                  "
-                                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                                >
-                              </template>
-                            </q-file>
-                          </div>
+                          >
+                            <template v-slot:prepend>
+                              <q-icon name="attach_file" />
+                            </template>
+                            <template v-slot:after>
+                              <q-btn
+                                flat
+                                round
+                                dense
+                                color="primary"
+                                icon="mdi-upload"
+                                @click="
+                                  fetchPathUpload(
+                                    'ประเมินเชี่ยวชาญ',
+                                    evaluateId,
+                                    '2-แบบแสดงรายละเอียดการเสนอผลงาน',
+                                    fileEvaluation2
+                                  )
+                                "
+                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                              >
+                            </template>
+                          </q-file>
                         </div>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
+                </div>
 
-                  <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
-                      >
-                        <div>
-                          แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-                          (เอกสารแบบ ก.)
-                        </div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_007',
-                                'template-3',
-                                'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
-                              )
-                            "
-                          >
-                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div v-if="downloadFile3 != ''">
-                          <q-btn
-                            :href="downloadFile3"
-                            target="_blank"
-                            flat
-                            dense
-                            icon="visibility"
-                            class="q-ml-sm"
-                            color="blue"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation3']"
+                    height="120px"
+                    type="QCard"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
+                    >
+                      <div>
+                        แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
+                        (เอกสารแบบ ก.)
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <q-file
-                            ref="fileEvaluation3Ref"
-                            v-model="fileEvaluation3"
-                            class="col-12"
-                            outlined
-                            dense
-                            label="อัปโหลดไฟล์"
-                            lazy-rules
-                            hide-bottom-space
-                            accept=".pdf"
-                            :rules="
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_007',
+                              'template-3',
+                              'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
+                            )
+                          "
+                        >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
+                      </div>
+                      <div v-if="downloadFile3 != ''">
+                        <q-btn
+                          :href="downloadFile3"
+                          target="_blank"
+                          flat
+                          dense
+                          icon="visibility"
+                          class="q-ml-sm"
+                          color="blue"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <q-file
+                          ref="fileEvaluation3Ref"
+                          v-model="fileEvaluation3"
+                          class="col-12"
+                          outlined
+                          dense
+                          label="อัปโหลดไฟล์"
+                          lazy-rules
+                          hide-bottom-space
+                          accept=".pdf"
+                          :rules="
                               downloadFile3 === ''
                                 ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                 : []
                             "
-                          >
-                            <template v-slot:prepend>
-                              <q-icon name="attach_file" />
-                            </template>
-                            <template v-slot:after>
-                              <q-btn
-                                flat
-                                round
-                                dense
-                                color="primary"
-                                icon="mdi-upload"
-                                @click="
-                                  fetchPathUpload(
-                                    'ประเมินเชี่ยวชาญ',
-                                    evaluateId,
-                                    '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
-                                    fileEvaluation3
-                                  )
-                                "
-                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                              >
-                            </template>
-                          </q-file>
-                        </div>
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="attach_file" />
+                          </template>
+                          <template v-slot:after>
+                            <q-btn
+                              flat
+                              round
+                              dense
+                              color="primary"
+                              icon="mdi-upload"
+                              @click="
+                                fetchPathUpload(
+                                  'ประเมินเชี่ยวชาญ',
+                                  evaluateId,
+                                  '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
+                                  fileEvaluation3
+                                )
+                              "
+                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                            >
+                          </template>
+                        </q-file>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
+                </div>
 
-                  <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
-                      >
-                        <div class="col-7">
-                          แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
-                        </div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_009',
-                                'template-5',
-                                'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
-                              )
-                            "
-                            ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div>
-                          <q-btn
-                            v-if="downloadFile5 != ''"
-                            :href="downloadFile5"
-                            target="_blank"
-                            flat
-                            dense
-                            icon="visibility"
-                            class="q-ml-sm"
-                            color="blue"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation5']"
+                    height="120px"
+                    type="QCard"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
+                    >
+                      <div class="col-7">
+                        แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <q-file
-                            ref="fileEvaluation5Ref"
-                            v-model="fileEvaluation5"
-                            class="col-12"
-                            outlined
-                            label="อัปโหลดไฟล์"
-                            dense
-                            lazy-rules
-                            accept=".pdf"
-                            hide-bottom-space
-                            :rules="
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_009',
+                              'template-5',
+                              'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
+                            )
+                          "
+                          ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
+                      </div>
+                      <div>
+                        <q-btn
+                          v-if="downloadFile5 != ''"
+                          :href="downloadFile5"
+                          target="_blank"
+                          flat
+                          dense
+                          icon="visibility"
+                          class="q-ml-sm"
+                          color="blue"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <q-file
+                          ref="fileEvaluation5Ref"
+                          v-model="fileEvaluation5"
+                          class="col-12"
+                          outlined
+                          label="อัปโหลดไฟล์"
+                          dense
+                          lazy-rules
+                          accept=".pdf"
+                          hide-bottom-space
+                          :rules="
                               downloadFile5 === ''
                                 ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                 : []
                             "
-                          >
-                            <template v-slot:prepend>
-                              <q-icon name="attach_file" />
-                            </template>
-                            <template v-slot:after>
-                              <q-btn
-                                flat
-                                round
-                                dense
-                                color="primary"
-                                icon="mdi-upload"
-                                @click="
-                                  fetchPathUpload(
-                                    'ประเมินเชี่ยวชาญ',
-                                    evaluateId,
-                                    '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
-                                    fileEvaluation5
-                                  )
-                                "
-                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                              >
-                            </template>
-                          </q-file>
-                        </div>
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="attach_file" />
+                          </template>
+                          <template v-slot:after>
+                            <q-btn
+                              flat
+                              round
+                              dense
+                              color="primary"
+                              icon="mdi-upload"
+                              @click="
+                                fetchPathUpload(
+                                  'ประเมินเชี่ยวชาญ',
+                                  evaluateId,
+                                  '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
+                                  fileEvaluation5
+                                )
+                              "
+                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                            >
+                          </template>
+                        </q-file>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
+                </div>
 
-                  <!-- แบบประเมินคุณลักษณะบุคคล -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
-                      >
-                        <div>แบบประเมินคุณลักษณะบุคคล</div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_008',
-                                'template-4',
-                                'แบบประเมินคุณลักษณะบุคคล'
-                              )
-                            "
-                          >
-                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div>
-                          <q-btn
-                            v-if="downloadFile4 != ''"
-                            :href="downloadFile4"
-                            target="_blank"
-                            flat
-                            dense
-                            icon="visibility"
-                            class="q-ml-sm"
-                            color="blue"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                <!-- แบบประเมินคุณลักษณะบุคคล -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation4']"
+                    height="120px"
+                    type="QCard"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
+                    >
+                      <div>แบบประเมินคุณลักษณะบุคคล</div>
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_008',
+                              'template-4',
+                              'แบบประเมินคุณลักษณะบุคคล'
+                            )
+                          "
+                        >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <q-file
-                            ref="fileEvaluation4Ref"
-                            v-model="fileEvaluation4"
-                            class="col-12"
-                            outlined
-                            dense
-                            lazy-rules
-                            label="อัปโหลดไฟล์"
-                            hide-bottom-space
-                            accept=".pdf"
-                            :rules="
+                      <div>
+                        <q-btn
+                          v-if="downloadFile4 != ''"
+                          :href="downloadFile4"
+                          target="_blank"
+                          flat
+                          dense
+                          icon="visibility"
+                          class="q-ml-sm"
+                          color="blue"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <q-file
+                          ref="fileEvaluation4Ref"
+                          v-model="fileEvaluation4"
+                          class="col-12"
+                          outlined
+                          dense
+                          lazy-rules
+                          label="อัปโหลดไฟล์"
+                          hide-bottom-space
+                          accept=".pdf"
+                          :rules="
                               downloadFile4 === ''
                                 ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                 : []
                             "
-                          >
-                            <template v-slot:prepend>
-                              <q-icon name="attach_file" />
-                            </template>
-                            <template v-slot:after>
-                              <q-btn
-                                flat
-                                round
-                                dense
-                                color="primary"
-                                icon="mdi-upload"
-                                @click="
-                                  fetchPathUpload(
-                                    'ประเมินเชี่ยวชาญ',
-                                    evaluateId,
-                                    '4-แบบประเมินคุณลักษณะบุคคล',
-                                    fileEvaluation4
-                                  )
-                                "
-                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                              >
-                            </template>
-                          </q-file>
-                        </div>
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="attach_file" />
+                          </template>
+                          <template v-slot:after>
+                            <q-btn
+                              flat
+                              round
+                              dense
+                              color="primary"
+                              icon="mdi-upload"
+                              @click="
+                                fetchPathUpload(
+                                  'ประเมินเชี่ยวชาญ',
+                                  evaluateId,
+                                  '4-แบบประเมินคุณลักษณะบุคคล',
+                                  fileEvaluation4
+                                )
+                              "
+                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                            >
+                          </template>
+                        </q-file>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
+                </div>
 
-                  <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
-                  <div class="col-6">
-                    <q-card bordered>
-                      <div
-                        class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
-                      >
-                        <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
-                        <q-space />
-                        <div>
-                          <q-btn
-                            flat
-                            dense
-                            icon="download"
-                            color="indigo"
-                            @click="
-                              onClickDowloadFile(
-                                'EV1_010',
-                                'template-6',
-                                'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
-                              )
-                            "
-                          >
-                            <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-                          >
-                        </div>
-                        <div>
-                          <q-btn
-                            v-if="downloadFile6 != ''"
-                            :href="downloadFile6"
-                            target="_blank"
-                            flat
-                            dense
-                            icon="visibility"
-                            class="q-ml-sm"
-                            color="blue"
-                          >
-                            <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-                          >
-                        </div>
+                <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
+                <div class="col-6">
+                  <q-skeleton
+                    v-if="isLoadingFile['fileEvaluation6']"
+                    height="120px"
+                    type="QCard"
+                  />
+                  <q-card v-else bordered>
+                    <div
+                      class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
+                    >
+                      <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
+                      <q-space />
+                      <div>
+                        <q-btn
+                          flat
+                          dense
+                          icon="download"
+                          color="indigo"
+                          @click="
+                            onClickDowloadFile(
+                              'EV1_010',
+                              'template-6',
+                              'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
+                            )
+                          "
+                        >
+                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
+                        >
                       </div>
-                      <div class="col-12"><q-separator /></div>
-                      <div class="row">
-                        <div class="col-12 q-pa-sm">
-                          <q-file
-                            ref="fileEvaluation6Ref"
-                            v-model="fileEvaluation6"
-                            class="col-12"
-                            outlined
-                            label="อัปโหลดไฟล์"
-                            hide-bottom-space
-                            dense
-                            lazy-rules
-                            accept=".pdf"
-                            :rules="
+                      <div>
+                        <q-btn
+                          v-if="downloadFile6 != ''"
+                          :href="downloadFile6"
+                          target="_blank"
+                          flat
+                          dense
+                          icon="visibility"
+                          class="q-ml-sm"
+                          color="blue"
+                        >
+                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="row">
+                      <div class="col-12 q-pa-sm">
+                        <q-file
+                          ref="fileEvaluation6Ref"
+                          v-model="fileEvaluation6"
+                          class="col-12"
+                          outlined
+                          label="อัปโหลดไฟล์"
+                          hide-bottom-space
+                          dense
+                          lazy-rules
+                          accept=".pdf"
+                          :rules="
                               downloadFile6 === ''
                                 ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                 : []
                             "
-                          >
-                            <template v-slot:prepend>
-                              <q-icon name="attach_file" />
-                            </template>
-                            <template v-slot:after>
-                              <q-btn
-                                flat
-                                round
-                                dense
-                                color="primary"
-                                icon="mdi-upload"
-                                @click="
-                                  fetchPathUpload(
-                                    'ประเมินเชี่ยวชาญ',
-                                    evaluateId,
-                                    '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
-                                    fileEvaluation6
-                                  )
-                                "
-                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                              >
-                            </template>
-                          </q-file>
-                        </div>
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="attach_file" />
+                          </template>
+                          <template v-slot:after>
+                            <q-btn
+                              flat
+                              round
+                              dense
+                              color="primary"
+                              icon="mdi-upload"
+                              @click="
+                                fetchPathUpload(
+                                  'ประเมินเชี่ยวชาญ',
+                                  evaluateId,
+                                  '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
+                                  fileEvaluation6
+                                )
+                              "
+                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                            >
+                          </template>
+                        </q-file>
                       </div>
-                    </q-card>
-                  </div>
+                    </div>
+                  </q-card>
                 </div>
               </div>
             </div>
-          </q-card>
-        </div>
+          </div>
+        </q-card>
       </div>
     </div>
-  </q-form>
+  </div>
 </template>
diff --git a/src/modules/06_evaluate/components/PopupPosition.vue b/src/modules/06_evaluate/components/PopupPosition.vue
index 7a9f9d7..7cd4691 100644
--- a/src/modules/06_evaluate/components/PopupPosition.vue
+++ b/src/modules/06_evaluate/components/PopupPosition.vue
@@ -16,6 +16,7 @@ const { showLoader, hideLoader, messageError, formatDatePosition } =
 
 const modal = defineModel<boolean>("modal", { required: true });
 
+const isLoading = ref<boolean>(false);
 const cardData = ref<CardDataPos[]>([
   {
     label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
@@ -36,7 +37,7 @@ function onClosePopup() {
 }
 
 async function fetchDataPosition() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.salaryTenurePosition(""))
     .then((res) => {
@@ -76,7 +77,7 @@ async function fetchDataPosition() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -98,7 +99,19 @@ watch(modal, (v) => {
       <q-separator />
       <q-card-section>
         <div class="row q-col-gutter-sm q-pb-sm">
-          <div class="col" v-for="(item, index) in cardData" :key="index">
+          <q-skeleton
+            v-if="isLoading"
+            type="Qcard"
+            width="100%"
+            height="240px"
+          />
+
+          <div
+            v-else
+            class="col"
+            v-for="(item, index) in cardData"
+            :key="index"
+          >
             <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
               <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
                 {{ item.label }}
diff --git a/src/modules/06_evaluate/components/TableListEvaluate.vue b/src/modules/06_evaluate/components/TableListEvaluate.vue
index c5916bb..261f49a 100644
--- a/src/modules/06_evaluate/components/TableListEvaluate.vue
+++ b/src/modules/06_evaluate/components/TableListEvaluate.vue
@@ -8,6 +8,7 @@ import config from "@/app.config";
 import http from "@/plugins/http";
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 import { useCounterMixin } from "@/stores/mixin";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -37,6 +38,10 @@ const props = defineProps({
     type: Function,
     require: true,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["update:pagination"]);
@@ -135,7 +140,9 @@ onMounted(() => {
 </script>
 
 <template>
+  <SkeletonTable v-if="isLoading" :columns="columns" />
   <d-table
+    v-else
     ref="table"
     flat
     bordered
diff --git a/src/modules/06_evaluate/components/step/step1.vue b/src/modules/06_evaluate/components/step/step1.vue
index f1c0cb5..3d00c33 100644
--- a/src/modules/06_evaluate/components/step/step1.vue
+++ b/src/modules/06_evaluate/components/step/step1.vue
@@ -37,6 +37,7 @@ const formData = reactive<FormSpec>({
   isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
   isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก]
 });
+const isLoading = ref<boolean>(false);
 
 /** function อัปเดทตรวจสอบคุณสมบัติ*/
 async function updateValue() {
@@ -48,6 +49,7 @@ async function updateValue() {
  * @param data ตรวจสอบคุณสมบัติ
  */
 async function fetchCheckSpec(data: PersonInformation) {
+  isLoading.value = true;
   formData.isEducationalQft = data.isEducationalQft;
   formData.isGovermantServiceHtr = data.isGovermantServiceHtr;
   formData.isOperatingExp = data.isOperatingExp;
@@ -55,6 +57,7 @@ async function fetchCheckSpec(data: PersonInformation) {
   formData.isHaveSpecificQft = data.isHaveSpecificQft;
   formData.isHaveProLicense = data.isHaveProLicense;
   formData.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
+  isLoading.value = false;
 }
 
 /**
@@ -87,7 +90,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="q-pa-sm">
+  <q-skeleton
+    v-if="isLoading"
+    class="q-mb-md"
+    type="Qcard"
+    width="100%"
+    height="100%"
+  />
+  <div class="q-pa-sm" v-else>
     <q-list dense>
       <q-item v-ripple class="listItem">
         <q-item-section avatar>
diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index 70e3757..1568b02 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -52,6 +52,7 @@ const formTemplates = ref<any[]>([
     fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_006",
@@ -60,6 +61,7 @@ const formTemplates = ref<any[]>([
     fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_008",
@@ -68,6 +70,7 @@ const formTemplates = ref<any[]>([
     fileName: "4-แบบประเมินคุณลักษณะบุคคล",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_010",
@@ -76,6 +79,7 @@ const formTemplates = ref<any[]>([
     fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
 ]);
 
@@ -96,6 +100,7 @@ const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const pdfSrc = ref<any>();
 const profile = ref<any>();
+const isLoading = ref<boolean>(false);
 
 /** function ไปหน้าต่อไปของรายงาน */
 function nextPage() {
@@ -201,8 +206,9 @@ async function uploadfile(uploadUrl: string, file: any) {
  * function fecth รายชื่อผู้เซ็นเอกสาร
  * @param id evaluate ID
  */
-function fetcheSigner(id: string) {
-  http
+async function fetcheSigner(id: string) {
+  isLoading.value = true;
+  await http
     .get(config.API.evaluationSignerDoc1(id))
     .then((res) => {
       const data = res.data.result;
@@ -220,9 +226,12 @@ function fetcheSigner(id: string) {
       formCommand.subject = data.subject;
       store.statusUpload = true;
     })
-    .catch(() => {
+    .catch(async () => {
       store.statusUpload = false;
-      getCommander();
+      await getCommander();
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -247,6 +256,11 @@ async function fetchCheckSpec(id: string) {
  * @param fileName ชื่อไฟล์
  */
 async function downloadFile(fileName: string) {
+  const loadingKey = formTemplates.value.findIndex(
+    (item) => item.fileName === fileName
+  );
+  formTemplates.value[loadingKey].isLoading = true;
+
   await http
     .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
     .then((res) => {
@@ -264,6 +278,7 @@ async function downloadFile(fileName: string) {
       };
 
       emit("update:form", formCommand, ref);
+      formTemplates.value[loadingKey].isLoading = false;
     });
 }
 
@@ -316,29 +331,16 @@ watch(
 
 /**lifecycle Hooks*/
 onMounted(async () => {
-  const user = await tokenParsed();
-
   try {
-    showLoader();
     await Promise.all([
       fetcheSigner(evaluateId.value),
       fetchCheckSpec(evaluateId.value),
       formTemplates.value.forEach((e) => {
         downloadFile(e.fileName);
       }),
-      // downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
-      // downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
-      // downloadFile(
-      //   "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
-      // ),
-      // downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
-      // downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
-      // downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
     ]);
   } catch (error) {
     console.log(error);
-  } finally {
-    hideLoader();
   }
 });
 </script>
@@ -347,7 +349,8 @@ onMounted(async () => {
   <div class="col-12 q-pa-sm">
     <!-- ผลงาน -->
     <div class="col-12">
-      <q-card bordered class="cardSp1 col-12">
+      <q-skeleton type="Qcard" height="100px" v-if="isLoading" />
+      <q-card v-else bordered class="cardSp1 col-12">
         <div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
           ผลงาน
         </div>
@@ -422,7 +425,8 @@ onMounted(async () => {
 
     <!-- เลือกผู้เซ็นเอกสาร -->
     <div class="col-12">
-      <q-card bordered class="cardSp1 col-12">
+      <q-skeleton type="Qcard" height="200px" v-if="isLoading" />
+      <q-card v-else bordered class="cardSp1 col-12">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
           เลือกผู้เซ็นเอกสาร
         </div>
@@ -573,14 +577,16 @@ onMounted(async () => {
     </div>
 
     <!-- v-if="store.statusUpload -->
-    <div class="row q-col-gutter-sm">
+    <div class="row q-col-gutter-sm q-mt-sm">
       <div
         class="col-6"
         v-if="store.currentStep === 2"
         v-for="(item, index) in formTemplates"
         :key="index"
       >
-        <q-card bordered class="cardSp1">
+        <q-skeleton type="Qcard" height="100px" v-if="item.isLoading" />
+
+        <q-card bordered class="cardSp1" v-else>
           <div
             class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
           >
@@ -662,541 +668,6 @@ onMounted(async () => {
           </div>
         </q-card>
       </div>
-
-      <!-- แบบพิจารณาคุณสมบัติบุคคล -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
-          >
-            <div>แบบพิจารณาคุณสมบัติบุคคล</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_005',
-                    'template-1',
-                    'แบบพิจารณาคุณสมบัติบุคคล'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile1 != ''"
-                :href="downloadFile1"
-                target="_blank"
-                class="q-ml-sm"
-                color="blue"
-                flat
-                dense
-                icon="visibility"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-md col-12">
-                <q-file
-                  ref="fileEvaluation1Ref"
-                  v-model="fileEvaluation1"
-                  :disable="!store.statusUpload"
-                  class="col-xs-12 col-sm-12"
-                  label="อัปโหลดไฟล์"
-                  outlined
-                  dense
-                  lazy-rules
-                  hide-bottom-space
-                  accept=".pdf"
-                  :rules="
-                    downloadFile1 === ''
-                      ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                      : []
-                  "
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                  <template v-slot:after>
-                    <q-btn
-                      :disable="!store.statusUpload"
-                      flat
-                      round
-                      dense
-                      color="primary"
-                      icon="mdi-upload"
-                      @click="
-                        fetchPathUpload(
-                          'เล่ม 1',
-                          evaluateId,
-                          '1-แบบพิจารณาคุณสมบัติบุคคล',
-                          fileEvaluation1
-                        )
-                      "
-                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                    >
-                  </template>
-                </q-file>
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
-          >
-            <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_006',
-                    'template-2',
-                    'แบบแสดงรายละเอียดการเสนอผลงาน'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile2 != ''"
-                :href="downloadFile2"
-                target="_blank"
-                class="q-ml-sm"
-                color="blue"
-                flat
-                dense
-                icon="visibility"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-md col-12">
-                <q-file
-                  ref="fileEvaluation2Ref"
-                  v-model="fileEvaluation2"
-                  :disable="!store.statusUpload"
-                  class="col-12"
-                  outlined
-                  dense
-                  label="อัปโหลดไฟล์"
-                  lazy-rules
-                  accept=".pdf"
-                  hide-bottom-space
-                  :rules="
-                    downloadFile2 === ''
-                      ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                      : []
-                  "
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                  <template v-slot:after>
-                    <q-btn
-                      :disable="!store.statusUpload"
-                      flat
-                      round
-                      dense
-                      color="primary"
-                      icon="mdi-upload"
-                      @click="
-                        fetchPathUpload(
-                          'เล่ม 1',
-                          evaluateId,
-                          '2-แบบแสดงรายละเอียดการเสนอผลงาน',
-                          fileEvaluation2
-                        )
-                      "
-                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                    >
-                  </template>
-                </q-file>
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
-          >
-            <div>
-              แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-              (เอกสารแบบ ก.)
-            </div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_007',
-                    'template-3',
-                    'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div v-if="downloadFile3 != ''">
-              <q-btn
-                :href="downloadFile3"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation3Ref"
-                v-model="fileEvaluation3"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                dense
-                lazy-rules
-                hide-bottom-space
-                accept=".pdf"
-                :rules="
-                  downloadFile3 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-                label="อัปโหลดไฟล์"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
-                        fileEvaluation3
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
-          >
-            <div class="col-7">
-              แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
-            </div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_009',
-                    'template-5',
-                    'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
-                  )
-                "
-                ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile5 != ''"
-                :href="downloadFile5"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation5Ref"
-                v-model="fileEvaluation5"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                dense
-                lazy-rules
-                accept=".pdf"
-                hide-bottom-space
-                label="อัปโหลดไฟล์"
-                :rules="
-                  downloadFile5 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
-                        fileEvaluation5
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบประเมินคุณลักษณะบุคคล -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
-          >
-            <div>แบบประเมินคุณลักษณะบุคคล</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_008',
-                    'template-4',
-                    'แบบประเมินคุณลักษณะบุคคล'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile4 != ''"
-                :href="downloadFile4"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation4Ref"
-                v-model="fileEvaluation4"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                dense
-                lazy-rules
-                hide-bottom-space
-                accept=".pdf"
-                label="อัปโหลดไฟล์"
-                :rules="
-                  downloadFile4 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    flat
-                    round
-                    dense
-                    :disable="!store.statusUpload"
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '4-แบบประเมินคุณลักษณะบุคคล',
-                        fileEvaluation4
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
-          >
-            <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_010',
-                    'template-6',
-                    'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile6 != ''"
-                :href="downloadFile6"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation6Ref"
-                v-model="fileEvaluation6"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                hide-bottom-space
-                dense
-                lazy-rules
-                label="อัปโหลดไฟล์"
-                accept=".pdf"
-                :rules="
-                  downloadFile6 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
-                        fileEvaluation6
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
     </div>
   </div>
 
diff --git a/src/modules/06_evaluate/components/step/step3.vue b/src/modules/06_evaluate/components/step/step3.vue
index 019a960..9866fa5 100644
--- a/src/modules/06_evaluate/components/step/step3.vue
+++ b/src/modules/06_evaluate/components/step/step3.vue
@@ -13,7 +13,7 @@ const $q = useQuasar();
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const route = useRoute();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 
 /** id ประเมิน*/
 const evaluateId = ref<string>(route.params.id.toString());
@@ -21,6 +21,7 @@ const evaluateId = ref<string>(route.params.id.toString());
 /** emit*/
 const emit = defineEmits(["update:file"]);
 
+const isLoading = ref(false);
 const selectedItem = ref(1);
 const formTemplates = ref([
   {
@@ -55,8 +56,10 @@ function handleItemClick(itemNumber: number) {
  * function เรีกยเอกสาร
  * @param fileName ชื่อเอกสาร
  */
-async function fetchDocument(fileName: string) {
-  showLoader();
+async function fetchDocument(fileName: string, forceDownload = false) {
+  if (forceDownload) {
+    isLoading.value = true;
+  }
   evaluateId.value &&
     (await http
       .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
@@ -67,7 +70,7 @@ async function fetchDocument(fileName: string) {
         messageError($q, err);
       })
       .finally(() => {
-        hideLoader();
+        isLoading.value = false;
       }));
 }
 
@@ -95,12 +98,21 @@ async function downloadFile(url: string) {
 
 /** HooK lifecycle*/
 onMounted(async () => {
-  await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
+  await fetchDocument(
+    formTemplates.value[selectedItem.value - 1].fileName,
+    true
+  );
 });
 </script>
 
 <template>
-  <q-list separator>
+  <q-skeleton
+    v-if="isLoading"
+    class="q-pa-md"
+    type="Qcard"
+    style="width: 100%; height: 100%"
+  />
+  <q-list separator v-else>
     <q-item
       v-for="(item, index) in formTemplates"
       :key="index"
diff --git a/src/modules/06_evaluate/components/step/step4.vue b/src/modules/06_evaluate/components/step/step4.vue
index 56d583d..70a6f79 100644
--- a/src/modules/06_evaluate/components/step/step4.vue
+++ b/src/modules/06_evaluate/components/step/step4.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 import axios from "axios";
 
 import http from "@/plugins/http";
@@ -23,6 +23,7 @@ const formTemplates = ref<any[]>([
     fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_006",
@@ -31,6 +32,7 @@ const formTemplates = ref<any[]>([
     fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_008",
@@ -39,6 +41,7 @@ const formTemplates = ref<any[]>([
     fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_010",
@@ -47,6 +50,7 @@ const formTemplates = ref<any[]>([
     fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
 ]);
 
@@ -181,6 +185,10 @@ async function uploadfile(uploadUrl: string, file: any) {
  * @param fileName ชื่อไฟล์
  */
 async function downloadFile(fileName: string) {
+  const loadingKey = formTemplates.value.findIndex(
+    (item) => item.fileName === fileName
+  );
+  formTemplates.value[loadingKey].isLoading = true;
   await http
     .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
     .then((res) => {
@@ -190,13 +198,15 @@ async function downloadFile(fileName: string) {
       if (index !== -1) {
         formTemplates.value[index].downloadFile = res.data.downloadUrl;
       }
+    })
+    .finally(() => {
+      formTemplates.value[loadingKey].isLoading = false;
     });
 }
 
 /**lifecycle Hooks*/
 onMounted(async () => {
   try {
-    showLoader();
     await Promise.all([
       fetcheSigner(evaluateId.value),
       fetchCheckSpec(evaluateId.value),
@@ -206,8 +216,6 @@ onMounted(async () => {
     ]);
   } catch (error) {
     console.log(error);
-  } finally {
-    hideLoader();
   }
 });
 </script>
@@ -226,7 +234,13 @@ onMounted(async () => {
 
   <div class="row q-col-gutter-sm q-pa-sm">
     <div class="col-6" v-for="(item, index) in formTemplates" :key="index">
+      <q-skeleton
+        type="Qcard"
+        :height="store.currentStep !== 4 ? '50px' : '100px'"
+        v-if="item.isLoading"
+      />
       <q-card
+        v-else
         bordered
         class="cardSp1"
         v-if="
diff --git a/src/modules/06_evaluate/components/step/step5.vue b/src/modules/06_evaluate/components/step/step5.vue
index 38accb5..2ba5977 100644
--- a/src/modules/06_evaluate/components/step/step5.vue
+++ b/src/modules/06_evaluate/components/step/step5.vue
@@ -12,7 +12,7 @@ import type { FileObject } from "@/modules/06_evaluate/interface/main";
 const $q = useQuasar();
 const mixins = useCounterMixin();
 const route = useRoute();
-const { date2Thai, success, showLoader, hideLoader } = mixins;
+const { date2Thai, success, showLoader, hideLoader, messageError } = mixins;
 
 /** id ประเมิน*/
 const evaluateId = ref<string>(route.params.id.toString());
@@ -20,6 +20,7 @@ const evaluateId = ref<string>(route.params.id.toString());
 const dateStartAnnounce = ref<string | null>(date2Thai(new Date()));
 const dateEndAnnounce = ref<string | null>(date2Thai(new Date()));
 const statusFile = ref<boolean>(false);
+const isLoading = ref<boolean>(false);
 
 /** เอกสารประกาศผลการคัดเลือกบุคคล*/
 const items = ref<FileObject[]>([
@@ -44,22 +45,16 @@ const items = ref<FileObject[]>([
 ]);
 
 /** fuinction เรียกข้อมูลลิงก์ดาวนฺโหลด*/
-function onClickfetchDocument(fileName: string, type: string) {
+async function onClickfetchDocument(fileName: string, type: string) {
   if (evaluateId.value) {
-    showLoader();
-    http
+    await http
       .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
       .then((res) => {
         const downloadUrl = res.data.downloadUrl;
         type === "COPPY" && coppyLink(downloadUrl);
         type === "CHECK" && (statusFile.value = true);
       })
-      .catch(() => {})
-      .finally(() => {
-        setTimeout(() => {
-          hideLoader();
-        }, 1500);
-      });
+      .catch(() => {});
   }
 }
 
@@ -71,9 +66,10 @@ async function coppyLink(link: string) {
 }
 
 /** function เรียกข้อมูลวันที่ประกาศ*/
-function fetchCheckDate() {
+async function fetchCheckDate() {
+  isLoading.value = true;
   evaluateId.value &&
-    http
+    (await http
       .get(config.API.evaluationCheckDate(evaluateId.value))
       .then((res) => {
         const data = res.data.result;
@@ -82,7 +78,12 @@ function fetchCheckDate() {
         endDate.setDate(endDate.getDate() + 30);
         dateEndAnnounce.value = date2Thai(endDate);
       })
-      .catch(() => {});
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        isLoading.value = false;
+      }));
 }
 
 /** Hook lifecycle*/
@@ -91,10 +92,16 @@ onMounted(async () => {
   await onClickfetchDocument("บันทึกแจ้งผลการประกาศคัดเลือก", "CHECK");
 });
 </script>
+`
 
 <template>
   <div class="row col-12 q-pa-sm">
-    <div class="row col-12 q-col-gutter-sm">
+    <q-skeleton
+      v-if="isLoading"
+      type="Qcard"
+      style="width: 100%; height: 300px"
+    />
+    <div v-else class="row col-12 q-col-gutter-sm">
       <div class="col-12 text-center">
         <q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
           <div class="text-weight-bold">
diff --git a/src/modules/06_evaluate/components/step/step6.vue b/src/modules/06_evaluate/components/step/step6.vue
index efccae3..de5ef96 100644
--- a/src/modules/06_evaluate/components/step/step6.vue
+++ b/src/modules/06_evaluate/components/step/step6.vue
@@ -50,6 +50,10 @@ const formCommand = reactive<FormCommand>({
 
 const modalView = ref<boolean>(false);
 
+const isLoading = ref<boolean>(false); // ใช้สำหรับเช็คการโหลดไฟล์
+const isLoadingFile = ref<boolean>(false);
+const isLoadingDate = ref<boolean>(false);
+
 /** function อัปเดท ผลงาน,ผู้เซ็นเอกสาร*/
 function updateInput(value: any) {
   const ref = {
@@ -85,16 +89,18 @@ async function fetchPathUpload(
     showLoader();
     await http
       .post(config.API.loadPathDocument(volume, id), body)
-      .then((res) => {
+      .then(async (res) => {
         const foundKey: string | undefined = Object.keys(res.data).find(
           (key) =>
             res.data[key]?.fileName !== undefined &&
             res.data[key]?.fileName !== ""
         );
-        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
+        foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
   }
@@ -129,7 +135,7 @@ async function uploadfile(uploadUrl: string, file: any) {
  * @param id ประเมิน
  */
 async function fetcheSigner(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.evaluationSignerDoc2(id))
     .then((res) => {
@@ -148,40 +154,43 @@ async function fetcheSigner(id: string) {
       formCommand.author = data.authorDoc2;
       formCommand.subject = data.subjectDoc2;
       formCommand.assignedPosition = data.assignedPosition;
-
       assignedPosLevel.value = data.assignedPosLevel;
-
       store.statusUpload6 = data.isUpdated;
     })
     .catch((err) => {
       messageError($q, err);
-      // store.statusUpload6 = false;
-      // getCommander();
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
 const dateEndPrepareDoc2 = ref<string | null>(date2Thai(new Date()));
 /** functoin เรียกข้อมูลวันสุดท้ายของการส่งผลงาน*/
 async function fetchCheckDate() {
-  evaluateId.value &&
-    (await http
-      .get(config.API.evaluationCheckDate(evaluateId.value))
-      .then((res) => {
-        const data = res.data.result;
+  if (!evaluateId.value) return;
+  isLoadingDate.value = true;
+  await http
+    .get(config.API.evaluationCheckDate(evaluateId.value))
+    .then((res) => {
+      const data = res.data.result;
 
-        const endDate = new Date(data.dateEndAnnounce);
-        endDate.setDate(endDate.getDate() + 180);
-        dateEndPrepareDoc2.value = date2Thai(endDate);
-      })
-      .catch((err) => {}));
+      const endDate = new Date(data.dateEndAnnounce);
+      endDate.setDate(endDate.getDate() + 180);
+      dateEndPrepareDoc2.value = date2Thai(endDate);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      isLoadingDate.value = false;
+    });
 }
 
 const downloadUrl = ref<string>("");
 /** function เช็คไฟล์อัปโหลด*/
 async function checkDoc() {
+  isLoadingFile.value = true;
   await http
     .get(
       config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
@@ -195,26 +204,10 @@ async function checkDoc() {
       };
 
       emit("update:form", formCommand, ref);
+      isLoadingFile.value = false;
     });
 }
 
-// function getCommander() {
-//   http
-//     .get(config.API.searchCommander)
-//     .then((res) => {
-//       const data = res.data.result;
-//       formCommand.commanderFullname = data.commanderFullname;
-//       formCommand.commanderPosition = data.commanderPosition;
-//       formCommand.commanderAboveFullname = data.commanderAboveFullname;
-//       formCommand.commanderAbovePosition = data.commanderAbovePosition;
-//       formCommand.commanderOrg = data.commanderOrg;
-//       formCommand.commanderAboveOrg = data.commanderAboveOrg;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     });
-// }
-
 function onAddSubject() {
   formCommand.subject.push("");
 }
@@ -256,9 +249,10 @@ onMounted(async () => {
 
 <template>
   <div class="row col-12 q-pa-sm">
-    <div class="row q-col-gutter-sm">
+    <div class="row col-12 q-col-gutter-sm">
       <div class="col-12 text-center">
-        <q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
+        <q-skeleton v-if="isLoadingDate" type="Qcard" height="50px" />
+        <q-banner v-else rounded class="text-weight-bold text-red-14 bg-red-1">
           <div class="text-weight-bold">
             <q-icon name="info_outline" color="red-14" size="24px" />
             วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
@@ -268,7 +262,14 @@ onMounted(async () => {
 
       <!-- ผลงาน -->
       <div class="col-12">
-        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
+        <q-skeleton v-if="isLoading" type="Qcard" height="200px" width="100%" />
+
+        <q-card
+          v-else
+          bordered
+          class="shadow-0"
+          style="border: 1px solid #d6dee1"
+        >
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
           <div class="col-12"><q-separator /></div>
           <div class="col-12 q-pa-sm">
@@ -372,7 +373,13 @@ onMounted(async () => {
 
       <!-- เลือกผู้เซ็นเอกสาร -->
       <div class="col-12">
-        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
+        <q-skeleton v-if="isLoading" type="Qcard" height="200px" width="100%" />
+        <q-card
+          v-else
+          bordered
+          class="shadow-0"
+          style="border: 1px solid #d6dee1"
+        >
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
             เลือกผู้เซ็นเอกสาร
           </div>
@@ -541,7 +548,13 @@ onMounted(async () => {
 
       <!-- อัปไฟล์ -->
       <div class="col-12" v-if="store.currentStep === 6">
-        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
+        <q-skeleton type="Qcard" height="100px" v-if="isLoadingFile" />
+        <q-card
+          v-else
+          bordered
+          class="shadow-0"
+          style="border: 1px solid #d6dee1"
+        >
           <div class="col-12 row bg-grey-1">
             <div class="text-weight-medium q-py-sm q-px-md">เอกสารเล่ม 2</div>
             <q-space />
diff --git a/src/modules/06_evaluate/components/step/step7.vue b/src/modules/06_evaluate/components/step/step7.vue
index a6cf6b9..9528391 100644
--- a/src/modules/06_evaluate/components/step/step7.vue
+++ b/src/modules/06_evaluate/components/step/step7.vue
@@ -13,7 +13,7 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const route = useRoute();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 
 /** emit*/
 const emit = defineEmits(["update:file"]);
@@ -22,28 +22,25 @@ const emit = defineEmits(["update:file"]);
 const evaluateId = ref<string>(route.params.id.toString());
 
 const selectedItem = ref(1);
+const isLoading = ref(false);
 
 /** function เรีกยเอกสาร*/
 async function fetchDocument() {
-  showLoader();
-  evaluateId.value &&
-    (await http
-      .get(
-        config.API.loadFileDocument(
-          "เล่ม 2",
-          evaluateId.value,
-          "1-เอกสารเล่ม 2"
-        )
-      )
-      .then(async (res) => {
-        await downloadFile(res.data.downloadUrl);
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      }));
+  if (!evaluateId.value) return;
+  isLoading.value = true;
+  await http
+    .get(
+      config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
+    )
+    .then(async (res) => {
+      await downloadFile(res.data.downloadUrl);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
 /**
@@ -76,7 +73,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-list separator>
+  <q-skeleton
+    v-if="isLoading"
+    class="q-pa-md"
+    type="Qcard"
+    style="width: 100%; height: 100%"
+  />
+  <q-list separator v-else>
     <q-item
       clickable
       v-ripple
diff --git a/src/modules/06_evaluate/components/step/step8.vue b/src/modules/06_evaluate/components/step/step8.vue
index ef226e4..5968df6 100644
--- a/src/modules/06_evaluate/components/step/step8.vue
+++ b/src/modules/06_evaluate/components/step/step8.vue
@@ -107,9 +107,11 @@ async function uploadfile(uploadUrl: string, file: any) {
 }
 
 const downloadUrl = ref<string>("");
+const isLoadingFile = ref<boolean>(false);
 /** function เช็คไฟล์อัปโหลด*/
-function checkDoc() {
-  http
+async function checkDoc() {
+  isLoadingFile.value = true;
+  await http
     .get(
       config.API.loadFileDocument(
         "เล่ม 2",
@@ -119,6 +121,9 @@ function checkDoc() {
     )
     .then((res: any) => {
       downloadUrl.value = res.data.downloadUrl;
+    })
+    .finally(() => {
+      isLoadingFile.value = false;
     });
 }
 
@@ -148,12 +153,9 @@ async function fetcheSigner(id: string) {
 /** lifecycleHook*/
 onMounted(async () => {
   try {
-    showLoader();
     await Promise.all([checkDoc(), fetcheSigner(evaluateId.value)]);
   } catch (error) {
     console.log(error);
-  } finally {
-    hideLoader();
   }
 });
 </script>
@@ -178,7 +180,12 @@ onMounted(async () => {
           (store.currentStep !== 8 && downloadUrl) || store.currentStep == 8
         "
       >
-        <q-card class="shadow-0" bordered>
+        <q-skeleton
+          type="Qcard"
+          :height="store.currentStep !== 8 ? '50px' : '100px'"
+          v-if="isLoadingFile"
+        />
+        <q-card v-else class="shadow-0" bordered>
           <div class="row col-12 bg-grey-1 q-px-sm q-py-xs items-center">
             <div class="text-weight-medium">เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
             <q-space />
diff --git a/src/modules/06_evaluate/components/viewstep/popupHistory.vue b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
index fd03ab9..d4d466b 100644
--- a/src/modules/06_evaluate/components/viewstep/popupHistory.vue
+++ b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
@@ -9,12 +9,15 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 
 import HeaderDialog from "@/components/DialogHeader.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const route = useRoute();
 const mixins = useCounterMixin();
 const { showLoader, hideLoader, date2Thai, messageError } = mixins;
 
+const isLoading = ref<boolean>(false);
+
 const evaluateId = computed(() => {
   const id = route.params.id ? route.params.id.toString() : "";
   return id;
@@ -85,7 +88,7 @@ async function fetchListHistory(id: string) {
     minute: "2-digit",
     second: "2-digit",
   };
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.evaluationHistory(id))
     .then((res) => {
@@ -104,7 +107,7 @@ async function fetchListHistory(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -124,7 +127,9 @@ watch(
       <q-card-section>
         <div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
           <div class="col-12">
-            <q-table
+            <SkeletonTable v-if="isLoading" :columns="columns" />
+            <d-table
+              v-else
               ref="table"
               flat
               bordered
@@ -161,7 +166,7 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-            </q-table>
+            </d-table>
           </div>
         </div>
       </q-card-section>
@@ -169,31 +174,4 @@ watch(
   </q-dialog>
 </template>
 
-<style lang="scss" scoped>
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/modules/06_evaluate/components/viewstep/tableStep1.vue b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
index a19e67b..22aa11b 100644
--- a/src/modules/06_evaluate/components/viewstep/tableStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const props = defineProps({
   columns: {
     type: Array as () => any[],
@@ -8,12 +10,18 @@ const props = defineProps({
     type: Array as () => any[],
     require: true,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
 <template>
   <div class="q-pa-sm row col-12">
+    <SkeletonTable class="col-12" v-if="isLoading" :columns="props.columns" />
     <d-table
+      v-else
       ref="table"
       flat
       bordered
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 7834f54..83eae27 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -2,7 +2,7 @@ div
 <script setup lang="ts">
 import { reactive, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -21,6 +21,7 @@ import type {
 /** importComponents*/
 import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
 import HeaderDialog from "@/components/DialogHeader.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use*/
 const mixin = useCounterMixin();
@@ -29,8 +30,7 @@ const storeEva = useEvaluateStore();
 const storeData = useDataStore();
 const $q = useQuasar();
 const route = useRoute();
-const { showLoader, hideLoader, messageError, date2Thai, findOrgNameHtml } =
-  mixin;
+const { messageError, date2Thai, findOrgNameHtml } = mixin;
 const {
   columnsCertificates,
   columnSalaries,
@@ -76,8 +76,19 @@ const formDetail = reactive<any>({
   honor: [],
 });
 
+const isLoading = reactive({
+  loadDetail: false,
+  loadEducation: false,
+  loadCertificate: false,
+  loadSalary: false,
+  loadTraining: false,
+  loadAssessment: false,
+  loadExperience: false,
+});
+
 /** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
 async function fetchDetail() {
+  isLoading.loadDetail = true;
   try {
     if (!storeData.dataprofilePosition) {
       const res = await http.get(config.API.profilePosition());
@@ -87,6 +98,8 @@ async function fetchDetail() {
     }
   } catch (error) {
     messageError($q, error);
+  } finally {
+    isLoading.loadDetail = false;
   }
 }
 
@@ -109,58 +122,113 @@ async function updateFormDetail(data: DataProfile) {
   formDetail.posExecutive = data.posExecutiveName;
   formDetail.positionArea = data.positionArea;
   await fetchDataAllDetail();
-
   emit("update:formDeital", formDetail);
 }
 
 async function fetchDataAllDetail() {
   // ดึงข้อมูลประวัติการศึกษา
-  http.get(config.API.dataUserEducations).then((res) => {
-    formDetail.educations = res.data.result;
-  });
+  isLoading.loadEducation = true;
+  http
+    .get(config.API.dataUserEducations)
+    .then((res) => {
+      formDetail.educations = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .then(() => {
+      isLoading.loadEducation = false;
+    });
 
   // ดึงข้อมูลใบอนุญาตประกอบวิชาชีพ
-  http.get(config.API.dataUserCertificate("certificate")).then((res) => {
-    formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
-      certificateNo: e.certificateNo,
-      certificateType: e.certificateType,
-      expireDate: e.expireDate,
-      issueDate: e.issueDate,
-      issuer: e.issuer,
-    }));
-  });
+  isLoading.loadCertificate = true;
+  http
+    .get(config.API.dataUserCertificate("certificate"))
+    .then((res) => {
+      formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
+        certificateNo: e.certificateNo,
+        certificateType: e.certificateType,
+        expireDate: e.expireDate,
+        issueDate: e.issueDate,
+        issuer: e.issuer,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadCertificate = false;
+    });
 
   // ดึงข้อมูลประวัติการรับราชการ
-  http.get(config.API.dataUserSalaryPosition).then((res) => {
-    formDetail.salaries = res.data.result;
-  });
+  isLoading.loadSalary = true;
+  http
+    .get(config.API.dataUserSalaryPosition)
+    .then((res) => {
+      formDetail.salaries = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadSalary = false;
+    });
 
   // ดึงข้อมูลประวัติการฝึกอบรมดูงาน
-  http.get(config.API.dataUserCertificate("training")).then((res) => {
-    formDetail.trainings = res.data.result.map((e: any) => ({
-      dateOrder: e.dateOrder,
-      department: e.department,
-      duration: e.duration,
-      endDate: e.endDate,
-      name: e.name,
-      numberOrder: e.numberOrder,
-      place: e.place,
-      startDate: e.startDate,
-      topic: e.topic,
-      yearly: e.yearly,
-    }));
-  });
+  isLoading.loadTraining = true;
+  http
+    .get(config.API.dataUserCertificate("training"))
+    .then((res) => {
+      formDetail.trainings = res.data.result.map((e: any) => ({
+        dateOrder: e.dateOrder,
+        department: e.department,
+        duration: e.duration,
+        endDate: e.endDate,
+        name: e.name,
+        numberOrder: e.numberOrder,
+        place: e.place,
+        startDate: e.startDate,
+        topic: e.topic,
+        yearly: e.yearly,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadTraining = false;
+    });
 
-  http.get(config.API.dataUserPerformance).then((res) => {
-    formDetail.assessments = res.data.result.map((e: any) => ({
-      ...e,
-      isAdd: false,
-    }));
-  });
+  // ดึงข้อมูลประสบการณ์ในการปฏิบัติงาน
+  isLoading.loadExperience = true;
+  http
+    .get(config.API.dataUserPerformance)
+    .then((res) => {
+      formDetail.assessments = res.data.result.map((e: any) => ({
+        ...e,
+        isAdd: false,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadExperience = false;
+    });
 
-  http.get(config.API.dataUserPortfolio).then((res) => {
-    formDetail.experience = res.data.result;
-  });
+  // ดึงข้อมูลผลงานที่เคยเสนอขอ
+  isLoading.loadExperience = true;
+  http
+    .get(config.API.dataUserPortfolio)
+    .then((res) => {
+      formDetail.experience = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadExperience = false;
+    });
 }
 
 /**
@@ -168,40 +236,52 @@ async function fetchDataAllDetail() {
  * @param id ประเมิน
  */
 async function fetchCheckSpec(data: any) {
-  formDetail.userId = data.id;
-  formDetail.citizenId = data.citizenId;
-  formDetail.prefix = data.prefix;
-  formDetail.fullName = data.fullName;
-  formDetail.position = data.position;
-  formDetail.oc = data.oc;
-  formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
-  formDetail.positionLevel = data.positionLevel;
-  formDetail.posNo = data.posNo;
-  formDetail.birthDate = data.birthDate;
-  formDetail.educations = data.educations;
-
-  formDetail.certificates = data.certificates.map((e: CertificatesForm) => ({
-    certificateNo: e.certificateNo,
-    certificateType: e.certificateType,
-    expireDate: date2Thai(e.expireDate),
-    issueDate: date2Thai(e.issueDate),
-    issuer: e.issuer,
-  }));
-  formDetail.salaries = data.salaries;
-  formDetail.trainings = data.trainings.map((e: any) => ({
-    dateOrder: date2Thai(e.dateOrder),
-    department: e.department,
-    duration: e.duration,
-    endDate: date2Thai(e.endDate),
-    name: e.name,
-    numberOrder: e.numberOrder,
-    place: e.place,
-    startDate: date2Thai(e.startDate),
-    topic: e.topic,
-    yearly: e.yearly,
-  }));
-  formDetail.assessments = data.performances;
-  formDetail.experience = data.portfolios;
+  isLoading.loadEducation = true;
+  isLoading.loadCertificate = true;
+  isLoading.loadSalary = true;
+  isLoading.loadTraining = true;
+  isLoading.loadExperience = true;
+  try {
+    formDetail.userId = data.id;
+    formDetail.citizenId = data.citizenId;
+    formDetail.prefix = data.prefix;
+    formDetail.fullName = data.fullName;
+    formDetail.position = data.position;
+    formDetail.oc = data.oc;
+    formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
+    formDetail.positionLevel = data.positionLevel;
+    formDetail.posNo = data.posNo;
+    formDetail.birthDate = data.birthDate;
+    formDetail.educations = data.educations;
+    formDetail.certificates = data.certificates.map((e: CertificatesForm) => ({
+      certificateNo: e.certificateNo,
+      certificateType: e.certificateType,
+      expireDate: date2Thai(e.expireDate),
+      issueDate: date2Thai(e.issueDate),
+      issuer: e.issuer,
+    }));
+    formDetail.salaries = data.salaries;
+    formDetail.trainings = data.trainings.map((e: any) => ({
+      dateOrder: date2Thai(e.dateOrder),
+      department: e.department,
+      duration: e.duration,
+      endDate: date2Thai(e.endDate),
+      name: e.name,
+      numberOrder: e.numberOrder,
+      place: e.place,
+      startDate: date2Thai(e.startDate),
+      topic: e.topic,
+      yearly: e.yearly,
+    }));
+    formDetail.assessments = data.performances;
+    formDetail.experience = data.portfolios;
+  } finally {
+    isLoading.loadEducation = false;
+    isLoading.loadCertificate = false;
+    isLoading.loadSalary = false;
+    isLoading.loadTraining = false;
+    isLoading.loadExperience = false;
+  }
 }
 
 /**
@@ -218,6 +298,7 @@ function formattedNumber(x: number) {
 
 /** get data */
 function getData() {
+  isLoading.loadDetail = true;
   http
     .get(config.API.dataUserGovernment)
     .then(async (res) => {
@@ -229,6 +310,9 @@ function getData() {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadDetail = false;
     });
 }
 
@@ -298,7 +382,6 @@ function onDeletePerformance(index: number) {
 
 onMounted(async () => {
   try {
-    showLoader();
     const promises = [];
 
     if (route.name === "evaluate-add") {
@@ -315,7 +398,6 @@ onMounted(async () => {
   } catch (error) {
     console.log(error);
   } finally {
-    hideLoader();
   }
 });
 </script>
@@ -327,7 +409,10 @@ onMounted(async () => {
     :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;'"
   >
     <div class="row col-12">
-      <q-card class="col-12 cardSp1" bordered>
+      <div class="col-12" v-if="isLoading.loadDetail">
+        <q-skeleton type="Qcard" height="200px" class="q-mb-md" />
+      </div>
+      <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
           <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
         </div>
@@ -430,7 +515,10 @@ onMounted(async () => {
         </div>
       </q-card>
 
-      <q-card class="col-12 cardSp1" bordered>
+      <div class="col-12" v-if="isLoading.loadEducation">
+        <q-skeleton type="Qcard" height="200px" class="q-mb-md" />
+      </div>
+      <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
           <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
         </div>
@@ -571,6 +659,7 @@ onMounted(async () => {
           class="col-12"
           :columns="columnsCertificates"
           :row="formDetail.certificates"
+          :is-loading="isLoading.loadCertificate"
         />
       </q-card>
 
@@ -579,8 +668,14 @@ onMounted(async () => {
           <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
         </div>
         <div class="col-12"><q-separator /></div>
+
         <div class="col-10">
+          <SkeletonTable
+            v-if="isLoading.loadSalary"
+            :columns="columnSalaries"
+          />
           <d-table
+            v-else
             ref="table"
             row-key="id"
             flat
@@ -637,6 +732,7 @@ onMounted(async () => {
           class="col-12"
           :columns="columnTraining"
           :row="formDetail.trainings"
+          :is-loading="isLoading.loadTraining"
         />
       </q-card>
 
@@ -649,6 +745,7 @@ onMounted(async () => {
           class="col-12"
           :columns="columnExperience"
           :row="formDetail.experience"
+          :is-loading="isLoading.loadExperience"
         />
       </q-card>
 
@@ -671,7 +768,13 @@ onMounted(async () => {
         <div class="col-12"><q-separator /></div>
         <div class="col-10">
           <div class="q-pa-sm row col-12">
+            <SkeletonTable
+              v-if="isLoading.loadExperience"
+              :columns="columnAssessments"
+              class="col-12"
+            />
             <d-table
+              v-else
               flat
               bordered
               :columns="columnAssessments"
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index 43d520d..eaf2ded 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -23,9 +23,10 @@ const mixin = useCounterMixin();
 const store = useEvaluateStore();
 const dataStore = useDataStore();
 const router = useRouter();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 
 /** ตัวแปร*/
+const isLoading = ref<boolean>(false);
 const modal = ref<boolean>(false);
 const menu = ref<ListMenu>();
 const listMenu = ref<ListMenu[]>([
@@ -73,7 +74,8 @@ function openExpert() {
 
 /** function เรียกรายการประเมิน*/
 async function fetchEvaluteList() {
-  showLoader();
+  isLoading.value = true;
+
   const body = {
     page: pagination.value.page,
     pageSize: pagination.value.rowsPerPage,
@@ -93,7 +95,7 @@ async function fetchEvaluteList() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -326,6 +328,7 @@ onMounted(async () => {
               v-model:total="total"
               v-model:total-list="totalList"
               v-model:pagination="pagination"
+              :isLoading="isLoading"
             />
           </div>
         </q-card>
diff --git a/src/modules/10_registry/01_Information/01_Information.vue b/src/modules/10_registry/01_Information/01_Information.vue
index fc736f7..393767a 100644
--- a/src/modules/10_registry/01_Information/01_Information.vue
+++ b/src/modules/10_registry/01_Information/01_Information.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
-import { useQuasar, type QTableColumn, type QTableProps } from "quasar";
+import { is, useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 
-import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+/** import Type */
 import type { InformationData } from "@/interface/Main";
 
-const link = ref<string>("");
+/** import Component */
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
 const $q = useQuasar();
 const dataStore = useDataStore();
-const mixin = useCounterMixin();
 const {
   showLoader,
   hideLoader,
@@ -21,16 +22,23 @@ const {
   date2Thai,
   dialogConfirm,
   success,
-} = mixin;
-
-const editPhone = ref<boolean>(false);
-const editEmail = ref<boolean>(false);
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
-const modalHistory = ref<boolean>(false);
-const phone = ref<string>("");
-const email = ref<string>("");
+} = useCounterMixin();
 
+const link = ref<string>(""); // link สำหรับดึงข้อมูล
+const editPhone = ref<boolean>(false); // แก้ไขเบอร์โทร
+const editEmail = ref<boolean>(false); // แก้ไขอีเมล
+const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติการแก้ไข (สำหรับ filter)
+const modalHistory = ref<boolean>(false); // เปิด modal ประวัติการแก้ไขข้อมูลส่วนตัว
+const phone = ref<string>(""); // เบอร์โทร
+const email = ref<string>(""); // อีเมล
+const isLoading = ref<boolean>(false); // ตัวแปรโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรโหลดข้อมูลประวัติการแก้ไข
+const mainEmail = ref<string>(""); // อีเมลหลัก
+const mainPhone = ref<string>(""); // เบอร์โทรหลัก
+const isValidPhone = ref<boolean>(true); // validate เบอร์โทร
+const isValidEmail = ref<boolean>(true); // validate อีเมล
+const emailVerify = ref<string | null>(null); // สถานะการยืนยันอีเมล
 /** ตัวแปรข้อมูล */
 const formDataInformation = reactive<InformationData>({
   rank: "", //ยศ
@@ -48,8 +56,6 @@ const formDataInformation = reactive<InformationData>({
   phone: "", //เบอร์โทร
   email: "",
 });
-
-const emailVerify = ref<string | null>(null);
 const visibleColumnsHistory = ref<string[]>([
   "citizenId",
   "prefix",
@@ -237,27 +243,19 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory() {
-  modalHistory.value = true;
-}
-
-const mainEmail = ref<string>("");
-const mainPhone = ref<string>("");
-
+/** ตรวจสอบอีเมล */
 const isCheckEmail = computed(() => {
   return mainEmail.value === formDataInformation.email ? true : false;
 });
 
+/** ตรวจสอบเบอร์โทร */
 const isCheckPhone = computed(() => {
-  console.log("mainPhone", mainPhone.value);
-  console.log("formDataInformation", formDataInformation.phone);
-
   return mainPhone.value === formDataInformation.phone ? true : false;
 });
 
-/** get data */
+/** ฟังก์ชันดึงข้อมูลประวัติส่วนตัว */
 async function getData() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.dataUserInformationByType(link.value))
     .then(async (res) => {
@@ -285,24 +283,27 @@ async function getData() {
       phone.value = data.phone;
 
       emailVerify.value = data.statusEmail;
-      hideLoader();
     })
 
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
-/** get history */
-function getHistory() {
+/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataStore.officerType == "OFFICER"
       ? config.API.dataUserInformatioHistory("")
       : config.API.dataUserInformatioHistory("-employee");
-  showLoader();
-  http
+
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -313,14 +314,16 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
-const isValidPhone = ref<boolean>(true); // validate เบอร์โทร
-const isValidEmail = ref<boolean>(true); // validate อีเมล
+/** ฟังก์ชันเปิด modal ประวัติการแก้ไขข้อมูลส่วนตัว */
+function onHistory() {
+  modalHistory.value = true;
+}
 
-/** บันทึกเบอร์โทร */
+/** ฟังก์ชันบันทึกเบอร์โทร */
 async function onSavePhone() {
   if (!formDataInformation.phone || formDataInformation.phone.length != 10) {
     isValidPhone.value = false;
@@ -353,7 +356,7 @@ async function onSavePhone() {
   }
 }
 
-/** บันทึก email */
+/** ฟังก์ชันบันทึก email */
 async function onSaveEmail() {
   if (!formDataInformation.email) {
     isValidEmail.value = false;
@@ -388,6 +391,7 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <div class="col-12">
     <q-toolbar class="q-px-none">
@@ -402,13 +406,17 @@ onMounted(async () => {
         dense
         round
         size="14px"
+        :loading="isLoading"
         @click="onHistory"
       >
         <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
       </q-btn>
     </q-toolbar>
     <q-card bordered class="bg-grey-1 q-pa-md">
-      <div class="row">
+      <div v-if="isLoading">
+        <q-skeleton height="160px" />
+      </div>
+      <div v-else class="row">
         <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
           <div class="row">
             <div class="col-4 text-grey-6 text-weight-medium">
@@ -670,5 +678,6 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
diff --git a/src/modules/10_registry/01_Information/02_ChangeName.vue b/src/modules/10_registry/01_Information/02_ChangeName.vue
index dcac788..b9fe939 100644
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/src/modules/10_registry/01_Information/02_ChangeName.vue
@@ -1,33 +1,29 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** import type*/
+import { useQuasar, type QTableProps } from "quasar";
 import type { ChangNameRows } from "@/modules/10_registry/interface/response/01_Information";
-import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
+/** import component */
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const rows = ref<ChangNameRows[]>([]);
-const rowsData = ref<ChangNameRows[]>([]);
-const idByrow = ref<string>("");
-const filter = ref<string>("");
-const rowsHistory = ref<ChangNameRows[]>([]);
-const rowsHistoryData = ref<ChangNameRows[]>([]);
-const mode = ref<boolean>($q.screen.gt.xs);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+  useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุล
+const rows = ref<ChangNameRows[]>([]); // ข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุล
+const rowsData = ref<ChangNameRows[]>([]); // ข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุลสำหรับค้นหา
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
 const visibleColumns = ref<string[]>([
   "prefix",
   "firstName",
@@ -98,93 +94,10 @@ const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
-const visibleColumnsHistory = ref<string[]>([
-  "prefix",
-  "firstName",
-  "lastName",
-  "status",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้าชื่อ",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "firstName",
-    align: "left",
-    label: "ชื่อ",
-    sortable: true,
-    field: "firstName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastName",
-    align: "left",
-    label: "นามสกุล",
-    sortable: true,
-    field: "lastName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะการเปลี่ยนชื่อ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByrow.value = id;
-}
-
-/** get data */
+/** ฟังก์ชันดึงข้อมูลประวัติการเปลี่ยนชื่อ */
 async function getData() {
-  showLoader();
-  http
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserChangeNameByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -195,33 +108,11 @@ async function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
-    });
-}
-
-/** get history */
-function getHistory() {
-  showLoader();
-  http
-    .get(
-      config.API.dataUserChangeNameHistoryByType(link.value) +
-        `/${idByrow.value}`
-    )
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = data;
-      rowsHistoryData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -230,9 +121,10 @@ function onSearch() {
   );
 }
 
-/**
- * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
+/***
+ * ฟังก์ชันดาวน์โหลดไฟล์เอกสารหลักฐาน
  * @param id รายการที่ต้องการโหลด
+ * @param profileId รหัสโปรไฟล์ของผู้ใช้
  */
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
@@ -263,8 +155,8 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -301,97 +193,96 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows.length !== 0 ? rows : []"
-      :columns="columns"
-      :grid="!mode"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
 
-      <template v-if="mode" v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else>
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="green"
-              flat
-              dense
-              round
-              icon="mdi-file-document-outline"
-              @click="onDownloadFile(props.row.id, props.row.profileId)"
-            >
-              <q-tooltip>ดาวน์โหลด</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-else v-slot:item="props">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-          <q-card bordered flat>
-            <q-list dense class="q-mt-lg relative-position">
-              <q-td auto-width>
-                <q-btn
-                  color="green"
-                  flat
-                  dense
-                  round
-                  class="absolute_button"
-                  icon="mdi-file-document-outline"
-                  @click="onDownloadFile(props.row.id, props.row.profileId)"
-                >
-                  <q-tooltip>ดาวน์โหลด</q-tooltip>
-                </q-btn>
-              </q-td>
-              <q-item v-for="col in props.cols" :key="col.name">
-                <q-item-section>
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
-                    col.label
-                  }}</q-item-label>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label class="text-dark text-weight-medium">{{
-                    col.value ? col.value : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </template>
-    </d-table>
+    <div v-if="isLoading">
+      <SkeletonTable :columns="columns" />
+    </div>
+
+    <div class="col-12" v-else>
+      <d-table
+        flat
+        dense
+        bordered
+        virtual-scroll
+        :rows="rows.length !== 0 ? rows : []"
+        :columns="columns"
+        :grid="!mode"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+        :virtual-scroll-sticky-size-start="48"
+        v-model:pagination="pagination"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+
+        <template v-if="mode" v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="green"
+                flat
+                dense
+                round
+                icon="mdi-file-document-outline"
+                @click="onDownloadFile(props.row.id, props.row.profileId)"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-else v-slot:item="props">
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <q-list dense class="q-mt-lg relative-position">
+                <q-td auto-width>
+                  <q-btn
+                    color="green"
+                    flat
+                    dense
+                    round
+                    class="absolute_button"
+                    icon="mdi-file-document-outline"
+                    @click="onDownloadFile(props.row.id, props.row.profileId)"
+                  >
+                    <q-tooltip>ดาวน์โหลด</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section>
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
   </div>
-  <DialogHistory
-    v-model:modal="modalHistory"
-    :title="'ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล'"
-    :getData="getHistory"
-    :rows="rowsHistory"
-    :rows-data="rowsHistoryData"
-    :visibleColumns="visibleColumnsHistory"
-    :columns="columnsHistory"
-  />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/01_Information/03_Address.vue b/src/modules/10_registry/01_Information/03_Address.vue
index e848b40..b8e1652 100644
--- a/src/modules/10_registry/01_Information/03_Address.vue
+++ b/src/modules/10_registry/01_Information/03_Address.vue
@@ -6,8 +6,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 
+/** import type */
 import type {
   Address,
   Provinces,
@@ -15,28 +15,26 @@ import type {
   SubDistricts,
 } from "@/modules/10_registry/interface/response/01_Information";
 
-//history dialog
+/** import component */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonAddress from "@/modules/10_registry/components/skeleton/Address.vue";
 
-const link = ref<string>("");
-const store = useRegistryInFormationStore();
-const dataStore = useDataStore();
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const dataStore = useDataStore();
+const { messageError, date2Thai } = useCounterMixin();
 
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูลที่อยู่
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลที่อยู่
+const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติที่อยู่
+const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติที่อยู่สำหรับค้นหา
+const modalHistory = ref<boolean>(false); // สถานะการแสดงโมดัลประวัติที่อยู่
 const formData = reactive({
   registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
   registrationProvince: "", //จังหวัด
   registrationDistrict: "", //เขต / อำเภอ
   registrationSubDistrict: "", //แขวง / ตำบล
   registrationZipCode: "", //รหัสไปรษณีย์
-
   currentAddress: "", //ที่อยู่ปัจจุบัน
   currentProvince: "", //จังหวัด
   currentDistrict: "", //เขต / อำเภอ
@@ -44,11 +42,11 @@ const formData = reactive({
   currentZipCode: "", //รหัสไปรษณีย์
 });
 
-const provinceData = ref<Provinces[]>([]);
-const districtRegistration = ref<Districts[]>([]);
-const districtCurrent = ref<Districts[]>([]);
-const subDistrictRegistration = ref<SubDistricts[]>([]);
-const subDistrictCurrent = ref<SubDistricts[]>([]);
+const provinceData = ref<Provinces[]>([]); // ข้อมูลจังหวัด
+const districtRegistration = ref<Districts[]>([]); // เขต / อำเภอตามทะเบียนบ้าน
+const districtCurrent = ref<Districts[]>([]); // เขต / อำเภอปัจจุบัน
+const subDistrictRegistration = ref<SubDistricts[]>([]); // แขวง / ตำบลตามทะเบียนบ้าน
+const subDistrictCurrent = ref<SubDistricts[]>([]); // แขวง / ตำบลปัจจุบัน
 
 const visibleColumnsHistory = ref<string[]>([
   "currentAddress",
@@ -65,7 +63,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "registrationAddress",
@@ -217,21 +214,18 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory() {
-  modalHistory.value = true;
-}
-
-/** get data */
+/** ฟังก์ชันดึงข้อมูลที่อยู่ */
 async function getData() {
-  showLoader();
-  http
+  await http
     .get(config.API.dataUserAddressByType(link.value))
-    .then((res) => {
+    .then(async (res) => {
       const data: Address = res.data.result;
-      fetchDistrict(data.registrationProvinceId, "1");
-      fetchDistrict(data.currentProvinceId, "2");
-      fetchSubDistrict(data.registrationDistrictId, "1");
-      fetchSubDistrict(data.currentDistrictId, "2");
+      await Promise.all([
+        fetchDistrict(data.registrationProvinceId, "1"),
+        fetchDistrict(data.currentProvinceId, "2"),
+        fetchSubDistrict(data.registrationDistrictId, "1"),
+        fetchSubDistrict(data.currentDistrictId, "2"),
+      ]);
 
       formData.registrationAddress = data.registrationAddress;
       formData.registrationProvince = data.registrationProvinceId;
@@ -247,42 +241,41 @@ async function getData() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
-/** get history */
-function getHistory() {
+/** ฟังก์ชันดึงข้อมูลประวัติที่อยู่ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataStore.officerType == "OFFICER"
       ? config.API.dataUserHistory("")
       : config.API.dataUserHistory("-employee");
-  showLoader();
-  http
+
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
-      console.log("🚀 ~ .then ~ data:", data);
       rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
-/**
- *function fetch ข้อมูลจังหวัด
- */
-function fetchProvince() {
-  http
+function onHistory() {
+  modalHistory.value = true;
+}
+
+/** ฟังก์ชันดึงข้อมูลจังหวัด */
+async function fetchProvince() {
+  await http
     .get(config.API.profileNewProvince)
     .then((res) => {
       const data = res.data.result;
@@ -294,13 +287,13 @@ function fetchProvince() {
 }
 
 /**
- * function fetch ข้อมูลอำเภอ
+ * ฟังก์ชันดึงข้อมูลอำเภอ
  * @param id จังหวัด
  * @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
  */
-function fetchDistrict(id: string | null, position: string) {
+async function fetchDistrict(id: string | null, position: string) {
   if (!id) return;
-  http
+  await http
     .get(config.API.profileNewDistrictByPId(id))
     .then((res) => {
       const data = res.data.result.districts;
@@ -316,13 +309,13 @@ function fetchDistrict(id: string | null, position: string) {
 }
 
 /**
- * function fetch ข้อมูลอำเภ
+ * ฟังก์ชันดึงข้อมูลอำเภอ
  * @param id อำเภอ
  * @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
  */
-function fetchSubDistrict(id: string | null, position: string) {
+async function fetchSubDistrict(id: string | null, position: string) {
   if (!id) return;
-  http
+  await http
     .get(config.API.profileNewSubDistrictByDId(id))
     .then((res) => {
       const data = res.data.result.subDistricts;
@@ -338,8 +331,8 @@ function fetchSubDistrict(id: string | null, position: string) {
 }
 
 /**
- * function แปลงชื้่อจังหวัด
- * @param id
+ * ฟังก์ชันแปลงชื้่อจังหวัด
+ * @param id รหัสจังหวัด
  */
 function convertProvinceName(id: string) {
   const province = provinceData.value.find((e: Provinces) => e.id === id);
@@ -347,8 +340,8 @@ function convertProvinceName(id: string) {
 }
 
 /**
- * function แปลงชื้่ออำเภอ
- * @param id
+ * ฟังก์ชันแปลงชื้่ออำเภอ
+ * @param id รหัสอำเภอ
  */
 function convertDistrictName(id: string, type: string) {
   const data =
@@ -358,8 +351,8 @@ function convertDistrictName(id: string, type: string) {
 }
 
 /**
- * function แปลงชื้่อตำบล
- * @param id
+ * ฟังก์ชัน แปลงชื้่อตำบล
+ * @param id รหัสตำบล
  */
 function convertSubDistrictName(id: string, type: string) {
   const data =
@@ -369,9 +362,14 @@ function convertSubDistrictName(id: string, type: string) {
 }
 
 onMounted(async () => {
+  isLoading.value = true;
   link.value = await dataStore.getProFileType();
-  await fetchProvince();
-  await getData();
+  try {
+    await fetchProvince();
+    await getData();
+  } finally {
+    isLoading.value = false;
+  }
 });
 </script>
 <template>
@@ -386,6 +384,7 @@ onMounted(async () => {
         dense
         round
         size="14px"
+        :loading="isLoading"
         @click="onHistory"
       >
         <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
@@ -402,7 +401,8 @@ onMounted(async () => {
           </q-item>
           <q-separator />
           <q-card-section>
-            <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+            <SkeletonAddress v-if="isLoading" />
+            <div v-else class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
               <div class="row">
                 <div class="col-5 text-grey-6 text-weight-medium">
                   ที่อยู่ตามทะเบียนบ้าน
@@ -481,7 +481,8 @@ onMounted(async () => {
           </q-item>
           <q-separator />
           <q-card-section>
-            <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+            <SkeletonAddress v-if="isLoading" />
+            <div v-else class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
               <div class="row">
                 <div class="col-5 text-grey-6 text-weight-medium">
                   ที่อยู่ปัจจุบัน
@@ -547,5 +548,6 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
diff --git a/src/modules/10_registry/01_Information/04_Family.vue b/src/modules/10_registry/01_Information/04_Family.vue
index c40a590..97bf98e 100644
--- a/src/modules/10_registry/01_Information/04_Family.vue
+++ b/src/modules/10_registry/01_Information/04_Family.vue
@@ -1,33 +1,28 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, reactive, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 import { useDataStore } from "@/stores/data";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { FormChildren } from "@/modules/10_registry/interface/index/Family";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonFamily from "@/modules/10_registry/components/skeleton/Family.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-
-const idFamily = ref<string>("");
-const store = useRegistryInFormationStore();
 const dataStore = useDataStore();
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
+const { messageError, date2Thai } = useCounterMixin();
 
-const typeForm = ref<string>("");
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
-const fatherData = reactive<any>({
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลครอบครัว
+const idFamily = ref<string>(""); // ID ของครอบครัว
+const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติครอบครัว
+const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติครอบครัวสำหรับค้นหา
+const typeForm = ref<string>(""); // ประเภทของข้อมูลที่แสดง (father, mother, couple, children)
+const modalHistory = ref<boolean>(false); // สถานะการแสดงประวัติครอบครัว
+const fatherData = reactive({
   isLive: null,
   citizenId: "",
   prefix: "",
@@ -36,7 +31,7 @@ const fatherData = reactive<any>({
   job: "",
   profileId: "",
 });
-const motherData = reactive<any>({
+const motherData = reactive({
   isLive: null,
   citizenId: "",
   prefix: "",
@@ -45,7 +40,7 @@ const motherData = reactive<any>({
   job: "",
   profileId: "",
 });
-const coupleData = reactive<any>({
+const coupleData = reactive({
   isLive: null,
   citizenId: "",
   prefix: "",
@@ -56,7 +51,6 @@ const coupleData = reactive<any>({
   statusMarital: "",
   profileId: "",
 });
-
 const childData = ref<FormChildren[]>([]);
 
 const visibleColumnsHistory = ref<string[]>([
@@ -161,21 +155,26 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-const checkFatherData = ref<boolean>(false);
-const checkMotherData = ref<boolean>(false);
-const checkCoupleData = ref<boolean>(false);
-const checkChildData = ref<boolean>(false);
+const checkFatherData = ref<boolean>(false); // สถานะการมีข้อมูลบิดา
+const checkMotherData = ref<boolean>(false); // สถานะการมีข้อมูลมารดา
+const checkCoupleData = ref<boolean>(false); // สถานะการมีข้อมูลคู่สมรส
+const checkChildData = ref<boolean>(false); // สถานะการมีข้อมูลบุตร
 
-function onHistory(type: string, id: string) {
-  modalHistory.value = true;
-  typeForm.value = type;
-  idFamily.value = id ? id : "user";
-}
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูล
+const isLoading = reactive({
+  father: false,
+  mother: false,
+  couple: false,
+});
 
-/** get data */
+/**
+ * ฟังก์ชันดึงข้อมูลสมาชิกในครอบครัว
+ * @param type ประเภทข้อมูล (father, mother, couple, children)
+ */
 async function getData(type: string) {
-  showLoader();
-  http
+  (isLoading as any)[type] = true;
+
+  await http
     .get(config.API.dataUserFamilyByType(link.value, type))
     .then((res) => {
       const data = res.data.result;
@@ -219,14 +218,24 @@ async function getData(type: string) {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
+      (isLoading as any)[type] = false;
     });
 }
 
-/** get history */
-function getHistory() {
+/**
+ * ฟังก์ชันเปิดประวัติการแก้ไขข้อมูล
+ * @param type ประเภทข้อมูล (father, mother, couple, children)
+ * @param id ID ของครอบครัว (ใช้สำหรับบุตร)
+ */
+function onHistory(type: string, id: string) {
+  modalHistory.value = true;
+  typeForm.value = type;
+  idFamily.value = id ? id : "user";
+}
+
+/** ฟังก์ชันดึงประวัติการแก้ไขข้อมูล */
+async function getHistory() {
+  isLoadingHistory.value = true;
   rowsHistory.value = [];
   rowsHistoryData.value = [];
   const url =
@@ -238,8 +247,7 @@ function getHistory() {
           idFamily.value
         );
 
-  showLoader();
-  http
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -261,7 +269,7 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
@@ -292,12 +300,14 @@ onMounted(async () => {
               flat
               dense
               round
+              :isLoading="isLoading.father"
               size="14px"
               @click="onHistory('father', '')"
             >
               <q-tooltip>ประวัติการแก้ไขข้อมูลบิดา</q-tooltip>
             </q-btn>
-            <div class="col-12">
+            <SkeletonFamily v-if="isLoading.father" :type="'father'" />
+            <div class="col-12" v-else>
               <q-card bordered class="bg-grey-1 q-pa-sm">
                 <div class="row">
                   <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
@@ -366,11 +376,13 @@ onMounted(async () => {
               dense
               round
               size="14px"
+              :isLoading="isLoading.mother"
               @click="onHistory('mother', '')"
             >
               <q-tooltip>ประวัติการแก้ไขข้อมูลมารดา</q-tooltip>
             </q-btn>
-            <div class="col-12">
+            <SkeletonFamily v-if="isLoading.mother" :type="'mother'" />
+            <div v-else class="col-12">
               <q-card bordered class="bg-grey-1 q-pa-sm">
                 <div class="row">
                   <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
@@ -441,12 +453,14 @@ onMounted(async () => {
               flat
               dense
               round
+              :isLoading="isLoading.couple"
               size="14px"
               @click="onHistory('couple', '')"
             >
               <q-tooltip>ประวัติการแก้ไขข้อมูลคู่สมรส</q-tooltip>
             </q-btn>
-            <div class="col-12">
+            <SkeletonFamily v-if="isLoading.couple" :type="'couple'" />
+            <div v-else class="col-12">
               <q-card bordered class="bg-grey-1 q-pa-sm">
                 <div class="row">
                   <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
@@ -632,6 +646,7 @@ onMounted(async () => {
         ? columnsHistory
         : columnsHistory?.filter((e) => e.name !== 'lastNameOld')
     "
+    :is-loading="isLoadingHistory"
   />
 </template>
 
diff --git a/src/modules/10_registry/01_Information/05_Educations.vue b/src/modules/10_registry/01_Information/05_Educations.vue
index 83dd3ef..7e5d2b8 100644
--- a/src/modules/10_registry/01_Information/05_Educations.vue
+++ b/src/modules/10_registry/01_Information/05_Educations.vue
@@ -1,35 +1,33 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
-import { useDataStore } from "@/stores/data";
-//history dialog
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useDataStore } from "@/stores/data";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { EducationProfile } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const rows = ref<EducationProfile[]>([]);
-const rowsData = ref<EducationProfile[]>([]);
-const rowsHistory = ref<EducationProfile[]>([]);
-const rowsHistoryData = ref<EducationProfile[]>([]);
-const idByRow = ref<string>("");
-const filter = ref<string>("");
-const mode = ref<boolean>($q.screen.gt.xs);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const { messageError, date2Thai, onSearchDataTable } = mixin;
 
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติการศึกษา
+const rows = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษา
+const rowsData = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับค้นหา
+const rowsHistory = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับแสดงในโมดัล
+const rowsHistoryData = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับค้นหาในโมดัล
+const idByRow = ref<string>(""); // ID ของแถวที่ถูกเลือกสำหรับดูประวัติ
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
+const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
+const modalHistory = ref<boolean>(false); // สถานะการแสดงประวัติการศึกษา
 const visibleColumns = ref<string[]>([
   "educationLevel",
   "institute",
@@ -266,10 +264,26 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const pagination = ref({
-  // sortBy: "lastUpdatedAt",
-});
-
+const visibleColumnsHistory = ref<string[]>([
+  "educationLevel",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "isHigh",
+  "endDate",
+  "startDate",
+  "finishDate",
+  "note",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "educationLevel",
@@ -486,37 +500,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsHistory = ref<string[]>([
-  "educationLevel",
-  "institute",
-  "degree",
-  "field",
-  "gpa",
-  "country",
-  "duration",
-  "durationYear",
-  "other",
-  "fundName",
-  "isEducation",
-  "isHigh",
-  "endDate",
-  "startDate",
-  "finishDate",
-  "note",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
 
-/** เปิด dialog ประวัติ */
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
+/** ฟังก์ชันดึงข้อมูลการศึกษา */
 async function getData() {
-  showLoader();
-  http
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserEducationsByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -527,16 +515,25 @@ async function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
+      isLoading.value = false;
     });
 }
 
+/**
+ * เปิด dialog ประวัติการศึกษา
+ * @param id ID ของแถวที่ถูกเลือกสำหรับดูประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
 /** get history */
-function getHistory() {
-  showLoader();
-  http
+async function getHistory() {
+  isLoadingHistory.value = true
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserEducationsHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -547,10 +544,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลการศึกษา */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -561,7 +559,6 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-
   await getData();
 });
 </script>
@@ -603,7 +600,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -614,7 +614,6 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -687,6 +686,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขประวัติการศึกษา'"
@@ -695,6 +695,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 
diff --git a/src/modules/10_registry/01_Information/06_Ability.vue b/src/modules/10_registry/01_Information/06_Ability.vue
index be54300..77d35ed 100644
--- a/src/modules/10_registry/01_Information/06_Ability.vue
+++ b/src/modules/10_registry/01_Information/06_Ability.vue
@@ -1,33 +1,35 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
+/** import type */
 import type { AbilityRows } from "@/modules/10_registry/interface/index/Main";
-//history dialog
-import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
-const rows = ref<AbilityRows[]>([]);
-const rowsData = ref<AbilityRows[]>([]);
-const rowsHistory = ref<AbilityRows[]>([]);
-const rowsHistoryData = ref<AbilityRows[]>([]);
-const idByRow = ref<string>("");
-const filter = ref<string>("");
+/** import components */
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+  useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลความสามารถพิเศษ
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติ
+const rows = ref<AbilityRows[]>([]); // ข้อมูลความสามารถพิเศษ
+const rowsData = ref<AbilityRows[]>([]); // ข้อมูลความสามารถพิเศษสำหรับค้นหา
+const rowsHistory = ref<AbilityRows[]>([]); // ข้อมูลประวัติความสามารถพิเศษ
+const rowsHistoryData = ref<AbilityRows[]>([]); // ข้อมูลประวัติความสามารถพิเศษสำหรับค้นหา
+const idByRow = ref<string>(""); // id ของแถวที่เลือก
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
+const modalHistory = ref<boolean>(false); // สถานะการแสดง modal ประวัติการแก้ไข
 const visibleColumns = ref<string[]>([
   "field",
   "detail",
@@ -187,14 +189,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
+/** ฟังก์ชันดึงข้อมูล */
 async function getData() {
-  showLoader();
+  isLoading.value = true;
   http
     .get(config.API.dataUserAbilityByType(link.value))
     .then((res) => {
@@ -206,16 +203,25 @@ async function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันเปิด modal ประวัติการแก้ไขความสามารถพิเศษ
+ * @param id ID ของแถวที่ต้องการดูประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไขความสามารถพิเศษ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserAbilityHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -226,10 +232,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -241,6 +248,7 @@ function onSearch() {
 /**
  * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
  * @param id รายการที่ต้องการโหลด
+ * @param profileId ID ของโปรไฟล์ที่ต้องการโหลด
  */
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
@@ -272,7 +280,6 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -309,7 +316,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -422,6 +432,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขความสามารถพิเศษ'"
@@ -430,8 +441,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/02_Government/01_Government.vue b/src/modules/10_registry/02_Government/01_Government.vue
index f47c4db..62afbc2 100644
--- a/src/modules/10_registry/02_Government/01_Government.vue
+++ b/src/modules/10_registry/02_Government/01_Government.vue
@@ -7,30 +7,26 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
-
 import type {
   ProfileAppointment,
   FormDataGovernment,
 } from "@/modules/10_registry/interface/index/Main";
-//history dialog
+
+/** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import GovernmentSkeleton from "@/modules/10_registry/components/skeleton/Government.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataPerson = useDataStore();
-const checkType = ref<boolean>(
-  dataPerson.officerType == "OFFICER" ? true : false
-);
-const store = useRegistryInFormationStore();
-const { showLoader, hideLoader, messageError, date2Thai, dateToISO } = mixin;
+const { messageError, date2Thai, dateToISO } = useCounterMixin();
 
-const rowsHistory = ref<ProfileAppointment[]>([]);
-const rowsHistoryData = ref<ProfileAppointment[]>([]);
-const modalHistory = ref<boolean>(false);
+const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //สถานะการโหลดประวัติข้อมูล
+const rowsHistory = ref<ProfileAppointment[]>([]); //ข้อมูลประวัติราชการ
+const rowsHistoryData = ref<ProfileAppointment[]>([]); //ข้อมูลประวัติราชการ
+const modalHistory = ref<boolean>(false); //สถานะการเปิด modal ประวัติข้อมูล
 
-/** ตัวแปรข้อมูล */
 const formData = reactive<FormDataGovernment>({
   org: "",
   positionField: "",
@@ -138,7 +134,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
 ]);
 
 /** ไม่เเน่ใจ ใช้เเบบไหน คอมเม้นไว้ก่อน */
-
 // const columnsHistory = ref<QTableProps["columns"]>([
 //   {
 //     name: "oc",
@@ -343,15 +338,14 @@ const columnsHistory = ref<QTableProps["columns"]>([
 //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
 //   },
 // ]);
+const checkType = ref<boolean>(
+  dataPerson.officerType == "OFFICER" ? true : false
+);
 
-function onHistory() {
-  modalHistory.value = true;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserGovernmentByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -378,18 +372,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
+/** ฟังก์ชันเปิด modal ประวัติข้อมูล */
+function onHistory() {
+  modalHistory.value = true;
+}
+
+/** ฟังก์ชันดึงประวัติข้อมูลราชการ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataPerson.officerType == "OFFICER"
       ? config.API.dataUserGovernmentHistory("")
       : config.API.dataUserGovernmentHistory("-employee");
-  showLoader();
-  http
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -400,13 +401,13 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
@@ -421,12 +422,15 @@ onMounted(async () => {
         dense
         round
         size="14px"
+        :isLoading="isLoading"
         @click="onHistory"
       >
         <q-tooltip>ประวัติข้อมูลราชการ</q-tooltip>
       </q-btn>
     </q-toolbar>
-    <q-card bordered class="bg-grey-1 q-pa-md">
+    <GovernmentSkeleton v-if="isLoading" />
+
+    <q-card v-else bordered class="bg-grey-1 q-pa-md">
       <div class="row q-col-gutter-y-sm">
         <div class="col-12 col-sm-12 col-md-6">
           <div class="row q-col-gutter-y-sm">
@@ -584,5 +588,6 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
diff --git a/src/modules/10_registry/02_Government/02_Discipline.vue b/src/modules/10_registry/02_Government/02_Discipline.vue
index bda0aad..b81e3b6 100644
--- a/src/modules/10_registry/02_Government/02_Discipline.vue
+++ b/src/modules/10_registry/02_Government/02_Discipline.vue
@@ -1,38 +1,36 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { DisciplineDetail } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
 const { getPathUploadFlie } = useRegistryDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+  useCounterMixin();
 
-const rows = ref<DisciplineDetail[]>([]);
-const rowsData = ref<DisciplineDetail[]>([]);
-const idByRow = ref<string>("");
-const filter = ref<string>("");
-const rowsHistory = ref<DisciplineDetail[]>([]);
-const rowsHistoryData = ref<DisciplineDetail[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
-
-const fileGroup = ref<string>("เอกสารวินัย");
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลประเภทโปรไฟล์
+const isLoading = ref<boolean>(false); // ใช้สำหรับโหลดข้อมูลหลัก
+const isLoadingHistory = ref<boolean>(false); // ใช้สำหรับโหลดข้อมูลประวัติการแก้ไข;
+const rows = ref<DisciplineDetail[]>([]); // ข้อมูลหลักที่จะแสดงในตาราง
+const rowsData = ref<DisciplineDetail[]>([]); // ข้อมูลหลักที่ใช้สำหรับค้นหา
+const idByRow = ref<string>(""); // ใช้เก็บ ID ของแถวที่ถูกเลือก
+const filter = ref<string>(""); // ตัวแปรสำหรับค้นหาในตาราง
+const rowsHistory = ref<DisciplineDetail[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<DisciplineDetail[]>([]); // ข้อมูลประวัติการแก้ไขที่ใช้สำหรับค้นหา
+const fileGroup = ref<string>("เอกสารวินัย"); // กลุ่มไฟล์ที่ใช้สำหรับดาวน์โหลด
+const modalHistory = ref<boolean>(false); // ใช้สำหรับเปิด/ปิด modal ประวัติการแก้ไข
 const visibleColumns = ref<string[]>([
   "level",
   "detail",
@@ -142,15 +140,10 @@ const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลวินัย */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserDisciplineByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -161,14 +154,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * เปิด modal ประวัติการแก้ไข
+ * @param id ID ของแถวที่ต้องการดูประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserDisciplineHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -179,15 +183,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันดาวน์โหลดไฟล์เอกสารหลักฐาน
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId ID ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -198,7 +215,7 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
@@ -237,7 +254,9 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -349,6 +368,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขวินัย'"
@@ -357,6 +377,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumns"
     :columns="columns"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/02_Government/03_Leave.vue b/src/modules/10_registry/02_Government/03_Leave.vue
index c959295..6d2c188 100644
--- a/src/modules/10_registry/02_Government/03_Leave.vue
+++ b/src/modules/10_registry/02_Government/03_Leave.vue
@@ -1,34 +1,32 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
 import type { LeaveFormType } from "@/modules/10_registry/interface/index/Main";
+
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const idByRow = ref<string>("");
-const rows = ref<LeaveFormType[]>([]);
-const rowsData = ref<LeaveFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
 const mode = ref<boolean>($q.screen.gt.xs);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลการลา
+const isLoading = ref<boolean>(false); // สำหรับการโหลดข้อมูลการลา
+const isLoadingHistory = ref<boolean>(false); // สำหรับการโหลดประวัติการลา
+const rows = ref<LeaveFormType[]>([]); // ข้อมูลการลา
+const rowsData = ref<LeaveFormType[]>([]); // ข้อมูลการลา (สำหรับค้นหา)
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาข้อมูลการลา
+const idByRow = ref<string>(""); // id ของแถวที่เลือกเพื่อดูประวัติการลา
+const rowsHistory = ref<LeaveFormType[]>([]); // ข้อมูลประวัติการลา
+const rowsHistoryData = ref<LeaveFormType[]>([]); // ข้อมูลประวัติการลา (สำหรับค้นหา)
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับการเปิดปิด modal ประวัติการลา
 const visibleColumns = ref<string[]>([
   "no",
   "typeLeave",
@@ -39,7 +37,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -136,7 +133,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "no",
   "typeLeave",
@@ -243,15 +239,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลการลา */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserLeaveByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -275,14 +266,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันสำหรับเปิด modal ประวัติการลา
+ * @param id ID ของการลา
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการลา */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserLeaveHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -306,10 +308,15 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับแสดงสถานะการลา
+ * @param val ค่าสถานะการลา
+ * @return สถานะการลาในรูปแบบข้อความ
+ */
 function statusLeave(val: string) {
   switch (val) {
     case "waitting":
@@ -325,6 +332,11 @@ function statusLeave(val: string) {
   }
 }
 
+/**
+ * ฟังก์ชันสำหรับแปลงช่วงวันที่เป็นรูปแบบไทย
+ * @param val ช่วงวันที่ที่ต้องการแปลงเป็นรูปแบบไทย
+ * @return ช่วงวันที่ในรูปแบบไทย
+ */
 function dateThaiRange(val: [Date, Date]) {
   if (val === null) {
   } else if (date2Thai(val[0]) === date2Thai(val[1])) {
@@ -334,6 +346,7 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -344,11 +357,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1">การลา</span>
@@ -383,7 +395,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -494,6 +509,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขการลา'"
@@ -503,6 +519,7 @@ onMounted(async () => {
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
     :type="'Leave'"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/02_Government/04_Duty.vue b/src/modules/10_registry/02_Government/04_Duty.vue
index e1efc99..1e70102 100644
--- a/src/modules/10_registry/02_Government/04_Duty.vue
+++ b/src/modules/10_registry/02_Government/04_Duty.vue
@@ -1,35 +1,36 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
-//history dialog
-import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
-const dataStore = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<DutyFormType[]>([]);
-const rowsData = ref<DutyFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<DutyFormType[]>([]);
-const rowsHistoryData = ref<DutyFormType[]>([]);
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
-const mode = ref<any>($q.screen.gt.xs);
-const mixin = useCounterMixin();
+const dataStore = useDataStore();
 const { getPathUploadFlie } = useRegistryDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+  useCounterMixin();
 
+const mode = ref<any>($q.screen.gt.xs); // true = desktop, false = mobile
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลตามประเภทของผู้ใช้
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดประวัติ
+const rows = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับแสดงในตาราง
+const rowsData = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับค้นหาในตาราง
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
+const idByRow = ref<string>(""); // id ของแถวที่เลือกเพื่อดึงประวัติ
+const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับแสดงประวัติ
+const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับค้นหาในประวัติ
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไข
+const fileGroup = ref<string>("เอกสารปฏิบัติราชการพิเศษ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
 const visibleColumns = ref<string[]>([
   "dateStart",
   "dateEnd",
@@ -137,7 +138,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "dateStart",
   "dateEnd",
@@ -243,17 +243,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-const fileGroup = ref<string>("เอกสารปฏิบัติราชการพิเศษ");
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลปฏิบัติราชการ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserDutyByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -264,14 +257,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันสำหรับเปิด modal ประวัติการแก้ไข
+ * @param id ID ของแถวที่เลือก
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserDutyHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -282,15 +286,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของแถวที่เลือก
+ * @param profileId ID ของโปรไฟล์ที่เลือก
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง*/
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -301,11 +318,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -342,7 +358,9 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -464,6 +482,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/02_Government/05_Actposition.vue b/src/modules/10_registry/02_Government/05_Actposition.vue
index 4e5ca14..f40a034 100644
--- a/src/modules/10_registry/02_Government/05_Actposition.vue
+++ b/src/modules/10_registry/02_Government/05_Actposition.vue
@@ -1,36 +1,36 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
-//history dialog
+
+/** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataStore = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<DutyFormType[]>([]);
-const rowsData = ref<DutyFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<DutyFormType[]>([]);
-const rowsHistoryData = ref<DutyFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<any>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const dataStore = useDataStore();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
+const mode = ref<boolean>($q.screen.gt.xs); // true if screen is larger than xs
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลตามประเภทของผู้ใช้
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับบอกสถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับบอกสถานะการโหลดประวัติ
+const rows = ref<DutyFormType[]>([]); // ข้อมูลที่แสดงในตาราง
+const rowsData = ref<DutyFormType[]>([]); // ข้อมูลดิบที่ใช้สำหรับการค้นหา
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับการค้นหา
+const idByRow = ref<string>(""); // id ของแถวที่ถูกเลือกเพื่อดูประวัติ
+const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลดิบที่ใช้สำหรับการค้นหาในประวัติ
+const modalHistory = ref<boolean>(false); // แสดงหรือซ่อน modal ประวัติการแก้ไข
 const checkType = ref<boolean>(
   dataStore.officerType == "OFFICER" ? true : false
 );
-/** ตัวแปรข้อมูล */
-
 const visibleColumns = ref<String[]>([
   "dateStart",
   "dateEnd",
@@ -103,10 +103,6 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
 const visibleColumnsHistory = ref<string[]>([
   "dateStart",
   "dateEnd",
@@ -116,7 +112,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "dateStart",
@@ -188,16 +183,14 @@ const columnsHistory = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v, false, true),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserActpositionByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -208,14 +201,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * เปิด modal ประวัติการแก้ไข
+ * @param id ID ของแถวที่ต้องการดูประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserActpositionHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -226,10 +230,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -240,12 +245,11 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -282,7 +286,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -363,6 +370,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขรักษาการในตำแหน่ง'"
@@ -371,6 +379,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 
diff --git a/src/modules/10_registry/02_Government/06_Assistance.vue b/src/modules/10_registry/02_Government/06_Assistance.vue
index aac3697..1aa5d00 100644
--- a/src/modules/10_registry/02_Government/06_Assistance.vue
+++ b/src/modules/10_registry/02_Government/06_Assistance.vue
@@ -1,33 +1,35 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
-//history dialog
+
+/** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
+const $q = useQuasar();
 
 const link = ref<string>("");
 const dataStore = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<DutyFormType[]>([]);
-const rowsData = ref<DutyFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<DutyFormType[]>([]);
-const rowsHistoryData = ref<DutyFormType[]>([]);
-const $q = useQuasar();
-const mode = ref<any>($q.screen.gt.xs);
-const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+  useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดแสดงผล ถ้าเป็นมือถือจะเป็น false;
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูล
+const rows = ref<DutyFormType[]>([]); // ข้อมูลตารางหลัก
+const rowsData = ref<DutyFormType[]>([]); // ข้อมูลตารางหลักสำหรับค้นหา
+const filter = ref<string>(""); // ตัวแปรค้นหา
+const idByRow = ref<string>(""); // ตัวแปรเก็บ id ของแถวที่เลือกเพื่อดูประวัติ
+const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไขสำหรับค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิดปิด modal ประวัติการแก้ไข
 const visibleColumns = ref<string[]>([
   "commandName",
   "agency",
@@ -135,7 +137,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "commandName",
   "agency",
@@ -241,15 +242,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูลช่วยราชการ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserAssistanceByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -260,14 +256,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันเปิด modal ดูประวัติการแก้ไข
+ * @param id ID ของแถวที่ต้องการดูประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserAssistanceHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -278,13 +285,14 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
 /**
  * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
  * @param id รายการที่ต้องการโหลด
+ * @param profileId ID ของโปรไฟล์
  */
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
@@ -310,6 +318,7 @@ async function onDownloadFile(id: string, profileId: string) {
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -320,11 +329,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1">ช่วยราชการ</span>
@@ -359,7 +367,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -469,6 +480,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขรายการช่วยราชการ'"
@@ -477,6 +489,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 17486b4..b406670 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -1,49 +1,49 @@
 <script setup lang="ts">
 import { useQuasar, type QTableColumn } from "quasar";
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, reactive } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import { useGovernmentPosDataStore } from "@/modules/10_registry/store/Position";
 
 import type {
   SalaryFormType,
   CardDataPos,
 } from "@/modules/10_registry/interface/index/Main";
-import type { DataCommandCode } from "@/modules/10_registry/interface/response/Main";
 
-//history dialog
+/**import components*/
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
-const store = useGovernmentPosDataStore();
-const mixin = useCounterMixin();
 const {
-  showLoader,
-  hideLoader,
   messageError,
   date2Thai,
   onSearchDataTable,
   formatDatePosition,
   findOrgName,
   findOrgNameHtml,
-} = mixin;
+} = useCounterMixin();
 
-const idByRow = ref<string>("");
-const rows = ref<SalaryFormType[]>([]);
-const rowsData = ref<SalaryFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<SalaryFormType[]>([]);
-const rowsHistoryData = ref<SalaryFormType[]>([]);
-const mode = ref<boolean>($q.screen.gt.xs);
 const checkType = ref<boolean>(
   dataPerson.officerType == "OFFICER" ? true : false
-);
-const modalHistory = ref<boolean>(false);
+); // เช็คประเภทผู้ใช้งาน
+const mode = ref<boolean>($q.screen.gt.xs); // เช็คขนาดหน้าจอ ถ้าเป็นขนาดใหญ่กว่า xs จะเป็นโหมดแสดงตาราง
+const isLoading = reactive({
+  position: false, // เช็คสถานะการโหลดข้อมูลตำแหน่ง
+  tenure: false, // เช็คสถานะการโหลดข้อมูลระยะเวลาดำรงตำแหน่ง
+});
+const isLoadingHistory = ref<boolean>(false); // เช็คสถานะการโหลดข้อมูลประวัติ
+const link = ref<string>(""); // link สำหรับดึงข้อมูล
+const rows = ref<SalaryFormType[]>([]); // ข้อมูลตำแหน่ง
+const rowsData = ref<SalaryFormType[]>([]); // ข้อมูลตำแหน่งสำหรับค้นหา
+const idByRow = ref<string>(""); // id ของแถวที่ต้องการดูประวัติ
+const filter = ref<string>(""); // ค่าที่กรอกใน input ค้นหา
+const rowsHistory = ref<SalaryFormType[]>([]); // ข้อมูลประวัติการแก้ไขตำแหน่ง
+const rowsHistoryData = ref<SalaryFormType[]>([]); // ข้อมูลประวัติการแก้ไขตำแหน่งสำหรับค้นหา
+const modalHistory = ref<boolean>(false); // เปิดปิด dialog ประวัติ
 const cardData = ref<CardDataPos[]>([
   {
     label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
@@ -58,7 +58,6 @@ const cardData = ref<CardDataPos[]>([
     data: [],
   },
 ]);
-
 const baseColumns = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
@@ -315,7 +314,6 @@ const baseVisibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = computed<QTableColumn[]>(() => {
   if (!checkType.value) {
     if (baseColumns.value) {
@@ -349,59 +347,9 @@ const columnsHistory = computed<QTableColumn[]>(() => {
 });
 const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
 
-/** เปิด dialog ประวัติ*/
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
-    .get(config.API.dataUserPosition(link.value))
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data;
-      rowsData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** get history */
-function getHistory() {
-  showLoader();
-  http
-    .get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = data;
-      rowsHistoryData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function onSearch() {
-  rows.value = onSearchDataTable(
-    filter.value,
-    rowsData.value,
-    columns.value ? columns.value : []
-  );
-}
-
+/** ฟังก์ชันดึงข้อมูลระยะเวลาดำรงตำแหน่ง */
 async function fetchDataTenure() {
-  console.log(link.value);
-
+  isLoading.tenure = true;
   await http
     .get(config.API.salaryTenurePosition(link.value))
     .then((res) => {
@@ -440,40 +388,78 @@ async function fetchDataTenure() {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      isLoading.tenure = false;
     });
 }
 
-/** function fetch ข้อมูลประเภทคำสั่ง*/
-async function fetchDataCommandCode() {
-  if (store.commandCodeData.length > 0) return false;
+/** ฟังก์ชันดึงข้อมูล */
+async function getData() {
+  isLoading.position = true;
   await http
-    .get(config.API.orgCommandCode)
+    .get(config.API.dataUserPosition(link.value))
     .then((res) => {
       const data = res.data.result;
-      const DataCommandCode = data.filter((e: DataCommandCode) =>
-        store.positionCode.includes(e.code)
-      );
-
-      const options = DataCommandCode.map((e: DataCommandCode) => ({
-        id: e.code.toString(),
-        name: e.name,
-      }));
-
-      store.commandCodeData = options;
+      rows.value = data;
+      rowsData.value = data;
     })
-    .catch((err) => {
-      messageError($q, err);
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.position = false;
     });
 }
 
+/**
+ * เปิด dialog ประวัติ
+ * @param id id ของแถวที่ต้องการดูประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันดึงข้อมูลประวัติ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
+    .get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+      rowsHistoryData.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoadingHistory.value = false;
+    });
+}
+
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
-  link.value = await dataPerson.getProFileType();
-  if (link.value === "-employee") {
-    cardData.value.splice(2, 1);
+  try {
+    link.value = await dataPerson.getProFileType();
+    if (link.value === "-employee") {
+      cardData.value.splice(2, 1);
+    }
+    await Promise.all([getData(), fetchDataTenure()]);
+  } catch (error) {
+    messageError($q, error);
   }
-  getData();
-  fetchDataTenure();
-  fetchDataCommandCode();
 });
 </script>
 
@@ -492,7 +478,15 @@ onMounted(async () => {
           </div>
           <div class="col-12"><q-separator /></div>
           <q-card-section class="q-pt-none" style="min-height: 200px">
-            <li v-for="data in item.data">{{ data.name }} {{ data.time }}</li>
+            <q-skeleton
+              v-if="isLoading.tenure"
+              type="text"
+              class="q-mb-sm"
+              style="width: 100%"
+            />
+            <li v-else v-for="data in item.data">
+              {{ data.name }} {{ data.time }}
+            </li>
           </q-card-section>
         </q-card>
       </div>
@@ -532,7 +526,9 @@ onMounted(async () => {
     </div>
 
     <div class="col-12 q-mt-sm">
+      <SkeletonTable v-if="isLoading.position" :columns="columns" />
       <d-table
+        v-else
         flat
         dense
         bordered
@@ -664,6 +660,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index efe717d..f5bf3a7 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useQuasar, type QTableColumn } from "quasar";
 import { ref, onMounted, computed } from "vue";
+import { useQuasar, type QTableColumn } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,40 +9,33 @@ import { useDataStore } from "@/stores/data";
 
 import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
-const mixin = useCounterMixin();
 const {
-  showLoader,
-  hideLoader,
   messageError,
   date2Thai,
   onSearchDataTable,
   findOrgName,
   findOrgNameHtml,
-} = mixin;
-
-const idByRow = ref<string>("");
-const rows = ref<SalaryFormType[]>([]);
-const rowsData = ref<SalaryFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<SalaryFormType[]>([]);
-const rowsHistoryData = ref<SalaryFormType[]>([]);
-const mode = ref<boolean>($q.screen.gt.xs);
-const checkType = ref<boolean>(
-  dataPerson.officerType == "OFFICER" ? true : false
-);
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+} = useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดแสดงผล
+const link = ref<string>(""); //ลิงค์ประเภทข้อมูล
+const isLoading = ref<boolean>(false); //โหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //โหลดประวัติ
+const rows = ref<SalaryFormType[]>([]); //ข้อมูลตาราง
+const rowsData = ref<SalaryFormType[]>([]); //ข้อมูล (ค้นหา)
+const filter = ref<string>(""); //ตัวกรองข้อมูล
+const idByRow = ref<string>(""); //id ของแถวที่เลือก
+const rowsHistory = ref<SalaryFormType[]>([]); //ข้อมูลประวัติ
+const rowsHistoryData = ref<SalaryFormType[]>([]); //ข้อมูลประวัติ (ค้นหา)
+const modalHistory = ref<boolean>(false); //เปิดปิด dialog ประวัติ
 const salaryText = computed(() => {
   return link.value == "" ? "เงินเดือน" : "ค่าจ้าง";
 });
-
 const baseColumns = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
@@ -330,20 +323,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
-const columns = computed(() => {
-  if (link.value === "-employee") {
-    if (baseColumns.value) {
-      return baseColumns.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-
 const visibleColumnsHistory = ref<string[]>([
   "commandDateAffect",
   "posNumCodeSit",
@@ -363,20 +342,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
-const columnsHistory = computed(() => {
-  if (link.value === "-employee") {
-    if (baseColumnsHistory.value) {
-      return baseColumnsHistory.value.filter(
-        (column: QTableColumn) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-
 const baseColumnsHistory = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
@@ -639,16 +604,36 @@ const baseColumnsHistory = ref<QTableColumn[]>([
   },
 ]);
 
-/** เปิด dialog ประวัติ*/
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
+const columns = computed(() => {
+  if (link.value === "-employee") {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
 
-/** get data */
-function getData() {
-  showLoader();
-  http
+const columnsHistory = computed(() => {
+  if (link.value === "-employee") {
+    if (baseColumnsHistory.value) {
+      return baseColumnsHistory.value.filter(
+        (column: QTableColumn) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+
+/*** ฟังก์ชันสำหรับดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserSalaryByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -659,13 +644,24 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
+/**
+ * ฟังก์ชันสำหรับเปิด dialog ประวัติการแก้ไข
+ * @param id id ของแถวที่เลือก
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   http
     .get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
     .then((res) => {
@@ -677,10 +673,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -691,11 +688,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1">{{
@@ -732,7 +728,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -851,6 +850,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="`ประวัติแก้ไข${salaryText}`"
@@ -859,8 +859,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/03_Salary/02_Nopaid.vue b/src/modules/10_registry/03_Salary/02_Nopaid.vue
index aa4d72f..dba0590 100644
--- a/src/modules/10_registry/03_Salary/02_Nopaid.vue
+++ b/src/modules/10_registry/03_Salary/02_Nopaid.vue
@@ -1,37 +1,39 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { NopaidFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<NopaidFormType[]>([]);
-const rowsData = ref<NopaidFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<NopaidFormType[]>([]);
-const rowsHistoryData = ref<NopaidFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const dataPerson = useDataStore();
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
+const link = ref<string>(""); //ประเภทของโปรไฟล์
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //สถานะการโหลดข้อมูลประวัติ
+const rows = ref<NopaidFormType[]>([]); //ข้อมูลที่แสดงในตาราง
+const rowsData = ref<NopaidFormType[]>([]); //ข้อมูลที่ใช้สำหรับค้นหาในตาราง
+const filter = ref<string>(""); //ตัวกรองสำหรับค้นหาในตาราง
+const idByRow = ref<string>(""); // รหัสของแถวที่ถูกเลือกสำหรับประวัติ
+const rowsHistory = ref<NopaidFormType[]>([]); // ข้อมูลประวัติที่แสดงในตาราง
+const rowsHistoryData = ref<NopaidFormType[]>([]); // ข้อมูลประวัติที่ใช้สำหรับค้นหาในตาราง
+const modalHistory = ref<boolean>(false); // สถานะการแสดงโมดัลประวัติ
+// ข้อความสำหรับแสดงในหัวตาราง
 const salaryText = computed(() => {
   return link.value == "" ? "เงินเดือน" : "ค่าจ้าง";
 });
-
 const visibleColumns = ref<string[]>([
   "date",
   "detail",
@@ -41,7 +43,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -128,7 +129,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "date",
   "reference",
@@ -138,7 +138,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -221,18 +220,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>(`เอกสารบันทึกวันที่ไม่ได้รับ${salaryText.value}`); // กลุ่มไฟล์สำหรับเอกสารบันทึก
 
-const fileGroup = ref<string>(`เอกสารบันทึกวันที่ไม่ได้รับ${salaryText.value}`);
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserNopaidByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -243,14 +236,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันสำหรับเปิดประวัติการแก้ไข
+ * @param id รหัสของแถวที่ถูกเลือกสำหรับประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(
       config.API.dataUserSalaryNopaidHistoryByType(link.value, idByRow.value)
     )
@@ -263,15 +267,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id รหัสของแถวที่ถูกเลือกสำหรับดาวน์โหลด
+ * @param profileId รหัสโปรไฟล์ของผู้ใช้
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -282,11 +299,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1">{{
@@ -323,7 +339,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -448,6 +467,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/04_Achievement/01_Certificate.vue b/src/modules/10_registry/04_Achievement/01_Certificate.vue
index 609ccea..e2e18ee 100644
--- a/src/modules/10_registry/04_Achievement/01_Certificate.vue
+++ b/src/modules/10_registry/04_Achievement/01_Certificate.vue
@@ -1,37 +1,35 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { CertificateDetail } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const idByRow = ref<string>("");
-const rows = ref<CertificateDetail[]>([]);
-const rowsData = ref<CertificateDetail[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<CertificateDetail[]>([]);
-const rowsHistoryData = ref<CertificateDetail[]>([]);
-const mode = ref<boolean>($q.screen.gt.xs);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
+const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
+const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดประวัติ
+const rows = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลใบอนุญาตประกอบวิชาชีพ
+const rowsData = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลใบอนุญาตประกอบวิชาชีพที่ใช้ในการค้นหา
+const filter = ref<string>(""); //ตัวแปรสำหรับเก็บค่าการค้นหา
+const idByRow = ref<string>(""); //ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
+const rowsHistory = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขใบอนุญาตประกอบวิชาชีพ
+const rowsHistoryData = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขใบอนุญาตประกอบวิชาชีพที่ใช้ในการค้นหา
+const modalHistory = ref<boolean>(false); //ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขใบอนุญาต
 const visibleColumns = ref<string[]>([
   "certificateType",
   "issuer",
@@ -126,7 +124,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "certificateType",
   "issuer",
@@ -218,18 +215,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>("เอกสารใบอนุญาตประกอบวิชาชีพ"); //กลุ่มไฟล์สำหรับดาวน์โหลด
 
-const fileGroup = ref<string>("เอกสารใบอนุญาตประกอบวิชาชีพ");
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลใบอนุญาตประกอบวิชาชีพ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserCertificateByType(link.value, "certificate"))
     .then((res) => {
       const data = res.data.result;
@@ -240,14 +231,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันสำหรับเปิด modal แสดงประวัติการแก้ไขใบอนุญาต
+ * @param id ID ของแถวที่เลือก
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไขใบอนุญาต */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(
       config.API.dataUserCertificateHistoryByType(
         link.value,
@@ -264,15 +266,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId ID ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -283,11 +298,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -324,7 +338,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+    <SkeletonTable v-if="isLoading" :columns="columns" />
+
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -445,6 +462,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/04_Achievement/02_Training.vue b/src/modules/10_registry/04_Achievement/02_Training.vue
index 9763c1e..2c8af97 100644
--- a/src/modules/10_registry/04_Achievement/02_Training.vue
+++ b/src/modules/10_registry/04_Achievement/02_Training.vue
@@ -1,34 +1,33 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useDataStore } from "@/stores/data";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { TrainingFormType } from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<TrainingFormType[]>([]);
-const rowsData = ref<TrainingFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<TrainingFormType[]>([]);
-const rowsHistoryData = ref<TrainingFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const dataPerson = useDataStore();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดการแสดงผล
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประเภทของผู้ใช้
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับการโหลดข้อมูลประวัติ
+const rows = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลการฝึกอบรม/ดูงาน
+const rowsData = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลการฝึกอบรม/ดูงาน
+const filter = ref<string>(""); // ตัวแปรสำหรับเก็บค่าการค้นหา
+const idByRow = ref<string>(""); // ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
+const rowsHistory = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขการฝึกอบรม/ดูงาน
+const rowsHistoryData = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขการฝึกอบรม/ดูงานที่ใช้ในการค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขการฝึกอบรม/ดูงาน
 const visibleColumns = ref<string[]>([
   "name", // ชื่อโครงงาน
   "topic", // หัวข้อ
@@ -187,7 +186,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "name", // ชื่อโครงงาน
   "topic", // หัวข้อ
@@ -343,15 +341,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
 
 /** get data */
-function getData() {
-  showLoader();
-  http
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserCertificateByType(link.value, "training"))
     .then((res) => {
       const data = res.data.result;
@@ -362,14 +356,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * เปิด modal แสดงประวัติการแก้ไขการฝึกอบรม/ดูงาน
+ * @param id ID ของแถวที่เลือก
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไขการฝึกอบรม/ดูงาน */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(
       config.API.dataUserCertificateHistoryByType(
         link.value,
@@ -386,10 +391,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -400,11 +406,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -441,7 +446,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -517,6 +525,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขการฝึกอบรม/ดูงาน'"
@@ -525,8 +534,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/04_Achievement/03_Insignia.vue b/src/modules/10_registry/04_Achievement/03_Insignia.vue
index 0e65605..e673745 100644
--- a/src/modules/10_registry/04_Achievement/03_Insignia.vue
+++ b/src/modules/10_registry/04_Achievement/03_Insignia.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -10,27 +10,26 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { InsigniaFormType } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<InsigniaFormType[]>([]);
-const rowsData = ref<InsigniaFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<InsigniaFormType[]>([]);
-const rowsHistoryData = ref<InsigniaFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const dataPerson = useDataStore();
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดการแสดงผล
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประเภทของผู้ใช้
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับโหลดข้อมูลประวัติ
+const idByRow = ref<string>(""); // ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
+const rows = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลเครื่องราชฯ
+const rowsData = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลเครื่องราชฯ ที่ใช้ในการค้นหา
+const filter = ref<string>(""); // ตัวแปรสำหรับเก็บค่าค้นหา
+const rowsHistory = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขเครื่องราชฯ
+const rowsHistoryData = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขเครื่องราชฯ ที่ใช้ในการค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขเครื่องราชฯ
 const visibleColumns = ref<String[]>([
   "insignia",
   "insigniaType",
@@ -239,7 +238,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "insignia",
   "insigniaType",
@@ -433,18 +431,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>("เครื่องราชฯ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
 
-const fileGroup = ref<string>("เครื่องราชฯ");
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลเครื่องราชฯ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserCertificateByType(link.value, "insignia"))
     .then((res) => {
       const data = res.data.result;
@@ -455,14 +447,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันสำหรับเปิด modal ประวัติการแก้ไขเครื่องราชฯ
+ * @param id ID ของแถวที่เลือก
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไขเครื่องราชฯ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(
       config.API.dataUserCertificateHistoryByType(
         link.value,
@@ -479,15 +482,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ *  ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId ID ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -498,11 +514,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -539,7 +554,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -674,8 +692,10 @@ onMounted(async () => {
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
     :type="'insignia'"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/04_Achievement/04_Honor.vue b/src/modules/10_registry/04_Achievement/04_Honor.vue
index 3a6366c..4156734 100644
--- a/src/modules/10_registry/04_Achievement/04_Honor.vue
+++ b/src/modules/10_registry/04_Achievement/04_Honor.vue
@@ -1,38 +1,36 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { HonorFormData } from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const store = useRegistryInFormationStore();
-const rows = ref<HonorFormData[]>([]);
-const rowsData = ref<HonorFormData[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<HonorFormData[]>([]);
-const rowsHistoryData = ref<HonorFormData[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const dataPerson = useDataStore();
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
+const link = ref<string>(""); //ลิงก์สำหรับดึงข้อมูล
+const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูลประวัติ
+const rows = ref<HonorFormData[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประกาศเกียรติคุณ
+const rowsData = ref<HonorFormData[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประกาศเกียรติคุณที่ใช้ในการค้นหา
+const filter = ref<string>(""); //ตัวแปรสำหรับเก็บค่าการค้นหา
+const idByRow = ref<string>(""); //ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
+const rowsHistory = ref<HonorFormData[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขประกาศเกียรติคุณ
+const rowsHistoryData = ref<HonorFormData[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขประกาศเกียรติคุณที่ใช้ในการค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขประกาศเกียรติคุณ
 const visibleColumns = ref<String[]>([
   "issuer",
   "detail",
@@ -127,7 +125,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "issuer",
   "detail",
@@ -219,18 +216,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>("ประกาศเกียรติคุณ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
 
-const fileGroup = ref<string>("ประกาศเกียรติคุณ");
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูลประกาศเกียรติคุณ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserCertificateByType(link.value, "honor"))
     .then((res) => {
       const data = res.data.result;
@@ -241,18 +232,30 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
+/**
+ * เปิด modal ประวัติการแก้ไข
+ * @param id ID ของแถวที่เลือก
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
 /** get history */
-function getHistory() {
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataPerson.officerType == "OFFICER"
       ? config.API.dataUserHonorHistory("honor", "", idByRow.value)
       : config.API.dataUserHonorHistory("honor", "-employee", idByRow.value);
-  showLoader();
-  http
+
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -263,15 +266,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId id ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -282,11 +298,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -323,7 +338,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -445,6 +463,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/04_Achievement/05_Assessments.vue b/src/modules/10_registry/04_Achievement/05_Assessments.vue
index 4e93d23..a005256 100644
--- a/src/modules/10_registry/04_Achievement/05_Assessments.vue
+++ b/src/modules/10_registry/04_Achievement/05_Assessments.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -12,31 +12,28 @@ import type {
   DataOption,
 } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<AssessmentsFormType[]>([]);
-const rowsData = ref<AssessmentsFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<AssessmentsFormType[]>([]);
-const rowsHistoryData = ref<AssessmentsFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const dataPerson = useDataStore();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดแสดงผล
+const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
+const rows = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลที่ดึงมา
+const rowsData = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลที่ดึงมาไว้สำหรับค้นหา
+const filter = ref<string>(""); //ตัวแปรเก็บค่าค้นหา
+const idByRow = ref<string>(""); //ตัวแปรเก็บ id ของแถวที่เลือก
+const rowsHistory = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลประวัติการแก้ไขไว้สำหรับค้นหา
+const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการ
+const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูลประวัติ
 const periodOp = ref<DataOption[]>([
   { id: "OCT", name: "ตุลาคม" },
   { id: "APR", name: "เมษายน" },
 ]);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
+const modalHistory = ref<boolean>(false); //ตัวแปรสำหรับเปิดปิด modal ประวัติการแก้ไข
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -328,7 +325,6 @@ const visibleColumnsHistory = ref<string[]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumns = ref<string[]>([
   "point1Total",
   "year",
@@ -344,15 +340,10 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
 ]);
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserCertificateByType(link.value, "assessments"))
     .then((res) => {
       const data = res.data.result;
@@ -363,14 +354,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันเปิด modal ประวัติการแก้ไข
+ * @param id - id ของแถวที่เลือก
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(
       config.API.dataUserCertificateHistoryByType(
         link.value,
@@ -387,10 +389,14 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันตรวจสอบช่วงคะแนน
+ * @param val - ค่าที่ต้องการตรวจสอบ
+ */
 function textRangePoint(val: number | undefined) {
   if (val == undefined) val = -1;
   if (val < 60.0) return "(คะแนนต่ำกว่าร้อยละ 60.00)";
@@ -401,6 +407,10 @@ function textRangePoint(val: number | undefined) {
   else return "";
 }
 
+/**
+ * ฟังก์ชันตรวจสอบคะแนน
+ * @param val - ค่าที่ต้องการตรวจสอบ
+ */
 function textPoint(val: number | undefined) {
   if (val == undefined) val = -1;
   if (val < 60.0) return "ต้องปรับปรุง";
@@ -440,6 +450,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
@@ -461,7 +472,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -545,6 +559,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ'"
@@ -553,8 +568,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
index eff42db..aab708c 100644
--- a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
+++ b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
@@ -1,34 +1,28 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
 import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const typeIDP = ref<string>("");
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<any[]>([]);
-const rowsData = ref<any[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-const modalDevelop = ref<boolean>(false);
-const kpiDevelopmentId = ref<string>("");
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const dataPerson = useDataStore();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดแสดงผล
+const typeIDP = ref<string>(""); // ประเภทการพัฒนา
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูล
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
+const rows = ref<any[]>([]); // ข้อมูลที่แสดงในตาราง
+const rowsData = ref<any[]>([]); // ข้อมูลทั้งหมดที่ใช้สำหรับการค้นหา
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับการค้นหา
+const modalDevelop = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด Dialog การพัฒนารายบุคคล
+const kpiDevelopmentId = ref<string>(""); // ตัวแปรสำหรับเก็บ ID การพัฒนารายบุคคล
 const visibleColumns = ref<string[]>([
   "no",
   "name",
@@ -39,7 +33,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -130,21 +123,15 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const paginationPlan = ref({
   page: 1,
   rowsPerPage: 10,
 });
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.developmentUserByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -155,31 +142,7 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
-    });
-}
-
-/** get history */
-function getHistory() {
-  showLoader();
-  http
-    .get(
-      config.API.dataUserCertificateHistoryByType(
-        link.value,
-        "assessments",
-        idByRow.value
-      )
-    )
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = data;
-      rowsHistoryData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -193,6 +156,7 @@ function openDialogDevelop(data: any) {
   typeIDP.value = data.type;
 }
 
+/** ฟังก์ชันค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -203,7 +167,7 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
@@ -244,7 +208,9 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
diff --git a/src/modules/10_registry/05_Other/01_Other.vue b/src/modules/10_registry/05_Other/01_Other.vue
index 98c91ee..ecb81c5 100644
--- a/src/modules/10_registry/05_Other/01_Other.vue
+++ b/src/modules/10_registry/05_Other/01_Other.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
+import { is, useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
@@ -9,16 +9,16 @@ import { useDataStore } from "@/stores/data";
 
 import type { OtherFormType } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
+const $q = useQuasar();
+const dataPerson = useDataStore();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
 const link = ref<string>("");
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const dataPerson = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
+const isLoading = ref<boolean>(false);
+const isLoadingHistory = ref<boolean>(false);
 const idByRow = ref<string>("");
 const rows = ref<OtherFormType[]>([]);
 const rowsData = ref<OtherFormType[]>([]);
@@ -26,10 +26,7 @@ const filter = ref<string>("");
 const rowsHistory = ref<OtherFormType[]>([]);
 const rowsHistoryData = ref<OtherFormType[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
-
 const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
 const visibleColumns = ref<string[]>([
   "date",
   "detail",
@@ -85,7 +82,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "date",
   "detail",
@@ -139,15 +135,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserOtherByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -156,14 +147,27 @@ function getData() {
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
-/** get history */
-function getHistory() {
-  showLoader();
-  http
+/**
+ * ฟังก์ชันเปิดโมดัลดูประวัติ
+ * @param id ID ของแถวที่ต้องการดูประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันดึงประวัติการแก้ไขข้อมูลอื่นๆ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserOtherHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -174,10 +178,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -188,11 +193,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1">ข้อมูลอื่นๆ</span>
@@ -227,7 +231,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -310,6 +317,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขข้อมูลอื่นๆ'"
@@ -318,6 +326,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>
diff --git a/src/modules/10_registry/05_Other/02_File.vue b/src/modules/10_registry/05_Other/02_File.vue
index 4b26eb1..1e9472e 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 { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
+import { is, useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,23 +9,17 @@ import { useRegistryInFormationStore } from "@/modules/10_registry/store/registr
 
 import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
 
-const fileList = ref<FileFormType[]>([]);
-const store = useRegistryInFormationStore();
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const store = useRegistryInFormationStore();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const isLoading = ref<boolean>(false);
+const fileList = ref<FileFormType[]>([]);
 
-function onHistory() {
-  modalHistory.value = true;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูลไฟล์ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(
       config.API.fileByFileUser(
         "ระบบทะเบียนประวัติ",
@@ -41,9 +35,7 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
+      isLoading.value = false;
     });
 }
 
@@ -51,9 +43,9 @@ function getData() {
  * ดาวน์โหลดลิงค์ไฟล์
  * @param fileName file name
  */
-function downloadFile(fileName: string) {
+async function downloadFile(fileName: string) {
   showLoader();
-  http
+  await http
     .get(
       config.API.fileByFile(
         "ระบบทะเบียนประวัติ",
@@ -69,7 +61,7 @@ function downloadFile(fileName: string) {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
+    .finally(() => {
       hideLoader();
     });
 }
@@ -78,8 +70,8 @@ onMounted(() => {
   getData();
 });
 </script>
+
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1">เอกสารหลักฐาน</span>
@@ -89,7 +81,12 @@ onMounted(() => {
         ไฟล์เอกสารหลักฐาน
       </div>
       <div class="col-12"><q-separator /></div>
-      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+
+      <div v-if="isLoading" class="col-12 q-pa-sm">
+        <q-skeleton type="QSlider" />
+      </div>
+
+      <div v-else class="row col-12 q-col-gutter-y-sm q-pa-sm">
         <div v-if="fileList.length > 0" class="col-xs-12 row">
           <q-list class="full-width rounded-borders" bordered separator>
             <q-item
@@ -124,6 +121,7 @@ onMounted(() => {
     </q-card>
   </div>
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;
diff --git a/src/modules/10_registry/05_Other/03_FileOther.vue b/src/modules/10_registry/05_Other/03_FileOther.vue
index 4682422..585997b 100644
--- a/src/modules/10_registry/05_Other/03_FileOther.vue
+++ b/src/modules/10_registry/05_Other/03_FileOther.vue
@@ -9,23 +9,17 @@ import { useRegistryInFormationStore } from "@/modules/10_registry/store/registr
 
 import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
 
-const fileList = ref<FileFormType[]>([]);
-const store = useRegistryInFormationStore();
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const store = useRegistryInFormationStore();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const isLoading = ref<boolean>(false);
+const fileList = ref<FileFormType[]>([]);
 
-function onHistory() {
-  modalHistory.value = true;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันดึงข้อมูลไฟล์ */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(
       config.API.fileByFileUser(
         "ระบบทะเบียนประวัติ",
@@ -41,9 +35,7 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1500);
+      isLoading.value = false;
     });
 }
 
@@ -51,9 +43,9 @@ function getData() {
  * ดาวน์โหลดลิงค์ไฟล์
  * @param fileName file name
  */
-function downloadFile(fileName: string) {
+async function downloadFile(fileName: string) {
   showLoader();
-  http
+  await http
     .get(
       config.API.fileByFile(
         "ระบบทะเบียนประวัติ",
@@ -69,7 +61,7 @@ function downloadFile(fileName: string) {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
+    .finally(() => {
       hideLoader();
     });
 }
@@ -89,7 +81,11 @@ onMounted(() => {
         ไฟล์เอกสาร ก.พ.7
       </div>
       <div class="col-12"><q-separator /></div>
-      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+      <div v-if="isLoading" class="col-12 q-pa-sm">
+        <q-skeleton type="QSlider" />
+      </div>
+
+      <div v-else class="row col-12 q-col-gutter-y-sm q-pa-sm">
         <div v-if="fileList.length > 0" class="col-xs-12 row">
           <q-list class="full-width rounded-borders" bordered separator>
             <q-item
diff --git a/src/modules/10_registry/Dialog/DialogHistory.vue b/src/modules/10_registry/Dialog/DialogHistory.vue
index e615ee9..0696184 100644
--- a/src/modules/10_registry/Dialog/DialogHistory.vue
+++ b/src/modules/10_registry/Dialog/DialogHistory.vue
@@ -1,35 +1,48 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 
-import DialogHeader from "@/components/DialogHeader.vue";
-import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
-const type = ref<string>("");
-const mixin = useCounterMixin();
-const { date2Thai, onSearchDataTable, findOrgNameHtml } = mixin;
-const modal = defineModel<boolean>("modal", { required: true });
-const title = defineModel<string>("title", { required: true });
+/** import type */
+import type { QTableProps } from "quasar";
 
-const filter = ref<string>("");
+/** import component */
+import DialogHeader from "@/components/DialogHeader.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const rows = defineModel<any>("rows");
-const rowsData = defineModel<any>("rowsData");
-const columns = defineModel<QTableProps["columns"]>("columns");
-const visibleColumns = defineModel<string[]>("visibleColumns");
+const { date2Thai, onSearchDataTable, findOrgNameHtml } = useCounterMixin();
+
+/** define model */
+const modal = defineModel<boolean>("modal", { required: true }); // modal visibility
+const isLoading = defineModel<boolean>("isLoading", { required: true }); // loading state
+const title = defineModel<string>("title", { required: true }); // dialog title
+const rows = defineModel<any[]>("rows"); // data rows for the table
+const rowsData = defineModel<any[]>("rowsData"); // raw data for the table
+const columns = defineModel<QTableProps["columns"]>("columns"); // table columns definition
+const visibleColumns = defineModel<string[]>("visibleColumns"); // visible columns in the table
+
+/** define props */
+const props = defineProps({
+  getData: Function, // function to fetch data
+  type: String, // type of data (e.g., "Leave", "insignia")
+});
+
+const type = ref<string>(""); // ประเภทของข้อมูล
+const filter = ref<string>(""); // filter input for searching
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
-const props = defineProps({
-  getData: Function,
-  type: String,
-});
+/** ปิด Dialog และรีเซ็ตค่า */
 function close() {
   modal.value = false;
   filter.value = "";
 }
 
+/**
+ * ฟังก์ชันแปลงวันที่เป็นรูปแบบไทย
+ * @param val - date range value
+ */
 function dateThaiRange(val: [Date, Date]) {
   if (val === null) {
   } else if (date2Thai(val[0]) === date2Thai(val[1])) {
@@ -39,6 +52,10 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
+/**
+ * ฟังก์ชันแปลงสถานะการลาเป็นข้อความที่
+ * @param val  สถานะการลา
+ */
 function statusLeave(val: string) {
   switch (val) {
     case "waitting":
@@ -54,10 +71,11 @@ function statusLeave(val: string) {
   }
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
-    rowsData.value,
+    rowsData.value ? rowsData.value : [],
     columns.value ? columns.value : []
   );
 }
@@ -111,141 +129,148 @@ watch(
             />
           </div>
         </div>
+        <div v-if="isLoading">
+          <SkeletonTable :columns="columns" />
+        </div>
 
-        <d-table
-          flat
-          dense
-          bordered
-          virtual-scroll
-          :rows="rows"
-          :columns="columns"
-          :rows-per-page-options="[10, 25, 50, 100]"
-          :visible-columns="visibleColumns"
-          :virtual-scroll-sticky-size-start="48"
-          v-model:pagination="pagination"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
+        <div v-else class="col-12">
+          <d-table
+            flat
+            dense
+            bordered
+            virtual-scroll
+            :rows="rows"
+            :columns="columns"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            :virtual-scroll-sticky-size-start="48"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
 
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="(col, index) in props.cols" :key="col.name">
-                <div v-if="col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-                <div v-else-if="col.name == 'insignia' && type == 'insignia'">
-                  {{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
-                  }}{{
-                    props.row.insignia.shortName
-                      ? `(${props.row.insignia.shortName})`
-                      : ""
-                  }}
-                </div>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="(col, index) in props.cols" :key="col.name">
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else-if="col.name == 'insignia' && type == 'insignia'">
+                    {{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
+                    }}{{
+                      props.row.insignia.shortName
+                        ? `(${props.row.insignia.shortName})`
+                        : ""
+                    }}
+                  </div>
 
-                <div v-else-if="col.name == 'dateLeave' && type == 'Leave'">
-                  {{
-                    dateThaiRange([
-                      props.row.dateStartLeave,
-                      props.row.dateEndLeave,
-                    ])
-                  }}
-                </div>
-                <div v-else-if="col.name == 'status' && type == 'Leave'">
-                  {{ props.row.status ? statusLeave(props.row.status) : "-" }}
-                </div>
-                <div v-else-if="col.name == 'organization'">
-                  {{
-                    props.row
-                      ? findOrgNameHtml({
-                          root: props.row.orgRoot,
-                          child1: props.row.orgChild1,
-                          child2: props.row.orgChild2,
-                          child3: props.row.orgChild3,
-                          child4: props.row.orgChild4,
-                        })
-                      : "-"
-                  }}
-                </div>
-                <div v-else>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:item="props">
-            <div
-              class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
-            >
-              <q-card bordered flat class="q-pt-md">
-                <q-list dense>
-                  <q-item v-for="col in props.cols" :key="col.name">
-                    <q-item-section class="fix_top">
-                      <q-item-label class="text-grey-6 text-weight-medium">{{
-                        col.label
-                      }}</q-item-label>
-                    </q-item-section>
-                    <q-item-section
-                      v-if="col.name == 'insignia' && type == 'insignia'"
-                      class="fix_top"
-                    >
-                      <q-item-label class="text-dark text-weight-medium">
-                        {{
-                          props.row.insignia
-                            ? `${props.row.insignia.name} `
-                            : "-"
-                        }}{{
-                          props.row.insignia.shortName
-                            ? `(${props.row.insignia.shortName})`
-                            : ""
-                        }}</q-item-label
+                  <div v-else-if="col.name == 'dateLeave' && type == 'Leave'">
+                    {{
+                      dateThaiRange([
+                        props.row.dateStartLeave,
+                        props.row.dateEndLeave,
+                      ])
+                    }}
+                  </div>
+                  <div v-else-if="col.name == 'status' && type == 'Leave'">
+                    {{ props.row.status ? statusLeave(props.row.status) : "-" }}
+                  </div>
+                  <div v-else-if="col.name == 'organization'">
+                    {{
+                      props.row
+                        ? findOrgNameHtml({
+                            root: props.row.orgRoot,
+                            child1: props.row.orgChild1,
+                            child2: props.row.orgChild2,
+                            child3: props.row.orgChild3,
+                            child4: props.row.orgChild4,
+                          })
+                        : "-"
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:item="props">
+              <div
+                class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+              >
+                <q-card bordered flat class="q-pt-md">
+                  <q-list dense>
+                    <q-item v-for="col in props.cols" :key="col.name">
+                      <q-item-section class="fix_top">
+                        <q-item-label class="text-grey-6 text-weight-medium">{{
+                          col.label
+                        }}</q-item-label>
+                      </q-item-section>
+                      <q-item-section
+                        v-if="col.name == 'insignia' && type == 'insignia'"
+                        class="fix_top"
                       >
-                    </q-item-section>
-                    <q-item-section
-                      v-else-if="col.name == 'dateLeave' && type == 'Leave'"
-                      class="fix_top"
-                    >
-                      <q-item-label class="text-dark text-weight-medium">
-                        {{
-                          dateThaiRange([
-                            props.row.dateStartLeave,
-                            props.row.dateEndLeave,
-                          ])
-                        }}</q-item-label
+                        <q-item-label class="text-dark text-weight-medium">
+                          {{
+                            props.row.insignia
+                              ? `${props.row.insignia.name} `
+                              : "-"
+                          }}{{
+                            props.row.insignia.shortName
+                              ? `(${props.row.insignia.shortName})`
+                              : ""
+                          }}</q-item-label
+                        >
+                      </q-item-section>
+                      <q-item-section
+                        v-else-if="col.name == 'dateLeave' && type == 'Leave'"
+                        class="fix_top"
                       >
-                    </q-item-section>
-                    <q-item-section
-                      v-else-if="col.name == 'status' && type == 'Leave'"
-                      class="fix_top"
-                    >
-                      <q-item-label class="text-dark text-weight-medium">
-                        {{
-                          props.row.status ? statusLeave(props.row.status) : "-"
-                        }}</q-item-label
+                        <q-item-label class="text-dark text-weight-medium">
+                          {{
+                            dateThaiRange([
+                              props.row.dateStartLeave,
+                              props.row.dateEndLeave,
+                            ])
+                          }}</q-item-label
+                        >
+                      </q-item-section>
+                      <q-item-section
+                        v-else-if="col.name == 'status' && type == 'Leave'"
+                        class="fix_top"
                       >
-                    </q-item-section>
-                    <q-item-section v-else class="fix_top">
-                      <q-item-label class="text-dark text-weight-medium">{{
-                        col.value ? col.value : "-"
-                      }}</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-card>
-            </div>
-          </template>
-          <template v-slot:no-data>
-            <div
-              class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-            >
-              <span> ไม่พบข้อมูล </span>
-            </div>
-          </template>
-        </d-table>
+                        <q-item-label class="text-dark text-weight-medium">
+                          {{
+                            props.row.status
+                              ? statusLeave(props.row.status)
+                              : "-"
+                          }}</q-item-label
+                        >
+                      </q-item-section>
+                      <q-item-section v-else class="fix_top">
+                        <q-item-label class="text-dark text-weight-medium">{{
+                          col.value ? col.value : "-"
+                        }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
+            <template v-slot:no-data>
+              <div
+                class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+              >
+                <span> ไม่พบข้อมูล </span>
+              </div>
+            </template>
+          </d-table>
+        </div>
       </q-card-section>
     </q-card>
   </q-dialog>
diff --git a/src/modules/10_registry/components/DialogAddRequestEdit.vue b/src/modules/10_registry/components/DialogAddRequestEdit.vue
index 7df4b27..f230cef 100644
--- a/src/modules/10_registry/components/DialogAddRequestEdit.vue
+++ b/src/modules/10_registry/components/DialogAddRequestEdit.vue
@@ -12,9 +12,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
 
-/**
- * use
- */
+/** use*/
 const $q = useQuasar();
 const link = ref<string>("");
 const store = useRequestEditStore();
@@ -22,24 +20,23 @@ const dataStore = useDataStore();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
 
-/**
- *  props
- */
+/** props*/
 const modalInfo = ref<boolean>(false);
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
-  fetchData: { type: Function, requied: true },
+  fetchData: { type: Function, required: true },
 });
 
-const isReadOnly = ref<boolean>(false);
-const profileId = ref<string>("");
+const isReadOnly = ref<boolean>(false); // อ่านข้อมูลได้อย่างเดียว
+const profileId = ref<string>(""); // profileId ของผู้ยื่นคำร้องq
 const formData = reactive({
   topic: "",
   detail: "",
   document: null,
 });
-const topicOption = ref<string[]>(store.optionTopic);
+const topicOption = ref<string[]>(store.optionTopic); // ตัวเลือกเรื่องที่ต้องการแก้ไข
 
+/** function ปิด Dialog และเคลียร์ข้อมูล */
 function closeDialog() {
   modal.value = false;
   formData.topic = "";
@@ -47,9 +44,7 @@ function closeDialog() {
   formData.document = null;
 }
 
-/**
- * function ยืนยันการยื่นคำร้องขอแก้ไขข้อมูล
- */
+/** function ยืนยันการยื่นคำร้องขอแก้ไขข้อมูล */
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -65,17 +60,18 @@ function onSubmit() {
         })
         .then(async (res) => {
           if (formData.document) {
-            createURLUpload(res.data.result, formData.document);
+            await createURLUpload(res.data.result, formData.document);
           } else {
             formData.document = null;
             await props.fetchData?.();
             await success($q, "บันทึกข้อมูลสำเร็จ");
             closeDialog();
-            hideLoader();
           }
         })
         .catch((err) => {
           messageError($q, err);
+        })
+        .finally(() => {
           hideLoader();
         });
     },
@@ -86,10 +82,12 @@ function onSubmit() {
 
 /**
  * function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
+ * @param id คำร้องขอแก้ไขข้อมูล
+ * @param file ไฟล์ที่อัปโหลด
  */
-function createURLUpload(id: string, file: any) {
+async function createURLUpload(id: string, file: any) {
   const fileName = { fileName: file.name };
-  http
+  await http
     .post(
       config.API.file(
         "ระบบทะเบียนประวัติ",
@@ -108,7 +106,7 @@ function createURLUpload(id: string, file: any) {
           res.data[key]?.fileName !== ""
       );
       foundKey &&
-        uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document);
+        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document));
     })
     .catch((err) => {
       messageError($q, err);
@@ -117,32 +115,29 @@ function createURLUpload(id: string, file: any) {
 
 /**
  * function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ * @param uploadUrl URL สำหรับอัปโหลดไฟล์
+ * @param file ไฟล์ที่อัปโหลด
  */
-function uploadFileDoc(uploadUrl: string, file: any) {
-  showLoader();
-  axios
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  await axios
     .put(uploadUrl, file, {
       headers: {
         "Content-Type": file.type,
       },
     })
-    .then(async (res) => {
+    .then(async () => {
       await props.fetchData?.();
       await success($q, "บันทึกข้อมูลสำเร็จ");
       closeDialog();
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /**
- * class input
- * @param val
+ * function สำหรับจัดการ class ของ input
+ * @param val ค่าที่ใช้ในการกำหนด class
  */
 function classInput(val: boolean) {
   return {
@@ -164,9 +159,7 @@ function filterOption(val: string, update: Function) {
   });
 }
 
-/**
- * function fetch profileId
- */
+/** function fetch profileId */
 async function fetchProfile() {
   try {
     isReadOnly.value = dataStore.officerType === "OFFICER";
diff --git a/src/modules/10_registry/components/skeleton/Address.vue b/src/modules/10_registry/components/skeleton/Address.vue
new file mode 100644
index 0000000..9dca1e0
--- /dev/null
+++ b/src/modules/10_registry/components/skeleton/Address.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">
+        ที่อยู่ตามทะเบียนบ้าน
+      </div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">เขต / อำเภอ</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">แขวง / ตำบล</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">รหัสไปรษณีย์</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/10_registry/components/skeleton/Family.vue b/src/modules/10_registry/components/skeleton/Family.vue
new file mode 100644
index 0000000..2e44348
--- /dev/null
+++ b/src/modules/10_registry/components/skeleton/Family.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+const type = defineModel("type", {
+  type: String,
+  default: "",
+});
+</script>
+
+<template>
+  <div class="col-12" v-if="type === 'couple'">
+    <q-card bordered class="bg-grey-1 q-pa-sm">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              สถานภาพการสมรส
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              เลขประจำตัวประชาชน
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">นามสกุลเดิม</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              สถานภาพการมีชีวิต
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">อาชีพ</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+
+  <div class="col-12" v-else>
+    <q-card bordered class="bg-grey-1 q-pa-sm">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              เลขประจำตัวประชาชน
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              สถานภาพการมีชีวิต
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">อาชีพ</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
diff --git a/src/modules/10_registry/components/skeleton/Government.vue b/src/modules/10_registry/components/skeleton/Government.vue
new file mode 100644
index 0000000..dfcc69d
--- /dev/null
+++ b/src/modules/10_registry/components/skeleton/Government.vue
@@ -0,0 +1,110 @@
+<template>
+  <q-card bordered class="bg-grey-1 q-pa-md">
+    <div class="row q-col-gutter-y-sm">
+      <div class="col-12 col-sm-12 col-md-6">
+        <div class="row q-col-gutter-y-sm">
+          <div class="col-5 text-grey-6 text-weight-medium">สังกัด</div>
+          <div class="col-7 text-html">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-sm-12 col-md-6">
+        <div class="row q-col-gutter-y-sm">
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-5 text-grey-6 text-weight-medium">ด้าน/สาขา</div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <q-separator class="q-my-md" />
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันที่สั่งบรรจุ
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันที่เริ่มปฏิบัติราชการ
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันครบเกษียณอายุ
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันที่เกษียณอายุราชการตามกฏหมาย
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+        <div class="row">
+          <div class="col-5 text-grey-6 text-weight-medium">อายุราชการ</div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-5 text-grey-6 text-weight-medium">ขาดราชการ</div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-5 text-grey-6 text-weight-medium">
+            อายุราชการเกื้อกูล
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/10_registry/tabs/01_information.vue b/src/modules/10_registry/tabs/01_information.vue
index a56fa8c..13c5f75 100644
--- a/src/modules/10_registry/tabs/01_information.vue
+++ b/src/modules/10_registry/tabs/01_information.vue
@@ -2,12 +2,12 @@
 import { useRouter } from "vue-router";
 
 /** component */
-import Information from "@/modules/10_registry/01_Information/01_Information.vue";
-import ChangeName from "@/modules/10_registry/01_Information/02_ChangeName.vue";
-import Address from "@/modules/10_registry/01_Information/03_Address.vue";
-import Family from "@/modules/10_registry/01_Information/04_Family.vue";
-import Educations from "@/modules/10_registry/01_Information/05_Educations.vue";
-import Ability from "@/modules/10_registry/01_Information/06_Ability.vue";
+import Information from "@/modules/10_registry/01_Information/01_Information.vue"; //ปรับข้อมูลส่วนตัว
+import ChangeName from "@/modules/10_registry/01_Information/02_ChangeName.vue"; //เปลี่ยนชื่อ-นามสกุล
+import Address from "@/modules/10_registry/01_Information/03_Address.vue"; //ที่อยู่
+import Family from "@/modules/10_registry/01_Information/04_Family.vue"; //ข้อมูลครอบครัว
+import Educations from "@/modules/10_registry/01_Information/05_Educations.vue"; //ข้อมูลการศึกษา
+import Ability from "@/modules/10_registry/01_Information/06_Ability.vue"; //ความสามารถ
 
 const router = useRouter();
 </script>
diff --git a/src/modules/10_registry/views/main.vue b/src/modules/10_registry/views/main.vue
index 7b1c10f..3d004d4 100644
--- a/src/modules/10_registry/views/main.vue
+++ b/src/modules/10_registry/views/main.vue
@@ -1,44 +1,51 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
-import genReport from "@/plugins/genreport";
+import { ref, computed, onMounted } from "vue";
+import { useQuasar } from "quasar";
 
-//หน้าเมนู
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReport from "@/plugins/genreport";
+import { useRouter } from "vue-router";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+import { useDataStore } from "@/stores/data";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** import components */
 import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
 import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
 import SalaryPage from "@/modules/10_registry/tabs/03_salary.vue";
 import Certificate from "@/modules/10_registry/tabs/04_Achievement.vue";
 import OtherPage from "@/modules/10_registry/tabs/05_other.vue";
 
-import { useRouter } from "vue-router";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-
-const store = useRegistryInFormationStore();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
 const router = useRouter();
-const tab = ref<string>("information");
+const store = useRegistryInFormationStore();
+const dataStore = useDataStore();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+
+const tab = ref<string>("information"); // ตัวแปรสำหรับเก็บชื่อแท็บที่เลือก
+const sizeImg = ref<string>(""); // ขนาดของรูปภาพโปรไฟล์
+
+/** ข้อความแสดงชื่อเงินเดือนหรือค่าจ้าง */
 const salaryText = computed(() => {
- return  dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
+  return dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
 });
 
-const sizeImg = ref<string>("");
-function onResize(size: any) {
+/**
+ * ฟังก์ชันจัดการขนาดของรูปภาพโปรไฟล์
+ * @param size ขนาดที่ได้จาก q-resize-observer
+ */
+function onResize(size: { width: number; height: number }) {
   const width = size.width > 100 ? 100 : size.width;
   sizeImg.value = `${width}px`;
 }
 
-function onMobile(type: string) {
-  router.push(`/registry/${type}`);
-}
-
+/**
+ * ฟังก์ชันดาวน์โหลดไฟล์ ก.พ.7/ก.ก.1 หรือประวัติแบบย่อ
+ * @param type ประเภทไฟล์ที่ต้องการดาวน์โหลด
+ * FULL: ก.พ.7/ก.ก.1
+ * SHORT: ประวัติแบบย่อ
+ */
 async function onClickDownloadKp7(type: string) {
   showLoader();
   const url =
@@ -66,19 +73,19 @@ async function onClickDownloadKp7(type: string) {
     });
 }
 
-/**
- * ฟังชั่นกลับหน้าหลัก
- */
+/** ฟังชั่นกลับหน้าหลัก*/
 const clickBack = () => {
   router.push(`/`);
 };
 
-/**
- * function redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล
- */
+/** ฟังก์ชัน redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล*/
 function redirectToPagePetition() {
   router.push(`/registry/request-edit`);
 }
+
+function onMobile(type: string) {
+  router.push(`/registry/${type}`);
+}
 </script>
 
 <template>
@@ -106,7 +113,40 @@ function redirectToPagePetition() {
       </div>
       <div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
         <div class="col-3">
-          <q-card bordered>
+          <q-card v-if="dataStore.isLoadingProfile" bordered>
+            <q-resize-observer @resize="onResize" />
+            <q-card-section>
+              <div class="relative-position" style="height: 120px">
+                <div class="absolute-center">
+                  <q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
+                </div>
+              </div>
+              <div class="column items-center q-mt-md q-mb-sm q-gutter-sm">
+                <q-skeleton type="text" width="120px" />
+                <q-skeleton type="text" width="150px" />
+                <q-skeleton type="text" width="100px" />
+                <q-skeleton type="text" width="50px" />
+              </div>
+            </q-card-section>
+
+            <q-list separator class="q-mt-md">
+              <q-item v-for="i in 2" :key="i">
+                <q-item-section>
+                  <q-skeleton type="text" />
+                </q-item-section>
+                <q-item-section>
+                  <q-skeleton type="text" />
+                </q-item-section>
+              </q-item>
+            </q-list>
+
+            <q-card-section class="q-gutter-y-sm">
+              <q-skeleton type="QBtn" class="full-width" height="48px" />
+              <q-skeleton type="QBtn" class="full-width" height="48px" />
+            </q-card-section>
+          </q-card>
+
+          <q-card v-else bordered>
             <q-resize-observer @resize="onResize" />
             <q-card-section>
               <div class="relative-position" style="height: 120px">
@@ -220,8 +260,6 @@ function redirectToPagePetition() {
 
             <q-separator />
 
-            <!-- รายการเเต่ละหน้า -->
-
             <q-tab-panels v-model="tab" animated>
               <q-tab-panel name="information">
                 <InformationPage />
@@ -248,7 +286,41 @@ function redirectToPagePetition() {
       </div>
 
       <div v-else>
-        <q-card bordered>
+        <q-card v-if="dataStore.isLoadingProfile" bordered>
+          <q-resize-observer @resize="onResize" />
+          <q-card-section>
+            <div class="relative-position" style="height: 120px">
+              <div class="absolute-center">
+                <q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
+              </div>
+            </div>
+
+            <div class="column items-center q-mt-md q-mb-lg q-gutter-sm">
+              <q-skeleton type="text" width="120px" />
+              <q-skeleton type="text" width="150px" />
+              <q-skeleton type="text" width="100px" />
+              <q-skeleton type="text" width="50px" />
+            </div>
+
+            <div class="row justify-center q-gutter-x-lg">
+              <q-skeleton type="QRadio" size="48px" />
+              <q-skeleton type="QRadio" size="48px" />
+            </div>
+
+            <q-list separator class="q-mt-md">
+              <q-item v-for="i in 5" :key="i">
+                <q-item-section>
+                  <q-skeleton type="text" width="120px" height="16px" />
+                </q-item-section>
+                <q-item-section avatar>
+                  <q-skeleton type="QIcon" size="24px" />
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card-section>
+        </q-card>
+
+        <q-card v-else bordered>
           <q-resize-observer @resize="onResize" />
           <q-card-section>
             <div class="text-center q-mt-md">
diff --git a/src/modules/10_registry/views/requestEditDetail.vue b/src/modules/10_registry/views/requestEditDetail.vue
index 4ad8548..3c40b00 100644
--- a/src/modules/10_registry/views/requestEditDetail.vue
+++ b/src/modules/10_registry/views/requestEditDetail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRouter, useRoute } from "vue-router";
@@ -37,8 +37,11 @@ const statusOptionMain = ref<DataOption[]>(
 );
 const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
 
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
+
 async function fetchData() {
-  showLoader();
+  // showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.requestEditByType(link.value) + `${requestId.value}`)
     .then(async (res) => {
@@ -56,9 +59,10 @@ async function fetchData() {
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
 const checkFile = ref<null | false | "img" | "doc">(null); // เช็คไฟล์อัปโหลด null ค่าเริ่มต้น, false ไม่มีไฟล์, "img" รูปภาพ, "doc" เอกสาร
@@ -154,7 +158,37 @@ onMounted(async () => {
               </div>
             </div>
             <div class="col-12"><q-separator /></div>
-            <q-card-section class="col-12">
+
+            <q-card-section v-if="isLoading" class="col-12">
+              <div class="row q-col-gutter-sm">
+                <!-- วันที่ยื่นขอ Skeleton -->
+                <div class="col-md-2 col-xs-12">
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
+
+                <!-- เรื่อง Skeleton -->
+                <div class="col-md-10 col-xs-12">
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
+
+                <!-- รายละเอียด Skeleton -->
+                <div class="col-12">
+                  <q-skeleton type="QInput" height="160px" />
+                </div>
+
+                <!-- ไฟล์ Skeleton -->
+                <div class="col-12 q-mt-md">
+                  <q-skeleton
+                    type="rect"
+                    width="120px"
+                    height="20px"
+                    class="q-mb-sm"
+                  />
+                </div>
+              </div>
+            </q-card-section>
+
+            <q-card-section v-else class="col-12">
               <div class="row q-col-gutter-sm">
                 <!-- วันที่ยื่นขอ -->
                 <div class="col-md-2 col-xs-12">
@@ -265,7 +299,19 @@ onMounted(async () => {
               <div class="q-pl-sm text-weight-bold text-dark">สถานะคำร้อง</div>
             </div>
             <div class="col-12"><q-separator /></div>
-            <q-card-section class="col-12">
+            <q-card-section v-if="isLoading" class="col-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12">
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
+
+                <div class="col-12">
+                  <q-skeleton type="QInput" height="160px" />
+                </div>
+              </div>
+            </q-card-section>
+
+            <q-card-section v-else class="col-12">
               <div class="row q-col-gutter-sm">
                 <div class="col-xs-12 col-md-12">
                   <q-select
@@ -312,6 +358,7 @@ onMounted(async () => {
 
           <div class="col-12 q-mt-sm">
             <Workflow
+              v-if="dataStore.officerType && requestId"
               ref="workflowRef"
               :id="requestId"
               :sys-name="
diff --git a/src/modules/10_registry/views/requestEditMain.vue b/src/modules/10_registry/views/requestEditMain.vue
index a1dce77..51c7dda 100644
--- a/src/modules/10_registry/views/requestEditMain.vue
+++ b/src/modules/10_registry/views/requestEditMain.vue
@@ -6,10 +6,10 @@ import http from "@/plugins/http";
 import { useDataStore } from "@/stores/data";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
 
-/**
- * importType
- */
+/**importType*/
 import type { QTableProps } from "quasar";
 import type {
   DataOption,
@@ -17,39 +17,26 @@ import type {
 } from "@/modules/10_registry/interface/index/Main";
 import type { DataRequest } from "@/modules/10_registry/interface/response/Main";
 
-/**
- * importComponents
- */
+/** importComponents*/
 import DialogAddRequestEdit from "@/modules/10_registry/components/DialogAddRequestEdit.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-/**
- * importStore
- */
-import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
-import { useCounterMixin } from "@/stores/mixin";
-
-/**
- * use
- */
+/** use */
 const $q = useQuasar();
 const store = useRequestEditStore();
 const link = ref<string>("");
 const router = useRouter();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, dialogRemove, success } =
-  useCounterMixin();
+const { messageError } = useCounterMixin();
 
-/**
- * ตัวแปร
- */
+/** ตัวแปร*/
 const modalPetiton = ref<boolean>(false);
 const status = ref<string>("");
 const keyword = ref<string>("");
 const statusOption = ref<DataOption[]>(store.optionStatus);
+const isLoading = ref<boolean>(false);
 
-/**
- * Table
- */
+/** Table*/
 const rows = ref<DataRequest[]>([]);
 const page = ref<number>(1);
 const pageSize = ref<number>(10);
@@ -124,32 +111,26 @@ const visibleColumns = ref<string[]>([
   "remark",
 ]);
 
-/**
- * function กลับไปหน้าทะเบียนประวัติ
- */
+/** function กลับไปหน้าทะเบียนประวัติ*/
 function onclickBackPage() {
   router.push(`/registry`);
 }
 
-/**
- * function กดเพิ่มรายการยื่นคำร้องขอแก้ไขข้อมูล
- */
+/** function กดเพิ่มรายการยื่นคำร้องขอแก้ไขข้อมูล*/
 function onClickAdd() {
   modalPetiton.value = true;
 }
 
-/**
- * function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล
- */
-function fetchListRequset() {
+/** function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล*/
+async function fetchListRequset() {
   let queryParams = {
     page: page.value,
     pageSize: pageSize.value,
     status: status.value,
     keyword: keyword.value,
   };
-  showLoader();
-  http
+  isLoading.value = true;
+  await http
     .get(config.API.requestEditByType(link.value) + `user`, {
       params: queryParams,
     })
@@ -163,21 +144,17 @@ function fetchListRequset() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/**
- * function เลือกสถานะคำร้อง
- */
+/** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
   page.value = 1;
   fetchListRequset();
 }
 
-/**
- * function เคลียร์ข้อมูลสถานะคำร้อง
- */
+/** function เคลียร์ข้อมูลสถานะคำร้อง*/
 function clearStatus() {
   status.value = "";
   statusOption.value = store.optionStatus;
@@ -197,80 +174,15 @@ function filterOption(val: string, update: Function) {
   });
 }
 
+/**
+ * function อัพเดทขนาดหน้าใน pagination
+ * @param newPagination ข้อมูลใหม่ของ pagination
+ */
 function updatePageSizePagination(newPagination: NewPagination) {
   page.value = 1;
   pageSize.value = newPagination.rowsPerPage;
 }
 
-/**
- * function หาชื่อไฟล์
- * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
- */
-function onDownloadFile(id: string) {
-  showLoader();
-  http
-    .get(
-      config.API.file(
-        "ระบบทะเบียนประวัติ",
-        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
-        id
-      )
-    )
-    .then((res) => {
-      if (res.data.length !== 0) {
-        downloadUrl(id, res.data[0].fileName);
-      } else {
-        hideLoader();
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-    });
-}
-
-/**
- * function  โหลดไฟล์
- * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
- * @param fileName  ชื่อไฟล์
- */
-function downloadUrl(id: string, fileName: string) {
-  http
-    .get(
-      config.API.fileByFile(
-        "ระบบทะเบียนประวัติ",
-        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
-        id,
-        fileName
-      )
-    )
-    .then((res) => {
-      window.open(res.data.downloadUrl, "_blank");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-// function onDeleteLidt(id: string) {
-//   dialogRemove($q, () => {
-//     showLoader();
-//     http
-//       .delete(config.API.requestEdit + `${id}`)
-//       .then(async (res) => {
-//         await fetchListRequset();
-//         await success($q, "ลบข้อมูลสำเร็จ");
-//       })
-//       .catch((err) => {
-//         messageError($q, err);
-//         hideLoader();
-//       });
-//   });
-// }
-
 watch(
   () => pageSize.value,
   () => {
@@ -381,7 +293,9 @@ onMounted(async () => {
           </div>
         </div>
         <div class="col-12">
+          <SkeletonTable v-if="isLoading" :columns="columns" />
           <d-table
+            v-else
             :columns="columns"
             :rows="rows"
             row-key="id"
@@ -411,36 +325,11 @@ onMounted(async () => {
                   <div v-if="col.name == 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
-                  <!-- <div v-else-if="col.name === 'document'">
-                    <q-btn
-                      icon="mdi-download"
-                      round
-                      dense
-                      flat
-                      color="primary"
-                      size="12px"
-                      @click.stop.pervent="onDownloadFile(props.row.id)"
-                    >
-                      <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
-                    </q-btn>
-                  </div> -->
+
                   <div v-else class="table_ellipsis2">
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
-                <!-- <q-td>
-                  <q-btn
-                    v-if="props.row.status === 'PENDING'"
-                    flat
-                    round
-                    color="red"
-                    icon="mdi-delete"
-                    size="12px"
-                    @click="onDeleteLidt(props.row.id)"
-                  >
-                    <q-tooltip>ลบคำร้องขอแก้ไขข้อมูล</q-tooltip>
-                  </q-btn>
-                </q-td> -->
               </q-tr>
             </template>
             <template v-slot:pagination="scope">
diff --git a/src/modules/12_organization/views/main.vue b/src/modules/12_organization/views/main.vue
index aa0a5f4..0b31bfa 100644
--- a/src/modules/12_organization/views/main.vue
+++ b/src/modules/12_organization/views/main.vue
@@ -29,6 +29,7 @@ const dataSource = ref(); // ข้อมูล Chart
 const idActive = ref<string>("");
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const scrollContainer = ref<HTMLElement | null>(null);
+const isLoading = ref<boolean>(false);
 
 /**
  * สร้าง Path Breadcrumbs
@@ -150,7 +151,7 @@ async function fetchStructChart(
   type: string,
   status: boolean = false
 ) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.orgStructChart(id, type))
     .then((res) => {
@@ -168,7 +169,7 @@ async function fetchStructChart(
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -236,7 +237,19 @@ onMounted(async () => {
     <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
       <div class="col-12 row">
         <q-card bordered class="col-12 row caedNone">
-          <div class="q-pa-sm row wrap items-center">
+          <!-- Skeleton สำหรับ Toolbar -->
+          <div v-if="isLoading" class="q-pa-sm row wrap items-center col-12">
+            <q-skeleton type="circle" size="40px" />
+            <q-skeleton type="circle" size="40px" class="q-ml-sm" />
+            <q-skeleton
+              type="rect"
+              width="300px"
+              height="40px"
+              class="q-ml-md"
+            />
+          </div>
+
+          <div v-else class="q-pa-sm row wrap items-center">
             <q-btn
               flat
               :diasble="isLoadBtn"
@@ -276,7 +289,53 @@ onMounted(async () => {
             <q-separator />
           </div>
 
+          <!-- Organization Chart Skeleton -->
           <div
+            v-if="isLoading"
+            class="q-pt-md col-12"
+            style="height: 70vh; overflow: hidden"
+          >
+            <div class="row justify-center q-mb-lg">
+              <!-- Main Department Skeleton -->
+              <div class="col-auto">
+                <q-skeleton
+                  type="rect"
+                  width="300px"
+                  height="80px"
+                  class="rounded-borders"
+                />
+              </div>
+            </div>
+
+            <!-- Sub Departments Skeleton -->
+            <div class="row justify-center q-col-gutter-md">
+              <div v-for="i in 5" :key="i" class="col-auto">
+                <div class="column items-center">
+                  <q-skeleton
+                    type="rect"
+                    width="200px"
+                    height="60px"
+                    class="rounded-borders q-mb-md"
+                  />
+
+                  <!-- Sub Items Skeleton -->
+                  <div class="column q-gutter-xs">
+                    <q-skeleton
+                      v-for="j in 3"
+                      :key="j"
+                      type="rect"
+                      width="180px"
+                      height="35px"
+                      class="rounded-borders"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-else
             id="structChart"
             ref="scrollContainer"
             style="
diff --git a/src/modules/13_portfolio/views/Add.vue b/src/modules/13_portfolio/views/Add.vue
index 4cb6c60..6f20d1f 100644
--- a/src/modules/13_portfolio/views/Add.vue
+++ b/src/modules/13_portfolio/views/Add.vue
@@ -13,9 +13,7 @@ const router = useRouter();
 const mixin = useCounterMixin();
 const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 
-/**
- * ตัวแปรที่ใช้งาน
- */
+/** ตัวแปรที่ใช้งาน */
 const route = useRoute();
 const files = ref<any>();
 const name = ref<string>("");
@@ -24,60 +22,74 @@ const id = ref<string>("");
 const routeName = router.currentRoute.value.name;
 const fileList = ref<any[]>([]);
 
-const saveData = async () => {
-  dialogConfirm(
-    $q,
-    () => {
-      createTransfer();
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลใช่หรือไม่"
-  );
-};
-
-/**
- * ฟังก์ชั่นสร้างขอโอน
- */
-const createTransfer = async () => {
-  showLoader();
-  await http
-    .post(config.API.portfolio, { name: name.value, detail: detail.value })
-    .then(async (res) => {
-      uploadFiles(res.data.result);
-    })
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-    });
-};
+const isLoading = ref<boolean>(false);
+const isLoadingFile = ref<boolean>(false);
 
 /**
  * ฟังก์ชั่นเรียกข้อมูลจาก Api
  * @param id ไอดีของข้อมูล
  */
-const fecthData = async (id: string) => {
-  showLoader();
+async function fetchData(id: string) {
+  isLoading.value = true;
   await http
     .get(config.API.portfolioId(id))
-    .then((res: any) => {
+    .then(async (res) => {
       let data = res.data.result;
       name.value = data.name;
       detail.value = data.detail;
-      fetchFile();
     })
-    .catch((e: any) => {
+    .catch((e) => {
       messageError($q, e);
-      hideLoader();
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
-};
+}
+
+/** ฟังก์ชั่นรายการเอกสาร */
+async function fetchFile() {
+  isLoadingFile.value = true;
+  await http
+    .get(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id.value))
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoadingFile.value = false;
+    });
+}
+
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .post(config.API.portfolio, { name: name.value, detail: detail.value })
+        .then(async (res) => {
+          await uploadFiles(res.data.result);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลใช่หรือไม่"
+  );
+}
 
 /**
- * function อัปโหลดไฟล์
+ * ฟังก์ชั่นอัปโหลดไฟล์
  * @param id ผลงาน
  */
-function uploadFiles(id: string) {
-  showLoader();
-  http
+async function uploadFiles(id: string) {
+  await http
     .post(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id), {
       replace: true,
       fileList: [
@@ -92,23 +104,21 @@ function uploadFiles(id: string) {
           res.data[key]?.fileName !== undefined &&
           res.data[key]?.fileName !== ""
       );
-      foundKey && uploadFileURL(res.data[foundKey]?.uploadUrl);
+      foundKey && (await uploadFileURL(res.data[foundKey]?.uploadUrl));
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     });
 }
 
 /**
- * function บันทึกไฟล์
+ * ฟังก์ชั่นบันทึกไฟล์
  * @param uploadUrl บันทึกไฟล์
  */
-function uploadFileURL(uploadUrl: string) {
+async function uploadFileURL(uploadUrl: string) {
   const Data = new FormData();
   Data.append("file", files.value);
-  showLoader();
-  axios
+  await axios
     .put(uploadUrl, files.value, {
       headers: {
         "Content-Type": files.value.type,
@@ -122,29 +132,10 @@ function uploadFileURL(uploadUrl: string) {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
       files.value = null;
     });
 }
 
-/**
- *function fetch รายการเอกสาร
- */
-function fetchFile() {
-  showLoader();
-  http
-    .get(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id.value))
-    .then((res) => {
-      fileList.value = res.data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /**
  * ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
  * @param fileName ชื่อไฟล์
@@ -165,13 +156,11 @@ function fileOpen(fileName: string) {
     });
 }
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(() => {
+/** Hook Lifecycle ที่ทำงานเมื่อ component ถูก mount*/
+onMounted(async () => {
   if (route.params.id !== undefined) {
     id.value = route.params.id.toString();
-    fecthData(id.value);
+    await Promise.all([fetchData(id.value), fetchFile()]);
   }
 });
 </script>
@@ -197,9 +186,17 @@ onMounted(() => {
         class="col-12"
         greedy
         @submit.prevent
-        @validation-success="saveData"
+        @validation-success="onSubmit"
       >
-        <q-card bordered>
+        <q-card bordered v-if="isLoading">
+          <div class="q-pa-md">
+            <div class="q-gutter-md">
+              <q-skeleton height="40px" />
+              <q-skeleton height="150px" />
+            </div>
+          </div>
+        </q-card>
+        <q-card bordered v-else>
           <div class="col-12 row q-col-gutter-md q-pa-md">
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
@@ -246,6 +243,7 @@ onMounted(() => {
                       <q-icon name="attach_file" /> </template
                   ></q-file>
                 </div>
+
                 <div class="col-12 row" v-if="routeName != 'addPortfolio'">
                   <q-card bordered flat class="full-width">
                     <div
@@ -256,7 +254,8 @@ onMounted(() => {
                       </div>
                     </div>
                     <q-separator />
-                    <q-list separator>
+                    <q-skeleton v-if="isLoadingFile" type="QSlider" />
+                    <q-list v-else separator>
                       <q-item v-for="file in fileList" :key="file.key">
                         <q-item-section>
                           {{ file.fileName }}
diff --git a/src/modules/13_portfolio/views/Main.vue b/src/modules/13_portfolio/views/Main.vue
index 8d1141d..0d243e2 100644
--- a/src/modules/13_portfolio/views/Main.vue
+++ b/src/modules/13_portfolio/views/Main.vue
@@ -9,6 +9,9 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { PortfolioRowsType } from "@/modules/13_portfolio/interface/Main";
+
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -27,9 +30,8 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-/**
- * เพิ่มหัวข้อตาราง
- */
+
+const isLoading = ref<boolean>(false);
 const filter = ref<string>("");
 const rows = ref<PortfolioRowsType[]>([]);
 const rowsData = ref<PortfolioRowsType[]>([]);
@@ -64,9 +66,9 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-//นำข้อมูลมาแสดง
+/** ฟังก์ชั่นนำข้อมูลรายการเอกสาร/ผลงาน */
 async function fecthList() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.portfolio)
     .then((res) => {
@@ -77,20 +79,16 @@ async function fecthList() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/**
- * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
- */
+/** ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน*/
 async function clickAdd() {
   router.push(`/portfolio/add`);
 }
 
-/**
- * ฟังก์ชั่นกดย้อนกลับ
- */
+/** ฟังก์ชั่นกดย้อนกลับ*/
 function clickBack() {
   router.push(`/`);
 }
@@ -100,21 +98,25 @@ function clickBack() {
  * @param id id row
  */
 function onDelete(id: string) {
-  dialogRemove($q, () => {
+  dialogRemove($q, async () => {
     showLoader();
-    http
+    await http
       .delete(config.API.portfolioId(id))
-      .then((res) => {
+      .then(async () => {
+        await fecthList();
         success($q, "ลบข้อมูลสำเร็จ");
-        fecthList();
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
   });
 }
 
+
+/** ฟังก์ชั่นค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -123,9 +125,7 @@ function onSearch() {
   );
 }
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
+/** Hook Lifecycle */
 onMounted(async () => {
   await fecthList();
 });
@@ -198,7 +198,9 @@ onMounted(async () => {
               </q-select>
             </div>
           </div>
-          <div>
+
+          <SkeletonTable v-if="isLoading" :columns="columns" />
+          <div class="col-12" v-else>
             <d-table
               flat
               bordered
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index 9b53dfe..8365183 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -10,20 +10,18 @@ import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store"; // ดึ
 
 import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const store = useIndividualDevelopmentPlan();
 const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
 
-const idRow = ref<string>("");
-const isEdit = ref<boolean>(false);
-const modalAdd = ref<boolean>(false); //ตัวแปร dialog #Add
+const isLoading = ref<boolean>(false);
 const filterKeyword = ref<string>("");
 const status = ref<string>("ALL"); // สถานะคำร้อง
 const statusOptions = ref<DataOption[]>(store.optionStatus);
-
-/** pagination */
 const rows = ref<RowsListMain[]>([]);
 const total = ref<number>(0);
 const totalList = ref<number>(1);
@@ -33,7 +31,6 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-
 const visibleColumns = ref<string[]>([
   "no",
   "name",
@@ -157,14 +154,6 @@ function filterOption(val: string, update: Function) {
   });
 }
 
-/**
- * function เคลียร์ข้อมูลสถานะคำร้อง
- */
-function clearStatus() {
-  status.value = "ALL";
-  statusOptions.value = store.optionStatus;
-}
-
 /** ฟังชั่น เปิด popup */
 function openAdd() {
   router.push("/idp-registry");
@@ -172,21 +161,24 @@ function openAdd() {
 
 function onDelete(id: string) {
   dialogRemove($q, async () => {
+    showLoader();
     await http
       .delete(config.API.developmentRequest + `/${id}`)
-      .then(async (res) => {
-        success($q, "ลบข้อมูลสำเร็จ");
+      .then(async () => {
         await getListData();
+        success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
-      .finally(() => {});
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 /** list รายการ */
 async function getListData() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(
       config.API.developmentRequest +
@@ -199,31 +191,33 @@ async function getListData() {
       totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
       total.value = dataTotal;
       rows.value = data;
-      hideLoader();
     })
     .catch((e) => {
-      hideLoader();
+      messageError($q, e);
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
 /**
  * function หาชื่อไฟล์
  * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
  */
-function onDownloadFile(id: string) {
+async function onDownloadFile(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id))
-    .then((res) => {
+    .then(async (res) => {
       if (res.data.length !== 0) {
-        downloadUrl(id, res.data[0].fileName);
+        await downloadUrl(id, res.data[0].fileName);
       } else {
-        hideLoader();
       }
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
       hideLoader();
     });
 }
@@ -233,8 +227,8 @@ function onDownloadFile(id: string) {
  * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
  * @param fileName  ชื่อไฟล์
  */
-function downloadUrl(id: string, fileName: string) {
-  http
+async function downloadUrl(id: string, fileName: string) {
+  await http
     .get(
       config.API.fileByFile(
         "IDP",
@@ -248,9 +242,6 @@ function downloadUrl(id: string, fileName: string) {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -374,8 +365,10 @@ onMounted(async () => {
             />
           </div>
 
-          <div>
+          <div class="col-12">
+            <SkeletonTable v-if="isLoading" :columns="columns" />
             <d-table
+              v-else
               :columns="columns"
               :rows="rows"
               row-key="id"
diff --git a/src/modules/14_IDP/views/registry.vue b/src/modules/14_IDP/views/registry.vue
index 4494f52..9a2649f 100644
--- a/src/modules/14_IDP/views/registry.vue
+++ b/src/modules/14_IDP/views/registry.vue
@@ -17,13 +17,14 @@ import type {
 } from "@/modules/14_IDP/interface/Main";
 
 const $q = useQuasar();
-const { dialogConfirm, showLoader, hideLoader, messageError, success } =
-  useCounterMixin();
-const dataStore = useDataStore();
-
-const idRow = ref<string>("");
 const router = useRouter();
 const route = useRoute();
+const dataStore = useDataStore();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+
+const idRow = ref<string>("");
+const isLoading = ref<boolean>(false);
 const isReadOnly = ref<boolean>(false);
 const isEdit = ref<boolean>(false); // เก็บ เช็ค รายละเอียด/แก้ไข
 const requestId = ref<string>(
@@ -204,7 +205,7 @@ function downloadUrl(id: string, fileName: string) {
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
     const body = {
       name: formData.topic,
@@ -219,16 +220,17 @@ function onSubmit() {
       isDevelopment10: isDevelopment10.value,
       developmentProjects: formData.development,
     };
-    http
+    await http
       .post(config.API.developmentRequest, body)
       .then(async (res) => {
         await createURLUpload(res.data.result, formData.document);
       })
       .catch((e) => {
         messageError($q, e);
-        hideLoader();
       })
-      .finally(() => {});
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -256,7 +258,6 @@ async function createURLUpload(id: string, file: any) {
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     });
 }
 
@@ -270,21 +271,18 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
         "Content-Type": file.type,
       },
     })
-    .then(async (res) => {
+    .then(async () => {
       success($q, `บันทึกข้อมูลสำเร็จ`);
       router.push("/idp");
-      hideLoader();
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
-    })
-    .finally(() => {});
+    });
 }
 
-function getDetail() {
-  showLoader();
-  http
+async function getDetail() {
+  isLoading.value = true;
+  await http
     .get(config.API.developmentRequest + `/user/${idRow.value}`)
     .then((res) => {
       const data = res.data.result;
@@ -301,7 +299,7 @@ function getDetail() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -339,7 +337,13 @@ onMounted(() => {
       <q-card bordered>
         <q-form greedy @submit.prevent @validation-success="onSubmit">
           <q-card-section>
-            <div class="row q-col-gutter-sm">
+            <div v-if="isLoading" class="q-gutter-md">
+              <q-skeleton height="150px" />
+              <q-skeleton height="150px" />
+              <q-skeleton height="150px" />
+            </div>
+
+            <div v-else class="row q-col-gutter-sm">
               <div class="col-12">
                 <div class="row q-col-gutter-sm">
                   <div class="col-12">
@@ -539,6 +543,7 @@ onMounted(() => {
               </div>
             </div>
           </q-card-section>
+
           <q-separator v-if="!isEdit" />
           <q-card-actions align="right" v-if="!isEdit">
             <q-btn label="บันทึก" color="secondary" type="submit"
diff --git a/src/stores/data.ts b/src/stores/data.ts
index 57eea19..f24c77e 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -9,6 +9,8 @@ import { useCounterMixin } from "./mixin";
 import type { ProfileData, DataProfile } from "@/interface/Main";
 
 export const useDataStore = defineStore("dataMain", () => {
+  const isLoadingMenu = ref<boolean>(false);
+  const isLoadingProfile = ref<boolean>(false);
   const dataProfile = ref<any>();
   const storeRegistry = useRegistryInFormationStore();
   const $q = useQuasar();
@@ -102,6 +104,7 @@ export const useDataStore = defineStore("dataMain", () => {
   }
 
   async function getData(dataPerson: any) {
+    isLoadingProfile.value = true;
     const data = await dataPerson;
     dataprofilePosition.value = data;
     profileId.value = data.profileId;
@@ -130,9 +133,11 @@ export const useDataStore = defineStore("dataMain", () => {
     formData.org = findOrgName(data);
     storeRegistry.profileId = data.profileId;
     storeRegistry.citizenId = data.citizenId;
+    isLoadingProfile.value = false;
   }
 
   async function getProFileType() {
+    isLoadingMenu.value = true;
     if (officerType.value == "") {
       await http
         .get(config.API.proFileType)
@@ -144,6 +149,8 @@ export const useDataStore = defineStore("dataMain", () => {
           messageError($q, e);
         });
     }
+
+    isLoadingMenu.value = false;
     return convertEmType(officerType.value);
   }
 
@@ -172,6 +179,8 @@ export const useDataStore = defineStore("dataMain", () => {
     dataProfile,
     profileId,
     dataprofilePosition,
+    isLoadingMenu,
+    isLoadingProfile,
   };
 });
 

From 0a8d0c5471fe64fac8b2aaac90949371ceeb8bd0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 5 Aug 2025 15:35:14 +0700
Subject: [PATCH 166/195] fix load

---
 src/modules/01_dashboard/views/Dashboard.vue         |  6 +++++-
 .../06_evaluate/components/EvaluateStepMain.vue      |  7 -------
 src/modules/06_evaluate/components/step/step2.vue    |  2 +-
 src/modules/06_evaluate/components/step/step3.vue    | 11 +++--------
 src/modules/06_evaluate/components/step/step7.vue    | 12 ++++--------
 5 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 9dec0e0..c1b5d02 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -355,7 +355,11 @@ onMounted(async () => {
           v-if="isLoadingInbox"
           style="height: calc(100% - 60px)"
         >
-          <q-skeleton height="100%" square />
+          <div v-for="(item, index) in 3">
+            <q-skeleton type="text" width="10%" class="text-subtitle1" />
+            <q-skeleton type="text" width="50%" class="text-subtitle1" />
+            <q-skeleton type="text" class="text-caption" />
+          </div>
         </div>
 
         <div
diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index c175ab4..638556c 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -826,13 +826,6 @@ onMounted(async () => {
                 />
               </q-card-actions>
             </div>
-
-            <div v-else class="col-xs-12 col-sm-9 q-pa-md">
-              <div class="toptitle2">
-                {{ store.step }}.{{ store.title[store.step - 1] }}
-              </div>
-              <q-skeleton height="450px" type="Qcard" square />
-            </div>
           </q-form>
         </q-card>
       </div>
diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index 1568b02..e480695 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -349,7 +349,7 @@ onMounted(async () => {
   <div class="col-12 q-pa-sm">
     <!-- ผลงาน -->
     <div class="col-12">
-      <q-skeleton type="Qcard" height="100px" v-if="isLoading" />
+      <q-skeleton type="Qcard" height="100px" v-if="isLoading" class="q-mb-sm" />
       <q-card v-else bordered class="cardSp1 col-12">
         <div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
           ผลงาน
diff --git a/src/modules/06_evaluate/components/step/step3.vue b/src/modules/06_evaluate/components/step/step3.vue
index 9866fa5..93ae4b8 100644
--- a/src/modules/06_evaluate/components/step/step3.vue
+++ b/src/modules/06_evaluate/components/step/step3.vue
@@ -106,13 +106,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-skeleton
-    v-if="isLoading"
-    class="q-pa-md"
-    type="Qcard"
-    style="width: 100%; height: 100%"
-  />
-  <q-list separator v-else>
+  <q-list separator>
     <q-item
       v-for="(item, index) in formTemplates"
       :key="index"
@@ -123,7 +117,8 @@ onMounted(async () => {
       @click="handleItemClick(index + 1)"
       class="cursor-pointer"
     >
-      <q-item-section>{{ item.title }}</q-item-section>
+      <q-skeleton v-if="isLoading" type="text" width="100%" />
+      <q-item-section v-else>{{ item.title }}</q-item-section>
     </q-item>
   </q-list>
 </template>
diff --git a/src/modules/06_evaluate/components/step/step7.vue b/src/modules/06_evaluate/components/step/step7.vue
index 9528391..40562d6 100644
--- a/src/modules/06_evaluate/components/step/step7.vue
+++ b/src/modules/06_evaluate/components/step/step7.vue
@@ -73,13 +73,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-skeleton
-    v-if="isLoading"
-    class="q-pa-md"
-    type="Qcard"
-    style="width: 100%; height: 100%"
-  />
-  <q-list separator v-else>
+  <q-list separator>
     <q-item
       clickable
       v-ripple
@@ -87,7 +81,9 @@ onMounted(async () => {
       active-class="text-primary"
       class="cursor-pointer"
     >
-      <q-item-section>เอกสารเล่ม 2</q-item-section>
+      <q-skeleton v-if="isLoading" type="text" width="100%" />
+
+      <q-item-section v-else>เอกสารเล่ม 2</q-item-section>
     </q-item>
   </q-list>
 </template>

From 5846811f5eba054b3a104301137c88e23fcaa497 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 6 Aug 2025 11:57:02 +0700
Subject: [PATCH 167/195] =?UTF-8?q?fix=20=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=20=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=9E=E0=B8=B1=E0=B8=92=E0=B8=99=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84=E0=B8=A5?=
 =?UTF-8?q?=20(Individual=20Development=20Plan)=20=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
index aab708c..683ec42 100644
--- a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
+++ b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
@@ -172,7 +172,8 @@ onMounted(async () => {
 </script>
 <template>
   <!-- v-if="mode" -->
-  <div class="col-12" v-if="dataPerson.officerType == 'OFFICER'">
+  <!-- v-if="dataPerson.officerType == 'OFFICER'" -->
+  <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
         >การพัฒนารายบุคคล (Individual Development Plan)</span

From 04184c0d70b9913e01228621a08788b3bb7d3830 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 6 Aug 2025 14:40:36 +0700
Subject: [PATCH 168/195] =?UTF-8?q?fix:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=E0=B9=82=E0=B8=AB=E0=B8=A5=E0=B8=94=20=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AD=E0=B9=82=E0=B8=AD=E0=B8=99=20=E0=B8=AD=E0=B8=B8?=
 =?UTF-8?q?=E0=B8=97=E0=B8=A3=E0=B8=93=E0=B9=8C/=E0=B8=A3=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=97=E0=B8=B8=E0=B8=81=E0=B8=82=E0=B9=8C?=
 =?UTF-8?q?=20=E0=B8=82=E0=B8=AD=E0=B8=A5=E0=B8=B2=E0=B8=AD=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_transfer/views/AddTransfer.vue | 29 ++++++++-----
 src/modules/02_transfer/views/Main.vue        | 15 ++++---
 src/modules/03_retire/views/addRetire.vue     | 43 +++++++++++++------
 src/modules/03_retire/views/main.vue          | 37 ++++++++++------
 src/modules/07_appealComplain/views/Add.vue   |  8 +++-
 src/modules/07_appealComplain/views/Edit.vue  | 11 ++---
 src/modules/07_appealComplain/views/Form.vue  |  9 ++++
 src/modules/07_appealComplain/views/Main.vue  | 17 +++++---
 8 files changed, 113 insertions(+), 56 deletions(-)

diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index 0d013b1..10adab8 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -15,7 +15,7 @@ const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
+const { success, messageError, dialogConfirm ,showLoader,hideLoader} = mixin;
 
 const id = ref<string>(
   router.currentRoute.value.name === "addTransfer"
@@ -23,6 +23,7 @@ const id = ref<string>(
     : route.params.id.toString()
 ); //id path
 
+const isLoading = ref<boolean>(false);
 const files = ref<any>(); //ไฟล์
 const tranferOrg = ref<string>(""); //ชื่อหน่วยงานที่ขอโอนไป
 const noteReason = ref<string>(""); //เหตุผล
@@ -42,7 +43,7 @@ async function saveData() {
 
 /** ฟังก์ชั่นสร้างขอโอน */
 async function createTransfer() {
-  showLoader();
+  showLoader()
   const formData = new FormData();
   formData.append("Organization", tranferOrg.value);
   formData.append("Reason", noteReason.value);
@@ -51,14 +52,14 @@ async function createTransfer() {
     .post(config.API.listtransfer(), formData)
     .then((res) => {
       router.push(`/transfer/` + res.data.result);
+      hideLoader()
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
+      hideLoader()
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -66,7 +67,7 @@ async function createTransfer() {
  * @param id ไอดีของข้อมูล
  */
 async function fecthDataTransfer(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.transferByid(id))
     .then((res: any) => {
@@ -74,13 +75,13 @@ async function fecthDataTransfer(id: string) {
       tranferOrg.value = data.organization;
       noteReason.value = data.reason;
       files.value = data.docs;
+      isLoading.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
+      isLoading.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -129,6 +130,7 @@ onMounted(() => {
             <div class="row">
               <div class="col-12 row q-col-gutter-sm">
                 <q-input
+                  v-if="!isLoading"
                   :class="
                     routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
                   "
@@ -140,8 +142,11 @@ onMounted(() => {
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
                 />
-
+                <div class="col-12" v-else>
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
                 <q-input
+                  v-if="!isLoading"
                   :class="
                     routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
                   "
@@ -154,7 +159,9 @@ onMounted(() => {
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
                 />
-
+                <div class="col-12" v-else>
+                  <q-skeleton type="QInput" height="120px" />
+                </div>
                 <div class="col-12 row" v-if="routeName == 'addTransfer'">
                   <q-file
                     v-model="files"
diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index 5d4c3b5..d8c01f5 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -14,14 +14,15 @@ import type {
   TransferMain,
 } from "@/modules/02_transfer/interface/Main";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const transferData = useTransferDataStore();
 
 const { statusText } = transferData;
-const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
-  mixin;
+const { date2Thai, messageError, onSearchDataTable } = mixin;
 
 const pagination = ref({
   sortBy: "desc",
@@ -30,6 +31,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const isLoading = ref<boolean>(false);
 const rows = ref<TransferMain[]>([]);
 const rowsData = ref<TransferMain[]>([]);
 const filter = ref<string>("");
@@ -120,7 +122,7 @@ const columns = ref<QTableProps["columns"]>([
 
 //นำข้อมูลมาแสดง
 async function fecthListTransfer() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.listUserTransfer())
     .then((res) => {
@@ -139,12 +141,11 @@ async function fecthListTransfer() {
       }));
       rows.value = listData;
       rowsData.value = listData;
+      isLoading.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -246,6 +247,7 @@ onMounted(async () => {
           </div>
           <div>
             <d-table
+              v-if="!isLoading"
               flat
               bordered
               dense
@@ -339,6 +341,7 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
+            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 64080f6..1715d4f 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 import type { QForm, QTableProps } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
@@ -20,6 +20,8 @@ import Dialog from "@/modules/03_retire/views/DialogRetire.vue";
 import Header from "@/components/DialogHeader.vue";
 import Workflow from "@/components/Workflow/Main.vue";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@@ -44,6 +46,7 @@ const id = ref<string>(
     ? route.params.id.toString()
     : ""
 ); //เก็บ id path
+const isLoad = ref<boolean>(false);
 const rowsApprover = ref<RowsType>();
 const myform = ref<QForm | null>(null); //form
 const tranferOrg = ref(""); //สถานที่ยื่นขอลาออกจากราชการ
@@ -201,7 +204,7 @@ function cancelResing() {
  * @param id ไอดีของข้อมูล
  */
 async function fectDataresign(id: string) {
-  showLoader();
+  isLoad.value = true;
   await http
     .get(config.API.resingByidType(link.value, id))
     .then((res) => {
@@ -225,13 +228,12 @@ async function fectDataresign(id: string) {
       };
       files.value = data.docs;
       dataDetail.value = data;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -318,6 +320,7 @@ onMounted(async () => {
 
           <div class="col-12 row q-col-gutter-sm q-pa-md">
             <q-input
+              v-if="!isLoad"
               :class="
                 routeName !== 'AddRetire'
                   ? 'col-md-9 col-xs-12'
@@ -332,7 +335,9 @@ onMounted(async () => {
               :readonly="routeName != 'AddRetire'"
               :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
             />
-
+            <div class="col-md-9 col-xs-12 inputgreen" v-else>
+              <q-skeleton type="QInput" height="40px" />
+            </div>
             <!-- <datepicker
                     :class="
                       routeName !== 'AddRetire'
@@ -383,6 +388,7 @@ onMounted(async () => {
                   </datepicker> -->
 
             <datepicker
+              v-if="!isLoad"
               :class="
                 routeName !== 'AddRetire'
                   ? 'col-md-3 col-xs-12'
@@ -428,7 +434,11 @@ onMounted(async () => {
                 </q-input>
               </template>
             </datepicker>
+            <div v-else class="col-md-3 col-xs-12">
+              <q-skeleton type="QInput" height="40px" />
+            </div>
             <q-select
+              v-if="!isLoad"
               v-model="noteReason"
               :class="
                 routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
@@ -448,6 +458,9 @@ onMounted(async () => {
                     ]"
             >
             </q-select>
+            <div v-else class="col-12">
+              <q-skeleton type="QInput" height="40px" />
+            </div>
             <q-input
               :class="
                 routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
@@ -595,6 +608,7 @@ onMounted(async () => {
                     <q-separator />
                     <div class="col-12 q-pa-sm">
                       <d-table
+                        v-if="!isLoad"
                         ref="table"
                         :columns="columnsCommanders"
                         :rows="rowsApprover?.commanders ?? []"
@@ -643,11 +657,11 @@ onMounted(async () => {
                           </q-tr>
                         </template>
                       </d-table>
+                      <SkeletonTable v-else :columns="columnsCommanders" />
                     </div>
                   </q-card>
                 </div>
 
-                <!-- ผลการพิจารณาของผู้มีอำนาจ -->
                 <div class="col-12 row" v-if="routeName != 'AddRetire'">
                   <q-card bordered class="row col-12 text-dark q-mt-sm">
                     <div
@@ -662,7 +676,7 @@ onMounted(async () => {
                       <div class="col-12 row bg-white q-col-gutter-md">
                         <div class="col-xs-6 row items-start">
                           <div class="col-12 text-top">ชื่อ - นามสกุล</div>
-                          <div class="col-12 text-detail">
+                          <div class="col-12 text-detail" v-if="!isLoad">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -671,10 +685,11 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                         <div class="col-xs-6 row items-start">
                           <div class="col-12 text-top">สถานะ</div>
-                          <div class="col-12 text-detail">
+                          <div v-if="!isLoad" class="col-12 text-detail">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -685,12 +700,13 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                         <div class="col-xs-6 row items-start">
                           <div class="col-12 text-top">
                             วันสุดท้ายที่ยับยั้ง
                           </div>
-                          <div class="col-12 text-detail">
+                          <div v-if="!isLoad" class="col-12 text-detail">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -701,12 +717,13 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                         <div class="col-xs-12 row items-start">
                           <div class="col-12 text-top">
                             ความคิดเห็นและเหตุผล
                           </div>
-                          <div class="col-12 text-detail">
+                          <div v-if="!isLoad" class="col-12 text-detail">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -715,6 +732,7 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                       </div>
                     </div>
@@ -751,6 +769,7 @@ onMounted(async () => {
                     <q-separator />
                     <div class="col-12 q-pa-sm">
                       <d-table
+                        v-if="!isLoad"
                         ref="table"
                         :columns="columnsCommanders"
                         :rows="rowsApprover?.cancelCommanders ?? []"
@@ -799,11 +818,11 @@ onMounted(async () => {
                           </q-tr>
                         </template>
                       </d-table>
+                      <SkeletonTable v-else :columns="columnsCommanders" />
                     </div>
                   </q-card>
                 </div>
 
-                <!-- ผลการพิจารณาของผู้มีอำนาจ -->
                 <div class="col-12 row" v-if="routeName != 'AddRetire'">
                   <q-card bordered class="row col-12 text-dark q-mt-sm">
                     <div
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index 5ef5e4b..d4dacae 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -15,16 +15,21 @@ import type {
   MainListResponse,
 } from "@/modules/03_retire/interface/Main";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const link = ref<string>("");
 const dataStore = useDataStore();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
+  mixin;
 const RestData = useRestDataStore();
 const { statusText } = RestData; //Func แปลง status to text
 
+const isLoad = ref<boolean>(false);
 const rows = ref<MainList[]>([]);
+const rowsData = ref<MainList[]>([]);
 const filter = ref<string>("");
 const pagination = ref({
   sortBy: "desc",
@@ -91,11 +96,12 @@ const columns = ref<QTableProps["columns"]>([
 
 /** ดึงข้อมูล */
 async function fectListleave() {
+  isLoad.value = true;
   await http
     .get(config.API.listUserByType(link.value))
     .then(async (res) => {
       let data = await res.data.result;
-      rows.value = data.map((e: MainListResponse) => ({
+      const list = data.map((e: MainListResponse) => ({
         id: e.id,
         placeLeave: e.location,
         dateStartLeave: date2Thai(e.sendDate),
@@ -103,9 +109,13 @@ async function fectListleave() {
         status: e.status,
         statustext: statusText(e.status),
       }));
+      rowsData.value = list;
+      rows.value = list;
+      isLoad.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
+      isLoad.value = false;
     })
     .finally(() => {});
 }
@@ -117,10 +127,13 @@ async function clickAdd() {
   router.push(`/retire/add`);
 }
 
-/** ทำก่อน mounted */
-onBeforeMount(() => {
-  showLoader();
-});
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@@ -128,7 +141,6 @@ onBeforeMount(() => {
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
   await fectListleave();
-  hideLoader();
 });
 </script>
 <template>
@@ -161,15 +173,10 @@ onMounted(async () => {
                 debounce="300"
                 placeholder="ค้นหา"
                 style="max-width: 200px"
+                @keydown.enter.prevent="onSearch"
               >
                 <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
+                  <q-icon name="search" />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
@@ -193,6 +200,7 @@ onMounted(async () => {
           </div>
           <div>
             <d-table
+              v-if="!isLoad"
               flat
               bordered
               dense
@@ -272,6 +280,7 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
+            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>
diff --git a/src/modules/07_appealComplain/views/Add.vue b/src/modules/07_appealComplain/views/Add.vue
index dba72b8..b486884 100644
--- a/src/modules/07_appealComplain/views/Add.vue
+++ b/src/modules/07_appealComplain/views/Add.vue
@@ -21,6 +21,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const storeData = useDataStore();
 
+const isLoad = ref<boolean>(false)
 const { findOrgName, success, messageError, showLoader, hideLoader } = mixin;
 
 const formProfile = reactive<FormProfile>({
@@ -34,15 +35,18 @@ const formProfile = reactive<FormProfile>({
 /** ดึงข้อมูลจาก keycloak*/
 async function getProFile() {
   try {
-    showLoader();
+    isLoad.value = true
     if (!storeData.dataprofilePosition) {
       const res = await http.get(config.API.profilePosition());
       await updateFormProfile(res.data.result);
+      isLoad.value = false
     } else {
       await updateFormProfile(storeData.dataprofilePosition);
+      isLoad.value = false
     }
   } catch (error) {
     messageError($q, error);
+    isLoad.value = false
   } finally {
     hideLoader();
   }
@@ -113,7 +117,7 @@ onMounted(() => {
         />
         เพิ่มอุทธรณ์/ร้องทุกข์
       </div>
-      <Form :on-submit="onSubmit" :form-profile="formProfile" />
+      <Form :on-submit="onSubmit" :form-profile="formProfile" v-model:isLoad="isLoad"/>
     </div>
   </div>
 </template>
diff --git a/src/modules/07_appealComplain/views/Edit.vue b/src/modules/07_appealComplain/views/Edit.vue
index 4cdcf58..9b80d58 100644
--- a/src/modules/07_appealComplain/views/Edit.vue
+++ b/src/modules/07_appealComplain/views/Edit.vue
@@ -22,6 +22,7 @@ const route = useRoute();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
 
+const isLoad = ref<boolean>(false);
 const id = ref<string>(route.params.id as string);
 const historyStatusOb = reactive<HistoryStatusType>({
   status: "",
@@ -53,7 +54,7 @@ const data = reactive<EditDataList>({
 
 /** ดึงข้อมูล */
 function getData() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.appealByID(id.value))
     .then((res) => {
@@ -73,13 +74,13 @@ function getData() {
       data.disciplineComplaint_Appeal_Docs =
         dataList.disciplineComplaint_Appeal_Docs;
       data.historyStatus = dataList.historyStatus;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoad.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /** ดึงข้อมูลหน้า แก้ไขอุทธรณ์/ร้องทุกข์
@@ -122,7 +123,7 @@ onMounted(() => {
         />
         แก้ไขอุทธรณ์/ร้องทุกข์
       </div>
-      <Form :data="data" :get-report="getReport" />
+      <Form :data="data" :get-report="getReport" v-model:is-load="isLoad"/>
     </div>
   </div>
 </template>
diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index 124d744..85ce7cd 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -17,6 +17,7 @@ const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 const dataStore = useAppealComplainStore();
 
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 const printForm = ref<string>("");
 const isReadOnly = ref<boolean>(false);
 const historyStatusOb = reactive<HistoryStatusType>({
@@ -237,6 +238,7 @@ watch(
               <div class="row q-col-gutter-sm">
                 <div class="col-xs-12 col-md-3">
                   <q-select
+                    v-if="!isLoad"
                     :class="inputEdit(isReadOnly)"
                     :readonly="isReadOnly"
                     ref="typeRef"
@@ -253,9 +255,11 @@ watch(
                     lazy-rules
                     hide-bottom-space
                   />
+                  <q-skeleton v-else type="QSelect" height="40px" />
                 </div>
                 <div class="col-xs-12 col-md-3">
                   <q-input
+                    v-if="!isLoad"
                     :class="inputEdit(isReadOnly)"
                     :readonly="isReadOnly"
                     ref="titleRef"
@@ -268,11 +272,13 @@ watch(
                     label="เรื่องอุทธรณ์/ร้องทุกข์"
                     hide-bottom-space
                   />
+                  <q-skeleton v-else type="QInput" height="40px" />
                 </div>
               </div>
               <div class="row">
                 <div class="col-12">
                   <q-input
+                    v-if="!isLoad"
                     :class="inputEdit(isReadOnly)"
                     :readonly="isReadOnly"
                     ref="descriptionRef"
@@ -287,11 +293,13 @@ watch(
                     rows="5"
                     hide-bottom-space
                   />
+                  <q-skeleton v-else type="QInput" height="120px" />
                 </div>
               </div>
               <div class="row" v-if="!isReadOnly">
                 <div class="col-12">
                   <q-file
+                    v-if="!isLoad"
                     ref="fileRef"
                     v-model="formData.files"
                     label="อัปโหลดเอกสารหลักฐาน"
@@ -301,6 +309,7 @@ watch(
                     hide-bottom-space
                     bg-color="white"
                   />
+                  <q-skeleton v-else type="QInput" height="40px" />
                 </div>
               </div>
               <q-card bordered class="col-12 row" v-if="isReadOnly">
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index a526a1d..64e231d 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -13,6 +13,8 @@ import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
 import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
 import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -25,6 +27,7 @@ const type = ref<DataOption[]>([
   ...dataStore.typeOptions,
 ]);
 
+const isload = ref<boolean>(false);
 const total = ref<number>(0);
 const totalList = ref<number>(1);
 const pagination = ref({
@@ -154,7 +157,7 @@ const columns = ref<QTableProps["columns"]>([
 
 //นำข้อมูลมาแสดง
 async function getData() {
-  showLoader();
+  isload.value = true;
   await http
     .get(
       config.API.appealMainList(
@@ -166,20 +169,20 @@ async function getData() {
         filterKeyword.value
       )
     )
-    .then((res) => {
+    .then(async (res) => {
       totalList.value = Math.ceil(
         res.data.result.total / pagination.value.rowsPerPage
       );
       total.value = res.data.result.total;
       let data = res.data.result.data;
-      dataStore.fetchAppealComplain(data);
+      await dataStore.fetchAppealComplain(data);
+      isload.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
+      isload.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -374,7 +377,9 @@ onMounted(async () => {
             />
 
             <div class="col-12">
+              <SkeletonTable v-if="isload" :columns="dataStore.columns" />
               <d-table
+                v-else
                 flat
                 bordered
                 dense

From 09cba46485d192f65f2786e604a852a797058364 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 7 Aug 2025 11:12:22 +0700
Subject: [PATCH 169/195] fix skeleton

---
 src/modules/05_leave/components/Calendar.vue  | 13 ++++++++++-
 .../05_leave/components/DialogDetail.vue      | 23 +++++++++++++------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
index e92bb73..572fded 100644
--- a/src/modules/05_leave/components/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -267,7 +267,18 @@ onMounted(async () => {
   <div class="row">
     <div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
       <q-card class="col-12" flat bordered>
-        <q-skeleton height="100%" square v-if="isLoading" />
+        <q-card-section v-if="isLoading">
+          <q-item>
+            <q-item-section avatar>
+              <q-skeleton type="QToggle" height="20px" width="25px" />
+            </q-item-section>
+
+            <q-item-section>
+              <q-skeleton type="text" class="text-subtitle1" />
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+
         <q-scroll-area style="height: 38vw" v-else>
           <div class="q-gutter-sm col-12">
             <q-list class="rounded-borders q-pt-sm" dense>
diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 8c04469..fb12eb2 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -441,11 +441,15 @@ watch(
       />
 
       <q-separator />
+      <q-card-section v-if="isLoading">
+        <div v-for="i in 5" :key="i">
+          <q-skeleton type="text" class="text-subtitle1" />
+          <q-skeleton type="text" class="text-subtitle1" />
+        </div>
+      </q-card-section>
 
-      <q-card-section class="scroll" style="max-height: 60vh">
-        <q-skeleton height="400px" square v-if="isLoading" />
-
-        <div class="row" v-else>
+      <q-card-section v-else class="scroll" style="max-height: 60vh">
+        <div class="row">
           <div
             flat
             :class="
@@ -584,9 +588,14 @@ watch(
       />
 
       <q-separator />
-      <q-card-section class="q-p-md row q-gutter-y-md">
-        <q-skeleton height="400px" width="100%" square v-if="isLoading" />
-        <div flat class="col-12" v-else>
+      <q-card-section v-if="isLoading">
+        <div v-for="i in 5" :key="i">
+          <q-skeleton type="text" class="text-subtitle1" />
+          <q-skeleton type="text" class="text-subtitle1" />
+        </div>
+      </q-card-section>
+      <q-card-section class="q-p-md row q-gutter-y-md" v-else>
+        <div flat class="col-12">
           <div class="col-12 q-col-gutter-sm row items-center"></div>
           <FormCancel :data="formDataCancle" />
         </div>

From 4c4d9737b7ffff5ec09a80f95c087d48a51f90de Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 7 Aug 2025 11:12:28 +0700
Subject: [PATCH 170/195] no message

---
 src/modules/05_leave/components/DialogDetail.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index fb12eb2..2c05ebd 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -442,8 +442,7 @@ watch(
 
       <q-separator />
       <q-card-section v-if="isLoading">
-        <div v-for="i in 5" :key="i">
-          <q-skeleton type="text" class="text-subtitle1" />
+        <div v-for="i in 10" :key="i">
           <q-skeleton type="text" class="text-subtitle1" />
         </div>
       </q-card-section>
@@ -589,8 +588,7 @@ watch(
 
       <q-separator />
       <q-card-section v-if="isLoading">
-        <div v-for="i in 5" :key="i">
-          <q-skeleton type="text" class="text-subtitle1" />
+        <div v-for="i in 10" :key="i">
           <q-skeleton type="text" class="text-subtitle1" />
         </div>
       </q-card-section>

From a6170c08911a6b8abd53f4a37e2a8845d6ea114d Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 8 Aug 2025 21:58:27 +0700
Subject: [PATCH 171/195] =?UTF-8?q?fix:=20load=20=E0=B8=97=E0=B8=94?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/01_SurveyPage.vue              |  16 +-
 .../components/02_ResultPage.vue              | 101 +++-
 .../components/03_AssignPage.vue              |  16 +-
 .../components/SkeletonTemplate.vue           | 544 ++++++++++++++++++
 src/modules/15_probationReport/views/main.vue |  12 +-
 5 files changed, 658 insertions(+), 31 deletions(-)
 create mode 100644 src/modules/15_probationReport/components/SkeletonTemplate.vue

diff --git a/src/modules/15_probationReport/components/01_SurveyPage.vue b/src/modules/15_probationReport/components/01_SurveyPage.vue
index ffb598d..11c0c54 100644
--- a/src/modules/15_probationReport/components/01_SurveyPage.vue
+++ b/src/modules/15_probationReport/components/01_SurveyPage.vue
@@ -34,6 +34,7 @@ const props = defineProps({
   getSurveyData: Function,
 });
 const isData = defineModel<boolean>("isData", { required: true });
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 const dataSurvey = defineModel<any>("dataSurvey", { required: true });
 
 const status = ref<boolean>(true);
@@ -53,7 +54,7 @@ async function save() {
       answer3: answer3.value,
     };
     dialogConfirm($q, async () => {
-      showLoader();
+      isLoad.value = true;
       await http
         .post(config.API.summarySurveyDetail(store.assignId), data)
         .then(async () => {
@@ -115,6 +116,7 @@ onMounted(() => {
         </div>
         <div class="col-12">
           <q-input
+            v-if="!isLoad"
             :readonly="!status"
             label="ความคิดเห็น"
             class="bg-white"
@@ -125,6 +127,7 @@ onMounted(() => {
             type="textarea"
             :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
           />
+          <q-skeleton v-else type="QInput" height="120px" />
         </div>
       </div>
 
@@ -135,6 +138,7 @@ onMounted(() => {
         </div>
         <div class="col-12">
           <q-input
+            v-if="!isLoad"
             :readonly="!status"
             label="ความคิดเห็น"
             class="bg-white"
@@ -145,6 +149,7 @@ onMounted(() => {
             type="textarea"
             :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
           />
+          <q-skeleton v-else type="QInput" height="120px" />
         </div>
       </div>
 
@@ -154,7 +159,7 @@ onMounted(() => {
           ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
         </div>
         <q-space />
-        <q-btn-group outline>
+        <q-btn-group outline v-if="!isLoad">
           <q-btn
             v-for="(item, index) in 5"
             :disable="!status"
@@ -171,6 +176,7 @@ onMounted(() => {
             </q-tooltip>
           </q-btn>
         </q-btn-group>
+        <q-skeleton v-else type="QInput" height="40px" width="200px" />
       </div>
       <div class="col-12 q-mt-md">
         <q-separator size="3px" color="grey-2" />
@@ -218,10 +224,10 @@ onMounted(() => {
         </div>
       </div>
     </q-card-section>
-    <q-separator v-if="status" />
+    <q-separator v-if="status && !isLoad" />
 
-    <q-card-actions align="right" v-if="status">
-      <q-btn label="บันทึก" color="secondary" type="submit"
+    <q-card-actions align="right" v-if="status && !isLoad">
+      <q-btn label="บันทึก" color="secondary" type="submit" :loading="isLoad"
         ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
       >
     </q-card-actions>
diff --git a/src/modules/15_probationReport/components/02_ResultPage.vue b/src/modules/15_probationReport/components/02_ResultPage.vue
index 7fadf29..5356b2c 100644
--- a/src/modules/15_probationReport/components/02_ResultPage.vue
+++ b/src/modules/15_probationReport/components/02_ResultPage.vue
@@ -35,6 +35,7 @@ const dev_options = defineModel<any>("dev_options", { required: true });
 const result_option = defineModel<any>("result_option", { required: true });
 const status = ref<boolean>(false);
 
+const isLoad = ref<boolean>(false);
 const formData = ref<ProbationReportType>({
   develop_orientation_score: 0,
   develop_self_learning_score: 0,
@@ -89,7 +90,7 @@ async function clickdownloadFile() {
 }
 
 async function getData() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(
       config.API.summaryReportDetail(store.assignId) +
@@ -133,14 +134,13 @@ async function getData() {
       formData.value.reason = data.reason;
       formData.value.pass_result = data.pass_result;
       formData.value.evaluate_date = data.evaluate_date;
-      hideLoader();
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoad.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 onMounted(async () => {
@@ -191,13 +191,26 @@ onMounted(async () => {
 
               <q-item-label caption style="color: #464444">
                 <div class="row text-weight-bold">
-                  <div class="col">{{ formData.achievement_score }}</div>
-                  <div class="col">{{ formData.achievement_percent }}</div>
+                  <div class="col" v-if="!isLoad">
+                    {{ formData.achievement_score }}
+                  </div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
+                  <div class="col" v-if="!isLoad">
+                    {{ formData.achievement_percent }}
+                  </div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
                 </div>
               </q-item-label>
             </q-item-section>
 
-            <q-item-section side v-if="formData.achievement_result == 1">
+            <q-item-section side v-if="isLoad">
+              <q-skeleton width="120px" />
+            </q-item-section>
+
+            <q-item-section
+              side
+              v-else-if="!isLoad && formData.achievement_result == 1"
+            >
               ผ่าน (สูงกว่าร้อยละ 60)
             </q-item-section>
             <q-item-section side v-else>
@@ -224,13 +237,24 @@ onMounted(async () => {
               </q-item-label>
               <q-item-label caption style="color: #464444">
                 <div class="row text-weight-bold">
-                  <div class="col">{{ formData.behavior_score }}</div>
-                  <div class="col">{{ formData.behavior_percent }}</div>
+                  <div class="col" v-if="!isLoad">
+                    {{ formData.behavior_score }}
+                  </div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
+                  <div class="col" v-if="!isLoad">
+                    {{ formData.behavior_percent }}
+                  </div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
                 </div>
               </q-item-label>
             </q-item-section>
-
-            <q-item-section side v-if="formData.behavior_result == 1">
+            <q-item-section side v-if="isLoad">
+              <q-skeleton width="120px" />
+            </q-item-section>
+            <q-item-section
+              side
+              v-else-if="!isLoad && formData.behavior_result == 1"
+            >
               ผ่าน (สูงกว่าร้อยละ 60)
             </q-item-section>
             <q-item-section side v-else>
@@ -257,13 +281,22 @@ onMounted(async () => {
               </q-item-label>
               <q-item-label caption style="color: #464444">
                 <div class="row text-weight-bold">
-                  <div class="col">{{ formData.sum_score }}</div>
-                  <div class="col">{{ formData.sum_percent }}</div>
+                  <div class="col" v-if="!isLoad">{{ formData.sum_score }}</div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
+                  <div class="col" v-if="!isLoad">
+                    {{ formData.sum_percent }}
+                  </div>
+                  <div class="col" v-else><q-skeleton width="40px" /></div>
                 </div>
               </q-item-label>
             </q-item-section>
-
-            <q-item-section side v-if="Number(formData.sum_percent) >= 60">
+            <q-item-section side v-if="isLoad">
+              <q-skeleton width="120px" />
+            </q-item-section>
+            <q-item-section
+              side
+              v-else-if="!isLoad && Number(formData.sum_percent) >= 60"
+            >
               ผ่าน (สูงกว่าร้อยละ 60)
             </q-item-section>
             <q-item-section side v-else>
@@ -296,22 +329,26 @@ onMounted(async () => {
             <div class="col-8">1. การปฐมนิเทศ</div>
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_orientation_score"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
 
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_orientation_percent"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
 
@@ -320,22 +357,26 @@ onMounted(async () => {
             <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 dense
                 outlined
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_self_learning_score"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
 
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_self_learning_percent"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
 
@@ -344,22 +385,26 @@ onMounted(async () => {
             <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_training_seminar_score"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
 
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_training_seminar_percent"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -367,22 +412,26 @@ onMounted(async () => {
             <div class="col-8">4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</div>
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_other_training_score"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
 
             <div class="col">
               <q-input
+                v-if="!isLoad"
                 outlined
                 dense
                 type="number"
                 :readonly="!status"
                 v-model="formData.develop_other_training_percent"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
 
@@ -394,10 +443,18 @@ onMounted(async () => {
                   >คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</q-item-label
                 >
               </div>
-              <div class="col q-pl-md">{{ formData.develop_total_score }}</div>
-              <div class="col q-pl-md">
+              <div class="col q-pl-md" v-if="!isLoad">
+                {{ formData.develop_total_score }}
+              </div>
+              <div class="col" v-else>
+                <q-skeleton width="100px" />
+              </div>
+              <div class="col q-pl-md" v-if="!isLoad">
                 {{ formData.develop_total_percent }}
               </div>
+              <div class="col" v-else>
+                <q-skeleton width="100px" />
+              </div>
             </div>
           </div>
         </q-card>
@@ -410,6 +467,7 @@ onMounted(async () => {
         </div>
         <div class="col-12">
           <q-select
+            v-if="!isLoad"
             class="col-12"
             dense
             v-model="formData.develop_result"
@@ -421,6 +479,7 @@ onMounted(async () => {
             emit-value
             :readonly="!status"
           />
+          <q-skeleton v-else type="QInput" height="40px" />
         </div>
       </div>
 
@@ -429,6 +488,7 @@ onMounted(async () => {
           เหตุผลอื่น ๆ ในการพิจารณา
         </div>
         <q-input
+          v-if="!isLoad"
           type="textarea"
           outlined
           dense
@@ -440,6 +500,7 @@ onMounted(async () => {
           :row="3"
           :readonly="!status"
         />
+        <q-skeleton v-else type="QInput" height="40px" />
       </div>
 
       <div class="col-xs-12 col-sm-11">
@@ -450,6 +511,7 @@ onMounted(async () => {
             </div>
             <div class="col-12">
               <q-select
+                v-if="!isLoad"
                 class="col-12"
                 dense
                 v-model="formData.pass_result"
@@ -461,6 +523,7 @@ onMounted(async () => {
                 emit-value
                 :readonly="!status"
               />
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
           <div class="col-xs-12 col-sm-6">
@@ -469,6 +532,7 @@ onMounted(async () => {
             </div>
             <div class="col-12">
               <datepicker
+                v-if="!isLoad"
                 v-model="formData.evaluate_date"
                 :locale="'th'"
                 autoApply
@@ -507,6 +571,7 @@ onMounted(async () => {
                   </q-input>
                 </template>
               </datepicker>
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
           </div>
         </div>
diff --git a/src/modules/15_probationReport/components/03_AssignPage.vue b/src/modules/15_probationReport/components/03_AssignPage.vue
index 4be7990..e762abc 100644
--- a/src/modules/15_probationReport/components/03_AssignPage.vue
+++ b/src/modules/15_probationReport/components/03_AssignPage.vue
@@ -16,6 +16,7 @@ import type {
 } from "@/modules/15_probationReport/interface/Main";
 
 import genReport from "@/plugins/genreport";
+import SkeletonTemplate from "@/modules/15_probationReport/components/SkeletonTemplate.vue";
 
 const dataProbation = defineModel<FileType[]>("dataProbation", {
   required: true,
@@ -1069,8 +1070,12 @@ function updateAppointMent() {
   }
 }
 
+const isLoad = ref<boolean>(false);
+
 /** เมื่อโหลดหน้า เรียกใช้งานฟังชั่น */
 onMounted(async () => {
+  isLoad.value = true;
+
   const promises = [
     getAssignNew(dataStore.formData.profileId),
     getLaw(dataStore.formData.profileId),
@@ -1084,14 +1089,15 @@ onMounted(async () => {
   if (probationStore.assignId !== undefined) {
     promises.push(getAssign());
   }
-  showLoader();
   await Promise.all(promises)
-    .then(() => {})
+    .then(() => {
+      isLoad.value = false;
+    })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 });
 </script>
@@ -1117,8 +1123,7 @@ onMounted(async () => {
           </q-btn>
         </div>
       </div>
-
-      <div class="col-12 text-dark">
+      <div v-if="!isLoad" class="col-12 text-dark">
         <div class="row col-12">
           <div class="row col-12 q-gutter-lg">
             <div class="col-12">
@@ -2803,6 +2808,7 @@ onMounted(async () => {
           </div>
         </div>
       </div>
+      <SkeletonTemplate v-else />
     </div>
   </q-form>
 </template>
diff --git a/src/modules/15_probationReport/components/SkeletonTemplate.vue b/src/modules/15_probationReport/components/SkeletonTemplate.vue
new file mode 100644
index 0000000..b641063
--- /dev/null
+++ b/src/modules/15_probationReport/components/SkeletonTemplate.vue
@@ -0,0 +1,544 @@
+<template>
+  <div class="col-12 text-dark">
+    <div class="row col-12">
+      <div class="row col-12 q-gutter-lg">
+        <div class="col-12">
+          <div class="row q-col-gutter-sm q-mb-sm">
+            <div class="col-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+
+          <div class="col-12 text-top0 items-center">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+            ผู้ทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                ระยะเวลาการทดลองปฏิบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-xs-12 col-sm-4">
+                  <q-skeleton type="QIput" height="40px" />
+                </div>
+                <div class="col-xs-12 col-sm-4">
+                  <q-skeleton type="QIput" height="40px" />
+                </div>
+                <div class="col-xs-12 col-sm-4">
+                  <q-skeleton type="QIput" height="40px" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top0 items-center">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+            ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ (อาจมีได้มากกว่า 1 คน)
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <!-- 3.1 -->
+        <div class="col-12 row">
+          <div class="col-12 text-top0 items-center">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+            ผลการปฏิบัติงาน
+          </div>
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.1 ชื่องาน/ภารกิจงานที่มอบหมาย (ควรมีมากกว่า 1 ภารกิจงาน)
+          </div>
+          <div class="col-12 row q-gutter-sm">
+            <q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
+              <div class="col-12 row q-col-gutter-sm">
+                <div class="col-xs-12 col-sm-6">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+                <div class="col-xs-12 col-sm-5">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+              </div>
+            </q-card>
+            <q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
+              <div class="col-12 row q-col-gutter-sm">
+                <div class="col-xs-12 col-sm-6">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+                <div class="col-xs-12 col-sm-5">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <!-- 3.2 -->
+        <div class="col-12 row">
+          <div class="col-12 text-top2">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.2 ความรู้ความสามารถและทักษะ (ตามที่ก.ก.กําหนด)
+          </div>
+          <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+            <div class="row col-12 q-gutter-lg">
+              <div class="col-12 row">
+                <div class="col-12 text-top2 row items-center">
+                  ความรู้ความสามารถในการปฏิบัติงาน
+                </div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-11 q-my-xs">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-11 q-my-xs">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-11 q-my-xs">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top2 row items-center">
+                  ความรู้เรื่องกฎหมายและกฎระเบียบ (ไม่เกิน 20 หัวข้อ)
+                </div>
+                <q-card
+                  flat
+                  bordered
+                  class="col-12 q-pa-md q-mt-sm"
+                  style="max-height: 500px; overflow-y: scroll"
+                >
+                  <q-skeleton height="400px" />
+                </q-card>
+              </div>
+
+              <div class="col-12 row">
+                <div class="col-12 text-top2">
+                  กฎหมายอื่น ๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+                </div>
+                <div class="col-12 row q-col-gutter-md">
+                  <div class="col-12">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-12 row">
+                <div class="col-12 text-top2">ทักษะ</div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+
+        <div class="col-12 row">
+          <div class="col-12 text-top2">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.3 สมรรถนะ (ตามที่ ก.ก. กําหนด)
+          </div>
+          <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+            <div class="row col-12 q-gutter-lg">
+              <div class="col-12 row">
+                <div class="col-12 text-top2">สมรรถนะหลัก</div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-12 row">
+                <div class="col-12 text-top2">สมรรถนะประจํากลุ่มงาน</div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-6">
+                    <q-skeleton type="QIput" height="40px" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.4 พฤติกรรมที่จําเป็นสําหรับการปฏิบัติงาน<span
+              class="text-weight-regular q-pl-sm"
+            >
+              ( ได้แก่ ความประพฤติ ความมีคุณธรรมจริยธรรม การรักษาวินัย )</span
+            >
+          </div>
+          <q-card bordered flat class="col-12 row q-pa-md bg-grey-1">
+            <div class="row col-12 q-gutter-lg">
+              <div class="col-12 row">
+                <div class="col-12 text-top2">ความประพฤติ ได้แก่</div>
+                <div class="col-12 row q-col-gutter-md">
+                  <div class="col-12 column q-ml-md">
+                    <li>ให้บริการประชาชน หรือผู้รับบริการด้วยอธัยาศัยดี</li>
+                    <li>มีความรับผิดชอบในการปฏิบัติงาน</li>
+                    <li>
+                      ให้บริการประชาชน หรือผู้รับบริการด้วยความรวดเร็ว
+                      เอาใจใส่เป็นมาตรฐานเดียวกัน
+                    </li>
+                    <li>
+                      ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร
+                    </li>
+                  </div>
+                </div>
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top2">ความมีคุณธรรมจริยธรรม ได้แก่</div>
+                <div class="col-12 row q-col-gutter-md">
+                  <div class="col-12 column q-ml-md">
+                    <li>
+                      อุทิศตน
+                      และเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ
+                    </li>
+                    <li>มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต</li>
+                    <li>
+                      ยึดมั่นในสถาบันพระมหากษัตริย์ และไม่กระทำการใดๆ
+                      อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ ศาสนา
+                      และพระมหากษัตริย์
+                    </li>
+                  </div>
+                </div>
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
+                <div class="col-12 row q-col-gutter-md">
+                  <div class="col-12 column q-ml-md">
+                    <li>มีความรับผิดชอบในการรักษาเวลาทำงาน</li>
+                    <li>
+                      แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ
+                    </li>
+                    <li>
+                      ไม่กระทำการใดๆ อันเป็นการเสื่อมเกียรติ
+                      และศักดิ์ศรีของความเป็นข้าราชการ
+                    </li>
+                    <li>
+                      ไม่กระทำการใดๆ
+                      อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน
+                    </li>
+                    <li>
+                      ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+
+        <div class="col-12 row">
+          <div class="col-12 text-top2">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.5 อื่น ๆ (ถ้ามี)
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-12">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            3.6 ผลผลิตของงานที่คาดหวังและตัวชี้วัดความสําเร็จของงาน
+          </div>
+          <div class="col-12 row q-gutter-md">
+            <q-card flat bordered class="col-12 q-pa-sm bg-grey-1">
+              <div class="col-12 row q-col-gutter-sm">
+                <div class="col-xs-12 col-sm-6">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+
+                <div class="col-xs-12 col-sm-5">
+                  <q-skeleton type="QIput" height="90px" />
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top0 items-center">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
+            การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top2">
+              ผู้ทดลองปฏิบัติหน้าที่ราชการต้องเข้าร่วมในการปฐมนิเทศ
+              และอบรมหลักสูตรต่าง ๆ ภายในระยะเวลาทดลองปฏิบัติหน้าที่ราชการ
+              ดังนี้
+            </div>
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              4.1 การปฐมนิเทศเพื่อให้มีความรู้เกี่ยวกับหน่วยงาน/ส่วนราชการ
+            </div>
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              4.2
+              การเรียนรู้ด้วยตนเองเพื่อให้มีความรู้เกี่ยวกับกฎหมายกฎระเบียบแบบแผนของทางราชการ
+            </div>
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              4.3
+              การอบรมสัมมนาร่วมกันเพื่อปลูกฝังการประพฤติปฏิบัติตนเป็นข้าราชการที่ดี
+            </div>
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              4.4 การอบรมอื่น ๆ ที่หน่วยงานกำหนด (ถ้ามี)
+            </div>
+          </div>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top0 items-center">
+            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">5</q-avatar>
+            การประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            5.1
+            ประเมินผลการทดลองปฏิบัติหน้าที่ราชการโดยคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            5.2 รายละเอียดการประเมินประกอบด้วย 2 ส่วนคือ
+          </div>
+          <div class="col-12 row q-gutter-md">
+            <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+              <div class="col-12 text-top2">การรักษาวินัย ได้แก่</div>
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-12 column q-ml-md">
+                  <li>ความรู้ความสามารถที่ ก.ก. กำหนด</li>
+                  <li>ทักษะที่ ก.ก. กำหนด</li>
+                  <li>สมรรถนะตามที่ ก.ก. กำหนด</li>
+                  <li>ความสามารถในการเรียนรู้งานในตำแหน่ง</li>
+                  <li>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</li>
+                  <li>ความสำเร็จของงานที่ได้รับมอบหมาย</li>
+                  <li>
+                    อื่น ๆ (ถ้ามี)
+                    <q-skeleton type="QIput" height="40px" />
+                  </li>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            5.3
+            ข้อมูลที่ใช้ประกอบการประเมินผลการทดลองปฏิบัติหน้าที่ราชการประกอบด้วย
+          </div>
+          <div class="col-12 row q-gutter-md">
+            <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-12 column q-ml-md">
+                  <li>
+                    บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
+                    และผู้บังคับบัญา
+                  </li>
+                  <li>
+                    แบบประเมินผลการทดลองปฏิบัติหน้าที่ราชการของผู้บังคับบัญชา
+                  </li>
+                  <li>รายงานผลการพัฒนาตามที่สำนักงาน ก.ก. กำหนด</li>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            5.3 สัดส่วนของคะแนน และมาตรฐานการประเมิน
+          </div>
+          <div class="col-12 row q-gutter-md">
+            <q-card flat bordered class="col-12 q-pa-md bg-grey-1">
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-12 column q-ml-md">
+                  <li>สัดส่วนของคะแนนการทดลองปฏิบัติหน้าที่ราชการ</li>
+                  <div class="q-pl-lg">
+                    ส่วนที่ 1
+                    คะแนนผลสัมฤทธิ์ของการทดลองปฏิบัติหน้าที่ราชการร้อยละ 50
+                  </div>
+                  <div class="q-pl-lg">
+                    ส่วนที่ 2 คะแนนพฤติกรรมของผู้ทดลองปฏิบัติหน้าที่ราชการร้อยละ
+                    50
+                  </div>
+                  <div class="q-pl-lg">
+                    มาตรฐานการประเมินแต่ละส่วนต้องได้คะแนนไม่ต่ำกว่าร้อยละ 60
+                  </div>
+                  <li>
+                    สัดส่วนคะแนนการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+                  </li>
+                  <div class="q-pl-lg">
+                    คะแนนรวมของการพัฒนาจะต้องไม่น้อยกว่าร้อยละ 60
+                  </div>
+                  <div>
+                    <span style="text-decoration: underline">หมายเหตุ</span>
+                    ให้นำคะแนนรวมทั้ง 2
+                    ส่วนมารวมกันแล้วต้องได้คะแนนไม่น้อยกว่าร้อยละ 60
+                    จึงถือว่าผ่านการประเมินการทดลองปฏิบัติหน้าที่ราชการ
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top0 items-center">
+            การลงชื่อเพื่อมอบหมายงานและรับมอบหมายงานในการทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+          <div class="col-12 row">
+            <div class="col-12 text-top2 row items-center">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              ผู้ทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            ผู้ดูแลการทดลองปฏิบัติหน้าที่ราชการ
+          </div>
+
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-8">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-xs-12 col-sm-8">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            ผู้บังคับบัญชาผู้มอบหมายงาน
+          </div>
+
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-8">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 row" style="display: none">
+          <div class="col-12 text-top2 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            ประธานกรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-8">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-skeleton type="QIput" height="40px" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/15_probationReport/views/main.vue b/src/modules/15_probationReport/views/main.vue
index 88d5114..6df03ac 100644
--- a/src/modules/15_probationReport/views/main.vue
+++ b/src/modules/15_probationReport/views/main.vue
@@ -22,6 +22,7 @@ const { showLoader, hideLoader, messageError } = mixin;
 
 const dataSurvey = ref<any>(null);
 const isData = ref<boolean>(true);
+const isLoad = ref<boolean>(false);
 const dataProbation = ref<FileType[]>([]);
 const dataResult1 = ref<FileType[]>([]);
 const dataResult2 = ref<FileType[]>([]);
@@ -44,11 +45,15 @@ const result_option = reactive([
 /** ดึง ข้อมูลแบบสำรวจ */
 async function getSurveyData() {
   isData.value = true;
-  showLoader();
+
   await http
     .get(config.API.summaryDetail())
     .then(async (res: any) => {
       const data = await res.data.result.data;
+      if (data) {
+        isLoad.value = true;
+      }
+
       isData.value = true;
       store.assignId = res.data.result.assignId;
       if (res.data.result.assignId) {
@@ -75,13 +80,13 @@ async function getSurveyData() {
       }
       if (data !== null) {
         dataSurvey.value = data;
+        isLoad.value = false;
       }
-      hideLoader();
     })
     .catch((e) => {
       // messageError($q, e);
       isData.value = false;
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -167,6 +172,7 @@ onMounted(async () => {
               <SurveyPage
                 v-model:is-data="isData"
                 v-model:data-survey="dataSurvey"
+                v-model:is-load="isLoad"
                 :get-survey-data="getSurveyData"
               />
             </q-tab-panel>

From 474828c5ee5c52be0dfb78f13ca690302fb1aea6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 14 Aug 2025 11:47:03 +0700
Subject: [PATCH 172/195] fix leave  Skeleton Load

---
 .../components/FormLeave/01_SickForm.vue      | 19 +++--
 .../components/FormLeave/03_Birth.vue         | 46 ++++------
 .../FormLeave/04_HelpWifeBirthForm.vue        | 46 ++++------
 .../components/FormLeave/05_VacationForm.vue  | 35 +++-----
 .../FormLeave/06_OrdinationForm.vue           | 31 ++++---
 .../components/FormLeave/07_HajjForm.vue      | 28 +++---
 .../components/FormLeave/08_MilitaryForm.vue  | 51 ++++-------
 .../components/FormLeave/09_StudyForm.vue     | 37 +++-----
 .../components/FormLeave/10_TrainForm.vue     | 38 +++------
 .../FormLeave/11_WorkInternationalForm.vue    | 44 +++++-----
 .../FormLeave/12_FollowSpouseForm.vue         | 33 +++----
 .../FormLeave/13_RehabilitationForm.vue       | 25 +++---
 .../05_leave/components/FormLeave/Form.vue    | 16 +++-
 src/modules/05_leave/store.ts                 |  8 +-
 src/modules/05_leave/views/AddPage.vue        | 85 ++++++++++++++++++-
 15 files changed, 282 insertions(+), 260 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 42ebfc1..5f3759a 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -15,8 +15,7 @@ const typeForm = defineModel<string>("type", { required: true });
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, messageError, convertDateToAPI } = mixin;
 const edit = ref<boolean>(true);
 const leaveDocumentRef = ref<any>(null);
 
@@ -66,6 +65,8 @@ const leaveNumberRef = ref<object | null>(null);
 const leaveAddressRef = ref<object | null>(null);
 const leaveDetailRef = ref<object | null>(null);
 
+const isLoadLeaveDate = ref<boolean>(false);
+
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
   leaveWrote: leaveWroteRef,
@@ -149,7 +150,7 @@ const checkDate = computed(() => {
 // const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
   if (formDataSick.leaveStartDate && formDataSick.leaveEndDate) {
-    showLoader();
+    isLoadLeaveDate.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -177,11 +178,10 @@ async function fetchCheck() {
       .catch((e: any) => {
         messageError($q, e);
         // totalCheck.value = null;
-        hideLoader();
       })
       .finally(() => {
-        hideLoader();
         leaveDocumentRef.value.resetValidation();
+        isLoadLeaveDate.value = false;
       });
   }
 }
@@ -425,6 +425,7 @@ onMounted(() => {
                 v-model="formDataSick.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadLeaveDate"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -626,8 +627,10 @@ onMounted(() => {
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadLeaveDate"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
@@ -637,8 +640,10 @@ onMounted(() => {
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadLeaveDate"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </q-card-actions>
   </q-form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index ce3533b..5b11938 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -13,14 +13,7 @@ import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, convertDateToAPI } = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -45,6 +38,8 @@ const props = defineProps({
   },
 });
 
+const isLoadCheck = ref<boolean>(false);
+
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataBirth = reactive<any>({
   type: dataStore.typeId,
@@ -145,14 +140,10 @@ const checkDate = computed(() => {
   }
 });
 
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-// const totalCheck = ref<number | null>(null);
+/**  ตรวจสอบวันลา */
 async function fetchCheck() {
   if (formDataBirth.leaveStartDate && formDataBirth.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     const checkDate = computed(() => {
       if (
         convertDateToAPI(formDataBirth.leaveEndDate) ==
@@ -163,9 +154,7 @@ async function fetchCheck() {
         return false;
       }
     });
-    // console.log("checkDate.value", checkDate.value);
-    // console.log("formDataBirth.leaveRangeEnd", formDataBirth.leaveRangeEnd);
-    // console.log("formDataBirth.leaveRange", formDataBirth.leaveRange);
+
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -176,11 +165,9 @@ async function fetchCheck() {
           ? formDataBirth.leaveRange
           : formDataBirth.leaveRangeEnd,
       })
-      .then((res: any) => {
-        hideLoader();
+      .then((res) => {
         const data = res.data.result;
         formDataBirth.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         reasonLeave.value =
           data.message != ""
             ? data.message
@@ -189,10 +176,11 @@ async function fetchCheck() {
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataBirth.leaveTotal > 0 ? data.isLeave : false;
       })
-      .catch((e: any) => {
-        hideLoader();
-        // totalCheck.value = null;
+      .catch((e) => {
         messageError($q, e);
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -433,6 +421,7 @@ onMounted(() => {
                 v-model="formDataBirth.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -596,30 +585,31 @@ onMounted(() => {
 
     <div class="row col-12 q-pt-md">
       <q-space />
-      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index e3e29fe..9f8739c 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,17 +13,8 @@ import type { FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, convertDateToAPI } = mixin;
 
-const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 
@@ -161,14 +151,12 @@ const checkDate = computed(() => {
   }
 });
 
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
+
+/** fetchCheck ว่าลาได้ไหม จาก api */
 async function fetchCheck() {
   if (formDataHelpWife.leaveStartDate && formDataHelpWife.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -184,8 +172,6 @@ async function fetchCheck() {
         const data = res.data.result;
         formDataHelpWife.leaveTotal =
           data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        // totalCheck.value =
-        //   data.totalDate - data.sumDateWork - data.sumDateHoliday;
         reasonLeave.value =
           data.message != ""
             ? data.message
@@ -193,23 +179,21 @@ async function fetchCheck() {
             ? "จำนวนวันลาเกินที่กำหนด"
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataHelpWife.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
-        // totalCheck.value = null;
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-
 watch(
   () => props.data,
   async () => {
     if (props.data) {
-      // totalCheck.value = null;
       formDataHelpWife.leaveWrote = props.data.leaveWrote;
       formDataHelpWife.wifeDayName = props.data.wifeDayName;
       formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@@ -229,7 +213,6 @@ watch(
 /**Hook */
 onMounted(async () => {
   if (props.data) {
-    // totalCheck.value = null;
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
     formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@@ -438,6 +421,7 @@ onMounted(async () => {
                 v-model="formDataHelpWife.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -656,24 +640,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 8603957..87b440d 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -14,14 +14,7 @@ import type { DataOption } from "@/modules/14_IDP/interface/Main";
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, convertDateToAPI } = mixin;
 
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
@@ -164,10 +157,11 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
+
 async function fetchCheck() {
   if (formDataVacation.leaveStartDate && formDataVacation.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -183,8 +177,6 @@ async function fetchCheck() {
         const data = res.data.result;
         formDataVacation.leaveTotal =
           data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        // totalCheck.value =
-        //   data.totalDate - data.sumDateWork - data.sumDateHoliday;
 
         reasonLeave.value =
           data.message != ""
@@ -193,12 +185,12 @@ async function fetchCheck() {
             ? "จำนวนวันลาเกินที่กำหนด"
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataVacation.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -207,7 +199,6 @@ watch(
   () => props.data,
   () => {
     if (props.data) {
-      // totalCheck.value = null;
       formDataVacation.leaveWrote = props.data.leaveWrote;
       formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
       formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
@@ -456,6 +447,7 @@ onMounted(() => {
             v-model="formDataVacation.leaveTotal"
             label="จำนวนวันที่ลา (วัน)"
             readonly
+            :loading="isLoadCheck"
           >
             <template v-slot:hint>
               <span style="color: red">
@@ -630,30 +622,31 @@ onMounted(() => {
     <q-separator class="q-mt-sm" />
     <div class="row col-12 q-pt-md items-center">
       <q-space />
-      <!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
       <q-btn
         v-if="!props.data || props.data.status == 'DRAFT'"
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         :disable="!isLeave"
         class="q-px-md items-center btnBlue"
         label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 64eeb67..64f6500 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -13,8 +13,7 @@ import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbs
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, messageError, convertDateToAPI } = mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 /** รับ props มาจากหน้าหลัก */
@@ -179,14 +178,12 @@ const checkDate = computed(() => {
   }
 });
 
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-//  const totalCheck = ref<number|null>(null)
+const isLoadCheck = ref<boolean>(false);
+
+/** check ว่าลาได้ไหม จาก api*/
 async function fetchCheck() {
   if (formDataOrdination.leaveStartDate && formDataOrdination.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -201,7 +198,6 @@ async function fetchCheck() {
       .then((res: any) => {
         const data = res.data.result;
         formDataOrdination.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         reasonLeave.value =
           data.message != ""
             ? data.message
@@ -210,12 +206,12 @@ async function fetchCheck() {
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value =
           formDataOrdination.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -488,6 +484,7 @@ onMounted(async () => {
                 v-model="formDataOrdination.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -843,24 +840,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index b19441c..475c8a9 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -17,10 +17,8 @@ const {
   date2Thai,
   calculateDurationYmd,
   messageError,
-  dateToISO,
+
   convertDateToAPI,
-  showLoader,
-  hideLoader,
 } = mixin;
 
 const edit = ref<boolean>(true);
@@ -79,7 +77,6 @@ const formRef: HajiForm = {
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
@@ -145,10 +142,10 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (formDataHaji.leaveStartDate && formDataHaji.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -161,9 +158,7 @@ async function fetchCheck() {
       })
       .then((res: any) => {
         const data = res.data.result;
-        // isLeave.value = data.isLeave;
         formDataHaji.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataHaji.leaveStartDate),
           convertDateToAPI(formDataHaji.leaveEndDate)
@@ -175,12 +170,12 @@ async function fetchCheck() {
             ? "จำนวนวันลาเกินที่กำหนด"
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataHaji.leaveTotal > 0 ? data.isLeave : false;
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -415,6 +410,7 @@ onMounted(async () => {
                 v-model="formDataHaji.leaveTotal"
                 label="จำนวนวันที่ลา (วัน)"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -589,24 +585,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index 9f1d176..aa3b740 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -13,15 +13,8 @@ import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsen
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, calculateDurationYmd, messageError, convertDateToAPI } =
+  mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<string>("");
 const leaveText = ref<string>("");
@@ -163,14 +156,12 @@ const checkDate = computed(() => {
   }
 });
 
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-//  const totalCheck = ref<number|null>(null)
+const isLoadCheck = ref<boolean>(false);
+
+/** check ว่าลาได้ไหม จาก api*/
 async function fetchCheck() {
   if (formDataMilitary.leaveStartDate && formDataMilitary.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -186,35 +177,22 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataMilitary.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataMilitary.leaveStartDate),
           convertDateToAPI(formDataMilitary.leaveEndDate)
         );
         reasonLeave.value =
           data.message != "" ? data.message : "จำนวนวันลาเกินที่กำหนด";
-
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
-// /**
-//  * function อัพเดทค่า LeaveTotal
-//  */
-// function updateLeaveTotal() {
-//   const newLeaveTotal = calculateDurationYmd(
-//     formDataMilitary.leaveStartDate,
-//     formDataMilitary.leaveEndDate
-//   );
-//   formDataMilitary.leaveTotal = newLeaveTotal;
-// }
-
 watch(
   () => props.data,
   async () => {
@@ -463,6 +441,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="จำนวนวันที่ลา"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -675,24 +654,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index df99247..4252799 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -16,12 +16,9 @@ const mixin = useCounterMixin();
 const {
   date2Thai,
   calculateDurationYmd,
-  dateToISO,
   messageError,
   arabicNumberToText,
   convertDateToAPI,
-  showLoader,
-  hideLoader,
 } = mixin;
 
 const leaveText = ref<string>("");
@@ -182,10 +179,10 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (formDataStudy.leaveStartDate && formDataStudy.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -200,7 +197,7 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataStudy.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
+
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataStudy.leaveStartDate),
           convertDateToAPI(formDataStudy.leaveEndDate)
@@ -208,27 +205,16 @@ async function fetchCheck() {
         reasonLeave.value = data.message
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null;
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
-// /**
-//  * function อัพเดทค่า LeaveTotal
-//  */
-// function updateLeaveTotal() {
-//   const newLeaveTotal = calculateDurationYmd(
-//     formDataStudy.leaveStartDate,
-//     formDataStudy.leaveEndDate
-//   );
-//   formDataStudy.leaveTotal = newLeaveTotal;
-// }
-
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(
   () => props.data,
@@ -490,6 +476,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="มีกำหนด"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -828,24 +815,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 42553e9..9da1296 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -19,8 +19,6 @@ const {
   calculateDurationYmd,
   messageError,
   convertDateToAPI,
-  showLoader,
-  hideLoader,
 } = mixin;
 
 const leaveText = ref<string>("");
@@ -167,10 +165,11 @@ const checkDate = computed(() => {
   }
 });
 
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
+
 async function fetchCheck() {
   if (formDataTrain.leaveStartDate && formDataTrain.leaveEndDate) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -185,7 +184,7 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataTrain.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
+
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataTrain.leaveStartDate),
           convertDateToAPI(formDataTrain.leaveEndDate)
@@ -193,32 +192,20 @@ async function fetchCheck() {
         reasonLeave.value = data.message
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
-        hideLoader();
       })
       .catch((e: any) => {
-        // totalCheck.value = null;
         messageError($q, e);
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
 
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataTrain.leaveStartDate,
-    formDataTrain.leaveEndDate
-  );
-  formDataTrain.leaveTotal = newLeaveTotal;
-}
-
 watch(
   () => props.data,
   async () => {
     if (props.data) {
-      // totalCheck.value = null;
       formDataTrain.leaveWrote = props.data.leaveWrote;
       formDataTrain.leaveStartDate = props.data.leaveStartDate;
       formDataTrain.leaveEndDate = props.data.leaveEndDate;
@@ -470,6 +457,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="มีกำหนด"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -789,24 +777,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 1455a29..140a25d 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted, computed } from "vue";
-import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -79,8 +78,6 @@ const FormRef: FormRef = {
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const nameFileDraft = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
@@ -171,12 +168,13 @@ const checkDate = computed(() => {
  * @param formData
  */
 const isLeave = ref<boolean>(true);
-// const totalCheck = ref<number|null>(null)
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (
     formDataWorkInternational.leaveStartDate &&
     formDataWorkInternational.leaveEndDate
   ) {
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -193,7 +191,6 @@ async function fetchCheck() {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataWorkInternational.leaveTotal = data.totalDate;
-        // totalCheck.value = data.totalDate;
         leaveText.value = calculateDurationYmd(
           convertDateToAPI(formDataWorkInternational.leaveStartDate),
           convertDateToAPI(formDataWorkInternational.leaveEndDate)
@@ -203,8 +200,10 @@ async function fetchCheck() {
           : "จำนวนวันลาเกินที่กำหนด";
       })
       .catch((e: any) => {
-        // totalCheck.value = null;
         messageError($q, e);
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -249,17 +248,17 @@ watch(
   }
 );
 
-watch(
-  () => formDataWorkInternational.leaveEndDate,
-  () => {
-    if (
-      formDataWorkInternational.leaveStartDate !== null &&
-      formDataWorkInternational.leaveEndDate !== null
-    ) {
-      fetchCheck();
-    }
-  }
-);
+// watch(
+//   () => formDataWorkInternational.leaveEndDate,
+//   () => {
+//     if (
+//       formDataWorkInternational.leaveStartDate !== null &&
+//       formDataWorkInternational.leaveEndDate !== null
+//     ) {
+//       fetchCheck();
+//     }
+//   }
+// );
 
 /**Hook */
 onMounted(async () => {
@@ -475,6 +474,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="มีกำหนด"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -644,24 +644,26 @@ onMounted(async () => {
           id="onSubmit"
           type="submit"
           unelevated
-          dense
           class="q-px-md items-center btnBlue"
           label="บันทึก"
           :disable="!isLeave"
-          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+        </q-btn>
         <q-btn
           v-if="data && statusCheck != 'NEW'"
           id="onSubmit"
           type="button"
           unelevated
-          dense
           class="q-px-md items-center q-ml-sm"
           color="primary"
           label="ยื่นใบลา"
           @click="onConfirm()"
-          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>ยื่นใบลา</q-tooltip>
+        </q-btn>
       </div>
     </div>
   </form>
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index fc3785c..5dced28 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -4,7 +4,6 @@ import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
@@ -15,15 +14,8 @@ const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 
-const {
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  messageError,
-  convertDateToAPI,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, calculateDurationYmd, messageError, convertDateToAPI } =
+  mixin;
 
 const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
@@ -209,13 +201,13 @@ const reasonLeave = ref<string>("");
  * @param formData
  */
 const isLeave = ref<boolean>(true);
-// const totalCheck = ref<number | null>(null);
+const isLoadCheck = ref<boolean>(false);
 async function fetchCheck() {
   if (
     formDataFollowSpouse.leaveStartDate &&
     formDataFollowSpouse.leaveEndDate
   ) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -241,12 +233,12 @@ async function fetchCheck() {
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
         checkTotalHistory();
-        hideLoader();
       })
       .catch((e: any) => {
         messageError($q, e);
-        // totalCheck.value = null
-        hideLoader();
+      })
+      .finally(() => {
+        isLoadCheck.value = false;
       });
   }
 }
@@ -568,6 +560,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="เป็นเวลา"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -917,24 +910,26 @@ onMounted(async () => {
         id="onSubmit"
         type="submit"
         unelevated
-        dense
         class="q-px-md items-center btnBlue"
         label="บันทึก"
         :disable="!isLeave"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+      </q-btn>
       <q-btn
         v-if="data && statusCheck != 'NEW'"
         id="onSubmit"
         type="button"
         unelevated
-        dense
         class="q-px-md items-center q-ml-sm"
         color="primary"
         label="ยื่นใบลา"
         @click="onConfirm()"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        :loading="isLoadCheck"
       >
+        <q-tooltip>ยื่นใบลา</q-tooltip>
+      </q-btn>
     </div>
   </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index bc17d96..0aba695 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from "vue";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
@@ -8,6 +8,7 @@ import { useLeaveStore } from "@/modules/05_leave/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
+import { load } from "@/router/loader";
 
 const $q = useQuasar();
 const dataStore = useLeaveStore();
@@ -125,17 +126,14 @@ const checkDate = computed(() => {
   }
 });
 
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-//  const totalCheck = ref<number|null>(null)
+const isLoadCheck = ref<boolean>(false);
+/** check ว่าลาได้ไหม จาก api */
 async function fetchCheck() {
   if (
     formDataRehabilitation.leaveStartDate &&
     formDataRehabilitation.leaveEndDate
   ) {
-    showLoader();
+    isLoadCheck.value = true;
     await http
       .post(config.API.leaveCheck(), {
         type: dataStore.typeId ?? null,
@@ -167,7 +165,7 @@ async function fetchCheck() {
         // totalCheck.value = null
       })
       .finally(() => {
-        hideLoader();
+        isLoadCheck.value = false;
       });
   }
 }
@@ -438,6 +436,7 @@ onMounted(async () => {
                 v-model="leaveText"
                 label="เป็นเวลา"
                 readonly
+                :loading="isLoadCheck"
               >
                 <template v-slot:hint>
                   <span style="color: red">
@@ -600,24 +599,26 @@ onMounted(async () => {
           id="onSubmit"
           type="submit"
           unelevated
-          dense
           class="q-px-md items-center btnBlue"
           label="บันทึก"
           :disable="!isLeave"
-          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>บันทึกแบบร่าง</q-tooltip>
+        </q-btn>
         <q-btn
           v-if="data && statusCheck != 'NEW'"
           id="onSubmit"
           type="button"
           unelevated
-          dense
           class="q-px-md items-center q-ml-sm"
           color="primary"
           label="ยื่นใบลา"
           @click="onConfirm()"
-          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+          :loading="isLoadCheck"
         >
+          <q-tooltip>ยื่นใบลา</q-tooltip>
+        </q-btn>
       </div>
     </div>
   </q-form>
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index e0fd86a..381ffd3 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -8,7 +9,7 @@ import { useLeaveStore } from "@/modules/05_leave/store";
 import { useDataStore } from "@/stores/data";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar, type QTableProps } from "quasar";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const mixin = useCounterMixin();
 const dataStore = useLeaveStore();
@@ -37,6 +38,7 @@ const pagination = ref({
 });
 
 const selected = ref<any[]>([]);
+const isLoading = ref<boolean>(false);
 const rows = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -93,7 +95,7 @@ function closeDialog() {
 }
 
 async function getCommander() {
-  showLoader();
+  isLoading.value = true;
   await http
     .put(config.API.commanderOperate, {
       isAct: isAct.value,
@@ -108,17 +110,20 @@ async function getCommander() {
     })
     .then((res) => {
       rows.value = res.data.result.data;
+      total.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
 function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
 
@@ -345,7 +350,9 @@ onMounted(() => {
               </div>
             </div>
             <div class="col-12">
+              <SkeletonTable v-if="isLoading" :columns="columns" />
               <d-table
+                v-else
                 ref="table"
                 :columns="columns"
                 :rows="rows"
@@ -357,6 +364,7 @@ onMounted(() => {
                 :rows-per-page-options="[10, 25, 50, 100]"
                 selection="single"
                 @update:pagination="updatePagination"
+                v-model:pagination="pagination"
                 v-model:selected="selected"
               >
                 <template v-slot:pagination="scope">
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 2ee8f9f..5047cc2 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -28,6 +28,7 @@ export const useLeaveStore = defineStore("Leave", () => {
   const fiscalYearyear = ref<Number | null>(new Date().getFullYear());
   const rows = ref<ListLeaveTable[]>([]);
   const leaveTypeData = ref<TypeLeave[]>([]);
+  const isLoadingProfile = ref<boolean>(false); // สถานะการโหลดข้อมูลโปรไฟล์
 
   /**
    * function เรียกข้อมูลรายการลา Table
@@ -307,7 +308,8 @@ export const useLeaveStore = defineStore("Leave", () => {
 
   //ดึงข้อมูล profile จาก API
   async function fetchProfile() {
-    showLoader();
+    // showLoader();
+    isLoadingProfile.value = true;
     await http
       .post(config.API.leaveProfile(), { type: typeId.value })
       .then((res: any) => {
@@ -345,7 +347,8 @@ export const useLeaveStore = defineStore("Leave", () => {
         console.log(e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        isLoadingProfile.value = false;
       });
   }
 
@@ -474,5 +477,6 @@ export const useLeaveStore = defineStore("Leave", () => {
     converstType,
 
     fetchLeaveTypeData,
+    isLoadingProfile,
   };
 });
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 72dedf6..0d9bfc4 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -209,11 +209,92 @@ onMounted(async () => {
                     ข้อมูลการลา
                   </div>
                 </div>
-                <FormPart2 :model="model" />
+                <q-card
+                  bordered
+                  class="q-pa-md bg-grey-1"
+                  v-if="dataStore.isLoadingProfile"
+                >
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-12">
+                      <div class="row q-col-gutter-sm">
+                        <div class="col-md-4 col-xs-12">
+                          <q-skeleton height="40px" />
+                        </div>
+                        <div class="col-md-4 col-xs-12">
+                          <q-skeleton height="40px" />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-md-6 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-6 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                    <div class="col-md-4 col-xs-12">
+                      <q-skeleton height="40px" />
+                    </div>
+                  </div>
+                </q-card>
+
+                <FormPart2 v-else :model="model" />
               </div>
             </div>
 
-            <div class="col-12">
+            <div class="col-12" v-if="dataStore.isLoadingProfile">
+              <div style="display: flex; align-items: center">
+                <q-icon
+                  name="mdi-numeric-3-circle"
+                  size="20px"
+                  color="primary"
+                />
+                <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+              </div>
+              <q-card bordered class="q-pa-md bg-grey-1">
+                <div class="row q-col-gutter-sm">
+                  <div class="col-12">
+                    <q-skeleton height="40px" />
+                  </div>
+                  <div class="col-12">
+                    <div class="row q-col-gutter-sm">
+                      <div class="col-md-3 col-xs-6">
+                        <q-skeleton height="40px" />
+                      </div>
+                      <div class="col-md-3 col-xs-6">
+                        <q-skeleton height="40px" />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <div class="row q-col-gutter-sm">
+                      <div class="col-md-3 col-xs-12">
+                        <q-skeleton height="40px" />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <q-skeleton height="40px" />
+                  </div>
+                  <div class="col-12">
+                    <q-skeleton height="120px" />
+                  </div>
+                  <div class="col-12">
+                    <q-skeleton height="40px" />
+                  </div>
+                </div>
+              </q-card>
+            </div>
+
+            <div class="col-12" v-else>
               <SickForm
                 v-if="model === 'LV-001' || model === 'LV-002'"
                 v-model:type="model"

From 48fac904e186a6ad6c4d2139e407964130c2ccfb Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 14 Aug 2025 11:54:02 +0700
Subject: [PATCH 173/195] fix bug pagination

---
 src/modules/06_evaluate/components/TableListEvaluate.vue | 1 +
 src/modules/14_IDP/views/main.vue                        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/modules/06_evaluate/components/TableListEvaluate.vue b/src/modules/06_evaluate/components/TableListEvaluate.vue
index 261f49a..4ded7cb 100644
--- a/src/modules/06_evaluate/components/TableListEvaluate.vue
+++ b/src/modules/06_evaluate/components/TableListEvaluate.vue
@@ -153,6 +153,7 @@ onMounted(() => {
     :visible-columns="store.visibleColumns"
     :rows-per-page-options="[10, 25, 50, 100]"
     @update:pagination="updatePagination"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index 8365183..79f0951 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -376,6 +376,7 @@ onMounted(async () => {
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
               @update:pagination="updatePagination"
+              v-model:pagination="pagination"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">

From 9ba92f39b1151f340a5f15067c7fa43a7c695b9e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 14 Aug 2025 11:58:36 +0700
Subject: [PATCH 174/195] fix bug pagination

---
 src/modules/10_registry/views/requestEditMain.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/modules/10_registry/views/requestEditMain.vue b/src/modules/10_registry/views/requestEditMain.vue
index 51c7dda..22121dd 100644
--- a/src/modules/10_registry/views/requestEditMain.vue
+++ b/src/modules/10_registry/views/requestEditMain.vue
@@ -110,6 +110,11 @@ const visibleColumns = ref<string[]>([
   "status",
   "remark",
 ]);
+const pagination = ref({
+  descending: true,
+  page: page.value,
+  rowsPerPage: pageSize.value,
+});
 
 /** function กลับไปหน้าทะเบียนประวัติ*/
 function onclickBackPage() {
@@ -303,6 +308,7 @@ onMounted(async () => {
             :paging="true"
             :visible-columns="visibleColumns"
             @update:pagination="updatePageSizePagination"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">

From 13ba0cafe10c59bb65e0dac73fcb7a30338e05f2 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 14 Aug 2025 14:28:59 +0700
Subject: [PATCH 175/195] fix bug  pagination

---
 src/modules/07_appealComplain/views/Main.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index 64e231d..292ba6d 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -390,6 +390,7 @@ onMounted(async () => {
                 :visible-columns="dataStore.visibleColumns"
                 :rows-per-page-options="[10, 25, 50, 100]"
                 @update:pagination="updatePagination"
+                v-model:pagination="pagination"
               >
                 <template v-slot:pagination="scope">
                   ทั้งหมด {{ total }} รายการ

From 9f410970056f05d6bd7994755ac59253ead83e2e Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 14 Aug 2025 14:31:26 +0700
Subject: [PATCH 176/195] fix loading appeal complain

---
 src/modules/07_appealComplain/views/Form.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index 85ce7cd..d2b715f 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -359,11 +359,11 @@ watch(
               </q-card>
             </div>
           </div>
-          <q-separator v-if="!isReadOnly" />
+          <q-separator v-if="!isReadOnly && !isLoad" />
           <q-card-actions
             align="right"
             class="bg-white text-teal"
-            v-if="!isReadOnly"
+            v-if="!isReadOnly && !isLoad"
           >
             <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
               ><q-tooltip>บันทึก</q-tooltip></q-btn

From cacb84bb48c99e775f05187dd1bf6ca42268109e Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 14 Aug 2025 16:15:04 +0700
Subject: [PATCH 177/195] fix:load skeleton

---
 .../08_KPI/components/Evaluator/01_TabAll.vue |   5 +
 .../components/Evaluator/02_TabOther.vue      |  10 +-
 .../08_KPI/components/Tab/01_Assessment.vue   |  38 +-
 .../08_KPI/components/Tab/04_Result.vue       |  61 ++-
 src/modules/08_KPI/components/Tab/05_File.vue |  12 +-
 .../Tab/Dialog/01_FormIndicator.vue           | 114 +++++-
 .../Tab/Dialog/04_FormCompetency.vue          |  56 ++-
 .../Tab/Dialog/DialogCommentProblem.vue       |  55 ++-
 .../Tab/Dialog/DialogCommentProgress.vue      |  67 +++-
 .../components/Tab/Dialog/DialogDevelop.vue   |  68 +++-
 .../Tab/Dialog/DialogGovernment.vue           |  11 +-
 .../components/Tab/Topic/01_Indicator.vue     |   9 +-
 .../components/Tab/Topic/02_Competency.vue    |  55 +--
 .../components/Tab/Topic/03_Develop.vue       |  28 +-
 src/modules/08_KPI/views/form.vue             |  84 +++-
 src/modules/08_KPI/views/main.vue             |  19 +-
 src/modules/08_KPI/views/mainEvaluator.vue    |  33 +-
 src/modules/09_scholarship/views/detail.vue   | 360 ++++++++++++------
 src/modules/09_scholarship/views/main.vue     |  10 +-
 src/modules/11_probation/views/mainDetail.vue | 108 ++++--
 20 files changed, 894 insertions(+), 309 deletions(-)

diff --git a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
index 5c0db8d..127ecc8 100644
--- a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
+++ b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
@@ -8,8 +8,11 @@ import { useKpiDataStore } from "@/modules/08_KPI/store";
 import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
 import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const store = useKpiDataStore();
 const router = useRouter();
+const isLoad = defineModel<boolean>('isLoad',{required:true})
 const visibleColumns = defineModel<string[]>("visibleColumns", {
   required: true,
 });
@@ -42,6 +45,7 @@ async function redirectViewDetail(id: string) {
 <template>
   <div class="col-12">
     <d-table
+    v-if="!isLoad"
       ref="table"
       :columns="columns"
       :rows="rows"
@@ -120,6 +124,7 @@ async function redirectViewDetail(id: string) {
         ></q-pagination>
       </template>
     </d-table>
+    <SkeletonTable v-else :columns="columns"/>
   </div>
 </template>
 
diff --git a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
index 20aed72..2f711ec 100644
--- a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
+++ b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
@@ -12,6 +12,8 @@ import { useKpiDataStore } from "@/modules/08_KPI/store";
 import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
 import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
@@ -34,6 +36,7 @@ const rows = defineModel<ResEvaluatorAssessor[]>("rows", { required: true });
 const formQuery = defineModel<FormQuery>("formQuery", { required: true });
 const total = defineModel<number>("total", { required: true });
 const maxPage = defineModel<number>("maxPage", { required: true });
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 
 const props = defineProps({
   updatePagination: { type: Function },
@@ -109,6 +112,7 @@ async function onClickApprove(type: string = "") {
 <template>
   <div class="col-12">
     <d-table
+      v-if="!isLoad"
       ref="table"
       :columns="columns"
       :rows="rows"
@@ -187,10 +191,7 @@ async function onClickApprove(type: string = "") {
             </q-card-section>
             <q-separator />
             <q-list @click="redirectViewDetail(props.row.id)">
-              <q-item
-                v-for="col in props.cols"
-                :key="col.name"
-              >
+              <q-item v-for="col in props.cols" :key="col.name">
                 <q-item-section>
                   <q-item-label caption>{{ col.label }}</q-item-label>
 
@@ -225,6 +226,7 @@ async function onClickApprove(type: string = "") {
         ></q-pagination>
       </template>
     </d-table>
+    <SkeletonTable v-else :columns="columns" />
   </div>
 
   <div class="row justify-end q-mt-md q-gutter-sm" v-if="rows.length !== 0">
diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index fea2f61..9ee4872 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -37,6 +37,10 @@ const store = useKpiDataStore();
 
 const evaluationId = ref<string>(route.params.id.toString());
 
+const isLoad01 = ref<boolean>(false);
+const isLoad02 = ref<boolean>(false);
+const isLoad03 = ref<boolean>(false);
+
 const rows_01 = ref<EvaluationIndicatorType[]>();
 const rows_02 = ref<EvaluationIndicatorType[]>();
 const rows_03 = ref<EvaluationIndicatorType[]>();
@@ -53,6 +57,7 @@ const resultRole = ref<number>(0);
 const resultAssigned = ref<number>(0);
 
 function fetchListPlanned() {
+  isLoad01.value = true;
   http
     .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -62,6 +67,7 @@ function fetchListPlanned() {
         evaluationResults: (e.point / 5) * e.weight,
       }));
       rows_01.value = newRow;
+      isLoad01.value = false;
 
       if (newRow.length > 0) {
         resultPlanned.value = newRow.reduce(
@@ -89,6 +95,7 @@ function fetchListPlanned() {
 }
 
 function fetchListRole() {
+  isLoad02.value = true;
   http
     .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -98,7 +105,7 @@ function fetchListRole() {
         evaluationResults: (e.point / 5) * e.weight,
       }));
       rows_02.value = newRow;
-
+      isLoad02.value = false;
       if (newRow.length > 0) {
         resultRole.value = newRow.reduce(
           (sum: number, e: any) => sum + e.evaluationResults,
@@ -119,6 +126,7 @@ function fetchListRole() {
 }
 
 function fetchAssigned() {
+  isLoad03.value = true;
   http
     .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -129,7 +137,7 @@ function fetchAssigned() {
       }));
 
       rows_03.value = newRow;
-
+      isLoad03.value = false;
       if (newRow.length > 0) {
         resultAssigned.value = newRow.reduce(
           (sum: number, e: any) => sum + e.evaluationResults,
@@ -345,6 +353,7 @@ onMounted(() => {
       <div v-if="groupNo == 1">
         <Work
           v-model:data="rows_01"
+          v-model:isLoad="isLoad01"
           :title="`มิติที่ 1 ภารกิจตามนโยบายและยุทธศาสตร์ของกรุงเทพมหานคร`"
           :page="1"
           :fetchList="fetchListPlanned"
@@ -391,6 +400,7 @@ onMounted(() => {
 
         <Work
           v-model:data="rows_03"
+          v-model:isLoad="isLoad03"
           :title="`มิติที่ 2 วาระเร่งด่วนที่ได้รับมอบหมายพิเศษ (ถ้ามี)`"
           :page="3"
           :fetchList="fetchAssigned"
@@ -437,12 +447,16 @@ onMounted(() => {
                 คะแนน)</span
               >
               <div class="text-primary q-pl-md">
-                {{
-                  (
-                    store.excusiveIndicator1ScoreVal +
-                    store.excusiveIndicator2ScoreVal
-                  ).toFixed(2)
-                }}
+                <div v-if="!isLoad01">
+                  {{
+                    (
+                      store.excusiveIndicator1ScoreVal +
+                      store.excusiveIndicator2ScoreVal
+                    ).toFixed(2)
+                  }}
+                </div>
+
+                <q-skeleton v-else type="text" />
               </div>
             </div>
           </div>
@@ -452,6 +466,7 @@ onMounted(() => {
       <div v-else>
         <Work
           v-model:data="rows_01"
+          v-model:isLoad="isLoad01"
           :title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
           :page="1"
           :fetchList="fetchListPlanned"
@@ -459,6 +474,7 @@ onMounted(() => {
         />
         <Work
           v-model:data="rows_02"
+          v-model:isLoad="isLoad02"
           :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
           :page="2"
           :fetchList="fetchListRole"
@@ -466,6 +482,7 @@ onMounted(() => {
         />
         <Work
           v-model:data="rows_03"
+          v-model:isLoad="isLoad03"
           :title="`3. งานอื่น ๆ ที่ได้รับมอบหมาย`"
           :page="3"
           :fetchList="fetchAssigned"
@@ -517,7 +534,10 @@ onMounted(() => {
                 คะแนน)</span
               >
               <div class="text-primary q-pl-md">
-                {{ store.indicatorScoreVal.toFixed(2) }}
+                <div v-if="!isLoad01">
+                  {{ store.indicatorScoreVal.toFixed(2) }}
+                </div>
+                <q-skeleton v-else type="text" />
               </div>
             </div>
           </div>
diff --git a/src/modules/08_KPI/components/Tab/04_Result.vue b/src/modules/08_KPI/components/Tab/04_Result.vue
index f31f989..8af30b0 100644
--- a/src/modules/08_KPI/components/Tab/04_Result.vue
+++ b/src/modules/08_KPI/components/Tab/04_Result.vue
@@ -192,7 +192,9 @@ function userOpen() {
   });
 }
 
+const isLoad = ref<boolean>(false);
 function getData() {
+  isLoad.value = true;
   http
     .get(config.API.kpiSendToGet(id.value))
     .then((res) => {
@@ -220,9 +222,11 @@ function getData() {
       sumWeight.value = data.weightPoint1 + data.weightPoint2;
       sumResult.value = data.summaryPoint;
       result.value = data.evaluationResults;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoad.value = false;
     })
     .finally(() => {});
 }
@@ -306,22 +310,47 @@ onMounted(() => {
                 <tbody>
                   <tr>
                     <td class="text-left">องค์ประกอบที่ 1 ผลสัมฤทธิ์ของงาน</td>
-                    <td class="text-left">{{ weight1 }}</td>
-                    <td class="text-left">{{ result1 }}</td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">
+                        {{ weight1 }}
+                      </div>
+                      <q-skeleton v-else type="text" />
+                    </td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">{{ result1 }}</div>
+
+                      <q-skeleton v-else type="text" />
+                    </td>
                   </tr>
                   <tr>
                     <td class="text-left">
                       องค์ประกอบที่ 2 พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)
                     </td>
-                    <td class="text-left">{{ weight2 }}</td>
-                    <td class="text-left">{{ result2 }}</td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">{{ weight2 }}</div>
+
+                      <q-skeleton v-else type="text" />
+                    </td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">{{ result2 }}</div>
+
+                      <q-skeleton v-else type="text" />
+                    </td>
                   </tr>
                   <tr>
                     <td class="text-right text-bold" style="font-size: 16px">
                       รวม
                     </td>
-                    <td class="text-left">{{ sumWeight }}</td>
-                    <td class="text-left">{{ sumResult }}</td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">{{ sumWeight }}</div>
+
+                      <q-skeleton v-else type="text" />
+                    </td>
+                    <td class="text-left">
+                      <div v-if="!isLoad">{{ sumResult }}</div>
+
+                      <q-skeleton v-else type="text" />
+                    </td>
                   </tr>
                 </tbody>
               </q-markup-table>
@@ -332,7 +361,7 @@ onMounted(() => {
               </div>
             </div>
             <div class="col-12 no-pointer">
-              <div class="column">
+              <div class="column" v-if="!isLoad">
                 <q-radio
                   v-model="result"
                   checked-icon="task_alt"
@@ -369,6 +398,12 @@ onMounted(() => {
                   label="ต้องปรับปรุง (คะแนนต่ำกว่าร้อยละ 60.00)"
                 />
               </div>
+
+              <q-item v-else dense v-for="item in 5" style="max-width: 300px;">
+                <q-item-section class="q-pa-none">
+                  <q-skeleton type="text" />
+                </q-item-section>
+              </q-item>
             </div>
             <div class="col-12">
               <div class="text-weight-bold text-body2">
@@ -378,6 +413,7 @@ onMounted(() => {
 
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 v-model="title"
                 outlined
                 lazy-rules
@@ -390,9 +426,11 @@ onMounted(() => {
                 "
                 :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง/เนื้อหา/หัวข้อการพัฒนา'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 v-model="developmentMethod"
                 outlined
                 lazy-rules
@@ -405,9 +443,11 @@ onMounted(() => {
                 "
                 :rules="[(val:string) => !!val || `${'กรุณากรอกวิธีการพัฒนา'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 v-model="developmentPeriod"
                 outlined
                 hide-bottom-space
@@ -420,6 +460,7 @@ onMounted(() => {
                 "
                 :rules="[(val:string) => !!val || `${'กรุณากรอกช่วงเวลาการพัฒนา'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
             <div class="col-12">
               <div class="text-weight-bold text-body2">
@@ -428,6 +469,7 @@ onMounted(() => {
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 v-model="evaluatorComment"
                 outlined
                 lazy-rules
@@ -440,6 +482,7 @@ onMounted(() => {
                 "
                 :rules="[(val:string) => !!val || `${'กรุณากรอกความเห็นของ'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
           </div>
         </q-card-section>
@@ -519,6 +562,7 @@ onMounted(() => {
 
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 lazy-rules
                 v-model="superiorComment"
                 outlined
@@ -538,6 +582,7 @@ onMounted(() => {
                 ref="superiorCommentRef"
                 :rules="[(val:string) => superiorCommentCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
           </div>
         </q-card-section>
@@ -621,6 +666,7 @@ onMounted(() => {
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 lazy-rules
                 ref="additionalSuperiorCommentRef"
                 v-model="additionalSuperiorComment"
@@ -641,6 +687,7 @@ onMounted(() => {
                 "
                 :rules="[(val:string) => additionalSuperiorCheck !== 'false'||!!val || `${'กรุณากรอกความเห็น'}`,]"
               />
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
           </div>
         </q-card-section>
diff --git a/src/modules/08_KPI/components/Tab/05_File.vue b/src/modules/08_KPI/components/Tab/05_File.vue
index 5235182..8b5f6bb 100644
--- a/src/modules/08_KPI/components/Tab/05_File.vue
+++ b/src/modules/08_KPI/components/Tab/05_File.vue
@@ -32,18 +32,20 @@ const isReadonly = ref<boolean>(
 const documentFile = ref<any>(null);
 const fileList = ref<ArrayFileList[]>([]);
 
+const isLoad = ref<boolean>(false);
 async function getData() {
-  showLoader();
+  isLoad.value = true;
   await http
     .get(config.API.file("ไฟล์เอกสาร", "KPI", id.value))
     .then((res) => {
       fileList.value = res.data;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -190,7 +192,11 @@ onMounted(() => {
           <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
         </div>
 
-        <div v-if="fileList.length > 0" class="col-xs-12 row">
+        <div v-if="isLoad" class="col-12">
+
+          <q-skeleton />
+        </div>
+        <div v-else-if="fileList.length > 0" class="col-xs-12 row">
           <q-list class="full-width rounded-borders" bordered separator>
             <q-item
               clickable
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index d931c4f..69cb128 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -36,6 +36,8 @@ const search = ref<string>("");
 const listCheckID = ref<string | null>(null);
 const listTarget = ref<any>([]);
 
+const isLoad = ref<boolean>(false);
+const isLoadList = ref<boolean>(false);
 const formFilter = reactive<any>({
   isAll: false,
   keyword: "",
@@ -91,20 +93,20 @@ function fetchListPlan() {
     : store.dataProfile.nodeDnaId;
   formFilter.node = formFilter.isAll ? 0 : store.dataProfile.node;
   formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
-
-  showLoader();
+  isLoadList.value = true;
   http
     .post(config.API.kpiPlan + `/search`, formFilter)
     .then((res) => {
       listTarget.value = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       totalList.value = res.data.result.total;
+      isLoadList.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoadList.value = false;
     });
 }
 
@@ -113,7 +115,7 @@ function fetchListPlan() {
  * @param id id
  */
 function fetchListPlanByid(id: string) {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.kpiAchievement("planned") + `/${id}`)
     .then((res) => {
@@ -138,12 +140,13 @@ function fetchListPlanByid(id: string) {
       formDetail.endDate = data.endDate;
 
       listCheckID.value = data.kpiPlanId;
+      isLoad.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -154,24 +157,25 @@ function fetchListRole() {
   formFilter.node = formFilter.isAll ? 0 : store.dataProfile.node;
   formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
   formFilter.position = store.dataProfile.position;
-
+  isLoadList.value = true;
   http
     .post(config.API.kpiRole + `/search`, formFilter)
     .then((res) => {
       listTarget.value = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       totalList.value = res.data.result.total;
+      isLoadList.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoadList.value = false;
     });
 }
 
 function fetchRoleByid(id: string) {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.kpiAchievement("role") + `/${id}`)
     .then((res) => {
@@ -193,12 +197,13 @@ function fetchRoleByid(id: string) {
       formDetail.includingName = data.includingName;
       formDetail.including = data.including;
       listCheckID.value = data.kpiRoleId;
+      isLoad.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -212,25 +217,25 @@ function fetchListSpecial() {
     pageSize: formFilter.pageSize,
     page: formFilter.page,
   };
-
-  showLoader();
+  isLoadList.value = true;
   http
     .post(config.API.kpiSpecial + `/search`, body)
     .then((res) => {
       listTarget.value = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       totalList.value = res.data.result.total;
+      isLoadList.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoadList.value = false;
     });
 }
 
 function fetchspecialByid(id: string) {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.kpiAchievement("special") + `/${id}`)
     .then((res) => {
@@ -252,18 +257,19 @@ function fetchspecialByid(id: string) {
       formDetail.endDate = data.endDate;
 
       listCheckID.value = data.kpiSpecialId;
+      isLoad.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
 function clickList(id: string, isData: boolean = false) {
   if (!checkDetail.value) {
-    showLoader();
+    isLoad.value=true
     const url =
       numpage.value === 1
         ? config.API.kpiPlan
@@ -301,12 +307,13 @@ function clickList(id: string, isData: boolean = false) {
         formDetail.strategyId = data.strategyId;
         formDetail.strategyName = data.strategyName;
         formDetail.documentInfoEvidence = data.documentInfoEvidence;
+        isLoad.value=false
       })
       .catch((err) => {
         messageError($q, err);
       })
       .finally(() => {
-        hideLoader();
+        isLoad.value=false
       });
   }
 }
@@ -595,7 +602,7 @@ const title = computed(() => {
                   <q-separator />
 
                   <q-card-section class="q-pa-none">
-                    <q-list separator>
+                    <q-list separator v-if="!isLoadList">
                       <q-item
                         dense
                         v-for="(item, index) in listTarget"
@@ -622,6 +629,25 @@ const title = computed(() => {
                         </q-item-section>
                       </q-item>
                     </q-list>
+
+                    <q-list v-else separator>
+                      <q-item dense v-for="item in 2">
+                        <q-item-section class="q-pa-none">
+                          <div
+                            class="row items-center"
+                            style="min-height: 50px"
+                          >
+                            <div class="col-5">
+                              <q-skeleton type="text" width="50px" />
+                            </div>
+                            <div class="col-7">
+                              <q-skeleton type="text" />
+                            </div>
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+
                     <q-separator />
                     <div
                       class="q-pa-lg flex justify-end"
@@ -662,18 +688,33 @@ const title = computed(() => {
                     <div class="q-pa-sm q-col-gutter-lg">
                       <div class="col-12 row" v-if="numpage !== 3">
                         <div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
-                        <div class="col-8">{{ formDetail.nodeName }}</div>
+                        <div v-if="!isLoad" class="col-8">
+                          {{ formDetail.nodeName }}
+                        </div>
+                        <div class="col-8" v-else>
+                          <q-skeleton type="text" />
+                        </div>
                       </div>
                       <div class="col-12 row" v-if="numpage === 1">
                         <div class="col-4 text-grey-6">ยุทธศาสตร์ / แผน</div>
-                        <div class="col-8">{{ formDetail.strategyName }}</div>
+                        <div v-if="!isLoad" class="col-8">
+                          {{ formDetail.strategyName }}
+                        </div>
+                        <div class="col-8" v-else>
+                          <q-skeleton type="text" />
+                        </div>
                       </div>
 
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">ลำดับ/รหัสตัวชี้วัด</div>
                         <div class="col-8">
+                          <q-skeleton
+                            v-if="isLoad"
+                            type="QInput"
+                            height="40px"
+                          />
                           <q-input
-                            v-if="numpage === 3"
+                            v-else-if="numpage === 3"
                             outlined
                             :readonly="checkDetail"
                             v-model="formDetail.including"
@@ -694,8 +735,13 @@ const title = computed(() => {
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
                         <div class="col-8">
+                          <q-skeleton
+                            v-if="isLoad"
+                            type="QInput"
+                            height="40px"
+                          />
                           <q-input
-                            v-if="numpage === 3"
+                            v-else-if="numpage === 3"
                             outlined
                             :readonly="checkDetail"
                             v-model="formDetail.includingName"
@@ -715,6 +761,7 @@ const title = computed(() => {
                         <div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
                         <div class="col-8">
                           <q-input
+                            v-if="!isLoad"
                             outlined
                             v-model="formDetail.target"
                             bg-color="white"
@@ -727,12 +774,14 @@ const title = computed(() => {
                             hide-bottom-space
                             lazy-rules
                           />
+                          <q-skeleton v-else type="QInput" height="40px" />
                         </div>
                       </div>
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">หน่วยนับ</div>
                         <div class="col-8">
                           <q-input
+                            v-if="!isLoad"
                             outlined
                             v-model="formDetail.unit"
                             bg-color="white"
@@ -746,12 +795,14 @@ const title = computed(() => {
                             hide-bottom-space
                             reverse-fill-mask
                           />
+                          <q-skeleton v-else type="QInput" height="40px" />
                         </div>
                       </div>
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
                         <div class="col-8">
                           <q-input
+                            v-if="!isLoad"
                             outlined
                             v-model="formDetail.weight"
                             bg-color="white"
@@ -766,6 +817,7 @@ const title = computed(() => {
                             lazy-rules
                             mask="###"
                           />
+                          <q-skeleton v-else type="QInput" height="40px" />
                         </div>
                       </div>
                     </div>
@@ -784,6 +836,7 @@ const title = computed(() => {
                       <div class="col-6 text-center text-body2">5</div>
                       <div class="col-6">
                         <q-input
+                          v-if="!isLoad"
                           v-model="formDetail.achievement5"
                           outlined
                           dense
@@ -793,6 +846,7 @@ const title = computed(() => {
                           class="inputgreen"
                           lazy-rules
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                     <q-separator />
@@ -800,6 +854,7 @@ const title = computed(() => {
                       <div class="col-6 text-center text-body2">4</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
+                          v-if="!isLoad"
                           v-model="formDetail.achievement4"
                           outlined
                           :readonly="checkDetail"
@@ -809,6 +864,7 @@ const title = computed(() => {
                           class="inputgreen"
                           lazy-rules
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                     <q-separator />
@@ -816,6 +872,7 @@ const title = computed(() => {
                       <div class="col-6 text-center text-body2">3</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
+                          v-if="!isLoad"
                           v-model="formDetail.achievement3"
                           outlined
                           :readonly="checkDetail"
@@ -825,6 +882,7 @@ const title = computed(() => {
                           class="inputgreen"
                           lazy-rules
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                     <q-separator />
@@ -832,6 +890,7 @@ const title = computed(() => {
                       <div class="col-6 text-center text-body2">2</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
+                          v-if="!isLoad"
                           v-model="formDetail.achievement2"
                           outlined
                           :readonly="checkDetail"
@@ -841,6 +900,7 @@ const title = computed(() => {
                           class="inputgreen"
                           lazy-rules
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                     <q-separator />
@@ -848,6 +908,7 @@ const title = computed(() => {
                       <div class="col-6 text-center text-body2">1</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
+                          v-if="!isLoad"
                           v-model="formDetail.achievement1"
                           outlined
                           :readonly="checkDetail"
@@ -857,12 +918,14 @@ const title = computed(() => {
                           class="inputgreen"
                           lazy-rules
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                   </q-card>
                 </div>
                 <div class="col-12">
                   <q-input
+                    v-if="!isLoad"
                     v-model="formDetail.meaning"
                     label="นิยามหรือความหมายของตัวชี้วัด"
                     type="textarea"
@@ -874,10 +937,12 @@ const title = computed(() => {
                     class="inputgreen"
                     lazy-rules
                   />
+                  <q-skeleton v-else type="QInput" height="150px" />
                 </div>
 
                 <div class="col-12">
                   <q-input
+                    v-if="!isLoad"
                     v-model="formDetail.formula"
                     label="สูตรคำนวณ"
                     :readonly="checkDetail"
@@ -889,10 +954,12 @@ const title = computed(() => {
                     class="inputgreen"
                     lazy-rules
                   />
+                  <q-skeleton v-else type="QInput" height="150px" />
                 </div>
 
                 <div class="col-12">
                   <q-input
+                    v-if="!isLoad"
                     v-model="formDetail.documentInfoEvidence"
                     label="ข้อมูลเอกสารหลักฐาน"
                     type="textarea"
@@ -904,9 +971,11 @@ const title = computed(() => {
                     class="inputgreen"
                     lazy-rules
                   />
+                  <q-skeleton v-else type="QInput" height="150px" />
                 </div>
                 <div class="col-3">
                   <datepicker
+                    v-if="!isLoad"
                     v-model="formDetail.startDate"
                     :locale="'th'"
                     :readonly="checkDetail"
@@ -952,9 +1021,11 @@ const title = computed(() => {
                       </q-input>
                     </template>
                   </datepicker>
+                  <q-skeleton v-else type="QInput" height="40px" />
                 </div>
                 <div class="col-3">
                   <datepicker
+                    v-if="!isLoad"
                     v-model="formDetail.endDate"
                     :locale="'th'"
                     :readonly="checkDetail"
@@ -1000,6 +1071,7 @@ const title = computed(() => {
                       </q-input>
                     </template>
                   </datepicker>
+                  <q-skeleton v-else type="QInput" height="40px" />
                 </div>
               </div>
             </div>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
index 4a5d936..e09f04b 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
@@ -13,6 +13,8 @@ import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
+import SkeletonTable from '@/components/SkeletonTable.vue'
+
 const dataListCapacityDetails = ref<ListCapacity[]>([]);
 const route = useRoute();
 const idParam = ref<string>(route.params.id as string);
@@ -195,9 +197,10 @@ function onSubmit() {
   }
 }
 
+const isLoadCapacity = ref<boolean>(false);
 /** ดึงข้อมูล สมรรถนะ */
 function getData() {
-  showLoader();
+  isLoadCapacity.value = true;
   http
     .get(config.API.KpiCapacity + `?type=${type.value}&pageSize=100`)
     .then((res) => {
@@ -213,7 +216,7 @@ function getData() {
       }
     })
     .finally(() => {
-      hideLoader();
+      isLoadCapacity.value = false;
     });
 }
 
@@ -228,7 +231,9 @@ function filterTxt(val: any) {
 }
 
 /** ดึงข้อมูลตามไอดี */
+const isLoadById = ref<boolean>(false);
 function getDataById() {
+  isLoadById.value = true;
   http
     .get(config.API.kpiUserCapacity + `/${idProps.value}`)
     .then((res) => {
@@ -252,6 +257,7 @@ function getDataById() {
       formDetail.definition = target.description;
 
       dataListCapacityDetails.value = dataListCriteria;
+      isLoadById.value = false;
     })
     .catch((e) => {})
     .finally(() => {});
@@ -262,8 +268,10 @@ watch(
   () => {
     if (modal.value) {
       type.value = competencyType.value;
+
       getData();
       if (idProps.value) {
+        isLoadById.value = true;
         setTimeout(() => {
           getDataById();
         }, 500);
@@ -407,18 +415,32 @@ watch(
                           }}
                         </div>
                         <div class="col-8">
-                          <span v-if="field == 'type'">{{
-                            formDetail[field]
-                              ? store.convertCompetencyType(formDetail[field])
-                              : "-"
-                          }}</span>
-                          <span
-                            v-else-if="field == 'definition'"
-                            v-html="formDetail[field]"
-                          ></span>
-                          <span v-else>{{
-                            formDetail[field] ? formDetail[field] : "-"
-                          }}</span>
+                          <span v-if="field == 'type'">
+                            <div v-if="!isLoadById">
+                              {{
+                                formDetail[field]
+                                  ? store.convertCompetencyType(
+                                      formDetail[field]
+                                    )
+                                  : "-"
+                              }}
+                            </div>
+
+                            <q-skeleton v-else type="text" />
+                          </span>
+                          <span v-else-if="field == 'definition'">
+                            <div
+                              v-if="!isLoadById"
+                              v-html="formDetail[field]"
+                            ></div>
+                            <q-skeleton v-else type="text" />
+                          </span>
+                          <span v-else>
+                            <div v-if="!isLoadById">
+                              {{ formDetail[field] ? formDetail[field] : "-" }}
+                            </div>
+                            <q-skeleton v-else type="text"
+                          /></span>
                         </div>
                       </div>
                     </div>
@@ -426,6 +448,7 @@ watch(
                       <div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
                       <div class="col-8">
                         <q-input
+                          v-if="!isLoadById"
                           readonly
                           v-model="weight"
                           dense
@@ -436,10 +459,12 @@ watch(
                           class="inputgreen"
                           mask="###"
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                       <div class="col-4 text-grey-6">ระดับที่คาดหวัง</div>
                       <div class="col-8">
                         <q-select
+                          v-if="!isLoadById"
                           :readonly="type == 'HEAD' || type == 'GROUP'"
                           v-model="expectedLevel"
                           :options="expectedLevelOp"
@@ -451,12 +476,14 @@ watch(
                           hide-bottom-space
                           class="inputgreen"
                         />
+                        <q-skeleton v-else type="QInput" height="40px" />
                       </div>
                     </div>
                   </q-card>
                 </div>
                 <div class="col-xs-12 col-md-7">
                   <d-table
+                  v-if="!isLoadById"
                     flat
                     bordered
                     dense
@@ -531,6 +558,7 @@ watch(
                       </div>
                     </template>
                   </d-table>
+                  <SkeletonTable v-else :columns="columns"/>
                 </div>
               </div>
             </div>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
index c311882..e72c5d8 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
@@ -60,7 +60,9 @@ let count = ref<number>(0);
  * @param index id หัวข้อ
  * @param data ข้อมูล
  */
+const isLoadDetail = ref<boolean>(false);
 function clickList(index: string, data: any) {
+  isLoadDetail.value = true;
   listCheck.value = index as string;
 
   formDataView.id = data.id;
@@ -76,13 +78,13 @@ function clickList(index: string, data: any) {
   reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
 
   if (count.value >= 1) {
-    reasonEvaluatorRef.value.reset();
-    reasonCommanderRef.value.reset();
-    reasonCommanderHighRef.value.reset();
+    reasonEvaluatorRef.value && reasonEvaluatorRef.value.reset();
+    reasonCommanderRef.value && reasonCommanderRef.value.reset();
+    reasonCommanderHighRef.value && reasonCommanderHighRef.value.reset();
   }
-  showLoader();
+  count.value++;
   setTimeout(() => {
-    hideLoader();
+    isLoadDetail.value = false;
   }, 100);
 }
 
@@ -157,8 +159,9 @@ function closeAdd() {
   getList();
 }
 
+const isLoad = ref<boolean>(false);
 function getList() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(
       config.API.kpiCommentP(
@@ -171,13 +174,13 @@ function getList() {
     .then((res) => {
       const data = res.data.result;
       listTarget.value = data;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoad.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -288,7 +291,19 @@ watch(
 
                 <q-separator />
                 <q-card-section class="q-pa-none">
-                  <div v-if="listTarget.length > 0">
+                  <q-list v-if="isLoad" separator>
+                    <q-item dense v-for="item in 2">
+                      <q-item-section class="q-pa-none">
+                        <div class="row items-center" style="min-height: 50px">
+                          <div class="col-12">
+                            <q-skeleton type="text" />
+                          </div>
+                        </div>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+
+                  <div v-else-if="listTarget.length > 0">
                     <q-list separator dense>
                       <q-item
                         v-for="(item, index) in listTarget"
@@ -348,11 +363,21 @@ watch(
               <div class="row q-pa-md q-col-gutter-sm">
                 <div class="row col-12 text-weight-medium">
                   <div class="col-4 text-grey-6">หัวข้อปัญหา</div>
-                  <div class="col-8">{{ formDataView.topic }}</div>
+                  <div class="col-8">
+                    <div v-if="!isLoadDetail">
+                      {{ formDataView.topic }}
+                    </div>
+                    <q-skeleton v-else type="text" />
+                  </div>
                 </div>
                 <div class="row col-12 text-weight-medium">
                   <div class="col-4 text-grey-6">รายละเอียดปัญหา</div>
-                  <div class="col-8">{{ formDataView.reason }}</div>
+                  <div class="col-8">
+                    <div v-if="!isLoadDetail">
+                      {{ formDataView.reason }}
+                    </div>
+                    <q-skeleton v-else type="text" />
+                  </div>
                 </div>
                 <div class="col-12">
                   <q-separator />
@@ -375,6 +400,7 @@ watch(
                     </div>
                     <div class="col-12">
                       <q-input
+                        v-if="!isLoadDetail"
                         outlined
                         dense
                         :readonly="
@@ -390,6 +416,7 @@ watch(
                         hide-bottom-space
                         :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="150px" />
                     </div>
 
                     <div
@@ -429,6 +456,7 @@ watch(
                     </div>
                     <div class="col-12">
                       <q-input
+                        v-if="!isLoadDetail"
                         outlined
                         dense
                         label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
@@ -444,6 +472,7 @@ watch(
                         hide-bottom-space
                         :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="150px" />
                     </div>
 
                     <div
@@ -482,6 +511,7 @@ watch(
                     </div>
                     <div class="col-12">
                       <q-input
+                        v-if="!isLoadDetail"
                         outlined
                         dense
                         label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
@@ -497,6 +527,7 @@ watch(
                         hide-bottom-space
                         :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="150px" />
                     </div>
 
                     <div
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
index dd3813b..a86cdbb 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
@@ -62,7 +62,10 @@ const formDataView = reactive<FormCommentByRole>({
 });
 
 let count = ref<number>(0);
+const isLoadDetail = ref<boolean>(false);
 function clickList(index: string, data: any) {
+  isLoadDetail.value = true;
+
   listCheck.value = index as string;
 
   formDataView.id = data.id;
@@ -80,14 +83,13 @@ function clickList(index: string, data: any) {
   reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
 
   if (count.value >= 1) {
-    reasonEvaluatorRef.value.reset();
-    reasonCommanderRef.value.reset();
-    reasonCommanderHighRef.value.reset();
+    reasonEvaluatorRef.value && reasonEvaluatorRef.value.reset();
+    reasonCommanderRef.value && reasonCommanderRef.value.reset();
+    reasonCommanderHighRef.value && reasonCommanderHighRef.value.reset();
   }
   count.value++;
-  showLoader();
   setTimeout(() => {
-    hideLoader();
+    isLoadDetail.value = false;
   }, 100);
 }
 
@@ -147,8 +149,9 @@ function closeAdd() {
   numLevel.value = "";
 }
 
+const isLoad = ref<boolean>(false);
 function getList() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(
       config.API.kpiCommentP(
@@ -161,13 +164,13 @@ function getList() {
     .then((res) => {
       const data = res.data.result;
       listTarget.value = data;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoad.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 function onSubmitComment(role: string) {
@@ -313,7 +316,21 @@ watch(
 
                   <q-separator />
                   <q-card-section class="q-pa-none">
-                    <div v-if="listTarget.length > 0">
+                    <q-list v-if="isLoad" separator>
+                      <q-item dense v-for="item in 2">
+                        <q-item-section class="q-pa-none">
+                          <div
+                            class="row items-center"
+                            style="min-height: 50px"
+                          >
+                            <div class="col-12">
+                              <q-skeleton type="text" />
+                            </div>
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                    <div v-else-if="listTarget.length > 0">
                       <q-list separator dense>
                         <q-item
                           v-for="(item, index) in listTarget"
@@ -373,7 +390,12 @@ watch(
                           : "หัวข้อความก้าวหน้า"
                       }}
                     </div>
-                    <div class="col-8">{{ formDataView.topic }}</div>
+                    <div class="col-8">
+                      <div v-if="!isLoadDetail">
+                        {{ formDataView.topic }}
+                      </div>
+                      <q-skeleton v-else type="text" />
+                    </div>
                   </div>
                   <div class="row col-12 text-weight-medium">
                     <div class="col-4 text-grey-6">
@@ -383,18 +405,29 @@ watch(
                           : "รายละเอียดความก้าวหน้า"
                       }}
                     </div>
-                    <div class="col-8">{{ formDataView.reason }}</div>
+                    <div class="col-8">
+                      <div v-if="!isLoadDetail">{{ formDataView.reason }}</div>
+                      <q-skeleton v-else type="text" />
+                    </div>
                   </div>
                   <div
                     class="row col-12 text-weight-medium"
                     v-if="type !== 'capacity' && type !== 'development'"
                   >
                     <div class="col-4 text-grey-6">คะแนน</div>
-                    <div class="col-8">{{ formDataView.score }}</div>
+                    <div class="col-8">
+                      <div v-if="!isLoadDetail">{{ formDataView.score }}</div>
+                      <q-skeleton v-else type="text" />
+                    </div>
                   </div>
                   <div class="row col-12 text-weight-medium">
                     <div class="col-4 text-grey-6">ผู้สร้าง</div>
-                    <div class="col-8">{{ formDataView.createdFullName }}</div>
+                    <div class="col-8">
+                      <div v-if="!isLoadDetail">
+                        {{ formDataView.createdFullName }}
+                      </div>
+                      <q-skeleton v-else type="text" />
+                    </div>
                   </div>
 
                   <div
@@ -422,6 +455,7 @@ watch(
                         </div>
                         <div class="col-12">
                           <q-input
+                            v-if="!isLoadDetail"
                             outlined
                             dense
                             :readonly="
@@ -437,6 +471,7 @@ watch(
                             hide-bottom-space
                             :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
                           ></q-input>
+                          <q-skeleton v-else type="QInput" height="150px" />
                         </div>
 
                         <div
@@ -475,6 +510,7 @@ watch(
                         </div>
                         <div class="col-12">
                           <q-input
+                            v-if="!isLoadDetail"
                             outlined
                             dense
                             label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
@@ -490,6 +526,7 @@ watch(
                             hide-bottom-space
                             :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
                           ></q-input>
+                          <q-skeleton v-else type="QInput" height="150px" />
                         </div>
 
                         <div
@@ -527,6 +564,7 @@ watch(
                         </div>
                         <div class="col-12">
                           <q-input
+                            v-if="!isLoadDetail"
                             outlined
                             dense
                             label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
@@ -542,6 +580,7 @@ watch(
                             hide-bottom-space
                             :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
                           ></q-input>
+                          <q-skeleton v-else type="QInput" height="150px" />
                         </div>
 
                         <div
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
index 35acdb6..6874370 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -30,6 +30,8 @@ const props = defineProps({
 const route = useRoute();
 const idKpi = ref<string>(route.params.id.toLocaleString());
 
+const isLoadMain = defineModel<boolean>('isLoadMain',{required:true})
+const isLoad = ref<boolean>(false);
 const development = ref<string[]>([]); //ตัวแปรเก็บ ตัวเลือกการพัฒนา
 const reasonDevelopment70 = ref<string>(""); //อื่นๆ การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
 const reasonDevelopment20 = ref<string>(""); //อื่นๆ การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
@@ -220,11 +222,11 @@ function onSubmit() {
         selectTypeYear: formData.year ? formData.year.toString() : null,
         selectTypeId: projectName.value ? projectName.value.id : null,
       };
-      showLoader();
+      isLoadMain.value = true
       http[id.value ? "put" : "post"](url, body)
         .then((res) => {
-          success($q, "บันทึกข้อมูลสำเร็จ");
           close();
+          success($q, "บันทึกข้อมูลสำเร็จ");
         })
         .catch((e) => {
           messageError($q, e);
@@ -305,7 +307,7 @@ watch(
   () => id.value,
   (i) => {
     if (i) {
-      showLoader();
+      isLoad.value = true;
       http
         .get(config.API.kpiAchievementDevelop + `/${id.value}`)
         .then(async (res) => {
@@ -342,13 +344,14 @@ watch(
             )
               ? data.reasonDevelopment10
               : "";
+            isLoad.value = false;
           }, 500);
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(() => {
-          hideLoader();
+          isLoad.value = false;
         });
     }
   }
@@ -367,6 +370,7 @@ watch(
           <div class="row q-col-gutter-sm">
             <div class="col-3">
               <q-select
+                v-if="!isLoad"
                 class="inputgreen"
                 outlined
                 dense
@@ -379,9 +383,11 @@ watch(
                 v-model="choice"
               >
               </q-select>
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
             <div class="col-3" v-if="choice == 'PROJECT'">
               <datepicker
+                v-if="!isLoad"
                 menu-class-name="modalfix"
                 v-model="formData.year"
                 :locale="'th'"
@@ -419,9 +425,11 @@ watch(
                   </q-input>
                 </template>
               </datepicker>
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
             <div class="col-3" v-if="choice == 'PROJECT'">
               <q-select
+                v-if="!isLoad"
                 outlined
                 dense
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
@@ -446,9 +454,11 @@ watch(
                   </q-item>
                 </template>
               </q-select>
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 v-model="formData.name"
                 outlined
                 dense
@@ -459,6 +469,7 @@ watch(
                 label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
               >
               </q-input>
+              <q-skeleton v-else type="QInput" height="40px" />
             </div>
             <div class="col-12">
               <span class="text-weight-medium">วิธีการพัฒนา</span>
@@ -469,6 +480,7 @@ watch(
                   >70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</span
                 >
                 <q-option-group
+                  v-if="!isLoad"
                   class="check_box q-mt-sm"
                   keep-color
                   color="primary"
@@ -477,16 +489,30 @@ watch(
                   :options="projectTechniquesOp1"
                   type="checkbox"
                 />
+
+                <q-item
+                  v-else
+                  class="q-pa-none"
+                  style="max-width: 300px; height: 30px"
+                  v-for="item in 11"
+                >
+                  <q-item-section>
+                    <q-skeleton type="text" />
+                  </q-item-section>
+                </q-item>
+
                 <div class="row q-pb-md" v-if="checkOtherBox11">
                   <div class="offset-4 col-8 q-mt-sm relative-position">
                     <div class="other_custom_input">
                       <q-input
+                        v-if="!isLoad"
                         v-model="reasonDevelopment70"
                         dense
                         outlined
                         class="inputgreen"
                         label="กรุณาระบุ"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="40px" />
                     </div>
                   </div>
                 </div>
@@ -496,6 +522,7 @@ watch(
                   >20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)</span
                 >
                 <q-option-group
+                  v-if="!isLoad"
                   class="check_box q-mt-sm"
                   keep-color
                   color="primary"
@@ -504,16 +531,28 @@ watch(
                   :options="projectTechniquesOp2"
                   type="checkbox"
                 />
+                <q-item
+                  v-else
+                  class="q-pa-none"
+                  style="max-width: 300px; height: 30px"
+                  v-for="item in 5"
+                >
+                  <q-item-section>
+                    <q-skeleton type="text" />
+                  </q-item-section>
+                </q-item>
                 <div class="row q-pb-md" v-if="checkOtherBox12">
                   <div class="offset-4 col-8 q-mt-sm relative-position">
                     <div class="other_custom_input">
                       <q-input
+                        v-if="!isLoad"
                         v-model="reasonDevelopment20"
                         dense
                         outlined
                         class="inputgreen"
                         label="กรุณาระบุ"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="40px" />
                     </div>
                   </div>
                 </div>
@@ -521,6 +560,7 @@ watch(
               <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                 <span class="text-weight-medium">10 การฝึกอบรมอื่นๆ</span>
                 <q-option-group
+                  v-if="!isLoad"
                   class="check_box q-mt-sm"
                   keep-color
                   color="primary"
@@ -529,16 +569,28 @@ watch(
                   :options="projectTechniquesOp3"
                   type="checkbox"
                 />
+                <q-item
+                  v-else
+                  class="q-pa-none"
+                  style="max-width: 300px; height: 30px"
+                  v-for="item in 7"
+                >
+                  <q-item-section>
+                    <q-skeleton type="text" />
+                  </q-item-section>
+                </q-item>
                 <div class="row q-pb-md" v-if="checkOtherBox13">
                   <div class="offset-4 col-8 q-mt-sm relative-position">
                     <div class="other_custom_input">
                       <q-input
+                        v-if="!isLoad"
                         v-model="reasonDevelopment10"
                         dense
                         outlined
                         class="inputgreen"
                         label="กรุณาระบุ"
                       ></q-input>
+                      <q-skeleton v-else type="QInput" height="40px" />
                     </div>
                   </div>
                 </div>
@@ -546,6 +598,7 @@ watch(
             </div>
             <div class="col-12">
               <q-input
+                v-if="!isLoad"
                 label="เป้าหมายการนำไปพัฒนางาน"
                 v-model="formData.target"
                 outlined
@@ -556,6 +609,7 @@ watch(
                 lazy-rules
                 hide-bottom-space
               ></q-input>
+              <q-skeleton v-else type="QInput" height="150px" />
             </div>
             <div class="col-12">
               <q-card bordered>
@@ -573,6 +627,7 @@ watch(
                   </div>
                   <div class="col-8">
                     <q-input
+                      v-if="!isLoad"
                       class="inputgreen"
                       v-model="formData.achievement10"
                       outlined
@@ -582,6 +637,7 @@ watch(
                       lazy-rules
                       hide-bottom-space
                     ></q-input>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
                 <q-separator />
@@ -591,6 +647,7 @@ watch(
                   </div>
                   <div class="col-8">
                     <q-input
+                      v-if="!isLoad"
                       class="inputgreen"
                       v-model="formData.achievement5"
                       outlined
@@ -600,6 +657,7 @@ watch(
                       lazy-rules
                       hide-bottom-space
                     ></q-input>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
                 <q-separator />
@@ -609,6 +667,7 @@ watch(
                   </div>
                   <div class="col-8">
                     <q-input
+                      v-if="!isLoad"
                       class="inputgreen"
                       v-model="formData.achievement0"
                       outlined
@@ -618,6 +677,7 @@ watch(
                       lazy-rules
                       hide-bottom-space
                     ></q-input>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </q-card>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
index 1ba8e29..93e38fd 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -10,6 +10,8 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const store = useKpiDataStore();
 const mixin = useCounterMixin();
@@ -27,6 +29,8 @@ const modal = defineModel<boolean>("modal", { required: true });
 const filterKeyword = ref<string>("");
 const rows = ref<any[]>([]);
 
+const isLoad = ref<boolean>(false);
+
 const visibleColumns = ref<string[]>([
   "commandName",
   "agency",
@@ -164,18 +168,19 @@ function close() {
 
 /** ดึงข้อมูล */
 function getData() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.orgAssistance(store.dataEvaluation.profileId))
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -197,6 +202,7 @@ watch(
         <div class="row">
           <div class="col-12">
             <d-table
+              v-if="!isLoad"
               ref="table"
               :columns="columns"
               :rows="rows"
@@ -239,6 +245,7 @@ watch(
                 </q-tr>
               </template>
             </d-table>
+            <SkeletonTable v-else :columns="columns" />
           </div>
         </div>
       </q-card-section>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index 74742e4..f78de2c 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -15,6 +15,8 @@ import DialogViewInfo from "@/modules/08_KPI/components/Tab/Dialog/DialogViewInf
 import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const store = useKpiDataStore();
 const { dialogRemove, showLoader, hideLoader, messageError, success } =
@@ -25,6 +27,7 @@ const title = defineModel<string>("title", { required: true });
 const rows = defineModel<any>("data", { required: true });
 const numpage = defineModel<number>("page", { required: true });
 
+const isLoad = defineModel<boolean>('isLoad',{required:true})
 const props = defineProps({
   fetchList: { type: Function, required: true },
 });
@@ -136,7 +139,7 @@ async function onEvaluate() {
 function onDelete(id: string) {
   dialogRemove($q, async () => {
     try {
-      showLoader();
+      isLoad.value = true
       const url =
         numpage.value === 1
           ? config.API.kpiAchievement("planned") + `/${id}`
@@ -151,7 +154,6 @@ function onDelete(id: string) {
     } catch (err) {
       messageError($q, err);
     } finally {
-      hideLoader();
     }
   });
 }
@@ -241,7 +243,9 @@ const isEditStep3 = computed(() => {
     </q-card-section>
     <q-separator />
     <q-card-section class="q-pa-sm">
+      
       <d-table
+      v-if="!isLoad"
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -460,6 +464,7 @@ const isEditStep3 = computed(() => {
           </div>
         </template>
       </d-table>
+      <SkeletonTable v-else :columns="columns"/>
     </q-card-section>
   </q-card>
 
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index 15cbbe1..f16af00 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -22,6 +22,8 @@ import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Co
 import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
 import DialogCompetncyByRow from "@/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const modalLevel = ref<boolean>(false);
 const modalCompetncyByRow = ref<boolean>(false);
 const dataCompetncyByRow = ref<any[]>([]);
@@ -123,6 +125,7 @@ const visibleColumns = ref<string[]>(
 const typeCompetency = ref<string>("");
 
 const rows = ref<any>([]);
+const isLoad = ref<any>([]);
 const lists = ref<any>([]);
 const modalProgress = ref<boolean>(false);
 const modalProblem = ref<boolean>(false);
@@ -161,9 +164,11 @@ function getData(type: string) {
     .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
     .then(async (res) => {
       const data = res.data.result.data;
+      isLoad.value[type] = data ? true : false;
       rows.value[type] = data;
       lists.value = await lists.value.filter((x: any) => x.type != type);
       lists.value.push({ type: type, data });
+      isLoad.value[type] = false;
     })
     .catch((e) => {
       messageError($q, e);
@@ -232,7 +237,7 @@ function onEdit(data: FormCapacityList, type: string) {
  */
 function onDelete(id: string, type: string) {
   dialogRemove($q, () => {
-    showLoader();
+    isLoad.value[type] = true;
     http
       .delete(config.API.kpiUserCapacity + `/${id}`)
       .then((res) => {
@@ -293,7 +298,12 @@ function onLevel(num: number, list: any) {
 }
 
 watch(
-  () => [store.dataEvaluation.posTypeName, store.dataEvaluation.posExecutiveName, store.dataEvaluation.position, store.dataEvaluation.posLevelName], // ตรวจจับค่า posTypeName และ posExecutiveName
+  () => [
+    store.dataEvaluation.posTypeName,
+    store.dataEvaluation.posExecutiveName,
+    store.dataEvaluation.position,
+    store.dataEvaluation.posLevelName,
+  ], // ตรวจจับค่า posTypeName และ posExecutiveName
   (newValue) => {
     if (!newValue) return; // ถ้ายังไม่มีค่า ไม่ต้องทำอะไร
     const posTypeName = newValue[0];
@@ -326,26 +336,25 @@ watch(
 
     competencyType.value =
       position === "ผู้ตรวจราชการกรุงเทพมหานคร" || position === "ผู้ตรวจราชการ"
-      ? competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "INSPECTOR"
-        )
-      : posExecutiveName === "ผู้อำนวยการเขต"
-      ? competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "DIRECTOR"
-        )
-      : posTypeName === "อำนวยการ" ||
-        posTypeName === "บริหาร" ||
-        (posTypeName === "ทั่วไป" &&
-          posLevelName === "อาวุโส" &&
-          posExecutiveName != null) ||
-        (posTypeName === "วิชาการ" &&
-          posExecutiveName != null)
-      ? competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "EXECUTIVE"
-        )
-      : competencyTypeList.filter(
-          (x: DataOptions) => x.id === "HEAD" || x.id === "GROUP"
-        );
+        ? competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "INSPECTOR"
+          )
+        : posExecutiveName === "ผู้อำนวยการเขต"
+        ? competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "DIRECTOR"
+          )
+        : posTypeName === "อำนวยการ" ||
+          posTypeName === "บริหาร" ||
+          (posTypeName === "ทั่วไป" &&
+            posLevelName === "อาวุโส" &&
+            posExecutiveName != null) ||
+          (posTypeName === "วิชาการ" && posExecutiveName != null)
+        ? competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "EXECUTIVE"
+          )
+        : competencyTypeList.filter(
+            (x: DataOptions) => x.id === "HEAD" || x.id === "GROUP"
+          );
 
     for (let index = 0; index < competencyType.value.length; index++) {
       const element = competencyType.value[index];
@@ -393,6 +402,7 @@ watch(
       </q-card-section>
       <q-card-section class="q-pa-sm">
         <d-table
+          v-if="!isLoad[item.id]"
           ref="table"
           :columns="columns"
           :rows="rows[item.id]"
@@ -624,6 +634,7 @@ watch(
             </div>
           </template>
         </d-table>
+        <SkeletonTable v-else :columns="columns" />
       </q-card-section>
     </q-card>
   </div>
diff --git a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
index b8b9e6b..42332cd 100644
--- a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
@@ -13,6 +13,8 @@ import DialogEvalutionDevelop from "@/modules/08_KPI/components/Tab/DialogEvalua
 import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const store = useKpiDataStore();
 const route = useRoute();
 const evaluationId = ref<string>(route.params.id.toString());
@@ -38,15 +40,16 @@ const isUpdate = defineModel("isUpdate", {
   default: false,
 });
 
+const isLoad = ref<boolean>(false);
 const modalProgress = ref<boolean>(false);
 const modalProblem = ref<boolean>(false);
 const type = ref<string>("");
 const idList = ref<string>("");
 const isEditStep1 = computed(() => {
   return (
-    (store.dataEvaluation.evaluationStatus === "NEW" &&
-      store.rolePerson === "USER" &&
-      store.tabMain === "1")
+    store.dataEvaluation.evaluationStatus === "NEW" &&
+    store.rolePerson === "USER" &&
+    store.tabMain === "1"
   );
 });
 
@@ -148,6 +151,7 @@ function onEdit(id: string) {
 
 /** ดึงข้อมูลพัฒนา */
 function getDevelop() {
+  isLoad.value = true;
   http
     .get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -159,6 +163,7 @@ function getDevelop() {
         0
       );
 
+      isLoad.value = false;
       store.devScoreVal =
         data.length !== 0 ? totalSummary / rows.value.length : 0;
     });
@@ -173,7 +178,7 @@ function onEvaluate() {
  */
 function onDelete(id: string) {
   dialogRemove($q, () => {
-    showLoader();
+    isLoad.value = true;
     http
       .delete(config.API.kpiAchievementDevelop + `/${id}`)
       .then((res) => {
@@ -182,10 +187,9 @@ function onDelete(id: string) {
       })
       .catch((e) => {
         messageError($q, e);
+        isLoad.value = false;
       })
-      .finally(() => {
-        hideLoader();
-      });
+      .finally(() => {});
   });
 }
 
@@ -244,6 +248,7 @@ onMounted(() => {
     </q-card-section>
     <q-card-section class="q-pa-sm">
       <d-table
+        v-if="!isLoad"
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -341,7 +346,11 @@ onMounted(() => {
                   dense
                   @click="openPopupProgress(props.row.id)"
                 >
-                  <q-tooltip>{{store.tabMain == '3' ? `บันทึกเหตุการณ์/พฤติกรรม/เหตุผล` :'บันทึกเหตุการณ์/พฤติกรรม'}}</q-tooltip>
+                  <q-tooltip>{{
+                    store.tabMain == "3"
+                      ? `บันทึกเหตุการณ์/พฤติกรรม/เหตุผล`
+                      : "บันทึกเหตุการณ์/พฤติกรรม"
+                  }}</q-tooltip>
                 </q-btn>
               </div>
 
@@ -498,6 +507,8 @@ onMounted(() => {
           </div>
         </template>
       </d-table>
+
+      <SkeletonTable v-else :columns="columns" />
     </q-card-section>
   </q-card>
 
@@ -505,6 +516,7 @@ onMounted(() => {
     v-model:modal="modalDevelop"
     v-model:id="idEditDevelop"
     :get-all="getDevelop"
+    v-model:isLoadMain="isLoad"
   />
 
   <DialogEvalutionDevelop
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 9bfd689..84a7f25 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -66,6 +66,11 @@ const commanderHighId = ref<any>(null); // ตัวแปรเก็บ id ผ
 
 const imgProfile = ref<string>(""); // ตัวแปรเก็บรูปโปรไฟล์
 
+/** ตัวแปรโหลด */
+const isLoad = ref<boolean>(false);
+const isLoadCommander = ref<boolean>(false);
+const isLoadAvatar = ref<boolean>(false); // เช็คโหลดรูปโปร์ไฟล์
+
 const formProfile = reactive<FormProfile>({
   fullName: "",
   position: "",
@@ -95,7 +100,10 @@ async function fetchEvaluation() {
 }
 
 async function getAvatar(id: string) {
+  isLoadAvatar.value = true;
+
   await http
+
     .get(config.API.orgCheckAvatar(id))
     .then(async (res) => {
       const data = await res.data.result;
@@ -105,6 +113,7 @@ async function getAvatar(id: string) {
     })
     .catch((e) => {
       messageError($q, e);
+      isLoadAvatar.value = false;
     });
 }
 
@@ -115,6 +124,7 @@ async function fetchProfile(id: string, avatarName: string) {
     .then(async (res) => {
       store.dataEvaluation.avartar = res.data.downloadUrl;
       imgProfile.value = res.data.downloadUrl;
+      isLoadAvatar.value = false;
     });
 }
 
@@ -162,6 +172,7 @@ function onSubmit() {
 
 /** ดึงข้อมูล ผู้ประเมิน */
 async function getOrgOp() {
+  isLoadCommander.value = true;
   http
     .get(config.API.Kpiorg)
     .then((res) => {
@@ -199,9 +210,11 @@ async function getOrgOp() {
         .find(
           (i: EvaOptionType) => i.id == store.dataEvaluation.commanderHighId
         );
+      isLoadCommander.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoadCommander.value = false;
     })
     .finally(() => {});
 }
@@ -453,8 +466,9 @@ const evaluator = ref<EvaluatorType>({
  * ข้อมูลของผู้ประเมิน
  * @param id ข้อมูลของผู้ประเมิน
  */
+const isLoadModal = ref<boolean>(false);
 async function fetchProfileEvaluator(id: string) {
-  showLoader();
+  isLoadModal.value = true;
   http
     .get(config.API.orgPosition + `/${id}`)
     .then(async (res) => {
@@ -467,12 +481,13 @@ async function fetchProfileEvaluator(id: string) {
       evaluator.value.isPosmasterAct = data.isPosmasterAct;
       evaluator.value.posmasterAct = data.posmasterAct;
       evaluator.value.org = await findOrgNameHtml(data);
+      isLoadModal.value = false;
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadModal.value = false;
     });
 }
 
@@ -654,7 +669,6 @@ function onResize(size: { width: any; height: any }) {
 }
 
 onMounted(async () => {
-  showLoader();
   store.isUpdate = false;
   await getAll();
 });
@@ -689,7 +703,8 @@ onMounted(async () => {
         <q-card bordered flat class="relative-position">
           <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
             <q-avatar :size="sizeImg">
-              <q-img :src="imgProfile" v-if="imgProfile !== ''" />
+              <q-skeleton type="circle" size="100px" v-if="isLoadAvatar" />
+              <q-img :src="imgProfile" v-else-if="imgProfile !== ''" />
               <q-img src="@/assets/avatar_user.jpg" v-else />
             </q-avatar>
           </div>
@@ -699,7 +714,8 @@ onMounted(async () => {
             style="left: 2%; top: 50%; transform: translateY(-50%)"
           >
             <q-avatar :size="sizeImg">
-              <q-img :src="imgProfile" v-if="imgProfile !== ''" />
+              <q-skeleton type="circle" size="100px" v-if="isLoadAvatar" />
+              <q-img :src="imgProfile" v-else-if="imgProfile !== ''" />
               <q-img src="@/assets/avatar_user.jpg" v-else />
             </q-avatar>
           </div>
@@ -1028,7 +1044,7 @@ onMounted(async () => {
         />
         <q-separator />
         <q-card-section>
-          <div class="column q-gutter-sm">
+          <div v-if="!isLoadCommander" class="column q-gutter-sm">
             <div class="row">
               <div class="col-10">
                 <q-select
@@ -1179,6 +1195,18 @@ onMounted(async () => {
               </div>
             </div>
           </div>
+          <div
+            v-else
+            class="row q-col-gutter-xs items-center"
+            v-for="item in 3"
+          >
+            <div class="col-10">
+              <q-skeleton type="QInput" height="40px" />
+            </div>
+            <div class="col-2 q-pa-sm text-right">
+              <q-skeleton type="QRadio" />
+            </div>
+          </div>
         </q-card-section>
         <q-separator />
         <q-card-actions
@@ -1219,23 +1247,42 @@ onMounted(async () => {
               <div class="col-3">ตำแหน่งทางการบริหาร</div>
               <div class="col-3">สังกัด</div>
             </div>
-            <div class="row">
+            <div class="row q-col-gutter-x-sm">
               <div class="col-3">
-                {{ evaluator.position ? evaluator.position : "-" }}
+                <div v-if="!isLoadModal">
+                  {{ evaluator.position ? evaluator.position : "-" }}
+                </div>
+
+                <q-skeleton v-else type="text" />
               </div>
               <div class="col-3">
-                {{ evaluator.posTypeName ? evaluator.posTypeName : "-" }}
-                {{
-                  evaluator.posLevelName ? ` (${evaluator.posLevelName})` : "-"
-                }}
+                <div v-if="!isLoadModal">
+                  {{ evaluator.posTypeName ? evaluator.posTypeName : "-" }}
+                  {{
+                    evaluator.posLevelName
+                      ? ` (${evaluator.posLevelName})`
+                      : "-"
+                  }}
+                </div>
+
+                <q-skeleton v-else type="text" />
               </div>
               <div class="col-3">
-                {{
-                  evaluator.posExecutiveName ? evaluator.posExecutiveName : "-"
-                }}
+                <div v-if="!isLoadModal">
+                  {{
+                    evaluator.posExecutiveName
+                      ? evaluator.posExecutiveName
+                      : "-"
+                  }}
+                </div>
+
+                <q-skeleton v-else type="text" />
               </div>
               <div class="col-3 text-html">
-                {{ evaluator.org ? evaluator.org : "-" }}
+                <div v-if="!isLoadModal">
+                  {{ evaluator.org ? evaluator.org : "-" }}
+                </div>
+                <q-skeleton v-else type="text" />
               </div>
             </div>
 
@@ -1243,9 +1290,12 @@ onMounted(async () => {
               <div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
             </div>
             <div class="row">
+              <div v-if="isLoadModal" class="col-12">
+                <q-skeleton type="text" />
+              </div>
               <div
                 class="col-12"
-                v-if="evaluator.isPosmasterAct"
+                v-else-if="evaluator.isPosmasterAct"
                 v-for="(data, index) in evaluator.posmasterAct"
                 :key="index"
               >
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 6a62d27..7bc5087 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -21,6 +21,7 @@ import type {
 } from "@/modules/08_KPI/interface/response/index";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -30,6 +31,8 @@ const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
   mixin;
 
 /** Table*/
+const isLoadOp = ref<boolean>(false);
+const isLoad = ref<boolean>(false);
 const rows = ref<MainListKpi[]>([]);
 const visibleColumns = ref<string[]>([
   "createdAt",
@@ -161,7 +164,7 @@ const pagination = ref({
  */
 async function fetchRoundOption(type: string) {
   const y = type === "main" ? year.value : yearDialog.value;
-  showLoader();
+  isLoadOp.value = true;
   await http
     .get(
       config.API.kpiPeriod + `?page=${1}&pageSize=${10}&keyword=${""}&year=${y}`
@@ -196,7 +199,7 @@ async function fetchRoundOption(type: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoadOp.value = false;
     });
 }
 
@@ -204,7 +207,7 @@ async function fetchRoundOption(type: string) {
  *  fetch รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
  */
 async function fetchList() {
-  showLoader();
+  isLoad.value = true
   let queryParams = {
     page: formQuery.page,
     pageSize: formQuery.pageSize,
@@ -222,13 +225,13 @@ async function fetchList() {
       total.value = data.total;
       totalList.value = Math.ceil(data.total / formQuery.pageSize);
       rows.value = data.data;
+      isLoad.value = false
     })
     .catch((err) => {
+      isLoad.value = false
       messageError($q, err);
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /** เลือกรอบการประเมิน */
@@ -520,6 +523,7 @@ onMounted(async () => {
                 <div class="items-center col-12 row q-col-gutter-sm">
                   <div class="col-xs-12 col-md-2">
                     <q-select
+                      v-if="!isLoadOp"
                       v-model="round"
                       outlined
                       label="รอบการประเมิน"
@@ -531,6 +535,7 @@ onMounted(async () => {
                       map-options
                       @update:model-value="changRound"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" bordered />
                   </div>
 
                   <div class="col-xs-12 col-md-3">
@@ -607,6 +612,7 @@ onMounted(async () => {
 
             <div class="col-12">
               <d-table
+              v-if="!isLoad"
                 ref="table"
                 :columns="columns"
                 :rows="rows"
@@ -677,6 +683,7 @@ onMounted(async () => {
                   ></q-pagination>
                 </template>
               </d-table>
+              <SkeletonTable v-else :columns="columns" />
             </div>
           </div>
         </q-card>
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
index f74d535..81f91c0 100644
--- a/src/modules/08_KPI/views/mainEvaluator.vue
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -93,8 +93,9 @@ const maxPage = ref<number>(1);
  * ดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
  * @param type
  */
+const isLoadOp = ref<boolean>(false);
 async function fetchRoundOption() {
-  showLoader();
+  isLoadOp.value = true;
   await http
     .get(
       config.API.kpiPeriod +
@@ -120,18 +121,19 @@ async function fetchRoundOption() {
         store.formQuery.round = roundOp.value[0].id;
         await fetchList();
       }
+      isLoadOp.value = false;
     })
     .catch((err) => {
       messageError($q, err);
+      isLoadOp.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /** ดึงข้อมูล list */
+const isLoad = ref<boolean>(false)
 async function fetchList() {
-  showLoader();
+  isLoad.value = true
   const body = {
     page: store.formQuery.page,
     pageSize: store.formQuery.pageSize,
@@ -158,13 +160,13 @@ async function fetchList() {
       maxPage.value = Math.ceil(data.total / store.formQuery.pageSize);
       totalList.value = data.total;
       dataListMain.value = data.data;
+      isLoad.value = false
     })
     .catch((err) => {
       messageError($q, err);
+      isLoad.value = false
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /** เลือกรอบการประเมิน */
@@ -221,7 +223,7 @@ onMounted(async () => {
 
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
+          <div class="items-center col-12 row q-gutter-sm q-mb-sm">
             <datepicker
               class="col-md-1 col-xs-12"
               v-model="store.yearRound"
@@ -260,6 +262,7 @@ onMounted(async () => {
               </template>
             </datepicker>
             <q-select
+              v-if="!isLoadOp"
               class="col-md-2 col-xs-12"
               v-model="store.formQuery.round"
               outlined
@@ -272,7 +275,12 @@ onMounted(async () => {
               map-options
               @update:model-value="changRound"
             />
-
+            <q-skeleton
+              v-else
+              class="col-md-2 col-xs-12"
+              type="QInput"
+              height="40px"
+            />
             <q-space />
 
             <q-input
@@ -342,6 +350,7 @@ onMounted(async () => {
                     :maxPage="maxPage"
                     :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -355,6 +364,7 @@ onMounted(async () => {
                     :maxPage="maxPage"
                     :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -368,6 +378,7 @@ onMounted(async () => {
                     :maxPage="maxPage"
                     :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -381,6 +392,7 @@ onMounted(async () => {
                     :maxPage="maxPage"
                     :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
 
@@ -394,6 +406,7 @@ onMounted(async () => {
                     :maxPage="maxPage"
                     :updatePagination="updatePagination"
                     :fetchList="fetchList"
+                    :is-load="isLoad"
                   />
                 </q-tab-panel>
               </q-tab-panels>
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 4e84434..5456ee0 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -31,6 +31,7 @@ const {
   success,
 } = mixin;
 
+const isLoad = ref<boolean>(false);
 const isGuarantor = ref<boolean>(false);
 const isGov = ref<boolean>(false);
 const isStatus = ref<string>("");
@@ -287,96 +288,6 @@ function changeStartDate(type: string) {
   }
 }
 
-function onOpenReturn() {
-  dialogReturn.value = true;
-}
-
-async function onDownload(type: string) {
-  showLoader();
-  await http
-    .get(config.API.developmentScholarshipReport + `/${id.value}`)
-    .then(async (res) => {
-      const dataList = res.data.result;
-      await genReport(
-        dataList,
-        "ฟอร์มรายงานตัวกลับเข้ารับราชการ(ต้นแบบ)",
-        type
-      );
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function clickUpload(file: any) {
-  const fileName = { fileName: file.name };
-
-  dialogConfirm(
-    $q,
-    async () => {
-      const selectedFile = file;
-      const formdata = new FormData();
-      formdata.append("file", selectedFile);
-      await http
-        .post(
-          config.API.developmentSalaryFile(
-            "ระบบพัฒนาบุคคล",
-            "ฟอร์มรายงานตัวกลับเข้ารับราชการ",
-            id.value
-          ),
-          {
-            replace: false,
-            fileList: fileName,
-          }
-        )
-        .then(async (res) => {
-          const foundKey: string | undefined = Object.keys(res.data).find(
-            (key) =>
-              res.data[key]?.fileName !== undefined &&
-              res.data[key]?.fileName !== ""
-          );
-          foundKey &&
-            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
-        })
-        .catch((err) => {
-          messageError($q, err);
-        });
-    },
-    "ยืนยันการอัปโหลดไฟล์",
-    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
-  );
-}
-
-/**
- * ฟังก์ชั่นสำหรับอัปโหลดไฟล์เอกสารหลักฐาน
- */
-async function uploadFileDoc(uploadUrl: string, file: any) {
-  const Data = new FormData();
-  Data.append("file", documentFile.value);
-  showLoader();
-  await axios
-    .put(uploadUrl, file, {
-      headers: {
-        "Content-Type": file.type,
-      },
-    })
-    .then((res) => {
-      success($q, "อัปโหลดไฟล์สำเร็จ");
-      fetchDataDetail(id.value);
-      getFile();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-      documentFile.value = null;
-    });
-}
-
 function getFile() {
   http
     .get(
@@ -418,11 +329,13 @@ function downloadFile(file: any) {
 }
 
 function fetchDataDetail(id: string) {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.developmentScholarship + `/${id}`)
     .then((res) => {
       const data: DataSholarship = res.data.result;
+      isGov.value = data.citizenId ? true : false;
+
       formBody.rank = data.rank;
       formBody.prefix = data.prefix;
       formBody.firstName = data.firstName;
@@ -508,14 +421,14 @@ function fetchDataDetail(id: string) {
         : "-";
       dataGuarantor.org = data.guarantorOrg ? data.guarantorOrg : "-";
       isStatus.value = data.status;
-      isGov.value = data.citizenId ? true : false;
       isGuarantor.value = data.guarantorCitizenId ? true : false;
+      isLoad.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false;
     });
 }
 
@@ -543,11 +456,11 @@ onMounted(async () => {
       </div>
 
       <q-card flat bordered class="col-12 q-pa-md">
-        <q-toolbar class="q-px-none q-pb-sm">
+        <q-toolbar class="q-px-none q-pb-sm" v-if="fileList">
           <div class="row q-col-gutter-x-sm full-width">
             <q-space />
 
-            <div v-if="fileList" class="col-2 text-right">
+            <div class="col-2 text-right">
               <q-btn
                 size="12px"
                 flat
@@ -568,54 +481,71 @@ onMounted(async () => {
             ข้อมูลราชการ
           </div>
           <div class="col-12"><q-separator /></div>
-          <div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
+          <div class="row col-12 q-col-gutter-md q-pa-md">
             <div class="col-xs-12 col-md-6">
               <div class="row q-col-gutter-md">
                 <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
                 <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.firstName ? dataPerson.name : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
                 <div class="col-4 text-grey">ตำแหน่งในสายงาน</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.position ? dataPerson.position : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
                 <div class="col-4 text-grey">ตำแหน่งประเภท</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.type ? dataPerson.type : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
               </div>
             </div>
             <div class="col-xs-12 col-md-6">
               <div class="row q-col-gutter-md">
                 <div class="col-4 text-grey">ระดับ</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.level ? dataPerson.level : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
                 <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
-                <div class="col-8 text-weight-medium">
+                <div v-if="!isLoad" class="col-8 text-weight-medium">
                   {{ dataPerson.positionSide ? dataPerson.positionSide : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
                 <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                <div class="col-8 text-weight-medium text-html">
+                <div v-if="!isLoad" class="col-8 text-weight-medium text-html">
                   {{ dataPerson.org ? dataPerson.org : "-" }}
                 </div>
+                <div v-else class="col-8">
+                  <q-skeleton type="text" />
+                </div>
               </div>
             </div>
           </div>
-          <div class="row col-12 q-pa-md" v-else>
-            <q-banner class="bg-grey-3 text-black col-12 text-center">
-              เลือกข้าราชการ
-            </q-banner>
-          </div>
         </q-card>
 
         <div class="row q-col-gutter-md q-mt-sm">
           <div class="col-12 col-md-9">
             <q-select
+              v-if="!isLoad"
               class="inputgreen"
               readonly
               dense
@@ -634,6 +564,7 @@ onMounted(async () => {
                   !!val || `${'กรุณาเลือกประเภททุน'}`,
               ]"
             />
+            <q-skeleton v-else type="QInput" height="40px" />
           </div>
           <div
             class="col-12 col-md-3"
@@ -643,6 +574,7 @@ onMounted(async () => {
             "
           >
             <q-select
+              v-if="!isLoad"
               readonly
               dense
               outlined
@@ -661,9 +593,10 @@ onMounted(async () => {
                   !!val || `${'กรุณาเลือกประเภททุน'}`,
               ]"
             />
+            <q-skeleton v-else type="QInput" height="40px" />
           </div>
 
-          <div class="col-12">
+          <div v-if="!isLoad" class="col-12">
             <q-radio
               disable
               v-model="formBody.planType"
@@ -684,11 +617,18 @@ onMounted(async () => {
               class="q-pl-sm"
             />
           </div>
+          <div v-else class="col-12">
+            <div class="row q-gutter-sm">
+              <q-skeleton width="90px" />
+              <q-skeleton width="90px" />
+            </div>
+          </div>
 
           <div class="col-12">
             <div class="row q-col-gutter-md">
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.scholarshipYear"
                   :locale="'th'"
                   autoApply
@@ -733,9 +673,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <q-select
+                  v-if="!isLoad"
                   readonly
                   dense
                   outlined
@@ -758,12 +700,14 @@ onMounted(async () => {
                     },
                   ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div
                 class="col-12 col-md-3"
                 v-if="formBody.budgetSource == 'OTHER'"
               >
                 <q-input
+                  v-if="!isLoad"
                   readonly
                   dense
                   outlined
@@ -777,9 +721,11 @@ onMounted(async () => {
                     !!val || `${'กรุณากรอกเงินอื่นๆ โปรดระบุ'}`,
                 ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <q-input
+                  v-if="!isLoad"
                   readonly
                   dense
                   outlined
@@ -798,6 +744,7 @@ onMounted(async () => {
                     },
                   ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
             </div>
           </div>
@@ -806,6 +753,7 @@ onMounted(async () => {
             <div class="row q-col-gutter-md">
               <div class="col-12 col-md-3">
                 <q-input
+                  v-if="!isLoad"
                   readonly
                   dense
                   outlined
@@ -818,9 +766,11 @@ onMounted(async () => {
                     !!val || `${'กรุณากรอกเลขที่หนังสืออนุมัติ'}`,
                 ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.bookNoDate"
                   :locale="'th'"
                   autoApply
@@ -860,9 +810,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.bookApproveDate"
                   :locale="'th'"
                   autoApply
@@ -902,6 +854,7 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div
                 v-if="
@@ -911,6 +864,7 @@ onMounted(async () => {
                 class="col-12 col-md-2"
               >
                 <q-select
+                  v-if="!isLoad"
                   outlined
                   dense
                   label="เวลาราชการ"
@@ -924,15 +878,18 @@ onMounted(async () => {
                   map-options
                 >
                 </q-select>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-2">
                 <q-checkbox
+                  v-if="!isLoad"
                   disable
                   keep-color
                   color="primary"
                   v-model="formBody.isNoUseBudget"
                   label="ไม่ใช้งบประมาณ"
                 />
+                <q-skeleton v-else width="90px" />
               </div>
             </div>
           </div>
@@ -941,6 +898,7 @@ onMounted(async () => {
             <div class="row col-12 q-col-gutter-md">
               <div class="col-12 col-md-3">
                 <q-input
+                  v-if="!isLoad"
                   readonly
                   dense
                   outlined
@@ -954,9 +912,11 @@ onMounted(async () => {
                       !!val || `${'กรุณากรอกเลขที่สัญญา'}`,
                   ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.contractDate"
                   :locale="'th'"
                   autoApply
@@ -996,12 +956,14 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
 
               <div class="col-12">
                 <div class="row q-col-gutter-md">
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -1011,9 +973,11 @@ onMounted(async () => {
                       v-model="formBody.reportBackNo"
                       label="เลขที่หนังสือรายงานตัวกลับ"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.reportBackNoDate"
                       :locale="'th'"
                       autoApply
@@ -1049,9 +1013,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.reportBackDate"
                       :locale="'th'"
                       autoApply
@@ -1087,6 +1053,7 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </div>
@@ -1113,6 +1080,7 @@ onMounted(async () => {
                       ]"
                     /> -->
                     <q-select
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1132,9 +1100,11 @@ onMounted(async () => {
                       !!val || `${'กรุณากรอกระดับปริญญา'}`,
                   ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       readonly
                       dense
                       outlined
@@ -1148,9 +1118,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกหลักสูตรการศึกษา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       readonly
                       dense
                       outlined
@@ -1164,9 +1136,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสาขาวิชา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -1180,9 +1154,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกคณะ'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -1196,9 +1172,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสถาบันการศึกษา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -1240,9 +1218,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -1287,9 +1267,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1299,9 +1281,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.totalPeriod"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1311,9 +1295,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyPlace"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1323,9 +1309,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyTopic"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       autoApply
@@ -1363,9 +1351,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
                       readonly
@@ -1403,10 +1393,12 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -1416,9 +1408,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyCountry"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -1428,9 +1422,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyAbroadTopic"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -1470,9 +1466,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -1516,6 +1514,7 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </div>
@@ -1528,6 +1527,7 @@ onMounted(async () => {
                 <div class="row q-col-gutter-md">
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1541,9 +1541,11 @@ onMounted(async () => {
                           !!val || `กรุณากรอกหลักสูตรการฝึกอบรม`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1557,9 +1559,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสาขา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1573,9 +1577,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -1617,9 +1623,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       readonly
@@ -1664,9 +1672,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1676,9 +1686,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.totalPeriod"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1688,9 +1700,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyPlace"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1700,9 +1714,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyTopic"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       readonly
@@ -1740,9 +1756,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyEndDate"
                       :locale="'th'"
                       autoApply
@@ -1780,6 +1798,7 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </div>
@@ -1792,6 +1811,7 @@ onMounted(async () => {
                 <div class="row q-col-gutter-md">
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1805,9 +1825,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1821,9 +1843,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสาขา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1837,9 +1861,11 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       readonly
@@ -1881,9 +1907,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -1928,9 +1956,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1940,9 +1970,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.totalPeriod"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -1952,9 +1984,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyPlace"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -1964,9 +1998,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyTopic"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyStartDate"
                       :locale="'th'"
                       readonly
@@ -2004,9 +2040,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyEndDate"
                       readonly
                       :locale="'th'"
@@ -2051,10 +2089,12 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -2064,9 +2104,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyCountry"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -2076,9 +2118,11 @@ onMounted(async () => {
                       class="inputgreen"
                       v-model="formBody.studyAbroadTopic"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -2118,9 +2162,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -2158,6 +2204,7 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </div>
@@ -2214,6 +2261,7 @@ onMounted(async () => {
                       ]"
                     /> -->
                     <q-select
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -2233,10 +2281,12 @@ onMounted(async () => {
                       !!val || `${'กรุณากรอกระดับปริญญา'}`,
                   ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -2256,6 +2306,7 @@ onMounted(async () => {
                           : 'หลักสูตรการฝึกอบรม'}`,
                   ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div
@@ -2263,6 +2314,7 @@ onMounted(async () => {
                     v-if="formBody.scholarshipType !== 'TRAINING'"
                   >
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -2276,6 +2328,7 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกสาขาวิชา'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div
@@ -2283,6 +2336,7 @@ onMounted(async () => {
                     v-if="formBody.scholarshipType !== 'TRAINING'"
                   >
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -2296,10 +2350,12 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกคณะ'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       readonly
@@ -2317,10 +2373,12 @@ onMounted(async () => {
                           !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY' ? 'สถาบันการศึกษา':'หน่วยงานผู้จัด'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.startDate"
                       :locale="'th'"
                       autoApply
@@ -2366,9 +2424,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.endDate"
                       :locale="'th'"
                       autoApply
@@ -2414,9 +2474,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-6">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -2434,6 +2496,7 @@ onMounted(async () => {
                           !!val || `กรุณากรอก${formBody.scholarshipType === 'STUDY' ? 'สถานที่ไปศึกษา (เมือง/ประเทศ)':'สถานที่เข้ารับการฝึกอบรม (เมือง/ประเทศ)'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div
@@ -2441,6 +2504,7 @@ onMounted(async () => {
                     class="col-12 col-md-3"
                   >
                     <q-input
+                      v-if="!isLoad"
                       dense
                       readonly
                       outlined
@@ -2454,10 +2518,12 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอประเทศที่ไปดูงาน'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
 
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadStartDate"
                       :locale="'th'"
                       autoApply
@@ -2501,9 +2567,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <datepicker
+                      v-if="!isLoad"
                       v-model="formBody.studyAbroadEndDate"
                       :locale="'th'"
                       autoApply
@@ -2551,9 +2619,11 @@ onMounted(async () => {
                         </q-input>
                       </template>
                     </datepicker>
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                   <div class="col-12 col-md-3">
                     <q-input
+                      v-if="!isLoad"
                       dense
                       outlined
                       lazy-rules
@@ -2567,6 +2637,7 @@ onMounted(async () => {
                           !!val || `${'กรุณากรอกรวมระยะเวลาทั้งสิ้น'}`,
                       ]"
                     />
+                    <q-skeleton v-else type="QInput" height="40px" />
                   </div>
                 </div>
               </div>
@@ -2581,6 +2652,7 @@ onMounted(async () => {
             <div class="row q-col-gutter-md">
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2594,9 +2666,11 @@ onMounted(async () => {
                       !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
                   ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2610,9 +2684,11 @@ onMounted(async () => {
                       !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
                   ]"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.startDate"
                   :locale="'th'"
                   autoApply
@@ -2655,9 +2731,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.endDate"
                   :locale="'th'"
                   readonly
@@ -2697,10 +2775,12 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-md-6" v-if="$q.screen.gt.sm"></div>
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2710,9 +2790,11 @@ onMounted(async () => {
                   class="inputgreen"
                   v-model="formBody.studyPlace"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   readonly
@@ -2722,9 +2804,11 @@ onMounted(async () => {
                   class="inputgreen"
                   v-model="formBody.studyTopic"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.studyStartDate"
                   :locale="'th'"
                   readonly
@@ -2767,9 +2851,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.studyEndDate"
                   :locale="'th'"
                   autoApply
@@ -2813,9 +2899,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2825,10 +2913,12 @@ onMounted(async () => {
                   class="inputgreen"
                   v-model="formBody.totalPeriod"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-md-3" v-if="$q.screen.gt.sm"></div>
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2838,9 +2928,11 @@ onMounted(async () => {
                   class="inputgreen"
                   v-model="formBody.studyCountry"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-6">
                 <q-input
+                  v-if="!isLoad"
                   dense
                   outlined
                   lazy-rules
@@ -2850,9 +2942,11 @@ onMounted(async () => {
                   class="inputgreen"
                   v-model="formBody.studyAbroadTopic"
                 />
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.studyAbroadStartDate"
                   :locale="'th'"
                   autoApply
@@ -2890,9 +2984,11 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
               <div class="col-12 col-md-3">
                 <datepicker
+                  v-if="!isLoad"
                   v-model="formBody.studyAbroadEndDate"
                   :locale="'th'"
                   autoApply
@@ -2930,12 +3026,14 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
+                <q-skeleton v-else type="QInput" height="40px" />
               </div>
             </div>
           </div>
 
           <div class="col-12">
             <q-input
+              v-if="!isLoad"
               readonly
               outlined
               dense
@@ -2946,10 +3044,14 @@ onMounted(async () => {
               hide-bottom-space
               type="textarea"
             />
+            <q-skeleton v-else type="QInput" height="40px" />
           </div>
 
           <!-- ผู้ค้ำประกัน -->
-          <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
+          <div
+            class="col-12"
+            v-if="formBody.scholarshipType !== 'EXECUTIVE' && isGuarantor"
+          >
             <q-card bordered tyle="border: 1px solid #d6dee1">
               <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                 ข้อมูลผู้ค้ำประกัน
@@ -2962,37 +3064,61 @@ onMounted(async () => {
                 <div class="col">
                   <div class="row q-col-gutter-md">
                     <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.citizenId }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                     <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.name }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                     <div class="col-4 text-grey">ตำแหน่ง</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.position }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                     <div class="col-4 text-grey">ตำแหน่งประเภท</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.type }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                   </div>
                 </div>
                 <div class="col">
                   <div class="row q-col-gutter-md">
                     <div class="col-4 text-grey">ระดับตำแหน่ง</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.level }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                     <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
-                    <div class="col-8 text-weight-medium">
+                    <div v-if="!isLoad" class="col-8 text-weight-medium">
                       {{ dataGuarantor.positionSide }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                     <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
-                    <div class="col-8 text-weight-medium text-html">
+                    <div
+                      v-if="!isLoad"
+                      class="col-8 text-weight-medium text-html"
+                    >
                       {{ dataGuarantor.org }}
                     </div>
+                    <div v-else class="col-8">
+                      <q-skeleton type="text" />
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index ad8856d..b25beef 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -13,6 +13,8 @@ import type {
   Scholarship,
 } from "@/modules/09_scholarship/interface/index/Main";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
 const router = useRouter();
@@ -24,6 +26,7 @@ const currentPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
 
+const isLoad = ref<boolean>(false);
 const rows = ref<Scholarship[]>([]);
 const year = ref<number>(0);
 const type = ref<string>("DOMESTICE");
@@ -127,15 +130,16 @@ async function getProfileId() {
   if (dataStore.profileId) {
     profilId.value = dataStore.profileId;
   } else {
-    showLoader();
+    isLoad.value = true;
     try {
       const res = await http.get(config.API.profilePosition());
       dataStore.profileId = res.data.result.profileId;
       profilId.value = dataStore.profileId;
+      isLoad.value = false;
     } catch (e) {
       messageError($q, e);
     } finally {
-      hideLoader();
+      isLoad.value = false;
     }
   }
 
@@ -255,6 +259,7 @@ onMounted(async () => {
 
           <div>
             <d-table
+              v-if="!isLoad"
               flat
               bordered
               dense
@@ -339,6 +344,7 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
+            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>
diff --git a/src/modules/11_probation/views/mainDetail.vue b/src/modules/11_probation/views/mainDetail.vue
index 4efbad1..a663b31 100644
--- a/src/modules/11_probation/views/mainDetail.vue
+++ b/src/modules/11_probation/views/mainDetail.vue
@@ -14,6 +14,8 @@ import type {
   ProbationFormType,
 } from "@/modules/11_probation/interface/index/main";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -29,6 +31,7 @@ const profileId = ref<string>("");
 const rows = ref<ListMain[]>([]);
 const rowsData = ref<ListMain[]>([]);
 
+const isLoad = ref<boolean>(false);
 const mode = ref<boolean>($q.screen.gt.xs);
 const profileImg = ref<string>("");
 const router = useRouter();
@@ -112,7 +115,7 @@ function onResize(size: any) {
 }
 
 function getMain() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.kpiEvaluation + `/${route.params.id.toString()}`)
     // .get(config.API.profilePosition())
@@ -134,11 +137,11 @@ function getMain() {
       promises.push(getAvatar(data.profileId));
 
       await Promise.all(promises);
-      hideLoader();
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
+      isLoad.value = false;
     })
     .finally(() => {});
 }
@@ -221,22 +224,31 @@ onMounted(async () => {
         <div v-if="$q.screen.gt.xs" class="col-12">
           <q-card>
             <div class="bg-grey-1 row q-pa-sm items-center">
-              <span class="text-teal text-weight-bold text-body2">{{
-                formData.firstName
-                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
-                  : "-"
-              }}</span>
+              <span class="text-teal text-weight-bold text-body2">
+                <div v-if="!isLoad">
+                  {{
+                    formData.firstName
+                      ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                      : "-"
+                  }}
+                </div>
+                <q-skeleton v-else type="text" />
+              </span>
             </div>
             <q-resize-observer @resize="onResize" />
             <q-card-section class="q-pa-md">
               <div class="row">
-                <div class="col-2 text-center self-center">
-                  <q-avatar :size="sizeImg" rounded>
+                <div
+                  class="col-2 text-center self-center"
+                  style="display: flex; justify-content: center"
+                >
+                  <q-avatar v-if="!isLoad" :size="sizeImg" rounded>
                     <q-img
                       :src="profileImg"
                       style="border-radius: 10px; object-fit: cover"
                     />
                   </q-avatar>
+                  <q-skeleton v-else type="QRadio" size="70px" />
                 </div>
                 <div class="col-10 column justify-center no-wrap">
                   <div class="row text-grey-6">
@@ -247,7 +259,10 @@ onMounted(async () => {
                   <div class="row">
                     <div class="col-4 column">
                       <span>
-                        {{ formData.position ? formData.position : "-" }}
+                        <div v-if="!isLoad">
+                          {{ formData.position ? formData.position : "-" }}
+                        </div>
+                        <q-skeleton v-else type="text" width="90px" />
                       </span>
                       <span>
                         {{
@@ -258,16 +273,22 @@ onMounted(async () => {
                       </span>
                     </div>
                     <div class="col-4">
-                      {{
-                        formData.posTypeName
-                          ? formData.posLevelName
-                            ? `${formData.posTypeName}(${formData.posLevelName})`
-                            : formData.posTypeName
-                          : "-"
-                      }}
+                      <div v-if="!isLoad">
+                        {{
+                          formData.posTypeName
+                            ? formData.posLevelName
+                              ? `${formData.posTypeName}(${formData.posLevelName})`
+                              : formData.posTypeName
+                            : "-"
+                        }}
+                      </div>
+                      <q-skeleton v-else type="text" width="90px" />
                     </div>
                     <div class="col-4">
-                      {{ formData.org ? formData.org : "-" }}
+                      <div v-if="!isLoad">
+                        {{ formData.org ? formData.org : "-" }}
+                      </div>
+                      <q-skeleton v-else type="text" width="90px" />
                     </div>
                   </div>
                 </div>
@@ -278,21 +299,27 @@ onMounted(async () => {
         <div v-else class="col-12">
           <q-card bordered>
             <div class="bg-grey-1 row q-pa-sm items-center">
-              <span class="text-teal text-weight-bold text-body2">{{
-                formData.firstName
-                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
-                  : "-"
-              }}</span>
+              <span class="text-teal text-weight-bold text-body2">
+                <div v-if="!isLoad">
+                  {{
+                    formData.firstName
+                      ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+                      : "-"
+                  }}
+                </div>
+                <q-skeleton v-else type="text" />
+              </span>
             </div>
             <q-resize-observer @resize="onResize" />
             <q-card-section>
-              <div class="text-center q-mt-md">
-                <q-avatar :size="sizeImg" rounded>
+              <div class="text-center q-mt-md" style="display: flex;justify-content: center;">
+                <q-avatar v-if="!isLoad" :size="sizeImg" rounded>
                   <img
                     :src="profileImg"
                     style="border-radius: 10px; object-fit: cover"
                   />
                 </q-avatar>
+                <q-skeleton v-else type="QRadio" size="70px" />
               </div>
             </q-card-section>
 
@@ -302,25 +329,34 @@ onMounted(async () => {
                   <q-item-label class="text-grey-6"
                     >ตำแหน่งในสายงาน</q-item-label
                   >
-                  <q-item-label>{{
-                    formData.position ? formData.position : "-"
-                  }}</q-item-label>
+                  <q-item-label>
+                    <div v-if="!isLoad">
+                      {{ formData.position ? formData.position : "-" }}
+                    </div>
+                    <q-skeleton v-else type="text" />
+                  </q-item-label>
                 </q-item-section>
               </q-item>
               <q-item>
                 <q-item-section>
                   <q-item-label class="text-grey-6">ระดับ</q-item-label>
-                  <q-item-label>{{
-                    formData.posLevelName ? formData.posLevelName : "-"
-                  }}</q-item-label>
+                  <q-item-label>
+                    <div v-if="!isLoad">
+                      {{ formData.posLevelName ? formData.posLevelName : "-" }}
+                    </div>
+                    <q-skeleton v-else type="text" />
+                  </q-item-label>
                 </q-item-section>
               </q-item>
               <q-item>
                 <q-item-section>
                   <q-item-label class="text-grey-6">สังกัด</q-item-label>
-                  <q-item-label>{{
-                    formData.org ? formData.org : "-"
-                  }}</q-item-label>
+                  <q-item-label>
+                    <div v-if="!isLoad">
+                      {{ formData.org ? formData.org : "-" }}
+                    </div>
+                    <q-skeleton v-else type="text" />
+                  </q-item-label>
                 </q-item-section>
               </q-item>
             </q-list>
@@ -361,6 +397,7 @@ onMounted(async () => {
             </div>
             <div class="q-mt-sm">
               <d-table
+                v-if="!isLoad"
                 flat
                 dense
                 bordered
@@ -442,6 +479,7 @@ onMounted(async () => {
                   </div>
                 </template>
               </d-table>
+              <SkeletonTable v-else :columns="columns" />
             </div>
           </q-card>
         </div>

From 01dc0ad34880384cb9c7e8e60f7bd3b74396e959 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 15 Aug 2025 11:00:12 +0700
Subject: [PATCH 178/195] fix: load skeleton

---
 .../08_KPI/components/Tab/01_Assessment.vue   |   1 +
 .../components/Tab/Dialog/DialogDevelop.vue   | 106 +++++++++---------
 src/modules/08_KPI/views/form.vue             |  15 ++-
 src/modules/08_KPI/views/main.vue             |  17 ++-
 src/modules/09_scholarship/views/main.vue     |  12 +-
 5 files changed, 85 insertions(+), 66 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 9ee4872..df1b369 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -270,6 +270,7 @@ const groupNo = computed(() => {
 });
 
 onMounted(() => {
+  store.indicatorWeightTotal = 0
   getCriteria();
   fetchListPlanned();
   fetchListRole();
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
index 6874370..7ec9cbc 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -30,7 +30,7 @@ const props = defineProps({
 const route = useRoute();
 const idKpi = ref<string>(route.params.id.toLocaleString());
 
-const isLoadMain = defineModel<boolean>('isLoadMain',{required:true})
+const isLoadMain = defineModel<boolean>("isLoadMain", { required: true });
 const isLoad = ref<boolean>(false);
 const development = ref<string[]>([]); //ตัวแปรเก็บ ตัวเลือกการพัฒนา
 const reasonDevelopment70 = ref<string>(""); //อื่นๆ การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
@@ -187,8 +187,6 @@ function close() {
   reasonDevelopment20.value = "";
   reasonDevelopment10.value = "";
   development.value = [];
-
-  props.getAll?.();
 }
 
 /** บันทึกข้อมูลการพัฒนาตน */
@@ -222,7 +220,7 @@ function onSubmit() {
         selectTypeYear: formData.year ? formData.year.toString() : null,
         selectTypeId: projectName.value ? projectName.value.id : null,
       };
-      isLoadMain.value = true
+      isLoadMain.value = true;
       http[id.value ? "put" : "post"](url, body)
         .then((res) => {
           close();
@@ -238,9 +236,10 @@ function onSubmit() {
   }
 }
 
+const isLoadYear = ref<boolean>(false);
 async function getDataByYear() {
   if (formData.year) {
-    showLoader();
+    isLoadYear.value = true;
     http
       .get(config.API.developmentMain + `/done?year=${formData.year}`)
       .then(async (res) => {
@@ -251,13 +250,14 @@ async function getDataByYear() {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        isLoadYear.value = false;
       });
   }
 }
 
+const isLoadProject = ref<boolean>(false);
 function getProjectDetail(val: any) {
-  showLoader();
+  isLoadProject.value = true;
   http
     .get(config.API.developmentMain + `/tab3_1/${val.id}`)
     .then((res) => {
@@ -285,7 +285,7 @@ function getProjectDetail(val: any) {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadProject.value = false;
     });
 }
 
@@ -429,7 +429,7 @@ watch(
             </div>
             <div class="col-3" v-if="choice == 'PROJECT'">
               <q-select
-                v-if="!isLoad"
+                v-if="!isLoadYear"
                 outlined
                 dense
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
@@ -458,7 +458,7 @@ watch(
             </div>
             <div class="col-12">
               <q-input
-                v-if="!isLoad"
+                v-if="!isLoad && !isLoadProject"
                 v-model="formData.name"
                 outlined
                 dense
@@ -480,7 +480,7 @@ watch(
                   >70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</span
                 >
                 <q-option-group
-                  v-if="!isLoad"
+                  v-if="!isLoad && !isLoadProject"
                   class="check_box q-mt-sm"
                   keep-color
                   color="primary"
@@ -490,22 +490,23 @@ watch(
                   type="checkbox"
                 />
 
-                <q-item
-                  v-else
-                  class="q-pa-none"
-                  style="max-width: 300px; height: 30px"
-                  v-for="item in 11"
-                >
-                  <q-item-section>
-                    <q-skeleton type="text" />
-                  </q-item-section>
-                </q-item>
+                <q-list v-else class="list-c">
+                  <q-item
+                    class="q-pa-none"
+                    style="max-width: 300px; height: 30px"
+                    v-for="item in 11"
+                  >
+                    <q-item-section>
+                      <q-skeleton type="text" />
+                    </q-item-section>
+                  </q-item>
+                </q-list>
 
                 <div class="row q-pb-md" v-if="checkOtherBox11">
                   <div class="offset-4 col-8 q-mt-sm relative-position">
                     <div class="other_custom_input">
                       <q-input
-                        v-if="!isLoad"
+                        v-if="!isLoad && !isLoadProject"
                         v-model="reasonDevelopment70"
                         dense
                         outlined
@@ -522,7 +523,7 @@ watch(
                   >20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)</span
                 >
                 <q-option-group
-                  v-if="!isLoad"
+                  v-if="!isLoad && !isLoadProject"
                   class="check_box q-mt-sm"
                   keep-color
                   color="primary"
@@ -531,21 +532,22 @@ watch(
                   :options="projectTechniquesOp2"
                   type="checkbox"
                 />
-                <q-item
-                  v-else
-                  class="q-pa-none"
-                  style="max-width: 300px; height: 30px"
-                  v-for="item in 5"
-                >
-                  <q-item-section>
-                    <q-skeleton type="text" />
-                  </q-item-section>
-                </q-item>
+                <q-list v-else class="list-c">
+                  <q-item
+                    class="q-pa-none"
+                    style="max-width: 300px; height: 30px"
+                    v-for="item in 5"
+                  >
+                    <q-item-section>
+                      <q-skeleton type="text" />
+                    </q-item-section>
+                  </q-item>
+                </q-list>
                 <div class="row q-pb-md" v-if="checkOtherBox12">
                   <div class="offset-4 col-8 q-mt-sm relative-position">
                     <div class="other_custom_input">
                       <q-input
-                        v-if="!isLoad"
+                        v-if="!isLoad && !isLoadProject"
                         v-model="reasonDevelopment20"
                         dense
                         outlined
@@ -560,7 +562,7 @@ watch(
               <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                 <span class="text-weight-medium">10 การฝึกอบรมอื่นๆ</span>
                 <q-option-group
-                  v-if="!isLoad"
+                  v-if="!isLoad && !isLoadProject"
                   class="check_box q-mt-sm"
                   keep-color
                   color="primary"
@@ -569,21 +571,22 @@ watch(
                   :options="projectTechniquesOp3"
                   type="checkbox"
                 />
-                <q-item
-                  v-else
-                  class="q-pa-none"
-                  style="max-width: 300px; height: 30px"
-                  v-for="item in 7"
-                >
-                  <q-item-section>
-                    <q-skeleton type="text" />
-                  </q-item-section>
-                </q-item>
+                <q-list v-else class="list-c">
+                  <q-item
+                    class="q-pa-none"
+                    style="max-width: 300px; height: 30px"
+                    v-for="item in 7"
+                  >
+                    <q-item-section>
+                      <q-skeleton type="text" />
+                    </q-item-section>
+                  </q-item>
+                </q-list>
                 <div class="row q-pb-md" v-if="checkOtherBox13">
                   <div class="offset-4 col-8 q-mt-sm relative-position">
                     <div class="other_custom_input">
                       <q-input
-                        v-if="!isLoad"
+                        v-if="!isLoad && !isLoadProject"
                         v-model="reasonDevelopment10"
                         dense
                         outlined
@@ -598,7 +601,7 @@ watch(
             </div>
             <div class="col-12">
               <q-input
-                v-if="!isLoad"
+                v-if="!isLoad && !isLoadProject"
                 label="เป้าหมายการนำไปพัฒนางาน"
                 v-model="formData.target"
                 outlined
@@ -627,7 +630,7 @@ watch(
                   </div>
                   <div class="col-8">
                     <q-input
-                      v-if="!isLoad"
+                      v-if="!isLoad && !isLoadProject"
                       class="inputgreen"
                       v-model="formData.achievement10"
                       outlined
@@ -647,7 +650,7 @@ watch(
                   </div>
                   <div class="col-8">
                     <q-input
-                      v-if="!isLoad"
+                      v-if="!isLoad && !isLoadProject"
                       class="inputgreen"
                       v-model="formData.achievement5"
                       outlined
@@ -667,7 +670,7 @@ watch(
                   </div>
                   <div class="col-8">
                     <q-input
-                      v-if="!isLoad"
+                      v-if="!isLoad && !isLoadProject"
                       class="inputgreen"
                       v-model="formData.achievement0"
                       outlined
@@ -700,6 +703,9 @@ watch(
 :deep(.check_box .q-checkbox) {
   align-items: start;
 }
+:deep(.list-c .q-item) {
+  min-height: 30px;
+}
 
 .other_custom_input {
   position: absolute;
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 84a7f25..18ed7c1 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -598,19 +598,20 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
 }
 
 /** ดึงข้อมูล */
+const isLoadUpload = ref<boolean>(false);
 async function getData() {
-  showLoader();
+  isLoadUpload.value = true;
   await http
     .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value))
     .then((res) => {
       fileList.value = res.data;
+      isLoadUpload.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoadUpload.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -1355,7 +1356,11 @@ onMounted(async () => {
             </q-file>
           </div>
 
-          <div v-if="fileList.length > 0" class="col-xs-12 row">
+          <div class="col-12" v-if="isLoadUpload">
+            <q-skeleton height="50px" />
+          </div>
+
+          <div v-else-if="fileList.length > 0" class="col-xs-12 row">
             <q-list class="full-width rounded-borders" bordered separator>
               <q-item
                 clickable
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 7bc5087..2ed6ad9 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -162,9 +162,11 @@ const pagination = ref({
  * ดึงข้อมูลรอบการประเมิน
  * @param type
  */
+const isLoadDialog = ref<boolean>(false);
 async function fetchRoundOption(type: string) {
   const y = type === "main" ? year.value : yearDialog.value;
-  isLoadOp.value = true;
+  type == "main" && (isLoadOp.value = true);
+  type == "dialog" && (isLoadDialog.value = true);
   await http
     .get(
       config.API.kpiPeriod + `?page=${1}&pageSize=${10}&keyword=${""}&year=${y}`
@@ -199,7 +201,8 @@ async function fetchRoundOption(type: string) {
       messageError($q, err);
     })
     .finally(() => {
-      isLoadOp.value = false;
+      type == "main" && (isLoadOp.value = false);
+      type == "dialog" && (isLoadDialog.value = false);
     });
 }
 
@@ -207,7 +210,7 @@ async function fetchRoundOption(type: string) {
  *  fetch รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
  */
 async function fetchList() {
-  isLoad.value = true
+  isLoad.value = true;
   let queryParams = {
     page: formQuery.page,
     pageSize: formQuery.pageSize,
@@ -225,10 +228,10 @@ async function fetchList() {
       total.value = data.total;
       totalList.value = Math.ceil(data.total / formQuery.pageSize);
       rows.value = data.data;
-      isLoad.value = false
+      isLoad.value = false;
     })
     .catch((err) => {
-      isLoad.value = false
+      isLoad.value = false;
       messageError($q, err);
     })
     .finally(() => {});
@@ -612,7 +615,7 @@ onMounted(async () => {
 
             <div class="col-12">
               <d-table
-              v-if="!isLoad"
+                v-if="!isLoad"
                 ref="table"
                 :columns="columns"
                 :rows="rows"
@@ -743,6 +746,7 @@ onMounted(async () => {
 
             <div class="col-12">
               <q-select
+              v-if="!isLoadDialog"
                 :readonly="yearDialog === null"
                 v-model="formRound.kpiPeriodId"
                 outlined
@@ -756,6 +760,7 @@ onMounted(async () => {
                 :rules="[(val:DataOptions) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
                 @update:model-value="checkClosed"
               />
+              <q-skeleton type="QInput" height="40px" v-else/>
             </div>
 
             <div class="col-12">
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index b25beef..44470f4 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -88,7 +88,7 @@ const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
 
 /** ดึงข้อมูล */
 async function getData() {
-  showLoader();
+  
   await http
     .get(
       config.API.developmentScholarship +
@@ -96,12 +96,13 @@ async function getData() {
     )
     .then(async (res) => {
       rows.value = res.data.result;
+      isLoad.value = false
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoad.value = false
     });
 }
 
@@ -127,19 +128,20 @@ function onEdit(id: string) {
 // );
 
 async function getProfileId() {
+  isLoad.value = true
   if (dataStore.profileId) {
     profilId.value = dataStore.profileId;
   } else {
-    isLoad.value = true;
+    
     try {
       const res = await http.get(config.API.profilePosition());
       dataStore.profileId = res.data.result.profileId;
       profilId.value = dataStore.profileId;
-      isLoad.value = false;
+      
     } catch (e) {
       messageError($q, e);
     } finally {
-      isLoad.value = false;
+      
     }
   }
 

From 7101a189e9d2e015b75a9b3485f6d2ed363cf097 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 19 Aug 2025 16:47:20 +0700
Subject: [PATCH 179/195] fix:   dataStore.typeLeave

---
 src/modules/05_leave/components/FormLeave/Form.vue | 1 -
 src/modules/05_leave/store.ts                      | 1 +
 src/modules/05_leave/views/AddPage.vue             | 2 ++
 src/modules/05_leave/views/EditPage.vue            | 2 ++
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index 381ffd3..a737632 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -141,7 +141,6 @@ watch(
 
 /**Hook */
 onMounted(() => {
-  dataStore.typeLeave = "";
 });
 </script>
 
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 5047cc2..e56c9cd 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -316,6 +316,7 @@ export const useLeaveStore = defineStore("Leave", () => {
         const data = res.data.result;
         dateSendLeave.value = data.dateSendLeave;
         leaveTypeName.value = data.leaveTypeName;
+        typeLeave.value = data.leaveTypeName;
         fullName.value = data.fullName;
         positionName.value = data.positionName;
         positionLevelName.value = data.positionLevelName;
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 0d9bfc4..af1a538 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -106,6 +106,8 @@ function filterOptionFn(val: string, update: Function) {
 }
 
 onMounted(async () => {
+  dataStore.typeLeave = "";
+
   if (dataStore.options.length == 0) {
     await fectOptionType();
   }
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 129a61c..e9f90a9 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -320,6 +320,8 @@ async function fectOptionType() {
  * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
  */
 onMounted(async () => {
+  dataStore.typeLeave = "";
+
   if (dataStore.options.length == 0) {
     fectOptionType();
   }

From 1442b39076f39bff484c934d53f0d0b4b89dfa82 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 20 Aug 2025 09:53:26 +0700
Subject: [PATCH 180/195] fix bug  ==>  KPI  load skeleton img Profile

---
 src/modules/08_KPI/views/form.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 18ed7c1..05a653b 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -101,7 +101,6 @@ async function fetchEvaluation() {
 
 async function getAvatar(id: string) {
   isLoadAvatar.value = true;
-
   await http
 
     .get(config.API.orgCheckAvatar(id))
@@ -113,18 +112,19 @@ async function getAvatar(id: string) {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
       isLoadAvatar.value = false;
     });
 }
 
 /** ดึงข้อมูล เพื่อเก็บรูปโปรไฟล์ */
 async function fetchProfile(id: string, avatarName: string) {
-  http
+  await http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
     .then(async (res) => {
       store.dataEvaluation.avartar = res.data.downloadUrl;
       imgProfile.value = res.data.downloadUrl;
-      isLoadAvatar.value = false;
     });
 }
 

From ca8fa3b42013c5cd86007c882769f98f6a94e134 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 21 Aug 2025 09:28:54 +0700
Subject: [PATCH 181/195] =?UTF-8?q?fix=20bug=20KPI=20=E0=B9=84=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88=20fetch=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=20=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=92=E0=B8=99=E0=B8=B2=E0=B8=95=E0=B8=99=E0=B9=80?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B9=80=E0=B8=A1=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../08_KPI/components/Tab/Dialog/DialogDevelop.vue    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
index 7ec9cbc..5d81430 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -198,7 +198,8 @@ function onSubmit() {
   ) {
     dialogMessageNotify($q, "กรุณาเลือกวิธีการพัฒนา อย่างน้อย 1 ตัวเลือก");
   } else {
-    dialogConfirm($q, () => {
+    dialogConfirm($q, async () => {
+      showLoader();
       const url = id.value
         ? config.API.kpiAchievementDevelop + `/${id.value}`
         : config.API.kpiAchievementDevelop;
@@ -220,11 +221,11 @@ function onSubmit() {
         selectTypeYear: formData.year ? formData.year.toString() : null,
         selectTypeId: projectName.value ? projectName.value.id : null,
       };
-      isLoadMain.value = true;
-      http[id.value ? "put" : "post"](url, body)
-        .then((res) => {
-          close();
+      await http[id.value ? "put" : "post"](url, body)
+        .then(async () => {
+          await props?.getAll?.();
           success($q, "บันทึกข้อมูลสำเร็จ");
+          close();
         })
         .catch((e) => {
           messageError($q, e);

From 1ec4a97538ff6f5645e4f9b60d5802c37b614435 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 21 Aug 2025 18:17:55 +0700
Subject: [PATCH 182/195] =?UTF-8?q?fix=20bug=20=3D=3D>=20=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A5=E0=B8=B5=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/Table.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index 7e9357a..d9797b5 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -88,13 +88,16 @@ function updatePagination(p: number, ps: number) {
 
 /** function updatePageSize*/
 function updatePageSize(newPageSize: any) {
-  currentPage.value = 1;
   pagination.value.rowsPerPage = newPageSize.rowsPerPage;
 }
 
-watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  updatePagination(currentPage.value, pagination.value.rowsPerPage);
-});
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    currentPage.value = 1;
+    updatePagination(currentPage.value, pagination.value.rowsPerPage);
+  }
+);
 </script>
 
 <template>
@@ -269,6 +272,9 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
           size="sm"
           boundary-links
           direction-links
+          @update:model-value="
+            updatePagination(currentPage, pagination.rowsPerPage)
+          "
         ></q-pagination>
       </template>
       <template #body="props">

From d39753fbde0e1f9a0b47528ccac23878b175c8cf Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 29 Aug 2025 13:45:33 +0700
Subject: [PATCH 183/195] fix load Table

---
 src/components/TableD.vue                     | 139 +++++++++++++-
 src/interface/PropsTable.ts                   |  36 ++++
 src/modules/02_transfer/views/Main.vue        |  23 +--
 src/modules/03_retire/views/addRetire.vue     |  10 +-
 src/modules/03_retire/views/main.vue          |  23 +--
 .../05_leave/components/FormLeave/Form.vue    | 179 ++++++++----------
 src/modules/05_leave/components/Table.vue     |  59 +++---
 .../05_leave/interface/response/main.ts       |  34 ++++
 .../components/ExpertPageDetail.vue           |   6 -
 .../06_evaluate/components/PopupPosition.vue  |   7 +-
 .../components/TableListEvaluate.vue          | 115 +++--------
 .../06_evaluate/components/step/step1.vue     |   8 +-
 .../06_evaluate/components/step/step2.vue     |   6 +-
 .../06_evaluate/components/step/step4.vue     |   1 -
 .../06_evaluate/components/step/step5.vue     |   6 +-
 .../06_evaluate/components/step/step6.vue     |   8 +-
 .../06_evaluate/components/step/step8.vue     |   1 -
 .../components/viewstep/popupHistory.vue      |   7 +-
 .../components/viewstep/tableStep1.vue        |  35 +---
 .../components/viewstep/viewStep1.vue         |  25 +--
 .../06_evaluate/views/EvaluateMain.vue        |  25 +--
 src/modules/07_appealComplain/views/Main.vue  | 126 +++---------
 .../08_KPI/components/Evaluator/01_TabAll.vue |  65 ++++---
 .../components/Evaluator/02_TabOther.vue      |  68 ++++---
 .../Tab/Dialog/04_FormCompetency.vue          |   9 +-
 .../Tab/Dialog/DialogGovernment.vue           |  42 +---
 .../components/Tab/Topic/01_Indicator.vue     |  18 +-
 .../components/Tab/Topic/02_Competency.vue    |  14 +-
 .../components/Tab/Topic/03_Develop.vue       |  17 +-
 src/modules/08_KPI/views/main.vue             |  90 +++------
 src/modules/08_KPI/views/mainEvaluator.vue    |  53 ++----
 src/modules/09_scholarship/views/main.vue     |  55 +-----
 .../01_Information/01_Information.vue         |   2 +-
 .../01_Information/02_ChangeName.vue          |  13 +-
 .../01_Information/05_Educations.vue          |  10 +-
 .../10_registry/01_Information/06_Ability.vue |   7 +-
 .../02_Government/02_Discipline.vue           |   9 +-
 .../10_registry/02_Government/03_Leave.vue    |   7 +-
 .../10_registry/02_Government/04_Duty.vue     |   8 +-
 .../02_Government/05_Actposition.vue          |   7 +-
 .../02_Government/06_Assistance.vue           |   7 +-
 .../10_registry/02_Government/07_Position.vue |   6 +-
 .../10_registry/03_Salary/01_Salary.vue       |  12 +-
 .../10_registry/03_Salary/02_Nopaid.vue       |   7 +-
 .../04_Achievement/01_Certificate.vue         |   7 +-
 .../04_Achievement/02_Training.vue            |   7 +-
 .../04_Achievement/03_Insignia.vue            |   7 +-
 .../10_registry/04_Achievement/04_Honor.vue   |   7 +-
 .../04_Achievement/05_Assessments.vue         |   7 +-
 .../04_Achievement/06_DevelopmentPlan.vue     |   7 +-
 src/modules/10_registry/05_Other/01_Other.vue |  15 +-
 .../10_registry/Dialog/DialogHistory.vue      |  17 +-
 .../10_registry/views/requestEditMain.vue     |  71 +++----
 src/modules/11_probation/views/mainDetail.vue |  28 +--
 src/modules/13_portfolio/views/Main.vue       |  29 +--
 src/modules/14_IDP/views/main.vue             |  55 ++----
 56 files changed, 684 insertions(+), 978 deletions(-)
 create mode 100644 src/interface/PropsTable.ts
 create mode 100644 src/modules/05_leave/interface/response/main.ts

diff --git a/src/components/TableD.vue b/src/components/TableD.vue
index b2c5823..a669956 100644
--- a/src/components/TableD.vue
+++ b/src/components/TableD.vue
@@ -10,13 +10,16 @@
     dense
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
+    @request="onRequest"
     :grid="!$q.screen.gt.xs"
     :rows-per-page-options="[10, 25, 50, 100]"
+    :loading="loading"
   >
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ attrs.rows.length }} รายการ
+      ทั้งหมด {{ pagination.rowsNumber || attrs.rows.length }} รายการ
       <q-pagination
         v-model="pagination.page"
+        @update:model-value="handlePageChange"
         active-color="primary"
         color="dark"
         :max="scope.pagesNumber"
@@ -27,9 +30,25 @@
       ></q-pagination>
     </template>
 
-    <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
+    <template v-for="(_, slot) in slots" v-slot:[slot]="scope" :key="slot">
       <slot :name="slot" v-bind="scope || {}" />
     </template>
+
+    <template v-slot:loading>
+      <q-inner-loading showing class="q-mt-lg">
+        <q-spinner-dots color="primary" size="40px" />
+      </q-inner-loading>
+    </template>
+
+    <template v-slot:no-data>
+      <div
+        v-if="!loading && attrs.rows.length === 0"
+        class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+      >
+        <span> ไม่พบข้อมูล </span>
+      </div>
+    </template>
+
     <!-- <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
         <q-card bordered flat>
@@ -55,22 +74,45 @@
   </q-table>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs, useSlots } from "vue";
+import { ref, useAttrs, useSlots, computed, watch } from "vue";
 const attrs = ref<any>(useAttrs());
 const slots = ref<any>(useSlots());
 
+const emit = defineEmits(["update:pagination", "request"]);
+
 const props = defineProps({
   paging: {
     type: Boolean,
-    defualt: false,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  pagination: {
+    type: Object,
+    default: () => ({
+      sortBy: "desc",
+      descending: false,
+      page: 1,
+      rowsPerPage: 10,
+      // rowsNumber: 0,
+    }),
   },
 });
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
+// Internal pagination state ที่จะจัดการเอง
+const internalPagination = ref({
+  ...props.pagination,
+});
+
+// ใช้ computed เพื่อ sync กับ props และ internal state
+const pagination = computed({
+  get: () => internalPagination.value,
+  set: (value) => {
+    internalPagination.value = { ...value };
+    emit("update:pagination", value);
+  },
 });
 
 const paginationLabel = (start: string, end: string, total: string) => {
@@ -78,6 +120,57 @@ const paginationLabel = (start: string, end: string, total: string) => {
     return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
   else return start + "-" + end + " ใน " + total;
 };
+
+function onRequest(requestProp: any) {
+  if (!requestProp || !requestProp.pagination) {
+    return;
+  }
+
+  const { pagination: newPagination } = requestProp;
+
+  // ถ้าเป็นการเปลี่ยนหน้า (page หรือ rowsPerPage เปลี่ยน) ให้ยิง request
+  const isPageChange =
+    internalPagination.value.page !== newPagination.page ||
+    internalPagination.value.rowsPerPage !== newPagination.rowsPerPage;
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    ...newPagination,
+  };
+
+  if (isPageChange) {
+    emit("request", requestProp);
+  }
+}
+
+function handlePageChange(newPage: number) {
+  if (!newPage || newPage < 1) {
+    return;
+  }
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    page: newPage,
+  };
+
+  // สร้าง request object เหมือนกับ onRequest
+  const requestProp = {
+    pagination: internalPagination.value,
+    filter: null,
+    getCellValue: () => {},
+  };
+
+  emit("request", requestProp);
+}
+
+// Watch props เพื่ออัปเดต internal state เมื่อ parent เปลี่ยน
+watch(
+  () => props.pagination,
+  (newPagination) => {
+    internalPagination.value = { ...newPagination };
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <style lang="scss">
@@ -113,5 +206,33 @@ const paginationLabel = (start: string, end: string, total: string) => {
     margin-bottom: 0 !important;
     min-height: 0px !important;
   }
+
+  // Loading styles
+  .loading-overlay {
+    width: 100%;
+  }
+
+  .loading-row {
+    background: white;
+  }
+
+  .loading-cell {
+    text-align: center;
+    padding: 60px 20px;
+    border: none;
+  }
+
+  .loading-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .loading-text {
+    color: #666;
+    font-size: 14px;
+    font-weight: 500;
+  }
 }
 </style>
diff --git a/src/interface/PropsTable.ts b/src/interface/PropsTable.ts
new file mode 100644
index 0000000..b9d4fe0
--- /dev/null
+++ b/src/interface/PropsTable.ts
@@ -0,0 +1,36 @@
+/** Namespace สำหรับ Table-related types */
+export namespace PropsTable {
+  /** Interface สำหรับ pagination object */
+  export interface Pagination {
+    /** หน้าปัจจุบัน (เริ่มจาก 1) */
+    page: number;
+    /** จำนวนแถวต่อหน้า */
+    rowsPerPage: number;
+    /** จำนวนแถวทั้งหมด */
+    rowsNumber?: number;
+    /** คอลัมน์ที่ใช้ sort */
+    sortBy?: string;
+    /** เรียงจากมากไปน้อย */
+    descending?: boolean;
+
+    rowsTotal?: number;
+  }
+
+  /** Interface สำหรับ request props จาก d-table */
+  export interface RequestProps {
+    /** ข้อมูล pagination */
+    pagination: Pagination;
+    /** ตัวกรองข้อมูล */
+    filter?: any;
+    /** function สำหรับดึงค่าจาก cell */
+    getCellValue?: (col: any, row: any) => any;
+  }
+
+  /** Union type สำหรับ handleRequest function */
+  export type HandleRequestProps = RequestProps;
+}
+
+// Export แบบเดิมเพื่อ backward compatibility
+export type TablePagination = PropsTable.Pagination;
+export type TableRequestProps = PropsTable.RequestProps;
+export type HandleRequestProps = PropsTable.HandleRequestProps;
diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index d8c01f5..1d9f150 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -14,8 +14,6 @@ import type {
   TransferMain,
 } from "@/modules/02_transfer/interface/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -247,33 +245,18 @@ onMounted(async () => {
           </div>
           <div>
             <d-table
-              v-if="!isLoading"
               flat
               bordered
               dense
               :paging="true"
               row-key="id"
-              class="custom-table2"
-              style="max-height: 80vh"
               :rows="rows"
               :columns="columns"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
+              :pagination="pagination"
+              :loading="isLoading"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
@@ -341,11 +324,11 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
-            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>
     </div>
   </div>
 </template>
+
 <style scoped lang="scss"></style>
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 1715d4f..7cedc59 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -20,7 +20,7 @@ import Dialog from "@/modules/03_retire/views/DialogRetire.vue";
 import Header from "@/components/DialogHeader.vue";
 import Workflow from "@/components/Workflow/Main.vue";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
+
 
 const $q = useQuasar();
 const route = useRoute();
@@ -608,7 +608,6 @@ onMounted(async () => {
                     <q-separator />
                     <div class="col-12 q-pa-sm">
                       <d-table
-                        v-if="!isLoad"
                         ref="table"
                         :columns="columnsCommanders"
                         :rows="rowsApprover?.commanders ?? []"
@@ -618,6 +617,8 @@ onMounted(async () => {
                         :paging="true"
                         dense
                         :rows-per-page-options="[1, 25, 50, 100]"
+                        :pagination="{ page: 1, rowsPerPage: 10 }"
+                        :loading="isLoad"
                       >
                         <template v-slot:header="props">
                           <q-tr :props="props">
@@ -657,7 +658,6 @@ onMounted(async () => {
                           </q-tr>
                         </template>
                       </d-table>
-                      <SkeletonTable v-else :columns="columnsCommanders" />
                     </div>
                   </q-card>
                 </div>
@@ -769,7 +769,6 @@ onMounted(async () => {
                     <q-separator />
                     <div class="col-12 q-pa-sm">
                       <d-table
-                        v-if="!isLoad"
                         ref="table"
                         :columns="columnsCommanders"
                         :rows="rowsApprover?.cancelCommanders ?? []"
@@ -779,6 +778,8 @@ onMounted(async () => {
                         :paging="true"
                         dense
                         :rows-per-page-options="[1, 25, 50, 100]"
+                        :pagination="{ page: 1, rowsPerPage: 10 }"
+                        :loading="isLoad"
                       >
                         <template v-slot:header="props">
                           <q-tr :props="props">
@@ -818,7 +819,6 @@ onMounted(async () => {
                           </q-tr>
                         </template>
                       </d-table>
-                      <SkeletonTable v-else :columns="columnsCommanders" />
                     </div>
                   </q-card>
                 </div>
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index d4dacae..118c2a1 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -15,15 +15,12 @@ import type {
   MainListResponse,
 } from "@/modules/03_retire/interface/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const link = ref<string>("");
 const dataStore = useDataStore();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
-  mixin;
+const { date2Thai, messageError, onSearchDataTable } = mixin;
 const RestData = useRestDataStore();
 const { statusText } = RestData; //Func แปลง status to text
 
@@ -200,8 +197,7 @@ onMounted(async () => {
           </div>
           <div>
             <d-table
-              v-if="!isLoad"
-              flat
+              fla
               bordered
               dense
               row-key="id"
@@ -210,20 +206,8 @@ onMounted(async () => {
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
               v-model:pagination="pagination"
+              :loading="isLoad"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
@@ -280,7 +264,6 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
-            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index a737632..b366057 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { ref } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
@@ -8,15 +8,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 import { useDataStore } from "@/stores/data";
 
-import DialogHeader from "@/components/DialogHeader.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
+import type { PropsTable } from "@/interface/PropsTable";
+import type { DataCommander } from "@/modules/05_leave/interface/response/main";
 
-const mixin = useCounterMixin();
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
 const dataStore = useLeaveStore();
 const storeData = useDataStore();
-const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+const { date2Thai, messageError } = useCounterMixin();
 
-const modal = ref<boolean>(false);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   model: {
@@ -25,21 +26,13 @@ const props = defineProps({
   },
 });
 
-const $q = useQuasar();
-const isAct = ref<boolean>(false);
-const search = ref<string>("");
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
+const modal = ref<boolean>(false);
 
-const selected = ref<any[]>([]);
+const isAct = ref<boolean>(false);
+const selected = ref<DataCommander[]>([]);
+const search = ref<string>("");
 const isLoading = ref<boolean>(false);
-const rows = ref<any[]>([]);
+const rows = ref<DataCommander[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "posNo",
@@ -72,28 +65,15 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const pagination = ref<PropsTable.Pagination>({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 0,
+});
 
-function onPerson() {
-  modal.value = true;
-  getCommander();
-}
-
-function onSubmit() {
-  modal.value = false;
-  dataStore.dear = selected.value[0].firstName
-    ? `${selected.value[0].prefix}${selected.value[0].firstName} ${selected.value[0].lastName}`
-    : "";
-
-  dataStore.commanderPosition = selected.value[0].posExecutiveName;
-}
-
-function closeDialog() {
-  modal.value = false;
-  search.value = "";
-  rows.value = [];
-  selected.value = [];
-}
-
+/** ฟังก์ชันสำหรับดึงข้อมูลผู้บังคับบัญชา */
 async function getCommander() {
   isLoading.value = true;
   await http
@@ -109,11 +89,12 @@ async function getCommander() {
           : "employee",
     })
     .then((res) => {
-      rows.value = res.data.result.data;
-      total.value = res.data.result.total;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
+      const result = res.data.result;
+      rows.value = result.data;
+      pagination.value = {
+        ...pagination.value,
+        rowsNumber: result.total,
+      };
     })
     .catch((e) => {
       messageError($q, e);
@@ -123,25 +104,53 @@ async function getCommander() {
     });
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+/*** ฟังก์ชันสำหรับเปิด Modal และดึงข้อมูลผู้บังคับบัญชา */
+function onPerson() {
+  modal.value = true;
+  getCommander();
 }
 
+/*** ฟังก์ชันสำหรับปิด Modal และล้างข้อมูล */
+function closeDialog() {
+  modal.value = false;
+  search.value = "";
+  rows.value = [];
+  selected.value = [];
+  pagination.value = {
+    sortBy: "createdAt",
+    descending: true,
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+  };
+}
+
+/** ฟังก์ชันสำหรับยืนยันการเลือกผู้บังคับบัญชา */
+function onSubmit() {
+  modal.value = false;
+  dataStore.dear = selected.value[0].firstName
+    ? `${selected.value[0].prefix}${selected.value[0].firstName} ${selected.value[0].lastName}`
+    : "";
+
+  dataStore.commanderPosition = selected.value[0].posExecutiveName;
+}
+
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  getCommander();
+}
+
+/** ฟังก์ชันสำหรับค้นหาข้อมูล*/
 function getSearch() {
   pagination.value.page = 1;
   getCommander();
 }
-
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
-/**Hook */
-onMounted(() => {
-});
 </script>
 
 <template>
@@ -227,15 +236,6 @@ onMounted(() => {
         v-model="dataStore.typeLeave"
         label="เรื่อง"
       />
-      <!-- <q-input
-        class="col-12 col-sm-4"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="dataStore.commanderPosition"
-        label="เรียน"
-      /> -->
 
       <q-input
         class="col-12 col-sm-4"
@@ -315,7 +315,7 @@ onMounted(() => {
           <div class="row q-col-gutter-sm">
             <div class="col-12">
               <div class="row q-col-gutter-md items-start">
-                <div class="col-12 col-sm-4 col-md-4">
+                <div class="col-12 col-sm-6 col-md-4">
                   <q-input
                     v-model="search"
                     outlined
@@ -325,17 +325,20 @@ onMounted(() => {
                     @keydown.enter.prevent="getSearch()"
                   />
                 </div>
-                <q-checkbox
-                  keep-color
-                  v-model="isAct"
-                  label="แสดงเฉพาะรักษาการแทน"
-                  color="primary"
-                >
-                  <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
-                </q-checkbox>
-                <q-space />
+                <div class="col-12 col-sm-6 col-md-4">
+                  <q-checkbox
+                    keep-color
+                    v-model="isAct"
+                    label="แสดงเฉพาะรักษาการแทน"
+                    color="primary"
+                    @update:model-value="getSearch()"
+                  >
+                    <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
+                  </q-checkbox>
+                </div>
+                <q-space v-if="$q.screen.gt.sm" />
 
-                <div class="col-12 col-sm-6 col-md-3">
+                <div class="col-12 col-md-3">
                   <q-btn
                     color="primary"
                     icon="search"
@@ -349,9 +352,7 @@ onMounted(() => {
               </div>
             </div>
             <div class="col-12">
-              <SkeletonTable v-if="isLoading" :columns="columns" />
               <d-table
-                v-else
                 ref="table"
                 :columns="columns"
                 :rows="rows"
@@ -362,25 +363,11 @@ onMounted(() => {
                 dense
                 :rows-per-page-options="[10, 25, 50, 100]"
                 selection="single"
-                @update:pagination="updatePagination"
                 v-model:pagination="pagination"
                 v-model:selected="selected"
+                :loading="isLoading"
+                @request="onTableRequest"
               >
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ total }} รายการ
-                  <q-pagination
-                    v-model="pagination.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="Number(totalList)"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                    :max-pages="5"
-                    @update:model-value="getSearch"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header-selection="scope">
                   <q-checkbox
                     keep-color
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index d9797b5..1c9f499 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -2,8 +2,8 @@
 import { ref, useAttrs, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import { useLeaveStore } from "@/modules/05_leave/store";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
@@ -54,13 +54,26 @@ const table = ref<any>(null);
 
 /** ตั้งค่า pagination*/
 const currentPage = ref<number>(1);
-const pagination = ref({
+
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "dateSendLeave",
   descending: true,
   page: 1,
   rowsPerPage: Number(props.pageSize),
+
+  rowsNumber: Number(props.total),
 });
 
+// Watch props เพื่ออัปเดต pagination เมื่อค่าเปลี่ยน (เฉพาะ props)
+watch(
+  () => [props.pageSize, props.total],
+  ([newPageSize, newTotal]) => {
+    pagination.value.rowsPerPage = Number(newPageSize);
+    pagination.value.rowsNumber = Number(newTotal);
+  },
+  { immediate: true }
+);
+
 /** filter */
 const year = ref<number>(new Date().getFullYear());
 const filter = ref<string>("");
@@ -86,18 +99,17 @@ function updatePagination(p: number, ps: number) {
   emit("update:Pagination", p, ps);
 }
 
-/** function updatePageSize*/
-function updatePageSize(newPageSize: any) {
-  pagination.value.rowsPerPage = newPageSize.rowsPerPage;
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  currentPage.value = newPagination.page;
+  pagination.value = { ...newPagination };
+  updatePagination(newPagination.page, newPagination.rowsPerPage);
 }
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    currentPage.value = 1;
-    updatePagination(currentPage.value, pagination.value.rowsPerPage);
-  }
-);
 </script>
 
 <template>
@@ -240,9 +252,7 @@ watch(
     </q-card>
   </div>
   <div>
-    <SkeletonTable v-if="isloadingData" :columns="leaveStore.columns" />
     <d-table
-      v-else
       ref="table"
       flat
       bordered
@@ -251,9 +261,11 @@ watch(
       :virtual-scroll-sticky-size-start="48"
       dense
       :rows-per-page-options="[10, 25, 50, 100]"
+      D
       v-model:pagination="pagination"
-      @update:pagination="updatePageSize"
+      @request="onTableRequest"
       :grid="$q.screen.gt.xs ? false : true"
+      :loading="isloadingData"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -262,21 +274,6 @@ watch(
           </q-th>
         </q-tr>
       </template>
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ props.total }} รายการ
-        <q-pagination
-          v-model="currentPage"
-          active-color="primary"
-          color="dark"
-          :max="Number(props.maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-          @update:model-value="
-            updatePagination(currentPage, pagination.rowsPerPage)
-          "
-        ></q-pagination>
-      </template>
       <template #body="props">
         <slot v-bind="props" name="columns"></slot>
       </template>
diff --git a/src/modules/05_leave/interface/response/main.ts b/src/modules/05_leave/interface/response/main.ts
new file mode 100644
index 0000000..f3fdb81
--- /dev/null
+++ b/src/modules/05_leave/interface/response/main.ts
@@ -0,0 +1,34 @@
+interface DataCommander {
+  actFullName: string;
+  actFullNameId: string;
+  actFullNameKeycloakId: string;
+  citizenId: string;
+  firstName: string;
+  id: string;
+  isDeputy: number;
+  isDirector: number;
+  isOfficer: boolean;
+  key: string;
+  keycloakId: string;
+  lastName: string;
+  orgChild1: string;
+  orgChild1Id: string;
+  orgChild2: string;
+  orgChild2Id: string;
+  orgChild3: string;
+  orgChild3Id: string;
+  orgChild4: string;
+  orgChild4Id: string;
+  orgRevisionId: string;
+  orgRoot: string;
+  orgRootId: string;
+  posExecutiveName: string;
+  posExecutiveNameOrg: string;
+  posLevel: string;
+  posNo: string;
+  posType: string;
+  position: string;
+  prefix: string;
+}
+
+export type { DataCommander };
diff --git a/src/modules/06_evaluate/components/ExpertPageDetail.vue b/src/modules/06_evaluate/components/ExpertPageDetail.vue
index 5fcb7d1..b6cf795 100644
--- a/src/modules/06_evaluate/components/ExpertPageDetail.vue
+++ b/src/modules/06_evaluate/components/ExpertPageDetail.vue
@@ -459,7 +459,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation1']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div
@@ -552,7 +551,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation2']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div
@@ -645,7 +643,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation3']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div
@@ -738,7 +735,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation5']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div
@@ -830,7 +826,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation4']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div
@@ -921,7 +916,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation6']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div
diff --git a/src/modules/06_evaluate/components/PopupPosition.vue b/src/modules/06_evaluate/components/PopupPosition.vue
index 7cd4691..c229749 100644
--- a/src/modules/06_evaluate/components/PopupPosition.vue
+++ b/src/modules/06_evaluate/components/PopupPosition.vue
@@ -99,12 +99,7 @@ watch(modal, (v) => {
       <q-separator />
       <q-card-section>
         <div class="row q-col-gutter-sm q-pb-sm">
-          <q-skeleton
-            v-if="isLoading"
-            type="Qcard"
-            width="100%"
-            height="240px"
-          />
+          <q-skeleton v-if="isLoading" width="100%" height="240px" />
 
           <div
             v-else
diff --git a/src/modules/06_evaluate/components/TableListEvaluate.vue b/src/modules/06_evaluate/components/TableListEvaluate.vue
index 4ded7cb..7db03c1 100644
--- a/src/modules/06_evaluate/components/TableListEvaluate.vue
+++ b/src/modules/06_evaluate/components/TableListEvaluate.vue
@@ -1,47 +1,35 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+
+import type { PropsTable } from "@/interface/PropsTable";
 import type { QTableProps } from "quasar";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 import { useCounterMixin } from "@/stores/mixin";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use*/
 const $q = useQuasar();
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const router = useRouter();
-
-const total = defineModel<number>("total", { required: true });
-const totalList = defineModel<number>("totalList", { required: true });
-const pagination = defineModel<any>("pagination", { required: true });
 const { dialogRemove, showLoader, hideLoader, success, messageError } = mixin;
 
+const isLoading = defineModel<boolean>("isLoading", {
+  default: false,
+});
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
+
 const props = defineProps({
-  page: {
-    type: Number,
-    require: true,
-  },
-  pageSize: {
-    type: Number,
-    require: true,
-  },
-  maxPage: {
-    type: Number,
-    require: true,
-  },
   fetchData: {
     type: Function,
     require: true,
   },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(["update:pagination"]);
@@ -87,25 +75,11 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
- * function ส่งข้อมูลไป Update Paging
- * @param newPagination ข้อมูล Paging ใหม่
- * @param page หน้า
- */
-function updateProp(newPagination: any, page: number) {
-  emit("update:pagination", newPagination, page);
-}
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 /**
  * function ลบรายการประเมิน
  * @param id รายการประเมิน
  */
-async function onCkilckDelete(id: string) {
+async function onClickDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
     await http
@@ -132,6 +106,17 @@ function redirectToDetail(data: any) {
   router.push(`/evaluate/detail/${data.typeparam.toLowerCase()}/${data.id}`);
 }
 
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  props.fetchData?.();
+}
+
 /** Hook lifecycle*/
 onMounted(() => {
   store.columns = columns.value;
@@ -140,20 +125,19 @@ onMounted(() => {
 </script>
 
 <template>
-  <SkeletonTable v-if="isLoading" :columns="columns" />
   <d-table
-    v-else
     ref="table"
     flat
-    bordered
-    class="custom-header-table"
+    bordere
     :columns="columns"
     :rows="store.row"
     dense
     :visible-columns="store.visibleColumns"
     :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    @request="onTableRequest"
     v-model:pagination="pagination"
+    :loading="isLoading"
+    row-key="id"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -190,7 +174,7 @@ onMounted(() => {
             round
             color="red"
             icon="delete"
-            @click.stop="onCkilckDelete(props.row.id)"
+            @click.stop="onClickDelete(props.row.id)"
           >
             <q-tooltip>ลบ</q-tooltip>
           </q-btn>
@@ -235,7 +219,7 @@ onMounted(() => {
               round
               color="red"
               icon="delete"
-              @click.stop="onCkilckDelete(props.row.id)"
+              @click.stop="onClickDelete(props.row.id)"
             >
               <q-tooltip>ลบ</q-tooltip>
             </q-btn>
@@ -243,48 +227,7 @@ onMounted(() => {
         </q-card>
       </div>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="props.fetchData?.()"
-      ></q-pagination>
-    </template>
   </d-table>
 </template>
 
-<style lang="scss" scoped>
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/modules/06_evaluate/components/step/step1.vue b/src/modules/06_evaluate/components/step/step1.vue
index 3d00c33..0487541 100644
--- a/src/modules/06_evaluate/components/step/step1.vue
+++ b/src/modules/06_evaluate/components/step/step1.vue
@@ -90,13 +90,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-skeleton
-    v-if="isLoading"
-    class="q-mb-md"
-    type="Qcard"
-    width="100%"
-    height="100%"
-  />
+  <q-skeleton v-if="isLoading" class="q-mb-md" width="100%" height="100%" />
   <div class="q-pa-sm" v-else>
     <q-list dense>
       <q-item v-ripple class="listItem">
diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index e480695..a98a91f 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -349,7 +349,7 @@ onMounted(async () => {
   <div class="col-12 q-pa-sm">
     <!-- ผลงาน -->
     <div class="col-12">
-      <q-skeleton type="Qcard" height="100px" v-if="isLoading" class="q-mb-sm" />
+      <q-skeleton height="100px" v-if="isLoading" class="q-mb-sm" />
       <q-card v-else bordered class="cardSp1 col-12">
         <div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
           ผลงาน
@@ -425,7 +425,7 @@ onMounted(async () => {
 
     <!-- เลือกผู้เซ็นเอกสาร -->
     <div class="col-12">
-      <q-skeleton type="Qcard" height="200px" v-if="isLoading" />
+      <q-skeleton height="200px" v-if="isLoading" />
       <q-card v-else bordered class="cardSp1 col-12">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
           เลือกผู้เซ็นเอกสาร
@@ -584,7 +584,7 @@ onMounted(async () => {
         v-for="(item, index) in formTemplates"
         :key="index"
       >
-        <q-skeleton type="Qcard" height="100px" v-if="item.isLoading" />
+        <q-skeleton height="100px" v-if="item.isLoading" />
 
         <q-card bordered class="cardSp1" v-else>
           <div
diff --git a/src/modules/06_evaluate/components/step/step4.vue b/src/modules/06_evaluate/components/step/step4.vue
index 70a6f79..9f0c4a2 100644
--- a/src/modules/06_evaluate/components/step/step4.vue
+++ b/src/modules/06_evaluate/components/step/step4.vue
@@ -235,7 +235,6 @@ onMounted(async () => {
   <div class="row q-col-gutter-sm q-pa-sm">
     <div class="col-6" v-for="(item, index) in formTemplates" :key="index">
       <q-skeleton
-        type="Qcard"
         :height="store.currentStep !== 4 ? '50px' : '100px'"
         v-if="item.isLoading"
       />
diff --git a/src/modules/06_evaluate/components/step/step5.vue b/src/modules/06_evaluate/components/step/step5.vue
index 2ba5977..5b9c62d 100644
--- a/src/modules/06_evaluate/components/step/step5.vue
+++ b/src/modules/06_evaluate/components/step/step5.vue
@@ -96,11 +96,7 @@ onMounted(async () => {
 
 <template>
   <div class="row col-12 q-pa-sm">
-    <q-skeleton
-      v-if="isLoading"
-      type="Qcard"
-      style="width: 100%; height: 300px"
-    />
+    <q-skeleton v-if="isLoading" style="width: 100%; height: 300px" />
     <div v-else class="row col-12 q-col-gutter-sm">
       <div class="col-12 text-center">
         <q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
diff --git a/src/modules/06_evaluate/components/step/step6.vue b/src/modules/06_evaluate/components/step/step6.vue
index de5ef96..8926770 100644
--- a/src/modules/06_evaluate/components/step/step6.vue
+++ b/src/modules/06_evaluate/components/step/step6.vue
@@ -251,7 +251,7 @@ onMounted(async () => {
   <div class="row col-12 q-pa-sm">
     <div class="row col-12 q-col-gutter-sm">
       <div class="col-12 text-center">
-        <q-skeleton v-if="isLoadingDate" type="Qcard" height="50px" />
+        <q-skeleton v-if="isLoadingDate" height="50px" />
         <q-banner v-else rounded class="text-weight-bold text-red-14 bg-red-1">
           <div class="text-weight-bold">
             <q-icon name="info_outline" color="red-14" size="24px" />
@@ -262,7 +262,7 @@ onMounted(async () => {
 
       <!-- ผลงาน -->
       <div class="col-12">
-        <q-skeleton v-if="isLoading" type="Qcard" height="200px" width="100%" />
+        <q-skeleton v-if="isLoading" height="200px" width="100%" />
 
         <q-card
           v-else
@@ -373,7 +373,7 @@ onMounted(async () => {
 
       <!-- เลือกผู้เซ็นเอกสาร -->
       <div class="col-12">
-        <q-skeleton v-if="isLoading" type="Qcard" height="200px" width="100%" />
+        <q-skeleton v-if="isLoading" height="200px" width="100%" />
         <q-card
           v-else
           bordered
@@ -548,7 +548,7 @@ onMounted(async () => {
 
       <!-- อัปไฟล์ -->
       <div class="col-12" v-if="store.currentStep === 6">
-        <q-skeleton type="Qcard" height="100px" v-if="isLoadingFile" />
+        <q-skeleton height="100px" v-if="isLoadingFile" />
         <q-card
           v-else
           bordered
diff --git a/src/modules/06_evaluate/components/step/step8.vue b/src/modules/06_evaluate/components/step/step8.vue
index 5968df6..b816fde 100644
--- a/src/modules/06_evaluate/components/step/step8.vue
+++ b/src/modules/06_evaluate/components/step/step8.vue
@@ -181,7 +181,6 @@ onMounted(async () => {
         "
       >
         <q-skeleton
-          type="Qcard"
           :height="store.currentStep !== 8 ? '50px' : '100px'"
           v-if="isLoadingFile"
         />
diff --git a/src/modules/06_evaluate/components/viewstep/popupHistory.vue b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
index d4d466b..ecfdaea 100644
--- a/src/modules/06_evaluate/components/viewstep/popupHistory.vue
+++ b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
@@ -9,12 +9,11 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 
 import HeaderDialog from "@/components/DialogHeader.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const route = useRoute();
 const mixins = useCounterMixin();
-const { showLoader, hideLoader, date2Thai, messageError } = mixins;
+const { date2Thai, messageError } = mixins;
 
 const isLoading = ref<boolean>(false);
 
@@ -127,9 +126,7 @@ watch(
       <q-card-section>
         <div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
           <div class="col-12">
-            <SkeletonTable v-if="isLoading" :columns="columns" />
             <d-table
-              v-else
               ref="table"
               flat
               bordered
@@ -138,6 +135,8 @@ watch(
               :rows="row"
               dense
               :rows-per-page-options="[10, 25, 50, 100]"
+              :pagination="{ page: 1, rowsPerPage: 10 }"
+              :loading="isLoading"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
diff --git a/src/modules/06_evaluate/components/viewstep/tableStep1.vue b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
index 22aa11b..9bfa222 100644
--- a/src/modules/06_evaluate/components/viewstep/tableStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/tableStep1.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const props = defineProps({
   columns: {
     type: Array as () => any[],
@@ -19,9 +17,7 @@ const props = defineProps({
 
 <template>
   <div class="q-pa-sm row col-12">
-    <SkeletonTable class="col-12" v-if="isLoading" :columns="props.columns" />
     <d-table
-      v-else
       ref="table"
       flat
       bordered
@@ -32,6 +28,9 @@ const props = defineProps({
       virtual-scroll
       class="row col-12"
       :style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props" class="bg-grey-2">
@@ -54,30 +53,4 @@ const props = defineProps({
   </div>
 </template>
 
-<style lang="scss" scoped>
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 83eae27..1f2da1b 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -2,7 +2,7 @@ div
 <script setup lang="ts">
 import { reactive, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
-import { is, useQuasar } from "quasar";
+import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -21,7 +21,6 @@ import type {
 /** importComponents*/
 import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
 import HeaderDialog from "@/components/DialogHeader.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use*/
 const mixin = useCounterMixin();
@@ -410,7 +409,7 @@ onMounted(async () => {
   >
     <div class="row col-12">
       <div class="col-12" v-if="isLoading.loadDetail">
-        <q-skeleton type="Qcard" height="200px" class="q-mb-md" />
+        <q-skeleton height="200px" class="q-mb-md" />
       </div>
       <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
@@ -516,7 +515,7 @@ onMounted(async () => {
       </q-card>
 
       <div class="col-12" v-if="isLoading.loadEducation">
-        <q-skeleton type="Qcard" height="200px" class="q-mb-md" />
+        <q-skeleton height="200px" class="q-mb-md" />
       </div>
       <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
@@ -668,14 +667,8 @@ onMounted(async () => {
           <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
         </div>
         <div class="col-12"><q-separator /></div>
-
-        <div class="col-10">
-          <SkeletonTable
-            v-if="isLoading.loadSalary"
-            :columns="columnSalaries"
-          />
+        <div class="col-10 q-pa-sm">
           <d-table
-            v-else
             ref="table"
             row-key="id"
             flat
@@ -685,6 +678,8 @@ onMounted(async () => {
             :rows="formDetail.salaries"
             :paging="true"
             :rows-per-page-options="[20, 50, 100]"
+            :pagination="{ page: 1, rowsPerPage: 20 }"
+            :loading="isLoading.loadSalary"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -768,13 +763,7 @@ onMounted(async () => {
         <div class="col-12"><q-separator /></div>
         <div class="col-10">
           <div class="q-pa-sm row col-12">
-            <SkeletonTable
-              v-if="isLoading.loadExperience"
-              :columns="columnAssessments"
-              class="col-12"
-            />
             <d-table
-              v-else
               flat
               bordered
               :columns="columnAssessments"
@@ -784,6 +773,8 @@ onMounted(async () => {
               virtual-scroll
               class="row col-12"
               :style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
+              :pagination="{ page: 1, rowsPerPage: 20 }"
+              :loading="isLoading.loadExperience"
             >
               <template v-slot:header="props">
                 <q-tr :props="props" class="bg-grey-2">
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index eaf2ded..4d52987 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -14,6 +14,7 @@ import TableListEvaluate from "@/modules/06_evaluate/components/TableListEvaluat
 import DialogMain from "@/modules/06_evaluate/components/DialogMain.vue"; // popup การเพิ่มประเมิน
 
 /** import Type*/
+import type { PropsTable } from "@/interface/PropsTable";
 import type { ListMenu } from "@/modules/06_evaluate/interface/evalute";
 import type { OptionStatus } from "@/modules/06_evaluate/interface/main";
 
@@ -50,13 +51,12 @@ const listMenu = ref<ListMenu[]>([
   },
 ]);
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "createdAt",
   descending: true,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
 
 /**
@@ -85,11 +85,9 @@ async function fetchEvaluteList() {
   await http
     .put(config.API.evaluationList(), body)
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      store.fetchEvaluateList(res.data.result.data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      store.fetchEvaluateList(result.data);
     })
     .catch((err) => {
       messageError($q, err);
@@ -193,13 +191,6 @@ function getSearch() {
   fetchEvaluteList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /** hook lifecycle*/
 onMounted(async () => {
   await fetchEvaluteList();
@@ -325,10 +316,8 @@ onMounted(async () => {
           <div class="col-12">
             <TableListEvaluate
               :fetchData="fetchEvaluteList"
-              v-model:total="total"
-              v-model:total-list="totalList"
               v-model:pagination="pagination"
-              :isLoading="isLoading"
+              v-model:isLoading="isLoading"
             />
           </div>
         </q-card>
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index 292ba6d..8acf2e3 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -10,16 +10,15 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
 import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const dataStore = useAppealComplainStore();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 
 const filterKeyword = ref<string>("");
 const type = ref<DataOption[]>([
@@ -28,25 +27,18 @@ const type = ref<DataOption[]>([
 ]);
 
 const isload = ref<boolean>(false);
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "createdAt",
   descending: true,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
-
-/**
- * เพิ่มหัวข้อตาราง
- */
-
 const formData = reactive<FormType>({
   type: "ALL",
   status: "ALL",
   year: new Date().getFullYear(),
 });
-
 const visibleColumns = ref<string[]>([
   "no",
   "title",
@@ -59,7 +51,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "status",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -170,19 +161,16 @@ async function getData() {
       )
     )
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      let data = res.data.result.data;
-      await dataStore.fetchAppealComplain(data);
-      isload.value = false;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      dataStore.fetchAppealComplain(result.data);
     })
     .catch((e: any) => {
       messageError($q, e);
-      isload.value = false;
     })
-    .finally(() => {});
+    .finally(() => {
+      isload.value = false;
+    });
 }
 
 /**
@@ -214,22 +202,21 @@ function redirectToPageadd() {
   router.push(`/appeal-complain/add`);
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  getData();
+}
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@@ -241,6 +228,7 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
@@ -377,36 +365,18 @@ onMounted(async () => {
             />
 
             <div class="col-12">
-              <SkeletonTable v-if="isload" :columns="dataStore.columns" />
               <d-table
-                v-else
                 flat
                 bordered
                 dense
-                class="custom-table2"
-                style="max-height: 80vh"
                 :rows="dataStore.rows"
                 :columns="dataStore.columns"
                 :visible-columns="dataStore.visibleColumns"
                 :rows-per-page-options="[10, 25, 50, 100]"
-                @update:pagination="updatePagination"
+                @request="onTableRequest"
                 v-model:pagination="pagination"
+                :loading="isload"
               >
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ total }} รายการ
-                  <q-pagination
-                    v-model="pagination.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="Number(totalList)"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                    :max-pages="5"
-                    @update:model-value="getData()"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -425,7 +395,7 @@ onMounted(async () => {
                       v-for="col in props.cols"
                       :key="col.name"
                       :props="props"
-                      @click="editPage(props.row.id)"
+                      @click.stop.prevent="editPage(props.row.id)"
                     >
                       <div v-if="col.name == 'no'">
                         {{
@@ -445,7 +415,7 @@ onMounted(async () => {
                 <template #item="props">
                   <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
                     <q-card bordered flat>
-                      <q-list @click="editPage(props.row.id)">
+                      <q-list @click.stop.prevent="editPage(props.row.id)">
                         <q-item v-for="col in props.cols" :key="col.name">
                           <q-item-section>
                             <q-item-label caption>{{ col.label }}</q-item-label>
@@ -469,49 +439,5 @@ onMounted(async () => {
     </div>
   </div>
 </template>
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
 
-.custom-table2 {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
index 127ecc8..d33a2b4 100644
--- a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
+++ b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import type { QTableProps } from "quasar";
 
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
 import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const store = useKpiDataStore();
 const router = useRouter();
-const isLoad = defineModel<boolean>('isLoad',{required:true})
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 const visibleColumns = defineModel<string[]>("visibleColumns", {
   required: true,
 });
@@ -22,30 +21,53 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
 const rows = defineModel<ResEvaluatorAssessor[]>("rows", { required: true });
 const formQuery = defineModel<FormQuery>("formQuery", { required: true });
 const total = defineModel<number>("total", { required: true });
-const maxPage = defineModel<number>("maxPage", { required: true });
 
 const props = defineProps({
-  updatePagination: { type: Function },
   fetchList: { type: Function },
 });
 
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "desc",
   descending: false,
-  page: 1,
-  rowsPerPage: 10,
+  page: formQuery.value.page,
+  rowsPerPage: formQuery.value.pageSize,
+  rowsNumber: total.value,
 });
 
 async function redirectViewDetail(id: string) {
-  store.tabMain = await "";
+  store.tabMain = "";
   router.push(`/KPI-evaluator/${id}`);
 }
+
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  formQuery.value.page = newPagination.page;
+  formQuery.value.pageSize = newPagination.rowsPerPage;
+  props?.fetchList?.();
+}
+
+watch(
+  [
+    () => formQuery.value.page,
+    () => formQuery.value.pageSize,
+    () => total.value,
+  ],
+  ([page, pageSize, total]) => {
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = pageSize;
+    pagination.value.rowsNumber = total;
+  }
+);
 </script>
 
 <template>
   <div class="col-12">
     <d-table
-    v-if="!isLoad"
       ref="table"
       :columns="columns"
       :rows="rows"
@@ -54,11 +76,11 @@ async function redirectViewDetail(id: string) {
       bordered
       :paging="true"
       dense
-      class="custom-table2"
-      :rows-per-page-options="[10, 25, 50, 100]"
+      :rows-per-page-options="[1, 10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       v-model:pagination="pagination"
-      @update:pagination="props.updatePagination"
+      @request="onTableRequest"
+      :loading="isLoad"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -109,22 +131,7 @@ async function redirectViewDetail(id: string) {
           </q-card>
         </div>
       </template>
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ total }} รายการ
-        <q-pagination
-          v-model="formQuery.page"
-          active-color="primary"
-          color="dark"
-          :max="Number(maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-          :max-pages="5"
-          @update:model-value="props.fetchList?.()"
-        ></q-pagination>
-      </template>
     </d-table>
-    <SkeletonTable v-else :columns="columns"/>
   </div>
 </template>
 
diff --git a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
index 2f711ec..0458f90 100644
--- a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
+++ b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useQuasar } from "quasar";
+import { ref, watch } from "vue";
+import { Loading, useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import type { QTableProps } from "quasar";
 
@@ -9,11 +9,10 @@ import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
 import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
@@ -35,25 +34,24 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
 const rows = defineModel<ResEvaluatorAssessor[]>("rows", { required: true });
 const formQuery = defineModel<FormQuery>("formQuery", { required: true });
 const total = defineModel<number>("total", { required: true });
-const maxPage = defineModel<number>("maxPage", { required: true });
 const isLoad = defineModel<boolean>("isLoad", { required: true });
 
 const props = defineProps({
-  updatePagination: { type: Function },
   fetchList: { type: Function },
 });
 
+const pagination = ref<PropsTable.Pagination>({
+  sortBy: "desc",
+  descending: false,
+  page: formQuery.value.page,
+  rowsPerPage: formQuery.value.pageSize,
+  rowsNumber: total.value,
+});
+
 function redirectViewDetail(id: string) {
   router.push(`/KPI-evaluator/${id}`);
 }
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 async function onClickApprove(type: string = "") {
   if (store.selected.length !== 0) {
     const userIds = await store.selected.map(
@@ -107,12 +105,36 @@ async function onClickApprove(type: string = "") {
     dialogMessageNotify($q, "เลือกอย่างน้อย 1 รายการ");
   }
 }
+
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  formQuery.value.page = newPagination.page;
+  formQuery.value.pageSize = newPagination.rowsPerPage;
+  props?.fetchList?.();
+}
+
+watch(
+  [
+    () => formQuery.value.page,
+    () => formQuery.value.pageSize,
+    () => total.value,
+  ],
+  ([page, pageSize, total]) => {
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = pageSize;
+    pagination.value.rowsNumber = total;
+  }
+);
 </script>
 
 <template>
   <div class="col-12">
     <d-table
-      v-if="!isLoad"
       ref="table"
       :columns="columns"
       :rows="rows"
@@ -124,13 +146,14 @@ async function onClickApprove(type: string = "") {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       v-model:pagination="pagination"
-      @update:pagination="props.updatePagination"
       :selection="
         store.tabMainevaluator === '5' || store.tabMainevaluator === '6'
           ? 'none'
           : 'multiple'
       "
       v-model:selected="store.selected"
+      @request="onTableRequest"
+      :loading="isLoad"
     >
       <template v-slot:header-selection="scope">
         <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
@@ -211,22 +234,7 @@ async function onClickApprove(type: string = "") {
           </q-card>
         </div>
       </template>
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ total }} รายการ
-        <q-pagination
-          v-model="formQuery.page"
-          active-color="primary"
-          color="dark"
-          :max="Number(maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-          :max-pages="5"
-          @update:model-value="props.fetchList?.()"
-        ></q-pagination>
-      </template>
     </d-table>
-    <SkeletonTable v-else :columns="columns" />
   </div>
 
   <div class="row justify-end q-mt-md q-gutter-sm" v-if="rows.length !== 0">
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
index e09f04b..0ece278 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
@@ -13,8 +13,6 @@ import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import SkeletonTable from '@/components/SkeletonTable.vue'
-
 const dataListCapacityDetails = ref<ListCapacity[]>([]);
 const route = useRoute();
 const idParam = ref<string>(route.params.id as string);
@@ -483,7 +481,7 @@ watch(
                 </div>
                 <div class="col-xs-12 col-md-7">
                   <d-table
-                  v-if="!isLoadById"
+                    v-if="!isLoadById"
                     flat
                     bordered
                     dense
@@ -491,10 +489,12 @@ watch(
                     row-key="level"
                     virtual-scroll
                     :rows="dataListCapacityDetails"
+                    :rows-per-page-options="[100]"
                     hide-pagination
                     :columns="columns"
                     :visible-columns="visibleColumns"
-                    v-model:pagination="pagination"
+                    :pagination="pagination"
+                    :loading="isLoadById"
                   >
                     <template v-slot:header="props">
                       <q-tr :props="props">
@@ -558,7 +558,6 @@ watch(
                       </div>
                     </template>
                   </d-table>
-                  <SkeletonTable v-else :columns="columns"/>
                 </div>
               </div>
             </div>
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
index 93e38fd..3683b63 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -10,20 +10,10 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const store = useKpiDataStore();
 const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  findPosMasterNoOld,
-  findOrgNameOld,
-  findOrgNameOldHtml,
-  date2Thai,
-} = mixin;
+const { messageError, findOrgNameOldHtml, date2Thai } = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
 const filterKeyword = ref<string>("");
@@ -138,29 +128,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/** เเปลง status เป็น text */
-function statusText(val: string) {
-  switch (val) {
-    case "WAITTING":
-      return "รอดำเนินการ";
-    case "PENDING":
-      return "เลือกตำแหน่งแล้ว";
-    case "APPROVE":
-      return "อนุมัติ";
-    case "REJECT":
-      return "ไม่อนุมัติ";
-    case "REPORT":
-      return "ส่งรายชื่อไปออกคำสั่ง";
-    case "WAITING":
-      return "รอออกคำสั่ง";
-    case "DONE":
-      return "ออกคำสั่งเสร็จแล้ว";
-
-    default:
-      return "-";
-  }
-}
-
 /** ปิด dialog */
 function close() {
   modal.value = false;
@@ -174,7 +141,6 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
-      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
@@ -187,7 +153,7 @@ function getData() {
 watch(
   () => modal.value,
   (n) => {
-    if (n == true) {
+    if (n) {
       getData();
     }
   }
@@ -202,7 +168,6 @@ watch(
         <div class="row">
           <div class="col-12">
             <d-table
-              v-if="!isLoad"
               ref="table"
               :columns="columns"
               :rows="rows"
@@ -214,6 +179,8 @@ watch(
               dense
               :rows-per-page-options="[10, 25, 50, 100]"
               :visible-columns="visibleColumns"
+              :loading="isLoad"
+              :pagination="{ page: 1, rowsPerPage: 10 }"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -245,7 +212,6 @@ watch(
                 </q-tr>
               </template>
             </d-table>
-            <SkeletonTable v-else :columns="columns" />
           </div>
         </div>
       </q-card-section>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index f78de2c..82bb1a5 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { useQuasar } from "quasar";
+import { Loading, useQuasar } from "quasar";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -15,19 +15,16 @@ import DialogViewInfo from "@/modules/08_KPI/components/Tab/Dialog/DialogViewInf
 import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const store = useKpiDataStore();
-const { dialogRemove, showLoader, hideLoader, messageError, success } =
-  useCounterMixin();
+const { dialogRemove, messageError, success } = useCounterMixin();
 
 const checkDetail = ref<boolean>(false);
 const title = defineModel<string>("title", { required: true });
 const rows = defineModel<any>("data", { required: true });
 const numpage = defineModel<number>("page", { required: true });
 
-const isLoad = defineModel<boolean>('isLoad',{required:true})
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 const props = defineProps({
   fetchList: { type: Function, required: true },
 });
@@ -139,7 +136,7 @@ async function onEvaluate() {
 function onDelete(id: string) {
   dialogRemove($q, async () => {
     try {
-      isLoad.value = true
+      isLoad.value = true;
       const url =
         numpage.value === 1
           ? config.API.kpiAchievement("planned") + `/${id}`
@@ -243,12 +240,10 @@ const isEditStep3 = computed(() => {
     </q-card-section>
     <q-separator />
     <q-card-section class="q-pa-sm">
-      
       <d-table
-      v-if="!isLoad"
         ref="table"
         :columns="columns"
-        :rows="rows"
+        :rows="rows || []"
         :filter="filterKeyword"
         row-key="id"
         flat
@@ -257,7 +252,7 @@ const isEditStep3 = computed(() => {
         hide-pagination
         :visible-columns="visibleColumns"
         :rows-per-page-options="[20]"
-        no-data-label="ไม่มีข้อมูล"
+        :loading="isLoad"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -464,7 +459,6 @@ const isEditStep3 = computed(() => {
           </div>
         </template>
       </d-table>
-      <SkeletonTable v-else :columns="columns"/>
     </q-card-section>
   </q-card>
 
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index f16af00..ae426b5 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -22,8 +22,6 @@ import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Co
 import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
 import DialogCompetncyByRow from "@/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const modalLevel = ref<boolean>(false);
 const modalCompetncyByRow = ref<boolean>(false);
 const dataCompetncyByRow = ref<any[]>([]);
@@ -160,15 +158,14 @@ function onAdd(type: string) {
 
 /** ดึงข้อมูล */
 function getData(type: string) {
+  isLoad.value[type] = true;
   http
     .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
     .then(async (res) => {
       const data = res.data.result.data;
-      isLoad.value[type] = data ? true : false;
       rows.value[type] = data;
       lists.value = await lists.value.filter((x: any) => x.type != type);
       lists.value.push({ type: type, data });
-      isLoad.value[type] = false;
     })
     .catch((e) => {
       messageError($q, e);
@@ -220,6 +217,7 @@ function getData(type: string) {
               : 0;
         }
       }
+      isLoad.value[type] = false;
     });
 }
 
@@ -400,20 +398,21 @@ watch(
           </q-btn>
         </div>
       </q-card-section>
+
       <q-card-section class="q-pa-sm">
         <d-table
-          v-if="!isLoad[item.id]"
           ref="table"
           :columns="columns"
-          :rows="rows[item.id]"
+          :rows="rows[item.id] || []"
           row-key="id"
           flat
           bordered
           :paging="true"
           dense
           hide-pagination
-          no-data-label="ไม่มีข้อมูล"
           :visible-columns="visibleColumns"
+          :rows-per-page-options="[20]"
+          :loading="isLoad[item.id]"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -634,7 +633,6 @@ watch(
             </div>
           </template>
         </d-table>
-        <SkeletonTable v-else :columns="columns" />
       </q-card-section>
     </q-card>
   </div>
diff --git a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
index 42332cd..b8cd2dc 100644
--- a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
@@ -13,8 +13,6 @@ import DialogEvalutionDevelop from "@/modules/08_KPI/components/Tab/DialogEvalua
 import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const store = useKpiDataStore();
 const route = useRoute();
 const evaluationId = ref<string>(route.params.id.toString());
@@ -26,14 +24,7 @@ const idEditDevelop = ref<string>("");
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogRemove,
-  success,
-} = mixin;
+const { date2Thai, messageError, dialogRemove, success } = mixin;
 
 const isUpdate = defineModel("isUpdate", {
   type: Boolean,
@@ -248,7 +239,6 @@ onMounted(() => {
     </q-card-section>
     <q-card-section class="q-pa-sm">
       <d-table
-        v-if="!isLoad"
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -258,8 +248,9 @@ onMounted(() => {
         :paging="true"
         dense
         hide-pagination
-        no-data-label="ไม่มีข้อมูล"
+        :rows-per-page-options="[20]"
         :visible-columns="visibleColumns"
+        :loading="isLoad"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -507,8 +498,6 @@ onMounted(() => {
           </div>
         </template>
       </d-table>
-
-      <SkeletonTable v-else :columns="columns" />
     </q-card-section>
   </q-card>
 
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 2ed6ad9..c2c4350 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type { QTableProps } from "quasar";
 import type { DataProfile } from "@/interface/Main";
+import type { PropsTable } from "@/interface/PropsTable";
 import type {
   DataOptions,
   MainListKpi,
-  PaginationType,
 } from "@/modules/08_KPI/interface/index/Main";
 import type {
   RoundKpiResponse,
@@ -21,7 +21,6 @@ import type {
 } from "@/modules/08_KPI/interface/response/index";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -107,7 +106,6 @@ const columns = ref<QTableProps["columns"]>([
 /** List*/
 const year = ref<number>(new Date().getFullYear());
 const round = ref<string>("");
-const filterKeyword = ref<string>("");
 const roundMainOp = ref<DataOptions[]>([]);
 const roundDialgOp = ref<DataOptions[]>([]);
 
@@ -142,20 +140,18 @@ const formRound = reactive({
 
 /** pagetion*/
 const formQuery = reactive({
-  page: 1,
-  pageSize: 10,
   status: "",
   results: "",
 });
-const total = ref<number>(0);
-const totalList = ref<number>(1);
+
 const isRoundClose = ref<boolean>(false);
 
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "desc",
   descending: false,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
 
 /**
@@ -206,14 +202,12 @@ async function fetchRoundOption(type: string) {
     });
 }
 
-/**
- *  fetch รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
- */
+/** ฟังก์ชันดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล*/
 async function fetchList() {
   isLoad.value = true;
   let queryParams = {
-    page: formQuery.page,
-    pageSize: formQuery.pageSize,
+    page: pagination.value.page,
+    pageSize: pagination.value.rowsPerPage,
     kpiPeriodId: round.value,
     status: formQuery.status === "" ? undefined : formQuery.status,
     results: formQuery.results === "" ? undefined : formQuery.results,
@@ -225,21 +219,20 @@ async function fetchList() {
     })
     .then(async (res) => {
       const data = await res.data.result;
-      total.value = data.total;
-      totalList.value = Math.ceil(data.total / formQuery.pageSize);
+      pagination.value.rowsNumber = data.total;
       rows.value = data.data;
-      isLoad.value = false;
     })
     .catch((err) => {
-      isLoad.value = false;
       messageError($q, err);
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoad.value = false;
+    });
 }
 
 /** เลือกรอบการประเมิน */
 function changRound() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
   fetchList();
 }
 
@@ -333,15 +326,6 @@ function checkClosed() {
   isRoundClose.value = formRound.kpiPeriodId.isClosed;
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: PaginationType) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** ดึงข้อมูล option */
 function getOrgOp() {
   http
@@ -421,12 +405,16 @@ function filterOption(val: string, update: Function, refData: string) {
   }
 }
 
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchList();
-  }
-);
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  fetchList();
+}
 
 onMounted(async () => {
   await Promise.all([fetchRoundOption("main"), getOrgOp()]);
@@ -462,7 +450,7 @@ onMounted(async () => {
                   year-picker
                   :enableTimePicker="false"
                   @update:model-value="
-                    (formQuery.page = 1), fetchRoundOption('main')
+                    (pagination.page = 1), fetchRoundOption('main')
                   "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
@@ -557,7 +545,7 @@ onMounted(async () => {
                       outlined
                       use-input
                       input-debounce="0"
-                      @update:model-value="(formQuery.page = 1), fetchList()"
+                      @update:model-value="(pagination.page = 1), fetchList()"
                       :clearable="formQuery.status !== ''"
                       @clear="
                         (formQuery.status = ''),
@@ -589,7 +577,7 @@ onMounted(async () => {
                       lazy-rules
                       hide-bottom-space
                       outlined
-                      @update:model-value="(formQuery.page = 1), fetchList()"
+                      @update:model-value="(pagination.page = 1), fetchList()"
                       use-input
                       @clear="
                         (formQuery.results = ''),
@@ -615,11 +603,9 @@ onMounted(async () => {
 
             <div class="col-12">
               <d-table
-                v-if="!isLoad"
                 ref="table"
                 :columns="columns"
                 :rows="rows"
-                :filter="filterKeyword"
                 row-key="id"
                 flat
                 bordered
@@ -627,8 +613,9 @@ onMounted(async () => {
                 dense
                 :rows-per-page-options="[10, 25, 50, 100]"
                 :visible-columns="visibleColumns"
+                @request="onTableRequest"
                 v-model:pagination="pagination"
-                @update:pagination="updatePagination"
+                :loading="isLoad"
               >
                 <template v-slot:header="props">
                   <q-tr :props="props">
@@ -671,22 +658,7 @@ onMounted(async () => {
                     </q-card>
                   </div>
                 </template>
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ total }} รายการ
-                  <q-pagination
-                    v-model="formQuery.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="Number(totalList)"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                    :max-pages="5"
-                    @update:model-value="fetchList"
-                  ></q-pagination>
-                </template>
               </d-table>
-              <SkeletonTable v-else :columns="columns" />
             </div>
           </div>
         </q-card>
@@ -746,7 +718,7 @@ onMounted(async () => {
 
             <div class="col-12">
               <q-select
-              v-if="!isLoadDialog"
+                v-if="!isLoadDialog"
                 :readonly="yearDialog === null"
                 v-model="formRound.kpiPeriodId"
                 outlined
@@ -760,7 +732,7 @@ onMounted(async () => {
                 :rules="[(val:DataOptions) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
                 @update:model-value="checkClosed"
               />
-              <q-skeleton type="QInput" height="40px" v-else/>
+              <q-skeleton type="QInput" height="40px" v-else />
             </div>
 
             <div class="col-12">
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
index 81f91c0..b14600a 100644
--- a/src/modules/08_KPI/views/mainEvaluator.vue
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
@@ -9,10 +9,7 @@ import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
-import type {
-  DataOptions,
-  Pagination,
-} from "@/modules/08_KPI/interface/index/Main";
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 import type {
   ResRound,
   ResEvaluatorAssessor,
@@ -24,7 +21,7 @@ import TabOther from "@/modules/08_KPI/components/Evaluator/02_TabOther.vue";
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
-const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const { messageError, date2Thai } = useCounterMixin();
 
 const dataListMain = ref<ResEvaluatorAssessor[]>([]);
 
@@ -87,7 +84,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const totalList = ref<number>(0);
-const maxPage = ref<number>(1);
 
 /**
  * ดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
@@ -121,19 +117,19 @@ async function fetchRoundOption() {
         store.formQuery.round = roundOp.value[0].id;
         await fetchList();
       }
-      isLoadOp.value = false;
     })
     .catch((err) => {
       messageError($q, err);
-      isLoadOp.value = false;
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoadOp.value = false;
+    });
 }
 
 /** ดึงข้อมูล list */
-const isLoad = ref<boolean>(false)
+const isLoad = ref<boolean>(false);
 async function fetchList() {
-  isLoad.value = true
+  isLoad.value = true;
   const body = {
     page: store.formQuery.page,
     pageSize: store.formQuery.pageSize,
@@ -157,16 +153,15 @@ async function fetchList() {
     .post(config.API.kpiEvaluation + `/admin`, body)
     .then(async (res) => {
       const data = await res.data.result;
-      maxPage.value = Math.ceil(data.total / store.formQuery.pageSize);
       totalList.value = data.total;
       dataListMain.value = data.data;
-      isLoad.value = false
     })
     .catch((err) => {
       messageError($q, err);
-      isLoad.value = false
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoad.value = false;
+    });
 }
 
 /** เลือกรอบการประเมิน */
@@ -175,15 +170,6 @@ function changRound() {
   fetchList();
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  store.formQuery.page = 1;
-  store.formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** เปลี่ยน tab */
 async function onChangTab() {
   store.formQuery.page = 1;
@@ -192,13 +178,6 @@ async function onChangTab() {
   await fetchList();
 }
 
-watch(
-  () => store.formQuery.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
 onMounted(async () => {
   await fetchRoundOption();
 });
@@ -347,8 +326,6 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
                     :is-load="isLoad"
                   />
@@ -361,8 +338,6 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
                     :is-load="isLoad"
                   />
@@ -375,8 +350,6 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
                     :is-load="isLoad"
                   />
@@ -389,8 +362,6 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
                     :is-load="isLoad"
                   />
@@ -403,8 +374,6 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
                     :is-load="isLoad"
                   />
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index 44470f4..e9d3036 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -13,10 +13,8 @@ import type {
   Scholarship,
 } from "@/modules/09_scholarship/interface/index/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 const router = useRouter();
 
 const $q = useQuasar();
@@ -88,7 +86,7 @@ const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
 
 /** ดึงข้อมูล */
 async function getData() {
-  
+  isLoad.value = true;
   await http
     .get(
       config.API.developmentScholarship +
@@ -96,13 +94,12 @@ async function getData() {
     )
     .then(async (res) => {
       rows.value = res.data.result;
-      isLoad.value = false
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      isLoad.value = false
+      isLoad.value = false;
     });
 }
 
@@ -110,42 +107,22 @@ function onEdit(id: string) {
   router.push(`/scholarship/${id}`);
 }
 
-// watch(
-//   () => currentPage.value,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     getData();
-//   }
-// );
-
-// watch(
-//   () => pagination.value.rowsPerPage,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     currentPage.value = 1;
-//     getData();
-//   }
-// );
-
 async function getProfileId() {
-  isLoad.value = true
+  isLoad.value = true;
   if (dataStore.profileId) {
     profilId.value = dataStore.profileId;
   } else {
-    
     try {
       const res = await http.get(config.API.profilePosition());
       dataStore.profileId = res.data.result.profileId;
       profilId.value = dataStore.profileId;
-      
+      await getData();
     } catch (e) {
       messageError($q, e);
     } finally {
-      
+      isLoad.value = false;
     }
   }
-
-  await getData();
 }
 
 function convertType(val: string) {
@@ -259,9 +236,8 @@ onMounted(async () => {
             />
           </div>
 
-          <div>
+          <div class="col-12">
             <d-table
-              v-if="!isLoad"
               flat
               bordered
               dense
@@ -270,21 +246,9 @@ onMounted(async () => {
               :columns="columns"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
+              :pagination="pagination"
+              :loading="isLoad"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
@@ -346,7 +310,6 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
-            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>
diff --git a/src/modules/10_registry/01_Information/01_Information.vue b/src/modules/10_registry/01_Information/01_Information.vue
index 393767a..9e30df3 100644
--- a/src/modules/10_registry/01_Information/01_Information.vue
+++ b/src/modules/10_registry/01_Information/01_Information.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from "vue";
-import { is, useQuasar, type QTableProps } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
diff --git a/src/modules/10_registry/01_Information/02_ChangeName.vue b/src/modules/10_registry/01_Information/02_ChangeName.vue
index b9fe939..0a7a972 100644
--- a/src/modules/10_registry/01_Information/02_ChangeName.vue
+++ b/src/modules/10_registry/01_Information/02_ChangeName.vue
@@ -10,9 +10,6 @@ import config from "@/app.config";
 import { useQuasar, type QTableProps } from "quasar";
 import type { ChangNameRows } from "@/modules/10_registry/interface/response/01_Information";
 
-/** import component */
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const dataStore = useDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
@@ -194,23 +191,21 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <div v-if="isLoading">
-      <SkeletonTable :columns="columns" />
-    </div>
-
-    <div class="col-12" v-else>
+    <div class="col-12">
       <d-table
         flat
         dense
         bordered
         virtual-scroll
+        row-key="id"
         :rows="rows.length !== 0 ? rows : []"
         :columns="columns"
         :grid="!mode"
         :rows-per-page-options="[10, 25, 50, 100]"
         :visible-columns="visibleColumns"
         :virtual-scroll-sticky-size-start="48"
-        v-model:pagination="pagination"
+        :pagination="pagination"
+        :loading="isLoading"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
diff --git a/src/modules/10_registry/01_Information/05_Educations.vue b/src/modules/10_registry/01_Information/05_Educations.vue
index 7e5d2b8..4bff039 100644
--- a/src/modules/10_registry/01_Information/05_Educations.vue
+++ b/src/modules/10_registry/01_Information/05_Educations.vue
@@ -10,7 +10,6 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { EducationProfile } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const link = ref<string>("");
 const $q = useQuasar();
@@ -530,7 +529,7 @@ function onHistory(id: string) {
 
 /** get history */
 async function getHistory() {
-  isLoadingHistory.value = true
+  isLoadingHistory.value = true;
   rowsHistory.value = [];
   rowsHistoryData.value = [];
   await http
@@ -601,9 +600,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -611,9 +608,12 @@ onMounted(async () => {
       :rows="rows.length !== 0 ? rows : []"
       :columns="columns"
       :grid="!mode"
-      :rows-per-page-options="[10, 25, 50, 100]"
+      :rows-per-page-options="[1, 10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      :loading="isLoading"
+      row-key="id"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/01_Information/06_Ability.vue b/src/modules/10_registry/01_Information/06_Ability.vue
index 77d35ed..bc77c5b 100644
--- a/src/modules/10_registry/01_Information/06_Ability.vue
+++ b/src/modules/10_registry/01_Information/06_Ability.vue
@@ -12,7 +12,6 @@ import type { AbilityRows } from "@/modules/10_registry/interface/index/Main";
 
 /** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataStore = useDataStore();
@@ -317,9 +316,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -330,7 +327,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/02_Government/02_Discipline.vue b/src/modules/10_registry/02_Government/02_Discipline.vue
index b81e3b6..7ac9611 100644
--- a/src/modules/10_registry/02_Government/02_Discipline.vue
+++ b/src/modules/10_registry/02_Government/02_Discipline.vue
@@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 import type { DisciplineDetail } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataStore = useDataStore();
@@ -254,9 +253,8 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <SkeletonTable v-if="isLoading" :columns="columns" />
+
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -267,7 +265,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -321,6 +321,7 @@ onMounted(async () => {
           </q-td>
         </q-tr>
       </template>
+
       <template v-else v-slot:item="props">
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
diff --git a/src/modules/10_registry/02_Government/03_Leave.vue b/src/modules/10_registry/02_Government/03_Leave.vue
index 6d2c188..8202f19 100644
--- a/src/modules/10_registry/02_Government/03_Leave.vue
+++ b/src/modules/10_registry/02_Government/03_Leave.vue
@@ -10,7 +10,6 @@ import { useDataStore } from "@/stores/data";
 import type { LeaveFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataStore = useDataStore();
@@ -396,9 +395,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -409,7 +406,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/02_Government/04_Duty.vue b/src/modules/10_registry/02_Government/04_Duty.vue
index 1e70102..4a6ff94 100644
--- a/src/modules/10_registry/02_Government/04_Duty.vue
+++ b/src/modules/10_registry/02_Government/04_Duty.vue
@@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataStore = useDataStore();
@@ -358,9 +357,8 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <SkeletonTable v-if="isLoading" :columns="columns" />
+
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -371,7 +369,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/02_Government/05_Actposition.vue b/src/modules/10_registry/02_Government/05_Actposition.vue
index f40a034..5dff8e9 100644
--- a/src/modules/10_registry/02_Government/05_Actposition.vue
+++ b/src/modules/10_registry/02_Government/05_Actposition.vue
@@ -11,7 +11,6 @@ import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
 
 /** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataStore = useDataStore();
@@ -287,9 +286,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -300,7 +297,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/02_Government/06_Assistance.vue b/src/modules/10_registry/02_Government/06_Assistance.vue
index 1aa5d00..ac7adc5 100644
--- a/src/modules/10_registry/02_Government/06_Assistance.vue
+++ b/src/modules/10_registry/02_Government/06_Assistance.vue
@@ -11,7 +11,6 @@ import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
 
 /** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 
@@ -368,9 +367,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -381,7 +378,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index b406670..8ee5ed1 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -14,7 +14,6 @@ import type {
 
 /**import components*/
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -526,9 +525,7 @@ onMounted(async () => {
     </div>
 
     <div class="col-12 q-mt-sm">
-      <SkeletonTable v-if="isLoading.position" :columns="columns" />
       <d-table
-        v-else
         flat
         dense
         bordered
@@ -539,6 +536,9 @@ onMounted(async () => {
         :rows-per-page-options="[10, 25, 50, 100]"
         :visible-columns="visibleColumns"
         :virtual-scroll-sticky-size-start="48"
+        :isLoading="isLoading.position"
+        row-key="id"
+        :pagination="{ page: 1, rowsPerPage: 10 }"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index f5bf3a7..3ec4a9f 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -10,7 +10,6 @@ import { useDataStore } from "@/stores/data";
 import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -729,19 +728,20 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
       virtual-scroll
+      row-key="id"
       :rows="rows.length !== 0 ? rows : []"
       :columns="columns"
       :grid="!mode"
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      :loading="isLoading"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -765,7 +765,11 @@ onMounted(async () => {
             <div v-else-if="col.name == 'status'">
               {{ props.row.status ? props.row.status : "-" }}
             </div>
-            <div v-else-if="col.name == 'organization'" class="text-html">
+            <div
+              v-else-if="col.name == 'organization'"
+              class="text-html"
+              style="width: 200px"
+            >
               {{
                 props.row
                   ? findOrgNameHtml({
diff --git a/src/modules/10_registry/03_Salary/02_Nopaid.vue b/src/modules/10_registry/03_Salary/02_Nopaid.vue
index dba0590..a74d946 100644
--- a/src/modules/10_registry/03_Salary/02_Nopaid.vue
+++ b/src/modules/10_registry/03_Salary/02_Nopaid.vue
@@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 import type { NopaidFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -340,9 +339,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -353,7 +350,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/01_Certificate.vue b/src/modules/10_registry/04_Achievement/01_Certificate.vue
index e2e18ee..6266c34 100644
--- a/src/modules/10_registry/04_Achievement/01_Certificate.vue
+++ b/src/modules/10_registry/04_Achievement/01_Certificate.vue
@@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 import type { CertificateDetail } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -338,10 +337,8 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <SkeletonTable v-if="isLoading" :columns="columns" />
 
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -352,7 +349,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/02_Training.vue b/src/modules/10_registry/04_Achievement/02_Training.vue
index 2c8af97..2fd80b1 100644
--- a/src/modules/10_registry/04_Achievement/02_Training.vue
+++ b/src/modules/10_registry/04_Achievement/02_Training.vue
@@ -11,7 +11,6 @@ import type { TrainingFormType } from "@/modules/10_registry/interface/index/Mai
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -447,9 +446,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -460,7 +457,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/03_Insignia.vue b/src/modules/10_registry/04_Achievement/03_Insignia.vue
index e673745..e2dadc0 100644
--- a/src/modules/10_registry/04_Achievement/03_Insignia.vue
+++ b/src/modules/10_registry/04_Achievement/03_Insignia.vue
@@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 import type { InsigniaFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -555,9 +554,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -568,7 +565,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/04_Honor.vue b/src/modules/10_registry/04_Achievement/04_Honor.vue
index 4156734..6801fd2 100644
--- a/src/modules/10_registry/04_Achievement/04_Honor.vue
+++ b/src/modules/10_registry/04_Achievement/04_Honor.vue
@@ -12,7 +12,6 @@ import type { HonorFormData } from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -339,9 +338,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -352,7 +349,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/05_Assessments.vue b/src/modules/10_registry/04_Achievement/05_Assessments.vue
index a005256..83ba483 100644
--- a/src/modules/10_registry/04_Achievement/05_Assessments.vue
+++ b/src/modules/10_registry/04_Achievement/05_Assessments.vue
@@ -13,7 +13,6 @@ import type {
 } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -473,9 +472,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -486,7 +483,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
index 683ec42..e114c76 100644
--- a/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
+++ b/src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue
@@ -8,7 +8,6 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
 import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -209,9 +208,8 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <SkeletonTable v-if="isLoading" :columns="columns" />
+
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -222,6 +220,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
diff --git a/src/modules/10_registry/05_Other/01_Other.vue b/src/modules/10_registry/05_Other/01_Other.vue
index ecb81c5..819930c 100644
--- a/src/modules/10_registry/05_Other/01_Other.vue
+++ b/src/modules/10_registry/05_Other/01_Other.vue
@@ -10,7 +10,6 @@ import { useDataStore } from "@/stores/data";
 import type { OtherFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -232,9 +231,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -245,7 +242,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -276,6 +275,7 @@ onMounted(async () => {
           </q-td>
         </q-tr>
       </template>
+
       <template v-else v-slot:item="props">
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
@@ -308,13 +308,6 @@ onMounted(async () => {
           </q-card>
         </div>
       </template>
-      <template v-slot:no-data>
-        <div
-          class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-        >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
     </d-table>
   </div>
 
diff --git a/src/modules/10_registry/Dialog/DialogHistory.vue b/src/modules/10_registry/Dialog/DialogHistory.vue
index 0696184..03afa18 100644
--- a/src/modules/10_registry/Dialog/DialogHistory.vue
+++ b/src/modules/10_registry/Dialog/DialogHistory.vue
@@ -8,7 +8,6 @@ import type { QTableProps } from "quasar";
 
 /** import component */
 import DialogHeader from "@/components/DialogHeader.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const { date2Thai, onSearchDataTable, findOrgNameHtml } = useCounterMixin();
 
@@ -129,11 +128,8 @@ watch(
             />
           </div>
         </div>
-        <div v-if="isLoading">
-          <SkeletonTable :columns="columns" />
-        </div>
 
-        <div v-else class="col-12">
+        <div class="col-12">
           <d-table
             flat
             dense
@@ -144,7 +140,9 @@ watch(
             :rows-per-page-options="[10, 25, 50, 100]"
             :visible-columns="visibleColumns"
             :virtual-scroll-sticky-size-start="48"
-            v-model:pagination="pagination"
+            :pagination="pagination"
+            :loading="isLoading"
+            row-key="id"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -262,13 +260,6 @@ watch(
                 </q-card>
               </div>
             </template>
-            <template v-slot:no-data>
-              <div
-                class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-              >
-                <span> ไม่พบข้อมูล </span>
-              </div>
-            </template>
           </d-table>
         </div>
       </q-card-section>
diff --git a/src/modules/10_registry/views/requestEditMain.vue b/src/modules/10_registry/views/requestEditMain.vue
index 22121dd..4f689a0 100644
--- a/src/modules/10_registry/views/requestEditMain.vue
+++ b/src/modules/10_registry/views/requestEditMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -11,15 +11,12 @@ import { useCounterMixin } from "@/stores/mixin";
 
 /**importType*/
 import type { QTableProps } from "quasar";
-import type {
-  DataOption,
-  NewPagination,
-} from "@/modules/10_registry/interface/index/Main";
+import type { PropsTable } from "@/interface/PropsTable";
+import type { DataOption } from "@/modules/10_registry/interface/index/Main";
 import type { DataRequest } from "@/modules/10_registry/interface/response/Main";
 
 /** importComponents*/
 import DialogAddRequestEdit from "@/modules/10_registry/components/DialogAddRequestEdit.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use */
 const $q = useQuasar();
@@ -38,10 +35,6 @@ const isLoading = ref<boolean>(false);
 
 /** Table*/
 const rows = ref<DataRequest[]>([]);
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const rowsTotal = ref<number>(0);
-const maxPage = ref<number>(0);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -110,10 +103,11 @@ const visibleColumns = ref<string[]>([
   "status",
   "remark",
 ]);
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   descending: true,
-  page: page.value,
-  rowsPerPage: pageSize.value,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 0,
 });
 
 /** function กลับไปหน้าทะเบียนประวัติ*/
@@ -129,8 +123,8 @@ function onClickAdd() {
 /** function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล*/
 async function fetchListRequset() {
   let queryParams = {
-    page: page.value,
-    pageSize: pageSize.value,
+    page: pagination.value.page,
+    pageSize: pagination.value.rowsPerPage,
     status: status.value,
     keyword: keyword.value,
   };
@@ -140,10 +134,9 @@ async function fetchListRequset() {
       params: queryParams,
     })
     .then((res) => {
-      const data = res.data.result;
-      maxPage.value = Math.ceil(data.total / pageSize.value);
-      rowsTotal.value = data.total;
-      rows.value = data.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -155,7 +148,7 @@ async function fetchListRequset() {
 
 /** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
-  page.value = 1;
+  pagination.value.page = 1;
   fetchListRequset();
 }
 
@@ -180,21 +173,16 @@ function filterOption(val: string, update: Function) {
 }
 
 /**
- * function อัพเดทขนาดหน้าใน pagination
- * @param newPagination ข้อมูลใหม่ของ pagination
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
  */
-function updatePageSizePagination(newPagination: NewPagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  fetchListRequset();
 }
 
-watch(
-  () => pageSize.value,
-  () => {
-    fetchListRequset();
-  }
-);
-
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
   fetchListRequset();
@@ -298,17 +286,16 @@ onMounted(async () => {
           </div>
         </div>
         <div class="col-12">
-          <SkeletonTable v-if="isLoading" :columns="columns" />
           <d-table
-            v-else
             :columns="columns"
             :rows="rows"
             row-key="id"
             :rows-per-page-options="[10, 25, 50, 100]"
             :paging="true"
             :visible-columns="visibleColumns"
-            @update:pagination="updatePageSizePagination"
             v-model:pagination="pagination"
+            :loading="isLoading"
+            @request="onTableRequest"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -338,20 +325,6 @@ onMounted(async () => {
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ rowsTotal }} รายการ
-              <q-pagination
-                v-model="page"
-                active-color="primary"
-                color="dark"
-                :max="Number(maxPage)"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-                @update:model-value="fetchListRequset()"
-              ></q-pagination>
-            </template>
           </d-table>
         </div>
       </q-card>
diff --git a/src/modules/11_probation/views/mainDetail.vue b/src/modules/11_probation/views/mainDetail.vue
index a663b31..cd6b60c 100644
--- a/src/modules/11_probation/views/mainDetail.vue
+++ b/src/modules/11_probation/views/mainDetail.vue
@@ -14,18 +14,10 @@ import type {
   ProbationFormType,
 } from "@/modules/11_probation/interface/index/main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  messageError,
-  findOrgName,
-  showLoader,
-  hideLoader,
-  date2Thai,
-  onSearchDataTable,
-} = mixin;
+const { messageError, findOrgName, hideLoader, date2Thai, onSearchDataTable } =
+  mixin;
 
 const profileId = ref<string>("");
 const rows = ref<ListMain[]>([]);
@@ -312,7 +304,10 @@ onMounted(async () => {
             </div>
             <q-resize-observer @resize="onResize" />
             <q-card-section>
-              <div class="text-center q-mt-md" style="display: flex;justify-content: center;">
+              <div
+                class="text-center q-mt-md"
+                style="display: flex; justify-content: center"
+              >
                 <q-avatar v-if="!isLoad" :size="sizeImg" rounded>
                   <img
                     :src="profileImg"
@@ -397,7 +392,6 @@ onMounted(async () => {
             </div>
             <div class="q-mt-sm">
               <d-table
-                v-if="!isLoad"
                 flat
                 dense
                 bordered
@@ -409,6 +403,8 @@ onMounted(async () => {
                 :rows-per-page-options="[10, 25, 50, 100]"
                 :visible-columns="visibleColumns"
                 :virtual-scroll-sticky-size-start="48"
+                :pagination="{ page: 1, rowsPerPage: 10 }"
+                :loading="isLoad"
               >
                 <template v-slot:header="props">
                   <q-tr :props="props">
@@ -471,15 +467,7 @@ onMounted(async () => {
                     </q-card>
                   </div>
                 </template>
-                <template v-slot:no-data>
-                  <div
-                    class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-                  >
-                    <span> ไม่พบข้อมูล </span>
-                  </div>
-                </template>
               </d-table>
-              <SkeletonTable v-else :columns="columns" />
             </div>
           </q-card>
         </div>
diff --git a/src/modules/13_portfolio/views/Main.vue b/src/modules/13_portfolio/views/Main.vue
index 0d243e2..040dc4b 100644
--- a/src/modules/13_portfolio/views/Main.vue
+++ b/src/modules/13_portfolio/views/Main.vue
@@ -10,8 +10,6 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { PortfolioRowsType } from "@/modules/13_portfolio/interface/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -115,7 +113,6 @@ function onDelete(id: string) {
   });
 }
 
-
 /** ฟังก์ชั่นค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
@@ -125,6 +122,10 @@ function onSearch() {
   );
 }
 
+function onTableRequest() {
+  console.log(1111);
+}
+
 /** Hook Lifecycle */
 onMounted(async () => {
   await fecthList();
@@ -199,35 +200,21 @@ onMounted(async () => {
             </div>
           </div>
 
-          <SkeletonTable v-if="isLoading" :columns="columns" />
-          <div class="col-12" v-else>
+          <div class="col-12">
             <d-table
               flat
               bordered
               dense
               :paging="true"
               row-key="id"
-              class="custom-table2"
-              style="max-height: 80vh"
               :rows="rows"
               :columns="columns"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
+              :pagination="pagination"
+              :loading="isLoading"
+              @request="onTableRequest"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index 79f0951..5d84827 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -8,10 +8,9 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store"; // ดึง store IDP
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -23,13 +22,12 @@ const filterKeyword = ref<string>("");
 const status = ref<string>("ALL"); // สถานะคำร้อง
 const statusOptions = ref<DataOption[]>(store.optionStatus);
 const rows = ref<RowsListMain[]>([]);
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "createdAt",
   descending: true,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
 const visibleColumns = ref<string[]>([
   "no",
@@ -186,11 +184,9 @@ async function getListData() {
   `
     )
     .then(async (res) => {
-      const data = await res.data.result.data;
-      const dataTotal = await res.data.result.total;
-      totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
-      total.value = dataTotal;
-      rows.value = data;
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -245,10 +241,15 @@ async function downloadUrl(id: string, fileName: string) {
     });
 }
 
-/** เมื่อมีการเปลี่ยน แถว ดึงข้อมูลใหม่ */
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  getListData();
 }
 
 /**
@@ -264,13 +265,6 @@ function getSerach() {
   getListData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await getListData();
-  }
-);
-
 onMounted(async () => {
   await getListData();
 });
@@ -366,17 +360,16 @@ onMounted(async () => {
           </div>
 
           <div class="col-12">
-            <SkeletonTable v-if="isLoading" :columns="columns" />
             <d-table
-              v-else
               :columns="columns"
               :rows="rows"
               row-key="id"
               :paging="true"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePagination"
+              @request="onTableRequest"
               v-model:pagination="pagination"
+              :loading="isLoading"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -459,20 +452,6 @@ onMounted(async () => {
                   </q-td>
                 </q-tr>
               </template>
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ total }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(totalList)"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                  @update:model-value="getListData()"
-                ></q-pagination>
-              </template>
             </d-table>
           </div>
         </q-card>

From 31755747da4b1d1928f40abadc20d17104a482f9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 29 Aug 2025 15:06:58 +0700
Subject: [PATCH 184/195] =?UTF-8?q?fix=20=3D=3D>=20=E0=B9=82=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=94=E0=B9=84=E0=B8=9F=E0=B8=A5=E0=B9=8C=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=E0=B8=A3=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=88=E0=B9=89?=
 =?UTF-8?q?=E0=B8=87=E0=B9=80=E0=B8=95=E0=B8=B7=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PopupDetailInbox.vue        | 38 +++++++++++++++++++---
 src/modules/01_dashboard/interface/Main.ts |  9 ++++-
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/components/PopupDetailInbox.vue b/src/components/PopupDetailInbox.vue
index 29e7647..986a733 100644
--- a/src/components/PopupDetailInbox.vue
+++ b/src/components/PopupDetailInbox.vue
@@ -1,8 +1,18 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import genReport from "@/plugins/genreport";
+import { useCounterMixin } from "@/stores/mixin";
 
 import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
 
+import type { Attachments } from "@/modules/01_dashboard/interface/Main";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
 const props = defineProps({
   modal: {
     type: Boolean,
@@ -60,9 +70,29 @@ watch(
 
 const modalReply = ref<boolean>(false);
 
-function fileOpen(url: string) {
-  window.open(url, "_blank");
-}
+const fileOpen = async (attachmentsData: Attachments) => {
+  if (attachmentsData.isReport) {
+    showLoader();
+    await http
+      .get(attachmentsData.url)
+      .then(async (res) => {
+        const result = res.data;
+        if (attachmentsData.isTemplate) {
+          await genReport(result.result, attachmentsData.name, "pdf");
+        } else {
+          window.open(result.downloadUrl, "_blank");
+        }
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  } else {
+    window.open(attachmentsData.url, "_blank");
+  }
+};
 </script>
 <template>
   <q-dialog v-model="modal">
@@ -116,7 +146,7 @@ function fileOpen(url: string) {
               v-for="(item, index) in detail.payload.attachments"
               :key="index"
             >
-              <q-item clickable v-close-popup @click.stop="fileOpen(item.url)">
+              <q-item clickable v-close-popup @click.stop="fileOpen(item)">
                 <q-item-section>{{ item.name }}</q-item-section>
               </q-item>
               <q-separator />
diff --git a/src/modules/01_dashboard/interface/Main.ts b/src/modules/01_dashboard/interface/Main.ts
index faddc39..70cdcec 100644
--- a/src/modules/01_dashboard/interface/Main.ts
+++ b/src/modules/01_dashboard/interface/Main.ts
@@ -31,4 +31,11 @@ interface MenuMainList {
   active: boolean;
 }
 
-export type { InboxList, InboxDetail, MenuMainList };
+interface Attachments {
+  name: string;
+  url: string;
+  isReport: boolean;
+  isTemplate: boolean;
+}
+
+export type { InboxList, InboxDetail, MenuMainList, Attachments };

From e28e9bc3aade192d749a926d3134f0e105b3b599 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 1 Sep 2025 11:25:56 +0700
Subject: [PATCH 185/195] fix bug ==> loading

---
 .../05_leave/components/FormLeave/Form.vue     |  6 +-----
 src/modules/05_leave/components/ListView.vue   |  2 +-
 src/modules/05_leave/components/Table.vue      |  1 -
 src/modules/07_appealComplain/views/Main.vue   |  6 +-----
 src/modules/09_scholarship/views/main.vue      | 18 ++++++++----------
 src/modules/14_IDP/views/main.vue              |  6 +-----
 6 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index b366057..db9bd7b 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -404,11 +404,7 @@ function getSearch() {
                       :props="props"
                     >
                       <div v-if="col.name == 'no'">
-                        {{
-                          (pagination.page - 1) * pagination.rowsPerPage +
-                          props.rowIndex +
-                          1
-                        }}
+                        {{ props.rowIndex + 1 }}
                       </div>
                       <div v-else>
                         {{ col.value ? col.value : "-" }}
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index 3dbefca..3f4235a 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -197,7 +197,7 @@ onMounted(async () => {
           :props="props"
           @click="onClickView(props.row.id, props.row.status)"
         >
-          {{ (page - 1) * pageSize + props.rowIndex + 1 }}
+          {{ props.rowIndex + 1 }}
         </q-td>
         <q-td
           key="leaveTypeName"
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index 1c9f499..4a11409 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -261,7 +261,6 @@ function onTableRequest(requestProps: PropsTable.RequestProps) {
       :virtual-scroll-sticky-size-start="48"
       dense
       :rows-per-page-options="[10, 25, 50, 100]"
-      D
       v-model:pagination="pagination"
       @request="onTableRequest"
       :grid="$q.screen.gt.xs ? false : true"
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index 8acf2e3..c9163c1 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -398,11 +398,7 @@ onMounted(async () => {
                       @click.stop.prevent="editPage(props.row.id)"
                     >
                       <div v-if="col.name == 'no'">
-                        {{
-                          (pagination.page - 1) * pagination.rowsPerPage +
-                          props.rowIndex +
-                          1
-                        }}
+                        {{ props.rowIndex + 1 }}
                       </div>
 
                       <div v-else>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index e9d3036..0d873c6 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -109,19 +109,17 @@ function onEdit(id: string) {
 
 async function getProfileId() {
   isLoad.value = true;
-  if (dataStore.profileId) {
-    profilId.value = dataStore.profileId;
-  } else {
-    try {
+  try {
+    if (!dataStore.profileId) {
       const res = await http.get(config.API.profilePosition());
       dataStore.profileId = res.data.result.profileId;
-      profilId.value = dataStore.profileId;
-      await getData();
-    } catch (e) {
-      messageError($q, e);
-    } finally {
-      isLoad.value = false;
     }
+    profilId.value = dataStore.profileId;
+    await getData();
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    isLoad.value = false;
   }
 }
 
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index 5d84827..e29f30e 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -395,11 +395,7 @@ onMounted(async () => {
                     "
                   >
                     <div v-if="col.name == 'no'">
-                      {{
-                        (pagination.page - 1) * pagination.rowsPerPage +
-                        props.rowIndex +
-                        1
-                      }}
+                      {{ props.rowIndex + 1 }}
                     </div>
                     <div v-else-if="col.name === 'document'">
                       <q-btn

From 5969c62363eae1f984f0f02892ea1e4da71a9e30 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 3 Sep 2025 15:26:39 +0700
Subject: [PATCH 186/195] fix: bug code

---
 src/app.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.config.ts b/src/app.config.ts
index 34a4e5d..31f3f81 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -34,7 +34,7 @@ const API = {
   ...reports,
 };
 
-const path = import.meta.env.VITE_MANUAL_URL ?? "e";
+const path = import.meta.env.VITE_MANUAL_URL ?? "";
 
 /**
  * ไปหน้าคู่มือ

From 54699486cc622dcd6b0a360f4d23aef2ab6d49bf Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 5 Sep 2025 15:21:26 +0700
Subject: [PATCH 187/195] workflow

---
 .github/workflows/release.yaml | 122 +++++++++------------------------
 1 file changed, 33 insertions(+), 89 deletions(-)

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 0a6e50d..c4746ff 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -1,106 +1,50 @@
-name: release
-run-name: release ${{ github.actor }}
+# /.forgejo/workflows/build.yml
+name: Build
+
 on:
   push:
     tags:
-      - "version-[0-9]+.[0-9]+.[0-9]+"
+      - "v[0-9]+.[0-9]+.[0-9]+"
+      - "v[0-9]+.[0-9]+.[0-9]+*"
   workflow_dispatch:
+
 env:
-  REGISTRY: docker.frappet.com
-  IMAGE_NAME: ehr/bma-ehr-user
-  DEPLOY_HOST: frappet.com
-  COMPOSE_PATH: /home/frappet/docker/bma/bma-ehr-user
+  REGISTRY: ${{ vars.CONTAINER_REGISTRY }}
+  REGISTRY_USERNAME: ${{ vars.CONTAINER_REGISTRY_USERNAME }}
+  REGISTRY_PASSWORD: ${{ secrets.CONTAINER_REGISTRY_PASSWORD }}
+  CONTAINER_IMAGE_NAME: ${{ vars.CONTAINER_REGISTRY }}/${{ vars.CONTAINER_IMAGE_OWNER }}/${{ vars.CONTAINER_IMAGE_NAME }}
+  IMAGE_VERSION: build
 
 jobs:
-  # act workflow_dispatch -W .github/workflows/release.yaml --input IMAGE_VER=test-v6.1 -s DOCKER_USER=sorawit -s DOCKER_PASS=P@ssword -s SSH_PASSWORD=P@ssw0rd
-  release:
+  build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      # skip Set up QEMU because it fail on act and container
-      # Gen Version try to get version from tag or inut
-      - name: Set output tags
-        id: vars
-        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
-      - name: Gen Version
-        id: gen_ver
-        run: |
-          if [[ $GITHUB_REF == 'refs/tags/'* ]]; then
-            IMAGE_VER=${{ steps.vars.outputs.tag }}
-          else
-            IMAGE_VER=${{ github.event.inputs.IMAGE_VER }}
-          fi
-          if [[ $IMAGE_VER == '' ]]; then
-            IMAGE_VER='test-vBeta'
-          fi
-          echo '::set-output name=image_ver::'$IMAGE_VER
-      - name: Test Version
-        run: |
-          echo $GITHUB_REF
-          echo ${{ steps.gen_ver.outputs.image_ver }}
+      - name: Checkout repository
+        uses: actions/checkout@v4
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
+        with:
+          config-inline: |
+            [registry."${{ env.REGISTRY }}"]
+              ca=["/etc/ssl/certs/ca-certificates.crt"]
+      - name: Tag Version
+        run: |
+          if [[ "${{ github.event_name }}" == "push" ]]; then
+            echo "IMAGE_VERSION=${{ github.ref_name }}" | sed 's/v//g' >> $GITHUB_ENV
+          else
+            echo "IMAGE_VERSION=${{ env.IMAGE_VERSION }}-${{ github.run_number }}" >> $GITHUB_ENV
+          fi
       - name: Login in to registry
         uses: docker/login-action@v2
         with:
-          registry: ${{env.REGISTRY}}
-          username: ${{secrets.DOCKER_USER}}
-          password: ${{secrets.DOCKER_PASS}}
-      - name: Build and load local docker image
+          registry: ${{ env.REGISTRY }}
+          username: ${{ env.REGISTRY_USERNAME }}
+          password: ${{ env.REGISTRY_PASSWORD }}
+      - name: Build and push docker image
         uses: docker/build-push-action@v3
         with:
-          context: .
           platforms: linux/amd64
-          file: docker/Dockerfile
-          push: true
-          tags: ${{env.REGISTRY}}/${{env.IMAGE_NAME}}:${{ steps.gen_ver.outputs.image_ver }},${{env.REGISTRY}}/${{env.IMAGE_NAME}}:latest
-
-      - name: Reload docker compose
-        uses: appleboy/ssh-action@v0.1.8
-        with:
-          host: ${{env.DEPLOY_HOST}}
-          username: frappet
-          password: ${{ secrets.SSH_PASSWORD }}
-          port: 10102
-          script: |
-            cd "${{env.COMPOSE_PATH}}"
-            docker compose pull
-            docker compose up -d
-            echo "${{ steps.gen_ver.outputs.image_ver }}"> success
-      - name: Notify Discord Success
-        if: success()
-        run: |
-          curl -H "Content-Type: application/json" \
-          -X POST \
-          -d '{
-            "embeds": [{
-              "title": "✅ Deployment Success!",
-              "description": "**Details:**\n- Image: `${{env.IMAGE_NAME}}`\n- Version: `${{ steps.gen_ver.outputs.image_ver }}`\n- Deployed by: `${{github.actor}}`",
-              "color": 3066993,
-              "footer": {
-                "text": "Release Notification",
-                "icon_url": "https://example.com/success-icon.png"
-              },
-              "timestamp": "'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"
-            }]
-          }' \
-          ${{ secrets.DISCORD_WEBHOOK }}
-
-      - name: Notify Discord Failure
-        if: failure()
-        run: |
-          curl -H "Content-Type: application/json" \
-          -X POST \
-          -d '{
-            "embeds": [{
-              "title": "❌ Deployment Failed!",
-              "description": "**Details:**\n- Image: `${{env.IMAGE_NAME}}`\n- Version: `${{ steps.gen_ver.outputs.image_ver }}`\n- Attempted by: `${{github.actor}}`",
-              "color": 15158332,
-              "footer": {
-                "text": "Release Notification",
-                "icon_url": "https://example.com/failure-icon.png"
-              },
-              "timestamp": "'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"
-            }]
-          }' \
-          ${{ secrets.DISCORD_WEBHOOK }}
\ No newline at end of file
+          context: .
+          file: ./docker/Dockerfile
+          tags: ${{ env.CONTAINER_IMAGE_NAME }}:latest,${{ env.CONTAINER_IMAGE_NAME }}:${{ env.IMAGE_VERSION }}
+          push: true
\ No newline at end of file

From 107340bd0cd926ce450474e1e5013e0e9c57e7e8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 5 Sep 2025 15:33:51 +0700
Subject: [PATCH 188/195] test

---
 .github/workflows/release.yaml | 122 ++++++++++++++++++++++++---------
 1 file changed, 89 insertions(+), 33 deletions(-)

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index c4746ff..0a6e50d 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -1,50 +1,106 @@
-# /.forgejo/workflows/build.yml
-name: Build
-
+name: release
+run-name: release ${{ github.actor }}
 on:
   push:
     tags:
-      - "v[0-9]+.[0-9]+.[0-9]+"
-      - "v[0-9]+.[0-9]+.[0-9]+*"
+      - "version-[0-9]+.[0-9]+.[0-9]+"
   workflow_dispatch:
-
 env:
-  REGISTRY: ${{ vars.CONTAINER_REGISTRY }}
-  REGISTRY_USERNAME: ${{ vars.CONTAINER_REGISTRY_USERNAME }}
-  REGISTRY_PASSWORD: ${{ secrets.CONTAINER_REGISTRY_PASSWORD }}
-  CONTAINER_IMAGE_NAME: ${{ vars.CONTAINER_REGISTRY }}/${{ vars.CONTAINER_IMAGE_OWNER }}/${{ vars.CONTAINER_IMAGE_NAME }}
-  IMAGE_VERSION: build
+  REGISTRY: docker.frappet.com
+  IMAGE_NAME: ehr/bma-ehr-user
+  DEPLOY_HOST: frappet.com
+  COMPOSE_PATH: /home/frappet/docker/bma/bma-ehr-user
 
 jobs:
-  build:
+  # act workflow_dispatch -W .github/workflows/release.yaml --input IMAGE_VER=test-v6.1 -s DOCKER_USER=sorawit -s DOCKER_PASS=P@ssword -s SSH_PASSWORD=P@ssw0rd
+  release:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v3
+      # skip Set up QEMU because it fail on act and container
+      # Gen Version try to get version from tag or inut
+      - name: Set output tags
+        id: vars
+        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
+      - name: Gen Version
+        id: gen_ver
+        run: |
+          if [[ $GITHUB_REF == 'refs/tags/'* ]]; then
+            IMAGE_VER=${{ steps.vars.outputs.tag }}
+          else
+            IMAGE_VER=${{ github.event.inputs.IMAGE_VER }}
+          fi
+          if [[ $IMAGE_VER == '' ]]; then
+            IMAGE_VER='test-vBeta'
+          fi
+          echo '::set-output name=image_ver::'$IMAGE_VER
+      - name: Test Version
+        run: |
+          echo $GITHUB_REF
+          echo ${{ steps.gen_ver.outputs.image_ver }}
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
-        with:
-          config-inline: |
-            [registry."${{ env.REGISTRY }}"]
-              ca=["/etc/ssl/certs/ca-certificates.crt"]
-      - name: Tag Version
-        run: |
-          if [[ "${{ github.event_name }}" == "push" ]]; then
-            echo "IMAGE_VERSION=${{ github.ref_name }}" | sed 's/v//g' >> $GITHUB_ENV
-          else
-            echo "IMAGE_VERSION=${{ env.IMAGE_VERSION }}-${{ github.run_number }}" >> $GITHUB_ENV
-          fi
       - name: Login in to registry
         uses: docker/login-action@v2
         with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ env.REGISTRY_USERNAME }}
-          password: ${{ env.REGISTRY_PASSWORD }}
-      - name: Build and push docker image
+          registry: ${{env.REGISTRY}}
+          username: ${{secrets.DOCKER_USER}}
+          password: ${{secrets.DOCKER_PASS}}
+      - name: Build and load local docker image
         uses: docker/build-push-action@v3
         with:
-          platforms: linux/amd64
           context: .
-          file: ./docker/Dockerfile
-          tags: ${{ env.CONTAINER_IMAGE_NAME }}:latest,${{ env.CONTAINER_IMAGE_NAME }}:${{ env.IMAGE_VERSION }}
-          push: true
\ No newline at end of file
+          platforms: linux/amd64
+          file: docker/Dockerfile
+          push: true
+          tags: ${{env.REGISTRY}}/${{env.IMAGE_NAME}}:${{ steps.gen_ver.outputs.image_ver }},${{env.REGISTRY}}/${{env.IMAGE_NAME}}:latest
+
+      - name: Reload docker compose
+        uses: appleboy/ssh-action@v0.1.8
+        with:
+          host: ${{env.DEPLOY_HOST}}
+          username: frappet
+          password: ${{ secrets.SSH_PASSWORD }}
+          port: 10102
+          script: |
+            cd "${{env.COMPOSE_PATH}}"
+            docker compose pull
+            docker compose up -d
+            echo "${{ steps.gen_ver.outputs.image_ver }}"> success
+      - name: Notify Discord Success
+        if: success()
+        run: |
+          curl -H "Content-Type: application/json" \
+          -X POST \
+          -d '{
+            "embeds": [{
+              "title": "✅ Deployment Success!",
+              "description": "**Details:**\n- Image: `${{env.IMAGE_NAME}}`\n- Version: `${{ steps.gen_ver.outputs.image_ver }}`\n- Deployed by: `${{github.actor}}`",
+              "color": 3066993,
+              "footer": {
+                "text": "Release Notification",
+                "icon_url": "https://example.com/success-icon.png"
+              },
+              "timestamp": "'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"
+            }]
+          }' \
+          ${{ secrets.DISCORD_WEBHOOK }}
+
+      - name: Notify Discord Failure
+        if: failure()
+        run: |
+          curl -H "Content-Type: application/json" \
+          -X POST \
+          -d '{
+            "embeds": [{
+              "title": "❌ Deployment Failed!",
+              "description": "**Details:**\n- Image: `${{env.IMAGE_NAME}}`\n- Version: `${{ steps.gen_ver.outputs.image_ver }}`\n- Attempted by: `${{github.actor}}`",
+              "color": 15158332,
+              "footer": {
+                "text": "Release Notification",
+                "icon_url": "https://example.com/failure-icon.png"
+              },
+              "timestamp": "'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"
+            }]
+          }' \
+          ${{ secrets.DISCORD_WEBHOOK }}
\ No newline at end of file

From d09cda6882d0b95f04977cf50cf0b2f78d886933 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 5 Sep 2025 15:38:27 +0700
Subject: [PATCH 189/195] no message

---
 .forgejo/workforws/build.yml | 50 ++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 .forgejo/workforws/build.yml

diff --git a/.forgejo/workforws/build.yml b/.forgejo/workforws/build.yml
new file mode 100644
index 0000000..c4746ff
--- /dev/null
+++ b/.forgejo/workforws/build.yml
@@ -0,0 +1,50 @@
+# /.forgejo/workflows/build.yml
+name: Build
+
+on:
+  push:
+    tags:
+      - "v[0-9]+.[0-9]+.[0-9]+"
+      - "v[0-9]+.[0-9]+.[0-9]+*"
+  workflow_dispatch:
+
+env:
+  REGISTRY: ${{ vars.CONTAINER_REGISTRY }}
+  REGISTRY_USERNAME: ${{ vars.CONTAINER_REGISTRY_USERNAME }}
+  REGISTRY_PASSWORD: ${{ secrets.CONTAINER_REGISTRY_PASSWORD }}
+  CONTAINER_IMAGE_NAME: ${{ vars.CONTAINER_REGISTRY }}/${{ vars.CONTAINER_IMAGE_OWNER }}/${{ vars.CONTAINER_IMAGE_NAME }}
+  IMAGE_VERSION: build
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+        with:
+          config-inline: |
+            [registry."${{ env.REGISTRY }}"]
+              ca=["/etc/ssl/certs/ca-certificates.crt"]
+      - name: Tag Version
+        run: |
+          if [[ "${{ github.event_name }}" == "push" ]]; then
+            echo "IMAGE_VERSION=${{ github.ref_name }}" | sed 's/v//g' >> $GITHUB_ENV
+          else
+            echo "IMAGE_VERSION=${{ env.IMAGE_VERSION }}-${{ github.run_number }}" >> $GITHUB_ENV
+          fi
+      - name: Login in to registry
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ env.REGISTRY_USERNAME }}
+          password: ${{ env.REGISTRY_PASSWORD }}
+      - name: Build and push docker image
+        uses: docker/build-push-action@v3
+        with:
+          platforms: linux/amd64
+          context: .
+          file: ./docker/Dockerfile
+          tags: ${{ env.CONTAINER_IMAGE_NAME }}:latest,${{ env.CONTAINER_IMAGE_NAME }}:${{ env.IMAGE_VERSION }}
+          push: true
\ No newline at end of file

From 79af05f2f995e3304ea432fb3c90557ca2c88909 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 5 Sep 2025 15:46:53 +0700
Subject: [PATCH 190/195] no message

---
 .forgejo/{workforws => workflows}/build.yml | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename .forgejo/{workforws => workflows}/build.yml (100%)

diff --git a/.forgejo/workforws/build.yml b/.forgejo/workflows/build.yml
similarity index 100%
rename from .forgejo/workforws/build.yml
rename to .forgejo/workflows/build.yml

From c3741d139df271dae84e8c359d5a56b5172f040c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 8 Sep 2025 10:21:28 +0700
Subject: [PATCH 191/195] file deploy

---
 .forgejo/workflows/deploy.yml | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 .forgejo/workflows/deploy.yml

diff --git a/.forgejo/workflows/deploy.yml b/.forgejo/workflows/deploy.yml
new file mode 100644
index 0000000..4ef99d3
--- /dev/null
+++ b/.forgejo/workflows/deploy.yml
@@ -0,0 +1,29 @@
+name: Build
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: "Version to deploy"
+        type: string
+        required: false
+        default: "latest"
+
+env:
+  IMAGE_VERSION: build
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Remote Deploy
+        uses: appleboy/ssh-action@v1.2.1
+        with:
+          host: ${{ vars.SSH_DEPLOY_HOST }}
+          port: ${{ vars.SSH_DEPLOY_PORT }}
+          username: ${{ secrets.SSH_DEPLOY_USER }}
+          password: ${{ secrets.SSH_DEPLOY_PASSWORD }}
+          script: |
+            cd ~/repo
+            ./replace-env.sh HRMS_USER "${{ inputs.version }}"
+            ./deploy.sh hrms-user

From 115df31b90bf49d04820d45b7eb47f57a9ba20ae Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 8 Sep 2025 10:30:42 +0700
Subject: [PATCH 192/195] key

---
 .forgejo/workflows/deploy.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.forgejo/workflows/deploy.yml b/.forgejo/workflows/deploy.yml
index 4ef99d3..2a82b7b 100644
--- a/.forgejo/workflows/deploy.yml
+++ b/.forgejo/workflows/deploy.yml
@@ -23,6 +23,7 @@ jobs:
           port: ${{ vars.SSH_DEPLOY_PORT }}
           username: ${{ secrets.SSH_DEPLOY_USER }}
           password: ${{ secrets.SSH_DEPLOY_PASSWORD }}
+          key: ${{ vars.SSH_PRIVATE_KEY }}
           script: |
             cd ~/repo
             ./replace-env.sh HRMS_USER "${{ inputs.version }}"

From 8c4cf17684fcedf2cfb675b0ece02c835e774478 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 8 Sep 2025 10:37:02 +0700
Subject: [PATCH 193/195] test

---
 .forgejo/workflows/deploy.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.forgejo/workflows/deploy.yml b/.forgejo/workflows/deploy.yml
index 2a82b7b..4ef99d3 100644
--- a/.forgejo/workflows/deploy.yml
+++ b/.forgejo/workflows/deploy.yml
@@ -23,7 +23,6 @@ jobs:
           port: ${{ vars.SSH_DEPLOY_PORT }}
           username: ${{ secrets.SSH_DEPLOY_USER }}
           password: ${{ secrets.SSH_DEPLOY_PASSWORD }}
-          key: ${{ vars.SSH_PRIVATE_KEY }}
           script: |
             cd ~/repo
             ./replace-env.sh HRMS_USER "${{ inputs.version }}"

From 2fa9fcbb4cbdecdbdfc578579410aa7fd170e87d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 8 Sep 2025 11:14:50 +0700
Subject: [PATCH 194/195] test

---
 .forgejo/workflows/deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.forgejo/workflows/deploy.yml b/.forgejo/workflows/deploy.yml
index 4ef99d3..900559d 100644
--- a/.forgejo/workflows/deploy.yml
+++ b/.forgejo/workflows/deploy.yml
@@ -25,5 +25,5 @@ jobs:
           password: ${{ secrets.SSH_DEPLOY_PASSWORD }}
           script: |
             cd ~/repo
-            ./replace-env.sh HRMS_USER "${{ inputs.version }}"
+            ./replace-env.sh APP_USER "${{ inputs.version }}"
             ./deploy.sh hrms-user

From 66cb55f50920fdd737ae6af300f8ce41fbb57a5e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 8 Sep 2025 11:33:05 +0700
Subject: [PATCH 195/195] sort

---
 src/api/appeal/api.appeal.ts                  | 10 +--
 src/components/TableD.vue                     |  6 +-
 .../Workflow/DialogSelectPerson.vue           | 68 +++++++------------
 .../Workflow/interface/request/Main.ts        |  2 -
 .../components/TableListEvaluate.vue          |  2 +-
 .../06_evaluate/views/EvaluateMain.vue        |  9 ++-
 src/modules/07_appealComplain/views/Main.vue  | 31 +++++----
 .../10_registry/views/requestEditMain.vue     | 26 ++++---
 src/modules/13_portfolio/views/Main.vue       |  5 --
 src/modules/14_IDP/views/main.vue             | 32 ++++++---
 src/views/MainLayout.vue                      |  8 +++
 11 files changed, 102 insertions(+), 97 deletions(-)

diff --git a/src/api/appeal/api.appeal.ts b/src/api/appeal/api.appeal.ts
index 7fb0a1f..daa4886 100644
--- a/src/api/appeal/api.appeal.ts
+++ b/src/api/appeal/api.appeal.ts
@@ -7,15 +7,7 @@ export default {
   profileBykeycloak: () => `${profile}`,
   // positionBykeycloak: () => `${env.API_URI}/org/profile/keycloak/position`,
 
-  appealMainList: (
-    status: string,
-    type: string,
-    year: number,
-    page: number,
-    pageSize: number,
-    keyword: string
-  ) =>
-    `${appeal}/user?status=${status}&type=${type}&year=${year}&page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+  appealMainList: () => `${appeal}/user`,
   appealAdd: () => `${appeal}`,
 
   appealByID: (id: string) => `${appeal}/${id}`,
diff --git a/src/components/TableD.vue b/src/components/TableD.vue
index a669956..691aef7 100644
--- a/src/components/TableD.vue
+++ b/src/components/TableD.vue
@@ -138,9 +138,9 @@ function onRequest(requestProp: any) {
     ...newPagination,
   };
 
-  if (isPageChange) {
-    emit("request", requestProp);
-  }
+  // if (isPageChange) {
+  emit("request", requestProp);
+  // }
 }
 
 function handlePageChange(newPage: number) {
diff --git a/src/components/Workflow/DialogSelectPerson.vue b/src/components/Workflow/DialogSelectPerson.vue
index 9dfae70..d2fc964 100644
--- a/src/components/Workflow/DialogSelectPerson.vue
+++ b/src/components/Workflow/DialogSelectPerson.vue
@@ -7,9 +7,9 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
-import type { Pagination } from "@/components/Workflow/interface/index/Main";
 import type { DataQuery } from "@/components/Workflow/interface/request/Main";
 import type { DataCommander } from "@/components/Workflow/interface/response/Main";
+import type { PropsTable } from "@/interface/PropsTable";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -76,17 +76,19 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
-const total = ref<number>(0);
-const totalList = ref<number>(1);
+const pagination = ref<PropsTable.Pagination>({
+  sortBy: "",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 0,
+});
 
 const isAcceptSetting = ref<boolean>(false);
 const isApproveSetting = ref<boolean>(false);
 const isReasonSetting = ref<boolean>(false);
 
 const formDataQuery = reactive<DataQuery>({
-  page: 1,
-  pageSize: 10,
   isAct: false,
   keyword: "",
 });
@@ -97,12 +99,11 @@ async function fetchLists() {
     .put(config.API.workflow + `commander/${props.type}`, {
       ...formDataQuery,
       keycloakId: props.keycloakId,
+      page: pagination.value.page,
+      pageSize: pagination.value.rowsPerPage,
     })
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / formDataQuery.pageSize
-      );
-      total.value = res.data.result.total;
+      pagination.value.rowsNumber = res.data.result.total;
       rows.value = res.data.result.data;
     })
     .catch((err) => {
@@ -139,7 +140,7 @@ function onSubmit() {
 }
 
 function onSearchData() {
-  formDataQuery.page = 1;
+  pagination.value.page = 1;
   fetchLists();
 }
 
@@ -150,32 +151,25 @@ function onCloseModal() {
   isAcceptSetting.value = false;
   isApproveSetting.value = false;
   isReasonSetting.value = false;
-  formDataQuery.page = 1;
-  formDataQuery.pageSize = 10;
   formDataQuery.isAct = false;
   formDataQuery.keyword = "";
 }
 
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+}
+
 watch(modal, (val) => {
   if (val) {
     fetchLists();
   }
 });
-
-// watch(
-//   () => [formDataQuery.isAct, formDataQuery.pageSize],
-//   () => {
-//     onSearchData();
-//   }
-// );
-
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  formDataQuery.pageSize = newPagination.rowsPerPage;
-}
 </script>
 
 <template>
@@ -231,7 +225,8 @@ function updatePagination(newPagination: Pagination) {
             :rows-per-page-options="[10, 25, 50, 100]"
             selection="single"
             v-model:selected="selected"
-            @update:pagination="updatePagination"
+            v-model:pagination="pagination"
+            @request="onTableRequest"
           >
             <template v-slot:header-selection="scope">
               <q-checkbox
@@ -266,21 +261,6 @@ function updatePagination(newPagination: Pagination) {
                 </q-td>
               </q-tr>
             </template>
-
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ total }} รายการ
-              <q-pagination
-                v-model="formDataQuery.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalList)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="fetchLists()"
-              ></q-pagination>
-            </template>
           </d-table>
           <div class="q-gutter-xs q-pt-sm">
             <div>
diff --git a/src/components/Workflow/interface/request/Main.ts b/src/components/Workflow/interface/request/Main.ts
index dcd8c4d..f58472e 100644
--- a/src/components/Workflow/interface/request/Main.ts
+++ b/src/components/Workflow/interface/request/Main.ts
@@ -1,6 +1,4 @@
 interface DataQuery {
-  page: number;
-  pageSize: number;
   isAct: boolean;
   keyword: string;
 }
diff --git a/src/modules/06_evaluate/components/TableListEvaluate.vue b/src/modules/06_evaluate/components/TableListEvaluate.vue
index 7db03c1..6c6698a 100644
--- a/src/modules/06_evaluate/components/TableListEvaluate.vue
+++ b/src/modules/06_evaluate/components/TableListEvaluate.vue
@@ -128,7 +128,7 @@ onMounted(() => {
   <d-table
     ref="table"
     flat
-    bordere
+    bordered
     :columns="columns"
     :rows="store.row"
     dense
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index 4d52987..d7c0c45 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -52,7 +52,7 @@ const listMenu = ref<ListMenu[]>([
 ]);
 
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "createdAt",
+  sortBy: "",
   descending: true,
   page: 1,
   rowsPerPage: 10,
@@ -81,7 +81,12 @@ async function fetchEvaluteList() {
     pageSize: pagination.value.rowsPerPage,
     keyword: store.filterKeyword,
     status: selectedStatus.value,
+    ...(pagination.value.sortBy && {
+      sortBy: pagination.value.sortBy,
+      descending: pagination.value.descending,
+    }),
   };
+
   await http
     .put(config.API.evaluationList(), body)
     .then(async (res) => {
@@ -216,6 +221,8 @@ onMounted(async () => {
       </div>
     </div>
 
+    
+
     <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
       <div class="col-12 row">
         <q-card bordered class="col-12 row caedNone q-pa-md">
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index c9163c1..1f093bb 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -1,7 +1,7 @@
 useA
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -28,7 +28,7 @@ const type = ref<DataOption[]>([
 
 const isload = ref<boolean>(false);
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "createdAt",
+  sortBy: "",
   descending: true,
   page: 1,
   rowsPerPage: 10,
@@ -149,23 +149,28 @@ const columns = ref<QTableProps["columns"]>([
 //นำข้อมูลมาแสดง
 async function getData() {
   isload.value = true;
+  const params = new URLSearchParams({
+    status: formData.status,
+    type: formData.type,
+    year: String(formData.year),
+    page: String(pagination.value.page),
+    pageSize: String(pagination.value.rowsPerPage),
+    keyword: filterKeyword.value,
+  });
+
+  if (pagination.value.sortBy) {
+    params.append("sortBy", pagination.value.sortBy);
+    params.append("descending", String(pagination.value.descending));
+  }
+
   await http
-    .get(
-      config.API.appealMainList(
-        formData.status,
-        formData.type,
-        formData.year,
-        pagination.value.page,
-        pagination.value.rowsPerPage,
-        filterKeyword.value
-      )
-    )
+    .get(config.API.appealMainList() + `?${params.toString()}`)
     .then(async (res) => {
       const result = res.data.result;
       pagination.value.rowsNumber = result.total;
       dataStore.fetchAppealComplain(result.data);
     })
-    .catch((e: any) => {
+    .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
diff --git a/src/modules/10_registry/views/requestEditMain.vue b/src/modules/10_registry/views/requestEditMain.vue
index 4f689a0..16c2104 100644
--- a/src/modules/10_registry/views/requestEditMain.vue
+++ b/src/modules/10_registry/views/requestEditMain.vue
@@ -49,7 +49,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "topic",
     align: "left",
     label: "ชื่อเรื่อง",
-    sortable: false,
+    sortable: true,
     field: "topic",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -106,6 +106,7 @@ const visibleColumns = ref<string[]>([
 const pagination = ref<PropsTable.Pagination>({
   descending: true,
   page: 1,
+  sortBy: "",
   rowsPerPage: 10,
   rowsNumber: 0,
 });
@@ -122,17 +123,26 @@ function onClickAdd() {
 
 /** function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล*/
 async function fetchListRequset() {
-  let queryParams = {
-    page: pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+  const queryParams = new URLSearchParams({
+    page: pagination.value.page.toString(),
+    pageSize: pagination.value.rowsPerPage.toString(),
     status: status.value,
     keyword: keyword.value,
-  };
+  });
+
+  if (pagination.value.sortBy) {
+    queryParams.append("sortBy", pagination.value.sortBy);
+    queryParams.append(
+      "descending",
+      pagination.value.descending ? "true" : "false"
+    );
+  }
   isLoading.value = true;
   await http
-    .get(config.API.requestEditByType(link.value) + `user`, {
-      params: queryParams,
-    })
+    .get(
+      config.API.requestEditByType(link.value) +
+        `user?${queryParams.toString()}`
+    )
     .then((res) => {
       const result = res.data.result;
       pagination.value.rowsNumber = result.total;
diff --git a/src/modules/13_portfolio/views/Main.vue b/src/modules/13_portfolio/views/Main.vue
index 040dc4b..ea0bee3 100644
--- a/src/modules/13_portfolio/views/Main.vue
+++ b/src/modules/13_portfolio/views/Main.vue
@@ -122,10 +122,6 @@ function onSearch() {
   );
 }
 
-function onTableRequest() {
-  console.log(1111);
-}
-
 /** Hook Lifecycle */
 onMounted(async () => {
   await fecthList();
@@ -213,7 +209,6 @@ onMounted(async () => {
               :rows-per-page-options="[10, 25, 50, 100]"
               :pagination="pagination"
               :loading="isLoading"
-              @request="onTableRequest"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index e29f30e..c6b7bc0 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -23,7 +23,7 @@ const status = ref<string>("ALL"); // สถานะคำร้อง
 const statusOptions = ref<DataOption[]>(store.optionStatus);
 const rows = ref<RowsListMain[]>([]);
 const pagination = ref<PropsTable.Pagination>({
-  sortBy: "createdAt",
+  sortBy: "",
   descending: true,
   page: 1,
   rowsPerPage: 10,
@@ -40,7 +40,7 @@ const visibleColumns = ref<string[]>([
   "detail",
   "document",
   "status",
-  "remark",
+  "reason",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -67,7 +67,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentProjects",
     align: "left",
     label: "วิธีการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "developmentProjects",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -120,18 +120,18 @@ const columns = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "สถานะคำร้อง",
-    sortable: true,
+    sortable: false,
     field: "status",
     format: (v) => store.convertStatus(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "remark",
+    name: "reason",
     align: "left",
     label: "หมายเหตุ ",
     sortable: true,
-    field: "remark",
+    field: "reason",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -177,12 +177,21 @@ function onDelete(id: string) {
 /** list รายการ */
 async function getListData() {
   isLoading.value = true;
+  const params = new URLSearchParams({
+    status: status.value,
+    keyword: filterKeyword.value,
+    page: pagination.value.page.toString(),
+    pageSize: pagination.value.rowsPerPage.toString(),
+  });
+
+  if (pagination.value.sortBy) {
+    params.append("sortBy", pagination.value.sortBy);
+    params.append("descending", pagination.value.descending ? "true" : "false");
+  }
+
   await http
-    .get(
-      config.API.developmentRequest +
-        `/user?status=${status.value}&keyword=${filterKeyword.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}
-  `
-    )
+    .get(config.API.developmentRequest + `/user?${params.toString()}`)
+
     .then(async (res) => {
       const result = await res.data.result;
       pagination.value.rowsNumber = result.total;
@@ -247,6 +256,7 @@ async function downloadUrl(id: string, fileName: string) {
  */
 function onTableRequest(requestProps: PropsTable.RequestProps) {
   const newPagination = requestProps?.pagination || requestProps;
+
   if (!newPagination?.page || !newPagination?.rowsPerPage) return;
   pagination.value = { ...newPagination };
   getListData();
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index fdbb1ef..c7ddb08 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -247,6 +247,14 @@ const landingPageUrl = ref<string>(configParam.landingPageUrl);
 function onViewDetailNoti(url: string) {
   window.open(url, "_blank");
 }
+
+/** ดูการเปลี่ยน route name เพื่อเปลี่ยน tab */
+watch(
+  () => route.name,
+  (newVal) => {
+    tab.value = newVal;
+  }
+);
 </script>
 
 <!-- โครงเว็บ -->