From e09d0afe737a9932a055e55b652167156f34793c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 26 Aug 2024 16:37:16 +0700
Subject: [PATCH 01/13] =?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=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A5=20=3D=3D>=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20lo?=
 =?UTF-8?q?ad?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Detail/Tab1.vue                |  29 ++-
 .../components/Detail/step/step2.vue          |   4 +-
 .../components/Detail/step/step4.vue          |  21 +-
 .../components/Detail/step/step5.vue          |  21 +-
 .../components/Detail/step/step6.vue          |  17 +-
 .../components/Detail/step/step8.vue          |  50 ++--
 .../Detail/viewTab2/CardDirector.vue          |   8 +-
 .../components/Detail/viewTab2/CardMeet.vue   |  10 +-
 .../components/Detail/viewstep/viewStep1.vue  | 239 +++++++++---------
 .../12_evaluatePersonal/views/DetailPage.vue  |   4 +-
 10 files changed, 223 insertions(+), 180 deletions(-)

diff --git a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
index 1fe633968..6777cb98a 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/Tab1.vue
@@ -44,6 +44,7 @@ const props = defineProps({
 });
 
 const id = ref<string>(route.params.id as string); // id รายการประเมิน
+const isLoadView = ref<boolean>(false);
 
 const modalHistory = ref<boolean>(false);
 const formCommand = reactive<FormCommand>({
@@ -72,6 +73,7 @@ function updateformCommand(val: any, ref: any) {
 
 /** function เช็คขั้นตอน*/
 async function fetchCheckStep() {
+  isLoadView.value = false;
   showLoader();
   await http
     .get(config.API.evaluateGetStep(id.value))
@@ -100,12 +102,15 @@ async function fetchCheckStep() {
 
       store.currentStep = step;
       store.step = step;
+      isLoadView.value = true;
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 3000);
     });
 }
 
@@ -132,7 +137,7 @@ onMounted(async () => {
                   : "ประเมินชำนาญการ"
               }}
             </div>
-            <q-space/>
+            <q-space />
             <div>
               <q-btn
                 flat
@@ -156,7 +161,7 @@ onMounted(async () => {
       </div>
     </div>
 
-    <div class="col-xs-12 col-sm-9 q-pa-md">
+    <div class="col-xs-12 col-sm-9 q-pa-md" v-if="isLoadView">
       <div class="col-12 row q-pt-md">
         <div class="toptitle2">
           {{ store.step }}.{{ store.titel[store.step - 1] }}
@@ -176,15 +181,15 @@ onMounted(async () => {
           "
         >
           <q-card flat bordered class="col-12">
-              <Step1 v-if="store.step === 1" :data="props.data" />
-              <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
-              <Step3 v-if="store.step === 3" :step="store.step" />
-              <Step4 v-if="store.step === 4" />
-              <Step5 v-if="store.step === 5" />
-              <Step6 v-if="store.step === 6" />
-              <Step7 v-if="store.step === 7" />
-              <Step8 v-if="store.step === 8" />
-              <Step9 v-if="store.step === 9" />
+            <Step1 v-if="store.step === 1" :data="props.data" />
+            <Step2 v-if="store.step === 2" @update:form="updateformCommand" />
+            <Step3 v-if="store.step === 3" :step="store.step" />
+            <Step4 v-if="store.step === 4" />
+            <Step5 v-if="store.step === 5" />
+            <Step6 v-if="store.step === 6" />
+            <Step7 v-if="store.step === 7" />
+            <Step8 v-if="store.step === 8" />
+            <Step9 v-if="store.step === 9" />
           </q-card>
         </div>
         <div
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
index 8521c20ee..dc1be4876 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step2.vue
@@ -49,7 +49,9 @@ async function fetchSigner() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
     });
 }
 onMounted(async () => {
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
index 97d6dec5a..e7eb2548b 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step4.vue
@@ -333,21 +333,23 @@ async function checkDoc10() {
         "10-ประกาศผลการคัดเลือกบุคคล (เอกสารหมายเลข 10)"
       )
     )
-    .then((res: any) => {
+    .then(async (res) => {
       download10Url.value = res.data.downloadUrl;
-      fetchProfile();
+      await fetchProfile();
     })
     .catch(() => {
       //   messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
     });
 }
 
 /** function เรียกข้แมูลคุณสมบัติ*/
 async function fetchProfile() {
-  // showLoader();
+  showLoader();
   await http
     .get(config.API.evaluateGetDetail(id.value))
     .then((res) => {
@@ -358,7 +360,9 @@ async function fetchProfile() {
       messageError($q, err);
     })
     .finally(() => {
-      // hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
     });
 }
 
@@ -379,13 +383,14 @@ async function fetchDataSigner() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
     });
 }
 
 onMounted(async () => {
-  await checkDoc10();
-  await fetchDataSigner();
+  await Promise.all([checkDoc10(), fetchDataSigner()]);
 });
 </script>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
index d0ea0d812..4cbafa5f9 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step5.vue
@@ -189,14 +189,16 @@ async function getDate() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
     });
 }
 
 const download10Url = ref<string>("");
 /** function เช็คไฟล์อัปโหลด*/
 async function checkDocResult() {
-  // showLoader();
+  showLoader();
   await http
     .get(
       config.API.evaluationPatchData(
@@ -208,11 +210,10 @@ async function checkDocResult() {
     .then((res: any) => {
       download10Url.value = res.data.downloadUrl;
     })
-    .catch(() => {
-      //   messageError($q, e);
-    })
     .finally(() => {
-      // hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
     });
 }
 
@@ -234,14 +235,14 @@ async function fetchDataSigner() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
     });
 }
 
 onMounted(async () => {
-  await getDate();
-  await checkDocResult();
-  await fetchDataSigner();
+  await Promise.all([getDate(), checkDocResult(), fetchDataSigner()]);
 });
 </script>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
index dd54bae02..4567b18b2 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step6.vue
@@ -45,7 +45,9 @@ async function getDate() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
     });
 }
 
@@ -67,23 +69,26 @@ async function getSigner() {
       }
     })
     .catch((e) => {
-      // messageError($q, e);
+      messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 1500);
     });
 }
 
 onMounted(async () => {
-  await getSigner();
-  await getDate();
+  await Promise.all([getSigner(), getDate()]);
 });
 </script>
 
 <template>
   <div class="row q-col-gutter-sm q-pa-sm">
     <div class="col-12">
-      <q-banner class="text-weight-bold text-red-14 bg-red-1 text-center rounded-borders">
+      <q-banner
+        class="text-weight-bold text-red-14 bg-red-1 text-center rounded-borders"
+      >
         <div class="text-weight-bold">
           <q-icon name="info_outline" color="red-14" size="24px" />
           วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
diff --git a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
index b26a04655..96343f55d 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/step/step8.vue
@@ -191,7 +191,7 @@ async function confirmApprove() {
     if (hasError.every((result) => result === true)) {
       dialogConfirm(
         $q,
-        () => {
+        async () => {
           showLoader();
           const data = {
             metadata: {
@@ -200,7 +200,7 @@ async function confirmApprove() {
               additionalProp3: position.value,
             },
           };
-          http
+          await http
             .patch(
               config.API.evaluationPatchData(
                 "เล่ม 2",
@@ -258,7 +258,9 @@ async function fetchProfile() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
     });
 }
 
@@ -280,7 +282,9 @@ async function checkDocEdit() {
       // messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
     });
 }
 
@@ -296,7 +300,7 @@ const downloadFile6 = ref<string>("");
  * @param fileName ชื่อไฟล์
  */
 async function downloadFileList(fileName: string) {
-  // showLoader();
+  showLoader();
   await http
     .get(config.API.evaluationFilebyId("เล่ม 2", id.value, fileName))
     .then((res) => {
@@ -316,10 +320,12 @@ async function downloadFileList(fileName: string) {
       } else if (fileName === "แบบสรุปผลการประเมิน (เอกสารแบบ ง)") {
         downloadFile6.value = res.data.downloadUrl;
       }
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
     });
-  // .finally(() => {
-  //   hideLoader();
-  // });
 }
 
 const author = ref<string>("");
@@ -347,22 +353,26 @@ async function fetchDataSigner() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
     });
 }
 
 onMounted(async () => {
-  fetchProfile();
-  fetchDataSigner();
-  downloadFileList(
-    "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
-  );
-  downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)");
-  downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)");
-  downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)");
-  downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)");
-  downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)");
-  checkDocEdit();
+  await Promise.all([
+    fetchProfile(),
+    fetchDataSigner(),
+    downloadFileList(
+      "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
+    ),
+    downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)"),
+    downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)"),
+    downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)"),
+    downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)"),
+    downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)"),
+    checkDocEdit(),
+  ]);
 });
 </script>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
index d9fc1a775..b028de611 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardDirector.vue
@@ -99,7 +99,6 @@ async function onClickAdd() {
 
 function onClickClose() {
   modalAddDirector.value = false;
-  props.fetchdata();
 }
 
 /**
@@ -124,14 +123,15 @@ function returnDirector(data: any) {
       .put(config.API.evaluationChooseDirectors(id.value), {
         directors: dataList,
       })
-      .then(() => {
-        success($q, "บันทึกสำเร็จ");
+      .then(async () => {
+        await props.fetchdata();
+        await success($q, "บันทึกสำเร็จ");
+        await onClickClose();
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
-        onClickClose();
         hideLoader();
       });
   });
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
index e149952a3..e6a9274de 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewTab2/CardMeet.vue
@@ -125,7 +125,6 @@ function onClickAdd() {
 
 function onClickClose() {
   modalAdd.value = false;
-  props.fetchdata();
 }
 
 /**
@@ -150,14 +149,15 @@ function returnData(data: any) {
       .put(config.API.evaluationChooseMeeting(id.value), {
         meetings: dataList,
       })
-      .then((res) => {
-        success($q, "บันทึกสำเร็จ");
+      .then(async () => {
+        await props.fetchdata();
+        await success($q, "บันทึกสำเร็จ");
+        await onClickClose();
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
-        onClickClose();
         hideLoader();
       });
   });
@@ -260,7 +260,7 @@ watch(
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
index 4db87ae74..2d083e184 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/viewStep1.vue
@@ -24,7 +24,7 @@ const {
   columnTraining,
   columnProjectsProposed,
 } = store;
-const { date2Thai } = mixin;
+const { date2Thai, showLoader, hideLoader } = mixin;
 
 const props = defineProps({
   data: {
@@ -57,6 +57,7 @@ function formattedNumber(x: number) {
 
 onMounted(() => {
   if (props.data) {
+    showLoader();
     formDetail.prefix = props.data.prefix;
     formDetail.fullName = props.data.fullName;
     formDetail.position = props.data.position;
@@ -123,14 +124,21 @@ onMounted(() => {
         }))
       : [];
     formDetail.assessments = props.data.assessments;
+    setTimeout(() => {
+      hideLoader();
+    }, 1000);
   }
 });
 </script>
 
 <template>
-  <q-card bordered class="col-12 row shadow-0 q-pa-sm" :style="$q.screen.lt.sm ? '' : 'max-height: 64vh; overflow: scroll;' ">
+  <q-card
+    bordered
+    class="col-12 row shadow-0 q-pa-sm"
+    :style="$q.screen.lt.sm ? '' : 'max-height: 64vh; overflow: scroll;'"
+  >
     <div class="row col-12">
-      <q-card class="col-12  cardSp1" bordered>
+      <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>
         </div>
@@ -227,122 +235,125 @@ onMounted(() => {
         </div>
       </q-card>
 
-      <q-card class="col-12  cardSp1" bordered>
+      <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>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="row col-12 q-pa-sm" v-if="formDetail.educations && formDetail.educations.length > 0">
-            <div
-              class="row q-col-gutter-sm"
-              v-for="(education, index) in formDetail.educations"
-              :key="index"
-            >
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.educationLevel"
-                  label="ระดับศึกษา"
-                />
-              </div>
+        <div
+          class="row col-12 q-pa-sm"
+          v-if="formDetail.educations && formDetail.educations.length > 0"
+        >
+          <div
+            class="row q-col-gutter-sm"
+            v-for="(education, index) in formDetail.educations"
+            :key="index"
+          >
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.educationLevel"
+                label="ระดับศึกษา"
+              />
+            </div>
 
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.institute"
-                  label="สถานศึกษา"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.institute"
+                label="สถานศึกษา"
+              />
+            </div>
 
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  :model-value="date2Thai(education.startDate)"
-                  readonly
-                  label="ตั้งแต่"
-                >
-                </q-input>
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                :model-value="date2Thai(education.startDate)"
+                readonly
+                label="ตั้งแต่"
+              >
+              </q-input>
+            </div>
 
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  :model-value="date2Thai(education.endDate)"
-                  readonly
-                  label="ถึง"
-                >
-                </q-input>
-              </div>
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  :model-value="date2Thai(education.finishDate)"
-                  readonly
-                  label="วันที่สำเร็จการศึกษา"
-                >
-                </q-input>
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                :model-value="date2Thai(education.endDate)"
+                readonly
+                label="ถึง"
+              >
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                :model-value="date2Thai(education.finishDate)"
+                readonly
+                label="วันที่สำเร็จการศึกษา"
+              >
+              </q-input>
+            </div>
 
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
-                  label="วุฒิการศึกษาในตําแหน่ง"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
+                label="วุฒิการศึกษาในตําแหน่ง"
+              />
+            </div>
 
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.degree"
-                  label="วุฒิการศึกษา"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.degree"
+                label="วุฒิการศึกษา"
+              />
+            </div>
 
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.field"
-                  label="สาขาวิชา/ทาง"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.fundName"
-                  label="ทุน"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.field"
+                label="สาขาวิชา/ทาง"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.fundName"
+                label="ทุน"
+              />
+            </div>
 
-              <div class="col-xs-6 col-sm-4 col-md-3">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.gpa"
-                  label="เกรดเฉลี่ย"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-3">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.gpa"
+                label="เกรดเฉลี่ย"
+              />
+            </div>
 
-              <div class="col-xs-6 col-sm-4 col-md-6">
-                <q-input
-                  borderless
-                  readonly
-                  :model-value="education.country"
-                  label="ประเทศ"
-                />
-              </div>
+            <div class="col-xs-6 col-sm-4 col-md-6">
+              <q-input
+                borderless
+                readonly
+                :model-value="education.country"
+                label="ประเทศ"
+              />
+            </div>
           </div>
         </div>
         <div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
       </q-card>
 
-      <q-card class="col-12  cardSp1" bordered>
+      <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>
         </div>
@@ -354,7 +365,7 @@ onMounted(() => {
         />
       </q-card>
 
-      <q-card class="col-12  cardSp1" bordered>
+      <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>
         </div>
@@ -363,26 +374,28 @@ onMounted(() => {
           <TableData :columns="columnSalaries" :row="formDetail.salaries" />
         </div>
       </q-card>
-      
+
       <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>
         </div>
         <div class="col-12"><q-separator /></div>
-        <TableData class="col-12" :columns="columnTraining" :row="formDetail.trainings"/>
+        <TableData
+          class="col-12"
+          :columns="columnTraining"
+          :row="formDetail.trainings"
+        />
       </q-card>
 
-      <q-card class="col-12  cardSp1" bordered>
+      <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>
         </div>
         <div class="col-12"><q-separator /></div>
-        <div class="col-12 q-pa-sm">
-          -
-        </div>
+        <div class="col-12 q-pa-sm">-</div>
       </q-card>
 
-      <q-card class="col-12  cardSp1" bordered>
+      <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>
         </div>
@@ -395,9 +408,9 @@ onMounted(() => {
   </q-card>
 </template>
 <style scoped>
-.cardSp1{
+.cardSp1 {
   border: 1px solid #d6dee1;
-  margin-bottom: 10px ;
+  margin-bottom: 10px;
   box-shadow: none !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/12_evaluatePersonal/views/DetailPage.vue b/src/modules/12_evaluatePersonal/views/DetailPage.vue
index 5957896cf..86e12196a 100644
--- a/src/modules/12_evaluatePersonal/views/DetailPage.vue
+++ b/src/modules/12_evaluatePersonal/views/DetailPage.vue
@@ -48,7 +48,9 @@ async function fetchFeature() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2000);
     });
 }
 

From bc29de9f1c5775b855b81cdade75043f5d69a68b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 26 Aug 2024 17:40:11 +0700
Subject: [PATCH 02/13] page errorPernission

---
 src/plugins/http.ts           |  3 ++-
 src/router/index.ts           |  6 ++++++
 src/views/ErrorPermission.vue | 25 +++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/views/ErrorPermission.vue

diff --git a/src/plugins/http.ts b/src/plugins/http.ts
index 292f1347b..00615c3d5 100644
--- a/src/plugins/http.ts
+++ b/src/plugins/http.ts
@@ -32,7 +32,8 @@ http.interceptors.response.use(
     if (typeof error !== undefined) {
       // eslint-disable-next-line no-prototype-builtins
       if (error.hasOwnProperty("response")) {
-        if (error.response.status === 401 || error.response.status === 403) {
+        if (error.response.status === 403) {
+          window.location.href = "/error";
           // kcLogout();
           // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
           // Store.commit("REMOVE_ACCESS_TOKEN")
diff --git a/src/router/index.ts b/src/router/index.ts
index 89c3e3137..4687e62ab 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -4,6 +4,7 @@ const MainLayout = () => import("@/views/MainLayout.vue");
 const Dashboard = () => import("@/views/Dashboard.vue");
 const Error404NotFound = () => import("@/views/Error404NotFound.vue");
 const loginView = () => import("@/views/login.vue");
+const ErrorPermission = () => import("@/views/ErrorPermission.vue");
 
 // import ModuleMetadata from "@/modules/01_metadata/router";
 import ModuleMetadataNew from "@/modules/01_masterdata/router";
@@ -47,6 +48,11 @@ const router = createRouter({
             Key: "HOME",
           },
         },
+        {
+          path: "/error",
+          name: "errorPermission",
+          component: ErrorPermission,
+        },
         // ...ModuleMetadata,
         ...ModuleMetadataNew,
         // ...ModuleOrganizational,
diff --git a/src/views/ErrorPermission.vue b/src/views/ErrorPermission.vue
new file mode 100644
index 000000000..ec5e14aad
--- /dev/null
+++ b/src/views/ErrorPermission.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div
+    class="bg-white text-center q-pa-md flex flex-center"
+    style="height: 90vh"
+  >
+    <div>
+      <div class="text-h3">
+        <q-icon name="mdi-alert-outline" color="red" /> ไม่พบข้อมูลที่ต้องการ
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="primary"
+        text-color="white"
+        to="/"
+        label="กลับหน้าหลัก"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

From 07b50dca80d6f059c371d39b9729dfb3bb1f51d9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 27 Aug 2024 10:37:57 +0700
Subject: [PATCH 03/13] =?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>=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=20load?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/PersonalInformation/01_Profile.vue | 11 +++++--
 .../PersonalInformation/04_FamilyNew.vue      | 31 +++++++++++--------
 .../04_registryPerson/stores/profile.ts       |  8 +++--
 .../04_registryPerson/views/detailView.vue    | 18 +++++------
 4 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
index 7fae81928..300a62a9b 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
@@ -423,10 +423,17 @@ watch(
 );
 
 onMounted(() => {
-  getData();
+  const promises = [];
+
+  // Add the getData() promise
+  promises.push(getData());
+
+  // Check the condition and add fetchPerson() if needed
   if (store.Ops && store.Ops.prefixOps && store.Ops.prefixOps.length === 0) {
-    fetchPerson();
+    promises.push(fetchPerson());
   }
+
+  Promise.all(promises);
 });
 </script>
 
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
index 487363119..5defd1310 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
@@ -172,9 +172,9 @@ const fromData = reactive({
 /**
  * function fetch ข้อมูลบิดา
  */
-function fetchDataFather() {
+async function fetchDataFather() {
   showLoader();
-  http
+  await http
     .get(
       config.API.profileFamily(empType.value, "father") + `/${profileId.value}`
     )
@@ -201,9 +201,9 @@ function fetchDataFather() {
 /**
  * function fetch ข้อมูลมารดา
  */
-function fetchDataMother() {
+async function fetchDataMother() {
   showLoader();
-  http
+  await http
     .get(
       config.API.profileFamily(empType.value, "mother") + `/${profileId.value}`
     )
@@ -229,9 +229,9 @@ function fetchDataMother() {
 /**
  * function fetch ข้อมูลคู่สมรส
  */
-function fetchDataCouple() {
+async function fetchDataCouple() {
   showLoader();
-  http
+  await http
     .get(
       config.API.profileFamily(empType.value, "couple") + `/${profileId.value}`
     )
@@ -259,9 +259,9 @@ function fetchDataCouple() {
 /**
  * function fetch ข้อมูลบุตร
  */
-function fetchDataChildren() {
+async function fetchDataChildren() {
   showLoader();
-  http
+  await http
     .get(
       config.API.profileFamily(empType.value, "children") +
         `/${profileId.value}`
@@ -412,7 +412,7 @@ function onOpenDialogHistory(type: string, id: string = "") {
  * function fetch ข้อมูลความสัมพันธ์
  */
 function fetchDataRelationship() {
-  showLoader();
+  // showLoader();
   http
     .get(config.API.orgRelationship)
     .then((res) => {
@@ -426,7 +426,9 @@ function fetchDataRelationship() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      // setTimeout(() => {
+      //   hideLoader();
+      // }, 2000);
     });
 }
 
@@ -472,14 +474,17 @@ function fetchHistory(id: string, type: string) {
     });
 }
 
-onMounted(() => {
-  Promise.all([
+onMounted(async () => {
+  showLoader();
+  await Promise.all([
     fetchDataFather(),
     fetchDataMother(),
     fetchDataCouple(),
     fetchDataChildren(),
     fetchDataRelationship(),
-  ]);
+  ]).then(() => {
+    hideLoader();
+  });
 });
 </script>
 
diff --git a/src/modules/04_registryPerson/stores/profile.ts b/src/modules/04_registryPerson/stores/profile.ts
index 1de06731e..52a3f62db 100644
--- a/src/modules/04_registryPerson/stores/profile.ts
+++ b/src/modules/04_registryPerson/stores/profile.ts
@@ -173,9 +173,13 @@ export const useProfileDataStore = defineStore("profile", () => {
         Ops.value.religionOps = optionreligions;
         OpsFilter.value.religionOps = optionreligions;
       })
-      .catch((e: any) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
       .finally(() => {
-        hideLoader();
+        setTimeout(() => {
+          hideLoader();
+        }, 2500);
       });
   };
 
diff --git a/src/modules/04_registryPerson/views/detailView.vue b/src/modules/04_registryPerson/views/detailView.vue
index c432e35b3..8a12ad1e7 100644
--- a/src/modules/04_registryPerson/views/detailView.vue
+++ b/src/modules/04_registryPerson/views/detailView.vue
@@ -199,7 +199,7 @@ function uploadFileURL(uploadUrl: string, file: any) {
 }
 
 function fetchProfile(id: string) {
-  showLoader();
+  // showLoader();
   http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
     .then(async (res) => {
@@ -208,9 +208,9 @@ function fetchProfile(id: string) {
     .catch(() => {
       profilePicture.value = avatar;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    // .finally(() => {
+    //   hideLoader();
+    // });
 }
 
 const reasonStatus = ref<boolean>(false);
@@ -254,7 +254,7 @@ async function fetchDataPersonal() {
   showLoader();
   await http
     .get(config.API.registryNewByProfileId(profileId.value, empType.value))
-    .then((res) => {
+    .then(async (res) => {
       formDetail.value = res.data.result;
 
       if (res.data.result.leaveReason) {
@@ -275,7 +275,7 @@ async function fetchDataPersonal() {
 
       fileName.value = res.data.result.avatarName;
       if (formDetail.value?.avatarName) {
-        fetchProfile(profileId.value);
+        await fetchProfile(profileId.value);
       } else {
         profilePicture.value = avatar;
       }
@@ -291,13 +291,13 @@ async function fetchDataPersonal() {
       }
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 2800);
     });
 }
 
 function onClickDownloadKp7(type: string) {
-  console.log(empType.value);
-
   showLoader();
   const url =
     type === "FULL"

From 02f0eac63a9810a583de41cd3f322963ecc0d796 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 27 Aug 2024 13:36:41 +0700
Subject: [PATCH 04/13] salary ==> fix bug

---
 .../13_salary/views/salaryEmployeeRate.vue        | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/modules/13_salary/views/salaryEmployeeRate.vue b/src/modules/13_salary/views/salaryEmployeeRate.vue
index d99241b1a..275e19fbb 100644
--- a/src/modules/13_salary/views/salaryEmployeeRate.vue
+++ b/src/modules/13_salary/views/salaryEmployeeRate.vue
@@ -168,17 +168,19 @@ function onEdit(data: EmployeeRateSalary) {
  */
 function onDelete(id: string) {
   dialogRemove($q, () => {
+    showLoader();
     http
       .delete(config.API.salaryEmployeeRateListByid(id))
-      .then(() => {
-        fetchSalalyEmployeeRate();
-        success($q, "ลบข้อมูลสำเร็จ");
+      .then(async () => {
+        await fetchSalalyEmployeeRate();
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((err) => {
         messageError($q, err);
-        hideLoader();
       })
-      .finally(() => {});
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -225,8 +227,7 @@ watch(
 );
 
 onMounted(async () => {
-  await fetchDataDetail();
-  await fetchSalalyEmployeeRate();
+  await Promise.all([fetchDataDetail(), fetchSalalyEmployeeRate()]);
 });
 </script>
 <template>

From 70d0975463d841c032f52e58c4bb997877918154 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 27 Aug 2024 13:53:52 +0700
Subject: [PATCH 05/13] salary

---
 src/modules/13_salary/views/salaryEmployeeLists.vue | 10 ++++++----
 src/modules/13_salary/views/salaryLists.vue         |  8 +++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/modules/13_salary/views/salaryEmployeeLists.vue b/src/modules/13_salary/views/salaryEmployeeLists.vue
index 77abd8ced..f66a10de0 100644
--- a/src/modules/13_salary/views/salaryEmployeeLists.vue
+++ b/src/modules/13_salary/views/salaryEmployeeLists.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, computed, nextTick } from "vue";
+import { onMounted, ref, nextTick } from "vue";
 import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -88,9 +88,11 @@ function getRound() {
         store.roundMainCode = roundFilter.value.shortCode;
         store.isClosedRound = roundFilter.value.isClose;
 
-        await getSnap(roundFilter.value.shortCode);
-        await getAgency(roundFilter.value.revisionId);
-        await getAgencyPosition(roundFilter.value.revisionId);
+        await Promise.all([
+          getSnap(roundFilter.value.shortCode),
+          getAgency(roundFilter.value.revisionId),
+          getAgencyPosition(roundFilter.value.revisionId),
+        ]);
       } else {
         isLoad.value = false;
         roundFilter.value = "ไม่มีข้อมูล";
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index 6f9d79e48..7edafe8ea 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -86,9 +86,11 @@ function getRound() {
         store.roundYear = roundFilter.value.year;
         store.isClosedRound = roundFilter.value.isClose;
 
-        await getSnap(roundFilter.value.shortCode);
-        await getAgency(roundFilter.value.revisionId);
-        await getAgencyPosition(roundFilter.value.revisionId);
+        await Promise.all([
+          getSnap(roundFilter.value.shortCode),
+          getAgency(roundFilter.value.revisionId),
+          getAgencyPosition(roundFilter.value.revisionId),
+        ]);
       } else {
         isLoad.value = false;
         roundFilter.value = "ไม่มีข้อมูล";

From 6797177b01fa50afc7696feddc3a0fde03eb2a16 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 27 Aug 2024 15:28:06 +0700
Subject: [PATCH 06/13] =?UTF-8?q?KPI=20=3D=3D>=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=20load?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../14_KPI/components/Tab/01_Assessment.vue   |  26 +-
 src/modules/14_KPI/components/Tab/TabMain.vue |   5 -
 .../components/Tab/Topic/01_Indicator.vue     |   8 +-
 .../components/Tab/Topic/02_Competency.vue    |  10 +-
 .../components/Tab/Topic/03_Develop.vue       |   6 +-
 src/modules/14_KPI/views/detailView.vue       | 224 ++++++------------
 6 files changed, 91 insertions(+), 188 deletions(-)

diff --git a/src/modules/14_KPI/components/Tab/01_Assessment.vue b/src/modules/14_KPI/components/Tab/01_Assessment.vue
index b5a7b41a4..fcc0573ee 100644
--- a/src/modules/14_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/14_KPI/components/Tab/01_Assessment.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, watch, reactive } from "vue";
-import { useQuasar, type QTableProps } from "quasar";
+import { ref, onMounted, computed, watch } from "vue";
+import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
 import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
@@ -21,8 +21,7 @@ const dataListCriteria = ref<ListCriteria[]>([]);
 const modalCriteria = ref<boolean>(false);
 const $q = useQuasar();
 const route = useRoute();
-const { hideLoader, messageError, success, showLoader, dialogRemove } =
-  useCounterMixin();
+const { messageError } = useCounterMixin();
 const store = useKpiDataStore();
 
 const evaluationId = ref<string>(route.params.id.toString());
@@ -206,18 +205,13 @@ watch(
   }
 );
 
-onMounted(() => {
-  showLoader(),
-    Promise.all([
-      getCriteria(),
-      fetchListPlanned(),
-      fetchListRole(),
-      fetchAssigned(),
-    ]).finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2500);
-    });
+onMounted(async () => {
+  await Promise.all([
+    getCriteria(),
+    fetchListPlanned(),
+    fetchListRole(),
+    fetchAssigned(),
+  ]);
 });
 </script>
 
diff --git a/src/modules/14_KPI/components/Tab/TabMain.vue b/src/modules/14_KPI/components/Tab/TabMain.vue
index 78e97ad3b..af596dd39 100644
--- a/src/modules/14_KPI/components/Tab/TabMain.vue
+++ b/src/modules/14_KPI/components/Tab/TabMain.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
-import { useRoute } from "vue-router";
 
 import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
-import Evaluator from "@/modules/14_KPI/components/Tab/02_Evaluator.vue";
-import CommanderAbove from "@/modules/14_KPI/components/Tab/03_CommanderAbove.vue";
-import CommanderAboveOneStep from "@/modules/14_KPI/components/Tab/04_CommanderAboveOneStep.vue";
 import File from "@/modules/14_KPI/components/Tab/05_File.vue";
 
 const store = useKpiDataStore();
-const route = useRoute();
 
 const itemsTab = ref<any>([
   {
diff --git a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
index 7410a026d..913af37fb 100644
--- a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
@@ -160,8 +160,8 @@ function onDelete(id: string) {
           ? config.API.kpiAchievement("special") + `/${id}`
           : "";
       await http.delete(url);
-      success($q, "ลบข้อมูลสำเร็จ");
-      props.fetchList?.();
+      await props.fetchList?.();
+      await success($q, "ลบข้อมูลสำเร็จ");
     } catch (err) {
       messageError($q, err);
     } finally {
@@ -304,7 +304,7 @@ const isEditStep3 = computed(() => {
           <q-tr :props="props" class="cursor-pointer">
             <q-td>
               <q-btn
-              v-if="isEditStep1"
+                v-if="isEditStep1"
                 flat
                 round
                 icon="mdi-eye"
@@ -374,7 +374,7 @@ const isEditStep3 = computed(() => {
                   <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
                 </q-btn>
                 <q-btn
-                v-if="!checkRoutePermisson"
+                  v-if="!checkRoutePermisson"
                   flat
                   round
                   icon="warning"
diff --git a/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
index 68474fe0d..73bb4f235 100644
--- a/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
@@ -220,9 +220,9 @@ function onDelete(id: string, type: string) {
     showLoader();
     http
       .delete(config.API.kpiUserCapacity + `/${id}`)
-      .then((res) => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        getData(type);
+      .then(async () => {
+        await getData(type);
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
@@ -363,7 +363,9 @@ onMounted(() => {
         <d-table
           ref="table"
           :columns="columns"
-          :rows="rows[item.id] && rows[item.id].length !== 0 ? rows[item.id] : []"
+          :rows="
+            rows[item.id] && rows[item.id].length !== 0 ? rows[item.id] : []
+          "
           row-key="id"
           flat
           bordered
diff --git a/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
index 42aea7964..5e7d0dd95 100644
--- a/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
@@ -142,9 +142,9 @@ function onDelete(id: string) {
     showLoader();
     http
       .delete(config.API.kpiAchievementDevelop + `/${id}`)
-      .then((res) => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        getDevelop();
+      .then(async () => {
+        await getDevelop();
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
diff --git a/src/modules/14_KPI/views/detailView.vue b/src/modules/14_KPI/views/detailView.vue
index bd6c39bd8..5cc4bf28c 100644
--- a/src/modules/14_KPI/views/detailView.vue
+++ b/src/modules/14_KPI/views/detailView.vue
@@ -1,23 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import Avatar from "@/assets/!avatar_user.jpg";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
 import Result from "@/modules/14_KPI/components/Tab/04_Result.vue";
 import File from "@/modules/14_KPI/components/Tab/05_File.vue";
 import DialogGovernment from "@/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue";
-import DialogStatus from "@/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue";
 
-import type {
-  DataOption,
-  ItemsTab,
-} from "@/modules/14_KPI/interface/index/Main";
-import type { ResUserEvaluation } from "@/modules/14_KPI/interface/response/KPI";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -47,19 +41,13 @@ const itemsTab = ref<any[]>([
 
 const splitterModel = ref<number>(12);
 const modalGovernment = ref<boolean>(false);
-const modalStatus = ref<boolean>(false);
-// const modalScore = ref<boolean>(false);
+
 const modalEdit = ref<boolean>(false);
 const route = useRoute();
 const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 const id = ref<string>(route.params.id as string);
 const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 
-// const plannedPoint = ref<string>("");
-// const rolePoint = ref<string>("");
-// const specialPoint = ref<string>("");
-// const capacityPoint = ref<string>("");
-
 const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -83,6 +71,7 @@ const commanderHighMainOp = ref<DataOption[]>([]);
 const evaluatorId = ref<any>(null);
 const commanderId = ref<any>(null);
 const commanderHighId = ref<any>(null);
+const avartar = ref<string>("");
 
 const formProfile = reactive<any>({
   fullName: "",
@@ -98,45 +87,49 @@ const formProfile = reactive<any>({
 const router = useRouter();
 
 async function fetchEvaluation() {
+  showLoader();
   await http
     .get(config.API.kpiEvaluationUser + `/${id.value}`)
     .then(async (res) => {
       const data = res.data.result;
       store.dataEvaluation = await data;
-      formProfile.status = store.convertStatus(data.evaluationStatus);
-      formProfile.result = store.convertResults(data.evaluationResults);
-      store.checkCompetency();
-      store.checkCompetencyDefaultCompetencyLevel();
+      formProfile.status = await store.convertStatus(data.evaluationStatus);
+      formProfile.result = await store.convertResults(data.evaluationResults);
 
-      fetchProfile(data.profileId);
+      await Promise.all([
+        store.checkCompetency(),
+        store.checkCompetencyDefaultCompetencyLevel(),
+        fetchProfile(data.profileId),
+        getProfile(),
+      ]);
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1200);
     });
 }
 
 async function fetchProfile(id: string) {
-  await http
-    .get(config.API.orgCheckAvatar(id))
-    .then(async (res) => {
-      if (res.data.result.avatarName) {
-        http
-          .get(
-            config.API.fileByFile(
-              "ทะเบียนประวัติ",
-              "โปรไฟล์",
-              id,
-              res.data.result.avatarName
-            )
+  await http.get(config.API.orgCheckAvatar(id)).then(async (res) => {
+    if (res.data.result.avatarName) {
+      http
+        .get(
+          config.API.fileByFile(
+            "ทะเบียนประวัติ",
+            "โปรไฟล์",
+            id,
+            res.data.result.avatarName
           )
-          .then(async (res) => {
-            store.dataEvaluation.avartar = res.data.downloadUrl;
-          });
-      }
-    })
-    .catch(() => {
-      // profilePicture.value = avatar;
-    });
+        )
+        .then(async (res) => {
+          avartar.value = res.data.downloadUrl;
+        });
+    }
+  });
 }
 
 function close() {
@@ -155,10 +148,10 @@ function onSubmit() {
             ? commanderHighId.value.id
             : null,
         })
-        .then((res) => {
-          fetchEvaluation();
+        .then(async () => {
+          await fetchEvaluation();
+          await success($q, "บันทึกสำเร็จ");
           close();
-          success($q, "บันทึกสำเร็จ");
         })
         .catch((e) => {
           messageError($q, e);
@@ -169,6 +162,7 @@ function onSubmit() {
     }
   });
 }
+
 async function getOrgOp() {
   http
     .get(config.API.Kpiorg + `/${store.dataProfile.profileId}`)
@@ -248,15 +242,15 @@ async function getProfile() {
       store.dataProfile = await data;
       await setTimeout(() => {
         store.checkStep();
-      }, 800);
+      }, 1000);
     })
     .catch((e) => {
       messageError($q, e);
     });
 }
+
 async function getAll() {
   await fetchEvaluation();
-  await getProfile();
 }
 
 function sendToEvaluatore() {
@@ -269,9 +263,9 @@ function sendToEvaluatore() {
           .put(config.API.kpiEvaluationUser + `/status/${id.value}`, {
             status: "NEW_EVALUATOR",
           })
-          .then((res) => {
-            success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
-            fetchEvaluation();
+          .then(async () => {
+            await fetchEvaluation();
+            await success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
           })
           .catch((e) => {
             messageError($q, e);
@@ -296,9 +290,9 @@ function sendToEvaluateEvaluatore() {
           .put(config.API.kpiSendToStatus(id.value), {
             status: "EVALUATING_EVALUATOR",
           })
-          .then((res) => {
-            success($q, "ส่งให้ผู้ประเมินรายงานผลสำเร็จของงานสำเร็จ");
-            fetchEvaluation();
+          .then(async () => {
+            await fetchEvaluation();
+            await success($q, "ส่งให้ผู้ประเมินรายงานผลสำเร็จของงานสำเร็จ");
           })
           .catch((e) => {
             messageError($q, e);
@@ -323,9 +317,9 @@ function requireEdit() {
           .put(config.API.kpiReqEditUser(id.value), {
             status: "EVALUATOR",
           })
-          .then((res) => {
-            success($q, "ขอแก้ไขสำเร็จ");
-            fetchEvaluation();
+          .then(async () => {
+            await fetchEvaluation();
+            await success($q, "ขอแก้ไขสำเร็จ");
           })
           .catch((e) => {
             messageError($q, e);
@@ -345,7 +339,6 @@ function openGovernment() {
 }
 function openStatus() {
   router.push(`/probation-detail/${store.dataEvaluation.profileId}`);
-  // modalStatus.value = true;
 }
 
 function sendToEvauator() {
@@ -356,7 +349,7 @@ function sendToEvauator() {
         status: "EVALUATING",
         id: [store.dataEvaluation.id],
       })
-      .then(async (res) => {
+      .then(async () => {
         await getAll();
         store.tabMain = "3";
       })
@@ -416,6 +409,7 @@ const evaluator = ref<any>({
   isPosmasterAct: false,
   posmasterAct: [],
 });
+
 async function fetchProfileEvaluator(id: string) {
   showLoader();
   http
@@ -465,10 +459,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="80px">
-        <q-img
-          :src="store.dataEvaluation.avartar"
-          v-if="store.dataEvaluation.avartar !== undefined"
-        />
+        <q-img :src="avartar" v-if="avartar !== undefined && avartar !== ''" />
         <q-img src="@/assets/avatar_user.jpg" v-else />
       </q-avatar>
     </div>
@@ -479,10 +470,7 @@ onMounted(async () => {
       style="left: 2%; top: 50%; transform: translateY(-50%)"
     >
       <q-avatar size="80px">
-        <q-img
-          :src="store.dataEvaluation.avartar"
-          v-if="store.dataEvaluation.avartar !== undefined"
-        />
+        <q-img :src="avartar" v-if="avartar !== undefined && avartar !== ''" />
         <q-img src="@/assets/avatar_user.jpg" v-else />
       </q-avatar>
     </div>
@@ -860,6 +848,7 @@ onMounted(async () => {
         </q-expansion-item> </q-list
     ></q-card-section>
   </q-card>
+
   <q-dialog v-model="modalEdit" persistent>
     <q-card bordered style="width: 50vh">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
@@ -878,7 +867,8 @@ onMounted(async () => {
             <div class="row">
               <div class="col-10">
                 <q-select
-                  :readonly="checkRoutePermisson||
+                  :readonly="
+                    checkRoutePermisson ||
                     !(
                       store.dataEvaluation.evaluationStatus === 'NEW' &&
                       store.rolePerson === 'USER'
@@ -919,7 +909,8 @@ onMounted(async () => {
             <div class="row">
               <div class="col-10">
                 <q-select
-                  :readonly="checkRoutePermisson||
+                  :readonly="
+                    checkRoutePermisson ||
                     !(
                       store.dataEvaluation.evaluationStatus === 'NEW' &&
                       store.rolePerson === 'USER'
@@ -971,7 +962,8 @@ onMounted(async () => {
             <div class="row">
               <div class="col-10">
                 <q-select
-                  :readonly="checkRoutePermisson||
+                  :readonly="
+                    checkRoutePermisson ||
                     !(
                       store.dataEvaluation.evaluationStatus === 'NEW' &&
                       store.rolePerson === 'USER'
@@ -1026,9 +1018,10 @@ onMounted(async () => {
             </div>
           </div>
         </q-card-section>
-        <q-separator v-if="!checkRoutePermisson"/>
+        <q-separator v-if="!checkRoutePermisson" />
         <q-card-actions
-          v-if="!checkRoutePermisson&&
+          v-if="
+            !checkRoutePermisson &&
             store.dataEvaluation.evaluationStatus === 'NEW' &&
             store.rolePerson === 'USER'
           "
@@ -1095,13 +1088,13 @@ onMounted(async () => {
                 <div class="col-12">รักษาการในตำแหน่ง/การรักษาราชการแทน</div>
               </div>
               <div class="row">
-              <div class="col-12" v-if="evaluator.isPosmasterAct">
-                {{
-                  `${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
-                }}
+                <div class="col-12" v-if="evaluator.isPosmasterAct">
+                  {{
+                    `${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
+                  }}
+                </div>
+                <div class="col-12" v-else>-</div>
               </div>
-              <div class="col-12" v-else>-</div>
-            </div>
             </div>
           </div>
         </q-card-section>
@@ -1109,88 +1102,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <!-- <q-dialog v-model="modalScore" persistent>
-    <q-card bordered style="width: 50vh">
-      <q-form greedy @submit.prevent @validation-success="onSubmitScore">
-        <DialogHeader tittle="แก้ไขคะแนนเต็ม" :close="clearScore" />
-        <q-separator />
-        <q-card-section>
-          <div class="column q-gutter-sm">
-            <q-input
-              v-model="plannedPoint"
-              label="งานตามแผนปฏิบัติราชการประจำปี"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[
-                (val) =>
-                  !!val ||
-                  val == '0' ||
-                  'กรุณากรอกคะเเนนงานตามแผนปฏิบัติราชการประจำปี หรือ 0',
-              ]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="rolePoint"
-              label="งานตามหน้าที่ความรับผิดชอบหลัก"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' || `${'กรุณากรอกคะเเนนงานตามหน้าที่ความรับผิดชอบหลัก หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="specialPoint"
-              label="งานที่ได้รับมอบหมายพิเศษ"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนงานที่ได้รับมอบหมายพิเศษ หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="capacityPoint"
-              label="สมรรถนะ"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนสมรรถนะ หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="bg-white row justify-between">
-          <div class="col-8 text-red q-px-sm">
-            <span v-if="scoreTotal == true"
-              >คะแนนเต็มรวมกันต้องเท่ากับ 100 คะแนน</span
-            >
-          </div>
-          <q-btn
-            label="บันทึก"
-            color="secondary"
-            type="submit"
-            :disable="totalScore !== 100"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog> -->
   <DialogGovernment v-model:modal="modalGovernment" />
-
-  <!-- <DialogStatus
-    v-model:modal="modalStatus"
-    v-model:is-probation="store.dataProfile.isProbation"
-  /> -->
 </template>
 <style>
 .bg-toolbar {

From ee8138a5768e2991750ea44917207148feeef2ac Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 27 Aug 2024 15:40:27 +0700
Subject: [PATCH 07/13] fix bug

---
 src/modules/14_KPI/views/detailView.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/modules/14_KPI/views/detailView.vue b/src/modules/14_KPI/views/detailView.vue
index 5cc4bf28c..e9619710f 100644
--- a/src/modules/14_KPI/views/detailView.vue
+++ b/src/modules/14_KPI/views/detailView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, onUnmounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -438,6 +438,16 @@ onMounted(async () => {
   store.isUpdate = await false;
   await getAll();
 });
+
+onUnmounted(() => {
+  store.indicatorScoreVal = 0;
+  store.competencyScoreVal = 0;
+  store.devScoreVal = 0;
+
+  store.excusiveIndicator1ScoreVal = 0;
+  store.excusiveIndicator2ScoreVal = 0;
+  store.competencyScoreVal = 0;
+});
 </script>
 
 <template>

From a1c20de033c625b281c7d297d2795533478421d0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 27 Aug 2024 16:41:57 +0700
Subject: [PATCH 08/13] no message

---
 src/modules/14_KPI/components/results/tableResults.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/14_KPI/components/results/tableResults.vue b/src/modules/14_KPI/components/results/tableResults.vue
index e7a427b39..e7b39196a 100644
--- a/src/modules/14_KPI/components/results/tableResults.vue
+++ b/src/modules/14_KPI/components/results/tableResults.vue
@@ -390,7 +390,7 @@ onMounted(() => {
         />
       </template>
       <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
+        <q-tr :props="props">
           <q-td v-if="tab === 'COMPLETE'">
             <q-checkbox
               v-if="tab === 'COMPLETE' && checkPermission($route)?.attrIsUpdate"

From b9f8be8dc0ef33c450ddcc81fee18905837359f8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 27 Aug 2024 18:08:50 +0700
Subject: [PATCH 09/13] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=8A=E0=B8=B1=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=B2=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogAddEmployee.vue               | 12 +++++-------
 .../components/DialogSelectPos.vue                 |  6 +++---
 .../components/DialogSendOrder.vue                 |  6 +++---
 .../components/DialogSendToCommand.vue             | 10 +++++-----
 src/modules/08_registryEmployee/views/Main.vue     | 14 ++++++--------
 5 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/modules/08_registryEmployee/components/DialogAddEmployee.vue b/src/modules/08_registryEmployee/components/DialogAddEmployee.vue
index 7a44e1458..9a5f19525 100644
--- a/src/modules/08_registryEmployee/components/DialogAddEmployee.vue
+++ b/src/modules/08_registryEmployee/components/DialogAddEmployee.vue
@@ -216,19 +216,17 @@ function calculateMaxDate() {
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
-    http
+    await http
       .post(config.API.registryNew("-employee"), formData)
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        props.fetchData?.();
+      .then(async () => {
+        await props.fetchData?.();
+        await success($q, "บันทึกข้อมูลสำเร็จ");
         closeDialog();
       })
       .catch((err) => {
         messageError($q, err);
-      })
-      .finally(() => {
         hideLoader();
       });
   });
diff --git a/src/modules/08_registryEmployee/components/DialogSelectPos.vue b/src/modules/08_registryEmployee/components/DialogSelectPos.vue
index e925afa3b..3d0bbd403 100644
--- a/src/modules/08_registryEmployee/components/DialogSelectPos.vue
+++ b/src/modules/08_registryEmployee/components/DialogSelectPos.vue
@@ -378,9 +378,9 @@ async function onClickSubmit() {
 
       await http
         .put(config.API.positionEmployee(props?.dataRow?.id), body)
-        .then(() => {
-          success($q, "บันทึกข้อมูลสำเร็จ");
-          props.fetchData?.();
+        .then(async () => {
+          await props.fetchData?.();
+          await success($q, "บันทึกข้อมูลสำเร็จ");
           closePopup();
         })
         .catch((err) => {
diff --git a/src/modules/08_registryEmployee/components/DialogSendOrder.vue b/src/modules/08_registryEmployee/components/DialogSendOrder.vue
index 465f6f655..52b209789 100644
--- a/src/modules/08_registryEmployee/components/DialogSendOrder.vue
+++ b/src/modules/08_registryEmployee/components/DialogSendOrder.vue
@@ -182,10 +182,10 @@ function onClickSendOrder() {
         };
         http
           .post(config.API.orgProfileReport, data)
-          .then(() => {
-            success($q, "บันทึกสำเร็จ");
+          .then(async() => {
+           await props?.fetchData?.();
+          await  success($q, "บันทึกสำเร็จ");
             closeDialog();
-            props?.fetchData?.();
           })
           .catch((err) => {
             messageError($q, err);
diff --git a/src/modules/08_registryEmployee/components/DialogSendToCommand.vue b/src/modules/08_registryEmployee/components/DialogSendToCommand.vue
index b87a817cc..522a2bbc7 100644
--- a/src/modules/08_registryEmployee/components/DialogSendToCommand.vue
+++ b/src/modules/08_registryEmployee/components/DialogSendToCommand.vue
@@ -258,16 +258,16 @@ const sendToCommand = async () => {
   showLoader();
   await http
     .post(config.API.organizationEmployeeSendOrder, data)
-    .then((res: any) => {
-      success($q, "บันทึกสำเร็จ");
+    .then(async () => {
+      await props.fetchNewList();
+      await success($q, "บันทึกสำเร็จ");
+      props.closeDialog();
+      selected.value = [];
     })
     .catch((e: any) => {
       messageError($q, e);
     })
     .finally(async () => {
-      props.fetchNewList();
-      props.closeDialog();
-      selected.value = [];
       hideLoader();
     });
 };
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 7b968d47a..6b914c99f 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -218,7 +218,7 @@ watch(
 function fetchList() {
   showLoader();
   http
-    .get(config.API.registryNew("-employee"), { params: queryParams })
+    .get(config.API.registryNew("-temp"), { params: queryParams })
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / queryParams.pageSize);
       total.value = res.data.result.total;
@@ -233,18 +233,16 @@ function fetchList() {
 }
 
 function onClickDelete(id: string) {
-  dialogRemove($q, () => {
+  dialogRemove($q, async () => {
     showLoader();
-    http
+    await http
       .delete(config.API.registryNew("-employee") + `/${id}`)
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        fetchList();
+      .then(async () => {
+        await fetchList();
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((err) => {
         messageError($q, err);
-      })
-      .finally(() => {
         hideLoader();
       });
   });

From be2a9a8ca68467dc150e44924d05d7d3c373f75a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 28 Aug 2024 10:06:10 +0700
Subject: [PATCH 10/13] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=9C=E0=B8=B1=E0=B8=87=E0=B8=9A=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=8D=E0=B8=8A=E0=B8=B5=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99?=
 =?UTF-8?q?=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99=20=3D>=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20form=20dailog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SalaryChart/DialogFormMain.vue |   9 +-
 .../components/SalaryChart/DialogFormRate.vue | 231 +++++++++---------
 src/modules/13_salary/views/salaryChart.vue   |   4 +-
 3 files changed, 121 insertions(+), 123 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
index 5fa81ff11..56cee398d 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue
@@ -122,8 +122,8 @@ function fetchSalaryDetail(id: string) {
   showLoader();
   http
     .get(config.API.salaryChartByid(id))
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       formData.name = data.name;
       formData.posTypeId = data.posTypeId;
       formData.posLevelId = data.posLevelId;
@@ -159,9 +159,8 @@ watch(
             salaryId.value = props.data.id;
             fetchPosLevel(props?.data?.posTypeId);
             fetchSalaryDetail(props.data.id);
-            hideLoader();
           }
-        }, 2000);
+        }, 1000);
       }
     }
   }
@@ -269,7 +268,7 @@ const getClass = (val: boolean) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card class="col-12" style="width: 55%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header :tittle="title" :close="closeDialog" />
         <q-separator />
diff --git a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue b/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
index c7c6f4f19..af9d1090f 100644
--- a/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
+++ b/src/modules/13_salary/components/SalaryChart/DialogFormRate.vue
@@ -1,3 +1,4 @@
+divdivdiv
 <script setup lang="ts">
 import { computed, ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
@@ -189,132 +190,130 @@ const getClass = (val: boolean) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 700px; max-width: 80vw">
+    <q-card style="width: 650px; max-width: 80vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header :tittle="title" :close="closeDialog" />
         <q-separator />
 
         <q-card-section>
-          <div class="row q-gutter-sm q-pa-sm">
-            <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
-              <div class="col-6">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryRef"
-                  dense
-                  outlined
-                  v-model="formData.salary"
-                  label="เงินเดือนฐาน"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-6 row items-center">
-                <q-checkbox dense v-model="formData.isNext" label="ทะลุขั้น" />
-              </div>
-              <div class="col-6">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryHalfRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryHalf"
-                  label="เลื่อน 0.5 ขั้น"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 0.5 ขั้น'}`]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-6">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryHalfSpecialRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryHalfSpecial"
-                  label="เงินพิเศษ"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-6">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryFullRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryFull"
-                  label="เลื่อน 1 ขั้น"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1 ขั้น'}`]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-6">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryFullSpecialRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryFullSpecial"
-                  label="เงินพิเศษ"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-6">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryFullHalfRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryFullHalf"
-                  label="เลื่อน 1.5 ขั้น"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1.5 ขั้น'}`]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-6">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryFullHalfSpecialRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryFullHalfSpecial"
-                  label="เงินพิเศษ"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
+          <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryRef"
+                dense
+                outlined
+                v-model="formData.salary"
+                label="เงินเดือนฐาน"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6 row items-center">
+              <q-checkbox dense v-model="formData.isNext" label="ทะลุขั้น" />
+            </div>
+            <div class="col-6">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryHalfRef"
+                dense
+                outlined
+                v-model="formData.salaryHalf"
+                label="เลื่อน 0.5 ขั้น"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 0.5 ขั้น'}`]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryHalfSpecialRef"
+                dense
+                outlined
+                v-model="formData.salaryHalfSpecial"
+                label="เงินพิเศษ"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryFullRef"
+                dense
+                outlined
+                v-model="formData.salaryFull"
+                label="เลื่อน 1 ขั้น"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1 ขั้น'}`]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryFullSpecialRef"
+                dense
+                outlined
+                v-model="formData.salaryFullSpecial"
+                label="เงินพิเศษ"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryFullHalfRef"
+                dense
+                outlined
+                v-model="formData.salaryFullHalf"
+                label="เลื่อน 1.5 ขั้น"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[(val) => !!val || `${'กรุณากรอกเลื่อน 1.5 ขั้น'}`]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryFullHalfSpecialRef"
+                dense
+                outlined
+                v-model="formData.salaryFullHalfSpecial"
+                label="เงินพิเศษ"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                lazy-rules
+                hide-bottom-space
+              />
             </div>
           </div>
         </q-card-section>
         <q-separator />
 
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-actions align="right">
           <q-btn label="บันทึก" color="secondary" type="submit"
             ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
           >
diff --git a/src/modules/13_salary/views/salaryChart.vue b/src/modules/13_salary/views/salaryChart.vue
index f574352c9..68cbfe455 100644
--- a/src/modules/13_salary/views/salaryChart.vue
+++ b/src/modules/13_salary/views/salaryChart.vue
@@ -159,7 +159,7 @@ function onClickCoppy(id: string) {
     .post(config.API.salaryChartCopy, { id: id })
     .then(async () => {
       await fetchListSalaly();
-      await success($q, "คัดลอกข้อมูลสำเร็จ");
+      success($q, "คัดลอกข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
@@ -180,7 +180,7 @@ function onClickDelete(id: string) {
       .delete(config.API.salaryChartByid(id))
       .then(async () => {
         await fetchListSalaly();
-        await success($q, "ลบข้อมูลสำเร็จ");
+        success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((err) => {
         messageError($q, err);

From f6b1580cf15578373eec8602945b290bd6acc281 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 28 Aug 2024 11:33:36 +0700
Subject: [PATCH 11/13] =?UTF-8?q?=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99?=
 =?UTF-8?q?=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99=20=3D=3D>=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=99=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SalaryEmployeeLists/ProcessStep.vue       | 143 +++---
 .../components/SalaryLists/ProcessStep.vue    | 331 +++++++------
 .../components/SalaryRound/DialogForm.vue     |   2 +-
 .../DialogEmployeeChart.vue                   | 352 +++++++-------
 .../DialogEmployeeRate.vue                    | 121 +++--
 .../DialogFormCriteria.vue                    | 441 +++++++++---------
 6 files changed, 712 insertions(+), 678 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
index 1f44a86b8..94b94d47f 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
@@ -244,35 +244,90 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="row col-12 q-pa-md">
-    <q-toolbar style="padding: 0px">
-      <q-file
+  <q-card class="col-12">
+    <q-card-section>
+      <q-toolbar
+        class="q-pa-none"
         v-if="
           store.statusQuota == 'PENDING' &&
           checkPermission($route)?.attrIsUpdate
         "
-        bg-color="white"
-        clearable
-        outlined
-        dense
-        v-model="fileUpload"
-        label="อัปโหลดไฟล์"
       >
-        <template v-slot:prepend>
-          <q-icon color="light-blue" name="attach_file" />
+        <q-file
+          bg-color="white"
+          clearable
+          outlined
+          dense
+          v-model="fileUpload"
+          label="อัปโหลดไฟล์"
+        >
+          <template v-slot:prepend>
+            <q-icon color="light-blue" name="attach_file" />
+            <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+          </template>
+        </q-file>
+
+        <q-btn
+          dense
+          flat
+          round
+          color="light-blue"
+          icon="upload"
+          @click="uploadFile(fileUpload)"
+          v-if="fileUpload !== null"
+        >
           <q-tooltip>อัปโหลดไฟล์</q-tooltip>
-        </template>
-      </q-file>
+        </q-btn>
 
-      <q-btn
-        flat
-        color="light-blue"
-        icon="upload"
-        @click="uploadFile(fileUpload)"
-        v-if="fileUpload !== null"
-      />
+        <q-space />
+      </q-toolbar>
+      <div class="row">
+        <div class="col-6" v-if="listFile.length !== 0">
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
+              รายการเอกสาร
+            </div>
+            <q-list bordered separator>
+              <q-item clickable v-ripple v-for="item in listFile">
+                <q-item-section>{{ item.fileName }}</q-item-section>
+                <q-item-section avatar>
+                  <div class="row">
+                    <div>
+                      <q-btn
+                        v-if="checkPermission($route)?.attrIsGet"
+                        dense
+                        flat
+                        round
+                        color="blue"
+                        icon="mdi-download"
+                        @click="downloadFile(item.fileName)"
+                      >
+                        <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div>
+                      <q-btn
+                        v-if="checkPermission($route)?.attrIsDelete"
+                        dense
+                        flat
+                        round
+                        color="red"
+                        icon="mdi-delete"
+                        @click="onDeleteFile(item.fileName)"
+                        ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card-section>
 
-      <q-space />
+    <q-separator />
+    <q-card-actions align="right">
       <div>
         <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
         <q-btn
@@ -357,50 +412,8 @@ onMounted(() => {
           label="รอออกคำสั่ง"
         />
       </div>
-    </q-toolbar>
-
-    <div class="col-6" v-if="listFile.length !== 0">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          รายการเอกสาร
-        </div>
-        <q-list bordered separator>
-          <q-item clickable v-ripple v-for="item in listFile">
-            <q-item-section>{{ item.fileName }}</q-item-section>
-            <q-item-section avatar>
-              <div class="row">
-                <div>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsGet"
-                    dense
-                    flat
-                    round
-                    color="blue"
-                    icon="mdi-download"
-                    @click="downloadFile(item.fileName)"
-                  >
-                    <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
-                  </q-btn>
-                </div>
-                <div>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsDelete"
-                    dense
-                    flat
-                    round
-                    color="red"
-                    icon="mdi-delete"
-                    @click="onDeleteFile(item.fileName)"
-                    ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
-                  >
-                </div>
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-  </div>
+    </q-card-actions>
+  </q-card>
 
   <DialogPopupReason
     v-model:modal="modalRecommend"
diff --git a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
index ff2edc11b..9aa5b591b 100644
--- a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
@@ -111,7 +111,9 @@ function uploadfile(uploadUrl: string, file: any) {
     });
 }
 
-/** function fetchList ไฟล์*/
+/**
+ * fetchList ไฟล์
+ */
 function getListFile() {
   http
     .get(
@@ -130,69 +132,8 @@ function getListFile() {
     });
 }
 
-function saveReccommend(reason: string) {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      http
-        .put(
-          config.API.salaryPeriodStatusComment(
-            type.value,
-            props.periodId ? props.periodId : "",
-            props.rootId ? props.rootId : ""
-          ),
-          {
-            titleRecommend: reason,
-          }
-        )
-        .then(async () => {
-          await props.getData?.();
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-      sendStep.value = sendStep.value + 1;
-      modalRecommend.value = false;
-    },
-    "ยืนยันการ" + titleRecommend.value,
-    "ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
-  );
-}
-
-function sendToDirector(msg: string, type: string) {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      http
-        .get(
-          config.API.salaryPeriodStatus(
-            type,
-            props.periodId ? props.periodId : "",
-            props.rootId ? props.rootId : ""
-          )
-        )
-        .then(() => {
-          props.getData?.();
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการ" + msg,
-    "ต้องการยืนยันการ" + msg + "หรือไม่?"
-  );
-}
-
 /**
- *  function โหลดไฟล์
+ *  โหลดไฟล์
  * @param fileName  ชื่อไฟล์
  */
 function downloadFile(fileName: string) {
@@ -220,7 +161,7 @@ function downloadFile(fileName: string) {
 }
 
 /**
- *  function ลบไฟล์
+ *  ลบไฟล์
  * @param fileName  ชื่อไฟล์
  */
 function deleteFile(fileName: string) {
@@ -250,12 +191,87 @@ function deleteFile(fileName: string) {
   });
 }
 
+/**
+ * ยืนยันการส่ง
+ * @param msg ส่งเอกสารให้ ผอ. ตรวจสอบ,ยืนยันและส่งเอกสารให้,ยืนยันการตรวจสอบ
+ * @param type officer, head,owner
+ */
+function sendToDirector(msg: string, type: string) {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      http
+        .get(
+          config.API.salaryPeriodStatus(
+            type,
+            props.periodId ? props.periodId : "",
+            props.rootId ? props.rootId : ""
+          )
+        )
+        .then(() => {
+          props.getData?.();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการ" + msg,
+    "ต้องการยืนยันการ" + msg + "หรือไม่?"
+  );
+}
+
+/**
+ * ส่งคำแนะนำให้ ผอ. ตรวจสอบ
+ * @param title หัวข้อ
+ * @param typeOrder ประเภทคำสั่ง
+ */
 function sendAndRecommend(title: string, typeOrder: string) {
   modalRecommend.value = true;
   titleRecommend.value = title;
   type.value = typeOrder;
 }
 
+/**
+ * ยินยันการบันทึกคำแนะนำ
+ * @param reason คำแนะนำ
+ */
+function saveReccommend(reason: string) {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      http
+        .put(
+          config.API.salaryPeriodStatusComment(
+            type.value,
+            props.periodId ? props.periodId : "",
+            props.rootId ? props.rootId : ""
+          ),
+          {
+            titleRecommend: reason,
+          }
+        )
+        .then(async () => {
+          await props.getData?.();
+          sendStep.value = sendStep.value + 1;
+          modalRecommend.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการ" + titleRecommend.value,
+    "ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
+  );
+}
+
 onMounted(() => {
   if (props.rootId) {
     getListFile();
@@ -264,51 +280,106 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="row col-12 q-pa-md">
-    <q-toolbar class="q-pa-none">
-      <q-file
+  <q-card class="col-12">
+    <q-card-section>
+      <q-toolbar
+        class="q-pa-none"
         v-if="
           store.statusQuota == 'PENDING' &&
           checkPermission($route)?.attrIsUpdate
         "
-        bg-color="white"
-        clearable
-        outlined
-        dense
-        v-model="fileUpload"
-        accept=".pdf"
-        label="อัปโหลดไฟล์"
       >
-        <template v-slot:prepend>
-          <q-icon color="light-blue" name="attach_file" />
-          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
-        </template>
-      </q-file>
+        <q-file
+          bg-color="white"
+          clearable
+          outlined
+          dense
+          v-model="fileUpload"
+          accept=".pdf"
+          label="อัปโหลดไฟล์"
+        >
+          <template v-slot:prepend>
+            <q-icon color="light-blue" name="attach_file" />
+            <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+          </template>
+        </q-file>
 
-      <q-btn
-        flat
-        color="light-blue"
-        icon="upload"
-        @click="uploadFile(fileUpload)"
-        v-if="fileUpload !== null"
-      />
-      <div v-if="document">
         <q-btn
           dense
-          color="primary"
-          icon-right="mdi-download"
-          label="ดาวน์โหลดไฟล์"
-          outline
-          :href="document"
-          target="_blank"
+          flat
+          round
+          color="light-blue"
+          icon="upload"
+          @click="uploadFile(fileUpload)"
+          v-if="fileUpload !== null"
         >
-          <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
-        >
-      </div>
+          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+        </q-btn>
+        <div v-if="document">
+          <q-btn
+            dense
+            color="primary"
+            icon-right="mdi-download"
+            label="ดาวน์โหลดไฟล์"
+            outline
+            :href="document"
+            target="_blank"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
+          >
+        </div>
 
-      <q-toolbar-title>
-        <!-- Toolbar -->
-      </q-toolbar-title>
+        <q-toolbar-title>
+          <!-- Toolbar -->
+        </q-toolbar-title>
+      </q-toolbar>
+      <div class="row">
+        <div class="col-6" v-if="listFile.length !== 0">
+          <q-card bordered style="border: 1px solid #d6dee1">
+            <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+              รายการเอกสาร
+            </div>
+            <q-list bordered separator>
+              <q-item clickable v-ripple v-for="item in listFile">
+                <q-item-section>{{ item.fileName }}</q-item-section>
+                <q-item-section avatar>
+                  <div class="row">
+                    <div>
+                      <q-btn
+                        v-if="checkPermission($route)?.attrIsGet"
+                        dense
+                        flat
+                        round
+                        color="blue"
+                        icon="mdi-download"
+                        @click="downloadFile(item.fileName)"
+                      >
+                        <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div>
+                      <q-btn
+                        v-if="checkPermission($route)?.attrIsDelete"
+                        dense
+                        flat
+                        round
+                        color="red"
+                        icon="delete"
+                        @click="deleteFile(item.fileName)"
+                        ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-separator />
+    <q-card-actions align="right">
       <div>
         <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
         <q-btn
@@ -373,6 +444,7 @@ onMounted(() => {
           "
         />
 
+        <!-- ส่งไปออกคำสั่ง -->
         <q-btn
           v-if="
             store.statusQuota == 'WAITOFFICER2' &&
@@ -382,6 +454,8 @@ onMounted(() => {
           color="public"
           label="ส่งไปออกคำสั่ง"
         />
+
+        <!-- รอออกคำสั่ง -->
         <q-btn
           v-if="
             store.statusQuota == 'REPORT' &&
@@ -393,57 +467,16 @@ onMounted(() => {
           label="รอออกคำสั่ง"
         />
       </div>
-    </q-toolbar>
-    <div class="col-6" v-if="listFile.length !== 0">
-      <q-card bordered style="border: 1px solid #d6dee1">
-        <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-          รายการเอกสาร
-        </div>
-        <q-list bordered separator>
-          <q-item clickable v-ripple v-for="item in listFile">
-            <q-item-section>{{ item.fileName }}</q-item-section>
-            <q-item-section avatar>
-              <div class="row">
-                <div>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsGet"
-                    dense
-                    flat
-                    round
-                    color="blue"
-                    icon="mdi-download"
-                    @click="downloadFile(item.fileName)"
-                  >
-                    <q-tooltip>ดาวน์โหลดเอกสาร</q-tooltip>
-                  </q-btn>
-                </div>
-                <div>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsDelete"
-                    dense
-                    flat
-                    round
-                    color="red"
-                    icon="delete"
-                    @click="deleteFile(item.fileName)"
-                    ><q-tooltip>ลบเอกสาร</q-tooltip></q-btn
-                  >
-                </div>
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
+    </q-card-actions>
+  </q-card>
 
-    <DialogPopupReason
-      v-model:modal="modalRecommend"
-      :title="titleRecommend"
-      label="คำแนะนำ"
-      :savaForm="saveReccommend"
-      textReport=""
-    />
-  </div>
+  <DialogPopupReason
+    v-model:modal="modalRecommend"
+    :title="titleRecommend"
+    label="คำแนะนำ"
+    :savaForm="saveReccommend"
+    textReport=""
+  />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryRound/DialogForm.vue b/src/modules/13_salary/components/SalaryRound/DialogForm.vue
index 1c368a1b3..b7fe9f7ea 100644
--- a/src/modules/13_salary/components/SalaryRound/DialogForm.vue
+++ b/src/modules/13_salary/components/SalaryRound/DialogForm.vue
@@ -127,7 +127,7 @@ watch(
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 30%">
+    <q-card class="col-12" style="width: 23%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="`${
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
index 013ba0713..c7ae19ace 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue
@@ -148,7 +148,7 @@ const getClass = (val: boolean) => {
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card class="col-12" style="width: 55%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="
@@ -163,202 +163,194 @@ const getClass = (val: boolean) => {
         <q-separator />
         <q-card-section class="scroll" style="max-height: 70vh">
           <div class="row col-12 q-col-gutter-sm">
-            <div class="col-md-12">
-              <div class="row col-12 q-col-gutter-sm">
-                <div class="col-xs-12 col-md-4">
+            <div class="col-xs-12 col-md-4">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="nameRef"
+                dense
+                hide-bottom-space
+                outlined
+                v-model="formData.name"
+                label="ชื่อผังบัญชีอัตราค่าจ้าง"
+                :rules="[(val) => !!val || 'กรุณากรอกชื่อผังบัญชีอัตราค่าจ้าง']"
+                lazy-rules
+              />
+            </div>
+
+            <div class="col-xs-12 col-md-4">
+              <q-input
+                ref="groupRef"
+                week-start="0"
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                dense
+                outlined
+                v-model="formData.group"
+                label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
+                hide-bottom-space
+                mask="#"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || 'กรุณากรอกกลุ่มของผังบัญชีอัตราค่าจ้าง',
+                ]"
+              />
+            </div>
+
+            <div
+              class="col-xs-12 col-md-4"
+              style="display: flex; justify-content: flex-start"
+            >
+              <q-toggle
+                week-start="0"
+                :disable="isReadonly"
+                color="primary"
+                label="สถานะการใช้งาน"
+                v-model="formData.isActive"
+              />
+            </div>
+
+            <div class="col-xs-12 col-md-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.date"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
                   <q-input
                     :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
-                    ref="nameRef"
+                    outlined
                     dense
                     hide-bottom-space
-                    outlined
-                    v-model="formData.name"
-                    label="ชื่อผังบัญชีอัตราค่าจ้าง"
-                    :rules="[
-                      (val) => !!val || 'กรุณากรอกชื่อผังบัญชีอัตราค่าจ้าง',
-                    ]"
-                    lazy-rules
-                  />
-                </div>
+                    :model-value="
+                      formData.date != null ? date2Thai(formData.date) : 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-4">
+            <div class="col-xs-12 col-md-4">
+              <datepicker
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                menu-class-name="modalfix"
+                v-model="formData.startDate"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="checkEndDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
                   <q-input
-                    ref="groupRef"
-                    week-start="0"
                     :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
-                    dense
                     outlined
-                    v-model="formData.group"
-                    label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
+                    dense
                     hide-bottom-space
-                    mask="#"
-                    reverse-fill-mask
-                    :rules="[
-                      (val) => !!val || 'กรุณากรอกกลุ่มของผังบัญชีอัตราค่าจ้าง',
-                    ]"
-                  />
-                </div>
-
-                <div
-                  class="col-xs-12 col-md-4"
-                  style="display: flex; justify-content: flex-start"
-                >
-                  <q-toggle
-                    week-start="0"
-                    :disable="isReadonly"
-                    color="primary"
-                    label="สถานะการใช้งาน"
-                    v-model="formData.isActive"
-                  />
-                </div>
-
-                <div class="col-xs-12 col-md-4">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formData.date"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
+                    :model-value="
+                      formData.startDate != null
+                        ? date2Thai(formData.startDate)
+                        : null
+                    "
+                    label="วันที่มีผลบังคับใช้"
                   >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        :readonly="isReadonly"
-                        outlined
-                        dense
-                        hide-bottom-space
-                        :model-value="
-                          formData.date != null
-                            ? date2Thai(formData.date)
-                            : null
-                        "
-                        label="ให้ไว้ ณ วันที่"
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
                       >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
+                      </q-icon>
                     </template>
-                  </datepicker>
-                </div>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
 
-                <div class="col-xs-12 col-md-4">
-                  <datepicker
-                    :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
-                    menu-class-name="modalfix"
-                    v-model="formData.startDate"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:model-value="checkEndDate"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        :readonly="isReadonly"
-                        outlined
-                        dense
-                        hide-bottom-space
-                        :model-value="
-                          formData.startDate != null
-                            ? date2Thai(formData.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-4">
-                  <datepicker
-                    :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
-                    menu-class-name="modalfix"
-                    v-model="formData.endDate"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :min-date="formData.startDate"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        :readonly="isReadonly"
-                        outlined
-                        dense
-                        :model-value="
-                          formData.endDate != null
-                            ? date2Thai(formData.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-12">
+            <div class="col-xs-12 col-md-4">
+              <datepicker
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                menu-class-name="modalfix"
+                v-model="formData.endDate"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :min-date="formData.startDate"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
                   <q-input
                     :readonly="isReadonly"
-                    :class="getClass(!isReadonly)"
-                    v-model="formData.details"
                     outlined
                     dense
-                    type="textarea"
-                    label="คำอธิบาย"
-                  />
-                </div>
-              </div>
+                    :model-value="
+                      formData.endDate != null
+                        ? date2Thai(formData.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-12">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                v-model="formData.details"
+                outlined
+                dense
+                type="textarea"
+                label="คำอธิบาย"
+              />
             </div>
           </div>
         </q-card-section>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
index efa977a8e..36d94ea54 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeRate.vue
@@ -1,3 +1,4 @@
+divdiv
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
@@ -134,7 +135,7 @@ const getClass = (val: boolean) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 500px">
+    <q-card style="width: 350px">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="
@@ -144,68 +145,66 @@ const getClass = (val: boolean) => {
         />
         <q-separator />
         <q-card-section>
-          <div class="row q-gutter-sm q-pa-sm">
-            <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
-              <div class="col-12">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryNoRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryNo"
-                  label="ลำดับชั้น"
-                  :rules="[
-                    (val) => !!val || 'กรุณากรอกลำดับชั้น',
-                    (val) =>
-                      Number(val) === Math.floor(val) ||
-                      Number(val) === Math.floor(val) + 0.5 ||
-                      `กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
-                  ]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryNoRef"
+                dense
+                outlined
+                v-model="formData.salaryNo"
+                label="ลำดับชั้น"
+                :rules="[
+                  (val) => !!val || 'กรุณากรอกลำดับชั้น',
+                  (val) =>
+                    Number(val) === Math.floor(val) ||
+                    Number(val) === Math.floor(val) + 0.5 ||
+                    `กรุณากรอกจำนวนเต็มเท่านั้ หรือ .5`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
 
-              <div class="col-12">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryMonthRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryMonth"
-                  label="อัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)'}`,
-                  ]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
+            <div class="col-12">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryMonthRef"
+                dense
+                outlined
+                v-model="formData.salaryMonth"
+                label="อัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายเดือน)'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
 
-              <div class="col-12">
-                <q-input
-                  :readonly="isReadonly"
-                  :class="getClass(!isReadonly)"
-                  ref="salaryDayRef"
-                  dense
-                  outlined
-                  v-model="formData.salaryDay"
-                  label="อัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)"
-                  mask="###,###,###,###"
-                  reverse-fill-mask
-                  lazy-rules
-                  hide-bottom-space
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)'}`,
-                  ]"
-                />
-              </div>
+            <div class="col-12">
+              <q-input
+                :readonly="isReadonly"
+                :class="getClass(!isReadonly)"
+                ref="salaryDayRef"
+                dense
+                outlined
+                v-model="formData.salaryDay"
+                label="อัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)"
+                mask="###,###,###,###"
+                reverse-fill-mask
+                lazy-rules
+                hide-bottom-space
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกอัตราค่าจ้าง/ขั้นวิ่ง (รายวัน)'}`,
+                ]"
+              />
             </div>
           </div>
         </q-card-section>
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue b/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
index 871d2c34c..12eff4a69 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+div<script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -333,7 +333,7 @@ const getClass = (val: boolean) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+    <q-card class="col-12" style="width: 60%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="
@@ -347,229 +347,226 @@ const getClass = (val: boolean) => {
         />
         <q-separator />
         <q-card-section>
-          <div class="row q-gutter-sm q-pa-sm">
-            <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
-              <div class="col-4">
-                <q-select
-                  ref="posTypeRef"
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  dense
-                  outlined
-                  v-model="formData.posType"
-                  label="กลุ่มงาน"
-                  :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
-                  :options="posTypeOp"
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  lazy-rules
-                  hide-bottom-space
-                  use-input
-                  @update:model-value="getPosName()"
-                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'group') "
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template></q-select
-                >
-              </div>
-              <div class="col-4">
-                <q-select
-                  ref="posNameRef"
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly || formData.posType"
-                  dense
-                  outlined
-                  v-model="formData.posName"
-                  label="ตำแหน่ง"
-                  :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
-                  :options="posNameOp"
-                  option-label="name"
-                  option-value="name"
-                  emit-value
-                  lazy-rules
-                  use-input
-                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'pos')"
-                  hide-bottom-space
-                  @update:model-value="getPosLevel()"
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div>
-              <div class="col-4">
-                <q-select
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly || formData.posName"
-                  ref="posLevelRef"
-                  dense
-                  outlined
-                  v-model="formData.posLevel"
-                  :options="posLevelOp"
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                  label="ระดับชั้นงาน"
-                  :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
-                  lazy-rules
-                  hide-bottom-space
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div>
+          <div class="row col-xs-12 col-md-12 q-col-gutter-sm">
+            <div class="col-4">
+              <q-select
+                ref="posTypeRef"
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                dense
+                outlined
+                v-model="formData.posType"
+                label="กลุ่มงาน"
+                :rules="[(val) => !!val || 'กรุณาเลือกกลุ่มงาน']"
+                :options="posTypeOp"
+                option-label="name"
+                option-value="id"
+                map-options
+                lazy-rules
+                hide-bottom-space
+                use-input
+                @update:model-value="getPosName()"
+                @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'group') "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
+            </div>
+            <div class="col-4">
+              <q-select
+                ref="posNameRef"
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly || formData.posType"
+                dense
+                outlined
+                v-model="formData.posName"
+                label="ตำแหน่ง"
+                :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่ง']"
+                :options="posNameOp"
+                option-label="name"
+                option-value="name"
+                emit-value
+                lazy-rules
+                use-input
+                @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'pos')"
+                hide-bottom-space
+                @update:model-value="getPosLevel()"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-4">
+              <q-select
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly || formData.posName"
+                ref="posLevelRef"
+                dense
+                outlined
+                v-model="formData.posLevel"
+                :options="posLevelOp"
+                option-label="name"
+                option-value="id"
+                map-options
+                label="ระดับชั้นงาน"
+                :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
+                lazy-rules
+                hide-bottom-space
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
 
-              <div class="col-12">
-                <q-input
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  dense
-                  outlined
-                  v-model="formData.reson"
-                  label="หมายเหตุ"
-                  type="textarea"
-                />
-              </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                dense
+                outlined
+                v-model="formData.reson"
+                label="หมายเหตุ"
+                type="textarea"
+              />
+            </div>
 
-              <div class="col-12 text-bold">อัตราค่าจ้าง</div>
-              <div class="col-4">
-                <q-input
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  ref="rateOldMinRef"
-                  dense
-                  outlined
-                  v-model="formData.rateOldMin"
-                  label="ขั้นต่ำสุด"
-                  mask="###,###,###,###,###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
-                  ]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-4">
-                <q-select
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  ref="groupOldRef"
-                  dense
-                  outlined
-                  multiple
-                  v-model="formData.groupOld"
-                  label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
-                  :rules="[
-                    (val) =>
-                      !!val ||
-                      `${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
-                  ]"
-                  :options="groupOldOp"
-                  map-options
-                  option-label="name"
-                  option-value="id"
-                  lazy-rules
-                  hide-bottom-space
-                  use-input
-                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div>
-              <div class="col-4">
-                <q-input
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  ref="rateMaxOldRef"
-                  dense
-                  outlined
-                  v-model="formData.rateMaxOld"
-                  label="ขั้นสูงสุดเดิม"
-                  mask="###,###,###,###,###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
-                  ]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
+            <div class="col-12 text-bold">อัตราค่าจ้าง</div>
+            <div class="col-4">
+              <q-input
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                ref="rateOldMinRef"
+                dense
+                outlined
+                v-model="formData.rateOldMin"
+                label="ขั้นต่ำสุด"
+                mask="###,###,###,###,###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-4">
+              <q-select
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                ref="groupOldRef"
+                dense
+                outlined
+                multiple
+                v-model="formData.groupOld"
+                label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${'กรุณาเลือกอัตราค่าจ้าง กลุ่มของผังบัญชีอัตราค่าจ้าง'}`,
+                ]"
+                :options="groupOldOp"
+                map-options
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                use-input
+                @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-4">
+              <q-input
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                ref="rateMaxOldRef"
+                dense
+                outlined
+                v-model="formData.rateMaxOld"
+                label="ขั้นสูงสุดเดิม"
+                mask="###,###,###,###,###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นสูงสุดเดิม'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
 
-              <div class="col-12 text-bold">
-                อัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ
-              </div>
-              <div class="col-4">
-                <q-select
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  ref="groupRateHighRef"
-                  dense
-                  outlined
-                  v-model="formData.groupRateHigh"
-                  label="กลุ่มบัญชีค่าจ้าง"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
-                  ]"
-                  lazy-rules
-                  :options="groupOldOp"
-                  map-options
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  hide-bottom-space
-                  use-input
-                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div>
-              <div class="col-4">
-                <q-input
-                  :class="getClass(!isReadonly)"
-                  :readonly="isReadonly"
-                  ref="rateHighMaxRef"
-                  dense
-                  outlined
-                  v-model="formData.rateHighMax"
-                  label="อัตราค่าจ้างขั้นสูงใหม่"
-                  mask="###,###,###,###,###,###,###,###"
-                  reverse-fill-mask
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
-                  ]"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
+            <div class="col-12 text-bold">
+              อัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ
+            </div>
+            <div class="col-4">
+              <q-select
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                ref="groupRateHighRef"
+                dense
+                outlined
+                v-model="formData.groupRateHigh"
+                label="กลุ่มบัญชีค่าจ้าง"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกเลือกกลุ่มบัญชีค่าจ้าง'}`,
+                ]"
+                lazy-rules
+                :options="groupOldOp"
+                map-options
+                option-label="name"
+                option-value="id"
+                emit-value
+                hide-bottom-space
+                use-input
+                @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-4">
+              <q-input
+                :class="getClass(!isReadonly)"
+                :readonly="isReadonly"
+                ref="rateHighMaxRef"
+                dense
+                outlined
+                v-model="formData.rateHighMax"
+                label="อัตราค่าจ้างขั้นสูงใหม่"
+                mask="###,###,###,###,###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
             </div>
           </div>
         </q-card-section>

From 035db7169705ae69177c4f1f1c4d8aca6da5c84c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 28 Aug 2024 15:26:43 +0700
Subject: [PATCH 12/13] evaluate => upate  API

---
 src/api/12_evaluatePersonal/api.evaluate.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/api/12_evaluatePersonal/api.evaluate.ts b/src/api/12_evaluatePersonal/api.evaluate.ts
index a355449a1..90b218f74 100644
--- a/src/api/12_evaluatePersonal/api.evaluate.ts
+++ b/src/api/12_evaluatePersonal/api.evaluate.ts
@@ -8,7 +8,7 @@ export default {
 
   evaluationMain: () => `${evaluation}`,
 
-  evaluateGetDetail: (id: string) => `${evaluation}/check-spec/${id}`,
+  evaluateGetDetail: (id: string) => `${evaluation}/admin/check-spec/${id}`,
   evaluateGetStep: (id: string) => `${evaluation}/check/admin/${id}`,
 
   meeting: () => `${evaluation}/meeting`,
@@ -28,10 +28,11 @@ export default {
 
   evaluationHistory: (id: string) => `${evaluation}/step-history/${id}`,
 
-  evaluationDateAnnounce: (id: string) => `${evaluation}/check-date/${id}`,
+  evaluationDateAnnounce: (id: string) =>
+    `${evaluation}/admin/check-date/${id}`,
 
   evaluationSigner: (id: string, num: number) =>
-    `${evaluation}/doc${num}-signer/${id}`,
+    `${evaluation}/admin/doc${num}-signer/${id}`,
 
   evaluationSentToContact: (id: string) => `${evaluation}/contact/user/${id}`,
 

From 5a5e37c12d3d0d871271b28e7b4c8bb79365186b Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 28 Aug 2024 15:29:09 +0700
Subject: [PATCH 13/13] remove keycloak use cookie auth

---
 src/main.ts                                   |  30 --
 src/modules/00_support/store/Main.ts          |  14 +-
 .../03_recruiting/components/Information.vue  |  13 +-
 .../04_registry/components/Profile.vue        |  13 +-
 .../05_placement/components/Other/Detail.vue  |   8 +-
 .../components/PersonalList/Detail.vue        |   7 +-
 .../components/PersonalList/Table.vue         |   7 +-
 .../components/Relocation/RelocationbyId.vue  |   1 -
 .../components/Transfer/transferRegistry.vue  |   7 +-
 .../Discharged/dischargedRegistry.vue         |   7 +-
 .../components/DismissOrder/outRegistry.vue   |  13 +-
 .../components/ExitInterview/EditQuestion.vue |   1 -
 .../components/ExitInterview/exitRegistry.vue |  20 +-
 .../Expulsion/expulsionRegistry.vue           |   8 +-
 .../components/resign/ResignByid.vue          |  11 +-
 .../09_leave/components/2_Leave/Calendar.vue  |  20 +-
 .../components/7_ListSuspend/DetailPage.vue   |  26 +-
 src/modules/14_KPI/views/mainDetail.vue       | 451 +++++++++---------
 src/plugins/auth.ts                           |  71 +++
 src/plugins/axios.ts                          |  33 +-
 src/plugins/http.ts                           |   8 +-
 src/router/index.ts                           |  13 +-
 src/stores/mixin.ts                           |  10 +-
 src/stores/roleUser.ts                        |  63 ++-
 src/views/MainLayout.vue                      |  22 +-
 src/views/auth.vue                            |  11 +-
 src/views/login.vue                           |  53 +-
 27 files changed, 501 insertions(+), 440 deletions(-)
 create mode 100644 src/plugins/auth.ts

diff --git a/src/main.ts b/src/main.ts
index df8024dbe..e179635f1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,6 @@ import App from "./App.vue";
 import router from "./router";
 import { Dialog, Notify, Quasar, Loading } from "quasar";
 import "./quasar-user-options";
-import keycloak, { getToken } from "@/plugins/keycloak";
 
 import qDraggableTable from "quasar-ui-q-draggable-table";
 import "quasar-ui-q-draggable-table/dist/index.css";
@@ -14,15 +13,9 @@ import th from "quasar/lang/th";
 import "@vuepic/vue-datepicker/dist/main.css";
 import http from "./plugins/http";
 import { createPinia } from "pinia";
-// organization
-// position
-// positionEmployee
-//calendar
-// insignia
 
 // import './assets/main.css'
 
-// Import GlobalFilters
 import filters from "./plugins/filters";
 
 const app = createApp(App);
@@ -81,27 +74,4 @@ app.component(
 );
 
 app.config.globalProperties.$http = http;
-
-// authen with keycloak client
-const auth = await getToken();
-
-if (auth.token && auth.refresh_token) {
-  keycloak.init({
-    checkLoginIframe: false,
-    token: auth.token,
-    refreshToken: auth.refresh_token,
-  });
-  // .then((authenticated) => {
-  //   console.log("authenticated", authenticated);
-  //   if (!authenticated) {
-  //     window.location.reload();
-  //   } else {
-  //     console.log("Authenticated");
-  //   }
-  // })
-  // .catch((err) => {
-  //   console.error("Keycloak initialization failed:", err);
-  // });
-}
-
 app.mount("#app");
diff --git a/src/modules/00_support/store/Main.ts b/src/modules/00_support/store/Main.ts
index 3d612a96c..0a7d01cb9 100644
--- a/src/modules/00_support/store/Main.ts
+++ b/src/modules/00_support/store/Main.ts
@@ -12,13 +12,13 @@ import type {
   SupportMessageStatus,
   SupportIssueCategoryResponse,
 } from "@/modules/00_support/interface/index/Main";
-import keycloak from "@/plugins/keycloak";
 import { useQuasar } from "quasar";
+import { getToken, tokenParsed } from "@/plugins/auth";
 
-export const useSupportStore = defineStore("supportServiceStore", () => {
+export const useSupportStore = defineStore("supportServiceStore", async () => {
   const { showLoader, hideLoader, messageError } = useCounterMixin();
   const $q = useQuasar();
-  const userId = ref<string | undefined>(keycloak.subject);
+  const userId = ref<string | undefined>("");
   const issue = ref<SupportIssueResponse>();
   const message = ref<SupportMessageResponse>();
   const messageStatus = ref<SupportMessageStatus>();
@@ -44,8 +44,9 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     }, 150);
   }
 
+  const token = await getToken();
   const socket = io(config.API.supportSocket, {
-    auth: { token: keycloak.token },
+    auth: { token: token },
     autoConnect: false,
     path: "/api/v1/support/socket/",
   });
@@ -54,7 +55,10 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     userStatus.value = data;
   });
 
-  socket.on("online", (r) => {
+  socket.on("online", async (r) => {
+    const user = await tokenParsed();
+    userId.value = user.subject;
+
     userStatus.value.push({
       socketId: r.socketId,
       userId: r.userId,
diff --git a/src/modules/03_recruiting/components/Information.vue b/src/modules/03_recruiting/components/Information.vue
index ab19830b7..34a57b636 100644
--- a/src/modules/03_recruiting/components/Information.vue
+++ b/src/modules/03_recruiting/components/Information.vue
@@ -397,6 +397,7 @@
     </div> -->
   </q-form>
 </template>
+
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -412,8 +413,8 @@ import {
   changeData,
 } from "@/modules/03_recruiting/interface/index/Main";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
+import { tokenParsed } from "@/plugins/auth";
 import { useRoute } from "vue-router";
-import keycloak from "@/plugins/keycloak";
 import { useQuasar } from "quasar";
 
 const props = defineProps({
@@ -499,12 +500,10 @@ const fetchData = async () => {
       defaultInformation.value.knowledge = data.knowledge;
     })
     .catch(() => {
-      defaultInformation.value.email =
-        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.email;
-      defaultInformation.value.firstname =
-        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.given_name;
-      defaultInformation.value.lastname =
-        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.family_name;
+      const user = await tokenParsed();
+      defaultInformation.value.email = user ? user.email : "";
+      defaultInformation.value.firstname = user ? user.given_name : "";
+      defaultInformation.value.lastname = user ? user.family_name : "";
     })
     .finally(() => {
       hideLoader();
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 9b84e9244..97277c085 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -833,7 +833,7 @@ import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
 
 const $q = useQuasar();
 const store = useDataStore();
@@ -996,13 +996,10 @@ function onClickUnlock() {
   );
 }
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleKeyregistry.value = await keycloak.tokenParsed.role.includes(
-      "keyregistry"
-    );
-    roleRegistryverify.value = await keycloak.tokenParsed.role.includes(
-      "registryverify"
-    );
+  const user = await tokenParsed();
+  if (user) {
+    roleKeyregistry.value = await user.role.includes("keyregistry");
+    roleRegistryverify.value = await user.role.includes("registryverify");
   }
 
   await changeTab("information");
diff --git a/src/modules/05_placement/components/Other/Detail.vue b/src/modules/05_placement/components/Other/Detail.vue
index 332bdd189..b93904e95 100644
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/Detail.vue
@@ -5,8 +5,7 @@ import { checkPermission } from "@/utils/permissions";
 import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
-
+import { tokenParsed } from "@/plugins/auth";
 /**
  * impotyType
  */
@@ -143,8 +142,9 @@ const getClass = (val: boolean) => {
 };
 
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   fetchData();
 });
diff --git a/src/modules/05_placement/components/PersonalList/Detail.vue b/src/modules/05_placement/components/PersonalList/Detail.vue
index 932e0c69b..79b6e04f0 100644
--- a/src/modules/05_placement/components/PersonalList/Detail.vue
+++ b/src/modules/05_placement/components/PersonalList/Detail.vue
@@ -3,8 +3,8 @@ import { onMounted, ref } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
 import { useRouter, useRoute } from "vue-router";
 import cardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
+import { tokenParsed } from "@/plugins/auth";
 
-import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -81,8 +81,9 @@ onMounted(async () => {
     await fetchPlacementData();
   }
 
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
 
   await getStat();
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 0243364fe..e9fd76e4c 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -18,9 +18,9 @@ import DialogOrgTree from "@/modules/05_placement/components/PersonalList/OrgTre
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 import router from "@/router";
 import avatar from "@/assets/avatar_user.jpg";
+import { tokenParsed } from "@/plugins/auth";
 
 let roleAdmin = ref<boolean>(false);
 
@@ -714,8 +714,9 @@ function onSubmitDate() {
 }
 
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
     if (roleAdmin.value === false) {
       displayAdd.value = false;
       visibleColumns.value = [
diff --git a/src/modules/05_placement/components/Relocation/RelocationbyId.vue b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
index da4c407a4..3bffec327 100644
--- a/src/modules/05_placement/components/Relocation/RelocationbyId.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
@@ -6,7 +6,6 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import type { QTableProps, QForm } from "quasar";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index c37ab14ed..bfb31fd1b 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -8,7 +8,6 @@ import { checkPermission } from "@/utils/permissions";
 // import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 
 import type { QTableProps, QForm } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
@@ -19,6 +18,7 @@ import type {
 } from "@/modules/05_placement/interface/response/Transfer";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 import CardProfile from "@/components/CardProfile.vue";
+import { tokenParsed } from "@/plugins/auth";
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@@ -304,8 +304,9 @@ function updatemodalPersonal(modal: boolean) {
 }
 
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
 });
diff --git a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
index a78028226..dd072f016 100644
--- a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
+++ b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
@@ -7,11 +7,11 @@ import { useCounterMixin } from "@/stores/mixin";
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 /**Import type */
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/discharged";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
+import { tokenParsed } from "@/plugins/auth";
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@@ -64,8 +64,9 @@ const responseData = ref<ResponseDataDetail>({
 
 /** Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
 });
diff --git a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
index efc60e412..f3669fa42 100644
--- a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
+++ b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
 
 /**Import type */
 import type { QForm } from "quasar";
@@ -146,8 +146,9 @@ const getClass = (val: boolean) => {
 
 /** Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
 });
@@ -182,7 +183,11 @@ onMounted(async () => {
           แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
         </div>
         <q-space />
-        <div v-if="status !== 'DONE' && status !== 'REPORT' && !checkRoutePermisson">
+        <div
+          v-if="
+            status !== 'DONE' && status !== 'REPORT' && !checkRoutePermisson
+          "
+        >
           <div class="q-gutter-sm" v-if="!edit">
             <q-btn
               outline
diff --git a/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue b/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
index a77612b79..fe5353037 100644
--- a/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
+++ b/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
@@ -5,7 +5,6 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-// import keycloak from "@/plugins/keycloak";
 
 import type { QForm } from "quasar";
 
diff --git a/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue b/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
index ef76edb22..8b8612f0d 100644
--- a/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
+++ b/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
 
 /**import type*/
 import type {
@@ -23,7 +23,9 @@ import CardProfile from "@/components/CardProfile.vue";
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
-const checkRoutePermisson = ref<boolean>(route.name == "exit-Interview-detailsOnly");
+const checkRoutePermisson = ref<boolean>(
+  route.name == "exit-Interview-detailsOnly"
+);
 const mixin = useCounterMixin();
 const dataId = route.params.id.toString();
 const {
@@ -80,8 +82,9 @@ const adjustOther = ref("");
 
 /** HOOK */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
   await fecthquestion();
@@ -1087,9 +1090,14 @@ const putData = () => {
                 </div>
               </div>
 
-              <div class="col-12" v-if="!checkRoutePermisson"><q-separator /></div>
+              <div class="col-12" v-if="!checkRoutePermisson">
+                <q-separator />
+              </div>
 
-              <q-card-actions class="col-12 text-primary q-pa-md" v-if="!checkRoutePermisson">
+              <q-card-actions
+                class="col-12 text-primary q-pa-md"
+                v-if="!checkRoutePermisson"
+              >
                 <q-space />
                 <q-btn
                   unelevated
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
index 2fe4d1881..ebabc108c 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
@@ -6,7 +6,8 @@ import { useCounterMixin } from "@/stores/mixin";
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
+
 /**Import Type */
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
@@ -62,8 +63,9 @@ const responseData = ref<ResponseDataDetail>({
 
 /**Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
 });
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 5d9ac5070..37406a5c9 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -9,8 +9,8 @@ import { useRetirementDataStore } from "@/modules/06_retirement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import axios from "axios";
+import { tokenParsed } from "@/plugins/auth";
 
-import keycloak from "@/plugins/keycloak";
 import type {
   TypeFile,
   rowFile,
@@ -144,10 +144,11 @@ const checkboxOp = ref<CheckBoxType[]>([
 onMounted(async () => {
   fetchData(id.value);
   fetchFile();
-  if (keycloak.tokenParsed !== undefined) {
-    const commander = await keycloak.tokenParsed.role.includes("commander");
-    const oligarch = await keycloak.tokenParsed.role.includes("oligarch");
-    const officer = await keycloak.tokenParsed.role.includes("officer");
+  const user = await tokenParsed();
+  if (user) {
+    const commander = await user.role.includes("commander");
+    const oligarch = await kuser.role.includes("oligarch");
+    const officer = await user.role.includes("officer");
     if (commander) {
       roleUser.value = "commander";
     } else if (oligarch) {
diff --git a/src/modules/09_leave/components/2_Leave/Calendar.vue b/src/modules/09_leave/components/2_Leave/Calendar.vue
index fcd31835a..d21e7978f 100644
--- a/src/modules/09_leave/components/2_Leave/Calendar.vue
+++ b/src/modules/09_leave/components/2_Leave/Calendar.vue
@@ -11,7 +11,6 @@ import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 import moment from "moment";
 import { checkPermission } from "@/utils/permissions";
 /** importType*/
@@ -19,6 +18,7 @@ import type {
   DataDateMonthObject,
   ResCalendar,
 } from "@/modules/09_leave/interface/response/leave";
+import { tokenParsed } from "@/plugins/auth";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -32,9 +32,7 @@ const router = useRouter();
 
 const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
 
-const keycloakId = ref<string>(
-  keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
-);
+const keycloakId = ref<string>("");
 /**
  * Option ของปฏิทิน
  */
@@ -209,6 +207,8 @@ function redirectToDetail(id: string) {
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
+  const user = await tokenParsed();
+  keycloakId.value = user?.sub;
   await fetchDataCalendar("onMounted");
 });
 
@@ -292,11 +292,19 @@ const monthYearThai = (val: DataDateMonthObject) => {
               <template v-slot:eventContent="arg">
                 <div
                   class="row col-12 items-center no-wrap"
-                  :style="checkPermission($route)?.attrIsGet ? `background: + ${arg.event.color}`:`background: + ${arg.event.color};pointer-events: none;cursor: auto;`"
+                  :style="
+                    checkPermission($route)?.attrIsGet
+                      ? `background: + ${arg.event.color}`
+                      : `background: + ${arg.event.color};pointer-events: none;cursor: auto;`
+                  "
                 >
                   <div
                     class="textHover col-10"
-                    @click="checkPermission($route)?.attrIsGet ? redirectToDetail(arg.event.id):''"
+                    @click="
+                      checkPermission($route)?.attrIsGet
+                        ? redirectToDetail(arg.event.id)
+                        : ''
+                    "
                   >
                     {{ arg.event.title }}
                   </div>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue b/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
index 665769f2f..7969b9629 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
 import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
 
 /**Import type */
@@ -16,7 +16,6 @@ import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import CardProfile from "@/components/CardProfile.vue";
 
-
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 /** use */
@@ -24,7 +23,9 @@ const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
-const checkRoutePermission = ref<boolean>(route.name == 'disciplineDetailSuspend')
+const checkRoutePermission = ref<boolean>(
+  route.name == "disciplineDetailSuspend"
+);
 const mixin = useCounterMixin();
 const dataId = route.params.id.toString();
 const {
@@ -251,8 +252,9 @@ function changeFormDataDate() {
 
 /** Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
 });
@@ -332,10 +334,20 @@ onMounted(async () => {
     <q-form greedy @submit.prevent @validation-success="saveData">
       <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">
-          {{ checkRoutePermission ? 'รายละเอียดข้อมูลบัญชีแนบท้าย':'แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย'}}
+          {{
+            checkRoutePermission
+              ? "รายละเอียดข้อมูลบัญชีแนบท้าย"
+              : "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+          }}
         </div>
         <q-space />
-        <div v-if="data.status !== 'DONE' && data.status !== 'REPORT'&& !checkRoutePermission">
+        <div
+          v-if="
+            data.status !== 'DONE' &&
+            data.status !== 'REPORT' &&
+            !checkRoutePermission
+          "
+        >
           <div class="q-gutter-sm" v-if="!edit">
             <q-btn
               outline
diff --git a/src/modules/14_KPI/views/mainDetail.vue b/src/modules/14_KPI/views/mainDetail.vue
index c2a422e26..633729e42 100644
--- a/src/modules/14_KPI/views/mainDetail.vue
+++ b/src/modules/14_KPI/views/mainDetail.vue
@@ -2,7 +2,6 @@
 import avatar from "@/assets/avatar_user.jpg";
 import { ref, reactive, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import keycloak from "@/plugins/keycloak";
 
 import { useRoute, useRouter } from "vue-router";
 
@@ -11,13 +10,13 @@ import config from "@/app.config";
 import { useQuasar, type QTableProps } from "quasar";
 
 interface ListMain {
-  id: string
+  id: string;
   round_no: number;
-  date_start: string
-  date_finish: string
-  mentors: string
-  commander: string
-  chairman: string
+  date_start: string;
+  date_finish: string;
+  mentors: string;
+  commander: string;
+  chairman: string;
 }
 
 const profileId = ref<string>("");
@@ -38,7 +37,7 @@ const mode = ref<any>($q.screen.gt.xs);
 const profileImg = ref<string>("");
 const router = useRouter();
 const route = useRoute();
-const idEva = ref<string>(route.params.id as string)
+const idEva = ref<string>(route.params.id as string);
 const formData = reactive<any>({
   prefix: "",
   firstName: "",
@@ -123,7 +122,7 @@ function onMobile(type: string) {
 function getMain() {
   showLoader();
   http
-    .get(config.API.profilePosition+`/${idEva.value}`)
+    .get(config.API.profilePosition + `/${idEva.value}`)
     .then(async (res) => {
       const data = res.data.result;
       formData.prefix = data.prefix;
@@ -182,7 +181,7 @@ onMounted(async () => {
 });
 </script>
 <template>
-    <div class="toptitle col-12 row items-center">
+  <div class="toptitle col-12 row items-center">
     <q-btn
       icon="mdi-arrow-left"
       unelevated
@@ -195,104 +194,102 @@ onMounted(async () => {
     />
     รายละเอียดงานที่ได้รับมอบหมาย
   </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 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>
-            <q-resize-observer @resize="onResize" />
-            <q-card-section class="q-pa-md">
+            <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-2 text-center self-center">
-                  <q-avatar :size="sizeImg" rounded>
-                    <img
-                      :src="profileImg"
-                      style="border-radius: 10px; object-fit: cover"
-                    />
-                  </q-avatar>
+                <div class="col-4">
+                  {{ formData.position ? formData.position : "-" }}
                 </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 class="col-4">
+                  {{ formData.posLevelName ? formData.posLevelName : "-" }}
+                </div>
+                <div class="col-4">
+                  {{ formData.org ? formData.org : "-" }}
                 </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>
+        </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>
-        <div class="col-12 row">
-          <q-card bordered class="col-12 q-pa-md">
-            <div class="row">
-              <!-- <q-btn
+        <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}`)"
                 size="12px"
                 flat
@@ -302,141 +299,133 @@ onMounted(async () => {
               >
                 <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`"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                  <q-icon
-                    v-else
-                    name="search"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-if="$q.screen.gt.xs"
-                class="q-ml-sm"
-                dense
-                multiple
-                outlined
-                emit-value
-                map-options
-                options-cover
-                options-dense
-                option-value="name"
-                style="min-width: 150px"
-                v-model="visibleColumns"
-                :options="columns"
-                :display-value="$q.lang.table.columns"
+          <q-space />
+          <q-input
+            class="inputgreen"
+            outlined
+            dense
+            v-model="filter"
+            label="ค้นหา"
+            :style="mode ? `max-width: 200px` : `max-width: 150px`"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
               />
-            </div>
-            <div class="q-mt-sm">
-              <d-table
-                flat
-                dense
-                bordered
-                ref="table"
-                virtual-scroll
-                :rows="rows"
-                :columns="columns"
-                :grid="!$q.screen.gt.xs"
-                :filter="filter"
-                :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>
+              <q-icon
+                v-else
+                name="search"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-if="$q.screen.gt.xs"
+            class="q-ml-sm"
+            dense
+            multiple
+            outlined
+            emit-value
+            map-options
+            options-cover
+            options-dense
+            option-value="name"
+            style="min-width: 150px"
+            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"
+            :filter="filter"
+            :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"
+            <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)"
                     >
-                      <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>
+                      <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>
-      </div>
-
-
+      </q-card>
+    </div>
+  </div>
 </template>
 <style scoped>
 .absolute_button {
diff --git a/src/plugins/auth.ts b/src/plugins/auth.ts
new file mode 100644
index 000000000..7e2001c36
--- /dev/null
+++ b/src/plugins/auth.ts
@@ -0,0 +1,71 @@
+const ACCESS_TOKEN = "BMAHRIS_KEYCLOAK_IDENTITY";
+
+interface AuthResponse {
+  access_token: string;
+  expires_in: number;
+  refresh_token: string;
+}
+
+const authenticated = async () => ((await getToken()) ? true : false);
+
+async function setAuthen(r: AuthResponse) {
+  await setCookie(ACCESS_TOKEN, r.access_token, r.expires_in);
+  window.location.href = "/login";
+}
+
+async function logout() {
+  await deleteCookie(ACCESS_TOKEN);
+  window.location.href = "/login";
+}
+
+async function getToken() {
+  return getCookie(ACCESS_TOKEN);
+}
+// 2024-08-29T02:55:13.000Z
+function setCookie(name: string, value: any, time: number) {
+  let expires = "";
+  if (time) {
+    const date = new Date();
+    date.setTime(date.getTime() + time * 1000);
+    // date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = "; expires=" + date.toUTCString();
+  }
+  document.cookie = name + "=" + (value || "") + expires + "; path=/";
+}
+
+function getCookie(name: string) {
+  const nameEQ = name + "=";
+  const ca = document.cookie.split(";");
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == " ") c = c.substring(1, c.length);
+    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+  }
+  return null;
+}
+
+function deleteCookie(name: string) {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}
+
+async function tokenParsed() {
+  const token = await getCookie(ACCESS_TOKEN);
+  if (!token) {
+    return null;
+  }
+  const base64Url = token.split(".")[1];
+  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+  const jsonPayload = decodeURIComponent(
+    window
+      .atob(base64)
+      .split("")
+      .map(function (c) {
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+      })
+      .join("")
+  );
+
+  return JSON.parse(jsonPayload);
+}
+
+export { getToken, authenticated, logout, setAuthen, tokenParsed };
diff --git a/src/plugins/axios.ts b/src/plugins/axios.ts
index 79bba4e1f..adac2e9ad 100644
--- a/src/plugins/axios.ts
+++ b/src/plugins/axios.ts
@@ -1,25 +1,24 @@
-import axios from "axios"
-import config from "process"
+import axios from "axios";
 // import { dotnetPath } from "../path/axiosPath";
 // import { getToken } from "@baloise/vue-keycloak";
-import keycloak from "../plugins/keycloak"
+import { getToken } from "../plugins/auth";
 
 const axiosInstance = axios.create({
-    withCredentials: false,
-})
+  withCredentials: false,
+});
 
 // axiosInstance.defaults.baseURL = dotnetPath;
 axiosInstance.interceptors.request.use(
-    async (config) => {
-        const token = await keycloak.token
-        config.headers = {
-            Authorization: `Bearer ${token}`,
-        }
-        return config
-    },
-    (error) => {
-        Promise.reject(error)
-    }
-)
+  async (config: any) => {
+    const token = await getToken();
+    config.headers = {
+      Authorization: `Bearer ${token}`,
+    };
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
+  }
+);
 
-export default axiosInstance
+export default axiosInstance;
diff --git a/src/plugins/http.ts b/src/plugins/http.ts
index 00615c3d5..8f4f04471 100644
--- a/src/plugins/http.ts
+++ b/src/plugins/http.ts
@@ -1,5 +1,5 @@
 import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
-import keycloak from "./keycloak";
+import { getToken } from "./auth";
 
 const http = Axios.create({
   timeout: 1000000000, // เพิ่มค่า timeout
@@ -12,10 +12,7 @@ http.interceptors.request.use(
   async function (config: AxiosRequestConfig<any>) {
     // await keycloak.updateToken(1);
     config.headers = config.headers ?? {};
-    const token = keycloak.token;
-    // const token = localStorage.getItem("access_token")
-    // const token =
-    //   "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA";
+    const token = await getToken();
     if (token) config.headers.Authorization = `Bearer ${token}`;
     return config;
   },
@@ -34,7 +31,6 @@ http.interceptors.response.use(
       if (error.hasOwnProperty("response")) {
         if (error.response.status === 403) {
           window.location.href = "/error";
-          // kcLogout();
           // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
           // Store.commit("REMOVE_ACCESS_TOKEN")
         }
diff --git a/src/router/index.ts b/src/router/index.ts
index 4687e62ab..be7d494fb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -29,7 +29,7 @@ import ModuleSupport from "@/modules/00_support/router";
 import ModuleActing from "@/modules/17_acting/router";
 
 // TODO: ใช้หรือไม่?
-import keycloak, { kcLogout } from "@/plugins/keycloak";
+import { authenticated } from "@/plugins/auth";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -86,7 +86,7 @@ const router = createRouter({
       component: Error404NotFound,
     },
 
-    // authen with keycloak client
+    // authen with client
     {
       path: "/login",
       name: "loginMain",
@@ -114,11 +114,12 @@ const router = createRouter({
   },
 });
 
-// authen with keycloak client
-router.beforeEach((to, from, next) => {
+// authen with client
+router.beforeEach(async (to, from, next) => {
   if (to.meta.Auth) {
-    if (keycloak.authenticated === undefined) {
-      kcLogout();
+    const checkAuthen = await authenticated();
+    if (!checkAuthen && to.meta.Auth) {
+      router.push({ name: "loginMain" });
     } else {
       next();
     }
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index a2740ceff..ac3e9fc1e 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -3,7 +3,7 @@ import "moment/dist/locale/th";
 import moment from "moment";
 import CustomComponent from "@/components/CustomDialog.vue";
 import { Loading, QSpinnerCube } from "quasar";
-import { kcLogout } from "@/plugins/keycloak";
+import { logout } from "@/plugins/auth";
 
 moment.locale("th");
 
@@ -362,7 +362,7 @@ export const useCounterMixin = defineStore("mixin", () => {
             },
           }).onCancel(async () => {
             showLoader();
-            await kcLogout();
+            await logout();
             setTimeout(() => {
               hideLoader();
             }, 1000);
@@ -379,7 +379,7 @@ export const useCounterMixin = defineStore("mixin", () => {
               onlycancel: true,
             },
           });
-        } else {
+        } else if (e.response.data.status != 403) {
           const message = e.response.data.result ?? e.response.data.message;
           q.dialog({
             component: CustomComponent,
@@ -406,7 +406,7 @@ export const useCounterMixin = defineStore("mixin", () => {
               },
             }).onCancel(async () => {
               showLoader();
-              await kcLogout();
+              await logout();
               setTimeout(() => {
                 hideLoader();
               }, 1000);
@@ -424,7 +424,7 @@ export const useCounterMixin = defineStore("mixin", () => {
               },
             }).onCancel(async () => {
               showLoader();
-              await kcLogout();
+              await logout();
               setTimeout(() => {
                 hideLoader();
               }, 1000);
diff --git a/src/stores/roleUser.ts b/src/stores/roleUser.ts
index 802a70513..50f8c39a1 100644
--- a/src/stores/roleUser.ts
+++ b/src/stores/roleUser.ts
@@ -2,39 +2,36 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 export const useroleUserDataStore = defineStore("roleusers", () => {
-    const insignia1Role = ref<boolean>(false)
-    const insignia2Role = ref<boolean>(false)
-    const caregiverRole = ref<boolean>(false)
-    const chairmanRole = ref<boolean>(false)
-    const commanderRole = ref<boolean>(false)
-    const admin2Role = ref<boolean>(false)
-    const adminRole = ref<boolean>(false)
-    const oligarchRole = ref<boolean>(false)
+  const insignia1Role = ref<boolean>(false);
+  const insignia2Role = ref<boolean>(false);
+  const caregiverRole = ref<boolean>(false);
+  const chairmanRole = ref<boolean>(false);
+  const commanderRole = ref<boolean>(false);
+  const admin2Role = ref<boolean>(false);
+  const adminRole = ref<boolean>(false);
+  const oligarchRole = ref<boolean>(false);
 
-
-
-
-    const fetchroleUser = async (keycloak: any) => {
-        if (keycloak != null) {
-            insignia1Role.value = await keycloak.includes("insignia1");
-            insignia2Role.value = await keycloak.includes("insignia2");
-            caregiverRole.value = await keycloak.includes("caregiver");
-            chairmanRole.value = await keycloak.includes("chairman");
-            commanderRole.value = await keycloak.includes("commander");
-            admin2Role.value = await keycloak.includes("admin2");
-            adminRole.value = await keycloak.includes("admin");
-            oligarchRole.value = await keycloak.includes("oligarch");
-        }
+  const fetchroleUser = async (roles: string[]) => {
+    if (roles) {
+      insignia1Role.value = await roles.includes("insignia1");
+      insignia2Role.value = await roles.includes("insignia2");
+      caregiverRole.value = await roles.includes("caregiver");
+      chairmanRole.value = await roles.includes("chairman");
+      commanderRole.value = await roles.includes("commander");
+      admin2Role.value = await roles.includes("admin2");
+      adminRole.value = await roles.includes("admin");
+      oligarchRole.value = await roles.includes("oligarch");
     }
+  };
 
-    return {
-        fetchroleUser,
-        insignia1Role,
-        insignia2Role,
-        caregiverRole,
-        chairmanRole,
-        commanderRole,
-        admin2Role,
-        adminRole,
-    };
-});
\ No newline at end of file
+  return {
+    fetchroleUser,
+    insignia1Role,
+    insignia2Role,
+    caregiverRole,
+    chairmanRole,
+    commanderRole,
+    admin2Role,
+    adminRole,
+  };
+});
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index dbe2c21b4..ec3288d6f 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from "vue";
-import keycloak, { kcLogout } from "@/plugins/keycloak";
 import { useRoute, useRouter } from "vue-router";
 import { useDataStore } from "@/stores/data";
 import { storeToRefs } from "pinia";
 import { scroll, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useMenuDataStore } from "@/stores/menuList";
+import { tokenParsed, logout } from "@/plugins/auth";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -231,8 +231,12 @@ onMounted(async () => {
   await fetchSys();
   await fetchPermissionsSys();
 
-  if (keycloak.tokenParsed) {
-    await fetchroleUser(keycloak.tokenParsed.role);
+  const user = await tokenParsed();
+  if (user) {
+    fullname.value = user.name;
+    role.value = user.role;
+
+    await fetchroleUser(user.role);
   }
   await fetchmsgNoread();
 
@@ -405,28 +409,20 @@ const tagClickPlacement = (tag: string) => {
 //**** End Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
 
 /**
- * logout keycloak
+ * logout
  * confirm ก่อนออกจากระบบ
  */
 const doLogout = () => {
   dialogConfirm(
     $q,
     async () => {
-      kcLogout();
+      logout();
     },
     "ยืนยันการออกจากระบบ",
     "ต้องการออกจากระบบใช่หรือไม่?"
   );
 };
 
-/**
- * ดิงชื่อผู้ใช้งานจาก keycloak
- */
-if (keycloak.tokenParsed != null) {
-  fullname.value = keycloak.tokenParsed.name;
-  role.value = keycloak.tokenParsed.role;
-}
-
 const clickDelete = async (id: string, index: number) => {
   dialogRemove($q, async () => {
     showLoader();
diff --git a/src/views/auth.vue b/src/views/auth.vue
index d27967d8e..e4cbcf99f 100644
--- a/src/views/auth.vue
+++ b/src/views/auth.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kcAuthen } from "@/plugins/keycloak";
+import { setAuthen } from "@/plugins/auth";
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
 
@@ -7,9 +7,12 @@ const route = useRoute();
 
 onMounted(() => {
   if (route.query.token && route.query.accessToken) {
-    // console.log('query', route.query.token)
-    // console.log('accessToken', route.query.accessToken)
-    kcAuthen(route.query.token.toString(), route.query.accessToken.toString());
+    const params = await {
+      access_token: route.query.token,
+      expires_in: route.query.expires ? route.query.expires : 36000,
+      refresh_token: route.query.accessToken,
+    };
+    setAuthen(params);
   }
 });
 </script>
diff --git a/src/views/login.vue b/src/views/login.vue
index d8119eebe..e02050432 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,12 +1,13 @@
-<!-- authen with keycloak client -->
+<!-- authen with client -->
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import axios from "axios";
-import keycloak, { keycloakConfig, kcAuthen } from "@/plugins/keycloak";
+import { authenticated, tokenParsed, setAuthen } from "@/plugins/auth";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import CustomComponent from "@/components/CustomDialog.vue";
+import env from "@/api/index";
 
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -23,47 +24,47 @@ const isDisplay = ref<boolean>(true); // check display login page
 async function onSubmit() {
   showLoader();
   const formdata = new URLSearchParams();
-  formdata.append("client_id", keycloakConfig.clientId);
-  formdata.append("client_secret", keycloakConfig.clientSecret);
-  formdata.append("grant_type", "password");
-  formdata.append(
-    "requested_token_type",
-    "urn:ietf:params:oauth:token-type:refresh_token"
-  );
   formdata.append("username", username.value);
   formdata.append("password", password.value);
 
   await axios
-    .post(
-      `${keycloakConfig.url}/realms/${keycloakConfig.realm}/protocol/openid-connect/token`,
-      formdata,
-      {
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-        },
-      }
-    )
-    .then((res) => {
-      kcAuthen(res.data.access_token, res.data.refresh_token);
+    .post(`${env.API_URI}/org/login`, formdata, {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    })
+    .then(async (res) => {
+      setAuthen(res.data.result);
     })
     .catch((err) => {
-      messageError($q, err, "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง");
+      $q.dialog({
+        component: CustomComponent,
+        componentProps: {
+          title: `ข้อความแจ้งเตือน`,
+          message: `${err.response.data.message}`,
+          icon: "warning",
+          color: "red",
+          onlycancel: true,
+        },
+      });
     })
     .finally(() => {
       hideLoader();
     });
 }
 
-onMounted(() => {
-  // check authen keycloak and role of system
-  if (keycloak.authenticated) {
+onMounted(async () => {
+  // check authen and role of system
+  const checkAuthen = await authenticated();
+  if (checkAuthen) {
     isDisplay.value = false;
     showLoader();
-    if (keycloak.tokenParsed) {
+    const user = await tokenParsed();
+    if (user) {
       const checkRole = (element: string) => element === "STAFF";
 
       // ถ้าไม่มีสิทธิ์เข้าใช้งานระบบ แสดงข้อความแจ้งเตือน
-      if (keycloak.tokenParsed.role.findIndex(checkRole) === -1) {
+      if (user.role.findIndex(checkRole) === -1) {
         $q.dialog({
           component: CustomComponent,
           componentProps: {