diff --git a/src/modules/02_organizational/components/AddMappingPositions.vue b/src/modules/02_organizational/components/AddMappingPositions.vue
index e99b8d772..32a3e6c6f 100644
--- a/src/modules/02_organizational/components/AddMappingPositions.vue
+++ b/src/modules/02_organizational/components/AddMappingPositions.vue
@@ -97,7 +97,7 @@
   </q-form>
   <!-- popup Edit window-->
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
+    <q-card style="min-width: 700px">
       <q-form ref="myForm">
         <DialogHeader
           :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}โครงสร้างและกรอบอัตรากำลัง`"
@@ -187,6 +187,7 @@
               <selector
                 :class="getClass(edit)"
                 hide-bottom-space
+                multiple
                 :outlined="edit"
                 dense
                 lazy-rules
@@ -195,17 +196,14 @@
                 v-model="positionPathSideId"
                 :label="`${'ด้าน/สาขา'}`"
                 @update:modelValue="clickEditRow"
-                emit-value
-                map-options
                 option-label="name"
                 :options="positionPathSideOptions"
                 option-value="id"
                 use-input
-                hide-selected
-                fill-input
+                use-chips
                 input-debounce="0"
                 @filter="positionPathSideFilterFn"
-                clearable
+                color="primary"
               />
               <!-- :rules="[(val) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
             </div>
@@ -231,7 +229,7 @@
                 fill-input
                 input-debounce="0"
                 @filter="positionExecutiveFilterFn"
-                clearable
+                color="primary"
               />
               <!-- :rules="[
                   (val) => !!val || `${'กรุณาเลือกตำแหน่งทางการบริหาร'}`,
@@ -241,6 +239,7 @@
               <selector
                 :class="getClass(edit)"
                 hide-bottom-space
+                multiple
                 :outlined="edit"
                 dense
                 lazy-rules
@@ -249,17 +248,14 @@
                 v-model="positionExecutiveSideId"
                 :label="`${'ด้านทางการบริหาร'}`"
                 @update:modelValue="clickEditRow"
-                emit-value
-                map-options
                 option-label="name"
                 :options="positionExecutiveSideOptions"
                 option-value="id"
                 use-input
-                hide-selected
-                fill-input
+                use-chips
                 input-debounce="0"
                 @filter="positionExecutiveSideFilterFn"
-                clearable
+                color="primary"
               />
               <!-- :rules="[(val) => !!val || `${'กรุณาเลือกด้านทางการบริหาร'}`]" -->
             </div>
@@ -314,6 +310,21 @@
                 :rules="[(val:any) => !!val || `${'กรุณาเลือกสถานภาพของตำแหน่ง'}`]"
               />
             </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="qualification"
+                :label="`${'คุณวุฒิ'}`"
+                @update:modelValue="clickEditRow"
+                type="textarea"
+              />
+            </div>
             <div class="col-xs-12 col-sm-12 col-md-12">
               <q-input
                 :class="getClass(edit)"
@@ -328,7 +339,6 @@
                 @update:modelValue="clickEditRow"
                 type="textarea"
               />
-              <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
             </div>
             <div class="col-xs-12 col-sm-12 col-md-12">
               <q-input
@@ -344,7 +354,6 @@
                 @update:modelValue="clickEditRow"
                 type="textarea"
               />
-              <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6 text-grey-9">
               <q-checkbox v-model="isDirector" label="หัวหน้า" />
@@ -431,14 +440,7 @@ const { loaderPage } = dataStore;
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
-const {
-  success,
-  modalConfirm,
-  modalError,
-  modalDelete,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { success, modalConfirm, modalError, modalDelete } = mixin;
 const { date2Thai } = mixin;
 const store = useOrganizationalDataStore();
 const { organizationalData, changeOrganizationalColumns } = store;
@@ -456,12 +458,13 @@ const positionTypeId = ref<string>();
 const positionMasterId = ref<string>("");
 const positionLineId = ref<string>();
 const positionPathId = ref<string>("");
-const positionPathSideId = ref<string>();
+const positionPathSideId = ref<any>();
 const positionExecutiveId = ref<string>();
-const positionExecutiveSideId = ref<string>();
+const positionExecutiveSideId = ref<any>();
 const positionStatusId = ref<string>();
 const positionLevelId = ref<string[]>([]);
 const positionCondition = ref<string>();
+const qualification = ref<string>();
 const positionMasterUserNote = ref<string>();
 const positionTypeOptions = ref<DataOption[]>([]);
 const positionLineOptions = ref<DataOption[]>([]);
@@ -519,6 +522,7 @@ organizationalData.mappingPosition.columns.length == 0
       "positionExecutiveSide",
       "positionLevel",
       "positionStatus",
+      "qualification",
       "positionCondition",
       "isDirector",
       "isActive",
@@ -625,6 +629,17 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "qualification",
+    align: "left",
+    label: "คุณวุฒิ",
+    sortable: true,
+    field: "qualification",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "positionCondition",
     align: "left",
@@ -749,6 +764,17 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "qualification",
+    align: "left",
+    label: "คุณวุฒิ",
+    sortable: true,
+    field: "qualification",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "positionCondition",
     align: "left",
@@ -804,6 +830,7 @@ const visibleColumnsHistory = ref<String[]>([
   "positionExecutiveSide",
   "positionLevel",
   "positionStatus",
+  "qualification",
   "positionCondition",
   "isDirector",
   "isActive",
@@ -816,7 +843,7 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
 });
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchPosition();
   await fetchData();
   await fetchHistory();
@@ -826,7 +853,7 @@ onMounted(async () => {
  * ฟังก์ชัน get data ล่าสุด
  */
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getPostionMasterDraft(true))
     .then((res) => {
@@ -854,6 +881,7 @@ const fetchData = async () => {
           positionExecutiveSideId: e.positionExecutiveSideId,
           positionLevelId: e.positionLevelId,
           positionStatusId: e.positionStatusId,
+          qualification: e.qualification,
           positionCondition: e.positionCondition,
           positionMasterUserNote: e.positionMasterUserNote,
           isDirector: e.isDirector,
@@ -869,7 +897,7 @@ const fetchData = async () => {
     })
     .finally(() => {
       //   updateData.value = false;
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -877,7 +905,7 @@ const fetchData = async () => {
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลทั้งหมด
  */
 const fetchHistory = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   //   await http
   //     .get(config.API.listxxxxxxxxPublishedHistory)
   //     .then((res) => {
@@ -909,7 +937,7 @@ const fetchHistory = async () => {
   //       statusCode.value = e.response.data.status;
   //     })
   //     .finally(async () => {
-  //       hideLoader();
+  //       loaderPage(false);
   //     });
 };
 
@@ -917,7 +945,7 @@ const fetchHistory = async () => {
  * get รายการ ตำแหน่ง
  */
 const fetchPosition = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.position)
     .then((res) => {
@@ -1008,7 +1036,7 @@ const fetchPosition = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1157,7 +1185,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   modal.value = false;
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.getPositionMaster, {
       positionTypeId: positionTypeId.value,
@@ -1169,6 +1197,7 @@ const saveData = async () => {
       positionLevelId: positionLevelId.value,
       isDirector: isDirector.value,
       positionStatusId: positionStatusId.value,
+      qualification: qualification.value,
       positionCondition: positionCondition.value,
       positionMasterUserNote: positionMasterUserNote.value,
     })
@@ -1189,7 +1218,7 @@ const saveData = async () => {
  */
 const editData = async () => {
   modal.value = false;
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.getPositionMasterId(positionMasterId.value), {
       positionMasterId: positionMasterId.value,
@@ -1202,6 +1231,7 @@ const editData = async () => {
       positionLevelId: positionLevelId.value,
       isDirector: isDirector.value,
       positionStatusId: positionStatusId.value,
+      qualification: qualification.value,
       positionCondition: positionCondition.value,
       positionMasterUserNote: positionMasterUserNote.value,
     })
@@ -1222,7 +1252,7 @@ const editData = async () => {
  * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
  */
 const clearPublishedData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.getPositionMasterSync)
     .then((res) => {
@@ -1235,7 +1265,7 @@ const clearPublishedData = async () => {
       statusCode.value = e.response.data.status;
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       await fetchHistory();
       await fetchData();
     });
@@ -1247,7 +1277,7 @@ const clearPublishedData = async () => {
  */
 const publishedData = async () => {
   //   editvisible.value = false;
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.getPositionMasterPublish)
     .then((res) => {
@@ -1257,7 +1287,7 @@ const publishedData = async () => {
       statusCode.value = e.response.data.status;
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       await fetchData();
     });
 };
@@ -1308,6 +1338,7 @@ const selectData = (props: RequestItemsObject) => {
     positionExecutiveSideId.value = props.positionExecutiveSideId;
     positionLevelId.value = props.positionLevelId;
     positionStatusId.value = props.positionStatusId;
+    qualification.value = props.qualification;
     positionCondition.value = props.positionCondition;
     positionMasterUserNote.value = props.positionMasterUserNote;
     isDirector.value = props.isDirector;
@@ -1335,11 +1366,12 @@ const clickAdd = () => {
   positionTypeId.value = "";
   positionLineId.value = "";
   positionPathId.value = "";
-  positionPathSideId.value = "";
+  positionPathSideId.value = [];
   positionExecutiveId.value = "";
-  positionExecutiveSideId.value = "";
+  positionExecutiveSideId.value = [];
   positionLevelId.value = [];
   positionStatusId.value = positionStatusOptionsRaw.value[0].id;
+  qualification.value = "";
   positionCondition.value = "";
   positionMasterUserNote.value = "";
   isDirector.value = false;
@@ -1351,7 +1383,7 @@ const clickAdd = () => {
  * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
  */
 const clickHistory = async (row: RequestItemsObject) => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getPositionMasterHistoryId(row.id))
     .then((res) => {
@@ -1380,6 +1412,7 @@ const clickHistory = async (row: RequestItemsObject) => {
             positionExecutiveSideId: e.positionExecutiveSideId,
             positionLevelId: e.positionLevelId,
             positionStatusId: e.positionStatusId,
+            qualification: e.qualification,
             positionCondition: e.positionCondition,
             positionMasterUserNote: e.positionMasterUserNote,
             isDirector: e.isDirector,
@@ -1394,7 +1427,7 @@ const clickHistory = async (row: RequestItemsObject) => {
     })
     .finally(async () => {
       modalHistory.value = true;
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1437,7 +1470,7 @@ const clickIsActive = async (val: string, status: boolean) => {
   })
     .onOk(async () => {
       // edit.value = false;
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.getPositionMasterId(val) + `?Id=${val}`)
         .then((res) => {
diff --git a/src/modules/02_organizational/components/Tree/MappingPositions.vue b/src/modules/02_organizational/components/Tree/MappingPositions.vue
index ebe5b2855..b6ae897b2 100644
--- a/src/modules/02_organizational/components/Tree/MappingPositions.vue
+++ b/src/modules/02_organizational/components/Tree/MappingPositions.vue
@@ -8,7 +8,7 @@
 <template>
   <div v-if="isAddNew" class="row col-12 items-center q-pt-md">
     <div class="bg-white q-px-sm topCard">
-      <span class="text-weight-medium">เพิ่มตำแหน่ง</span>
+      <span class="text-weight-bold">เพิ่มตำแหน่ง</span>
       <q-btn
         flat
         color="primary"
@@ -47,7 +47,12 @@
           <template v-slot:option="scope">
             <q-item v-bind="scope.itemProps">
               <q-item-section>
-                <q-item-label>{{ scope.opt.positionPath }}</q-item-label>
+                <q-item-label>
+                  <span class="text-weight-bold">
+                    {{ scope.opt.positionPath }}</span
+                  >
+                  {{ scope.opt.positionLevel }}
+                </q-item-label>
                 <q-item-label caption>
                   <q-icon
                     class="q-mr-sm"
@@ -56,19 +61,36 @@
                     name="mdi-bookmark"
                     v-if="scope.opt.isDirector"
                   ></q-icon>
-                  {{ scope.opt.positionExecutive }}
-                  {{ scope.opt.positionExecutiveSide }}
-                  {{ scope.opt.positionLevel }}
-                  {{ scope.opt.positionLine }}
-                  {{ scope.opt.positionPathSide }}
-                  {{ scope.opt.positionType }}
+                  {{
+                    scope.opt.positionExecutive == null
+                      ? ""
+                      : `ตำแหน่งทางการบริหาร: ${scope.opt.positionExecutive}`
+                  }}
+                  {{
+                    scope.opt.positionExecutiveSide == null
+                      ? ""
+                      : `ด้านทางการบริหาร: ${scope.opt.positionExecutiveSide}`
+                  }}
+                  <!-- {{
+                    scope.opt.positionLevel == null
+                      ? ""
+                      : `ระดับตำแหน่ง: ${scope.opt.positionLevel}`
+                  }} -->
+                  {{
+                    scope.opt.positionPathSide == null
+                      ? ""
+                      : `ด้าน/สาขา: ${scope.opt.positionPathSide}`
+                  }}
                 </q-item-label>
               </q-item-section>
             </q-item>
           </template>
           <template v-slot:selected-item="scope">
             <q-chip dense square class="q-my-none q-ml-xs q-mr-none">
-              {{ scope.opt.positionPath }}
+              <span class="text-weight-bold">
+                {{ scope.opt.positionPath }}</span
+              >
+              {{ scope.opt.positionLevel }}
             </q-chip>
             <q-item-label caption>
               <q-icon
@@ -78,12 +100,31 @@
                 name="mdi-bookmark"
                 v-if="scope.opt.isDirector"
               ></q-icon>
-              {{ scope.opt.positionExecutive }}
-              {{ scope.opt.positionExecutiveSide }}
-              {{ scope.opt.positionLevel }}
-              {{ scope.opt.positionLine }}
-              {{ scope.opt.positionPathSide }}
-              {{ scope.opt.positionType }}
+              {{
+                scope.opt.positionExecutive == null
+                  ? ""
+                  : `ตำแหน่งทางการบริหาร: ${scope.opt.positionExecutive}`
+              }}
+              {{
+                scope.opt.positionExecutiveSide == null
+                  ? ""
+                  : `ด้านทางการบริหาร: ${scope.opt.positionExecutiveSide}`
+              }}
+              <!-- {{
+                scope.opt.positionLevel == null
+                  ? ""
+                  : `ระดับตำแหน่ง: ${scope.opt.positionLevel}`
+              }} -->
+              {{
+                scope.opt.positionPathSide == null
+                  ? ""
+                  : `ด้าน/สาขา: ${scope.opt.positionPathSide}`
+              }}
+              <!-- {{ scope.opt.positionExecutiveSide }} -->
+              <!-- {{ scope.opt.positionLevel }} -->
+              <!-- {{ scope.opt.positionLine }} -->
+              <!-- {{ scope.opt.positionPathSide }} -->
+              <!-- {{ scope.opt.positionType }} -->
             </q-item-label>
           </template>
           <template v-slot:no-option>
@@ -103,7 +144,11 @@
             :label="`${'หมายเหตุ'}`"
             type="textarea"
           />
-          <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
+        </div>
+        <div class="col-xs-12 col-sm-12 col-md-12">
+          <q-toggle v-model="item.isActive" dense size="34px" color="positive">
+            ปกติ
+          </q-toggle>
         </div>
       </div>
     </div>
@@ -157,7 +202,12 @@
             <template v-slot:option="scope">
               <q-item v-bind="scope.itemProps">
                 <q-item-section>
-                  <q-item-label>{{ scope.opt.positionPath }}</q-item-label>
+                  <q-item-label>
+                    <span class="text-weight-bold">
+                      {{ scope.opt.positionPath }}</span
+                    >
+                    {{ scope.opt.positionLevel }}
+                  </q-item-label>
                   <q-item-label caption>
                     <q-icon
                       class="q-mr-sm"
@@ -166,19 +216,36 @@
                       name="mdi-bookmark"
                       v-if="scope.opt.isDirector"
                     ></q-icon>
-                    {{ scope.opt.positionExecutive }}
-                    {{ scope.opt.positionExecutiveSide }}
-                    {{ scope.opt.positionLevel }}
-                    {{ scope.opt.positionLine }}
-                    {{ scope.opt.positionPathSide }}
-                    {{ scope.opt.positionType }}
+                    {{
+                      scope.opt.positionExecutive == null
+                        ? ""
+                        : `ตำแหน่งทางการบริหาร: ${scope.opt.positionExecutive}`
+                    }}
+                    {{
+                      scope.opt.positionExecutiveSide == null
+                        ? ""
+                        : `ด้านทางการบริหาร: ${scope.opt.positionExecutiveSide}`
+                    }}
+                    <!-- {{
+                      scope.opt.positionLevel == null
+                        ? ""
+                        : `ระดับตำแหน่ง: ${scope.opt.positionLevel}`
+                    }} -->
+                    {{
+                      scope.opt.positionPathSide == null
+                        ? ""
+                        : `ด้าน/สาขา: ${scope.opt.positionPathSide}`
+                    }}
                   </q-item-label>
                 </q-item-section>
               </q-item>
             </template>
             <template v-slot:selected-item="scope">
               <q-chip dense square class="q-my-none q-ml-xs q-mr-none">
-                {{ scope.opt.positionPath }}
+                <span class="text-weight-bold">
+                  {{ scope.opt.positionPath }}</span
+                >
+                {{ scope.opt.positionLevel }}
               </q-chip>
               <q-item-label caption>
                 <q-icon
@@ -188,13 +255,29 @@
                   name="mdi-bookmark"
                   v-if="scope.opt.isDirector"
                 ></q-icon>
-                {{ scope.opt.positionPathSide }}
+                <!-- {{ scope.opt.positionPathSide }}
                 {{ scope.opt.positionExecutive }}
-                {{ scope.opt.positionLevel }}
-                {{ scope.opt.positionLine }}
+                {{ scope.opt.positionLevel }} -->
+                <!-- {{ scope.opt.positionLine }} -->
 
                 <!-- {{ scope.opt.positionType }}
                 {{ scope.opt.positionExecutiveSide }} -->
+
+                {{
+                  scope.opt.positionPathSide == null
+                    ? ""
+                    : `ด้าน/สาขา: ${scope.opt.positionPathSide}`
+                }}
+                {{
+                  scope.opt.positionExecutive == null
+                    ? ""
+                    : `ตำแหน่งทางการบริหาร: ${scope.opt.positionExecutive}`
+                }}
+                {{
+                  scope.opt.positionLevel == null
+                    ? ""
+                    : `ระดับตำแหน่ง: ${scope.opt.positionLevel}`
+                }}
               </q-item-label>
             </template>
             <template v-slot:no-option>
@@ -224,7 +307,16 @@
               :label="`${'หมายเหตุ'}`"
               type="textarea"
             />
-            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
+          </div>
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <q-toggle
+              v-model="item.isActive"
+              dense
+              size="34px"
+              color="positive"
+            >
+              ปกติ
+            </q-toggle>
           </div>
         </div>
       </q-card>
@@ -240,14 +332,10 @@ import { useDataStore } from "@/stores/data";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { DataOption } from "../../interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
 
 const ddNoResultMsg = defineAsyncComponent(
   () => import("@/components/DropDownNoResultMsg.vue")
 ); //แสดงข้อความเมื่อ Dropdown Filter ไม่เจอข้อมูล
-
-const mixin = useCounterMixin();
-const { showLoader, hideLoader } = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
@@ -273,6 +361,7 @@ watch(myForm, (form: QForm | null, prevForm: QForm | null) => {
       //   console.log("props.editObj", props.editObj);
       positions.value[0].positionMasterId = props.editObj?.positionMasterId;
       positions.value[0].positionUserNote = props.editObj?.positionUserNote;
+      positions.value[0].isActive = props.editObj?.isActive;
     }
   }
   emit("update:formprops", form);
@@ -283,6 +372,7 @@ const positionSet = ref<object>({
   count: 1, // จำนวนตำแหน่งที่จะเพิ่ม
   positionMasterId: "", // ชื่อตำแหน่ง จากระบบข้อมูลหลัก Table PositionMaster เช่น นักจัดการงานทั่วไป,พยาบาลชำนาญการ
   positionUserNote: "",
+  isActive: true,
 }); //เก็บข้อมูลที่จะเลือกใน Drop Down แต่ละตัวจะต้องมี key ของมัน เพื่อส่งไปให้ API
 emit("update:positions", positions.value);
 
@@ -290,12 +380,12 @@ const positionFilter = ref<Array<any>>([]); //for DropDown
 const position = ref<Array<any>>([]); //for DropDown
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchPositionMaster();
 });
 
 const fetchPositionMaster = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     // .get(config.API.getPostionMasterDraft(false))
     .get(config.API.getPostionMaster(false))
@@ -322,6 +412,7 @@ const fetchPositionMaster = async () => {
           positionExecutiveSideId: e.positionExecutiveSideId,
           positionLevelId: e.positionLevelId,
           positionStatusId: e.positionStatusId,
+          qualification: e.qualification,
           positionCondition: e.positionCondition,
           positionMasterUserNote: e.positionMasterUserNote,
           isDirector: e.isDirector,
@@ -333,7 +424,7 @@ const fetchPositionMaster = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/02_organizational/components/Tree/OrganizationDialog.vue b/src/modules/02_organizational/components/Tree/OrganizationDialog.vue
index 5ad5fc78f..a0c3f66f7 100644
--- a/src/modules/02_organizational/components/Tree/OrganizationDialog.vue
+++ b/src/modules/02_organizational/components/Tree/OrganizationDialog.vue
@@ -54,7 +54,7 @@
                 v-model="item.organizationOrganizationId"
                 :options="organizationOri"
                 label="หน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-6 col-md-6"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -75,7 +75,7 @@
                 v-model="item.organizationAgencyCode"
                 :options="organizationAgencyCode"
                 label="รหัสหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -98,7 +98,7 @@
                 v-model="item.organizationGovernmentCode"
                 :options="item.organizationGovernmentCodeOption"
                 label="รหัสส่วนราชการ"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -121,51 +121,36 @@
                 outlined
                 :modelValue="item.organizationShortName.toString() ?? ''"
                 label="ชื่อย่อหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
               />
-
-              <selector
-                hide-bottom-space
+              <q-input
                 dense
                 outlined
-                v-model="item.organizationAgencyId"
-                :options="organizationAgency"
-                label="หน่วยงานต้นสังกัด"
-                class="col-xs-12 col-sm-4 col-md-3"
-                use-input
-                input-debounce="0"
-                @filter="
-                  (inputValue:any, doneFn:Function) =>
-                    filterSelector(inputValue, doneFn, '1')
-                "
-                option-label="name"
-                option-value="id"
-                map-options
-                emit-value
-                clearable
+                v-model="item.agency"
+                class="col-xs-12 col-sm-2 col-md-2"
+                label="เลขที่หน่วยงาน"
               />
-
-              <selector
-                hide-bottom-space
+              <q-input
                 dense
                 outlined
-                v-model="item.organizationGovernmentAgencyId"
-                :options="organizationGovernmentAgency"
-                label="ส่วนราชการต้นสังกัด"
-                class="col-xs-12 col-sm-4 col-md-3"
-                use-input
-                input-debounce="0"
-                @filter="
-                  (inputValue:any, doneFn:Function) =>
-                    filterSelector(inputValue, doneFn, '1')
-                "
-                option-label="name"
-                option-value="id"
-                map-options
-                emit-value
-                clearable
+                v-model="item.government"
+                class="col-xs-12 col-sm-2 col-md-2"
+                label="เลขที่ส่วนราชการ"
+              />
+              <q-input
+                dense
+                outlined
+                v-model="item.department"
+                class="col-xs-12 col-sm-2 col-md-2"
+                label="เลขที่ฝ่าย/ส่วน"
+              />
+              <q-input
+                dense
+                outlined
+                v-model="item.pile"
+                class="col-xs-12 col-sm-2 col-md-2"
+                label="เลขที่กอง"
               />
-
               <selector
                 hide-bottom-space
                 dense
@@ -173,7 +158,7 @@
                 v-model="item.organizationTypeId"
                 :options="organizationType"
                 label="ประเภทหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -193,7 +178,7 @@
                 v-model="item.organizationLevelId"
                 :options="organizationLevel"
                 label="ระดับหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -207,6 +192,54 @@
                 clearable
                 :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
               />
+              <selector
+                hide-bottom-space
+                dense
+                outlined
+                v-model="item.organizationAgencyId"
+                :options="organizationAgency"
+                label="หน่วยงานต้นสังกัด"
+                class="col-xs-12 col-sm-4 col-md-4"
+                use-input
+                input-debounce="0"
+                @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '1')
+                "
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
+                clearable
+              />
+              <selector
+                hide-bottom-space
+                dense
+                outlined
+                v-model="item.organizationGovernmentAgencyId"
+                :options="organizationGovernmentAgency"
+                label="ส่วนราชการต้นสังกัด"
+                class="col-xs-12 col-sm-6 col-md-6"
+                use-input
+                input-debounce="0"
+                @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '1')
+                "
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
+                clearable
+              />
+              <q-input
+                dense
+                outlined
+                v-model="item.organizationOrder"
+                class="col-xs-12 col-sm-2 col-md-2"
+                type="number"
+                label="ลำดับผังโครงสร้าง"
+              />
               <selector
                 hide-bottom-space
                 dense
@@ -214,7 +247,7 @@
                 v-model="item.organizationExternalPhoneId"
                 :options="organizationTelExternal"
                 label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-4 col-md-4"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -234,7 +267,7 @@
                 v-model="item.organizationInternalPhoneId"
                 :options="organizationTelInternal"
                 label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-4 col-md-4"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -254,7 +287,7 @@
                 v-model="item.organizationFaxId"
                 :options="organizationFax"
                 label="หมายเลขโทรสาร"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-4 col-md-4"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -267,43 +300,6 @@
                 emit-value
                 clearable
               />
-              <q-input
-                dense
-                outlined
-                v-model="item.agency"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="หน่วยงาน"
-              />
-              <q-input
-                dense
-                outlined
-                v-model="item.government"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="ส่วนราชการ"
-              />
-              <q-input
-                dense
-                outlined
-                v-model="item.department"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="ฝ่าย/ส่วน"
-              />
-              <q-input
-                dense
-                outlined
-                v-model="item.pile"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="กอง"
-              />
-
-              <q-input
-                dense
-                outlined
-                :modelValue="Number(item.organizationOrder) ?? 0"
-                class="col-xs-12 col-sm-4 col-md-3"
-                type="number"
-                label="ลำดับผังโครงสร้าง"
-              />
               <div class="col-xs-12 col-sm-12 col-md-12">
                 <q-input
                   :class="getClass(true)"
@@ -317,7 +313,6 @@
                   :label="`${'หน้าที่รับผิดชอบ'}`"
                   type="textarea"
                 />
-                <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
               </div>
             </div>
           </q-card>
@@ -339,8 +334,6 @@ import type {
 } from "../../interface/index/Main";
 import { log } from "console";
 import { useDataStore } from "@/stores/data";
-
-import { useCounterMixin } from "@/stores/mixin";
 // import { organizationSet } from "../interface/index/Main";
 
 const props = defineProps({
@@ -350,8 +343,6 @@ const props = defineProps({
 
 const emit = defineEmits(["update:organizprops", "update:formprops"]);
 
-const mixin = useCounterMixin();
-const {showLoader, hideLoader } = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
@@ -390,7 +381,7 @@ const organizationAgencyCode = ref<GovermentOption[]>([]);
 const organizationAgencyCodeFilter = ref<GovermentOption[]>([]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchOrganizationOri();
   await fetchOrganizationAgencyCode();
   await fetchOrganizationGovernmentCode();
@@ -409,7 +400,7 @@ onMounted(async () => {
  *  หน่วยงาน
  */
 const fetchOrganizationOri = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organization)
     .then((res) => {
@@ -425,14 +416,14 @@ const fetchOrganizationOri = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  รหัสหน่วยงาน
  */
 const fetchOrganizationAgencyCode = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationCode)
     .then((res) => {
@@ -454,14 +445,14 @@ const fetchOrganizationAgencyCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  รหัสส่วนราชการ
  */
 const fetchOrganizationGovernmentCode = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -483,14 +474,14 @@ const fetchOrganizationGovernmentCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 // /**
 //  *  ชื่อย่อหน่วยงาน
 //  */
 // const fetchOrganizationShortName = async () => {
-//   showLoader();
+//   loaderPage(true);
 //   await http
 //     .get(config.API.organizationShortName)
 //     .then((res) => {
@@ -512,16 +503,16 @@ const fetchOrganizationGovernmentCode = async () => {
 //       console.log(e);
 //     })
 //     .finally(() => {
-//       hideLoader();
+//       loaderPage(false);
 //     });
 // };
 /**
  *  หน่วยงานต้นสังกัด
  */
 const fetchOrganizationAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
-    .get(config.API.listOrganizationAgency("หน่วยงาน"))
+    .get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
@@ -538,16 +529,16 @@ const fetchOrganizationAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  ส่วนราชการต้นสังกัด
  */
 const fetchOrganizationGovernmentAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
-    .get(config.API.listOrganizationAgency("ส่วนราชการ"))
+    .get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
@@ -564,14 +555,14 @@ const fetchOrganizationGovernmentAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *   ประเภทหน่วยงาน
  */
 const fetchOrganizationType = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationType)
     .then((res) => {
@@ -587,14 +578,14 @@ const fetchOrganizationType = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  ระดับหน่วยงาน
  */
 const fetchOrganizationLevel = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationLevel)
     .then((res) => {
@@ -610,14 +601,14 @@ const fetchOrganizationLevel = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์ติดต่อภายใน
  */
 const fetchOrganizationTelInternal = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationTelInternal)
     .then((res) => {
@@ -633,14 +624,14 @@ const fetchOrganizationTelInternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์ติดต่อภายนอก
  */
 const fetchOrganizationTelExternal = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationTelExternal)
     .then((res) => {
@@ -656,14 +647,14 @@ const fetchOrganizationTelExternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์โทรสาร
  */
 const fetchOrganizationFax = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationFax)
     .then((res) => {
@@ -679,7 +670,7 @@ const fetchOrganizationFax = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -771,6 +762,7 @@ const addOrganizationItem = async () => {
         organizationGovernmentCodeOption: organizationGovernmentCode.value,
         organizationGovernmentCodeOptionFilter:
           organizationGovernmentCodeFilter.value,
+        isActive: true,
       });
       emit("update:organizprops", organizations.value);
       //   console.log(organizations);
@@ -780,7 +772,7 @@ const addOrganizationItem = async () => {
 
 const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationGovernmentCode(val))
     .then((res) => {
@@ -800,14 +792,14 @@ const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
   return option;
 };
 
 const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationAgencyCode(val))
     .then((res) => {
@@ -827,7 +819,7 @@ const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
   return option;
 };
diff --git a/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue b/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue
index 63285916c..eddae0331 100644
--- a/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue
+++ b/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue
@@ -11,7 +11,7 @@
               v-model="organization.organizationOrganizationId"
               :options="organizationOri"
               label="หน่วยงาน"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-6 col-md-6"
               use-input
               input-debounce="0"
               @filter="
@@ -31,7 +31,7 @@
               v-model="organization.organizationAgencyCode"
               :options="organizationAgencyCode"
               label="รหัสหน่วยงาน"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-2 col-md-2"
               use-input
               input-debounce="0"
               @filter="
@@ -53,7 +53,7 @@
               v-model="organization.organizationGovernmentCode"
               :options="organization.organizationGovernmentCodeOption"
               label="รหัสส่วนราชการ"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-2 col-md-2"
               use-input
               input-debounce="0"
               @filter="
@@ -68,16 +68,81 @@
               clearable
               :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
             />
-
             <q-input
               dense
               readonly
               outlined
               :modelValue="organization.organizationShortName.toString() ?? ''"
               label="ชื่อย่อหน่วยงาน"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-2 col-md-2"
+            />
+            <q-input
+              dense
+              outlined
+              v-model="organization.agency"
+              class="col-xs-12 col-sm-2 col-md-2"
+              label="เลขที่หน่วยงาน"
+            />
+            <q-input
+              dense
+              outlined
+              v-model="organization.government"
+              class="col-xs-12 col-sm-2 col-md-2"
+              label="เลขที่ส่วนราชการ"
+            />
+            <q-input
+              dense
+              outlined
+              v-model="organization.department"
+              class="col-xs-12 col-sm-2 col-md-2"
+              label="เลขที่ฝ่าย/ส่วน"
+            />
+            <q-input
+              dense
+              outlined
+              v-model="organization.pile"
+              class="col-xs-12 col-sm-2 col-md-2"
+              label="เลขที่กอง"
+            />
+            <selector
+              dense
+              outlined
+              v-model="organization.organizationTypeId"
+              :options="organizationType"
+              label="ประเภทหน่วยงาน"
+              class="col-xs-12 col-sm-2 col-md-2"
+              use-input
+              input-debounce="0"
+              @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '5')
+                "
+              option-label="name"
+              option-value="id"
+              map-options
+              emit-value
+              clearable
+            /><!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทหน่วยงาน'}`]" -->
+            <selector
+              dense
+              outlined
+              v-model="organization.organizationLevelId"
+              :options="organizationLevel"
+              label="ระดับหน่วยงาน"
+              class="col-xs-12 col-sm-2 col-md-2"
+              use-input
+              input-debounce="0"
+              @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '6')
+                "
+              option-label="name"
+              option-value="id"
+              map-options
+              emit-value
+              clearable
+              :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
             />
-
             <selector
               dense
               disable
@@ -85,7 +150,7 @@
               v-model="organization.organizationAgencyId"
               :options="organizationAgency"
               label="หน่วยงานต้นสังกัด"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-4 col-md-4"
               use-input
               input-debounce="0"
               @filter="
@@ -106,7 +171,7 @@
               v-model="organization.organizationGovernmentAgencyId"
               :options="organizationGovernmentAgency"
               label="ส่วนราชการต้นสังกัด"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-6 col-md-6"
               use-input
               input-debounce="0"
               @filter="
@@ -120,44 +185,14 @@
               clearable
             />
             <!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกส่วนราชการต้นสังกัด'}`]" -->
-            <selector
+            <q-input
               dense
               outlined
-              v-model="organization.organizationTypeId"
-              :options="organizationType"
-              label="ประเภทหน่วยงาน"
-              class="col-xs-12 col-sm-4 col-md-3"
-              use-input
-              input-debounce="0"
-              @filter="
-                  (inputValue:any, doneFn:Function) =>
-                    filterSelector(inputValue, doneFn, '5')
-                "
-              option-label="name"
-              option-value="id"
-              map-options
-              emit-value
-              clearable
-            /><!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทหน่วยงาน'}`]" -->
-            <selector
-              dense
-              outlined
-              v-model="organization.organizationLevelId"
-              :options="organizationLevel"
-              label="ระดับหน่วยงาน"
-              class="col-xs-12 col-sm-4 col-md-3"
-              use-input
-              input-debounce="0"
-              @filter="
-                  (inputValue:any, doneFn:Function) =>
-                    filterSelector(inputValue, doneFn, '6')
-                "
-              option-label="name"
-              option-value="id"
-              map-options
-              emit-value
-              clearable
-              :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
+              :modelValue="Number(organization.organizationOrder) ?? 0"
+              class="col-xs-12 col-sm-2 col-md-2"
+              type="number"
+              label="ลำดับ"
+              @update:model-value="(value) => updateNumber(organization, value)"
             />
             <selector
               dense
@@ -165,7 +200,7 @@
               v-model="organization.organizationExternalPhoneId"
               :options="organizationTelExternal"
               label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-4 col-md-4"
               use-input
               input-debounce="0"
               @filter="
@@ -184,7 +219,7 @@
               v-model="organization.organizationInternalPhoneId"
               :options="organizationTelInternal"
               label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-4 col-md-4"
               use-input
               input-debounce="0"
               @filter="
@@ -203,7 +238,7 @@
               v-model="organization.organizationFaxId"
               :options="organizationFax"
               label="หมายเลขโทรสาร"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-2 col-md-2"
               use-input
               input-debounce="0"
               @filter="
@@ -217,23 +252,13 @@
               clearable
             />
 
-            <q-input
-              dense
-              outlined
-              :modelValue="Number(organization.organizationOrder) ?? 0"
-              class="col-xs-12 col-sm-4 col-md-1"
-              type="number"
-              label="ลำดับ"
-              @update:model-value="(value) => updateNumber(organization, value)"
-            />
-
             <selector
               dense
               outlined
               v-model="organization.organizationStatusId"
               :options="organizationStatus"
               label="สถานะหน่วยงาน"
-              class="col-xs-12 col-sm-4 col-md-2"
+              class="col-xs-12 col-sm-2 col-md-2"
               use-input
               input-debounce="0"
               @filter="
@@ -245,35 +270,6 @@
               map-options
               emit-value
             />
-            <q-input
-              dense
-              outlined
-              v-model="organization.agency"
-              class="col-xs-12 col-sm-4 col-md-3"
-              label="หน่วยงาน"
-            />
-            <q-input
-              dense
-              outlined
-              v-model="organization.government"
-              class="col-xs-12 col-sm-4 col-md-3"
-              label="ส่วนราชการ"
-            />
-            <q-input
-              dense
-              outlined
-              v-model="organization.department"
-              class="col-xs-12 col-sm-4 col-md-3"
-              label="ฝ่าย/ส่วน"
-            />
-            <q-input
-              dense
-              outlined
-              v-model="organization.pile"
-              class="col-xs-12 col-sm-4 col-md-3"
-              label="กอง"
-            />
-
             <q-input
               :class="getClass(true)"
               hide-bottom-space
@@ -286,7 +282,6 @@
               :label="`${'หน้าที่รับผิดชอบ'}`"
               type="textarea"
             />
-            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
 
             <!-- v-model.number="item.organizationOrder" -->
             <!--<q-select
@@ -318,7 +313,6 @@ import { log } from "console";
 import { useDataStore } from "@/stores/data";
 import type { EnumStringMember } from "@babel/types";
 // import { organizationSet } from "../interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
 
 const props = defineProps({
   organizprops: Object as PropType<OrganizaOption>,
@@ -329,8 +323,6 @@ const props = defineProps({
   },
 });
 
-const mixin = useCounterMixin();
-const { showLoader, hideLoader } = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const emit = defineEmits(["update:organizprops", "update:formprops"]);
@@ -396,11 +388,12 @@ const organization = ref<OrganizaOption>({
   organizationGovernmentCodeOption: organizationGovernmentCode.value,
   organizationGovernmentCodeOptionFilter:
     organizationGovernmentCodeFilter.value,
+  isActive: true,
 });
 emit("update:organizprops", organization.value);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   //   await fillOrgEdit(); //มาแค่ตรง selector(q-select)
   await fetchOrganizationOri();
   //   await fetchOrganizationShortName();
@@ -434,7 +427,7 @@ const getClass = (val: boolean) => {
  * @param node node that you want to edit data
  */
 const fillOrgEdit = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getOrgDraft(props.org.organizationId))
     .then((res) => {
@@ -506,7 +499,7 @@ const fillOrgEdit = async () => {
       console.log(e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
   console.log("success");
 };
@@ -515,7 +508,7 @@ const fillOrgEdit = async () => {
  *  หน่วยงาน
  */
 const fetchOrganizationOri = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organization)
     .then((res) => {
@@ -531,14 +524,14 @@ const fetchOrganizationOri = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  รหัสหน่วยงาน
  */
 const fetchOrganizationAgencyCode = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationCode)
     .then((res) => {
@@ -560,14 +553,14 @@ const fetchOrganizationAgencyCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  รหัสส่วนราชการ
  */
 const fetchOrganizationGovernmentCode = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -592,14 +585,14 @@ const fetchOrganizationGovernmentCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 // /**
 //  *  ชื่อย่อหน่วยงาน
 //  */
 // const fetchOrganizationShortName = async () => {
-//   showLoader();
+//   loaderPage(true);
 //   await http
 //     .get(config.API.organizationShortName)
 //     .then((res) => {
@@ -621,17 +614,17 @@ const fetchOrganizationGovernmentCode = async () => {
 //       console.log(e);
 //     })
 //     .finally(() => {
-//       hideLoader();
+//       loaderPage(false);
 //     });
 // };
 /**
  *  หน่วยงานต้นสังกัด
  */
 const fetchOrganizationAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     // .get(config.API.organizationAgency)
-    .get(config.API.listOrganizationAgency("หน่วยงาน"))
+    .get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
@@ -648,17 +641,17 @@ const fetchOrganizationAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  ส่วนราชการต้นสังกัด
  */
 const fetchOrganizationGovernmentAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     // .get(config.API.organizationGovernmentAgency)
-    .get(config.API.listOrganizationAgency("ส่วนราชการ"))
+    .get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
@@ -676,14 +669,14 @@ const fetchOrganizationGovernmentAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *   ประเภทหน่วยงาน
  */
 const fetchOrganizationType = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationType)
     .then((res) => {
@@ -699,7 +692,7 @@ const fetchOrganizationType = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -707,7 +700,7 @@ const fetchOrganizationType = async () => {
  *   สถานะหน่วยงาน
  */
 const fetchOrganizationStatus = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationStatus)
     .then((res) => {
@@ -723,7 +716,7 @@ const fetchOrganizationStatus = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -731,7 +724,7 @@ const fetchOrganizationStatus = async () => {
  *  ระดับหน่วยงาน
  */
 const fetchOrganizationLevel = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationLevel)
     .then((res) => {
@@ -747,14 +740,14 @@ const fetchOrganizationLevel = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์ติดต่อภายใน
  */
 const fetchOrganizationTelInternal = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationTelInternal)
     .then((res) => {
@@ -770,14 +763,14 @@ const fetchOrganizationTelInternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์ติดต่อภายนอก
  */
 const fetchOrganizationTelExternal = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationTelExternal)
     .then((res) => {
@@ -793,14 +786,14 @@ const fetchOrganizationTelExternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์โทรสาร
  */
 const fetchOrganizationFax = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationFax)
     .then((res) => {
@@ -816,13 +809,13 @@ const fetchOrganizationFax = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationGovernmentCode(val))
     .then((res) => {
@@ -842,14 +835,14 @@ const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
   return option;
 };
 
 const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationAgencyCode(val))
     .then((res) => {
@@ -869,7 +862,7 @@ const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
   return option;
 };
diff --git a/src/modules/02_organizational/components/Tree/TreeButtonsSet.vue b/src/modules/02_organizational/components/Tree/TreeButtonsSet.vue
index 2b492b044..08df76da6 100644
--- a/src/modules/02_organizational/components/Tree/TreeButtonsSet.vue
+++ b/src/modules/02_organizational/components/Tree/TreeButtonsSet.vue
@@ -65,7 +65,7 @@
       <q-tooltip>เผยแพร่</q-tooltip>
     </q-btn>
     <!-- refresh data -->
-    <q-btn
+    <!-- <q-btn
       flat
       round
       icon="mdi-refresh"
@@ -74,7 +74,7 @@
       class="q-mr-sm"
     >
       <q-tooltip>รีเฟรชข้อมูล</q-tooltip>
-    </q-btn>
+    </q-btn> -->
     <q-space />
   </div>
   <!-- ข้อมูลการเผยแพร่ข้อมูล -->
diff --git a/src/modules/02_organizational/interface/index/Main.ts b/src/modules/02_organizational/interface/index/Main.ts
index 64f6a5414..2c475b5b0 100644
--- a/src/modules/02_organizational/interface/index/Main.ts
+++ b/src/modules/02_organizational/interface/index/Main.ts
@@ -29,7 +29,7 @@ interface OrganizaOption {
   organizationInternalPhoneId: string; //เบอร์ติดต่อภายใน
   organizationExternalPhoneId: string; //เบอร์ติดต่อภายนอก
   organizationFaxId: string; //เบอร์โทรสาร
-  organizationOrder: Number; // ลำดับผังโครงสร้าง
+  organizationOrder: number; // ลำดับผังโครงสร้าง
   organizationUserNote: string; // User Note
   organizationStatusId: string; //status
   organizationGovernmentCodeOption: GovermentOption[];
@@ -38,6 +38,7 @@ interface OrganizaOption {
   government: string; // ส่วนราชการ
   department: string; // ฝ่าย/ส่วน
   pile: string; // กอง
+  isActive: boolean; //
   //   organizationAgencyCodeOption: GovermentOption[];
   //   organizationAgencyCodeOptionFilter: GovermentOption[];
 }
diff --git a/src/modules/02_organizational/interface/request/Mapping.ts b/src/modules/02_organizational/interface/request/Mapping.ts
index 24c3b0b51..9401c26ae 100644
--- a/src/modules/02_organizational/interface/request/Mapping.ts
+++ b/src/modules/02_organizational/interface/request/Mapping.ts
@@ -24,6 +24,7 @@ interface RequestItemsObject {
   positionExecutiveId: string;
   positionExecutiveSideId: string;
   positionStatusId: string; //สถานภาพของตำแหน่ง ไม่แน่ใจ DB
+  qualification: string; //เหตุผล
   positionCondition: string; //เงื่อนไขตำแหน่ง
   positionMasterUserNote: string; //หมายเหตุ
   positionLevelId: any; //ระดับ array id
diff --git a/src/modules/02_organizational/interface/response/Mapping.ts b/src/modules/02_organizational/interface/response/Mapping.ts
index 2bf8c564d..dae1752e9 100644
--- a/src/modules/02_organizational/interface/response/Mapping.ts
+++ b/src/modules/02_organizational/interface/response/Mapping.ts
@@ -30,8 +30,8 @@ interface ResponseTree {
   posiNumNew: string | null;
   posiOld: string | null;
   posiNew: string | null;
-  levelOld: string | null;
-  levelNew: string | null;
+  levelOld: any;
+  levelNew: any;
   change: string | null;
   statusPosition: Boolean;
   report2Id: string | null;
diff --git a/src/modules/02_organizational/views/MainReport.vue b/src/modules/02_organizational/views/MainReport.vue
index 720e48dd8..4733ef666 100644
--- a/src/modules/02_organizational/views/MainReport.vue
+++ b/src/modules/02_organizational/views/MainReport.vue
@@ -146,7 +146,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, success, dateToISO } = mixin;
 
 const govermentOP = ref<DataOption[]>([]);
 const govermentOPfilter = ref<DataOption[]>([]);
@@ -166,7 +166,7 @@ const clickAccount3 = async () => {
 };
 
 const fetchOrganizationAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     // .get(config.API.organizationAgency)
     .get(config.API.getOCType)
@@ -186,12 +186,12 @@ const fetchOrganizationAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchOrganizationAgency();
 });
 </script>
diff --git a/src/modules/02_organizational/views/MainTree.vue b/src/modules/02_organizational/views/MainTree.vue
index 645f9be3f..a3273ca66 100644
--- a/src/modules/02_organizational/views/MainTree.vue
+++ b/src/modules/02_organizational/views/MainTree.vue
@@ -73,13 +73,13 @@
                   {{ personDetail ? personDetail.positionNum : "" }}
                 </div>
 
-                <div class="text-weight-medium q-pt-md row items-center">
+                <!-- <div class="text-weight-medium q-pt-md row items-center">
                   <q-icon size="10px" color="grey-4" name="mdi-circle" />
                   <div class="q-pl-sm">ตำแหน่งในการบริหารงาน</div>
                 </div>
                 <div class="text-grey-7 q-pl-lg">
                   {{ personDetail ? personDetail.executivePosition : "" }}
-                </div>
+                </div> -->
 
                 <div class="text-weight-medium q-pt-md row items-center">
                   <q-icon size="10px" color="grey-4" name="mdi-circle" />
@@ -170,10 +170,44 @@
               >
                 <!--organization บรรทัดแสดงชื่อหน่วยงาน -->
                 <template v-slot:header-organization="prop">
-                  <div class="row items-center q-gutter-sm q-pa-xs">
+                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
                     <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
                     <div>
-                      {{ prop.node.organizationName }}
+                      <div class="text-weight-medium">
+                        {{ prop.node.organizationName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.governmentCode
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.agency
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.government
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.department
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.pile
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.organizationShortName
+                        }}
+                      </div>
                     </div>
                     <!--แสดง Total Count PositionNum-->
                     <q-badge
@@ -286,8 +320,42 @@
                 <template v-slot:header-organization="prop">
                   <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
                     <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                    <div class="text-weight-medium">
-                      {{ prop.node.organizationName }}
+                    <div>
+                      <div class="text-weight-medium">
+                        {{ prop.node.organizationName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.governmentCode
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.agency
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.government
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.department
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.pile
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.organizationShortName
+                        }}
+                      </div>
                     </div>
                     <!--แสดง Total Count PositionNum-->
                     <q-badge
@@ -310,7 +378,9 @@
                       @click.stop="
                         (popupAddOrganization = true),
                           (modalHeaderName = prop.node.organizationName),
-                          (rowClickTree = prop.node)
+                          (rowClickTree = prop.node),
+                          (modalHeaderPosition =
+                            prop.node.keyId.search('-') > 0 ? true : false)
                       "
                       size="10px"
                       icon="mdi-plus"
@@ -331,7 +401,9 @@
                       @click.stop="
                         (popupEditSelectedOrganization = true),
                           (modalHeaderName = prop.node.organizationName),
-                          (rowClickTree = prop.node)
+                          (rowClickTree = prop.node),
+                          (modalHeaderPosition =
+                            prop.node.keyId.search('-') > 0 ? true : false)
                       "
                       size="10px"
                       icon="mdi-pencil-outline"
@@ -359,59 +431,81 @@
                 </template>
                 <!--person บรรทัดแถวแสดงชื่อพนักงานอย่างเดียว-->
                 <template v-slot:header-person="prop">
-                  <div
-                    class="row items-center text-dark col-12 q-py-xs q-pl-sm rounded-borders"
-                    style="width: 100%"
-                  >
-                    <img
-                      v-if="
-                        prop.node.avatar == '' ||
-                        prop.node.avatar ==
-                          'https://cdn.quasar.dev/img/boy-avatar.png'
-                      "
-                      src="@/assets/avatar_user.jpg"
-                      class="col-xs-1 col-sm-2"
-                      style="width: 28px; height: 28px; border-radius: 50%"
-                    />
-                    <img
-                      v-else
-                      :src="prop.node.avatar"
-                      class="col-xs-1 col-sm-2"
-                      style="width: 28px; height: 28px; border-radius: 50%"
-                    />
-                    <!--=====ตำแหน่งว่าง สีแดง=====-->
+                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
                     <div
-                      v-if="
-                        prop.node.name == `ว่าง` ||
-                        prop.node.name == `N/A` ||
-                        prop.node.name == null
+                      rounded
+                      :style="
+                        !prop.node.isActive ? 'filter: grayscale(60%);' : ''
                       "
-                      class="q-px-sm text-weight-medium text-red"
                     >
-                      ว่าง
+                      <img
+                        v-if="
+                          prop.node.avatar == '' ||
+                          prop.node.avatar ==
+                            'https://cdn.quasar.dev/img/boy-avatar.png'
+                        "
+                        src="@/assets/avatar_user.jpg"
+                        class="col-xs-1 col-sm-2"
+                        style="width: 28px; height: 28px; border-radius: 50%"
+                      />
+                      <img
+                        v-else
+                        :src="prop.node.avatar"
+                        class="col-xs-1 col-sm-2"
+                        style="width: 28px; height: 28px; border-radius: 50%"
+                      />
                     </div>
-                    <!--=====หัวหน้า สีเขียว=====-->
-                    <div v-else-if="prop.node.positionLeaderFlag">
-                      <div class="q-px-sm text-weight-medium text-primary">
-                        {{ prop.node.name }}
+
+                    <div
+                      rounded
+                      :class="
+                        !prop.node.isActive ? 'text-grey-6' : 'text-black'
+                      "
+                    >
+                      <!--=====ตำแหน่งว่าง สีแดง=====-->
+                      <div class="row">
+                        <div
+                          v-if="
+                            prop.node.name == `ว่าง` ||
+                            prop.node.name == `N/A` ||
+                            prop.node.name == null
+                          "
+                          class="q-px-sm text-weight-medium"
+                          :class="
+                            !prop.node.isActive ? 'text-grey-6' : 'text-red'
+                          "
+                        >
+                          ว่าง
+                        </div>
+                        <!--=====หัวหน้า สีเขียว=====-->
+                        <div v-else-if="prop.node.positionLeaderFlag">
+                          <div class="q-px-sm text-weight-medium text-primary">
+                            {{ prop.node.name }}
+                          </div>
+                        </div>
+                        <!--=====ลูกน้อง สีปกติ=====-->
+                        <div v-else>
+                          <div class="q-px-sm text-weight-medium">
+                            {{ prop.node.name }}
+                          </div>
+                        </div>
+                        <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                        <div class="q-pr-sm">
+                          {{ prop.node.positionName }}
+                        </div>
+                        <div class="q-pr-sm">
+                          {{ prop.node.positionNum }}
+                        </div>
+                        <div class="q-pr-sm">
+                          {{ prop.node.positionLevel }}
+                        </div>
                       </div>
-                    </div>
-                    <!--=====ลูกน้อง สีปกติ=====-->
-                    <div v-else>
-                      <div class="q-px-sm text-weight-medium">
-                        {{ prop.node.name }}
+                      <div class="q-pl-sm text-weight-light">
+                        {{ prop.node.positionSideName }}
+                        <!-- {{ prop.node.executivePosition }} -->
+                        {{ prop.node.executivePositionSide }}
                       </div>
                     </div>
-                    <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                    <div class="q-pr-sm">
-                      {{ prop.node.positionName }}
-                    </div>
-                    <div class="q-pr-sm">
-                      {{ prop.node.positionNum }}
-                    </div>
-                    <div class="q-pr-sm">
-                      {{ prop.node.positionLevel }}
-                    </div>
                     <q-icon
                       v-if="prop.node.positionLeaderFlag"
                       class="q-mr-sm"
@@ -431,7 +525,9 @@
                       @click.stop="
                         (popupEditSelectedPosition = true),
                           (modalHeaderName = prop.node.positionName),
-                          (rowClickTree = prop.node)
+                          (rowClickTree = prop.node),
+                          (modalHeaderPosition =
+                            prop.node.keyId.search('-') > 0 ? true : false)
                       "
                       size="10px"
                       icon="mdi-pencil-outline"
@@ -468,8 +564,8 @@
           </q-page>
         </q-page-container>
         <!-- popup Add Organizations & Positions -->
-        <q-dialog v-model="popupAddOrganization" persistent full-width>
-          <q-card class="text-dark">
+        <q-dialog v-model="popupAddOrganization" persistent>
+          <q-card class="text-dark" style="min-width: 950px">
             <q-card-section class="row items-center q-py-sm">
               <div class="text-bold">เพิ่มโครงสร้างอัตรากำลังภายใต้</div>
               <strong class="text-primary q-pl-sm">{{
@@ -502,6 +598,7 @@
                 v-model:positions="positionData"
                 v-model:formprops="positionForm"
                 :is-add-new="true"
+                v-if="modalHeaderPosition"
               />
             </q-card-section>
 
@@ -706,7 +803,7 @@ const store = useDataStore();
 const mixin = useCounterMixin();
 
 const { loaderPage } = store; //แสดง load windows ขณะเรียก api
-const { success, messageError, dialogMessage, showLoader, hideLoader } = mixin;
+const { success, messageError, dialogMessage } = mixin;
 
 //Notification Component Variable
 const $q = useQuasar(); // show dialog
@@ -722,6 +819,7 @@ const popupAddOrganization = ref<boolean>(false); //แสดง pop-up เพ
 const popupEditSelectedOrganization = ref<boolean>(false); //แสดง pop-up Edit หน่วยงานที่เลือก
 const popupEditSelectedPosition = ref<boolean>(false); //แสดง pop-up Edit ตำแหน่งที่เลือก
 const modalHeaderName = ref<string>("กรุงเทพมหานคร/สำนักงาน ก.ก."); //show name of click node on modal
+const modalHeaderPosition = ref<boolean>(true);
 
 //ButtonSet Variable
 const version = ref<string>("published"); // คำอื่นจะเปิดปุ่มให้กดได้ :publicData="version === 'published'" (True = Disable Buttons) -->
@@ -809,16 +907,17 @@ watch(isShowEditTree, (count, prevCount) => {
 onMounted(async () => {
   console.log("onMounted");
   await fetchTreeRoot(true); //fetch Root Edit Tree level 1
-  await loadViewTree();
+  //   await loadViewTree();
   expandedNodeView.value = [`1`];
 
-  // //   setTimeout(() => {
-  // //delay เพื่อให้หน้า editTree แตก level 2 ให้เสร็จก่อน จึงค่อยมา render หน้า viewTree
-  // // isShowEditTree.value = false; //show View Tree สั่งแสดงหน้า viewTree
-  // await fetchTreeRoot(false); //fetch View Tree
-  // // *** viewTree จะเปลี่ยนจาก โหลดทีละ level ตามที่ user click เป็น load file ที่มีข้อมูลครบทั้ง DB แล้วมาทีเดียว
-  // // *** น่าจะเปลี่ยนจาก v-if เป็น v-show เฉพาะ viewTree
-  // //   }, 600);
+  setTimeout(async () => {
+    // //delay เพื่อให้หน้า editTree แตก level 2 ให้เสร็จก่อน จึงค่อยมา render หน้า viewTree
+    // // isShowEditTree.value = false; //show View Tree สั่งแสดงหน้า viewTree
+    // await fetchTreeRoot(false); //fetch View Tree
+    await loadViewTree();
+    // // *** viewTree จะเปลี่ยนจาก โหลดทีละ level ตามที่ user click เป็น load file ที่มีข้อมูลครบทั้ง DB แล้วมาทีเดียว
+    // // *** น่าจะเปลี่ยนจาก v-if เป็น v-show เฉพาะ viewTree
+  }, 600);
   await isTreeHasDraft();
 });
 
@@ -868,12 +967,12 @@ const loadFileServer = async (node: any) => {
       manageApiErrorMsg(e);
     })
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 const isTreeHasDraft = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   let orgHasDraft = false;
   let orgPoHasDraft = false;
   await http
@@ -889,7 +988,7 @@ const isTreeHasDraft = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 
   await http
@@ -905,7 +1004,7 @@ const isTreeHasDraft = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 
   if (orgHasDraft || orgPoHasDraft) {
@@ -920,7 +1019,7 @@ const isTreeHasDraft = async () => {
  */
 const fetchTreeRoot = async (isDraft: boolean) => {
   //   console.log(isDraft);
-  showLoader();
+  loaderPage(true);
   console.log("Call API14 GetTreeRoot");
   isShowEditTree.value = isDraft; // to show same tree that we fetch
   let request = "";
@@ -947,14 +1046,15 @@ const fetchTreeRoot = async (isDraft: boolean) => {
       //   messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
-      //   if (isDraft) {
-      // ถ้าไม่ต้องการให้แตก node root on first load ก็ไม่ต้องใส่
-      // ต้องอยู่ตรงนี้ ถ้าอยู่ตรง .then จะ error คาดว่ามันทำงานก่อนที่ tree จะ render เสร็จ แต่ก็อาจจะไม่ใช่
-      //   qtreeEdit.value.setExpanded(dataTreeDraft.value[0].keyId, true);
-      //   } else {
-      //     qtreeView.value.setExpanded(dataTree.value[0].keyId, true);
-      //   }
+      loaderPage(false);
+      if (isDraft) {
+        // ถ้าไม่ต้องการให้แตก node root on first load ก็ไม่ต้องใส่
+        // ต้องอยู่ตรงนี้ ถ้าอยู่ตรง .then จะ error คาดว่ามันทำงานก่อนที่ tree จะ render เสร็จ แต่ก็อาจจะไม่ใช่
+        qtreeEdit.value.setExpanded(dataTreeDraft.value[0].keyId, true);
+        expandedNodeEdit.value = [dataTreeDraft.value[0].keyId];
+      } else {
+        qtreeView.value.setExpanded(dataTree.value[0].keyId, true);
+      }
     });
 };
 
@@ -964,7 +1064,7 @@ const fetchTreeRoot = async (isDraft: boolean) => {
 const fetchChildrenByParentId = async (node: any) => {
   //   console.log(isDraft);
   console.log("Call API4");
-  showLoader();
+  loaderPage(true);
   let request = "";
   if (isShowEditTree.value) {
     request = config.API.getDraftTreeNode(node.organizationId, node.keyId);
@@ -984,7 +1084,7 @@ const fetchChildrenByParentId = async (node: any) => {
       manageApiErrorMsg(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1000,7 +1100,7 @@ const onLazyLoad = (node: any) => {
      */
     console.log("Call LazyLoad");
     await fetchChildrenByParentId(node.node);
-    /**   showLoader();
+    /**   loaderPage(true);
     let request = "";
     if (isShowEditTree.value) {
       request = config.API.getDraftTreeNode(
@@ -1037,7 +1137,7 @@ const onLazyLoad = (node: any) => {
         // messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });*/
 
     node.done(node.node.children); //return ค่าให้ q-tree generate children
@@ -1092,7 +1192,7 @@ const apiDeleteOrg = () => {
   //   console.log("isShowEditTree", isShowEditTree.value);
   setTimeout(async () => {
     //delay for lazyLoad to be able to tricker again
-    showLoader();
+    loaderPage(true);
     isShowEditTree.value = true;
     await http
       .delete(config.API.delTreeOrgDraft(delStructureId.value))
@@ -1111,7 +1211,7 @@ const apiDeleteOrg = () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         await isTreeHasDraft();
       });
   }, 20);
@@ -1140,7 +1240,7 @@ const apiDeletePosition = () => {
   isShowEditTree.value = false;
   setTimeout(async () => {
     //delay for lazyLoad to be able to tricker again
-    showLoader();
+    loaderPage(true);
     isShowEditTree.value = true;
     await http
       .delete(config.API.delTreePositionDraft(delStructureId.value))
@@ -1157,7 +1257,7 @@ const apiDeletePosition = () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         await isTreeHasDraft();
       });
   }, 20);
@@ -1170,7 +1270,7 @@ const apiDeletePosition = () => {
  * ฟังก์ชัน clear data แบบร่าง
  */
 const deleteDraft = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.delTreeOrgPoDraft)
     .then((res) => {
@@ -1182,7 +1282,7 @@ const deleteDraft = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       router.go(0);
       await isTreeHasDraft();
     });
@@ -1192,7 +1292,7 @@ const deleteDraft = async () => {
  * ฟังก์ชันเผยแพร่แบบร่าง
  */
 const publishDraft = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.publishOrgPoDraft)
     .then((res) => {
@@ -1218,7 +1318,7 @@ const publishDraft = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       await isTreeHasDraft();
     });
 };
@@ -1267,6 +1367,18 @@ const treeFilterMethod = (node: any, filter: string) => {
     (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
     (node.name && node.name.indexOf(filt) > -1) ||
     (node.positionName && node.positionName.indexOf(filt) > -1) ||
+    (node.governmentCode &&
+      node.governmentCode.toString().indexOf(filt) > -1) ||
+    (node.agency && node.agency.indexOf(filt) > -1) ||
+    (node.government && node.government.indexOf(filt) > -1) ||
+    (node.department && node.department.indexOf(filt) > -1) ||
+    (node.pile && node.pile.indexOf(filt) > -1) ||
+    (node.organizationShortName &&
+      node.organizationShortName.indexOf(filt) > -1) ||
+    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+    (node.executivePositionSide &&
+      node.executivePositionSide.indexOf(filt) > -1) ||
     (node.positionLevel && node.positionLevel.indexOf(filt) > -1);
 
   //hasMatch จะได้เป็น keyId ของ node ที่หาเจอโดย q-tree จะวนเรียก treeFilterMethod ทีละ node
@@ -1304,7 +1416,7 @@ const addStructure = async (node: any) => {
   //   } // no data to add close pop-up no message show when click save
   if (
     organizCheck == true &&
-    positionCheck == true &&
+    (positionCheck == true || modalHeaderPosition.value == false) &&
     (positionData.value.length > 0 || organizationData.value.length > 0)
   ) {
     let reqOrgAr: Array<any> = JSON.parse(
@@ -1317,7 +1429,7 @@ const addStructure = async (node: any) => {
     });
     // console.log(node.organizationId);
     console.log("Call API1");
-    showLoader();
+    loaderPage(true);
     isShowEditTree.value = true; //ต้องกลับมาแสดง editTree อีกครั้ง & trigger lazyLoad โดย setExpanded
     await http
       .post(config.API.addTreeDraft, {
@@ -1338,7 +1450,7 @@ const addStructure = async (node: any) => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
 
         popupAddOrganization.value = false;
         await isTreeHasDraft();
@@ -1370,7 +1482,7 @@ const editOrgStructure = async (node: any) => {
   if (organizCheck == true) {
     // console.log(node.organizationId);
     console.log("Call API13");
-    showLoader();
+    loaderPage(true);
     isShowEditTree.value = true; //end prepare for tricker LazyLoad
     await http
       .put(config.API.editTreeOrgDraft(node.organizationId), {
@@ -1393,6 +1505,7 @@ const editOrgStructure = async (node: any) => {
         department: organizationDataEdit.value?.department,
         pile: organizationDataEdit.value?.pile,
         organizationStatusId: organizationDataEdit.value?.organizationStatusId,
+        isActive: organizationDataEdit.value?.isActive,
       })
       .then(async (res) => {
         success($q, "บันทึกข้อมูลร่างสำเร็จ");
@@ -1409,7 +1522,7 @@ const editOrgStructure = async (node: any) => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         popupEditSelectedOrganization.value = false;
         await isTreeHasDraft();
       });
@@ -1435,12 +1548,13 @@ const editPositionStructure = async (node: any) => {
 
   if (positionCheck == true) {
     console.log("Call API3");
-    showLoader();
+    loaderPage(true);
     isShowEditTree.value = true; //end prepare for tricker LazyLoad
     await http
       .put(config.API.editTreePositionDraft(node.organizationPositionId), {
         positionMasterId: positionData.value[0].positionMasterId,
         positionUserNote: positionData.value[0].positionUserNote,
+        isActive: positionData.value[0].isActive,
       })
       .then(async (res) => {
         success($q, "บันทึกข้อมูลร่างสำเร็จ");
@@ -1457,7 +1571,7 @@ const editPositionStructure = async (node: any) => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         popupEditSelectedPosition.value = false;
         await isTreeHasDraft();
       });
@@ -1473,7 +1587,7 @@ const clickHistory = async () => {
   modalHistory.value = true;
   //   rowsHistory.value = rawHistory.value.filter((f: any) => f.id == row.id);
 
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getTreeHistory)
     .then((res) => {
@@ -1499,7 +1613,7 @@ const clickHistory = async () => {
       //   messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/02_organizational/views/ManageReport2.vue b/src/modules/02_organizational/views/ManageReport2.vue
index 2b318d53e..84724cb3d 100644
--- a/src/modules/02_organizational/views/ManageReport2.vue
+++ b/src/modules/02_organizational/views/ManageReport2.vue
@@ -77,6 +77,11 @@
                 <div v-else-if="col.name == 'statusPosition'">
                   {{ col.value ? "ถือครอง" : "ว่าง" }}
                 </div>
+                <div
+                  v-else-if="col.name == 'levelOld' || col.name == 'levelNew'"
+                >
+                  {{ String(col.value) }}
+                </div>
                 <div v-else>
                   {{ col.value }}
                 </div>
@@ -120,8 +125,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, modalError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, modalError } = mixin;
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 
@@ -259,203 +263,6 @@ const columns = ref<any>([
   },
 ]);
 const rows = ref<ResponseTree[]>([]);
-const mockdata = ref<ResponseTree[]>([
-  {
-    no: 1,
-    report2Id: "1",
-    profilePositionId: "1",
-    name: "นายกนก ลายมาก",
-    edu: "ศศ.บ. (รัฐศาสตร์)",
-    posiNumOld: "กบห.1",
-    posiNumNew: "กบห.1",
-    posiOld: "ผู้อำนวยการ",
-    posiNew: "ผู้อำนวยการ",
-    levelOld: "ต้น",
-    levelNew: "ต้น",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 2,
-    report2Id: "2",
-    profilePositionId: "2",
-    name: "นายกน ลามา",
-    edu: "ศศ.บ. (การจัดการทั่วไป)",
-    posiNumOld: "กบห.2",
-    posiNumNew: "กบห.2",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ปฏิบัติการ",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 3,
-    report2Id: "3",
-    profilePositionId: "3",
-    name: "นายกก ลายดี",
-    edu: "ศศ.บ. (การจัดการทั่วไป)",
-    posiNumOld: "กบห.3",
-    posiNumNew: "กบห.3",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ปฏิบัติการ",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 4,
-    report2Id: "4",
-    profilePositionId: "4",
-    name: "นายนก มากหลาย",
-    edu: "ศศ.บ. (การจัดการทั่วไป)",
-    posiNumOld: "กบห.4",
-    posiNumNew: "กบห.4",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ปฏิบัติการ",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 5,
-    report2Id: "5",
-    profilePositionId: "5",
-    name: "นางสมพร เพชรเหลือ",
-    edu: "ศศ.บ. (การจัดการทั่วไป)",
-    posiNumOld: "กบห.5",
-    posiNumNew: "กบห.5",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ชำนาญการ",
-    levelNew: "ชำนาญการพิเศษ",
-    change: "เลื่อนระดับ",
-    statusPosition: true,
-  },
-  {
-    no: 6,
-    report2Id: "6",
-    profilePositionId: "6",
-    name: "นางพร ลายกนก",
-    edu: "ศศ.บ. (การบริหารการศึกษา)",
-    posiNumOld: "กบห.6",
-    posiNumNew: "กบห.6",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ชำนาญการ",
-    change: "เลื่อนระดับ",
-    statusPosition: true,
-  },
-  {
-    no: 7,
-    report2Id: "7",
-    profilePositionId: "7",
-    name: "นางสาวสวย มากมาย",
-    edu: "ศศ.บ. (การบริหารการศึกษา)",
-    posiNumOld: "กบห.7",
-    posiNumNew: "กบห.7",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ปฏิบัติการ",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 8,
-    report2Id: "8",
-    profilePositionId: "8",
-    name: "นายหล่อ ขั้นเทพ",
-    edu: "ศศ.บ. (การบริหารการศึกษา)",
-    posiNumOld: "กบห.8",
-    posiNumNew: "กบห.8",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ชำนาญการ",
-    change: "เลื่อนระดับ",
-    statusPosition: true,
-  },
-  {
-    no: 9,
-    report2Id: "9",
-    profilePositionId: "9",
-    name: "นางแม้นศรี บางแค",
-    edu: "ศศ.บ. (การบริหารการศึกษา)",
-    posiNumOld: "กบห.9",
-    posiNumNew: "กบห.9",
-    posiOld: "เจ้าพนักงานธุรการ",
-    posiNew: "เจ้าพนักงานธุรการ",
-    levelOld: "ปฏิบัติงาน",
-    levelNew: "ชำนาญงาน",
-    change: "เลื่อนระดับ",
-    statusPosition: true,
-  },
-  {
-    no: 10,
-    report2Id: "10",
-    profilePositionId: "10",
-    name: "นายมั่น มากทอง",
-    edu: "ศศ.บ. (การบริหารการศึกษา)",
-    posiNumOld: "กบห.10",
-    posiNumNew: "กบห.10",
-    posiOld: "นักวิชาการเงินและบัญชี",
-    posiNew: "นักวิชาการเงินและบัญชี",
-    levelOld: "ชำนาญการ",
-    levelNew: "ชำนาญการพิเศษ",
-    change: "เลื่อนระดับ",
-    statusPosition: true,
-  },
-  {
-    no: 11,
-    report2Id: "11",
-    profilePositionId: "11",
-    name: "นายผดุง ทองมาก",
-    edu: "ศศ.บ. (รัฐศาสตร์)",
-    posiNumOld: "กบห.11",
-    posiNumNew: "กบห.11",
-    posiOld: "นักวิชาการเงินและบัญชี",
-    posiNew: "นักวิชาการเงินและบัญชี",
-    levelOld: "ชำนาญการ",
-    levelNew: "ชำนาญการ",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 12,
-    report2Id: "12",
-    profilePositionId: "12",
-    name: "นางสาวเปรี้ยว เข็ดฟัน",
-    edu: "ศศ.บ. (รัฐศาสตร์)",
-    posiNumOld: "กบห.13",
-    posiNumNew: "กบห.12",
-    posiOld: "นักวิชาการเงินและบัญชี",
-    posiNew: "นักวิชาการเงินและบัญชี",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ปฏิบัติการ",
-    change: "เปลี่ยนตำแหน่งเลขที่",
-    statusPosition: true,
-  },
-  {
-    no: 13,
-    report2Id: "13",
-    profilePositionId: "13",
-    name: "",
-    edu: "",
-    posiNumOld: "กบห.12",
-    posiNumNew: "กบห.13",
-    posiOld: "นักวิชาการเงินและบัญชี",
-    posiNew: "นักวิชาการเงินและบัญชี",
-    levelOld: "ชำนาญงาน",
-    levelNew: "ชำนาญงาน",
-    change: "เปลี่ยนตำแหน่งเลขที่",
-    statusPosition: false,
-  },
-]);
 
 onMounted(async () => {
   let arVisible: string[] = [];
@@ -469,7 +276,7 @@ onMounted(async () => {
 });
 
 const nodeTree = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -488,7 +295,7 @@ const nodeTree = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -502,7 +309,7 @@ const clickTree = () => {
 };
 
 const onHistory = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.report2HistoryId(selected.value))
     .then((res) => {
@@ -525,13 +332,13 @@ const onHistory = async () => {
       );
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const doSearch = async () => {
   //ทำไว้แล้ว เหลือ ใส่ type
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.report2TreeId(selected.value))
     .then((res) => {
@@ -552,7 +359,10 @@ const doSearch = async () => {
             posiNew: e.posiNew ?? "-",
             levelOld: e.levelOld ?? "-",
             levelNew: e.levelNew ?? "-",
-            change: e.change ?? "-",
+            change:
+              e.report2Id == "00000000-0000-0000-0000-000000000000"
+                ? "ไม่เปลี่ยนแปลง"
+                : "เปลี่ยนแปลง",
             statusPosition: e.statusPosition,
           });
         });
@@ -561,7 +371,7 @@ const doSearch = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -577,7 +387,7 @@ const onConfirm = async () => {
     ok: "ยืนยัน",
     persistent: true,
   }).onOk(async () => {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.report2DoneId(selected.value))
       .then((res) => {
@@ -585,7 +395,7 @@ const onConfirm = async () => {
       })
       .catch((e) => {})
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         await doSearch();
       });
   });
diff --git a/src/modules/02_organizational/views/ManageReport2Add.vue b/src/modules/02_organizational/views/ManageReport2Add.vue
index 5502473cc..43b9bae2b 100644
--- a/src/modules/02_organizational/views/ManageReport2Add.vue
+++ b/src/modules/02_organizational/views/ManageReport2Add.vue
@@ -591,7 +591,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, success, dateToISO } = mixin;
 const id = ref<string>("");
 const myForm = ref<QForm | null>(null); //form data input
 
@@ -669,10 +669,10 @@ const sideWorkOPfilter = ref<DataOption[]>([]);
 const levelOPfilter = ref<DataOption[]>([]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   if (route.params.id != undefined) {
     id.value = route.params.id.toString();
-    showLoader();
+    loaderPage(true);
 
     await fetchGoverment();
     // await fetchAgency();
@@ -685,12 +685,12 @@ onMounted(async () => {
     await fetchLevel();
 
     await fetchData();
-    hideLoader();
+    loaderPage(false);
   }
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.report2Id(id.value))
     .then(async (res) => {
@@ -723,7 +723,7 @@ const fetchData = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -739,7 +739,7 @@ const checkSave = async () => {
 
 const saveData = async () => {
   //   console.log(myData.value);
-  showLoader();
+  loaderPage(true);
   const body: RequestReport2 = {
     organizationShortNameId: myData.value.goverment2,
     organizationOrganizationId: myData.value.agency2,
@@ -760,7 +760,7 @@ const saveData = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -770,7 +770,7 @@ const clickBack = () => {
 
 //รหัสส่วนราชการ
 const fetchGoverment = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -796,12 +796,12 @@ const fetchGoverment = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 const updateGoverment = async (id: string) => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.getPositionMasterPositionNumberId(id))
     .then((res) => {
@@ -890,13 +890,13 @@ const updateGoverment = async (id: string) => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 // //ตำแหน่งเลขที่
 const fetchPositionNum = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.getPositionMasterPositionNumber)
     .then((res) => {
@@ -910,13 +910,13 @@ const fetchPositionNum = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ประเภทตำแหน่ง
 const fetchCategory = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionType)
     .then((res) => {
@@ -930,13 +930,13 @@ const fetchCategory = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ตำแหน่งทางการบริหาร
 const fetchPositionManage = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionExecutive)
     .then((res) => {
@@ -950,13 +950,13 @@ const fetchPositionManage = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ด้านทางบริหาร
 const fetchSideManage = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionExecutiveSide)
     .then((res) => {
@@ -970,13 +970,13 @@ const fetchSideManage = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ตำแหน่งในสายงาน
 const fetchPositionWork = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionPath)
     .then((res) => {
@@ -990,13 +990,13 @@ const fetchPositionWork = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ด้าน/สาขา
 const fetchSideWork = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionSide)
     .then((res) => {
@@ -1010,13 +1010,13 @@ const fetchSideWork = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ระดับตำแหน่ง
 const fetchLevel = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionLevel)
     .then((res) => {
@@ -1030,7 +1030,7 @@ const fetchLevel = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
diff --git a/src/modules/02_organizational/views/ManageReport2History.vue b/src/modules/02_organizational/views/ManageReport2History.vue
index c0460b936..255801559 100644
--- a/src/modules/02_organizational/views/ManageReport2History.vue
+++ b/src/modules/02_organizational/views/ManageReport2History.vue
@@ -351,7 +351,7 @@ const router = useRouter();
 const route = useRoute();
 
 const { loaderPage } = dataStore;
-const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, success, dateToISO } = mixin;
 const id = ref<string>("");
 const previous = ref<boolean>(false);
 const next = ref<boolean>(false);
@@ -360,7 +360,7 @@ const historyHead = ref<ResponseHistoryHead[]>([]);
 const historyData = ref<ResponseHistory[]>([]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   if (route.params.id != undefined) {
     id.value = route.params.id.toString();
 
@@ -386,7 +386,7 @@ const clickPreviousNext = async (page: string) => {
 };
 
 const fetchHistory = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.report2HistoryId(id.value))
     .then((res) => {
@@ -402,7 +402,7 @@ const fetchHistory = async () => {
     })
     .catch((e) => {})
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       if (historyHead.value.length > 1) {
         next.value = true;
         previous.value = false;
@@ -414,7 +414,7 @@ const fetchHistory = async () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(
       config.API.report2HistoryDetailId(
@@ -455,7 +455,7 @@ const fetchData = async () => {
     })
     .catch((e) => {})
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>
diff --git a/src/modules/02_organizational/views/Report.vue b/src/modules/02_organizational/views/Report.vue
index 75716aed3..75426f4da 100644
--- a/src/modules/02_organizational/views/Report.vue
+++ b/src/modules/02_organizational/views/Report.vue
@@ -109,7 +109,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, success, dateToISO } = mixin;
 
 const govermentOP = ref<DataOption[]>([]);
 const govermentOPfilter = ref<DataOption[]>([]);
@@ -117,7 +117,7 @@ const goverment = ref<string>("");
 const tab = ref<string>("audit1");
 
 const fetchOrganizationAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     // .get(config.API.organizationAgency)
     .get(config.API.listOrganizationAgency("หน่วยงาน"))
@@ -137,12 +137,12 @@ const fetchOrganizationAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchOrganizationAgency();
 });
 </script>
diff --git a/src/modules/03_recruiting/components/Address.vue b/src/modules/03_recruiting/components/Address.vue
index 8e0422c57..4ee38e840 100644
--- a/src/modules/03_recruiting/components/Address.vue
+++ b/src/modules/03_recruiting/components/Address.vue
@@ -274,7 +274,7 @@ const subdistrictCOptions = ref<DataOption[]>([]);
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const emit = defineEmits(["update:form"]);
 
 watch(myform, async (count: any, prevCount: any) => {
@@ -319,7 +319,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -381,7 +381,7 @@ const fetchDistrict = async (id: string, position: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -409,7 +409,7 @@ const fetchSubDistrict = async (id: string, position: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/03_recruiting/components/Career.vue b/src/modules/03_recruiting/components/Career.vue
index 58faf3651..902f68346 100644
--- a/src/modules/03_recruiting/components/Career.vue
+++ b/src/modules/03_recruiting/components/Career.vue
@@ -213,15 +213,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  dateThaiRange,
-  modalDelete,
-  modalConfirm,
-  dateToISO,
-  success,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success } = mixin;
 const store = useExamDataStore();
 const { examData, changeExamColumns } = store;
 const id = ref<string>("");
@@ -326,7 +318,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateCareer(candidateId.value))
     .then((res) => {
@@ -344,7 +336,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -423,7 +415,7 @@ const checkDelete = (row: RequestItemsObject) => {
  */
 const clickDeleteRow = async () => {
   if (rawItem.value != null) {
-    showLoader();
+    loaderPage(true);
     await http
       .delete(config.API.candidateAdminCareer(rawItem.value.id))
       .then(() => {
@@ -459,7 +451,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.candidateAdminCareer(candidateId.value), {
       name: location.value,
@@ -484,7 +476,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateAdminCareer(id.value), {
       name: location.value,
diff --git a/src/modules/03_recruiting/components/Document.vue b/src/modules/03_recruiting/components/Document.vue
index 9fc236e10..03ab790a9 100644
--- a/src/modules/03_recruiting/components/Document.vue
+++ b/src/modules/03_recruiting/components/Document.vue
@@ -168,7 +168,7 @@ const name = ref<string>("");
 const files = ref<UploadType[]>([]);
 const file = ref<File[]>([]);
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 
 onMounted(async () => {
   await getData();
@@ -180,7 +180,7 @@ const fileAdd = async (val: any) => {
 };
 
 const getData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateUpload(candidateId.value))
     .then((res) => {
@@ -191,7 +191,7 @@ const getData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -199,7 +199,7 @@ const deleteData = async (id: string) => {
   const params = {
     documentId: id,
   };
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.candidateUpload(candidateId.value), {
       params,
@@ -211,7 +211,7 @@ const deleteData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       await getData();
     });
 };
@@ -223,7 +223,7 @@ const uploadData = async () => {
   });
   const formData = new FormData();
   formData.append("", newFile);
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateUpload(candidateId.value), formData)
     .then((res) => {
@@ -233,7 +233,7 @@ const uploadData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       name.value = "";
       uploader.value.reset();
       await getData();
diff --git a/src/modules/03_recruiting/components/Education.vue b/src/modules/03_recruiting/components/Education.vue
index eb0d3a7fb..6b39a276b 100644
--- a/src/modules/03_recruiting/components/Education.vue
+++ b/src/modules/03_recruiting/components/Education.vue
@@ -240,7 +240,7 @@ const rows = ref<RequestItemsObject[]>([]);
 const route = useRoute();
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const candidateId = ref<string>(route.params.candidateId.toString());
 const filter = ref<string>(""); //search data table
 
@@ -324,7 +324,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateEducation(candidateId.value))
     .then((res) => {
@@ -343,12 +343,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetcheducationLevel = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.educationLevel)
     .then((res) => {
@@ -363,7 +363,7 @@ const fetcheducationLevel = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -444,7 +444,7 @@ const checkDelete = (row: RequestItemsObject) => {
  */
 const clickDeleteRow = async () => {
   if (rawItem.value != null) {
-    showLoader();
+    loaderPage(true);
     await http
       .delete(config.API.candidateAdminEducation(rawItem.value.id))
       .then(() => {
@@ -480,7 +480,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.candidateAdminEducation(candidateId.value), {
       educationLevelId: educationLevelId.value,
@@ -505,7 +505,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateAdminEducation(id.value), {
       educationLevelId: educationLevelId.value,
diff --git a/src/modules/03_recruiting/components/ExamFinished.vue b/src/modules/03_recruiting/components/ExamFinished.vue
index 9957d4694..57a8d2582 100644
--- a/src/modules/03_recruiting/components/ExamFinished.vue
+++ b/src/modules/03_recruiting/components/ExamFinished.vue
@@ -113,7 +113,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+const { messageError, date2Thai } = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const fullName = ref<string>("");
@@ -136,7 +136,7 @@ onMounted(async () => {
 });
 
 const fetchCard = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateCard(props.candidateId))
     .then((res) => {
@@ -178,7 +178,7 @@ const fetchCard = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>
diff --git a/src/modules/03_recruiting/components/Family.vue b/src/modules/03_recruiting/components/Family.vue
index 9954a8924..6dbe2e344 100644
--- a/src/modules/03_recruiting/components/Family.vue
+++ b/src/modules/03_recruiting/components/Family.vue
@@ -302,7 +302,7 @@ const $q = useQuasar();
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const edit = ref<boolean>(true);
 const myform = ref<any>({});
 const route = useRoute();
@@ -323,7 +323,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateFamily(candidateId.value))
     .then((res) => {
@@ -350,7 +350,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/03_recruiting/components/Information.vue b/src/modules/03_recruiting/components/Information.vue
index d88b0b876..ade873016 100644
--- a/src/modules/03_recruiting/components/Information.vue
+++ b/src/modules/03_recruiting/components/Information.vue
@@ -430,8 +430,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, calAge, modalError, success, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, calAge, modalError, success } = mixin;
 const districtOptions = ref<DataOption[]>([]);
 const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
@@ -464,7 +463,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateInformation(candidateId.value))
     .then((res) => {
@@ -495,12 +494,12 @@ const fetchData = async () => {
         keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.family_name;
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchImgData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateProfile(candidateId.value))
     .then((res) => {
@@ -511,7 +510,7 @@ const fetchImgData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -543,7 +542,7 @@ const selectProvince = (val: string) => {
 };
 
 const fetchDistrict = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.listDistrict(id))
     .then((res) => {
@@ -558,7 +557,7 @@ const fetchDistrict = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/03_recruiting/components/Occupation.vue b/src/modules/03_recruiting/components/Occupation.vue
index 9a69cca2e..b9c22a933 100644
--- a/src/modules/03_recruiting/components/Occupation.vue
+++ b/src/modules/03_recruiting/components/Occupation.vue
@@ -283,7 +283,7 @@ const candidateId = ref<string>(route.params.candidateId.toString());
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 
 const emit = defineEmits(["update:form"]);
 
@@ -300,7 +300,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateOccupation(candidateId.value))
     .then((res) => {
@@ -327,7 +327,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/03_recruiting/components/Profile.vue b/src/modules/03_recruiting/components/Profile.vue
index 8ce1e2660..0d70ca2d0 100644
--- a/src/modules/03_recruiting/components/Profile.vue
+++ b/src/modules/03_recruiting/components/Profile.vue
@@ -21,11 +21,7 @@
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
-    <Family
-      :prefixOptions="prefixOptions"
-      :status="status"
-      v-model:form="formFamily"
-    />
+    <Family :prefixOptions="prefixOptions" :status="status" v-model:form="formFamily" />
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
@@ -60,9 +56,9 @@ import Occupation from "@/modules/03_recruiting/components/Occupation.vue";
 import Education from "@/modules/03_recruiting/components/Education.vue";
 import Career from "@/modules/03_recruiting/components/Career.vue";
 import Document from "@/modules/03_recruiting/components/Document.vue";
+import { useDataStore } from "@/stores/data";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useManageDataStore } from "@/modules/01_metadata/store";
 
 const props = defineProps({
   status: {
@@ -88,9 +84,8 @@ const props = defineProps({
 });
 
 const $q = useQuasar();
-
-const store = useManageDataStore();
-const { getPrefix } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
 const prefixOptions = ref<DataOption[]>([]);
 const relationshipOptions = ref<DataOption[]>([]);
 const provinceOptions = ref<DataOption[]>([]);
@@ -99,7 +94,7 @@ const formAddress = ref<any>({});
 const formFamily = ref<any>({});
 const formOccupation = ref<any>({});
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 
 const emit = defineEmits([
   "update:formInformation",
@@ -125,26 +120,34 @@ watch(formOccupation, async (count: Object, prevCount: Object) => {
 });
 
 onMounted(() => {
-  hideLoader();
+  loaderPage(false);
   fetchPrefix();
   fetchRelationship();
   fetchProvince();
 });
 
 const fetchPrefix = async () => {
-  const result = await getPrefix(true, false);
-  const data = result.data;
-  let option: DataOption[] = [];
-  if (data.length > 0) {
-    data.map((r: any) => {
-      option.push({ id: r.id.toString(), name: r.name.toString() });
+  loaderPage(true);
+  await http
+    .get(config.API.prefix)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      prefixOptions.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
     });
-  }
-  prefixOptions.value = option;
 };
 
 const fetchRelationship = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.relationship)
     .then((res) => {
@@ -159,12 +162,12 @@ const fetchRelationship = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchProvince = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.province)
     .then((res) => {
@@ -179,7 +182,7 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>
diff --git a/src/modules/03_recruiting/components/Table.vue b/src/modules/03_recruiting/components/Table.vue
index d247c17cb..4b4016279 100644
--- a/src/modules/03_recruiting/components/Table.vue
+++ b/src/modules/03_recruiting/components/Table.vue
@@ -106,9 +106,9 @@
     :virtual-scroll-sticky-size-start="48"
     dense
     :pagination-label="paginationLabel"
+    :pagination="initialPagination"
+    :rows-per-page-options="[0]"
   >
-    <!-- :pagination="initialPagination"
-    :rows-per-page-options="[0]" -->
     <template v-slot:header="props">
       <q-tr :props="props">
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
diff --git a/src/modules/03_recruiting/components/TableCandidate.vue b/src/modules/03_recruiting/components/TableCandidate.vue
index ef97b299f..e454070d0 100644
--- a/src/modules/03_recruiting/components/TableCandidate.vue
+++ b/src/modules/03_recruiting/components/TableCandidate.vue
@@ -47,7 +47,7 @@
           <q-list style="min-width: 100px">
             <q-item clickable v-close-popup @click="downloadFile()">
               <q-item-section class="text-blue"
-                >ดาวน์โหลดข้อมูลผู้สมัคร(แบบย่อ)</q-item-section
+                >ดาวน์โหลดจัดการรายชื่อผู้สมัคร</q-item-section
               >
             </q-item>
             <q-item clickable v-close-popup @click="downloadFileDetail()">
@@ -155,7 +155,7 @@ const table = ref<any>(null);
 const files = ref<File[]>([]);
 const filterRef = ref<any>(null);
 const examId = ref<string>(route.params.examId.toString());
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -278,7 +278,7 @@ const uploadFile = async () => {
 };
 
 const uploadDataSeat = async () => {
-  showLoader();
+  loaderPage(true);
   const formData = new FormData();
   formData.append("", files.value[0]);
   await http
@@ -290,14 +290,14 @@ const uploadDataSeat = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       files.value = [];
       props.fetchData();
     });
 };
 
 const uploadDataPoint = async () => {
-  showLoader();
+  loaderPage(true);
   const formData = new FormData();
   formData.append("", files.value[0]);
   await http
@@ -310,14 +310,14 @@ const uploadDataPoint = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       files.value = [];
       props.fetchData();
     });
 };
 
 const downloadFile = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamDownload(examId.value), {
       responseType: "blob",
@@ -330,12 +330,12 @@ const downloadFile = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadFileDetail = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamDownloadDetail(examId.value), {
       responseType: "blob",
@@ -348,7 +348,7 @@ const downloadFileDetail = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/03_recruiting/interface/request/Period.ts b/src/modules/03_recruiting/interface/request/Period.ts
index 5bf1bf3b2..679e021b4 100644
--- a/src/modules/03_recruiting/interface/request/Period.ts
+++ b/src/modules/03_recruiting/interface/request/Period.ts
@@ -1,9 +1,9 @@
 //ข้อมูล
 interface RequestPeriodExam {
-  announcementDate: string;
-  announcementEndDate: string;
-  announcementStartDate: string;
-  examDate: string;
+  announcementDate: string | null;
+  announcementEndDate: string | null;
+  announcementStartDate: string | null;
+  examDate: string | null;
   announcementExam: boolean;
   bankExam: RequestPayment[];
   checkDisability: boolean;
@@ -18,51 +18,51 @@ interface RequestPeriodExam {
   organizationCodeName: string;
   organizationId: string;
   organizationName: string;
-  paymentEndDate: string;
+  paymentEndDate: string | null;
   paymentKrungThai: string;
-  paymentStartDate: string;
+  paymentStartDate: string | null;
   positionExam: RequestPosition[];
-  registerEndDate: string;
-  registerStartDate: string;
+  registerEndDate: string | null;
+  registerStartDate: string | null;
   round: number;
   year: number;
   category: string;
 }
 
 interface RequestPeriodCompete {
-  announcementEndDate: string;
-  announcementStartDate: string;
-  examDate: string;
+  announcementEndDate: string | null;
+  announcementStartDate: string | null;
+  examDate: string | null;
   detail: string;
   fee: number;
   id: string;
   name: string;
   note: string;
-  paymentEndDate: string;
-  paymentStartDate: string;
-  registerEndDate: string;
-  registerStartDate: string;
+  paymentEndDate: string | null;
+  paymentStartDate: string | null;
+  registerEndDate: string | null;
+  registerStartDate: string | null;
   order: number;
   year: number;
-  announcementDate: string;
+  announcementDate: string | null;
 }
 
 interface RequestPeriodDisable {
-  announcementEndDate: string;
-  announcementStartDate: string;
-  examDate: string;
+  announcementEndDate: string | null;
+  announcementStartDate: string | null;
+  examDate: string | null;
   detail: string;
   fee: number;
   id: string;
   name: string;
   note: string;
-  paymentEndDate: string;
-  paymentStartDate: string;
-  registerEndDate: string;
-  registerStartDate: string;
+  paymentEndDate: string | null;
+  paymentStartDate: string | null;
+  registerEndDate: string | null;
+  registerStartDate: string | null;
   round: number;
   year: number;
-  announcementDate: string;
+  announcementDate: string | null;
 }
 
 interface RequestPosition {
@@ -71,6 +71,7 @@ interface RequestPosition {
   positionName: string;
   typeId: string;
   typeName: string;
+  highDegree: Boolean;
 }
 
 interface RequestPayment {
diff --git a/src/modules/03_recruiting/interface/response/Period.ts b/src/modules/03_recruiting/interface/response/Period.ts
index a20bc3725..028baf9c9 100644
--- a/src/modules/03_recruiting/interface/response/Period.ts
+++ b/src/modules/03_recruiting/interface/response/Period.ts
@@ -21,11 +21,11 @@ interface ResponsePeriodExam {
   round: number;
   yearly: number;
   fee: number;
-  dateAnnounce: Date;
-  dateAnnouncement: [Date, Date];
-  dateExam: Date;
-  dateRegister: [Date, Date];
-  datePayment: [Date, Date];
+  dateAnnounce: Date | null;
+  dateAnnouncement: [Date, Date] | null;
+  dateExam: Date | null;
+  dateRegister: [Date, Date] | null;
+  datePayment: [Date, Date] | null;
   organizationName: {
     id: string;
     name: string;
@@ -50,6 +50,7 @@ interface ResponsePosition {
     id: string;
     name: string;
   };
+  highDegree: Boolean;
 }
 interface ResponsePayment {
   id: string;
diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index 5656262f3..2dfbdf764 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -18,9 +18,7 @@
       <q-menu>
         <q-list style="min-width: 100px">
           <q-item clickable v-close-popup @click="downloadExam()">
-            <q-item-section class="text-blue"
-              >ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
-            >
+            <q-item-section class="text-blue">ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section>
           </q-item>
           <q-item clickable v-close-popup @click="downloadPassExam()">
             <q-item-section class="text-primary"
@@ -48,7 +46,6 @@
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
-        v-model:pagination="pagination"
         :nornmalData="false"
         :conclude="true"
       >
@@ -102,23 +99,12 @@
           </q-tr>
         </template>
       </Table>
-      <div class="row justify-center q-mt-md">
-        <q-pagination
-          v-model="pagination.page"
-          color="grey-8"
-          :max="pagesNumber"
-          :max-pages="5"
-          size="sm"
-          boundary-links
-          direction-links
-        ></q-pagination>
-      </div>
     </div>
   </q-card>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
 import Table from "@/modules/03_recruiting/components/Table.vue";
@@ -134,7 +120,7 @@ const router = useRouter();
 const route = useRoute();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const year = ref<string>("");
 const round = ref<string>("");
 const name = ref<string>("");
@@ -326,18 +312,8 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const pagesNumber = computed(() => {
-  return Math.ceil(rows.value.length / pagination.value.rowsPerPage);
-});
-
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
@@ -346,7 +322,7 @@ const clickDetail = (examID: string) => {
 };
 
 const downloadExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportExam(importId.value), {
       responseType: "blob",
@@ -362,12 +338,12 @@ const downloadExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadPassExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportPassExam(importId.value), {
       responseType: "blob",
@@ -383,12 +359,12 @@ const downloadPassExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadPassResultExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportPassResultExam(importId.value), {
       responseType: "blob",
@@ -404,12 +380,12 @@ const downloadPassResultExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.getExamResultById(importId.value), {
       examAttribute: "",
@@ -437,7 +413,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>
diff --git a/src/modules/03_recruiting/views/01_compete/DetailEx.vue b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
index 2e0bfe601..45db235f0 100644
--- a/src/modules/03_recruiting/views/01_compete/DetailEx.vue
+++ b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
@@ -1,237 +1,304 @@
 <!-- page:detail page สรรหา -->
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    รายละเอียดของผู้สมัครสอบ {{ examID }} : {{ prefix }}{{ fullname }}
-  </div>
-  <q-card flat bordered class="col-12 row q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-md col-12">
-      <div class="col-xs-12 col-sm-12 col-md-6">
-        <q-card bordered flat class="col-12 q-pa-md">
-          <div class="col-12 q-col-gutter-sm row items-center">
-            <div class="col-12 text-weight-bold">ข้อมูลทั่วไป</div>
-            <div class="col-6 text-grey-7" v-if="profile_id !== null">
-              เลขประจำตัวประชาชน
-            </div>
-            <div class="col-6 text-black" v-if="profile_id !== null">
-              {{ profile_id }}
-            </div>
+	<div class="toptitle text-dark col-12 row items-center">
+		<q-btn
+			icon="mdi-arrow-left"
+			unelevated
+			round
+			dense
+			flat
+			color="primary"
+			class="q-mr-sm"
+			@click="router.go(-1)"
+		/>
+		รายละเอียดของผู้สมัครสอบ {{ examID }} : {{ prefix }}{{ fullname }}
+	</div>
+	<q-card flat bordered class="col-12 row q-mt-sm q-pa-md">
+		<div class="row q-col-gutter-md col-12">
+			<div class="col-xs-12 col-sm-12 col-md-6">
+				<q-card bordered flat class="col-12 q-pa-md">
+					<div class="col-12 q-col-gutter-sm row items-center">
+						<div class="col-12 text-weight-bold">ข้อมูลทั่วไป</div>
+						<div
+							class="col-6 text-grey-7"
+							v-if="profile_id !== null"
+						>
+							เลขประจำตัวประชาชน
+						</div>
+						<div
+							class="col-6 text-black"
+							v-if="profile_id !== null"
+						>
+							{{ profile_id }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="prefix !== null">
-              คำนำหน้านาม
-            </div>
-            <div class="col-6 text-black" v-if="prefix !== null">
-              {{ prefix }}
-            </div>
+						<div class="col-6 text-grey-7" v-if="prefix !== null">
+							คำนำหน้านาม
+						</div>
+						<div class="col-6 text-black" v-if="prefix !== null">
+							{{ prefix }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="fullname !== null">
-              ชื่อ-นามสกุล
-            </div>
-            <div class="col-6 text-black" v-if="fullname !== null">
-              {{ fullname }}
-            </div>
+						<div class="col-6 text-grey-7" v-if="fullname !== null">
+							ชื่อ-นามสกุล
+						</div>
+						<div class="col-6 text-black" v-if="fullname !== null">
+							{{ fullname }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="birthdate !== null">
-              วัน/เดือน/ปี เกิด
-            </div>
-            <div class="col-6 text-black" v-if="birthdate !== null">
-              {{ birthdate }}
-            </div>
+						<div
+							class="col-6 text-grey-7"
+							v-if="birthdate !== null"
+						>
+							วัน/เดือน/ปี เกิด
+						</div>
+						<div class="col-6 text-black" v-if="birthdate !== null">
+							{{ birthdate }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="gender !== null">เพศ</div>
-            <div class="col-6 text-black" v-if="gender !== null">
-              {{ gender }}
-            </div>
+						<div class="col-6 text-grey-7" v-if="gender !== null">
+							เพศ
+						</div>
+						<div class="col-6 text-black" v-if="gender !== null">
+							{{ gender }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="position_name !== null">
-              ตำแหน่งที่สมัคร
-            </div>
-            <div class="col-6 text-black" v-if="position_name !== null">
-              {{ position_name }}
-            </div>
+						<div
+							class="col-6 text-grey-7"
+							v-if="position_name !== null"
+						>
+							ตำแหน่งที่สมัคร
+						</div>
+						<div
+							class="col-6 text-black"
+							v-if="position_name !== null"
+						>
+							{{ position_name }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="university !== null">
-              สถานศึกษา
-            </div>
-            <div class="col-6 text-black" v-if="university !== null">
-              {{ university }}
-            </div>
+						<div
+							class="col-6 text-grey-7"
+							v-if="university !== null"
+						>
+							สถานศึกษา
+						</div>
+						<div
+							class="col-6 text-black"
+							v-if="university !== null"
+						>
+							{{ university }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="degree !== null">
-              วุฒิการศึกษา
-            </div>
-            <div class="col-6 text-black" v-if="degree !== null">
-              {{ degree }}
-            </div>
+						<div class="col-6 text-grey-7" v-if="degree !== null">
+							วุฒิการศึกษา
+						</div>
+						<div class="col-6 text-black" v-if="degree !== null">
+							{{ degree }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="major !== null">
-              สาขาวิชาเอก
-            </div>
-            <div class="col-6 text-black" v-if="major !== null">
-              {{ major }}
-            </div>
+						<div class="col-6 text-grey-7" v-if="major !== null">
+							สาขาวิชาเอก
+						</div>
+						<div class="col-6 text-black" v-if="major !== null">
+							{{ major }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="major !== null">
-              จำนวนครั้งที่สมัครสอบ
-            </div>
-            <div class="col-6 text-black" v-if="major !== null">
-              {{ examCount }}
-            </div>
+						<div class="col-6 text-grey-7" v-if="major !== null">
+							จำนวนครั้งที่สมัครสอบ
+						</div>
+						<div class="col-6 text-black" v-if="major !== null">
+							{{ examCount }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="cert_issuedate !== null">
-              ใบอนุญาตประกอบวิชาชีพ วัน เดือน ปีที่ได้รับ
-            </div>
-            <div class="col-6 text-black" v-if="cert_issuedate !== null">
-              {{ cert_issuedate }}
-            </div>
+						<div
+							class="col-6 text-grey-7"
+							v-if="cert_issuedate !== null"
+						>
+							ใบอนุญาตประกอบวิชาชีพ วัน เดือน ปีที่ได้รับ
+						</div>
+						<div
+							class="col-6 text-black"
+							v-if="cert_issuedate !== null"
+						>
+							{{ cert_issuedate }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="examAttribute !== null">
-              สถานะการคัดกรองคุณสมบัติ
-            </div>
-            <div class="col-6 text-black" v-if="examAttribute !== null">
-              {{ examAttribute }}
-            </div>
-          </div>
-        </q-card>
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-6">
-        <q-card
-          bordered
-          flat
-          class="col-xs-12 col-sm-12 col-md-6 q-px-md q-py-sm full-height"
-        >
-          <div class="col-12 row q-col-gutter-sm">
-            <div class="col-12 text-weight-bold row items-center">
-              ผลการสอบ
-              <q-space />
-              <q-btn
-                color="primary"
-                flat
-                round
-                icon="mdi-download"
-                v-if="examResultinscore === 'ผ่าน'"
-              >
-                <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                <q-menu>
-                  <q-list style="min-width: 100px">
-                    <q-item clickable v-close-popup @click="downloadScore()">
-                      <q-item-section class="text-primary"
-                        >ดาวน์โหลดผลคะแนน</q-item-section
-                      >
-                    </q-item>
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadCertificate()"
-                    >
-                      <q-item-section class="text-blue"
-                        >ดาวน์โหลดเอกสารรับรอง</q-item-section
-                      >
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-              <q-btn
-                v-else
-                color="blue"
-                flat
-                round
-                icon="mdi-download"
-                @click="downloadScore()"
-              >
-                <q-tooltip>ดาวน์โหลดผลคะแนน</q-tooltip>
-              </q-btn>
-            </div>
-            <div class="row items-center q-gutter-y-sm col-12">
-              <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">
-                ประเภท
-              </div>
-              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
-                คะแนนเต็ม
-              </div>
-              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
-                คะแนนที่ได้
-              </div>
-              <div
-                class="col-xs-2 col-sm-2 text-primary text-weight-bold"
-              ></div>
+						<div
+							class="col-6 text-grey-7"
+							v-if="examAttribute !== null"
+						>
+							สถานะการคัดกรองคุณสมบัติ
+						</div>
+						<div
+							class="col-6 text-black"
+							v-if="examAttribute !== null"
+						>
+							{{ examAttribute }}
+						</div>
+					</div>
+				</q-card>
+			</div>
+			<div class="col-xs-12 col-sm-12 col-md-6">
+				<q-card
+					bordered
+					flat
+					class="col-xs-12 col-sm-12 col-md-6 q-px-md q-py-sm full-height"
+				>
+					<div class="col-12 row q-col-gutter-sm">
+						<div class="col-12 text-weight-bold row items-center">
+							ผลการสอบ
+							<q-space />
+							<q-btn
+								color="primary"
+								flat
+								round
+								icon="mdi-download"
+								v-if="examResultinscore === 'ผ่าน'"
+							>
+								<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								<q-menu>
+									<q-list style="min-width: 100px">
+										<q-item
+											clickable
+											v-close-popup
+											@click="downloadScore()"
+										>
+											<q-item-section class="text-primary"
+												>ดาวน์โหลดผลคะแนน</q-item-section
+											>
+										</q-item>
+										<q-item
+											clickable
+											v-close-popup
+											@click="downloadCertificate()"
+										>
+											<q-item-section class="text-blue"
+												>ดาวน์โหลดเอกสารรับรอง</q-item-section
+											>
+										</q-item>
+									</q-list>
+								</q-menu>
+							</q-btn>
+							<q-btn
+								v-else
+								color="blue"
+								flat
+								round
+								icon="mdi-download"
+								@click="downloadScore()"
+							>
+								<q-tooltip>ดาวน์โหลดผลคะแนน</q-tooltip>
+							</q-btn>
+						</div>
+						<div class="row items-center q-gutter-y-sm col-12">
+							<div
+								class="col-xs-4 col-sm-5 text-weight-medium text-grey-7"
+							>
+								ประเภท
+							</div>
+							<div
+								class="col-xs-3 col-sm-2 text-primary text-weight-bold"
+							>
+								คะแนนเต็ม
+							</div>
+							<div
+								class="col-xs-3 col-sm-2 text-primary text-weight-bold"
+							>
+								คะแนนที่ได้
+							</div>
+							<div
+								class="col-xs-2 col-sm-2 text-primary text-weight-bold"
+							></div>
 
-              <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ก</div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreAFull }}
-              </div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreA }}
-              </div>
-              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+							<div class="col-xs-4 col-sm-5 text-grey-7">
+								ภาค ก
+							</div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreAFull }}
+							</div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreA }}
+							</div>
+							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
+								คะแนน
+							</div>
 
-              <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ข</div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreBFull }}
-              </div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreB }}
-              </div>
-              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+							<div class="col-xs-4 col-sm-5 text-grey-7">
+								ภาค ข
+							</div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreBFull }}
+							</div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreB }}
+							</div>
+							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
+								คะแนน
+							</div>
 
-              <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ค</div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreCFull }}
-              </div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreC }}
-              </div>
-              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+							<div class="col-xs-4 col-sm-5 text-grey-7">
+								ภาค ค
+							</div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreCFull }}
+							</div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreC }}
+							</div>
+							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
+								คะแนน
+							</div>
 
-              <div class="col-xs-4 col-sm-5 text-grey-7">รวมทั้งหมด</div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreSumFull }}
-              </div>
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
-                {{ scoreSum }}
-              </div>
-              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+							<div class="col-xs-4 col-sm-5 text-grey-7">
+								รวมทั้งหมด
+							</div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreSumFull }}
+							</div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreSum }}
+							</div>
+							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
+								คะแนน
+							</div>
 
-              <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">
-                ผลการสอบ
-              </div>
-              <div
-                class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1"
-              >
-                <span
-                  :class="
-                    examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'
-                  "
-                  >{{ examResultinscore }}</span
-                >
-              </div>
+							<div
+								class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm"
+							>
+								ผลการสอบ
+							</div>
+							<div
+								class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1"
+							>
+								<span
+									:class="
+										examResultinscore != 'ผ่าน'
+											? 'text-red'
+											: 'text-positive'
+									"
+									>{{ examResultinscore }}</span
+								>
+							</div>
 
-              <div class="col-xs-6 col-sm-5 text-grey-7">ลำดับที่สอบได้</div>
-              <div class="col-xs-6 col-sm-7 q-pr-xs">
-                {{ number }}
-              </div>
+							<div class="col-xs-6 col-sm-5 text-grey-7">
+								ลำดับที่สอบได้
+							</div>
+							<div class="col-xs-6 col-sm-7 q-pr-xs">
+								{{ number }}
+							</div>
 
-              <div class="col-xs-6 col-sm-5 text-grey-7">
-                วันหมดอายุบัญชีสอบแข่งขัน
-              </div>
-              <div class="col-xs-6 col-sm-7 q-pr-xs">
-                {{ score_expired }}
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div>
-    </div>
-  </q-card>
+							<div class="col-xs-6 col-sm-5 text-grey-7">
+								วันหมดอายุบัญชีสอบแข่งขัน
+							</div>
+							<div class="col-xs-6 col-sm-7 q-pr-xs">
+								{{ score_expired }}
+							</div>
+						</div>
+					</div>
+				</q-card>
+			</div>
+		</div>
+	</q-card>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
@@ -269,7 +336,7 @@ const examCount = ref<string>("");
 const number = ref<string>("");
 const score_expired = ref<string>("");
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const examID = ref<string>("62150001");
 const prefix = ref<string>("นาย");
 const fullname = ref<string>("เกียรติศักดิ์ บัณฑิต");
@@ -277,91 +344,95 @@ const importId = ref<string>(route.params.id as string); // Period Import Id
 const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
 
 onMounted(async () => {
-  await fetchData();
+	await fetchData();
 });
 
 const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.getExamDetail(importId.value, examId.value))
-    .then((res) => {
-      let data = res.data.result;
+	loaderPage(true);
+	await http
+		.get(config.API.getExamDetail(importId.value, examId.value))
+		.then((res) => {
+			let data = res.data.result;
 
-      profile_id.value = data.profileID;
-      examID.value = data.examID;
-      prefix.value = data.prefix;
-      fullname.value = data.fullName;
-      birthdate.value = data.dateOfBirth;
-      gender.value = data.gender;
-      degree.value = data.degree;
-      major.value = data.major;
-      university.value = data.university;
-      position_name.value = data.positionName;
-      cert_issuedate.value = data.certificateIssueDate;
-      examAttribute.value = data.examAttribute;
-      number.value = data.number;
-      examCount.value = data.examCount;
-      score_expired.value = data.scoreExpire;
-      if (data.scoreResult != null) {
-        scoreAFull.value = data.scoreResult.scoreAFull;
-        scoreA.value = data.scoreResult.scoreA;
-        scoreBFull.value = data.scoreResult.scoreBFull;
-        scoreB.value = data.scoreResult.scoreB;
-        scoreCFull.value = data.scoreResult.scoreCFull;
-        scoreC.value = data.scoreResult.scoreC;
-        scoreSumFull.value = data.scoreResult.scoreSumFull;
-        scoreSum.value = data.scoreResult.scoreSum;
-        examResultinscore.value = data.scoreResult.examResult;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+			profile_id.value = data.profileID;
+			examID.value = data.examID;
+			prefix.value = data.prefix;
+			fullname.value = data.fullName;
+			birthdate.value = data.dateOfBirth;
+			gender.value = data.gender;
+			degree.value = data.degree;
+			major.value = data.major;
+			university.value = data.university;
+			position_name.value = data.positionName;
+			cert_issuedate.value = data.certificateIssueDate;
+			examAttribute.value = data.examAttribute;
+			number.value = data.number;
+			examCount.value = data.examCount;
+			score_expired.value = data.scoreExpire;
+			if (data.scoreResult != null) {
+				scoreAFull.value = data.scoreResult.scoreAFull;
+				scoreA.value = data.scoreResult.scoreA;
+				scoreBFull.value = data.scoreResult.scoreBFull;
+				scoreB.value = data.scoreResult.scoreB;
+				scoreCFull.value = data.scoreResult.scoreCFull;
+				scoreC.value = data.scoreResult.scoreC;
+				scoreSumFull.value = data.scoreResult.scoreSumFull;
+				scoreSum.value = data.scoreResult.scoreSum;
+				examResultinscore.value = data.scoreResult.examResult;
+			}
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 const downloadScore = async () => {
-  showLoader();
-  await http
-    .get(config.API.downloadScoreReport(importId.value, examId.value), {
-      responseType: "blob",
-    })
-    .then((res) => {
-      var a = document.createElement("a");
-      a.href = URL.createObjectURL(res.data);
-      a.download = `ผลคะแนน_${examId.value}.pdf`;
-      // start download
-      a.click();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	loaderPage(true);
+	await http
+		.get(config.API.downloadScoreReport(importId.value, examId.value), {
+			responseType: "blob",
+		})
+		.then((res) => {
+			var a = document.createElement("a");
+			a.href = URL.createObjectURL(res.data);
+			a.download = `ผลคะแนน_${examId.value}.pdf`;
+			// start download
+			a.click();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 const downloadCertificate = async () => {
-  showLoader();
-  await http
-    .get(config.API.downloadExamReport(importId.value, examId.value, 2), {
-      responseType: "blob",
-    })
-    .then((res) => {
-      var a = document.createElement("a");
-      a.href = URL.createObjectURL(res.data);
-      a.download = `เอกสารรับรอง_${examId.value}.pdf`;
-      // start download
-      a.click();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	loaderPage(true);
+	let type = degree.value.includes("บัณฑิต") ? 2 : 1;
+	await http
+		.get(
+			config.API.downloadExamReport(importId.value, examId.value, type),
+			{
+				responseType: "blob",
+			}
+		)
+		.then((res) => {
+			var a = document.createElement("a");
+			a.href = URL.createObjectURL(res.data);
+			a.download = `เอกสารรับรอง_${examId.value}.pdf`;
+			// start download
+			a.click();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 </script>
 
diff --git a/src/modules/03_recruiting/views/01_compete/Period.vue b/src/modules/03_recruiting/views/01_compete/Period.vue
index 933d99932..8b5a2528e 100644
--- a/src/modules/03_recruiting/views/01_compete/Period.vue
+++ b/src/modules/03_recruiting/views/01_compete/Period.vue
@@ -316,10 +316,7 @@
   <q-dialog v-model="modalCandidate" persistent>
     <q-card style="width: 600px">
       <q-form ref="myFormScore">
-        <DialogHeader
-          :tittle="textTittleCandidate"
-          :close="clickCloseCandidate"
-        />
+        <DialogHeader :tittle="textTittleCandidate" :close="clickCloseCandidate" />
         <q-separator />
         <q-card-section>
           <div class="col-12 row items-center q-col-gutter-sm">
@@ -382,7 +379,7 @@ const name = ref<string>("");
 const year = ref<number>(new Date().getFullYear() + 543);
 const order = ref<number>(1);
 const mixin = useCounterMixin();
-const { success, dateToISO, dateText, showLoader, hideLoader } = mixin;
+const { success, dateToISO, dateText } = mixin;
 const files = ref<any>(null);
 const files_score = ref<any>(null);
 const files_candidate = ref<any>(null);
@@ -554,7 +551,7 @@ const visibleColumnsHistory = ref<String[]>([
 ]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
@@ -567,7 +564,7 @@ const textDate = (value: Date) => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getCandidates)
     .then((res) => {
@@ -589,7 +586,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -623,7 +620,7 @@ const clickEditPeriod = (id: string) => {
 
 const clickHistory = async (id: string) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getImportHistory(id))
     .then((res) => {
@@ -652,7 +649,7 @@ const clickHistory = async (id: string) => {
       statusCode.value = e.response.data.status;
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -667,7 +664,7 @@ const clickDelete = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.deleteCandidates(id))
         .then((res) => {
@@ -678,7 +675,7 @@ const clickDelete = (id: string) => {
           messageError($q, e);
         })
         .finally(() => {
-          hideLoader();
+          loaderPage(false);
         });
     })
     .onCancel(() => {})
@@ -707,7 +704,7 @@ const clickCloseCandidate = async () => {
 const checkSaveCandidate = async () => {
   const fd = new FormData();
   fd.append("attachment", files_candidate.value[0]);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.uploadCandidates(selected_row_id.value), fd)
     .then((res) => {
@@ -720,14 +717,14 @@ const checkSaveCandidate = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const checkSaveScore = async () => {
   const fd = new FormData();
   fd.append("attachment", files_score.value[0]);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.saveScores(selected_row_id.value), fd)
     .then((res) => {
@@ -740,7 +737,7 @@ const checkSaveScore = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -750,7 +747,7 @@ const checkSave = async () => {
   fd.append("year", year.value.toString());
   fd.append("order", order.value.toString());
   fd.append("name", name.value);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.saveCandidates, fd)
     .then((res) => {
@@ -762,7 +759,7 @@ const checkSave = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>
diff --git a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
index ec4009d6b..9fe708ead 100644
--- a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
@@ -112,8 +112,9 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateExam)"
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -149,8 +150,13 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="dateThaiRange(dateAnnouncement)"
+                  :model-value="
+                    dateAnnouncement != null
+                      ? dateThaiRange(dateAnnouncement)
+                      : null
+                  "
                   :label="`${'วันที่ประกาศ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -186,8 +192,11 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="dateThaiRange(dateRegister)"
+                  :model-value="
+                    dateRegister != null ? dateThaiRange(dateRegister) : null
+                  "
                   :label="`${'วันที่สมัคร'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สมัคร'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -223,8 +232,11 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="dateThaiRange(datePayment)"
+                  :model-value="
+                    datePayment != null ? dateThaiRange(datePayment) : null
+                  "
                   :label="`${'วันที่ชำระเงิน'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -260,8 +272,11 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateAnnounce)"
+                  :model-value="
+                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                  "
                   :label="`${'วันประกาศผลสอบ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -669,8 +684,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, notifyError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, notifyError } = mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -679,11 +693,11 @@ const announcementExam = ref<boolean>(true);
 const fee = ref<number>(0);
 const round = ref<number>(1);
 const yearly = ref<number>(new Date().getFullYear());
-const dateRegister = ref<[Date, Date]>([new Date(), new Date()]); //วันที่สมัคร
-const datePayment = ref<[Date, Date]>([new Date(), new Date()]); //วันที่จ่ายเงิน
-const dateAnnouncement = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ประกาศ
-const dateExam = ref<Date>(new Date()); //วันที่สอบ
-const dateAnnounce = ref<Date>(new Date()); //วันที่ประกาศผล
+const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
+const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
+const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
+const dateExam = ref<Date | null>(null); //วันที่สอบ
+const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
 const positionPathOptions = ref<DataOption[]>([]);
 const organizationShortName = ref<DataOption>({ id: "", name: "" });
 const organizationName = ref<DataOption>({ id: "", name: "" });
@@ -766,7 +780,7 @@ watch(organizationName, (count: DataOption, prevCount: DataOption) => {
 });
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   if (route.params.id != undefined) {
     edit.value = true;
     id.value = route.params.id.toString();
@@ -781,7 +795,7 @@ const clickBack = () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getPeriodById(id.value))
     .then((res) => {
@@ -794,22 +808,27 @@ const fetchData = async () => {
       round.value = data.order;
       yearly.value = data.year;
       fee.value = data.fee;
-      dateAnnouncement.value = [
-        new Date(data.announcementStartDate),
-        new Date(data.announcementEndDate),
-      ];
-      dateExam.value = new Date(data.examDate);
-      dateRegister.value = [
-        new Date(data.registerStartDate),
-        new Date(data.registerEndDate),
-      ];
-      datePayment.value = [
-        new Date(data.paymentStartDate),
-        new Date(data.paymentEndDate),
-      ];
+      dateAnnouncement.value =
+        data.announcementStartDate != null && data.announcementEndDate != null
+          ? [
+              new Date(data.announcementStartDate),
+              new Date(data.announcementEndDate),
+            ]
+          : null;
+      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
+      dateRegister.value =
+        data.registerStartDate != null && data.registerEndDate != null
+          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
+          : null;
+      datePayment.value =
+        data.paymentStartDate != null && data.paymentEndDate != null
+          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
+          : null;
+
       editor.value = data.detail;
       note.value = data.note;
-      dateAnnounce.value = new Date(data.announcementDate);
+      dateAnnounce.value =
+        data.announcementDate != null ? new Date(data.announcementDate) : null;
 
       fileDocs.value = files;
       fileImgs.value = images;
@@ -818,7 +837,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -845,7 +864,7 @@ const uploadDocData = async () => {
     fileDocDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodRecruitDoc(id.value), formData)
       .then((res) => {})
@@ -853,7 +872,7 @@ const uploadDocData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         success($q, "บันทึกข้อมูลสำเร็จ");
         clickBack();
       });
@@ -869,7 +888,7 @@ const uploadImgData = async () => {
     fileImgDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodRecruitImg(id.value), formData)
       .then((res) => {})
@@ -877,7 +896,7 @@ const uploadImgData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
@@ -923,27 +942,38 @@ const checkSave = async () => {
 
 const sendData = () => {
   const valueData: RequestPeriodCompete = {
-    announcementEndDate: dateToISO(dateAnnouncement.value[1]),
-    announcementStartDate: dateToISO(dateAnnouncement.value[0]),
-    examDate: dateToISO(dateExam.value),
+    announcementEndDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[1])
+        : null,
+    announcementStartDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[0])
+        : null,
+    examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
     detail: editor.value,
     fee: fee.value,
     id: "",
     name: name.value,
     note: note.value,
-    paymentEndDate: dateToISO(datePayment.value[1]),
-    paymentStartDate: dateToISO(datePayment.value[0]),
-    registerEndDate: dateToISO(dateRegister.value[1]),
-    registerStartDate: dateToISO(dateRegister.value[0]),
+    paymentEndDate:
+      datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
+    paymentStartDate:
+      datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
+    registerEndDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
+    registerStartDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
     order: round.value,
     year: yearly.value,
-    announcementDate: dateToISO(dateAnnounce.value),
+    announcementDate:
+      dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
   };
   return valueData;
 };
 
 const deleteDocData = async (docId: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.periodDeleteDoc(docId))
     .then(async () => {
@@ -953,12 +983,12 @@ const deleteDocData = async (docId: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const deleteImgData = async (docId: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.periodDeleteImg(docId))
     .then(async () => {
@@ -968,12 +998,12 @@ const deleteImgData = async (docId: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const addData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.savePeriod, sendData())
     .then(async (res) => {
@@ -986,12 +1016,12 @@ const addData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const editData = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.editPeriod(id), sendData())
     .then(async () => {
@@ -1002,7 +1032,7 @@ const editData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
index 4439ed10f..66d0f4751 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
@@ -129,7 +129,7 @@ const pass = ref<number>(0);
 const notpass = ref<number>(0);
 const importId = ref<string>(route.params.id as string); // Period Import Id
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([
   "examID",
@@ -317,12 +317,12 @@ const clickDetail = (examID: string) => {
 };
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
 const downloadExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportDisableExam(importId.value), {
       responseType: "blob",
@@ -338,12 +338,12 @@ const downloadExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadPassExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportDisablePassExam(importId.value), {
       responseType: "blob",
@@ -359,12 +359,12 @@ const downloadPassExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadPassResultExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportDisablePassResultExam(importId.value), {
       responseType: "blob",
@@ -380,12 +380,12 @@ const downloadPassResultExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.getDisableExamResultById(importId.value), {
       examAttribute: "",
@@ -416,7 +416,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
index 12046592e..402f654b5 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
@@ -26,16 +26,12 @@
               {{ profile_id }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="prefix !== null">
-              คำนำหน้านาม
-            </div>
+            <div class="col-6 text-grey-7" v-if="prefix !== null">คำนำหน้านาม</div>
             <div class="col-6 text-black" v-if="prefix !== null">
               {{ prefix }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="fullname !== null">
-              ชื่อ-นามสกุล
-            </div>
+            <div class="col-6 text-grey-7" v-if="fullname !== null">ชื่อ-นามสกุล</div>
             <div class="col-6 text-black" v-if="fullname !== null">
               {{ fullname }}
             </div>
@@ -59,23 +55,17 @@
               {{ position_name }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="university !== null">
-              สถานศึกษา
-            </div>
+            <div class="col-6 text-grey-7" v-if="university !== null">สถานศึกษา</div>
             <div class="col-6 text-black" v-if="university !== null">
               {{ university }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="degree !== null">
-              วุฒิการศึกษา
-            </div>
+            <div class="col-6 text-grey-7" v-if="degree !== null">วุฒิการศึกษา</div>
             <div class="col-6 text-black" v-if="degree !== null">
               {{ degree }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="major !== null">
-              สาขาวิชาเอก
-            </div>
+            <div class="col-6 text-grey-7" v-if="major !== null">สาขาวิชาเอก</div>
             <div class="col-6 text-black" v-if="major !== null">
               {{ major }}
             </div>
@@ -128,11 +118,7 @@
                         >ดาวน์โหลดผลคะแนน</q-item-section
                       >
                     </q-item>
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadCertificate()"
-                    >
+                    <q-item clickable v-close-popup @click="downloadCertificate()">
                       <q-item-section class="text-blue"
                         >ดาวน์โหลดเอกสารรับรอง</q-item-section
                       >
@@ -152,18 +138,12 @@
               </q-btn>
             </div>
             <div class="row items-center q-gutter-y-sm col-12">
-              <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">
-                ประเภท
-              </div>
-              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
-                คะแนนเต็ม
-              </div>
+              <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">ประเภท</div>
+              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">คะแนนเต็ม</div>
               <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
                 คะแนนที่ได้
               </div>
-              <div
-                class="col-xs-2 col-sm-2 text-primary text-weight-bold"
-              ></div>
+              <div class="col-xs-2 col-sm-2 text-primary text-weight-bold"></div>
 
               <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ก</div>
               <div class="col-xs-3 col-sm-2 q-pr-xs">
@@ -201,16 +181,10 @@
               </div>
               <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
 
-              <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">
-                ผลการสอบ
-              </div>
-              <div
-                class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1"
-              >
+              <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">ผลการสอบ</div>
+              <div class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1">
                 <span
-                  :class="
-                    examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'
-                  "
+                  :class="examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'"
                   >{{ examResultinscore }}</span
                 >
               </div>
@@ -248,7 +222,7 @@ const dataStore = useDataStore();
 const router = useRouter();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const { loaderPage } = dataStore;
 const date = ref<any>();
 const profile_id = ref<string>("");
@@ -289,7 +263,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getDisableExamDetail(importId.value, examId.value))
     .then((res) => {
@@ -329,12 +303,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadScore = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.downloadDisableScoreReport(importId.value, examId.value), {
       responseType: "blob",
@@ -350,19 +324,16 @@ const downloadScore = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadCertificate = async () => {
-  showLoader();
+  loaderPage(true);
   await http
-    .get(
-      config.API.downloadDisableExamReport(importId.value, examId.value, 2),
-      {
-        responseType: "blob",
-      }
-    )
+    .get(config.API.downloadDisableExamReport(importId.value, examId.value, 2), {
+      responseType: "blob",
+    })
     .then((res) => {
       var a = document.createElement("a");
       a.href = URL.createObjectURL(res.data);
@@ -374,7 +345,7 @@ const downloadCertificate = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
index 14b8aa02d..61a595875 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
@@ -382,7 +382,7 @@ const name = ref<string>("");
 const year = ref<number>(new Date().getFullYear() + 543);
 const round = ref<number>(1);
 const mixin = useCounterMixin();
-const { success, dateText, messageError, showLoader, hideLoader } = mixin;
+const { success, dateText, messageError } = mixin;
 const files = ref<any>(null);
 const files_score = ref<any>(null);
 const files_candidate = ref<any>(null);
@@ -549,7 +549,7 @@ const visibleColumnsHistory = ref<String[]>([
 ]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
@@ -570,7 +570,7 @@ const textDate = (value: Date) => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getDisableCandidates)
     .then((res) => {
@@ -592,7 +592,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -618,7 +618,7 @@ const clickEditPeriod = (id: string) => {
 
 const clickHistory = async (id: string) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getDisableImportHistory(id))
     .then((res) => {
@@ -644,7 +644,7 @@ const clickHistory = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -659,7 +659,7 @@ const clickDelete = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.deleteDisableCandidates(id))
         .then((res) => {
@@ -670,7 +670,7 @@ const clickDelete = (id: string) => {
           messageError($q, e);
         })
         .finally(() => {
-          hideLoader();
+          loaderPage(false);
         });
     })
     .onCancel(() => {})
@@ -699,7 +699,7 @@ const clickCloseCandidate = async () => {
 const checkSaveCandidate = async () => {
   const fd = new FormData();
   fd.append("attachment", files_candidate.value[0]);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.uploadDisableCandidates(selected_row_id.value), fd)
     .then((res) => {
@@ -712,14 +712,14 @@ const checkSaveCandidate = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const checkSaveScore = async () => {
   const fd = new FormData();
   fd.append("attachment", files_score.value[0]);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.saveDisableScores(selected_row_id.value), fd)
     .then((res) => {
@@ -732,7 +732,7 @@ const checkSaveScore = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -742,7 +742,7 @@ const checkSave = async () => {
   fd.append("year", year.value.toString());
   fd.append("round", round.value.toString());
   fd.append("name", name.value);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.saveDisableCandidates, fd)
     .then((res) => {
@@ -754,7 +754,7 @@ const checkSave = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
index 2a95833ff..ab201af97 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
@@ -115,8 +115,9 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateExam)"
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -154,6 +155,7 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateAnnouncement)"
                   :label="`${'วันที่ประกาศ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -191,6 +193,7 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateRegister)"
                   :label="`${'วันที่สมัคร'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สมัคร'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -228,6 +231,7 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(datePayment)"
                   :label="`${'วันที่ชำระเงิน'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -263,8 +267,11 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateAnnounce)"
+                  :model-value="
+                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                  "
                   :label="`${'วันประกาศผลสอบ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -671,15 +678,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const {
-  date2Thai,
-  success,
-  dateToISO,
-  notifyError,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, success, dateToISO, notifyError, messageError } = mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -688,11 +687,11 @@ const announcementExam = ref<boolean>(true);
 const fee = ref<number>(0);
 const round = ref<number>(1);
 const yearly = ref<number>(new Date().getFullYear());
-const dateRegister = ref<[Date, Date]>([new Date(), new Date()]); //วันที่สมัคร
-const datePayment = ref<[Date, Date]>([new Date(), new Date()]); //วันที่จ่ายเงิน
-const dateAnnouncement = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ประกาศ
-const dateExam = ref<Date>(new Date()); //วันที่สอบ
-const dateAnnounce = ref<Date>(new Date()); //วันที่ประกาศผล
+const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
+const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
+const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
+const dateExam = ref<Date | null>(null); //วันที่สอบ
+const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
 const positionPathOptions = ref<DataOption[]>([]);
 const organizationShortName = ref<DataOption>({ id: "", name: "" });
 const organizationName = ref<DataOption>({ id: "", name: "" });
@@ -727,7 +726,7 @@ onMounted(async () => {
   if (route.params.id != undefined) {
     edit.value = true;
     id.value = route.params.id.toString();
-    hideLoader();
+    loaderPage(false);
     await fetchData();
   } else {
     edit.value = false;
@@ -739,7 +738,7 @@ const clickBack = () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getDisablePeriodById(id.value))
     .then((res) => {
@@ -749,22 +748,26 @@ const fetchData = async () => {
       round.value = data.round;
       yearly.value = data.year;
       fee.value = data.fee;
-      dateAnnouncement.value = [
-        new Date(data.announcementStartDate),
-        new Date(data.announcementEndDate),
-      ];
-      dateExam.value = new Date(data.examDate);
-      dateRegister.value = [
-        new Date(data.registerStartDate),
-        new Date(data.registerEndDate),
-      ];
-      datePayment.value = [
-        new Date(data.paymentStartDate),
-        new Date(data.paymentEndDate),
-      ];
+      dateAnnouncement.value =
+        data.announcementStartDate != null && data.announcementEndDate != null
+          ? [
+              new Date(data.announcementStartDate),
+              new Date(data.announcementEndDate),
+            ]
+          : null;
+      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
+      dateRegister.value =
+        data.registerStartDate != null && data.registerEndDate != null
+          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
+          : null;
+      datePayment.value =
+        data.paymentStartDate != null && data.paymentEndDate != null
+          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
+          : null;
       editor.value = data.detail;
       note.value = data.note;
-      dateAnnounce.value = new Date(data.announcementDate);
+      dateAnnounce.value =
+        data.announcementDate != null ? new Date(data.announcementDate) : null;
       fileDocs.value = data.documents;
       fileImgs.value = data.images;
     })
@@ -772,7 +775,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -796,27 +799,38 @@ const checkSave = async () => {
 
 const sendData = () => {
   const valueData: RequestPeriodDisable = {
-    announcementEndDate: dateToISO(dateAnnouncement.value[1]),
-    announcementStartDate: dateToISO(dateAnnouncement.value[0]),
-    examDate: dateToISO(dateExam.value),
+    announcementEndDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[1])
+        : null,
+    announcementStartDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[0])
+        : null,
+    examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
     detail: editor.value,
     fee: fee.value,
     id: "",
     name: name.value,
     note: note.value,
-    paymentEndDate: dateToISO(datePayment.value[1]),
-    paymentStartDate: dateToISO(datePayment.value[0]),
-    registerEndDate: dateToISO(dateRegister.value[1]),
-    registerStartDate: dateToISO(dateRegister.value[0]),
+    paymentEndDate:
+      datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
+    paymentStartDate:
+      datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
+    registerEndDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
+    registerStartDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
     round: round.value,
     year: yearly.value,
-    announcementDate: dateToISO(dateAnnounce.value),
+    announcementDate:
+      dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
   };
   return valueData;
 };
 
 const addData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.saveDisablePeriod, sendData())
     .then(async (res) => {
@@ -831,12 +845,12 @@ const addData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const editData = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.editDisablePeriod(id), sendData())
     .then(async () => {
@@ -849,7 +863,7 @@ const editData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -876,7 +890,7 @@ const uploadImgData = async () => {
     fileImgDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodExamImg(id.value), formData)
       .then((res) => {})
@@ -884,7 +898,7 @@ const uploadImgData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
@@ -893,7 +907,7 @@ const deleteDocData = async (docId: string) => {
   const params = {
     documentId: docId,
   };
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.periodExamDoc(id.value.toString()), {
       params,
@@ -906,7 +920,7 @@ const deleteDocData = async (docId: string) => {
     })
     .finally(async () => {
       await fetchData();
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -937,7 +951,7 @@ const uploadDocData = async () => {
     fileDocDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodExamDoc(id.value), formData)
       .then((res) => {})
@@ -945,7 +959,7 @@ const uploadDocData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   } else {
     clickBack();
@@ -956,7 +970,7 @@ const uploadDocData = async () => {
  * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
  * @param val ช่วงวันที่
  */
-const dateThaiRange = (val: [Date, Date]) => {
+const dateThaiRange = (val: [Date, Date] | null) => {
   if (val === null) {
     return "";
   } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
diff --git a/src/modules/03_recruiting/views/02_qualify/ExamForm.vue b/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
index f5a02f5bc..1f8ee5efa 100644
--- a/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
+++ b/src/modules/03_recruiting/views/02_qualify/ExamForm.vue
@@ -145,7 +145,7 @@ const { loaderPage } = dataStore;
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { success, dateToISO, messageError, showLoader, hideLoader } = mixin;
+const { success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const examId = ref<string>(route.params.examId.toString());
 const candidateId = ref<string>(route.params.candidateId.toString());
@@ -163,7 +163,7 @@ onMounted(async () => {
 });
 
 const fetchStatus = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateId(candidateId.value))
     .then((res) => {
@@ -174,12 +174,12 @@ const fetchStatus = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const confirm = async (status: boolean, reason: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateCheckRegister(candidateId.value), {
       status: status,
@@ -190,14 +190,14 @@ const confirm = async (status: boolean, reason: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       success($q, "ตรวจสอบข้อมูลสำเร็จ");
       router.push(`/qualify/manage/${examId.value}`);
     });
 };
 
 const reject = async (reason: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateRejectRegister(candidateId.value), {
       reason: reason,
@@ -207,7 +207,7 @@ const reject = async (reason: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       success($q, "ตรวจสอบข้อมูลสำเร็จ");
       router.push(`/qualify/manage/${examId.value}`);
     });
@@ -253,7 +253,7 @@ const clickSave = async () => {
                       type.value = defaultOccupation.value.employee;
                     if (defaultOccupation.value.status == "other")
                       type.value = defaultOccupation.value.other;
-                    showLoader();
+                    loaderPage(true);
                     await http
                       .post(config.API.candidateId(candidateId.value), {
                         prefixId: defaultInformation.value.prefixId,
@@ -329,7 +329,7 @@ const clickSave = async () => {
                         messageError($q, e);
                       })
                       .finally(async () => {
-                        hideLoader();
+                        loaderPage(false);
                       });
                   }
                 });
diff --git a/src/modules/03_recruiting/views/02_qualify/Manage.vue b/src/modules/03_recruiting/views/02_qualify/Manage.vue
index c3556e0b1..3c2d2f50e 100644
--- a/src/modules/03_recruiting/views/02_qualify/Manage.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Manage.vue
@@ -65,7 +65,7 @@ const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError } = mixin;
 const rows = ref<ResponsePeriodExam[]>([]);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
@@ -163,12 +163,12 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamType("exam"))
     .then((res) => {
@@ -184,20 +184,24 @@ const fetchData = async () => {
           yearly: r.year,
           fee: r.fee,
           announcementExam: r.announcementExam,
-          dateAnnounce: new Date(r.announcementDate),
-          dateAnnouncement: [
-            new Date(r.announcementStartDate),
-            new Date(r.announcementEndDate),
-          ],
-          dateRegister: [
-            new Date(r.registerStartDate),
-            new Date(r.registerEndDate),
-          ],
-          dateExam: new Date(r.examDate),
-          datePayment: [
-            new Date(r.paymentStartDate),
-            new Date(r.paymentEndDate),
-          ],
+          dateAnnounce:
+            r.announcementDate !== null ? new Date(r.announcementDate) : null,
+          dateAnnouncement:
+            r.announcementStartDate !== null && r.announcementEndDate !== null
+              ? [
+                  new Date(r.announcementStartDate),
+                  new Date(r.announcementEndDate),
+                ]
+              : null,
+          dateRegister:
+            r.registerStartDate !== null && r.registerEndDate !== null
+              ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
+              : null,
+          dateExam: r.examDate !== null ? new Date(r.examDate) : null,
+          datePayment:
+            r.paymentStartDate !== null && r.paymentEndDate !== null
+              ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
+              : null,
           organizationName: {
             id: r.organizationId,
             name: r.organizationName,
@@ -219,7 +223,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/03_recruiting/views/02_qualify/Payment.vue b/src/modules/03_recruiting/views/02_qualify/Payment.vue
index 36d87d3d0..3891cea5f 100644
--- a/src/modules/03_recruiting/views/02_qualify/Payment.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Payment.vue
@@ -288,7 +288,7 @@ const fee = ref<number>();
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { success, messageError, showLoader, hideLoader } = mixin;
+const { success, messageError } = mixin;
 const route = useRoute();
 const examId = ref<string>(route.params.examId.toString());
 const candidateId = ref<string>(route.params.candidateId.toString());
@@ -308,13 +308,13 @@ const props = defineProps({
 });
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchPaymentExam();
   await fetchData();
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidatePayment(candidateId.value))
     .then((res) => {
@@ -325,12 +325,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchPaymentExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamPayment(examId.value))
     .then((res) => {
@@ -342,12 +342,12 @@ const fetchPaymentExam = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const confirm = async (status: boolean, reason: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateCheckPayment(candidateId.value), {
       status: status,
@@ -358,7 +358,7 @@ const confirm = async (status: boolean, reason: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       success($q, "ตรวจสอบข้อมูลชำระเงินสำเร็จ");
       router.push(`/qualify/manage/${examId.value}`);
     });
diff --git a/src/modules/03_recruiting/views/02_qualify/Period.vue b/src/modules/03_recruiting/views/02_qualify/Period.vue
index 231628f0e..c8a16735e 100644
--- a/src/modules/03_recruiting/views/02_qualify/Period.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Period.vue
@@ -102,14 +102,7 @@ const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
-const {
-  date2Thai,
-  success,
-  typeCategoryExam,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, success, typeCategoryExam, messageError } = mixin;
 const filter = ref<string>(""); //search data table
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
@@ -230,12 +223,12 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamType("all"))
     .then((res) => {
@@ -255,6 +248,7 @@ const fetchData = async () => {
                 id: r.typeId,
                 name: r.typeName,
               },
+              highDegree: r.highDegree,
             });
           });
           const bankData: ResponsePayment[] = [];
@@ -268,7 +262,8 @@ const fetchData = async () => {
           });
           result.push({
             id: r.id,
-            dateAnnounce: new Date(r.announcementDate),
+            dateAnnounce:
+              r.announcementDate !== null ? new Date(r.announcementDate) : null,
             announcementExam: r.announcementExam,
             name: r.name,
             checkDocument: r.checkDocument,
@@ -276,19 +271,22 @@ const fetchData = async () => {
             round: r.round,
             yearly: r.year,
             fee: r.fee,
-            dateAnnouncement: [
-              new Date(r.announcementStartDate),
-              new Date(r.announcementEndDate),
-            ],
-            dateExam: new Date(r.examDate),
-            dateRegister: [
-              new Date(r.registerStartDate),
-              new Date(r.registerEndDate),
-            ],
-            datePayment: [
-              new Date(r.paymentStartDate),
-              new Date(r.paymentEndDate),
-            ],
+            dateAnnouncement:
+              r.announcementStartDate !== null && r.announcementEndDate !== null
+                ? [
+                    new Date(r.announcementStartDate),
+                    new Date(r.announcementEndDate),
+                  ]
+                : null,
+            dateExam: r.examDate !== null ? new Date(r.examDate) : null,
+            dateRegister:
+              r.registerStartDate !== null && r.registerEndDate !== null
+                ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
+                : null,
+            datePayment:
+              r.paymentStartDate !== null && r.paymentEndDate !== null
+                ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
+                : null,
             organizationName: {
               id: r.organizationId,
               name: r.organizationName,
@@ -312,7 +310,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -342,7 +340,7 @@ const clickAdd = () => {
 };
 
 const deleteData = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.periodExamId(id))
     .then((res) => {
@@ -352,7 +350,7 @@ const deleteData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       await fetchData();
     });
 };
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index 93ad90eb0..d9795e581 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -125,8 +125,10 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateExam)"
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
+                  clearable
+                  @clear="clearDateExam"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -164,6 +166,7 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateAnnouncement)"
                   :label="`${'วันที่ประกาศ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -183,6 +186,7 @@
               v-model="dateRegister"
               :locale="'th'"
               autoApply
+              clearValue
               borderless
               range
               :enableTimePicker="false"
@@ -201,6 +205,8 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateRegister)"
                   :label="`${'วันที่สมัคร'}`"
+                  clearable
+                  @clear="clearDateRegister"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -238,6 +244,8 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(datePayment)"
                   :label="`${'วันที่ชำระเงิน'}`"
+                  clearable
+                  @clear="clearDatePayment"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -272,8 +280,12 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateAnnounce)"
+                  :model-value="
+                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                  "
                   :label="`${'วันประกาศผลสอบ'}`"
+                  clearable
+                  @clear="clearDateAnnounce"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -417,6 +429,13 @@
                         </template>
                       </selector>
                     </q-td>
+                    <q-td key="highDegree" :props="props">
+                      <q-checkbox
+                        v-model="props.row.highDegree"
+                        label="ปริญญาขึ้นไป"
+                        color="teal"
+                      />
+                    </q-td>
                     <q-td key="type" :props="props">
                       <selector
                         class=""
@@ -976,8 +995,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -991,11 +1009,11 @@ const yearly = ref<number>(new Date().getFullYear());
 const nameRaw = ref<number | null>(null);
 const roundRaw = ref<number | null>(null);
 const yearlyRaw = ref<number | null>(null);
-const dateRegister = ref<[Date, Date]>([new Date(), new Date()]); //วันที่สมัคร
-const datePayment = ref<[Date, Date]>([new Date(), new Date()]); //วันที่จ่ายเงิน
-const dateAnnouncement = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ประกาศ
-const dateAnnounce = ref<Date>(new Date()); //วันประกาศผลสอบ
-const dateExam = ref<Date>(new Date()); //วันที่สอบ
+const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
+const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
+const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
+const dateAnnounce = ref<Date | null>(null); //วันประกาศผลสอบ
+const dateExam = ref<Date | null>(null); //วันที่สอบ
 const myFormPayment = ref<any>();
 const myFormPosition = ref<any>();
 const positionPathOptions = ref<DataOption[]>([]);
@@ -1007,6 +1025,10 @@ const examTypeOptions = [
   { name: "ทั่วไป", id: "normol" },
   { name: "แพทย์", id: "docter" },
 ];
+const educateOptions = [
+  { name: "ต่ำกว่าปริญญาตรี", id: "low" },
+  { name: "ปริญญาขึ้นไป", id: "normol" },
+];
 const category = ref<string>("");
 const categoryOptions = [
   { name: "สำนักอนามัย", id: "hygiene" },
@@ -1065,7 +1087,11 @@ const columnsPayment = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsPosition = ref<String[]>(["position", "type"]);
+const visibleColumnsPosition = ref<String[]>([
+  "position",
+  "type",
+  "highDegree",
+]);
 const columnsPosition = ref<QTableProps["columns"]>([
   {
     name: "position",
@@ -1078,6 +1104,17 @@ const columnsPosition = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "highDegree",
+    align: "left",
+    label: "วุฒิการศึกษาปริญญาขึ้นไป",
+    sortable: true,
+    field: "highDegree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "type",
     align: "left",
@@ -1100,7 +1137,7 @@ watch(organizationName, (count: DataOption, prevCount: DataOption) => {
 });
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   if (route.params.id != undefined) {
     edit.value = true;
     id.value = route.params.id.toString();
@@ -1123,7 +1160,7 @@ const clickBack = () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamId(id.value))
     .then((res) => {
@@ -1140,6 +1177,7 @@ const fetchData = async () => {
             id: r.typeId,
             name: r.typeName,
           },
+          highDegree: r.highDegree,
         });
       });
       const bankData: ResponsePayment[] = [];
@@ -1162,20 +1200,24 @@ const fetchData = async () => {
       roundRaw.value = data.round;
       yearlyRaw.value = data.year;
       fee.value = data.fee;
-      dateAnnounce.value = new Date(data.announcementDate);
-      dateAnnouncement.value = [
-        new Date(data.announcementStartDate),
-        new Date(data.announcementEndDate),
-      ];
-      dateExam.value = new Date(data.examDate);
-      dateRegister.value = [
-        new Date(data.registerStartDate),
-        new Date(data.registerEndDate),
-      ];
-      datePayment.value = [
-        new Date(data.paymentStartDate),
-        new Date(data.paymentEndDate),
-      ];
+      dateAnnounce.value =
+        data.announcementDate != null ? new Date(data.announcementDate) : null;
+      dateAnnouncement.value =
+        data.announcementStartDate != null && data.announcementEndDate != null
+          ? [
+              new Date(data.announcementStartDate),
+              new Date(data.announcementEndDate),
+            ]
+          : null;
+      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
+      dateRegister.value =
+        data.registerStartDate != null && data.registerEndDate != null
+          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
+          : null;
+      datePayment.value =
+        data.paymentStartDate != null && data.paymentEndDate != null
+          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
+          : null;
       organizationShortName.value = {
         id: data.organizationCodeId,
         name: data.organizationCodeName,
@@ -1197,7 +1239,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1205,7 +1247,7 @@ const fetchData = async () => {
  * get รายการ รหัสหน่วยงาน
  */
 const fetchOrganizationShortName = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -1223,7 +1265,7 @@ const fetchOrganizationShortName = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1231,7 +1273,7 @@ const fetchOrganizationShortName = async () => {
  * get รายการ หน่วยงาน
  */
 const fetchOrganizationOrganization = async (val: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organization)
     .then((res) => {
@@ -1249,7 +1291,7 @@ const fetchOrganizationOrganization = async (val: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1257,7 +1299,7 @@ const fetchOrganizationOrganization = async (val: string) => {
  * get รายการ ตำแหน่งในสายงาน
  */
 const fetchPositionPath = async (val: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.positionPath)
     .then((res) => {
@@ -1275,7 +1317,7 @@ const fetchPositionPath = async (val: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1321,13 +1363,21 @@ const sendData = () => {
       positionName: r.position.name,
       typeId: r.type.id,
       typeName: r.type.name,
+      highDegree: r.highDegree ? true : false,
     });
   });
   const valueData: RequestPeriodExam = {
-    announcementDate: dateToISO(dateAnnounce.value),
-    announcementEndDate: dateToISO(dateAnnouncement.value[1]),
-    announcementStartDate: dateToISO(dateAnnouncement.value[0]),
-    examDate: dateToISO(dateExam.value),
+    announcementDate:
+      dateAnnounce.value != null ? dateToISO(dateAnnounce.value) : null,
+    announcementEndDate:
+      dateAnnouncement.value != null
+        ? dateToISO(dateAnnouncement.value[1])
+        : null,
+    announcementStartDate:
+      dateAnnouncement.value != null
+        ? dateToISO(dateAnnouncement.value[0])
+        : null,
+    examDate: dateExam.value != null ? dateToISO(dateExam.value) : null,
     bankExam: rowsPayment.value,
     checkDisability: checkDisability.value,
     announcementExam: announcementExam.value,
@@ -1342,12 +1392,16 @@ const sendData = () => {
     organizationCodeName: organizationShortName.value?.name,
     organizationId: organizationName.value?.id,
     organizationName: organizationName.value?.name,
-    paymentEndDate: dateToISO(datePayment.value[1]),
+    paymentEndDate:
+      datePayment.value != null ? dateToISO(datePayment.value[1]) : null,
     paymentKrungThai: pay.value,
-    paymentStartDate: dateToISO(datePayment.value[0]),
+    paymentStartDate:
+      datePayment.value != null ? dateToISO(datePayment.value[0]) : null,
     positionExam: positionData,
-    registerEndDate: dateToISO(dateRegister.value[1]),
-    registerStartDate: dateToISO(dateRegister.value[0]),
+    registerEndDate:
+      dateRegister.value != null ? dateToISO(dateRegister.value[1]) : null,
+    registerStartDate:
+      dateRegister.value != null ? dateToISO(dateRegister.value[0]) : null,
     round: round.value,
     year: yearly.value,
     category: category.value,
@@ -1356,7 +1410,7 @@ const sendData = () => {
 };
 
 const addData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.periodExam, sendData())
     .then(async (res) => {
@@ -1371,12 +1425,12 @@ const addData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const editData = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.periodExamId(id), sendData())
     .then(async (res) => {
@@ -1389,7 +1443,7 @@ const editData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1416,13 +1470,13 @@ const uploadDocData = async () => {
     fileDocDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodExamDoc(id.value), formData)
       .then((res) => {})
       .catch((e) => {})
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   } else {
     clickBack();
@@ -1452,13 +1506,13 @@ const uploadImgData = async () => {
     fileImgDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodExamImg(id.value), formData)
       .then((res) => {})
       .catch((e) => {})
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
@@ -1467,7 +1521,7 @@ const deleteDocData = async (docId: string) => {
   const params = {
     documentId: docId,
   };
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.periodExamDoc(id.value.toString()), {
       params,
@@ -1510,6 +1564,7 @@ const clickAddPosition = () => {
         id: "00000000-0000-0000-0000-000000000000",
         position: { id: "", name: "" },
         type: { id: "normol", name: "ทั่วไป" },
+        highDegree: false,
       });
     }
   });
@@ -1526,7 +1581,7 @@ const clickDeletePosition = (row: any) => {
  * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
  * @param val ช่วงวันที่
  */
-const dateThaiRange = (val: [Date, Date]) => {
+const dateThaiRange = (val: [Date, Date] | null) => {
   if (val === null) {
     return "";
   } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
@@ -1535,6 +1590,22 @@ const dateThaiRange = (val: [Date, Date]) => {
     return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
   }
 };
+
+const clearDateExam = () => {
+  dateExam.value = null;
+};
+
+const clearDateRegister = () => {
+  dateRegister.value = null;
+};
+
+const clearDatePayment = () => {
+  datePayment.value = null;
+};
+
+const clearDateAnnounce = () => {
+  dateAnnounce.value = null;
+};
 </script>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
index 7a10f573a..800c3553b 100644
--- a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
@@ -11,7 +11,11 @@
       @click="router.go(-1)"
     />
     {{ name }}
-    {{ `ครั้งที่${round}/${yearly == null ? "" : yearly + 543}` }}
+    {{
+      `ครั้งที่${round == null ? "" : round}/${
+        yearly == null ? "" : yearly + 543
+      }`
+    }}
     <q-space />
     <q-btn
       @click="visible = !visible"
@@ -221,6 +225,9 @@
             >
               {{ statusCandidate(props.row.status) }}
             </div>
+            <div v-else-if="col.name == 'registerDate'" class="table_ellipsis">
+              {{ col.value }}
+            </div>
             <div v-else class="table_ellipsis">
               {{ col.value }}
             </div>
@@ -282,14 +289,7 @@ import { useQuasar } from "quasar";
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  genColor15,
-  dateToISO,
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { genColor15, dateToISO, date2Thai, messageError } = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const router = useRouter();
@@ -314,6 +314,7 @@ const initialPagination = ref<Pagination>({
 const visibleColumns = ref<String[]>([
   "no",
   "number",
+  "registerDate",
   "examIdenNumber",
   "seatNumber",
   "resultB",
@@ -451,6 +452,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px;",
     style: "font-size: 14px; ",
   },
+  {
+    name: "registerDate",
+    align: "left",
+    label: "วันเและเวลาที่สมัคร",
+    sortable: true,
+    field: "registerDate",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
   {
     name: "status",
     align: "left",
@@ -472,7 +482,7 @@ watch(status, (count: String, prevCount: String) => {
 });
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchDataCom();
 });
 
@@ -491,7 +501,7 @@ const fetchDataCom = async () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateOfPeriodExam(status.value, examId.value))
     .then((res) => {
@@ -504,6 +514,7 @@ const fetchData = async () => {
           avatar: r.profileImg != null ? r.profileImg.detail : "",
           citizenId: r.citizenId,
           number: r.number,
+          registerDate: r.registerDate,
           examIdenNumber: r.examIdenNumber,
           seatNumber: r.seatNumber,
           resultC: r.resultC,
@@ -518,12 +529,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchPeriodExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamStatus(examId.value))
     .then((res) => {
@@ -538,7 +549,7 @@ const fetchPeriodExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -547,7 +558,7 @@ const fetchPeriodExam = async () => {
  */
 const fetchDataSummary = async () => {
   dataNum.value = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.countDashbordPeriodExam(examId.value))
     .then((res) => {
@@ -565,12 +576,12 @@ const fetchDataSummary = async () => {
       dataNum.value = [];
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadFileDashboard = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(
       config.API.periodExamDownloadDashboard(examId.value),
@@ -594,7 +605,7 @@ const downloadFileDashboard = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index f51d61031..8f372fe5e 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -578,7 +578,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const store = useDataStore();
 const { loaderPage } = store;
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError } = mixin;
 const previous = ref<boolean>(false);
 const next = ref<boolean>(false);
 const addDialog = ref<boolean>(false);
@@ -870,7 +870,7 @@ const saveEdit = async () => {
 };
 
 const saveDataAgency = async (data: DataLink[]) => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.cmsAgency, data)
     .then((res) => {})
@@ -883,7 +883,7 @@ const saveDataAgency = async (data: DataLink[]) => {
 };
 
 const saveDataGoverment = async (data: DataLink[]) => {
-  showLoader();
+  loaderPage(true);
 
   await http
     .post(config.API.cmsGoverment, data)
@@ -897,7 +897,7 @@ const saveDataGoverment = async (data: DataLink[]) => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.cms)
     .then((res) => {
@@ -952,12 +952,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const takeLogo = async () => {
-  showLoader();
+  loaderPage(true);
   const formData = new FormData();
   formData.append("FileData", imageFileLogo.value);
   await http
@@ -974,7 +974,7 @@ const takeLogo = async () => {
 };
 
 const takeBanner = async () => {
-  showLoader();
+  loaderPage(true);
   const formData = new FormData();
   formData.append("FileData", imageFile.value);
   await http
@@ -999,7 +999,7 @@ const sendDataDetail = async () => {
         description: web.value.descripstion,
         shortName: web.value.by,
       };
-      showLoader();
+      loaderPage(true);
       await http
         .post(config.API.cmsDeatail, data)
         .then((res) => {})
@@ -1026,7 +1026,7 @@ const sendDataAbout = async () => {
         zipCode: address.value.code,
         telephone: address.value.tel,
       };
-      showLoader();
+      loaderPage(true);
       await http
         .post(config.API.cmsAbout, data)
         .then((res) => {})
@@ -1042,7 +1042,7 @@ const sendDataAbout = async () => {
 };
 
 const fetchProvince = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.province)
     .then((res) => {
@@ -1057,13 +1057,13 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchDistrict = async (id: string | null) => {
   if (id !== null) {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.listDistrict(id))
       .then((res) => {
@@ -1078,14 +1078,14 @@ const fetchDistrict = async (id: string | null) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
 
 const fetchSubDistrict = async (id: string | null) => {
   if (id !== null) {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.listSubDistrict(id))
       .then((res) => {
@@ -1104,7 +1104,7 @@ const fetchSubDistrict = async (id: string | null) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
diff --git a/src/modules/04_registry/components/Assessment.vue b/src/modules/04_registry/components/Assessment.vue
index 76eb3dbaa..c93364503 100644
--- a/src/modules/04_registry/components/Assessment.vue
+++ b/src/modules/04_registry/components/Assessment.vue
@@ -26,6 +26,10 @@
               <div v-if="col.name == 'date'" class="table_ellipsis">
                 {{ date2Thai(col.value) }}
               </div>
+              <div v-else-if="col.name == 'name'" class="table_ellipsis">
+                {{ textPoint(props.row.pointSum) }}
+                {{ textRangePoint(props.row.pointSum) }}
+              </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
               </div>
@@ -59,7 +63,7 @@
           <div
             class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
           >
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-12 col-md-12">
               <datepicker
                 menu-class-name="modalfix"
                 :readonly="!edit"
@@ -102,7 +106,7 @@
                 </template>
               </datepicker>
             </div>
-            <div class="col-6">
+            <!-- <div class="col-6">
               <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -117,8 +121,124 @@
                 @update:modelValue="clickEditRow"
                 type="number"
               />
+            </div> -->
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
             </div>
-            <div class="col-12">
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSumTotal"
+                :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ผลรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSum"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="text-subtitle2 col-12 row items-center">
+              <q-space></q-space>
+              ผลการประเมิน:
+              <div class="text-bold items-center q-px-sm">
+                {{ textPoint(pointSum) }}
+              </div>
+              {{ textRangePoint(pointSum) }}
+            </div>
+            <!-- <div class="col-12">
               <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -132,7 +252,7 @@
                 :label="`${'ชื่อแบบประเมิน'}`"
                 @update:modelValue="clickEditRow"
               />
-            </div>
+            </div> -->
           </div>
         </q-card-section>
         <q-separator />
@@ -171,6 +291,10 @@
           >
             {{ date2Thai(col.value) }}
           </div>
+          <div v-else-if="col.name == 'name'" class="table_ellipsis">
+            {{ textPoint(props.row.pointSum) }}
+            {{ textRangePoint(props.row.pointSum) }}
+          </div>
           <div v-else class="table_ellipsis">
             {{ col.value }}
           </div>
@@ -194,6 +318,7 @@ import type {
   DataProps,
 } from "@/modules/04_registry/interface/request/Assessment";
 import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
+import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -216,12 +341,16 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
-const point = ref<number>();
+const point1Total = ref<number>();
+const point1 = ref<number>();
+const point2Total = ref<number>();
+const point2 = ref<number>();
+const pointSumTotal = ref<number>();
+const pointSum = ref<number>();
 const date = ref<Date>(new Date());
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
@@ -242,7 +371,16 @@ const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 profileData.assessment.columns.length == 0
-  ? (visibleColumns.value = ["name", "point", "date"])
+  ? (visibleColumns.value = [
+      "point1Total",
+      "point1",
+      "point2Total",
+      "point2",
+      "pointSumTotal",
+      "pointSum",
+      "name",
+      "date",
+    ])
   : (visibleColumns.value = profileData.assessment.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -257,22 +395,77 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "name",
+    name: "point1Total",
     align: "left",
-    label: "ชื่อแบบประเมิน",
+    label: "ส่วนที่1 (คะแนน)",
     sortable: true,
-    field: "name",
+    field: "point1Total",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "point",
+    name: "point1",
     align: "left",
-    label: "คะแนน",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
     sortable: true,
-    field: "point",
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ผลประเมิน",
+    sortable: true,
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -281,11 +474,66 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
-    name: "date",
+    name: "point1Total",
     align: "left",
-    label: "วันที่ได้รับ",
+    label: "ส่วนที่1 (คะแนน)",
     sortable: true,
-    field: "date",
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -294,7 +542,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "ชื่อแบบประเมิน",
+    label: "ผลประเมิน",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -302,17 +550,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "point",
-    align: "left",
-    label: "คะแนน",
-    sortable: true,
-    field: "point",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "createdFullName",
     align: "left",
@@ -337,8 +574,13 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 const visibleColumnsHistory = ref<String[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
   "name",
-  "point",
   "date",
   "createdFullName",
   "createdAt",
@@ -353,7 +595,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAssessmentId(profileId.value))
     .then((res) => {
@@ -363,7 +605,12 @@ const fetchData = async () => {
         rows.value.push({
           id: e.id,
           name: e.name,
-          point: e.point,
+          point1Total: e.point1Total,
+          point1: e.point1,
+          point2Total: e.point2Total,
+          point2: e.point2,
+          pointSumTotal: e.pointSumTotal,
+          pointSum: e.pointSum,
           date: new Date(e.date),
           createdAt: new Date(e.createdAt),
           createdFullName: e.createdFullName,
@@ -374,7 +621,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -404,7 +651,12 @@ const clickNext = async () => {
 const getData = () => {
   const row = rows.value[rowIndex.value];
   name.value = row.name;
-  point.value = row.point;
+  point1Total.value = row.point1Total;
+  point1.value = row.point1;
+  point2Total.value = row.point2Total;
+  point2.value = row.point2;
+  pointSumTotal.value = row.pointSumTotal;
+  pointSum.value = row.pointSum;
   date.value = row.date;
   id.value = row.id;
 };
@@ -460,12 +712,17 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileAssessmentId(profileId.value), {
       id: id.value,
       name: name.value,
-      point: point.value,
+      point1Total: point1Total.value,
+      point1: point1.value,
+      point2Total: point2Total.value,
+      point2: point2.value,
+      pointSumTotal: pointSumTotal.value,
+      pointSum: pointSum.value,
       date: dateToISO(date.value),
     })
     .then((res) => {
@@ -484,12 +741,17 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileAssessmentId(id.value), {
       id: id.value,
       name: name.value,
-      point: point.value,
+      point1Total: point1Total.value,
+      point1: point1.value,
+      point2Total: point2Total.value,
+      point2: point2.value,
+      pointSumTotal: pointSumTotal.value,
+      pointSum: pointSum.value,
       date: dateToISO(date.value),
     })
     .then((res) => {
@@ -516,7 +778,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileAssessmentId(id.value))
         .then((res) => {
@@ -569,7 +831,12 @@ const selectData = async (props: DataProps) => {
   rawItem.value = props.row;
   rowIndex.value = props.rowIndex;
   name.value = props.row.name;
-  point.value = props.row.point;
+  point1Total.value = props.row.point1Total;
+  point1.value = props.row.point1;
+  point2Total.value = props.row.point2Total;
+  point2.value = props.row.point2;
+  pointSumTotal.value = props.row.pointSumTotal;
+  pointSum.value = props.row.pointSum;
   date.value = props.row.date;
   id.value = props.row.id;
   await checkRowPage();
@@ -583,7 +850,12 @@ const addData = () => {
   modal.value = true;
   edit.value = true;
   name.value = "";
-  point.value = 0;
+  point1Total.value = 0;
+  point1.value = 0;
+  point2Total.value = 0;
+  point2.value = 0;
+  pointSumTotal.value = 0;
+  pointSum.value = 0;
   date.value = new Date();
 };
 
@@ -623,7 +895,7 @@ const clickEditRow = () => {
 const clickHistory = async (row: RequestItemsObject) => {
   tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAssessmentHisId(row.id))
     .then((res) => {
@@ -633,7 +905,12 @@ const clickHistory = async (row: RequestItemsObject) => {
         rowsHistory.value.push({
           id: e.id,
           name: e.name,
-          point: e.point,
+          point1Total: e.point1Total,
+          point1: e.point1,
+          point2Total: e.point2Total,
+          point2: e.point2,
+          pointSumTotal: e.pointSumTotal,
+          pointSum: e.pointSum,
           date: new Date(e.date),
           createdAt: new Date(e.createdAt),
           createdFullName: e.createdFullName,
@@ -644,7 +921,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -670,6 +947,26 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+const textRangePoint = (val: number | undefined) => {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
+  if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
+  if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
+  if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
+  if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
+  else return "";
+};
+
+const textPoint = (val: number | undefined) => {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
+  if (val >= 60 && val <= 69) return "พอใช้";
+  if (val >= 70 && val <= 79) return "ดี";
+  if (val >= 80 && val <= 89) return "ดีมาก";
+  if (val >= 90 && val <= 100) return "ดีเด่น";
+  else return "-";
+};
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registry/components/Coin.vue b/src/modules/04_registry/components/Coin.vue
index 3964f40f4..84089f940 100644
--- a/src/modules/04_registry/components/Coin.vue
+++ b/src/modules/04_registry/components/Coin.vue
@@ -224,8 +224,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const issuer = ref<string>();
@@ -361,7 +360,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileHonorId(profileId.value))
     .then((res) => {
@@ -382,7 +381,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -468,7 +467,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileHonorId(profileId.value), {
       id: id.value,
@@ -492,7 +491,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileHonorId(id.value), {
       id: id.value,
@@ -524,7 +523,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileHonorId(id.value))
         .then((res) => {
@@ -634,7 +633,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       ? "ประวัติแก้ไขประกาศลูกจ้างดีเด่น"
       : "ประวัติแก้ไขประกาศเกียรติคุณ";
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileHonorHisId(row.id))
     .then((res) => {
@@ -655,7 +654,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/04_registry/components/Discipline.vue b/src/modules/04_registry/components/Discipline.vue
index 162d8a796..f4f0e8fd2 100644
--- a/src/modules/04_registry/components/Discipline.vue
+++ b/src/modules/04_registry/components/Discipline.vue
@@ -293,8 +293,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const level = ref<string>();
@@ -546,7 +545,7 @@ const filterSelector = (val: string, update: Function, refData: string) => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileDisId(profileId.value))
     .then((res) => {
@@ -569,7 +568,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -657,7 +656,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileDisId(profileId.value), {
       id: id.value,
@@ -683,7 +682,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileDisId(id.value), {
       id: id.value,
@@ -717,7 +716,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileDisId(id.value))
         .then((res) => {
@@ -827,7 +826,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileDisHisId(row.id))
     .then((res) => {
@@ -850,7 +849,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/04_registry/components/Document.vue b/src/modules/04_registry/components/Document.vue
index 52761629a..f539f31d9 100644
--- a/src/modules/04_registry/components/Document.vue
+++ b/src/modules/04_registry/components/Document.vue
@@ -161,7 +161,7 @@ const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const route = useRoute();
-const { success, messageError, showLoader, hideLoader } = mixin;
+const { success, messageError } = mixin;
 const profileId = ref<string>(route.params.id.toString());
 const edit = ref<boolean>(false);
 const uploader = ref<any>();
@@ -174,7 +174,7 @@ onMounted(async () => {
 });
 
 const getData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profilePaperId(profileId.value))
     .then((res) => {
@@ -185,12 +185,12 @@ const getData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const deleteData = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.profilePaperId(id))
     .then((res) => {
@@ -211,8 +211,10 @@ const uploadData = async () => {
       type: file.value[0].type,
     });
     const formData = new FormData();
-    formData.append("", newFile);
-    showLoader();
+    formData.append("avatar", newFile);
+    formData.append("moss", "newFile");
+    console.log(formData);
+    loaderPage(true);
     await http
       .post(config.API.profilePaperId(profileId.value), formData)
       .then((res) => {
diff --git a/src/modules/04_registry/components/Education.vue b/src/modules/04_registry/components/Education.vue
index 298b4a090..c73e11aa6 100644
--- a/src/modules/04_registry/components/Education.vue
+++ b/src/modules/04_registry/components/Education.vue
@@ -466,8 +466,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } =
-  mixin;
+const { success, dateToISO, date2Thai, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const levelId = ref<string>();
@@ -897,7 +896,7 @@ onMounted(async () => {
 });
 
 const fetchLevel = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.educationLevel)
     .then((res) => {
@@ -913,12 +912,12 @@ const fetchLevel = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchPositionPath = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.positionPath)
     .then((res) => {
@@ -934,7 +933,7 @@ const fetchPositionPath = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -961,7 +960,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileEduId(profileId.value))
     .then((res) => {
@@ -995,7 +994,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1098,7 +1097,7 @@ const saveData = async () => {
   //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
   //     (r: any) => r.id == positionPathId.value
   //   );
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileEduId(profileId.value), {
       id: id.value,
@@ -1140,7 +1139,7 @@ const editData = async () => {
   //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
   //     (r: any) => r.id == positionPathId.value
   //   );
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileEduId(id.value), {
       id: id.value,
@@ -1184,7 +1183,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileEduId(id.value))
         .then((res) => {
@@ -1312,7 +1311,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileEduHisId(row.id))
     .then((res) => {
@@ -1346,7 +1345,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/04_registry/components/Information/Address.vue b/src/modules/04_registry/components/Information/Address.vue
index d0a9279aa..64f63ecf4 100644
--- a/src/modules/04_registry/components/Information/Address.vue
+++ b/src/modules/04_registry/components/Information/Address.vue
@@ -311,10 +311,6 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
-  notiNoEdit: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -323,7 +319,7 @@ const $q = useQuasar();
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, success, messageError } = mixin;
 const edit = ref<boolean>(false);
 const addressData = ref<Address>(defaultAddress);
 const myform = ref<any>();
@@ -561,7 +557,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAdrsHisId(route.params.id.toString()))
     .then((res) => {
@@ -589,7 +585,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -610,7 +606,7 @@ const getNewData = async () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAdrsId(route.params.id.toString()))
     .then((res) => {
@@ -629,7 +625,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -661,7 +657,7 @@ const editData = async () => {
     createdAt: new Date(),
     createdFullName: "-",
   };
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileAdrsId(route.params.id.toString()), body)
     .then((res) => {
@@ -731,7 +727,7 @@ const selectSubDistrict = (e: string | null, name: string) => {
 };
 
 const fetchProvince = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.province)
     .then((res) => {
@@ -747,13 +743,13 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchDistrict = async (id: string | null, position: string) => {
   if (id != null) {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.listDistrict(id))
       .then((res) => {
@@ -774,14 +770,14 @@ const fetchDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
   if (id != null) {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.listSubDistrict(id))
       .then((res) => {
@@ -806,7 +802,7 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
@@ -815,7 +811,6 @@ const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
       edit.value = false;
-      props.notiNoEdit();
     } else {
       emit("update:statusEdit", true);
     }
diff --git a/src/modules/04_registry/components/Information/Certicate.vue b/src/modules/04_registry/components/Information/Certicate.vue
index 081ce63f5..721bf17c0 100644
--- a/src/modules/04_registry/components/Information/Certicate.vue
+++ b/src/modules/04_registry/components/Information/Certicate.vue
@@ -293,8 +293,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const certificateNo = ref<string>();
@@ -485,7 +484,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileCertId(profileId.value))
     .then((res) => {
@@ -508,7 +507,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -596,7 +595,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileCertId(profileId.value), {
       id: id.value,
@@ -622,7 +621,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileCertId(id.value), {
       id: id.value,
@@ -656,7 +655,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileCertId(id.value))
         .then((res) => {
@@ -770,7 +769,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       ? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
       : "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileCertHisId(row.id))
     .then((res) => {
@@ -793,7 +792,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/04_registry/components/Information/Family.vue b/src/modules/04_registry/components/Information/Family.vue
index 95699902c..b80ff9ede 100644
--- a/src/modules/04_registry/components/Information/Family.vue
+++ b/src/modules/04_registry/components/Information/Family.vue
@@ -774,7 +774,6 @@ import type {
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
-import { useManageDataStore } from "@/modules/01_metadata/store";
 
 const props = defineProps({
   statusEdit: {
@@ -790,10 +789,10 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const store = useManageDataStore();
-const { getPrefix } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, success, messageError } = mixin;
 const edit = ref<boolean>(false);
 const fix = ref<boolean>(true);
 const myform = ref<QForm | null>(null);
@@ -858,34 +857,24 @@ const refreshData = async () => {
 };
 
 const fetchPrefix = async () => {
-    const result = await getPrefix(true, false);
-  const data = result.data;
-  let option: DataOption[] = [];
-  if (data.length > 0) {
-    data.map((r: any) => {
-      option.push({ id: r.id.toString(), name: r.name.toString() });
+  loaderPage(true);
+  await http
+    .get(config.API.prefix)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      Ops.value.prefixOps = option;
+      OpsFilter.value.prefixOps = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
     });
-  }
-  Ops.value.prefixOps = option;
-  OpsFilter.value.prefixOps = option;
-//   showLoader();
-//   await http
-//     .get(config.API.prefix)
-//     .then((res) => {
-//       const data = res.data.result;
-//       let option: DataOption[] = [];
-//       data.map((r: any) => {
-//         option.push({ id: r.id.toString(), name: r.name.toString() });
-//       });
-//       Ops.value.prefixOps = option;
-//       OpsFilter.value.prefixOps = option;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
 };
 
 const addChildren = async () => {
@@ -912,7 +901,7 @@ const deleteChildren = (items: childrenFamily) => {
 
 const fetchHistory = async () => {
   familyDataHistory.value = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileFamiHisId(route.params.id.toString()))
     .then((res) => {
@@ -944,7 +933,7 @@ const fetchHistory = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       if (familyDataHistory.value.length == 0) {
         // modalError(
         //   $q,
@@ -966,7 +955,7 @@ const fetchHistory = async () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileFamiId(route.params.id.toString()))
     .then((res) => {
@@ -1011,12 +1000,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   const body: ResponseObject = {
     couple: familyData.value.same == "1",
     couplePrefixId: familyData.value.prefixIdC,
diff --git a/src/modules/04_registry/components/Information/Government.vue b/src/modules/04_registry/components/Information/Government.vue
index 4882760ab..da7a045bd 100644
--- a/src/modules/04_registry/components/Information/Government.vue
+++ b/src/modules/04_registry/components/Information/Government.vue
@@ -25,6 +25,18 @@
             :label="`${'สังกัด'}`"
           />
         </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.numberId"
+            :label="`${'ตำแหน่งเลขที่'}`"
+          />
+        </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
             :class="getClass(false)"
@@ -45,8 +57,8 @@
             lazy-rules
             readonly
             borderless
-            :model-value="govermentData.numberId"
-            :label="`${'เลขที่ตำแหน่ง'}`"
+            :model-value="govermentData.positionPathSide"
+            :label="`${'ด้าน/สาขา'}`"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -57,7 +69,7 @@
             lazy-rules
             readonly
             borderless
-            :model-value="govermentData.workId"
+            :model-value="govermentData.positionLine"
             :label="`${'สายงาน'}`"
           />
         </div>
@@ -69,7 +81,7 @@
             lazy-rules
             readonly
             borderless
-            :model-value="govermentData.typeId"
+            :model-value="govermentData.positionType"
             :label="`${'ประเภท'}`"
           />
         </div>
@@ -81,7 +93,7 @@
             lazy-rules
             readonly
             borderless
-            :model-value="govermentData.levelId"
+            :model-value="govermentData.positionLevel"
             :label="`${'ระดับ'}`"
           />
         </div>
@@ -93,10 +105,22 @@
             lazy-rules
             readonly
             borderless
-            :model-value="govermentData.businessId"
+            :model-value="govermentData.positionExecutive"
             :label="`${'ตำแหน่งทางการบริหาร'}`"
           />
         </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutiveSide"
+            :label="`${'ด้านตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
         <div class="col-12 q-py-md"><q-separator /></div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <datepicker
@@ -125,8 +149,8 @@
                 :readonly="!edit"
                 :borderless="!edit"
                 :model-value="date2Thai(new Date(govermentData.containDate))"
-                :rules="[(val) => !!val || `${'กรุณาเลือก วันที่สั่งบรรจุ'}`]"
-                :label="`${'วันที่สั่งบรรจุ'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือก วันที่บรรจุ'}`]"
+                :label="`${'วันที่บรรจุ'}`"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -306,11 +330,6 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
-
-  notiNoEdit: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -319,8 +338,7 @@ const $q = useQuasar();
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const profileStore = useProfileDataStore();
 const { birthDate, retireText } = storeToRefs(profileStore);
 const edit = ref<boolean>(false);
@@ -343,10 +361,21 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "position",
+    name: "positionPathSide",
     align: "left",
     label: "ตำแหน่ง",
     sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -356,7 +385,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "posNo",
     align: "left",
-    label: "เลขที่ตำแหน่ง",
+    label: "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
@@ -408,10 +437,21 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "dateAppoint",
     align: "left",
-    label: "วันที่สั่งบรรจุ",
+    label: "วันที่บรรจุ",
     sortable: true,
     field: "dateAppoint",
     headerStyle: "font-size: 14px",
@@ -511,11 +551,13 @@ const columnsHistory = ref<QTableProps["columns"]>([
 const visibleColumnsHistory = ref<String[]>([
   "oc",
   "position",
+  "positionPathSide",
   "posNo",
   "positionLine",
   "positionType",
   "positionLevel",
   "positionexecutive",
+  "positionExecutiveSide",
   "dateAppoint",
   "dateStart",
   "retireDate",
@@ -541,18 +583,20 @@ watch(retireText, async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileGovId(route.params.id.toString()))
     .then((res) => {
       const data: ResponseObject = res.data.result;
       govermentData.value.ocId = data.oc;
       govermentData.value.positionId = data.position;
-      govermentData.value.workId = data.work;
-      govermentData.value.typeId = data.type;
-      govermentData.value.levelId = data.level;
+      govermentData.value.positionPathSide = data.positionPathSide;
+      govermentData.value.positionLine = data.positionLine;
+      govermentData.value.positionType = data.positionType;
+      govermentData.value.positionLevel = data.positionLevel;
       govermentData.value.numberId = data.posNo;
-      govermentData.value.businessId = data.business;
+      govermentData.value.positionExecutive = data.positionExecutive;
+      govermentData.value.positionExecutiveSide = data.positionExecutiveSide;
       govermentData.value.containDate = new Date(data.dateAppoint);
       govermentData.value.workDate = new Date(data.dateStart);
       govermentData.value.retireDate = data.retireDate;
@@ -565,7 +609,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -575,27 +619,13 @@ const refreshData = async () => {
 };
 
 const editData = async () => {
-  showLoader();
-  const body: ResponseObject = {
-    oc: govermentData.value.ocId,
-    business: govermentData.value.businessId,
-    dateAppoint: dateToISO(govermentData.value.containDate),
-    dateStart: dateToISO(govermentData.value.workDate),
-    govAge: govermentData.value.ageAll,
-    govAgeAbsent: govermentData.value.absent,
-    govAgePlus: govermentData.value.age,
-    level: govermentData.value.levelId,
-    posNo: govermentData.value.numberId,
-    position: govermentData.value.positionId,
-    retireDate: govermentData.value.retireDate,
-    type: govermentData.value.typeId,
-    work: govermentData.value.workId,
-    reasonSameDate: govermentData.value.reasonSameDate,
-    createdAt: new Date(),
-    createdFullName: "-",
-  };
+  loaderPage(true);
   await http
-    .put(config.API.profileGovId(route.params.id.toString()), body)
+    .put(config.API.profileGovId(route.params.id.toString()), {
+      dateAppoint: dateToISO(govermentData.value.containDate),
+      dateStart: dateToISO(govermentData.value.workDate),
+      reasonSameDate: govermentData.value.reasonSameDate,
+    })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
@@ -624,7 +654,7 @@ const handleDate = async (modelData: Date) => {
 };
 
 const fetchCalAgeGov = async (date: Date) => {
-  showLoader();
+  loaderPage(true);
   const body = {
     dateAppoint: date,
   };
@@ -638,7 +668,7 @@ const fetchCalAgeGov = async (date: Date) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -647,7 +677,7 @@ const fetchCalAgeGov = async (date: Date) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileGovHisId(route.params.id.toString()))
     .then((res) => {
@@ -657,11 +687,13 @@ const clickHistory = async () => {
         rowsHistory.value.push({
           oc: e.oc,
           position: e.position,
+          positionPathSide: e.positionPathSide,
           posNo: e.posNo,
           positionLine: e.positionLine,
           positionType: e.positionType,
           positionLevel: e.positionLevel,
           positionExecutive: e.positionExecutive,
+          positionExecutiveSide: e.positionExecutiveSide,
           dateAppoint: new Date(e.dateAppoint),
           dateStart: new Date(e.dateStart),
           retireDate: e.retireDate,
@@ -678,7 +710,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -686,7 +718,6 @@ const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
       edit.value = false;
-      props.notiNoEdit();
     } else {
       emit("update:statusEdit", true);
     }
diff --git a/src/modules/04_registry/components/Information/Information.vue b/src/modules/04_registry/components/Information/Information.vue
index abd82f41d..13d630bf8 100644
--- a/src/modules/04_registry/components/Information/Information.vue
+++ b/src/modules/04_registry/components/Information/Information.vue
@@ -23,6 +23,7 @@
             :readonly="!edit"
             :borderless="!edit"
             v-model="informaData.cardid"
+            @update:model-value="changeCardID"
             maxlength="13"
             :rules="[
               (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
@@ -88,7 +89,7 @@
             :label="`${'นามสกุล'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <datepicker
             v-model="informaData.birthDate"
             :locale="'th'"
@@ -132,7 +133,7 @@
             </template>
           </datepicker>
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <q-input
             :class="getClass(false)"
             hide-bottom-space
@@ -145,7 +146,7 @@
             :label="`${'อายุ'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
@@ -170,7 +171,7 @@
                       ) "
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
@@ -195,32 +196,7 @@
                       ) "
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก หมู่เลือด'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.bloodId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.bloodOps"
-            option-value="id"
-            :label="`${'หมู่เลือด'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -234,7 +210,7 @@
             :label="`${'สัญชาติ'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -248,7 +224,7 @@
             :label="`${'เชื้อชาติ'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
@@ -273,7 +249,32 @@
                       ) "
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.bloodId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.bloodOps"
+            option-value="id"
+            :label="`${'หมู่เลือด'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                      ) "
+            clearable
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <q-input
             hide-bottom-space
             :outlined="edit"
@@ -284,10 +285,6 @@
             :readonly="!edit"
             :borderless="!edit"
             v-model="informaData.tel"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
-              (val:string) => val.length >= 10 || `${'กรุณากรอกข้อมูลเบอร์โทรให้ครบ'}`,
-            ]"
             :label="`${'เบอร์โทร'}`"
             mask="##########"
           />
@@ -348,6 +345,35 @@
                       ) "
           />
         </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            dense
+            :disable="!edit"
+          />
+        </div>
+        <div class="row col-12">
+          <OldName
+            v-if="same == '1'"
+            v-model:statusEdit="edit"
+            :fetchDataInformation="fetchDataComponent"
+          />
+        </div>
       </div>
     </q-form>
   </q-card>
@@ -394,6 +420,7 @@ import type {
 } from "@/modules/04_registry/interface/request/Information";
 import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
 import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import OldName from "@/modules/04_registry/components/Information/OldName.vue";
 import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
@@ -407,7 +434,7 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
-  notiNoEdit: {
+  fetchDataProfile: {
     type: Function,
     default: () => console.log("not function"),
   },
@@ -417,36 +444,31 @@ const emit = defineEmits(["update:statusEdit"]);
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  success,
-  dateToISO,
-  messageError,
-  modalError,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const profileStore = useProfileDataStore();
 const { changeRetireText, changeBirth } = profileStore;
 const edit = ref<boolean>(false);
+const defaultCitizenData = ref<string | null>("");
 const informaData = ref<Information>(defaultInformation);
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const age = ref<boolean>(true);
 const myform = ref<QForm | null>(null);
+const dateBefore = ref<Date>(new Date());
+const same = ref<string>("0");
 const Ops = ref<InformationOps>({
   prefixOps: [],
+  prefixOldOps: [],
   genderOps: [],
   bloodOps: [],
   statusOps: [],
   religionOps: [],
   employeeClassOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
   ],
   employeeTypeOps: [
     { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
@@ -455,13 +477,14 @@ const Ops = ref<InformationOps>({
 });
 const OpsFilter = ref<InformationOps>({
   prefixOps: [],
+  prefixOldOps: [],
   genderOps: [],
   bloodOps: [],
   statusOps: [],
   religionOps: [],
   employeeClassOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
   ],
   employeeTypeOps: [
     { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
@@ -682,7 +705,7 @@ const onCancel = async () => {
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
 const fetchPerson = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.person)
     .then((res) => {
@@ -739,7 +762,58 @@ const fetchPerson = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
+    });
+};
+
+const changeCardID = (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      dialogMessage(
+        $q,
+        "ข้อมูลมีการแก้ไข?",
+        "ยืนยันการเปลี่ยนเลขบัตรประชาชนใช่หรือไม่",
+        "info",
+        "ยืนยัน",
+        "public",
+        async () => {
+          await checkCitizen(value);
+        },
+        async () => {
+          informaData.value.cardid = defaultCitizenData.value;
+        }
+      );
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
     });
 };
 
@@ -748,7 +822,7 @@ const fetchPerson = async () => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileInforHisId(route.params.id.toString()))
     .then((res) => {
@@ -789,7 +863,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -855,36 +929,44 @@ const handleDate = async (modelData: Date) => {
   await calRetire(modelData);
 };
 
+const fetchDataComponent = async (modelData: Date) => {
+  await props.fetchDataProfile();
+  await fetchData();
+};
+
 const calRetire = async (birth: Date) => {
   const body = {
     birthDate: dateToISO(birth),
   };
-  showLoader();
-  await http
-    .post(config.API.profileCalRetire, body)
-    .then((res: any) => {
-      const data = res.data.result;
-      informaData.value.age = data.age;
-      changeRetireText(data.retireDate);
-      age.value = true;
-    })
-    .catch((e: any) => {
-      age.value = false;
-      messageError($q, e);
-      const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-      changeRetireText(date2Thai(retire));
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileCalRetire, body)
+      .then((res: any) => {
+        const data = res.data.result;
+        informaData.value.age = data.age;
+        changeRetireText(data.retireDate);
+        dateBefore.value = birth;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+        informaData.value.birthDate = dateBefore.value;
+        changeRetireText(date2Thai(retire));
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileInforId(route.params.id.toString()))
     .then(async (res: any) => {
       const data: ResponseObject = res.data.result;
+      defaultCitizenData.value = data.citizenId;
       informaData.value.cardid = data.citizenId;
       informaData.value.prefix = "";
       informaData.value.prefixId = data.prefixId;
@@ -902,6 +984,8 @@ const fetchData = async () => {
       informaData.value.employeeType = data.employeeType;
       informaData.value.employeeClass = data.employeeClass;
       informaData.value.profileType = data.profileType;
+      dateBefore.value = new Date(data.birthDate);
+      same.value = data.changeName == true ? "1" : "0";
       await calRetire(new Date(dateToISO(new Date(data.birthDate))));
       if (data.profileType == "officer" && columnsHistory.value.length >= 15) {
         columnsHistory.value.splice(13, 1);
@@ -911,16 +995,13 @@ const fetchData = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
+    .finally(async () => {
+      //   loaderPage(false);
+      await props.fetchDataProfile();
     });
 };
 
 const editData = async () => {
-  if (age.value == false) {
-    modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
-    return;
-  }
   const body: any = {
     citizenId: informaData.value.cardid,
     prefixId: informaData.value.prefixId,
@@ -941,7 +1022,7 @@ const editData = async () => {
     profileType: informaData.value.profileType,
     createdFullName: "-",
   };
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileInforId(route.params.id.toString()), body)
     .then((res) => {
@@ -973,7 +1054,6 @@ const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
       edit.value = false;
-      props.notiNoEdit();
     } else {
       emit("update:statusEdit", true);
     }
diff --git a/src/modules/04_registry/components/Information/OldName.vue b/src/modules/04_registry/components/Information/OldName.vue
new file mode 100644
index 000000000..f82dd50c4
--- /dev/null
+++ b/src/modules/04_registry/components/Information/OldName.vue
@@ -0,0 +1,961 @@
+<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
+<template>
+  <div class="col-12">
+    <q-form ref="myForm">
+      <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
+        icon="mdi-book"
+        :statusEdit="!statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="statusEdit ? selectData(props) : ''"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'status'" class="table_ellipsis">
+                {{ typeChangeName(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                v-if="props.row.file != null"
+                color="green"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-file-document-outline"
+                @click="openFile(props.row.file)"
+              />
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </div>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก สถานะการเปลี่ยนชื่อ'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="status"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.statusOps"
+                option-value="id"
+                :label="`${'สถานะการเปลี่ยนชื่อ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                      ) "
+              />
+            </div>
+            <q-space class="col-6" />
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="prefixId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.prefixOps"
+                option-value="id"
+                :label="`${'คำนำหน้า'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="firstName"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="lastName"
+                :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+                hide-bottom-space
+                :label="`${'นามสกุล'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <q-btn
+              v-if="file != null && !edit"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="openFile(file)"
+            />
+            <q-uploader
+              v-if="edit"
+              color="gray"
+              type="file"
+              flat
+              ref="uploader"
+              class="full-width"
+              text-color="white"
+              :max-size="10000000"
+              accept=".jpg,.png,.pdf,.csv,.doc"
+              bordered
+              label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+              @added="fileAdd"
+            >
+              <template v-slot:header="scope">
+                <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+                  <q-btn
+                    v-if="scope.queuedFiles.length > 0"
+                    icon="clear_all"
+                    @click="scope.removeQueuedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบทั้งหมด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.uploadedFiles.length > 0"
+                    icon="done_all"
+                    @click="scope.removeUploadedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                  </q-btn>
+                  <q-spinner
+                    v-if="scope.isUploading"
+                    class="q-uploader__spinner"
+                  />
+                  <div class="col">
+                    <div class="q-uploader__title">
+                      {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
+                    </div>
+                    <div class="q-uploader__subtitle">
+                      {{ scope.uploadSizeLabel }} /
+                      {{ scope.uploadProgressLabel }}
+                    </div>
+                  </div>
+                  <q-btn
+                    v-if="scope.canAddFiles"
+                    type="a"
+                    icon="add_box"
+                    @click="scope.pickFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-uploader-add-trigger />
+                    <q-tooltip>เลือกไฟล์</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.isUploading"
+                    icon="clear"
+                    @click="scope.abort"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                  </q-btn>
+                </div>
+              </template>
+            </q-uploader>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+    :history="true"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'status'" class="table_ellipsis">
+            {{ typeChangeName(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            v-if="props.row.file != null"
+            color="green"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-file-document-outline"
+            @click="openFile(props.row.file)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/OldName";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/OldName";
+import type {
+  OldNameOps,
+  DataOption,
+} from "@/modules/04_registry/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  fetchDataInformation: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  typeChangeName,
+  dialogMessage,
+} = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const prefixId = ref<string>();
+const firstName = ref<string>();
+const lastName = ref<string>();
+const status = ref<string>();
+const nameFile = ref<string>("");
+const minDate = ref<Date>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการเปลี่ยนชื่อ-นามสกุล"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(route.params.id.toString());
+const file = ref<string | null>(null);
+const fileUpload = ref<any>([]);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+const Ops = ref<OldNameOps>({
+  prefixOps: [],
+  statusOps: [
+    {
+      id: "firstName",
+      name: "เปลี่ยนชื่อ",
+    },
+    {
+      id: "lastName",
+      name: "เปลี่ยนนามสกุล",
+    },
+    {
+      id: "all",
+      name: "เปลี่ยนชื่อ-นามสกุล",
+    },
+  ],
+});
+const OpsFilter = ref<OldNameOps>({
+  prefixOps: [],
+  statusOps: [
+    {
+      id: "firstName",
+      name: "เปลี่ยนชื่อ",
+    },
+    {
+      id: "lastName",
+      name: "เปลี่ยนนามสกุล",
+    },
+    {
+      id: "all",
+      name: "เปลี่ยนชื่อ-นามสกุล",
+    },
+  ],
+});
+profileData.oldName.columns.length == 0
+  ? (visibleColumns.value = ["prefix", "firstName", "lastName", "status"])
+  : (visibleColumns.value = profileData.oldName.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้า",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้า",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("oldName", count);
+});
+
+onMounted(async () => {
+  await fetchPerson();
+  await fetchData();
+});
+
+const fetchData = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileChangeNameId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+const fetchPerson = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  prefixId.value = row.prefixId;
+  firstName.value = row.firstName;
+  lastName.value = row.lastName;
+  status.value = row.status;
+  file.value = row.file;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (fileUpload.value.length > 0) {
+    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: fileUpload.value[0].type,
+    });
+    const formData = new FormData();
+    formData.append("", newFile);
+    if (prefixId.value != undefined)
+      formData.append("prefixId", prefixId.value);
+    if (firstName.value != undefined)
+      formData.append("firstName", firstName.value);
+    if (lastName.value != undefined)
+      formData.append("lastName", lastName.value);
+    if (status.value != undefined) formData.append("status", status.value);
+    loaderPage(true);
+    await http
+      .post(config.API.profileChangeNameId(profileId.value), formData)
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+        await props.fetchDataInformation();
+      });
+  } else {
+    dialogMessage(
+      $q,
+      "ไม่สามารถบันทึกข้อมูลได้",
+      "กรุณาอัปโหลดเอกสารหลักฐาน",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  const formData = new FormData();
+  if (fileUpload.value.length > 0) {
+    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: fileUpload.value[0].type,
+    });
+    formData.append("", newFile);
+  }
+  if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
+  if (firstName.value != undefined)
+    formData.append("firstName", firstName.value);
+  if (lastName.value != undefined) formData.append("lastName", lastName.value);
+  if (status.value != undefined) formData.append("status", status.value);
+  loaderPage(true);
+  await http
+    .put(config.API.profileChangeNameId(id.value), formData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await props.fetchDataInformation();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileChangeNameId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
+  modal.value = true; //modal ที่เด้งขึ้นมา
+  edit.value = false; //ปุ่ม edit ใน modal
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  prefixId.value = props.row.prefixId;
+  firstName.value = props.row.firstName;
+  lastName.value = props.row.lastName;
+  status.value = props.row.status;
+  file.value = props.row.file;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  prefixId.value = "";
+  firstName.value = "";
+  lastName.value = "";
+  status.value = "";
+  file.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileChangeNameHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fileAdd = async (val: any) => {
+  nameFile.value = val[0].name;
+  fileUpload.value = val;
+};
+
+const openFile = async (val: string | null) => {
+  if (val != null) window.open(val);
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/modules/04_registry/components/Information/top.vue b/src/modules/04_registry/components/Information/top.vue
index 05f0c1582..2a8221cf9 100644
--- a/src/modules/04_registry/components/Information/top.vue
+++ b/src/modules/04_registry/components/Information/top.vue
@@ -51,6 +51,22 @@
         <q-tooltip>ยกเลิก</q-tooltip>
       </q-btn>
     </div>
+    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="addleave"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
+        <q-tooltip>สรุปวันลา</q-tooltip>
+      </q-btn>
+    </div>
+
     <div class="q-pl-sm" v-else>
       <q-btn
         size="12px"
@@ -86,6 +102,10 @@ const props = defineProps({
     default: "ข้อความ",
     required: true,
   },
+  iconAdd: {
+    type: String,
+    default: null,
+  },
   icon: {
     type: String,
     default: "mdi-help",
@@ -117,6 +137,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
   save: {
     type: Function,
     default: () => console.log("not function"),
@@ -163,5 +187,9 @@ const save = () => {
 const add = () => {
   props.add();
 };
+
+const addleave = () => {
+  props.addleave();
+};
 </script>
 <style scoped></style>
diff --git a/src/modules/04_registry/components/Insignia.vue b/src/modules/04_registry/components/Insignia.vue
index 8d07317d8..641800865 100644
--- a/src/modules/04_registry/components/Insignia.vue
+++ b/src/modules/04_registry/components/Insignia.vue
@@ -420,8 +420,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const insigniaId = ref<string>("");
@@ -791,7 +790,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 };
 
 const fetchInsignia = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.insignia)
     .then((res) => {
@@ -812,12 +811,12 @@ const fetchInsignia = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileInsignId(profileId.value))
     .then((res) => {
@@ -847,7 +846,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -941,7 +940,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileInsignId(profileId.value), {
       id: id.value,
@@ -973,7 +972,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileInsignId(id.value), {
       id: id.value,
@@ -1013,7 +1012,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileInsignId(id.value))
         .then((res) => {
@@ -1135,7 +1134,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileInsignHisId(row.id))
     .then((res) => {
@@ -1165,7 +1164,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/04_registry/components/Leave.vue b/src/modules/04_registry/components/Leave.vue
index f96e0b44a..fc4d1ae29 100644
--- a/src/modules/04_registry/components/Leave.vue
+++ b/src/modules/04_registry/components/Leave.vue
@@ -10,8 +10,10 @@
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
         :add="clickAdd"
+        :addleave="clickAddLeave"
         name="การลา"
         icon="mdi-calendar-account"
+        iconAdd="mdi-calendar-account"
         :statusEdit="statusEdit"
       >
         <template #columns="props">
@@ -20,11 +22,36 @@
               v-for="col in props.cols"
               :key="col.name"
               :props="props"
-              @click="selectData(props)"
               class="cursor-pointer"
+              @click="selectData(props)"
             >
-              <div v-if="col.name == 'year'" class="table_ellipsis">
-                {{ col.value + 543 }}
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div
+                v-else-if="col.name == 'dateStartLeave'"
+                class="table_ellipsis"
+              >
+                {{
+                  dateThaiRange([
+                    props.row.dateStartLeave,
+                    props.row.dateEndLeave,
+                  ])
+                }}
+              </div>
+              <div v-else-if="col.name == 'status'" class="table_ellipsis">
+                {{ statusLeave(col.value) }}
+                <!-- {{ col.value }} -->
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'numLeave' ||
+                  col.name == 'sumLeave' ||
+                  col.name == 'totalLeave'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
               </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
@@ -46,27 +73,52 @@
       </ProfileTable>
     </q-form>
   </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
+  <!-- popup Add Edit Leave -->
+  <q-dialog v-model="modalAdd" persistent>
     <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="การลา" :close="clickClose" />
+      <q-form ref="myFormAdd">
+        <DialogHeader tittle="การลา" :close="clickCloseLeave" />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div
             class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
           >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="typeLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลา'}`]"
+                hide-bottom-space
+                :label="`${'ประเภทการลา'}`"
+                @update:modelValue="clickEditRowType"
+                emit-value
+                map-options
+                option-label="name"
+                :options="typeLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
+                      ) "
+              />
+            </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
                 :readonly="!edit"
-                v-model="year"
+                v-model="dateRange"
                 :locale="'th'"
                 autoApply
-                year-picker
                 :enableTimePicker="false"
                 @update:modelValue="clickEditRow"
                 week-start="0"
+                range
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -79,10 +131,10 @@
                     dense
                     lazy-rules
                     :borderless="!edit"
-                    :model-value="year + 543"
-                    :rules="[(val) => val >= 0 || `${'กรุณาเลือกปี'}`]"
+                    :model-value="dateThaiRange(dateRange)"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวัน เดือน ปีที่ลา'}`]"
                     hide-bottom-space
-                    :label="`${'ปี'}`"
+                    :label="`${'วัน เดือน ปีที่ลา'}`"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -100,7 +152,7 @@
                 </template>
               </datepicker>
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-3 col-sm-3 col-md-3">
               <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -108,33 +160,57 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="sickDay"
-                :rules="[(val) => val >= 0 || `${'กรุณากรอกลาป่วย (วัน)'}`]"
-                hide-bottom-space
-                :label="`${'ลาป่วย (วัน)'}`"
-                @update:modelValue="clickEditRow"
+                v-model="numLeave"
                 type="number"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลา'}`]"
+                hide-bottom-space
+                :label="`${'จำนวนวันที่ลา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-3 col-sm-3 col-md-3">
+              <q-input
+                :class="getClass(false)"
+                :outlined="true"
+                dense
+                lazy-rules
+                :readonly="false"
+                :borderless="false"
+                disable
+                v-model="numUsedLeave"
+                type="number"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลามาแล้ว'}`]"
+                hide-bottom-space
+                :label="`${'จำนวนวันที่ลามาแล้ว'}`"
+                @update:modelValue="clickEditRow"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
+              <selector
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="personalDay"
-                :rules="[
-                  (val) => val >= 0 || `${'กรุณากรอกลากิจส่วนตัว (วัน)'}`,
-                ]"
+                v-model="statLeave"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะการลา'}`]"
                 hide-bottom-space
-                :label="`${'ลากิจส่วนตัว (วัน)'}`"
+                :label="`${'สถานะการลา'}`"
                 @update:modelValue="clickEditRow"
-                type="number"
+                emit-value
+                map-options
+                option-label="name"
+                :options="statLeaveOption"
+                option-value="id"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statLeaveOption'
+                      ) "
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-12 col-md-12">
               <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -142,166 +218,12 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="maternityDay"
-                :rules="[(val) => val >= 0 || `${'กรุณากรอกลาคลอดบุตร (วัน)'}`]"
+                v-model="reason"
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
                 hide-bottom-space
-                :label="`${'ลาคลอดบุตร (วัน)'}`"
+                :label="`${'เหตุผล'}`"
                 @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="wifeDay"
-                :rules="[
-                  (val) =>
-                    val >= 0 ||
-                    `${'กรุณากรอกลาไปช่วยเหลือภริยาที่คลอดบุตร (วัน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ลาไปช่วยเหลือภริยาที่คลอดบุตร (วัน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="sickCount"
-                :rules="[(val) => val >= 0 || `${'กรุณากรอกลาพักผ่อน (วัน)'}`]"
-                hide-bottom-space
-                :label="`${'ลาพักผ่อน (วัน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="ordainDay"
-                :rules="[
-                  (val) =>
-                    val >= 0 ||
-                    `${'กรุณากรอกลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ (วัน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ (วัน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="absentDay"
-                :rules="[
-                  (val) =>
-                    val >= 0 ||
-                    `${'กรุณากรอกลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล (วัน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล (วัน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="studyDay"
-                :rules="[
-                  (val) =>
-                    val >= 0 ||
-                    `${'กรุณากรอกลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน (วัน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน (วัน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="agencyDay"
-                :rules="[
-                  (val) =>
-                    val >= 0 ||
-                    `${'กรุณากรอกลาไปปฏิบัติงานในองค์การระหว่างประเทศ (วัน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ลาไปปฏิบัติงานในองค์การระหว่างประเทศ (วัน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="coupleDay"
-                :rules="[
-                  (val) => val >= 0 || `${'กรุณากรอกลาติดตามคู่สมรส (วัน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ลาติดตามคู่สมรส (วัน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="therapyDay"
-                :rules="[
-                  (val) =>
-                    val >= 0 ||
-                    `${'กรุณากรอกลาไปฟื้นฟูสมรรถภาพด้านอาชีพ (วัน)'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ (วัน)'}`"
-                @update:modelValue="clickEditRow"
-                type="number"
               />
             </div>
           </div>
@@ -323,6 +245,60 @@
       </q-form>
     </q-card>
   </q-dialog>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="การลา" :close="clickClose" />
+        <q-separator />
+        <q-card-section>
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <data-table
+              :rows="rowsTotal"
+              :columns="columnsTotal"
+              :filter="filterTotal"
+              :visible-columns="visibleColumnsTotal"
+              v-model:inputfilter="filterTotal"
+              v-model:inputvisible="visibleColumnsTotal"
+              :nornmalData="true"
+            >
+              <template #columns="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div
+                      v-else-if="
+                        col.name == 'numLeave' ||
+                        col.name == 'sumLeave' ||
+                        col.name == 'totalLeave'
+                      "
+                      class="table_ellipsis"
+                    >
+                      {{
+                        col.value == null
+                          ? ""
+                          : col.value.toLocaleString("en-US")
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </data-table>
+          </div>
+        </q-card-section>
+        <q-separator />
+      </q-form>
+    </q-card>
+  </q-dialog>
   <HistoryTable
     :rows="rowsHistory"
     :columns="columnsHistory"
@@ -336,11 +312,27 @@
     <template #columns="props">
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'year'" class="table_ellipsis">
-            {{ col.value + 543 }}
+          <div v-if="col.name == 'no'">
+            {{ props.rowIndex + 1 }}
           </div>
-          <div v-else-if="col.name == 'createdAt'" class="table_ellipsis">
-            {{ date2Thai(col.value) }}
+          <div v-else-if="col.name == 'dateStartLeave'" class="table_ellipsis">
+            {{
+              dateThaiRange([props.row.dateStartLeave, props.row.dateEndLeave])
+            }}
+          </div>
+
+          <div
+            v-else-if="
+              col.name == 'numLeave' ||
+              col.name == 'sumLeave' ||
+              col.name == 'totalLeave'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else-if="col.name == 'status'" class="table_ellipsis">
+            {{ statusLeave(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
             {{ col.value }}
@@ -362,9 +354,17 @@ import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
 import { useQuasar } from "quasar";
 import type {
   RequestItemsObject,
+  RequestItemsTotalObject,
   DataProps,
 } from "@/modules/04_registry/interface/request/Leave";
-import type { ResponseObject } from "@/modules/04_registry/interface/response/Leave";
+import type {
+  ResponseObject,
+  ResponseTotalObject,
+} from "@/modules/04_registry/interface/response/Leave";
+import type {
+  DataOption,
+  DataOptionLeave,
+} from "@/modules/04_registry/interface/index/Main";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -383,26 +383,58 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
+const {
+  date2Thai,
+  success,
+  messageError,
+  statusLeave,
+  dialogMessage,
+  dateToISO,
+} = mixin;
 const route = useRoute();
+
+const typeLeave = ref<string>("");
+const typeLeaveOption = ref<DataOptionLeave[]>([]);
+const typeLeaveOptionFilter = ref<DataOptionLeave[]>([]);
+
+const statLeave = ref<string>("");
+const statLeaveOption = ref<DataOption[]>([
+  { id: "approve", name: "ผ่านการอนุมัติ" },
+  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
+  { id: "cancel", name: "ยกเลิก" },
+  { id: "waitting", name: "รออนุมัติ" },
+]);
+const statLeaveOptionFilter = ref<DataOption[]>([
+  { id: "approve", name: "ผ่านการอนุมัติ" },
+  { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
+  { id: "cancel", name: "ยกเลิก" },
+  { id: "waitting", name: "รออนุมัติ" },
+]);
+const dateRange = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ลา
+const numLeave = ref<number>(0); //วันที่ ลา
+const numUsedLeave = ref<number>(0); //วันที่ ลา
+const reason = ref<string>(""); //เหตุผล
 const id = ref<string>("");
-const year = ref<number>(0);
-const sickDay = ref<number>();
-const personalDay = ref<number>();
-const maternityDay = ref<number>();
-const wifeDay = ref<number>();
-const sickCount = ref<number>();
-const ordainDay = ref<number>();
-const absentDay = ref<number>();
-const studyDay = ref<number>();
-const agencyDay = ref<number>();
-const coupleDay = ref<number>();
-const therapyDay = ref<number>();
+// const year = ref<number>(0);
+// const sickDay = ref<number>();
+// const personalDay = ref<number>();
+// const maternityDay = ref<number>();
+// const wifeDay = ref<number>();
+// const restDay = ref<number>();
+// const ordainDay = ref<number>();
+// const absentDay = ref<number>();
+// const studyDay = ref<number>();
+// const agencyDay = ref<number>();
+// const coupleDay = ref<number>();
+// const therapyDay = ref<number>();
+const myFormAdd = ref<any>(); //form data input
 const myForm = ref<any>(); //form data input
-const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const edit = ref<boolean>(true); //เช็คการกดปุ่มแก้ไขใน dialog
 const modal = ref<boolean>(false); //modal add detail
 const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
-const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+
+const modalAdd = ref<boolean>(false); //modal add detail
+// const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
 const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
 const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
 const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
@@ -414,152 +446,106 @@ const modalHistory = ref<boolean>(false); //modal ประวัติการ
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
+const filterTotal = ref<string>("");
+const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 profileData.leave.columns.length == 0
   ? (visibleColumns.value = [
-      "year",
-      "sickDay",
-      "personalDay",
-      "maternityDay",
-      "wifeDay",
-      "sickCount",
-      "ordainDay",
-      "absentDay",
-      "studyDay",
-      "agencyDay",
-      "coupleDay",
-      "therapyDay",
+      "no",
+      "typeLeave",
+      "dateStartLeave",
+      "numLeave",
+      "sumLeave",
+      "totalLeave",
+      "status",
+      "reason",
     ])
   : (visibleColumns.value = profileData.leave.columns);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "year",
+    name: "no",
     align: "left",
-    label: "ปี",
+    label: "ลำดับ",
     sortable: true,
-    field: "year",
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "sickDay",
+    name: "typeLeave",
     align: "left",
-    label: "ลาป่วย (วัน)",
+    label: "ประเภทการลา",
     sortable: true,
-    field: "sickDay",
+    field: "typeLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "personalDay",
+    name: "dateStartLeave",
     align: "left",
-    label: "ลากิจส่วนตัว (วัน)",
+    label: "วัน เดือน ปี ที่ลา",
     sortable: true,
-    field: "personalDay",
+    field: "dateStartLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "maternityDay",
-    align: "left",
-    label: "ลาคลอดบุตร (วัน)",
+    name: "numLeave",
+    align: "right",
+    label: "จำนวนวันลา",
     sortable: true,
-    field: "maternityDay",
+    field: "numLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "wifeDay",
-    align: "left",
-    label: "ลาไปช่วยเหลือภริยาที่คลอดบุตร (วัน)",
+    name: "sumLeave",
+    align: "right",
+    label: "ลามาแล้ว",
     sortable: true,
-    field: "wifeDay",
+    field: "sumLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "sickCount",
-    align: "left",
-    label: "ลาพักผ่อน (วัน)",
+    name: "totalLeave",
+    align: "right",
+    label: "รวมเป็น",
     sortable: true,
-    field: "sickCount",
+    field: "totalLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "ordainDay",
+    name: "status",
     align: "left",
-    label: "ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ (วัน)",
+    label: "สถานะ",
     sortable: true,
-    field: "ordainDay",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "absentDay",
-    align: "left",
-    label: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล (วัน)",
+    name: "reason",
+    align: "right",
+    label: "เหตุผล",
     sortable: true,
-    field: "absentDay",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "studyDay",
-    align: "left",
-    label: "ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน (วัน)",
-    sortable: true,
-    field: "studyDay",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "agencyDay",
-    align: "left",
-    label: "ลาไปปฏิบัติงานในองค์การระหว่างประเทศ (วัน)",
-    sortable: true,
-    field: "agencyDay",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "coupleDay",
-    align: "left",
-    label: "ลาติดตามคู่สมรส (วัน)",
-    sortable: true,
-    field: "coupleDay",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "therapyDay",
-    align: "left",
-    label: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ (วัน)",
-    sortable: true,
-    field: "therapyDay",
+    field: "reason",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -568,154 +554,88 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
-    name: "year",
+    name: "no",
     align: "left",
-    label: "ปี",
+    label: "ลำดับ",
     sortable: true,
-    field: "year",
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "sickDay",
+    name: "typeLeave",
     align: "left",
-    label: "ลาป่วย (วัน)",
+    label: "ประเภทการลา",
     sortable: true,
-    field: "sickDay",
+    field: "typeLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "personalDay",
+    name: "dateStartLeave",
     align: "left",
-    label: "ลากิจส่วนตัว (วัน)",
+    label: "วัน เดือน ปี ที่ลา",
     sortable: true,
-    field: "personalDay",
+    field: "dateStartLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "maternityDay",
-    align: "left",
-    label: "ลาคลอดบุตร (วัน)",
+    name: "numLeave",
+    align: "right",
+    label: "จำนวนวันลา",
     sortable: true,
-    field: "maternityDay",
+    field: "numLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "wifeDay",
-    align: "left",
-    label: "ลาไปช่วยเหลือภริยาที่คลอดบุตร (วัน)",
+    name: "sumLeave",
+    align: "right",
+    label: "ลามาแล้ว",
     sortable: true,
-    field: "wifeDay",
+    field: "sumLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "sickCount",
-    align: "left",
-    label: "ลาพักผ่อน (วัน)",
+    name: "totalLeave",
+    align: "right",
+    label: "รวมเป็น",
     sortable: true,
-    field: "sickCount",
+    field: "totalLeave",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "ordainDay",
+    name: "status",
     align: "left",
-    label: "ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ (วัน)",
+    label: "สถานะ",
     sortable: true,
-    field: "ordainDay",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "absentDay",
+    name: "reason",
     align: "left",
-    label: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล (วัน)",
+    label: "เหตุผล",
     sortable: true,
-    field: "absentDay",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "studyDay",
-    align: "left",
-    label: "ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน (วัน)",
-    sortable: true,
-    field: "studyDay",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "agencyDay",
-    align: "left",
-    label: "ลาไปปฏิบัติงานในองค์การระหว่างประเทศ (วัน)",
-    sortable: true,
-    field: "agencyDay",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "coupleDay",
-    align: "left",
-    label: "ลาติดตามคู่สมรส (วัน)",
-    sortable: true,
-    field: "coupleDay",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "therapyDay",
-    align: "left",
-    label: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ (วัน)",
-    sortable: true,
-    field: "therapyDay",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "createdAt",
+    field: "reason",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -723,20 +643,66 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 const visibleColumnsHistory = ref<String[]>([
-  "year",
-  "sickDay",
-  "personalDay",
-  "maternityDay",
-  "wifeDay",
-  "sickCount",
-  "ordainDay",
-  "absentDay",
-  "studyDay",
-  "agencyDay",
-  "coupleDay",
-  "therapyDay",
-  "createdFullName",
-  "createdAt",
+  "no",
+  "typeLeave",
+  "dateStartLeave",
+  "numLeave",
+  "sumLeave",
+  "totalLeave",
+  "status",
+  "reason",
+]);
+const visibleColumnsTotal = ref<String[]>([
+  "typeLeave",
+  "limitLeave",
+  "totalLeave",
+  "remainLeave",
+]);
+const columnsTotal = ref<QTableProps["columns"]>([
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "limitLeave",
+    align: "right",
+    label: "จำนวนวันที่ได้รับ",
+    sortable: true,
+    field: "limitLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "totalLeave",
+    align: "right",
+    label: "จำนวนวันที่ใช้",
+    sortable: true,
+    field: "totalLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remainLeave",
+    align: "right",
+    label: "จำนวนวันที่เหลือ",
+    sortable: true,
+    field: "remainLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 
 watch(visibleColumns, async (count: String[], prevCount: String[]) => {
@@ -748,29 +714,25 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  rows.value = [];
+  loaderPage(true);
   await http
     .get(config.API.profileLeaveId(profileId.value))
     .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
+      const data = res.data.result;
+      //   console.log(data);
       data.map((e: ResponseObject) => {
         rows.value.push({
           id: e.id,
-          year: e.year,
-          sickDay: e.sickDay,
-          personalDay: e.personalDay,
-          maternityDay: e.maternityDay,
-          wifeDay: e.wifeDay,
-          sickCount: e.sickCount,
-          ordainDay: e.ordainDay,
-          absentDay: e.absentDay,
-          studyDay: e.studyDay,
-          agencyDay: e.agencyDay,
-          coupleDay: e.coupleDay,
-          therapyDay: e.therapyDay,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+          typeLeave: e.typeLeave,
+          dateStartLeave: new Date(e.dateStartLeave),
+          dateEndLeave: new Date(e.dateEndLeave),
+          numLeave: e.numLeave,
+          sumLeave: e.sumLeave,
+          totalLeave: e.totalLeave,
+          status: e.status,
+          reason: e.reason,
+          typeLeaveId: e.typeLeaveId,
         });
       });
     })
@@ -778,13 +740,83 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "typeLeaveOption":
+      update(() => {
+        typeLeaveOption.value = typeLeaveOptionFilter.value.filter(
+          (v: DataOptionLeave) =>
+            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+    case "statLeaveOption":
+      update(() => {
+        statLeaveOption.value = statLeaveOptionFilter.value.filter(
+          (v: DataOption) =>
+            v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileLeaveHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          typeLeave: e.typeLeave,
+          dateStartLeave: new Date(e.dateStartLeave),
+          dateEndLeave: new Date(e.dateEndLeave),
+          numLeave: e.numLeave,
+          sumLeave: e.sumLeave,
+          totalLeave: e.totalLeave,
+          status: e.status,
+          reason: e.reason,
+          typeLeaveId: e.typeLeaveId,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const clickEditRowType = () => {
+  const filter = typeLeaveOptionFilter.value.filter(
+    (v: DataOptionLeave) => v.id == typeLeave.value
+  );
+  if (filter.length > 0) {
+    numUsedLeave.value = filter[0].totalLeave;
+  }
+};
+
 /**
- * กดดูข้อมูลก่อนหน้า
+ * เช็คว่ามีการแก้ไขข้อมูล
  */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+// /**
+//  * กดดูข้อมูลก่อนหน้า
+//  */
 const clickPrevious = async () => {
   edit.value = false;
   rowIndex.value -= 1;
@@ -792,9 +824,9 @@ const clickPrevious = async () => {
   await checkRowPage();
 };
 
-/**
- * กดดูข้อมูลต่อไป
- */
+// /**
+//  * กดดูข้อมูลต่อไป
+//  */
 const clickNext = async () => {
   edit.value = false;
   rowIndex.value += 1;
@@ -802,29 +834,35 @@ const clickNext = async () => {
   await checkRowPage();
 };
 
-/**
- * กดดูข้อมูลต่อไป
- */
+// /**
+//  * กดดูข้อมูลต่อไป
+//  */
 const getData = () => {
   const row = rows.value[rowIndex.value];
-  year.value = row.year;
-  sickDay.value = row.sickDay;
-  personalDay.value = row.personalDay;
-  maternityDay.value = row.maternityDay;
-  wifeDay.value = row.wifeDay;
-  sickCount.value = row.sickCount;
-  ordainDay.value = row.ordainDay;
-  absentDay.value = row.absentDay;
-  studyDay.value = row.studyDay;
-  agencyDay.value = row.agencyDay;
-  coupleDay.value = row.coupleDay;
-  therapyDay.value = row.therapyDay;
+  //   year.value = row.year;
+  //   sickDay.value = row.sickDay;
+  //   personalDay.value = row.personalDay;
+  //   maternityDay.value = row.maternityDay;
+  //   wifeDay.value = row.wifeDay;
+  //   restDay.value = row.restDay;
+  //   ordainDay.value = row.ordainDay;
+  //   absentDay.value = row.absentDay;
+  //   studyDay.value = row.studyDay;
+  //   agencyDay.value = row.agencyDay;
+  //   coupleDay.value = row.coupleDay;
+  //   therapyDay.value = row.therapyDay;
   id.value = row.id;
+  typeLeave.value = row.typeLeaveId;
+  statLeave.value = row.status;
+  reason.value = row.reason;
+  dateRange.value = [new Date(row.dateStartLeave), new Date(row.dateEndLeave)];
+  numLeave.value = row.numLeave;
+  numUsedLeave.value = row.sumLeave;
 };
 
-/**
- * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
- */
+// /**
+//  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+//  */
 const checkRowPage = () => {
   editRow.value = false;
   next.value = true;
@@ -837,9 +875,9 @@ const checkRowPage = () => {
   }
 };
 
-/**
- * กดปุ่มแก้ไขใน dialog
- */
+// /**
+//  * กดปุ่มแก้ไขใน dialog
+//  */
 const clickEdit = () => {
   editRow.value = false;
   next.value = false;
@@ -854,11 +892,62 @@ const clickAdd = async () => {
   await addData();
 };
 
+const clickAddLeave = async () => {
+  editRow.value = false;
+  edit.value = true;
+  modalAdd.value = true;
+  modalEdit.value = false;
+  typeLeave.value = "";
+  statLeave.value = "";
+  reason.value = "";
+  dateRange.value = [new Date(), new Date()];
+  numLeave.value = 0;
+  numUsedLeave.value = 0;
+  await clickTotal();
+  if (rowsTotal.value.length > 0) {
+    // console.log(rowsTotal.value);
+    let data: DataOptionLeave[] = [];
+    rowsTotal.value.map((e: ResponseTotalObject) => {
+      data.push({
+        id: e.typeLeaveId,
+        name: e.typeLeave,
+        totalLeave: e.totalLeave,
+      });
+    });
+    typeLeaveOption.value = data;
+    typeLeaveOptionFilter.value = data;
+  }
+  //   await addData();
+};
+
 /**
- * กดบันทึกใน dialog
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
  */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      "info",
+      "ยืนยัน",
+      "public",
+      () => {
+        edit.value = false;
+      },
+      undefined
+    );
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+// /**
+//  * กดบันทึกใน dialog
+//  */
 const clickSave = async () => {
-  myForm.value.validate().then(async (result: boolean) => {
+  myFormAdd.value.validate().then(async (result: boolean) => {
     if (result) {
       if (modalEdit.value) {
         await editData();
@@ -869,30 +958,27 @@ const clickSave = async () => {
   });
 };
 
-/**
- * บันทึกเพิ่มข้อมูล
- */
+// /**
+//  * บันทึกเพิ่มข้อมูล
+//  */
 const saveData = async () => {
-  showLoader();
+  const sum = Number(numLeave.value) + Number(numUsedLeave.value);
+
+  loaderPage(true);
   await http
     .post(config.API.profileLeaveId(profileId.value), {
-      id: id.value,
-      year: year.value,
-      sickDay: sickDay.value,
-      personalDay: personalDay.value,
-      maternityDay: maternityDay.value,
-      wifeDay: wifeDay.value,
-      sickCount: sickCount.value,
-      ordainDay: ordainDay.value,
-      absentDay: absentDay.value,
-      studyDay: studyDay.value,
-      agencyDay: agencyDay.value,
-      coupleDay: coupleDay.value,
-      therapyDay: therapyDay.value,
+      dateStartLeave: dateToISO(dateRange.value[0]),
+      dateEndLeave: dateToISO(dateRange.value[1]),
+      numLeave: numLeave.value,
+      sumLeave: numUsedLeave.value,
+      totalLeave: sum,
+      status: statLeave.value,
+      reason: reason.value,
+      typeLeaveId: typeLeave.value,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
+      modalAdd.value = false;
     })
     .catch((e) => {
       messageError($q, e);
@@ -902,30 +988,27 @@ const saveData = async () => {
     });
 };
 
-/**
- * บันทึกแก้ไขข้อมูล
- */
+// /**
+//  * บันทึกแก้ไขข้อมูล
+//  */
 const editData = async () => {
-  showLoader();
+  const sum = Number(numLeave.value) + Number(numUsedLeave.value);
+
+  loaderPage(true);
   await http
     .put(config.API.profileLeaveId(id.value), {
-      id: id.value,
-      year: year.value,
-      sickDay: sickDay.value,
-      personalDay: personalDay.value,
-      maternityDay: maternityDay.value,
-      wifeDay: wifeDay.value,
-      sickCount: sickCount.value,
-      ordainDay: ordainDay.value,
-      absentDay: absentDay.value,
-      studyDay: studyDay.value,
-      agencyDay: agencyDay.value,
-      coupleDay: coupleDay.value,
-      therapyDay: therapyDay.value,
+      dateStartLeave: dateToISO(dateRange.value[0]),
+      dateEndLeave: dateToISO(dateRange.value[1]),
+      numLeave: numLeave.value,
+      sumLeave: numUsedLeave.value,
+      totalLeave: sum,
+      status: statLeave.value,
+      reason: reason.value,
+      typeLeaveId: typeLeave.value,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
+      modalAdd.value = false;
     })
     .catch((e) => {
       messageError($q, e);
@@ -935,53 +1018,83 @@ const editData = async () => {
     });
 };
 
-/**
- * ลบลบข้อมูล
- */
-const clickDelete = async () => {
-  $q.dialog({
-    title: `ลบข้อมูล`,
-    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
-    cancel: "ยกเลิก",
-    ok: "ยืนยัน",
-    persistent: true,
-  })
-    .onOk(async () => {
-      showLoader();
-      await http
-        .delete(config.API.profileLeaveId(id.value))
-        .then((res) => {
-          success($q, "ลบข้อมูลสำเร็จ");
-          modal.value = false;
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-        });
+const deleteData = async () => {
+  loaderPage(true);
+  await http
+    .delete(config.API.profileLeaveId(id.value))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      modalAdd.value = false;
     })
-    .onCancel(async () => {
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
       await fetchData();
     });
 };
 
+// /**
+//  * ลบลบข้อมูล
+//  */
+const clickDelete = async () => {
+  dialogMessage(
+    $q,
+    `ลบข้อมูล`,
+    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => {
+      await deleteData();
+    },
+    async () => {
+      await fetchData();
+    }
+  );
+};
+const clickCloseLeave = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      "info",
+      "ยืนยัน",
+      "public",
+      () => {
+        modalAdd.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined
+    );
+  } else {
+    modalAdd.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
 /**
  * กดปิด dialog
  */
 const clickClose = async () => {
   if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(async () => {
-      modal.value = false;
-      next.value = false;
-      previous.value = false;
-    });
+    dialogMessage(
+      $q,
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      "info",
+      "ยืนยัน",
+      "primary",
+      () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined
+    );
   } else {
     modal.value = false;
     next.value = false;
@@ -989,112 +1102,101 @@ const clickClose = async () => {
   }
 };
 
-/**
- * กดเลือกข้อมูลที่จะแก้ไข
- * @param props ค่า props ใน row ที่เลือก
- */
+// /**
+//  * กดเลือกข้อมูลที่จะแก้ไข
+//  * @param props ค่า props ใน row ที่เลือก
+//  */
 const selectData = async (props: DataProps) => {
   modalEdit.value = true;
-  modal.value = true;
+  //   modal.value = true;
+  modalAdd.value = true;
   edit.value = false;
-  rawItem.value = props.row;
   rowIndex.value = props.rowIndex;
-  year.value = props.row.year;
-  sickDay.value = props.row.sickDay;
-  personalDay.value = props.row.personalDay;
-  maternityDay.value = props.row.maternityDay;
-  wifeDay.value = props.row.wifeDay;
-  sickCount.value = props.row.sickCount;
-  ordainDay.value = props.row.ordainDay;
-  absentDay.value = props.row.absentDay;
-  studyDay.value = props.row.studyDay;
-  agencyDay.value = props.row.agencyDay;
-  coupleDay.value = props.row.coupleDay;
-  therapyDay.value = props.row.therapyDay;
   id.value = props.row.id;
+
+  typeLeave.value = props.row.typeLeaveId;
+  statLeave.value = props.row.status;
+  reason.value = props.row.reason;
+  dateRange.value = [
+    new Date(props.row.dateStartLeave),
+    new Date(props.row.dateEndLeave),
+  ];
+  numLeave.value = props.row.numLeave;
+  numUsedLeave.value = props.row.sumLeave;
+  await clickTotal();
+  if (rowsTotal.value.length > 0) {
+    // console.log(rowsTotal.value);
+    let data: DataOptionLeave[] = [];
+    rowsTotal.value.map((e: ResponseTotalObject) => {
+      data.push({
+        id: e.typeLeaveId,
+        name: e.typeLeave,
+        totalLeave: e.totalLeave,
+      });
+    });
+    typeLeaveOption.value = data;
+    typeLeaveOptionFilter.value = data;
+  }
   await checkRowPage();
 };
 
 /**
  * กดปุ่มเพิ่มบน table
  */
-const addData = () => {
-  modalEdit.value = false;
+const addData = async () => {
+  //   modalEdit.value = false;
   modal.value = true;
-  edit.value = true;
-  year.value = new Date().getFullYear();
-  sickDay.value = 0;
-  personalDay.value = 0;
-  maternityDay.value = 0;
-  wifeDay.value = 0;
-  sickCount.value = 0;
-  ordainDay.value = 0;
-  absentDay.value = 0;
-  studyDay.value = 0;
-  agencyDay.value = 0;
-  coupleDay.value = 0;
-  therapyDay.value = 0;
-  sickDay.value = 0;
+  //   edit.value = true;
+  await clickTotal();
 };
 
-/**
- * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
- */
-const clickCancel = async () => {
-  if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(async () => {
-      edit.value = false;
-      await checkRowPage();
-      await getData();
-    });
-  } else {
-    edit.value = false;
-    await checkRowPage();
-  }
-};
+// /**
+//  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+//  */
+// const clickCancel = async () => {
+//   if (editRow.value == true) {
+//     $q.dialog({
+//       title: `ข้อมูลมีการแก้ไข`,
+//       message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+//       cancel: "ยกเลิก",
+//       ok: "ยืนยัน",
+//       persistent: true,
+//     }).onOk(async () => {
+//       edit.value = false;
+//       await checkRowPage();
+//       await getData();
+//     });
+//   } else {
+//     edit.value = false;
+//     await checkRowPage();
+//   }
+// };
 
-/**
- * เช็คว่ามีการแก้ไขข้อมูล
- */
-const clickEditRow = () => {
-  editRow.value = true;
-};
+// /**
+//  * เช็คว่ามีการแก้ไขข้อมูล
+//  */
+// const clickEditRow = () => {
+//   editRow.value = true;
+// };
 
 /**
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
  */
-const clickHistory = async (row: RequestItemsObject) => {
-  modalHistory.value = true;
-  showLoader();
+const clickTotal = async () => {
+  rowsTotal.value = [];
+  loaderPage(true);
   await http
-    .get(config.API.profileLeaveHisId(row.id))
+    .get(config.API.profileLeaveTotalId(profileId.value))
     .then((res) => {
       let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: ResponseObject) => {
-        rowsHistory.value.push({
-          id: e.id,
-          year: e.year,
-          sickDay: e.sickDay,
-          personalDay: e.personalDay,
-          maternityDay: e.maternityDay,
-          wifeDay: e.wifeDay,
-          sickCount: e.sickCount,
-          ordainDay: e.ordainDay,
-          absentDay: e.absentDay,
-          studyDay: e.studyDay,
-          agencyDay: e.agencyDay,
-          coupleDay: e.coupleDay,
-          therapyDay: e.therapyDay,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+      data.map((e: ResponseTotalObject) => {
+        rowsTotal.value.push({
+          typeLeaveId: e.typeLeaveId,
+          totalLeave: e.totalLeave,
+          limitLeave: e.limitLeave,
+          remainLeave: e.remainLeave,
+          typeLeave: e.typeLeave,
         });
       });
     })
@@ -1102,22 +1204,46 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
-/**
- * validate input ใน dialog
- */
+// /**
+//  * validate input ใน dialog
+//  */
 const validateData = async () => {
   checkValidate.value = true;
-  await myForm.value.validate().then((result: boolean) => {
+  await myFormAdd.value.validate().then((result: boolean) => {
     if (result == false) {
       checkValidate.value = false;
     }
   });
 };
 
+// /**
+//  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+//  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+//  */
+// const getClass = (val: boolean) => {
+//   return {
+//     "full-width inputgreen cursor-pointer": val,
+//     "full-width cursor-pointer": !val,
+//   };
+// };
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+const dateThaiRange = (val: [Date, Date]) => {
+  if (val === null) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+};
+
 /**
  * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
diff --git a/src/modules/04_registry/components/Other.vue b/src/modules/04_registry/components/Other.vue
index 17a1291a9..9dd6f1094 100644
--- a/src/modules/04_registry/components/Other.vue
+++ b/src/modules/04_registry/components/Other.vue
@@ -194,7 +194,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, success, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -302,7 +302,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileOtherId(profileId.value))
     .then((res) => {
@@ -322,7 +322,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -407,7 +407,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileOtherId(profileId.value), {
       id: id.value,
@@ -430,7 +430,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileOtherId(id.value), {
       id: id.value,
@@ -461,7 +461,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileOtherId(id.value))
         .then((res) => {
@@ -565,7 +565,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileOtherHisId(row.id))
     .then((res) => {
@@ -585,7 +585,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index c7db0dca4..a048be498 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -2,11 +2,24 @@
   <div class="col-12 row">
     <div class="row col-12" style="padding-top: 80px">
       <div id="information" name="1" class="row col-12 information">
-        <Informationvue
+        <!-- <Informationvue
           v-model:statusEdit="statusEdit"
           :profileType="profileType"
+        /> -->
+        <Information
+          v-model:statusEdit="statusEdit"
+          :fetchDataProfile="fetchData"
         />
       </div>
+      <div id="government" name="16" class="row col-12 q-mt-md">
+        <Government v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="address" name="17" class="row col-12 q-mt-md">
+        <Address v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="family" name="18" class="row col-12 q-mt-md">
+        <Family v-model:statusEdit="statusEdit" />
+      </div>
       <div id="certicate" name="15" class="row col-12 q-mt-md">
         <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
@@ -29,7 +42,12 @@
         />
       </div>
       <div id="position" name="7" class="row col-12 q-mt-md">
-        <SalaryVue v-model:statusEdit="statusEdit" />
+        <SalaryVue
+          v-model:statusEdit="statusEdit"
+          v-if="profileType === 'officer'"
+        />
+
+        <SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else />
       </div>
       <div id="rule" name="8" class="row col-12 q-mt-md">
         <DisciplineVue v-model:statusEdit="statusEdit" />
@@ -284,7 +302,9 @@
                   style="padding: 5px"
                 >
                   {{ date2Thai(n.createdDate) }}
+
                   <q-btn
+                    v-if="!n.isActive"
                     icon="delete"
                     unelevated
                     dense
@@ -486,13 +506,13 @@ import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import Informationvue from "@/modules/04_registry/components/Information/layout.vue";
 import EducationVue from "@/modules/04_registry/components/Education.vue";
 import TrainVue from "@/modules/04_registry/components/Train.vue";
 import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
 import CoinedVue from "@/modules/04_registry/components/Coin.vue";
 import AssessmentVue from "@/modules/04_registry/components/Assessment.vue";
 import SalaryVue from "@/modules/04_registry/components/Salary.vue";
+import SalaryEmployeeVue from "@/modules/04_registry/components/SalaryEmployee.vue";
 import DisciplineVue from "@/modules/04_registry/components/Discipline.vue";
 import LeaveVue from "@/modules/04_registry/components/Leave.vue";
 import TalentVue from "@/modules/04_registry/components/Talent.vue";
@@ -501,6 +521,11 @@ import RecordVue from "@/modules/04_registry/components/Record.vue";
 import OtherVue from "@/modules/04_registry/components/Other.vue";
 import DocumentVue from "@/modules/04_registry/components/Document.vue";
 import Certicate from "@/modules/04_registry/components/Information/Certicate.vue";
+import Information from "@/modules/04_registry/components/Information/Information.vue";
+import Government from "@/modules/04_registry/components/Information/Government.vue";
+import Address from "@/modules/04_registry/components/Information/Address.vue";
+import Family from "@/modules/04_registry/components/Information/Family.vue";
+import OldName from "@/modules/04_registry/components/Information/OldName.vue";
 import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -509,15 +534,7 @@ const $q = useQuasar();
 const store = useDataStore();
 const { changeTab, loaderPage } = store;
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dateToISO,
-  modalConfirm,
-  messageError,
-  dialogMessage,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
 const route = useRoute();
 const router = useRouter();
 const imageUrl = ref<any>(null);
@@ -593,7 +610,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAvatarId(profileId.value))
     .then((res) => {
@@ -617,12 +634,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const checkProfileData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileCheckId(profileId.value))
     .then((res) => {
@@ -633,12 +650,12 @@ const checkProfileData = async () => {
       router.push("/registry");
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchAvatarHistory = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAvatarHistoryId(profileId.value))
     .then((res) => {
@@ -650,6 +667,7 @@ const fetchAvatarHistory = async () => {
           avatar: e.avatar,
           avatarId: e.avatarId,
           createdDate: new Date(e.createdDate),
+          isActive: e.isActive,
         });
       });
     })
@@ -657,7 +675,7 @@ const fetchAvatarHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -666,7 +684,7 @@ const uploadImage = async (e: any) => {
   if (input.length > 0) {
     const formData = new FormData();
     formData.append("FileData", input[0]);
-    showLoader();
+    loaderPage(true);
     await http
       .post(config.API.profileAvatarId(profileId.value), formData)
       .then((res) => {})
@@ -681,31 +699,37 @@ const uploadImage = async (e: any) => {
   }
 };
 
-const deletePhoto = async (id: string) => {
-  //   dialogMessage(
-  //     $q,
-  //     "ลบข้อมูล",
-  //     "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
-  //     "delete",
-  //     undefined,
-  //     "red",
-  //     undefined,
-  //     undefined,
-  //     false
-  //   );
-  showLoader();
+const fetchDataDelete = async (id: string) => {
+  loaderPage(true);
   await http
     .delete(config.API.profileAvatarHistoryId(id))
-    .then((res) => {})
+    .then((res) => {
+      success($q, "ลบรูปภาพสำเร็จ");
+    })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
       await fetchData();
-      dialogImage.value = false;
+      await clickImage();
+      //   dialogImage.value = false;
     });
 };
 
+const deletePhoto = async (id: string) => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    undefined,
+    "red",
+    () => fetchDataDelete(id),
+    undefined,
+    false
+  );
+};
+
 const selectAvatarHistory = async () => {
   if (activeImage.value == null) {
     dialogMessage(
@@ -721,7 +745,7 @@ const selectAvatarHistory = async () => {
     );
     return;
   }
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileAvatarId(profileId.value), {
       avatar: activeImage.value.avatarId,
@@ -789,7 +813,7 @@ const downloadKP7Short = () => {};
 
 const clickKp7 = async () => {
   window.open(config.API.profileReportId(profileId.value));
-  //   showLoader();
+  //   loaderPage(true);
   //   await http
   //     .get(config.API.profileReportId(profileId.value))
   //     .then((res) => {
@@ -802,7 +826,7 @@ const clickKp7 = async () => {
   //     })
   //     .catch((e) => {messageError($q, e);})
   //     .finally(() => {
-  //       hideLoader();
+  //       loaderPage(false);
   //     });
 };
 
@@ -821,7 +845,7 @@ const downloadFilePDF = async (res: string, fileName: string) => {
 
 const clickKp7Short = async () => {
   window.open(config.API.profileKp7ShortId(profileId.value));
-  //   showLoader();
+  //   loaderPage(true);
   //   await http
   //     .get(config.API.profileKp7ShortId(profileId.value))
   //     .then((res) => {
@@ -834,17 +858,22 @@ const clickKp7Short = async () => {
   //     })
   //     .catch((e) => {messageError($q, e);})
   //     .finally(() => {
-  //       hideLoader();
+  //       loaderPage(false);
   //     });
 };
 
 const clickRetire = async () => {
   if (reasonStatus.value == true) {
-    modalConfirm(
+    dialogMessage(
       $q,
       "โปรดยืนยัน",
-      "ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่?",
-      Retire
+      "ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
+      "info",
+      undefined,
+      "primary",
+      Retire,
+      undefined,
+      false
     );
   } else {
     leaveDate.value = new Date();
@@ -858,7 +887,7 @@ const clickRetire = async () => {
 
 const Retire = async () => {
   if (reasonStatus.value == true) {
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.profileReactive(profileId.value))
       .then((res) => {
@@ -873,7 +902,7 @@ const Retire = async () => {
         router.push("/registry");
       });
   } else {
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.profileDeactive(profileId.value), {
         leaveDate: dateToISO(leaveDate.value),
diff --git a/src/modules/04_registry/components/Record.vue b/src/modules/04_registry/components/Record.vue
index 9f5449989..326ebe953 100644
--- a/src/modules/04_registry/components/Record.vue
+++ b/src/modules/04_registry/components/Record.vue
@@ -213,8 +213,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -352,7 +351,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileNopaidId(profileId.value))
     .then((res) => {
@@ -373,7 +372,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -459,7 +458,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileNopaidId(profileId.value), {
       id: id.value,
@@ -483,7 +482,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileNopaidId(id.value), {
       id: id.value,
@@ -515,7 +514,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileNopaidId(id.value))
         .then((res) => {
@@ -621,7 +620,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileNopaidHisId(row.id))
     .then((res) => {
@@ -642,7 +641,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/04_registry/components/Salary.vue b/src/modules/04_registry/components/Salary.vue
index 39860d0e9..e5d8812c7 100644
--- a/src/modules/04_registry/components/Salary.vue
+++ b/src/modules/04_registry/components/Salary.vue
@@ -26,6 +26,16 @@
               <div v-if="col.name == 'date'" class="table_ellipsis">
                 {{ date2Thai(col.value) }}
               </div>
+              <div
+                v-else-if="
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
               </div>
@@ -170,9 +180,9 @@
                         :borderless="!edit"
                         v-model="posNoId"
                         :rules="[
-                          (val:string) => !!val || `${'กรุณาเลือกเลขที่ตำแหน่ง'}`,
+                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
                         ]"
-                        :label="`${'เลขที่ตำแหน่ง'}`"
+                        :label="`${'ตำแหน่งเลขที่'}`"
                         @update:modelValue="clickEditRow"
                         emit-value
                         map-options
@@ -506,6 +516,16 @@
           >
             {{ date2Thai(col.value) }}
           </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
           <div v-else class="table_ellipsis">
             {{ col.value }}
           </div>
@@ -551,8 +571,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -592,6 +611,23 @@ const selected = ref<string>("");
 const nodesTree = ref<treeTab[]>([]);
 const refSelected = ref<DataOption | null>(null);
 const refOptions = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
   {
     id: "0",
     name: "****************  ครู  **********************",
@@ -707,6 +743,23 @@ const refOptions = ref<DataOption[]>([
   },
 ]);
 const refOptionsFilter = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
   {
     id: "0",
     name: "****************  ครู  **********************",
@@ -930,7 +983,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "posNo",
     align: "left",
-    label: "เลขที่ตำแหน่ง",
+    label: "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
@@ -1097,7 +1150,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "posNo",
     align: "left",
-    label: "เลขที่ตำแหน่ง",
+    label: "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
@@ -1312,7 +1365,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 };
 
 const nodeTree = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -1326,7 +1379,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1334,7 +1387,7 @@ const nodeTree = async () => {
  * get รายการ ตำแหน่ง
  */
 const fetchPosition = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.position)
     .then((res) => {
@@ -1411,12 +1464,12 @@ const fetchPosition = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileSalaryId(profileId.value))
     .then((res) => {
@@ -1458,7 +1511,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1468,7 +1521,7 @@ const onSelected = async (id: string) => {
 
 const fetchOrganization = async (id: string) => {
   if (selected.value != "") {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.organizationName(id))
       .then((res) => {
@@ -1479,13 +1532,13 @@ const fetchOrganization = async (id: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
 
 const fetchPositionNumber = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getPositionNumberIdByOcId(id))
     .then((res) => {
@@ -1501,7 +1554,7 @@ const fetchPositionNumber = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1603,7 +1656,7 @@ const templateDetail = async () => {
     (r: DataOption) => r.id == posNoId.value
   );
   if (posNoF.length > 0) {
-    salaryClass.value = salaryClass.value + `เลขที่ตำแหน่ง${posNoF[0].name} `;
+    salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
   }
 
   const positionLineF = positionLineOptions.value.filter(
@@ -1664,7 +1717,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileSalaryId(profileId.value), {
       date: dateToISO(date.value),
@@ -1699,7 +1752,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileSalaryId(id.value), {
       date: dateToISO(date.value),
@@ -1742,7 +1795,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileSalaryId(id.value))
         .then((res) => {
@@ -1884,7 +1937,7 @@ const clickEditRowRef = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileSalaryHisId(row.id))
     .then((res) => {
@@ -1926,7 +1979,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/04_registry/components/SalaryEmployee.vue b/src/modules/04_registry/components/SalaryEmployee.vue
new file mode 100644
index 000000000..b31a5ed35
--- /dev/null
+++ b/src/modules/04_registry/components/SalaryEmployee.vue
@@ -0,0 +1,1850 @@
+divdivdivdivdivdiv
+<!-- card ตำแหน่ง/ค่าจ้าง -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ตำแหน่ง/ค่าจ้าง (ลูกจ้าง)"
+        icon="mdi-cash"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 60vw; max-width: 80vw">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ตำแหน่ง/ค่าจ้าง" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <q-card class="fit q-pa-sm">
+              <q-scroll-area visible style="height: 60vh">
+                <div class="row col-12 q-col-gutter-xs">
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="date"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(date)"
+                          :rules="[
+                                (val:string) =>
+                                  !!val ||
+                                  `${'กรุณาเลือกวัน เดือน ปี รับตำแหน่ง'}`,
+                              ]"
+                          :label="`${'วัน เดือน ปี รับตำแหน่ง'}`"
+                          hide-bottom-space
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <!-- <selector
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="posNoId"
+                      :rules="[
+                            (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
+                          ]"
+                      :label="`${'ตำแหน่งเลขที่'}`"
+                      @update:modelValue="clickEditRow"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="posNoOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'posNo'
+                        ) "
+                    /> -->
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="posNoEmployee"
+                      :rules="[
+                            (val:string) =>
+                              !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`,
+                          ]"
+                      :label="`${'ตำแหน่งเลขที่'}`"
+                      @update:modelValue="clickEditRow"
+                      hide-bottom-space
+                      autogrow
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <selector
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="employeePositionId"
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                      :label="`${'ตำแหน่ง'}`"
+                      @update:modelValue="clickEditRow"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="employeePositionOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
+                        ) "
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
+                    <selector
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="employeePositionSideId"
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือกด้านของตำแหน่ง'}`]"
+                      :label="`${'ด้านของตำแหน่ง'}`"
+                      @update:modelValue="clickEditRow"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="employeePositionSideOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
+                        ) "
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <selector
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="employeeLevelId"
+                      :rules="[
+                            (val:string) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`,
+                          ]"
+                      :label="`${'ระดับชั้นงาน'}`"
+                      @update:modelValue="clickEditRow"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="employeeLevelOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
+                        ) "
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <selector
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="employeeGroupId"
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                      :label="`${'กลุ่มงาน'}`"
+                      @update:modelValue="clickEditRow"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="employeeGroupOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
+                        ) "
+                    />
+                  </div>
+                  <div class="col-xs-12">
+                    <selector
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="agencyId"
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือกสังกัด'}`]"
+                      :label="`${'สังกัด'}`"
+                      @update:model-value="(value:string) => selectAgency(value)"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="agencyOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
+                        ) "
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="amount"
+                      :rules="[(val:string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
+                      :label="`${'ค่าจ้าง'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div>
+                  <!-- <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="positionSalaryAmount"
+                      :rules="[
+                            (val:string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                          ]"
+                      :label="`${'เงินประจำตำแหน่ง'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="mouthSalaryAmount"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                      ]"
+                      :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div> -->
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="salaryClass"
+                      :rules="[
+                            (val:string) =>
+                              !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
+                          ]"
+                      :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                      @update:modelValue="clickEditRow"
+                      hide-bottom-space
+                      autogrow
+                    >
+                      <!-- <template v-slot:append>
+                        <q-btn
+                          color="info"
+                          flat
+                          dense
+                          round
+                          size="14px"
+                          icon="mdi-plus"
+                          @click="templateDetail"
+                          :disable="!edit"
+                        />
+                      </template> -->
+                    </q-input>
+                  </div>
+
+                  <div class="row col-xs-12 col-sm-12 col-md-12">
+                    <selector
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="refSelected"
+                      :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
+                      @update:modelValue="clickEditRowRef"
+                      option-label="name"
+                      :options="refOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
+                        ) "
+                    />
+                  </div>
+                  <div class="col-xs-12 col-sm-12 col-md-12">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="salaryRef"
+                      :rules="[
+                            (val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
+                          ]"
+                      :label="`${'เอกสารอ้างอิง'}`"
+                      @update:modelValue="clickEditRow"
+                      type="textarea"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+              </q-scroll-area>
+            </q-card>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsEmployee,
+  DataPropsEmployee,
+} from "@/modules/04_registry/interface/request/Salary";
+import type { ResponseObjectEmployee } from "@/modules/04_registry/interface/response/Salary";
+import type {
+  DataOption,
+  treeTab,
+} from "@/modules/04_registry/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const amount = ref<number | null>(null);
+const positionSalaryAmount = ref<number | null>(null);
+const mouthSalaryAmount = ref<number | null>(null);
+
+const posNoId = ref<string>("");
+const posNoEmployee = ref<string>("");
+const posNoOptions = ref<DataOption[]>([]);
+const posNoOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionId = ref<string>("");
+const employeePositionOptions = ref<DataOption[]>([]);
+const employeePositionOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionSideId = ref<string>("");
+const employeePositionSideOptions = ref<DataOption[]>([]);
+const employeePositionSideOptionsFilter = ref<DataOption[]>([]);
+
+const employeeLevelId = ref<string>("");
+const employeeLevelOptions = ref<DataOption[]>([]);
+const employeeLevelOptionsFilter = ref<DataOption[]>([]);
+
+const employeeGroupId = ref<string>("");
+const employeeGroupOptions = ref<DataOption[]>([]);
+const employeeGroupOptionsFilter = ref<DataOption[]>([]);
+
+const agencyId = ref<string>("");
+const agencyOptions = ref<DataOption[]>([]);
+const agencyOptionsFilter = ref<DataOption[]>([]);
+
+const refSelected = ref<DataOption | null>(null);
+const refOptions = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const refOptionsFilter = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+]);
+const salaryClass = ref<string>();
+const salaryRef = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<ResponseObjectEmployee>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<ResponseObjectEmployee[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขตำแหน่ง/ค่าจ้าง"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(route.params.id.toString());
+const rows = ref<ResponseObjectEmployee[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.salary.columns.length == 0
+  ? (visibleColumns.value = [
+      "date",
+      "amount",
+      "positionSalaryAmount",
+      "mouthSalaryAmount",
+      "oc",
+      "positionEmployeePosition",
+      "posNo",
+      "positionEmployeePositionSide",
+      "positionEmployeeLevel",
+      "positionEmployeeGroup",
+      "salaryClass",
+      "salaryRef",
+    ])
+  : (visibleColumns.value = profileData.salary.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี รับตำแหน่ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeLevel",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "positionEmployeeLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "salaryClass",
+    align: "left",
+    label: "ตำแหน่ง (รายละเอียด)",
+    sortable: true,
+    field: "salaryClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี รับตำแหน่ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeLevel",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "positionEmployeeLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryClass",
+    align: "left",
+    label: "ตำแหน่ง (รายละเอียด)",
+    sortable: true,
+    field: "salaryClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "positionEmployeePosition",
+  "posNo",
+  "positionEmployeePositionSide",
+  "positionEmployeeLevel",
+  "positionEmployeeGroup",
+  "salaryClass",
+  "salaryRef",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("salary", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+  await fetchDataSelector();
+});
+
+const fetchDataSelector = async () => {
+  loaderPage(true);
+  await fetchEmployeePosition();
+  await fetchEmployeePositionSide();
+  await fetchEmployeeLevel();
+  await fetchEmployeeGroup();
+  await fetchAgency();
+  loaderPage(false);
+};
+// ตำแหน่ง
+const fetchEmployeePosition = async () => {
+  await http
+    .get(config.API.positionEmployeePosition)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeePositionOptions.value = option;
+      employeePositionOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// ด้านของตำแหน่ง
+const fetchEmployeePositionSide = async () => {
+  await http
+    .get(config.API.positionEmployeePositionSide)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeePositionSideOptions.value = option;
+      employeePositionSideOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// ระดับชั้นงาน
+const fetchEmployeeLevel = async () => {
+  await http
+    .get(config.API.positionEmployeeLevel)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeeLevelOptions.value = option;
+      employeeLevelOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+// กลุ่มงาน
+const fetchEmployeeGroup = async () => {
+  await http
+    .get(config.API.positionEmployeeGroup)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+
+      employeeGroupOptions.value = option;
+      employeeGroupOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+// สังกัด
+const fetchAgency = async () => {
+  await http
+    .get(config.API.organizationRoot)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.label.toString() });
+      });
+
+      agencyOptions.value = option;
+      agencyOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+const selectAgency = (val: string) => {
+  fetchPositionNumber(val);
+  clickEditRow();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "posNo":
+      update(() => {
+        posNoOptions.value = posNoOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeePosition":
+      update(() => {
+        employeePositionOptions.value =
+          employeePositionOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeePositionSide":
+      update(() => {
+        employeePositionSideOptions.value =
+          employeePositionSideOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeeLevel":
+      update(() => {
+        employeeLevelOptions.value = employeeLevelOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "employeeGroup":
+      update(() => {
+        employeeGroupOptions.value = employeeGroupOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "agency":
+      update(() => {
+        agencyOptions.value = agencyOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "ref":
+      update(() => {
+        refOptions.value = refOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const fetchData = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileSalaryEmployeeId(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log(data);
+      rows.value = [];
+      data.map((e: ResponseObjectEmployee) => {
+        rows.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          amount: e.amount,
+          positionSalaryAmount: e.positionSalaryAmount,
+          mouthSalaryAmount: e.mouthSalaryAmount,
+          oc: e.oc,
+          ocId: e.ocId,
+          posNo: e.posNo,
+          posNoId: e.posNoId,
+          posNoEmployee: e.posNoEmployee,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          positionEmployeeGroupId: e.positionEmployeeGroupId,
+          positionEmployeeLevel: e.positionEmployeeLevel,
+          positionEmployeeLevelId: e.positionEmployeeLevelId,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionId: e.positionEmployeePositionId,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+          salaryClass: e.salaryClass,
+          salaryRef: e.salaryRef,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const fetchPositionNumber = async (id: string) => {
+  //   loaderPage(true);
+  await http
+    .get(config.API.getPositionNumberIdByOcId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      posNoOptions.value = option;
+      posNoOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = async () => {
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  amount.value = row.amount;
+  positionSalaryAmount.value = row.positionSalaryAmount;
+  mouthSalaryAmount.value = row.mouthSalaryAmount;
+  //   positionId.value = row.positionId;
+  //   posNoId.value = row.posNoId;
+  //   positionLineId.value = row.positionLineId;
+  //   positionPathSideId.value = row.positionPathSideId;
+  //   positionTypeId.value = row.positionTypeId;
+  //   positionLevelId.value = row.positionLevelId;
+  //   positionExecutiveId.value = row.positionExecutiveId;
+  //   positionExecutiveSideId.value = row.positionExecutiveSideId;
+  posNoId.value = row.posNoId ?? "";
+  posNoEmployee.value = row.posNoEmployee ?? "";
+  employeePositionId.value = row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = row.positionEmployeeGroupId ?? "";
+  agencyId.value = row.ocId ?? "";
+
+  salaryClass.value = row.salaryClass ?? "";
+  salaryRef.value = row.salaryRef ?? "";
+  id.value = row.id;
+  await fetchPositionNumber(row.ocId ?? "");
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  //   console.log(rowIndex.value);
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * gen ตำแหน่ง (รายละเอียด)
+ */
+const templateDetail = async () => {
+  //   salaryClass.value = "";
+  //   if (ocId.value != "") {
+  //     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
+  //   }
+  //   const positionF = positionOptions.value.filter(
+  //     (r: DataOption) => r.id == positionId.value
+  //   );
+  //   if (positionF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
+  //   }
+  //   const posNoF = posNoOptions.value.filter(
+  //     (r: DataOption) => r.id == posNoId.value
+  //   );
+  //   if (posNoF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
+  //   }
+  //   const positionLineF = positionLineOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLineId.value
+  //   );
+  //   if (positionLineF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
+  //   }
+  //   const positionPathSideF = positionSideOptions.value.filter(
+  //     (r: DataOption) => r.id == positionPathSideId.value
+  //   );
+  //   if (positionPathSideF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
+  //   }
+  //   const positionTypeF = positionTypeOptions.value.filter(
+  //     (r: DataOption) => r.id == positionTypeId.value
+  //   );
+  //   if (positionTypeF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ประเภทตำแหน่ง${positionTypeF[0].name} `;
+  //   }
+  //   const positionLevelF = positionLevelOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLevelId.value
+  //   );
+  //   if (positionLevelF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
+  //   }
+  //   const positionExecutiveF = positionExecutiveOptions.value.filter(
+  //     (r: DataOption) => r.id == positionExecutiveId.value
+  //   );
+  //   if (positionExecutiveF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
+  //   }
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  loaderPage(true);
+  await http
+    .post(config.API.profileSalaryEmployeeId(profileId.value), {
+      amount: amount.value,
+      date: dateToISO(date.value),
+      positionSalaryAmount: positionSalaryAmount.value,
+      mouthSalaryAmount: mouthSalaryAmount.value,
+      ocId: agencyId.value,
+      //   posNoId: posNoId.value,
+      posNoEmployee: posNoEmployee.value,
+      positionEmployeeGroupId: employeeGroupId.value,
+      positionEmployeeLevelId: employeeLevelId.value,
+      positionEmployeePositionId: employeePositionId.value,
+      positionEmployeePositionSideId: employeePositionSideId.value,
+      salaryClass: salaryClass.value,
+      salaryRef: salaryRef.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileSalaryEmployeeId(id.value), {
+      amount: amount.value,
+      date: dateToISO(date.value),
+      positionSalaryAmount: positionSalaryAmount.value,
+      mouthSalaryAmount: mouthSalaryAmount.value,
+      ocId: agencyId.value,
+      //   posNoId: posNoId.value,
+      posNoEmployee: posNoEmployee.value,
+      positionEmployeeGroupId: employeeGroupId.value,
+      positionEmployeeLevelId: employeeLevelId.value,
+      positionEmployeePositionId: employeePositionId.value,
+      positionEmployeePositionSideId: employeePositionSideId.value,
+      salaryClass: salaryClass.value,
+      salaryRef: salaryRef.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบข้อมูล
+ */
+const fetchDataDelete = async () => {
+  loaderPage(true);
+  await http
+    .delete(config.API.profileSalaryId(id.value))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ *  dialog ลบข้อมูล
+ */
+const clickDelete = async () => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await fetchDataDelete(),
+    async () => await fetchData(),
+    false
+  );
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined,
+      false
+    );
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataPropsEmployee) => {
+  //   console.log(props.row);
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  amount.value = props.row.amount;
+  positionSalaryAmount.value = props.row.positionSalaryAmount;
+  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
+
+  posNoId.value = props.row.posNoId ?? "";
+  posNoEmployee.value = props.row.posNoEmployee ?? "";
+  employeePositionId.value = props.row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = props.row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = props.row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = props.row.positionEmployeeGroupId ?? "";
+  agencyId.value = props.row.ocId ?? "";
+
+  //   refSelected.value = props.row
+  salaryClass.value = props.row.salaryClass ?? "";
+  salaryRef.value = props.row.salaryRef ?? "";
+  id.value = props.row.id;
+  await fetchPositionNumber(props.row.ocId ?? "");
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  amount.value = null;
+  positionSalaryAmount.value = null;
+  mouthSalaryAmount.value = null;
+
+  posNoId.value = "";
+  posNoEmployee.value = "";
+  employeePositionId.value = "";
+  employeePositionSideId.value = "";
+  employeeLevelId.value = "";
+  employeeGroupId.value = "";
+  agencyId.value = "";
+  agencyOptions.value = [];
+
+  salaryClass.value = "";
+  refSelected.value = null;
+  salaryRef.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันยกเลิกการแก้ไขใช่หรือไม่",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        edit.value = false;
+        await checkRowPage();
+        await getData();
+      },
+      undefined,
+      false
+    );
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRowRef = () => {
+  editRow.value = true;
+  salaryRef.value = refSelected.value?.name;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsEmployee) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileSalaryHisId(row.id))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log("clickHistory", data);
+      rowsHistory.value = [];
+      data.map((e: ResponseObjectEmployee) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          amount: e.amount,
+          positionSalaryAmount: e.positionSalaryAmount,
+          mouthSalaryAmount: e.mouthSalaryAmount,
+          oc: e.oc,
+          ocId: e.ocId,
+          posNo: e.posNo,
+          posNoId: e.posNoId,
+          posNoEmployee: e.posNoEmployee,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          positionEmployeeGroupId: e.positionEmployeeGroupId,
+          positionEmployeeLevel: e.positionEmployeeLevel,
+          positionEmployeeLevelId: e.positionEmployeeLevelId,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionId: e.positionEmployeePositionId,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+          salaryClass: e.salaryClass,
+          salaryRef: e.salaryRef,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/modules/04_registry/components/Table.vue b/src/modules/04_registry/components/Table.vue
index 14f3dba89..264c22d02 100644
--- a/src/modules/04_registry/components/Table.vue
+++ b/src/modules/04_registry/components/Table.vue
@@ -5,9 +5,11 @@
       :header="name"
       :icon="icon"
       :add="checkAdd"
+      :addleave="checkAddLeave"
       :addData="true"
       :history="false"
       :disable="statusEdit"
+      :iconAdd="iconAdd"
     />
     <q-space />
     <div class="items-center" style="display: flex" v-if="headerShow">
@@ -95,6 +97,10 @@ const props = defineProps({
   inputfilter: String,
   name: String,
   icon: String,
+  iconAdd: {
+    type: String,
+    default: null,
+  },
   inputvisible: Array,
   editvisible: Boolean,
   headerShow: {
@@ -113,6 +119,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
   cancel: {
     type: Function,
     default: () => console.log("not function"),
@@ -143,6 +153,10 @@ const paginationLabel = (start: string, end: string, total: string) => {
   return start + "-" + end + " ใน " + total;
 };
 
+const checkAddLeave = () => {
+  props.addleave();
+};
+
 const checkAdd = () => {
   props.add();
 };
diff --git a/src/modules/04_registry/components/TableProfile.vue b/src/modules/04_registry/components/TableProfile.vue
index 778e2f88a..ac3d0a81e 100644
--- a/src/modules/04_registry/components/TableProfile.vue
+++ b/src/modules/04_registry/components/TableProfile.vue
@@ -119,7 +119,29 @@
             <div class="dialog-card-contain">
               <q-card-section class="q-pa-md">
                 <div class="row col-12 q-col-gutter-sm">
-                  <div class="col-xs-12 col-sm-4">
+                  <div class="col-xs-12 col-sm-3">
+                    <selector
+                      hide-bottom-space
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
+                      outlined
+                      dense
+                      lazy-rules
+                      :model-value="employeeClass"
+                      emit-value
+                      map-options
+                      :options="employeeClassOps"
+                      option-label="name"
+                      option-value="id"
+                      :label="`${'ประเภท'}`"
+                      use-input
+                      input-debounce="0"
+                      @update:model-value="updateEmployeeClass"
+                    />
+                  </div>
+                  <!-- @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                      ) " -->
+                  <div class="col-xs-12 col-sm-2">
                     <q-input
                       clearable
                       dense
@@ -132,7 +154,7 @@
                       type="number"
                     />
                   </div>
-                  <div class="col-xs-12 col-sm-4">
+                  <div class="col-xs-12 col-sm-3">
                     <q-input
                       clearable
                       dense
@@ -206,7 +228,7 @@
                       color="primary"
                       @update:model-value="updateIsShowRetire"
                     >
-                      แสดงข้อมูลผู้พ้นจากราชการ/เกษียณอายุราชการ/เสียชีวิต/โอน/ลาออก
+                      แสดงข้อมูลผู้พ้นจากราชการ
                     </q-toggle>
                     <q-toggle
                       dense
@@ -216,8 +238,19 @@
                     >
                       ทดลองปฏิบัติหน้าที่ราชการ
                     </q-toggle>
+                    <q-space />
+                    <div>
+                      <q-btn
+                        dense
+                        color="primary"
+                        icon="mdi-magnify"
+                        label="ค้นหา"
+                        class="q-px-md"
+                        @click="doSearch"
+                      />
+                    </div>
                   </div>
-                  <div class="col-12 row q-col-gutter-y-md">
+                  <!-- <div class="col-12 row q-col-gutter-y-md">
                     <div class="row q-gutter-md">
                       <q-radio
                         dense
@@ -248,7 +281,7 @@
                         @click="doSearch"
                       />
                     </div>
-                  </div>
+                  </div> -->
                 </div>
               </q-card-section>
             </div>
@@ -272,6 +305,7 @@
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+import type { DataOption } from "@/modules/04_registry/components/profileType";
 
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
@@ -280,16 +314,23 @@ const searchPanel = ref<boolean>(true);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
+const employeeClassOps = ref<DataOption[]>([
+  { id: "officer", name: "ข้าราชการกทม.สามัญ" },
+  { id: "employee", name: "ลูกจ้าง(ทั้งหมด)" },
+  { id: "perm", name: "ลูกจ้างประจำ" },
+  { id: "temp", name: "ลูกจ้างชั่วคราว" },
+]);
 
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
   profileId: String,
+  employeeClass: String,
   fullName: String,
   oldFullName: String,
   isShowRetire: Boolean,
   isProbation: Boolean,
-  profileType: String,
+  //   profileType: String,
   retireYear: Number || null,
   govAge: Number || null,
   isTab: {
@@ -314,13 +355,14 @@ const emit = defineEmits([
   "update:inputfilter",
   "update:inputvisible",
   "update:profileId",
+  "update:employeeClass",
   "update:fullName",
   "update:oldFullName",
   "update:oldName",
   "update:retireYear",
   "update:govAge",
   "update:isShowRetire",
-  "update:profileType",
+  //   "update:profileType",
   "update:isProbation",
 ]);
 
@@ -334,6 +376,9 @@ const updateVisible = (value: []) => {
 const updateProfileId = (value: string | number | null) => {
   emit("update:profileId", value);
 };
+const updateEmployeeClass = (value: string | number | null) => {
+  emit("update:employeeClass", value);
+};
 const updateFullname = (value: string | number | null) => {
   emit("update:fullName", value);
 };
@@ -349,9 +394,9 @@ const updateIsShowRetire = (value: string | number | null) => {
 const updateIsProbation = (value: string | number | null) => {
   emit("update:isProbation", value);
 };
-const updateProfileType = (value: string | number | null) => {
-  emit("update:profileType", value);
-};
+// const updateProfileType = (value: string | number | null) => {
+//   emit("update:profileType", value);
+// };
 
 const clearDate = () => {
   emit("update:retireYear", null);
@@ -364,6 +409,7 @@ const clickSearchPanel = () => {
   emit("update:oldFullName", null);
   emit("update:fullName", null);
   emit("update:profileId", null);
+  emit("update:employeeClass", null);
   searchPanel.value = !searchPanel.value;
 };
 
diff --git a/src/modules/04_registry/components/Talent.vue b/src/modules/04_registry/components/Talent.vue
index 59f82162b..7c3afca32 100644
--- a/src/modules/04_registry/components/Talent.vue
+++ b/src/modules/04_registry/components/Talent.vue
@@ -291,8 +291,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const field = ref<string>();
@@ -507,7 +506,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAbiliId(profileId.value))
     .then((res) => {
@@ -531,7 +530,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -620,7 +619,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileAbiliId(profileId.value), {
       id: id.value,
@@ -647,7 +646,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileAbiliId(id.value), {
       id: id.value,
@@ -682,7 +681,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileAbiliId(id.value))
         .then((res) => {
@@ -794,7 +793,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAbiliHisId(row.id))
     .then((res) => {
@@ -818,7 +817,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/04_registry/components/Train.vue b/src/modules/04_registry/components/Train.vue
index ef06acb9b..822494e7b 100644
--- a/src/modules/04_registry/components/Train.vue
+++ b/src/modules/04_registry/components/Train.vue
@@ -431,8 +431,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
@@ -752,7 +751,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileTrainId(profileId.value))
     .then((res) => {
@@ -780,7 +779,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -873,7 +872,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileTrainId(profileId.value), {
       id: id.value,
@@ -904,7 +903,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileTrainId(id.value), {
       id: id.value,
@@ -943,7 +942,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileTrainId(id.value))
         .then((res) => {
@@ -1063,7 +1062,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileTrainHisId(row.id))
     .then((res) => {
@@ -1091,7 +1090,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/04_registry/components/Work.vue b/src/modules/04_registry/components/Work.vue
index db8da73e3..52dac440d 100644
--- a/src/modules/04_registry/components/Work.vue
+++ b/src/modules/04_registry/components/Work.vue
@@ -261,8 +261,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const { date2Thai, success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const dateStart = ref<Date>(new Date());
@@ -427,7 +426,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileDutyId(profileId.value))
     .then((res) => {
@@ -449,7 +448,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -536,7 +535,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileDutyId(profileId.value), {
       id: id.value,
@@ -561,7 +560,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileDutyId(id.value), {
       id: id.value,
@@ -594,7 +593,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileDutyId(id.value))
         .then((res) => {
@@ -702,7 +701,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileDutyHisId(row.id))
     .then((res) => {
@@ -724,7 +723,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
diff --git a/src/modules/04_registry/components/profileType.ts b/src/modules/04_registry/components/profileType.ts
index 44e64abeb..8713fb8e7 100644
--- a/src/modules/04_registry/components/profileType.ts
+++ b/src/modules/04_registry/components/profileType.ts
@@ -63,11 +63,13 @@ interface Address {
 interface Goverment {
   ocId: string | null;
   positionId: string | null;
-  workId: string | null;
-  typeId: string | null;
-  levelId: string | null;
+  positionPathSide: string | null;
+  positionLine: string | null;
+  positionType: string | null;
+  positionLevel: string | null;
   numberId: string | null;
-  businessId: string | null;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
   containDate: Date;
   workDate: Date;
   retireDate: string | null;
@@ -92,11 +94,13 @@ interface zipCodeOption {
 const defaultGoverment: Goverment = {
   ocId: null,
   positionId: null,
-  workId: null,
-  typeId: null,
-  levelId: null,
+  positionPathSide: null,
+  positionLine: null,
+  positionType: null,
+  positionLevel: null,
   numberId: null,
-  businessId: null,
+  positionExecutive: null,
+  positionExecutiveSide: null,
   containDate: new Date(),
   workDate: new Date(),
   retireDate: null,
diff --git a/src/modules/04_registry/interface/index/Main.ts b/src/modules/04_registry/interface/index/Main.ts
index adb1232b6..fe165e2b9 100644
--- a/src/modules/04_registry/interface/index/Main.ts
+++ b/src/modules/04_registry/interface/index/Main.ts
@@ -9,6 +9,12 @@ interface DataOption {
   disable?: boolean;
 }
 
+interface DataOptionLeave {
+  id: string;
+  name: string;
+  totalLeave: number;
+}
+
 interface DataOptionInsignia {
   id: string;
   name: string;
@@ -23,6 +29,7 @@ interface treeTab {
 
 interface InformationOps {
   prefixOps: DataOption[];
+  prefixOldOps: DataOption[];
   genderOps: DataOption[];
   bloodOps: DataOption[];
   statusOps: DataOption[];
@@ -31,6 +38,11 @@ interface InformationOps {
   employeeTypeOps: DataOption[];
 }
 
+interface OldNameOps {
+  prefixOps: DataOption[];
+  statusOps: DataOption[];
+}
+
 interface AddressOps {
   provinceOps: DataOption[];
   districtOps: DataOption[];
@@ -62,9 +74,11 @@ export type {
   DataOptionInsignia,
   treeTab,
   InformationOps,
+  OldNameOps,
   AddressOps,
   FamilyOps,
   EduOps,
   InsigniaOps,
   DisciplineOps,
+  DataOptionLeave,
 };
diff --git a/src/modules/04_registry/interface/request/Assessment.ts b/src/modules/04_registry/interface/request/Assessment.ts
index 2a407ba5c..58bcb2a51 100644
--- a/src/modules/04_registry/interface/request/Assessment.ts
+++ b/src/modules/04_registry/interface/request/Assessment.ts
@@ -6,7 +6,12 @@ interface DataProps {
 //ข้อมูล
 interface RequestItemsObject {
   id: string;
-  point: number;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
   name: string;
   date: Date;
   createdFullName: string;
diff --git a/src/modules/04_registry/interface/request/Government.ts b/src/modules/04_registry/interface/request/Government.ts
index 78871ae4e..3ef47a218 100644
--- a/src/modules/04_registry/interface/request/Government.ts
+++ b/src/modules/04_registry/interface/request/Government.ts
@@ -16,11 +16,13 @@ interface RequestItemsObject {
 interface RequestItemsHistoryObject {
   oc: string | null;
   position: string | null;
+  positionPathSide: string | null;
   posNo: string | null;
   positionLine: string | null;
   positionType: string | null;
   positionLevel: string | null;
   positionExecutive: string | null;
+  positionExecutiveSide: string | null;
   dateAppoint: Date;
   dateStart: Date;
   retireDate: string | null;
diff --git a/src/modules/04_registry/interface/request/Leave.ts b/src/modules/04_registry/interface/request/Leave.ts
index af14c8123..9693d517c 100644
--- a/src/modules/04_registry/interface/request/Leave.ts
+++ b/src/modules/04_registry/interface/request/Leave.ts
@@ -6,20 +6,24 @@ interface DataProps {
 //ข้อมูล
 interface RequestItemsObject {
   id: string;
-  year: number;
-  sickDay: number;
-  personalDay: number;
-  maternityDay: number;
-  wifeDay: number;
-  sickCount: number;
-  ordainDay: number;
-  absentDay: number;
-  studyDay: number;
-  agencyDay: number;
-  coupleDay: number;
-  therapyDay: number;
-  createdFullName: string;
-  createdAt: Date;
+  typeLeave: string;
+  dateStartLeave: Date;
+  dateEndLeave: Date;
+  numLeave: number;
+  sumLeave: number;
+  totalLeave: number;
+  status: string;
+  reason: string;
+  typeLeaveId: string;
+}
+
+//ข้อมูล
+interface RequestItemsTotalObject {
+  typeLeaveId: string;
+  typeLeave: string;
+  totalLeave: number;
+  limitLeave: string;
+  remainLeave: string;
 }
 
 //columns
@@ -35,4 +39,4 @@ interface Columns {
   };
 }
 
-export type { RequestItemsObject, Columns, DataProps };
+export type { RequestItemsObject, Columns, DataProps, RequestItemsTotalObject };
diff --git a/src/modules/04_registry/interface/request/Main.ts b/src/modules/04_registry/interface/request/Main.ts
index 20964b759..9cf5c79b9 100644
--- a/src/modules/04_registry/interface/request/Main.ts
+++ b/src/modules/04_registry/interface/request/Main.ts
@@ -2,20 +2,35 @@
 interface RequestItemsObject {
   id: number;
   fullname: String;
+  fullnameOld: String;
   avatar: String;
   citizenId: String;
-  //   oc: String;
+  oc: String;
   position: String;
-  numberPosition: String;
+  positionPathSide: String;
+  numberPosition: String | null;
   positionLine: String;
   positionType: String;
   govAge: number;
   positionLevel: String;
-  positionExecutive: String;
-  dateAppoint: Date | null;
-  dateStart: Date | null;
-  createdAt: Date | null;
-  salaryDate: Date | null;
+  positionExecutive: String | null;
+  positionExecutiveSide: String | null;
+  refSalary: String;
+  positionEmployeePosition: String | null;
+  positionEmployeePositionSide: String | null;
+  positionEmployeeLevel: String | null;
+  positionEmployeeGroup: String | null;
+  dateAppoint: Date | string | null;
+  dateStart: Date | string | null;
+  createdAt: Date | string | null;
+  salaryDate: Date | string | null;
+  leaveReason: String;
+  age: String;
+  amount: String;
+  insignia: String;
+  insigniaLast: String;
+  isLeave: String;
+  leaveDateOrder: Date | string | null;
 }
 
 //columns
diff --git a/src/modules/04_registry/interface/request/OldName.ts b/src/modules/04_registry/interface/request/OldName.ts
new file mode 100644
index 000000000..0fde7fa45
--- /dev/null
+++ b/src/modules/04_registry/interface/request/OldName.ts
@@ -0,0 +1,32 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  prefix: string;
+  prefixId: string;
+  firstName: string;
+  lastName: string;
+  status: string;
+  file: string | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/04_registry/interface/request/Salary.ts b/src/modules/04_registry/interface/request/Salary.ts
index ebe01ae56..726cf1300 100644
--- a/src/modules/04_registry/interface/request/Salary.ts
+++ b/src/modules/04_registry/interface/request/Salary.ts
@@ -3,6 +3,11 @@ interface DataProps {
   rowIndex: number;
 }
 
+interface DataPropsEmployee {
+  row: RequestItemsEmployee;
+  rowIndex: number;
+}
+
 //ข้อมูล
 interface RequestItemsObject {
   id: string;
@@ -34,6 +39,31 @@ interface RequestItemsObject {
   createdAt: Date;
 }
 
+interface RequestItemsEmployee {
+  amount: number;
+  createdAt: Date;
+  createdFullName: string;
+  date: Date;
+  id: string;
+  mouthSalaryAmount: number;
+  oc: string | null;
+  ocId: string | null;
+  posNo: string | null;
+  posNoId: string | null;
+  posNoEmployee: string | null;
+  positionEmployeeGroup: string | null;
+  positionEmployeeGroupId: string | null;
+  positionEmployeeLevel: string | null;
+  positionEmployeeLevelId: string | null;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionId: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeePositionSideId: string | null;
+  positionSalaryAmount: number;
+  salaryClass: string | null;
+  salaryRef: string | null;
+}
+
 //columns
 interface Columns {
   [index: number]: {
@@ -47,4 +77,10 @@ interface Columns {
   };
 }
 
-export type { RequestItemsObject, Columns, DataProps };
+export type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+  RequestItemsEmployee,
+  DataPropsEmployee,
+};
diff --git a/src/modules/04_registry/interface/response/Assessment.ts b/src/modules/04_registry/interface/response/Assessment.ts
index 849665ed1..af1f8598a 100644
--- a/src/modules/04_registry/interface/response/Assessment.ts
+++ b/src/modules/04_registry/interface/response/Assessment.ts
@@ -1,7 +1,12 @@
 //ข้อมูล
 interface ResponseObject {
   id: string;
-  point: number;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
   name: string;
   date: Date;
   createdFullName: string;
diff --git a/src/modules/04_registry/interface/response/Government.ts b/src/modules/04_registry/interface/response/Government.ts
index 6bdafcdee..69a4ef3aa 100644
--- a/src/modules/04_registry/interface/response/Government.ts
+++ b/src/modules/04_registry/interface/response/Government.ts
@@ -1,18 +1,20 @@
 //ข้อมูล
 interface ResponseObject {
   oc: string | null;
-  business: string | null;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
   dateAppoint: Date | string;
   dateStart: Date | string;
   govAge: string | null;
   govAgeAbsent: number | null;
   govAgePlus: number | null;
-  level: string | null;
+  positionLevel: string | null;
   posNo: string | null;
   position: string | null;
+  positionPathSide: string | null;
   retireDate: string | null;
-  type: string | null;
-  work: string | null;
+  positionType: string | null;
+  positionLine: string | null;
   createdFullName: string | null;
   createdAt: Date;
   reasonSameDate: string | null;
diff --git a/src/modules/04_registry/interface/response/Information.ts b/src/modules/04_registry/interface/response/Information.ts
index ecb93f462..cd0008734 100644
--- a/src/modules/04_registry/interface/response/Information.ts
+++ b/src/modules/04_registry/interface/response/Information.ts
@@ -1,5 +1,6 @@
 //ข้อมูล
 interface ResponseObject {
+  changeName: boolean | null;
   birthDate: Date;
   bloodGroupId: string | null;
   citizenId: string | null;
diff --git a/src/modules/04_registry/interface/response/Leave.ts b/src/modules/04_registry/interface/response/Leave.ts
index 3fb047069..f5eb18b13 100644
--- a/src/modules/04_registry/interface/response/Leave.ts
+++ b/src/modules/04_registry/interface/response/Leave.ts
@@ -1,20 +1,22 @@
 //ข้อมูล
 interface ResponseObject {
   id: string;
-  year: number;
-  sickDay: number;
-  personalDay: number;
-  maternityDay: number;
-  wifeDay: number;
-  sickCount: number;
-  ordainDay: number;
-  absentDay: number;
-  studyDay: number;
-  agencyDay: number;
-  coupleDay: number;
-  therapyDay: number;
-  createdFullName: string;
-  createdAt: Date;
+  typeLeave: string;
+  dateStartLeave: Date;
+  dateEndLeave: Date;
+  numLeave: number;
+  sumLeave: number;
+  totalLeave: number;
+  status: string;
+  reason: string;
+  typeLeaveId: string;
+}
+interface ResponseTotalObject {
+  typeLeaveId: string;
+  typeLeave: string;
+  totalLeave: number;
+  limitLeave: string;
+  remainLeave: string;
 }
 
-export type { ResponseObject };
+export type { ResponseObject, ResponseTotalObject };
diff --git a/src/modules/04_registry/interface/response/Main.ts b/src/modules/04_registry/interface/response/Main.ts
index 79441e8f6..28d372484 100644
--- a/src/modules/04_registry/interface/response/Main.ts
+++ b/src/modules/04_registry/interface/response/Main.ts
@@ -2,20 +2,36 @@
 interface ResponseObject {
   id: number;
   fullname: String;
+  fullnameOld: String;
   avatar: String;
   citizenId: String;
   oc: String;
   position: String;
-  posNo: String;
+  positionPathSide: String;
+  posNo: String | null;
+  posNoEmployee: String | null;
   positionLine: String;
   positionType: String;
   govAge: number;
   positionLevel: String;
-  positionExecutive: String;
+  positionExecutive: String | null;
+  positionExecutiveSide: String | null;
+  refSalary: String;
+  positionEmployeePosition: String | null;
+  positionEmployeePositionSide: String | null;
+  positionEmployeeLevel: String | null;
+  positionEmployeeGroup: String | null;
   dateAppoint: Date | null;
   dateStart: Date | null;
   createdAt: Date | null;
   salaryDate: Date | null;
+  leaveReason: string;
+  age: String;
+  amount: String;
+  insignia: String;
+  insigniaLast: String;
+  isLeave: boolean;
+  leaveDateOrder: Date | null;
 }
 
 export type { ResponseObject };
diff --git a/src/modules/04_registry/interface/response/OldName.ts b/src/modules/04_registry/interface/response/OldName.ts
new file mode 100644
index 000000000..f908976a1
--- /dev/null
+++ b/src/modules/04_registry/interface/response/OldName.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  prefix: string;
+  prefixId: string;
+  firstName: string;
+  lastName: string;
+  status: string;
+  file: string | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/modules/04_registry/interface/response/Salary.ts b/src/modules/04_registry/interface/response/Salary.ts
index 34c6a95a1..3087ae9ca 100644
--- a/src/modules/04_registry/interface/response/Salary.ts
+++ b/src/modules/04_registry/interface/response/Salary.ts
@@ -29,4 +29,29 @@ interface ResponseObject {
   createdAt: Date;
 }
 
-export type { ResponseObject };
+interface ResponseObjectEmployee {
+  amount: number;
+  createdAt: Date;
+  createdFullName: string;
+  date: Date;
+  id: string;
+  mouthSalaryAmount: number;
+  oc: string | null;
+  ocId: string | null;
+  posNo: string | null;
+  posNoId: string | null;
+  posNoEmployee: string | null;
+  positionEmployeeGroup: string | null;
+  positionEmployeeGroupId: string | null;
+  positionEmployeeLevel: string | null;
+  positionEmployeeLevelId: string | null;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionId: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeePositionSideId: string | null;
+  positionSalaryAmount: number;
+  salaryClass: string | null;
+  salaryRef: string | null;
+}
+
+export type { ResponseObject, ResponseObjectEmployee };
diff --git a/src/modules/04_registry/store.ts b/src/modules/04_registry/store.ts
index 4840f9d1f..8b69ec17a 100644
--- a/src/modules/04_registry/store.ts
+++ b/src/modules/04_registry/store.ts
@@ -5,6 +5,7 @@ export const useProfileDataStore = defineStore("profile", () => {
   interface profile {
     main: { columns: String[] };
     education: { columns: String[] };
+    oldName: { columns: String[] };
     certicate: { columns: String[] };
     train: { columns: String[] };
     insignia: { columns: String[] };
@@ -31,6 +32,7 @@ export const useProfileDataStore = defineStore("profile", () => {
   const profileData = ref<profile>({
     main: { columns: [] },
     education: { columns: [] },
+    oldName: { columns: [] },
     certicate: { columns: [] },
     train: { columns: [] },
     insignia: { columns: [] },
@@ -49,6 +51,7 @@ export const useProfileDataStore = defineStore("profile", () => {
   const changeProfileColumns = (system: String, val: String[]) => {
     if (system == "main") profileData.value.main.columns = val;
     if (system == "education") profileData.value.education.columns = val;
+    if (system == "oldName") profileData.value.oldName.columns = val;
     if (system == "certicate") profileData.value.certicate.columns = val;
     if (system == "train") profileData.value.train.columns = val;
     if (system == "insignia") profileData.value.insignia.columns = val;
diff --git a/src/modules/04_registry/views/Main.vue b/src/modules/04_registry/views/Main.vue
index 0322734f8..88575c644 100644
--- a/src/modules/04_registry/views/Main.vue
+++ b/src/modules/04_registry/views/Main.vue
@@ -52,17 +52,21 @@
           <ProfileTable
             style="height: 77vh"
             :rows="rows"
-            :columns="columns"
+            :columns="
+              profileType == 'employee' || profileType == 'all'
+                ? columnsEmployee
+                : columns
+            "
             :filter="filter"
             :visible-columns="visibleColumns"
             v-model:inputfilter="filter"
             v-model:inputvisible="visibleColumns"
             :pagination="initialPagination"
             v-model:profileId="profileId"
+            v-model:employeeClass="employeeClass"
             v-model:fullName="fullName"
             v-model:oldFullName="oldFullName"
             v-model:isShowRetire="isShowRetire"
-            v-model:profileType="profileType"
             v-model:retireYear="retireYear"
             v-model:govAge="govAge"
             v-model:isProbation="isProbation"
@@ -103,17 +107,6 @@
                       </div>
                     </div>
                   </div>
-                  <div
-                    v-else-if="
-                      col.name == 'dateAppoint' ||
-                      col.name == 'dateStart' ||
-                      col.name == 'createdAt' ||
-                      col.name == 'salaryDate'
-                    "
-                    class="table_ellipsis"
-                  >
-                    {{ col.value == null ? "-" : date2Thai(col.value) }}
-                  </div>
                   <div v-else class="table_ellipsis">
                     {{ col.value ?? "-" }}
                   </div>
@@ -151,11 +144,12 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, typeRetire } = mixin;
 const router = useRouter();
 const isDrawer = ref<boolean>(true);
 const filter = ref<string>(""); //search data table
 const profileId = ref<string>("");
+const employeeClass = ref<string>("officer");
 const fullName = ref<string>("");
 const oldFullName = ref<string>("");
 const isShowRetire = ref<boolean>(false);
@@ -173,34 +167,56 @@ const visibleColumns = ref<String[]>([]);
 visibleColumns.value = [
   "no",
   "fullname",
+  "fullnameOld",
+  "oc",
   "position",
+  "positionPathSide",
   "numberPosition",
   "positionLine",
   "positionType",
   "govAge",
   "positionLevel",
   "positionExecutive",
+  "positionExecutiveSide",
   "dateAppoint",
+  "refSalary",
   "dateStart",
   "createdAt",
   "salaryDate",
+  "age",
+  "amount",
+  "insignia",
+  "insigniaLast",
+  "isLeave",
+  "leaveDateOrder",
+];
+const visibleColumnsOfficer = ref<String[]>([]);
+visibleColumnsOfficer.value = [
+  "no",
+  "fullname",
+  "fullnameOld",
+  "oc",
+  "position",
+  "positionPathSide",
+  "numberPosition",
+  "positionLine",
+  "positionType",
+  "govAge",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "dateAppoint",
+  "refSalary",
+  "dateStart",
+  "createdAt",
+  "salaryDate",
+  "age",
+  "amount",
+  "insignia",
+  "insigniaLast",
+  "isLeave",
+  "leaveDateOrder",
 ];
-// profileData.main.columns.length == 0
-//   ? (visibleColumns.value = [
-//       "no",
-//       "fullname",
-//       "position",
-//       "numberPosition",
-//       "positionLine",
-//       "positionType",
-//       "positionLevel",
-//       "positionExecutive",
-//       "dateAppoint",
-//       "dateStart",
-//       "createdAt",
-//       "salaryDate",
-//     ])
-//   : (visibleColumns.value = profileData.main.columns);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -225,6 +241,20 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px; min-width: 200px",
     style: "font-size: 14px; ",
   },
+  {
+    name: "numberPosition",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "numberPosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
   {
     name: "position",
     align: "left",
@@ -240,11 +270,11 @@ const columns = ref<QTableProps["columns"]>([
       }),
   },
   {
-    name: "numberPosition",
+    name: "positionPathSide",
     align: "left",
-    label: "เลขที่ตำแหน่ง",
+    label: "ด้าน/สาขา",
     sortable: true,
-    field: "numberPosition",
+    field: "positionPathSide",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -267,20 +297,6 @@ const columns = ref<QTableProps["columns"]>([
         sensitivity: "base",
       }),
   },
-  {
-    name: "govAge",
-    align: "left",
-    label: "อายุราชการ(ปี)",
-    sortable: true,
-    field: "govAge",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
   {
     name: "positionType",
     align: "left",
@@ -323,10 +339,94 @@ const columns = ref<QTableProps["columns"]>([
         sensitivity: "base",
       }),
   },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "เครื่องราชฯ",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "insigniaLast",
+    align: "left",
+    label: "เครื่องราชฯ(เดิม)",
+    sortable: true,
+    field: "insigniaLast",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ(ปี)",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
   {
     name: "dateAppoint",
     align: "left",
-    label: "วันที่สั่งบรรจุ",
+    label: "วันที่บรรจุ",
     sortable: true,
     field: "dateAppoint",
     headerStyle: "font-size: 14px",
@@ -345,6 +445,49 @@ const columns = ref<QTableProps["columns"]>([
     // sort: (a: string, b: string) =>
     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "salaryDate",
+    align: "left",
+    label: "วันที่เข้าสู่ตำแหน่ง",
+    sortable: true,
+    field: "salaryDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refSalary",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "refSalary",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "age",
+    align: "left",
+    label: "อายุ",
+    sortable: true,
+    field: "age",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullnameOld",
+    align: "left",
+    label: "ชื่อ-สกุล(เดิม)",
+    sortable: true,
+    field: "fullnameOld",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
   {
     name: "createdAt",
     align: "left",
@@ -356,6 +499,270 @@ const columns = ref<QTableProps["columns"]>([
     // sort: (a: string, b: string) =>
     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "isLeave",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "leaveDateOrder",
+    align: "left",
+    label: "วันที่พ้นราชการ",
+    sortable: true,
+    field: "leaveDateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<RequestItemsObject[]>([]);
+const visibleColumnsEmployee = ref<String[]>([]);
+visibleColumnsEmployee.value = [
+  "no",
+  "fullname",
+  "fullnameOld",
+  "oc",
+  "positionEmployeePosition",
+  "positionEmployeePositionSide",
+  "numberPosition",
+  "positionLine",
+  "positionType",
+  "govAge",
+  "positionEmployeeLevel",
+  "positionEmployeeGroup",
+  "dateAppoint",
+  "refSalary",
+  "dateStart",
+  "createdAt",
+  "salaryDate",
+  "age",
+  "amount",
+  "insignia",
+  "insigniaLast",
+  "isLeave",
+  "leaveDateOrder",
+];
+const columnsEmployee = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "numberPosition",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "numberPosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeeLevel",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "positionEmployeeLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "เครื่องราชฯ",
+    sortable: true,
+    field: "insignia",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "insigniaLast",
+    align: "left",
+    label: "เครื่องราชฯ(เดิม)",
+    sortable: true,
+    field: "insigniaLast",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ(ปี)",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่บรรจุ",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "salaryDate",
     align: "left",
@@ -367,8 +774,72 @@ const columns = ref<QTableProps["columns"]>([
     // sort: (a: string, b: string) =>
     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refSalary",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "refSalary",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "age",
+    align: "left",
+    label: "อายุ",
+    sortable: true,
+    field: "age",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullnameOld",
+    align: "left",
+    label: "ชื่อ-สกุล(เดิม)",
+    sortable: true,
+    field: "fullnameOld",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่เข้าสู่ระบบ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isLeave",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "leaveDateOrder",
+    align: "left",
+    label: "วันที่พ้นราชการ",
+    sortable: true,
+    field: "leaveDateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
-const rows = ref<RequestItemsObject[]>([]);
 
 watch(visibleColumns, async (count: String[], prevCount: String[]) => {
   await changeProfileColumns("main", count);
@@ -392,7 +863,7 @@ const clickTree = () => {
 };
 
 const nodeTree = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -468,8 +939,27 @@ const doSearch = async () => {
     });
   }
 
+  if (employeeClass.value == "officer" || employeeClass.value == "employee") {
+    profileType.value = employeeClass.value;
+    if (employeeClass.value == "employee") {
+      visibleColumns.value = visibleColumnsEmployee.value;
+    }
+    if (employeeClass.value == "officer") {
+      visibleColumns.value = visibleColumnsOfficer.value;
+    }
+  }
+
+  if (employeeClass.value == "perm" || employeeClass.value == "temp") {
+    profileType.value = "all";
+    cirteria.push({
+      criteriaType: "employee_class",
+      criteriaValue: employeeClass.value,
+    });
+    visibleColumns.value = visibleColumnsEmployee.value;
+  }
+
   if (selected.value == null || selected.value == "") return;
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.searchProfileByOcId(selected.value, profileType.value), {
       criterias: cirteria,
@@ -481,19 +971,44 @@ const doSearch = async () => {
         rows.value.push({
           id: e.id,
           fullname: e.fullname,
+          fullnameOld: e.fullnameOld,
           avatar: e.avatar,
           citizenId: e.citizenId,
           position: e.position,
-          numberPosition: e.posNo,
+          positionPathSide: e.positionPathSide,
+          numberPosition:
+            profileType.value == "officer" ? e.posNo : e.posNoEmployee,
           positionLine: e.positionLine,
           positionType: e.positionType,
           govAge: e.govAge,
           positionLevel: e.positionLevel,
           positionExecutive: e.positionExecutive,
-          dateAppoint: e.dateAppoint == null ? null : new Date(e.dateAppoint),
-          dateStart: e.dateStart == null ? null : new Date(e.dateStart),
-          createdAt: e.createdAt == null ? null : new Date(e.createdAt),
-          salaryDate: e.salaryDate == null ? null : new Date(e.salaryDate),
+          positionExecutiveSide: e.positionExecutiveSide,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeeLevel: e.positionEmployeeLevel,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          oc: e.oc,
+          dateAppoint:
+            e.dateAppoint == null ? null : date2Thai(new Date(e.dateAppoint)),
+          dateStart:
+            e.dateStart == null ? null : date2Thai(new Date(e.dateStart)),
+          createdAt:
+            e.createdAt == null ? null : date2Thai(new Date(e.createdAt)),
+          salaryDate:
+            e.salaryDate == null ? null : date2Thai(new Date(e.salaryDate)),
+          leaveReason: e.leaveReason,
+          age: e.age,
+          amount: e.amount == null ? "" : e.amount.toLocaleString(),
+          insignia: e.insignia,
+          insigniaLast: e.insigniaLast,
+          isLeave:
+            e.isLeave == false ? "ถือครอง" : `${typeRetire(e.leaveReason)}`,
+          leaveDateOrder:
+            e.leaveDateOrder == null
+              ? null
+              : date2Thai(new Date(e.leaveDateOrder)),
+          refSalary: e.refSalary,
         });
       });
     })
@@ -501,7 +1016,7 @@ const doSearch = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -515,7 +1030,7 @@ const onExport = () => {
     "ระดับ",
     "ตำแหน่งทางการบริหาร",
     "ตำแหน่งการบริหาร",
-    "เลขที่ตำแหน่ง",
+    "ตำแหน่งเลขที่",
     "หน่วยงาน/ส่วนราชการ",
   ];
   const data = rows.value.map((val, index) => ({