diff --git a/src/api/12_evaluatePersonal/api.evaluate.ts b/src/api/12_evaluatePersonal/api.evaluate.ts
index 6215b5ac2..23cead14b 100644
--- a/src/api/12_evaluatePersonal/api.evaluate.ts
+++ b/src/api/12_evaluatePersonal/api.evaluate.ts
@@ -6,8 +6,7 @@ export default {
   evaluateDirectorMain: () => `${evaluateDirectorMain}`,
   evaluateDirectorById: (id: string) => `${evaluateDirectorMain}/${id}`,
 
-  evaluationMain: (page: number, pageSize: number, keyword: string) =>
-    `${evaluation}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+  evaluationMain: () => `${evaluation}`,
 
   evaluateGetDetail: (id: string) => `${evaluation}/check-spec/${id}`,
   evaluateGetStep: (id: string) => `${evaluation}/check/${id}`,
@@ -26,7 +25,7 @@ export default {
   evaluationApproveDoc1: (id: string) => `${evaluation}/doc1/approve/${id}`,
   evaluationNext5To6: (id: string) => `${evaluation}/announce/${id}`,
   evaluationNextFinish: (id: string) => `${evaluation}/wait-check-doc-v2/${id}`,
-  
+
   evaluationHistory: (id: string) => `${evaluation}/step-history/${id}`,
 
   evaluationDateAnnounce: (id: string) => `${evaluation}/check-date/${id}`,
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 9cf3e32e7..d35aaf0be 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -50,6 +50,79 @@ const menuList = readonly<any[]>([
     path: "dashboard",
     role: "dashboard",
   },
+  {
+    key: 3,
+    icon: "o_person",
+    activeIcon: "person",
+    label: "ข้อมูลหลัก (ใหม่)",
+    path: "metadataNew",
+    role: "metadata",
+    children: [
+      {
+        key: 3.1,
+        label: "ข้อมูลปฏิทินวันหยุด",
+        path: "masterCalendarWork",
+      },
+      {
+        key: 3.2,
+        label: "ข้อมูลเครื่องราชอิสริยาภรณ์",
+        path: "masterInsignia",
+      },
+    ],
+  },
+  {
+    key: 4,
+    icon: "o_groups",
+    activeIcon: "groups",
+    label: "โครงสร้างอัตรากำลัง (ใหม่)",
+    path: "organizationalNew",
+    role: "organization",
+    // children: [
+    //   {
+    //     key: 3.1,
+    //     label: "จัดการตำแหน่ง",
+    //     path: "organizationalMapping",
+    //   },
+    //   {
+    //     key: 3.2,
+    //     label: "แผนภูมิโครงสร้าง",
+    //     path: "organizationalStructChart",
+    //   },
+    //   {
+    //     key: 3.3,
+    //     label: "แผนภูมิองค์กร",
+    //     path: "organizationalOrgChart",
+    //   },
+    //   {
+    //     key: 3.4,
+    //     label: "ผังโครงสร้าง",
+    //     path: "organizationalTree",
+    //   },
+    //   {
+    //     key: 3.5,
+    //     label: "ผังโครงสร้างลูกจ้าง",
+    //     path: "organizationalEmployee",
+    //   },
+    //   {
+    //     key: 3.6,
+    //     label: "จัดการบัญชี 2",
+    //     path: "manageReport2",
+    //   },
+    //   {
+    //     key: 3.7,
+    //     label: "รายงานบัญชี",
+    //     path: "organizationalReport",
+    //   },
+    // ],
+  },
+  {
+    key: 4,
+    icon: "o_contact_page",
+    activeIcon: "contact_page",
+    label: "ทะเบียนประวัติ (ใหม่)",
+    path: "registryNew",
+    role: "registry",
+  },
   {
     key: 2,
     icon: "o_person",
diff --git a/src/modules/01_metadataNew/interface/index/Main.ts b/src/modules/01_metadataNew/interface/index/Main.ts
new file mode 100644
index 000000000..46133c9b9
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/index/Main.ts
@@ -0,0 +1,10 @@
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+export type { Pagination, DataOption };
diff --git a/src/modules/01_metadataNew/interface/request/Main.ts b/src/modules/01_metadataNew/interface/request/Main.ts
new file mode 100644
index 000000000..b5eb23bd3
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/request/Main.ts
@@ -0,0 +1,14 @@
+interface DataSumCalendarObject {
+  id: number;
+  monthFull: String;
+  count: number;
+  color: String;
+}
+
+interface DataListsObject {
+  id: number;
+  count: number;
+  name: string;
+}
+
+export type { DataSumCalendarObject, DataListsObject };
diff --git a/src/modules/01_metadataNew/router.ts b/src/modules/01_metadataNew/router.ts
new file mode 100644
index 000000000..06b030d8d
--- /dev/null
+++ b/src/modules/01_metadataNew/router.ts
@@ -0,0 +1,26 @@
+const calendarWorkPage = () =>
+  import("@/modules/01_metadataNew/views/calendar.vue");
+const masterInsignia = () => import("@/modules/01_metadataNew/views/insignia.vue");
+
+export default [
+  {
+    path: "/master-data/calendar",
+    name: "masterCalendarWork",
+    component: calendarWorkPage,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "metadata",
+    },
+  },
+  {
+    path: "/master-data/insignia",
+    name: "masterInsignia",
+    component: masterInsignia,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "metadata",
+    },
+  },
+];
diff --git a/src/modules/01_metadataNew/store.ts b/src/modules/01_metadataNew/store.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/modules/01_metadataNew/views/calendar.vue b/src/modules/01_metadataNew/views/calendar.vue
new file mode 100644
index 000000000..d6ff149b9
--- /dev/null
+++ b/src/modules/01_metadataNew/views/calendar.vue
@@ -0,0 +1,7 @@
+<template>
+  ข้อมูลปฏิทินวันหยุด
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/modules/01_metadataNew/views/insignia.vue b/src/modules/01_metadataNew/views/insignia.vue
new file mode 100644
index 000000000..5d894837a
--- /dev/null
+++ b/src/modules/01_metadataNew/views/insignia.vue
@@ -0,0 +1,7 @@
+<template>
+  ข้อมูลเครื่องราชอิสริยาภรณ์
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/modules/02_organizationalNew/interface/index/Main.ts b/src/modules/02_organizationalNew/interface/index/Main.ts
new file mode 100644
index 000000000..46133c9b9
--- /dev/null
+++ b/src/modules/02_organizationalNew/interface/index/Main.ts
@@ -0,0 +1,10 @@
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+export type { Pagination, DataOption };
diff --git a/src/modules/02_organizationalNew/interface/request/Main.ts b/src/modules/02_organizationalNew/interface/request/Main.ts
new file mode 100644
index 000000000..b5eb23bd3
--- /dev/null
+++ b/src/modules/02_organizationalNew/interface/request/Main.ts
@@ -0,0 +1,14 @@
+interface DataSumCalendarObject {
+  id: number;
+  monthFull: String;
+  count: number;
+  color: String;
+}
+
+interface DataListsObject {
+  id: number;
+  count: number;
+  name: string;
+}
+
+export type { DataSumCalendarObject, DataListsObject };
diff --git a/src/modules/02_organizationalNew/router.ts b/src/modules/02_organizationalNew/router.ts
new file mode 100644
index 000000000..32b16995e
--- /dev/null
+++ b/src/modules/02_organizationalNew/router.ts
@@ -0,0 +1,14 @@
+const mainPage = () => import("@/modules/02_organizationalNew/views/main.vue");
+
+export default [
+  {
+    path: "/organization-new",
+    name: "organizationalNew",
+    component: mainPage,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "organization",
+    },
+  },
+];
diff --git a/src/modules/02_organizationalNew/store.ts b/src/modules/02_organizationalNew/store.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/modules/02_organizationalNew/views/main.vue b/src/modules/02_organizationalNew/views/main.vue
new file mode 100644
index 000000000..2a55fa61c
--- /dev/null
+++ b/src/modules/02_organizationalNew/views/main.vue
@@ -0,0 +1,7 @@
+<template>
+  โครงสร้างอัตรากำลัง (ใหม่)
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/modules/03_recruitingNew/interface/index/Main.ts b/src/modules/03_recruitingNew/interface/index/Main.ts
new file mode 100644
index 000000000..46133c9b9
--- /dev/null
+++ b/src/modules/03_recruitingNew/interface/index/Main.ts
@@ -0,0 +1,10 @@
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+export type { Pagination, DataOption };
diff --git a/src/modules/03_recruitingNew/interface/request/Main.ts b/src/modules/03_recruitingNew/interface/request/Main.ts
new file mode 100644
index 000000000..b5eb23bd3
--- /dev/null
+++ b/src/modules/03_recruitingNew/interface/request/Main.ts
@@ -0,0 +1,14 @@
+interface DataSumCalendarObject {
+  id: number;
+  monthFull: String;
+  count: number;
+  color: String;
+}
+
+interface DataListsObject {
+  id: number;
+  count: number;
+  name: string;
+}
+
+export type { DataSumCalendarObject, DataListsObject };
diff --git a/src/modules/03_recruitingNew/router.ts b/src/modules/03_recruitingNew/router.ts
new file mode 100644
index 000000000..c36ce682b
--- /dev/null
+++ b/src/modules/03_recruitingNew/router.ts
@@ -0,0 +1,14 @@
+const mainPage = () => import("@/modules/02_organizationalNew/views/main.vue");
+
+export default [
+  {
+    path: "/registry-new",
+    name: "registryNew",
+    component: mainPage,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "registry",
+    },
+  },
+];
diff --git a/src/modules/03_recruitingNew/store.ts b/src/modules/03_recruitingNew/store.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/modules/03_recruitingNew/views/main.vue b/src/modules/03_recruitingNew/views/main.vue
new file mode 100644
index 000000000..db4dfb1ec
--- /dev/null
+++ b/src/modules/03_recruitingNew/views/main.vue
@@ -0,0 +1,7 @@
+<template>
+  ทะเบียนประวัติ (ใหม่)
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/modules/04_registry/components/Assessment.vue b/src/modules/04_registry/components/Assessment.vue
index dbf833fff..37902f56a 100644
--- a/src/modules/04_registry/components/Assessment.vue
+++ b/src/modules/04_registry/components/Assessment.vue
@@ -626,7 +626,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };
diff --git a/src/modules/04_registry/components/Coin.vue b/src/modules/04_registry/components/Coin.vue
index 7d024d234..0d995b9de 100644
--- a/src/modules/04_registry/components/Coin.vue
+++ b/src/modules/04_registry/components/Coin.vue
@@ -45,8 +45,8 @@
                 icon="mdi-history"
                 @click="clickHistory(props.row)"
               >
-            <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
-            </q-btn>
+                <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
+              </q-btn>
             </q-td>
           </q-tr>
         </template>
@@ -67,9 +67,7 @@
         />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
@@ -516,7 +514,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++;
       });
   }
 };
diff --git a/src/modules/04_registry/components/Discipline.vue b/src/modules/04_registry/components/Discipline.vue
index f84e43479..b6611bebe 100644
--- a/src/modules/04_registry/components/Discipline.vue
+++ b/src/modules/04_registry/components/Discipline.vue
@@ -617,7 +617,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };
diff --git a/src/modules/04_registry/components/Document.vue b/src/modules/04_registry/components/Document.vue
index 3b6c40856..8c8d17f16 100644
--- a/src/modules/04_registry/components/Document.vue
+++ b/src/modules/04_registry/components/Document.vue
@@ -31,9 +31,9 @@
                   color="blue"
                   icon="mdi-download-outline"
                   @click="downloadData(file.file)"
-                  >
-              <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-              </q-btn>
+                >
+                  <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                </q-btn>
                 <q-btn
                   class="gt-xs"
                   size="12px"
@@ -45,8 +45,8 @@
                   v-show="edit"
                   @click="deleteData(file.id)"
                 >
-              <q-tooltip>ลบเอกสารหลักฐาน</q-tooltip>
-              </q-btn>
+                  <q-tooltip>ลบเอกสารหลักฐาน</q-tooltip>
+                </q-btn>
               </div>
             </q-item-section>
           </q-item>
@@ -145,6 +145,9 @@ import { useRoute } from "vue-router";
 import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+
+const profileStore = useProfileDataStore();
 
 const props = defineProps({
   statusEdit: {
@@ -189,7 +192,7 @@ const getData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        profileStore.isLoad++;
       });
   }
 };
diff --git a/src/modules/04_registry/components/Education.vue b/src/modules/04_registry/components/Education.vue
index f9cd9f921..44d19632c 100644
--- a/src/modules/04_registry/components/Education.vue
+++ b/src/modules/04_registry/components/Education.vue
@@ -57,8 +57,8 @@
                 icon="mdi-history"
                 @click="clickHistory(props.row)"
               >
-            <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
-            </q-btn>
+                <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+              </q-btn>
             </q-td>
           </q-tr>
         </template>
@@ -72,9 +72,7 @@
         <DialogHeader tittle="ประวัติการศึกษา" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
+          <div class="row col-12 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)"
@@ -1065,7 +1063,7 @@ const fetchLevel = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++;
     });
 };
 
@@ -1087,7 +1085,8 @@ const fetchPositionPath = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++;
+      // hideLoader();
     });
 };
 
@@ -1152,7 +1151,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        store.isLoad++;
       });
   }
 };
diff --git a/src/modules/04_registry/components/Information/Address.vue b/src/modules/04_registry/components/Information/Address.vue
index 52e5bd0db..4ac6c6611 100644
--- a/src/modules/04_registry/components/Information/Address.vue
+++ b/src/modules/04_registry/components/Information/Address.vue
@@ -306,6 +306,9 @@ import HistoryTable from "@/components/TableHistory.vue";
 import { useRoute } from "vue-router";
 import type { AddressOps } from "@/modules/04_registry/interface/index/Main";
 import type { QTableProps } from "quasar";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+
+const profileStore = useProfileDataStore();
 
 const props = defineProps({
   statusEdit: {
@@ -631,7 +634,7 @@ const getNewData = async () => {
 
 const fetchData = async () => {
   if (route.params.id) {
-    showLoader();
+    // showLoader();
     await http
       .get(config.API.profileAdrsId(route.params.id.toString()))
       .then((res) => {
@@ -671,7 +674,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        profileStore.isLoad++;
       });
   }
 };
@@ -835,7 +839,7 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      profileStore.isLoad++;
     });
 };
 
@@ -888,9 +892,9 @@ const fetchDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        profileStore.isLoad++;
       });
-  }
+  } else profileStore.isLoad++;
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
@@ -942,9 +946,9 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        profileStore.isLoad++;
       });
-  }
+  } else profileStore.isLoad++;
 };
 
 const changeBtn = async () => {
diff --git a/src/modules/04_registry/components/Information/Certicate.vue b/src/modules/04_registry/components/Information/Certicate.vue
index 74ac8f943..e935500f4 100644
--- a/src/modules/04_registry/components/Information/Certicate.vue
+++ b/src/modules/04_registry/components/Information/Certicate.vue
@@ -69,9 +69,7 @@
         />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
@@ -512,7 +510,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        store.isLoad++;
       });
   }
 };
diff --git a/src/modules/04_registry/components/Information/Family.vue b/src/modules/04_registry/components/Information/Family.vue
index 0eb990250..2caf2f64a 100644
--- a/src/modules/04_registry/components/Information/Family.vue
+++ b/src/modules/04_registry/components/Information/Family.vue
@@ -1284,17 +1284,17 @@
             </div>
             <div class="col">
               <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="items.childrenFirstName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :label="`${'ชื่อ'}`"
-            />
+                :class="getClass(false)"
+                hide-bottom-space
+                :outlined="false"
+                dense
+                lazy-rules
+                :readonly="true"
+                :borderless="true"
+                v-model="items.childrenFirstName"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+                :label="`${'ชื่อ'}`"
+              />
             </div>
             <div class="col">
               <q-input
@@ -1436,6 +1436,7 @@
 import { ref, onMounted } from "vue";
 import type { QForm } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/04_registry/store";
 
 import { useQuasar } from "quasar";
 import type {
@@ -1453,6 +1454,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
 
+const profileStore = useProfileDataStore();
+
 const props = defineProps({
   statusEdit: {
     type: Boolean,
@@ -1595,7 +1598,8 @@ const fetchPrefix = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      // hideLoader();
+      profileStore.isLoad++;
     });
 };
 
@@ -1747,7 +1751,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        // hideLoader();
+        profileStore.isLoad++
       });
   }
 };
diff --git a/src/modules/04_registry/components/Information/Government.vue b/src/modules/04_registry/components/Information/Government.vue
index ee97886aa..3d9b7f808 100644
--- a/src/modules/04_registry/components/Information/Government.vue
+++ b/src/modules/04_registry/components/Information/Government.vue
@@ -619,7 +619,7 @@ watch(retireText, async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  // showLoader();
   await http
     .get(config.API.profileGovId(route.params.id.toString()))
     .then((res) => {
@@ -645,7 +645,8 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      // hideLoader();
+      profileStore.isLoad++;
     });
 };
 
diff --git a/src/modules/04_registry/components/Information/Information.vue b/src/modules/04_registry/components/Information/Information.vue
index 631f7c885..a0390c5c1 100644
--- a/src/modules/04_registry/components/Information/Information.vue
+++ b/src/modules/04_registry/components/Information/Information.vue
@@ -1,41 +1,106 @@
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <HeaderTop v-model:edit="edit" header="ข้อมูลส่วนตัว" icon="mdi-account" :save="saveData" :history="!statusAdd()"
-      :changeBtn="changeBtn" :disable="statusEdit" :cancel="onCancel" :historyClick="clickHistory"
-      :addEmployee="statusAdd()" />
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลส่วนตัว"
+      icon="mdi-account"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="onCancel"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 q-col-gutter-x-sm q-col-gutter-y-sm">
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
-            :borderless="!edit" v-model="informaData.cardid" @update:model-value="changeCardID" :rules="[
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.cardid"
+            @update:model-value="changeCardID"
+            :rules="[
               (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
               (val: string) =>
                 val.length >= 13 ||
                 `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-            ]" label="เลขประจำตัวประชาชน" maxlength="13" mask="#############" />
+            ]"
+            label="เลขประจำตัวประชาชน"
+            maxlength="13"
+            mask="#############"
+          />
         </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.prefixId" emit-value map-options option-label="name" :options="Ops.prefixOps"
-            option-value="id" :label="`${'คำนำหน้าชื่อ'}`" use-input input-debounce="0" @filter="(inputValue: any,
+          <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.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-6 col-sm-3 col-md-3">
-          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
-            :borderless="!edit" v-model="informaData.firstname" :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`" />
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.firstname"
+            :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
-            :borderless="!edit" v-model="informaData.lastname"
-            :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.lastname"
+            :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <datepicker v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
-            :max-date="new Date()" :disabled="!edit" @update:model-value="handleDate">
+          <datepicker
+            v-model="informaData.birthDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -43,15 +108,30 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
-                :borderless="!edit" :model-value="informaData.birthDate !== null
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="
+                  informaData.birthDate !== null
                     ? date2Thai(informaData.birthDate)
                     : null
-                  " :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                :label="`${'วัน/เดือน/ปี เกิด'}`">
+                "
+                :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                :label="`${'วัน/เดือน/ปี เกิด'}`"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
-                    ">
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -59,99 +139,273 @@
           </datepicker>
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input :class="getClass(false)" hide-bottom-space dense lazy-rules readonly borderless
-            :style="!edit ? '' : 'padding:0 12px;'" :model-value="informaData.age" :label="`${'อายุ'}`" />
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :model-value="informaData.age"
+            :label="`${'อายุ'}`"
+          />
         </div>
         <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.genderId" emit-value map-options
-            option-label="name" :options="Ops.genderOps" option-value="id" :label="`${'เพศ'}`" use-input
-            input-debounce="0" @filter="(inputValue: any,
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.genderId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.genderOps"
+            option-value="id"
+            :label="`${'เพศ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
-              )" />
+              )"
+          />
         </div>
         <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.statusId" emit-value map-options
-            option-label="name" :options="Ops.statusOps" option-value="id" :label="`${'สถานภาพ'}`" use-input
-            input-debounce="0" @filter="(inputValue: any,
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.statusId"
+            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>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
-            :borderless="!edit" v-model="informaData.nationality" :label="`${'สัญชาติ'}`" />
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.nationality"
+            :label="`${'สัญชาติ'}`"
+          />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
-            :borderless="!edit" v-model="informaData.ethnicity" :label="`${'เชื้อชาติ'}`" />
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.ethnicity"
+            :label="`${'เชื้อชาติ'}`"
+          />
         </div>
         <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.religionId" emit-value map-options
-            option-label="name" :options="Ops.religionOps" option-value="id" :label="`${'ศาสนา'}`" use-input
-            input-debounce="0" @filter="(inputValue: any,
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.religionId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.religionOps"
+            option-value="id"
+            :label="`${'ศาสนา'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
-              )" />
+              )"
+          />
         </div>
         <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,
+          <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 />
+              )"
+            clearable
+          />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input hide-bottom-space :outlined="edit" dense lazy-rules type="tel" :class="getClass(edit)"
-            :readonly="!edit" :borderless="!edit" v-model="informaData.tel" :label="`${'เบอร์โทร'}`" :rules="[
+          <q-input
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.tel"
+            :label="`${'เบอร์โทร'}`"
+            :rules="[
               (val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
               (val: string) =>
                 val.length >= 10 ||
                 `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
-            ]" mask="##########" />
+            ]"
+            mask="##########"
+          />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="informaData.profileType == 'employee'">
-          <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.employeeType" emit-value map-options option-label="name"
-            :options="Ops.employeeTypeOps" option-value="id" :label="`${'ประเภทการจ้าง'}`" use-input input-debounce="0"
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <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.employeeType"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeTypeOps"
+            option-value="id"
+            :label="`${'ประเภทการจ้าง'}`"
+            use-input
+            input-debounce="0"
             @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeTypeOps'
-              )" />
+              )"
+          />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="informaData.profileType == 'employee'">
-          <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.employeeClass" emit-value map-options option-label="name"
-            :options="Ops.employeeClassOps" option-value="id" :label="`${'ประเภทลูกจ้าง'}`" use-input input-debounce="0"
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <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.employeeClass"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeClassOps"
+            option-value="id"
+            :label="`${'ประเภทลูกจ้าง'}`"
+            use-input
+            input-debounce="0"
             @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
-              )" />
+              )"
+          />
         </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="ไม่มี"
-            color="grey-9" dense :disable="!edit" />
+          <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="ไม่มี"
+            color="grey-9"
+            dense
+            :disable="!edit"
+          />
         </div>
         <div class="row col-12">
-          <OldName v-if="same == '1'" v-model:statusEdit="edit" :fetchDataInformation="fetchDataComponent"
-            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId" :firstname="informaData.firstname == null ? '' : informaData.firstname
-              " :lastname="informaData.lastname == null ? '' : informaData.lastname" />
+          <OldName
+            v-if="same == '1'"
+            v-model:statusEdit="edit"
+            :fetchDataInformation="fetchDataComponent"
+            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
+            :firstname="
+              informaData.firstname == null ? '' : informaData.firstname
+            "
+            :lastname="informaData.lastname == null ? '' : informaData.lastname"
+          />
         </div>
       </div>
     </q-form>
   </q-card>
-  <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">
+  <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 == 'birthDate' || col.name == 'createdAt'" class="table_ellipsis">
+          <div
+            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
             {{ date2Thai(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
@@ -502,7 +756,7 @@ const onCancel = async () => {
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
 const fetchPerson = async () => {
-  showLoader();
+  // showLoader();
   await http
     .get(config.API.person)
     .then((res) => {
@@ -557,9 +811,10 @@ const fetchPerson = async () => {
       Ops.value.religionOps = optionreligions;
       OpsFilter.value.religionOps = optionreligions;
     })
-    .catch((e: any) => { })
+    .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      // hideLoader();
+      profileStore.isLoad++;
     });
 };
 
@@ -643,14 +898,14 @@ const clickHistory = async () => {
             e.employeeType == "gov"
               ? "งบประมาณเงินอุดหนุนรัฐบาล"
               : e.employeeType == "bkk"
-                ? "งบประมาณกรุงเทพมหานคร"
-                : "-",
+              ? "งบประมาณกรุงเทพมหานคร"
+              : "-",
           employeeClass:
             e.employeeClass == "perm"
               ? "ลูกจ้างประจำ"
               : e.employeeClass == "temp"
-                ? "ลูกจ้างชั่วคราว"
-                : "-",
+              ? "ลูกจ้างชั่วคราว"
+              : "-",
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });
@@ -759,7 +1014,6 @@ const calRetire = async (birth: Date) => {
 
 const fetchData = async () => {
   if (route.params.id) {
-    showLoader();
     await http
       .get(config.API.profileInforId(route.params.id.toString()))
       .then(async (res: any) => {
@@ -829,7 +1083,10 @@ const editData = async () => {
     nationality: informaData.value.nationality,
     race: informaData.value.ethnicity,
     religionId: informaData.value.religionId,
-    birthDate: informaData.value.birthDate != null ? dateToISO(informaData.value.birthDate) : dateToISO(new Date()),
+    birthDate:
+      informaData.value.birthDate != null
+        ? dateToISO(informaData.value.birthDate)
+        : dateToISO(new Date()),
     bloodGroupId: informaData.value.bloodId,
     relationshipId: informaData.value.statusId,
     telephoneNumber: informaData.value.tel,
diff --git a/src/modules/04_registry/components/Insignia.vue b/src/modules/04_registry/components/Insignia.vue
index 15f9c86ac..08f8a0d9b 100644
--- a/src/modules/04_registry/components/Insignia.vue
+++ b/src/modules/04_registry/components/Insignia.vue
@@ -66,9 +66,7 @@
         <DialogHeader tittle="เครื่องราชอิสริยาภรณ์" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
-            class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
@@ -938,7 +936,7 @@ const fetchInsignia = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++;
     });
 };
 
@@ -977,7 +975,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        store.isLoad++;
       });
   }
 };
diff --git a/src/modules/04_registry/components/Leave.vue b/src/modules/04_registry/components/Leave.vue
index 1e6a29701..25cb029ce 100644
--- a/src/modules/04_registry/components/Leave.vue
+++ b/src/modules/04_registry/components/Leave.vue
@@ -748,7 +748,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };
diff --git a/src/modules/04_registry/components/Other.vue b/src/modules/04_registry/components/Other.vue
index dbd180569..8144ca9f6 100644
--- a/src/modules/04_registry/components/Other.vue
+++ b/src/modules/04_registry/components/Other.vue
@@ -40,9 +40,8 @@
                 icon="mdi-history"
                 @click="clickHistory(props.row)"
               >
-            <q-tooltip>ประวัติแก้ไขอื่นๆ
-</q-tooltip>
-            </q-btn>
+                <q-tooltip>ประวัติแก้ไขอื่นๆ </q-tooltip>
+              </q-btn>
             </q-td>
           </q-tr>
         </template>
@@ -56,9 +55,7 @@
         <DialogHeader tittle="อื่นๆ" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
-            class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
@@ -327,7 +324,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++;
       });
   }
 };
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index d3a61bacb..1b4c88fae 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -153,7 +153,7 @@
           </div>
         </div>
         <q-space />
-      
+
         <q-btn
           v-if="
             profileType == 'officer' ||
@@ -211,11 +211,7 @@
                 <q-item-section>ปรับระดับชั้นงาน - ย้าย</q-item-section>
               </q-item>
               <q-separator />
-              <q-item
-                clickable
-                v-close-popup
-                @click="clickPassaway"
-              >
+              <q-item clickable v-close-popup @click="clickPassaway">
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ถึงแก่กรรม</q-item-section>
@@ -290,8 +286,14 @@
           <q-menu>
             <q-list style="min-width: 100px">
               <q-item clickable v-close-popup @click="clickKp7()">
-                <q-item-section v-if="profileType == 'officer'" class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
-                <q-item-section v-else class="text-blue">ทะเบียนประวัติ</q-item-section>
+                <q-item-section
+                  v-if="profileType == 'officer'"
+                  class="text-blue"
+                  >ก.พ.7/ก.ก.1</q-item-section
+                >
+                <q-item-section v-else class="text-blue"
+                  >ทะเบียนประวัติ</q-item-section
+                >
               </q-item>
               <q-item clickable v-close-popup @click="clickKp7Short()">
                 <q-item-section class="text-primary"
@@ -747,7 +749,7 @@
   <full-loader :visibility="loader"></full-loader>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted, watch } from "vue";
 import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
@@ -778,9 +780,11 @@ 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";
+import { useProfileDataStore } from "@/modules/04_registry/store";
 
 const $q = useQuasar();
 const store = useDataStore();
+const profileStore = useProfileDataStore();
 const { changeTab } = store;
 const reasonDeath = ref("");
 const deathCertificateNo = ref("");
@@ -899,7 +903,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      profileStore.isLoad++;
     });
 };
 
@@ -1091,7 +1095,7 @@ const helpPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/help-government')
+        router.push("/help-government");
       });
   });
 };
@@ -1111,7 +1115,7 @@ const repatriationPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/repatriate')
+        router.push("/repatriate");
       });
   });
 };
@@ -1131,7 +1135,7 @@ const appointPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/appoint-promote')
+        router.push("/appoint-promote");
       });
   });
 };
@@ -1152,7 +1156,7 @@ const appointEmployeePost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/appoint-employee')
+        router.push("/appoint-employee");
       });
   });
 };
@@ -1180,7 +1184,7 @@ const outPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/dismiss-order')
+        router.push("/dismiss-order");
       });
   });
 };
@@ -1200,7 +1204,7 @@ const dischargePost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/discharged')
+        router.push("/discharged");
       });
   });
 };
@@ -1220,7 +1224,7 @@ const expulsionPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/expulsion')
+        router.push("/expulsion");
       });
   });
 };
@@ -1240,7 +1244,7 @@ const otherPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/other')
+        router.push("/other");
       });
   });
 };
@@ -1495,6 +1499,14 @@ const clickSaveDeceased = async () => {
     .onCancel(() => {})
     .onDismiss(() => {});
 };
+
+watch(
+  () => profileStore.isLoad,
+  () => {
+    profileStore.isLoad >= 33 && hideLoader();
+  }
+);
+onUnmounted(() => (profileStore.isLoad = 0));
 </script>
 <style>
 .image-size-default {
diff --git a/src/modules/04_registry/components/Record.vue b/src/modules/04_registry/components/Record.vue
index 31fcbeb05..b03a39e61 100644
--- a/src/modules/04_registry/components/Record.vue
+++ b/src/modules/04_registry/components/Record.vue
@@ -507,7 +507,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };
diff --git a/src/modules/04_registry/components/Salary.vue b/src/modules/04_registry/components/Salary.vue
index 32556b17d..ff9bb2811 100644
--- a/src/modules/04_registry/components/Salary.vue
+++ b/src/modules/04_registry/components/Salary.vue
@@ -383,7 +383,7 @@
                         hide-bottom-space
                       /> -->
                       <CurrencyInput
-                      lazy-rules
+                        lazy-rules
                         v-model="amount"
                         :edit="edit"
                         :options="{
@@ -396,7 +396,7 @@
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-4">
                       <CurrencyInput
-                      lazy-rules
+                        lazy-rules
                         v-model="positionSalaryAmount"
                         :edit="edit"
                         :options="{
@@ -434,7 +434,7 @@
                         hide-bottom-space
                       /> -->
                       <CurrencyInput
-                      lazy-rules
+                        lazy-rules
                         v-model="mouthSalaryAmount"
                         :edit="edit"
                         :options="{
@@ -1483,7 +1483,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++;
     });
 };
 
@@ -1568,7 +1568,8 @@ const fetchPosition = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      // hideLoader();
+      store.isLoad++;
     });
 };
 
@@ -1578,7 +1579,7 @@ const fetchData = async () => {
     await http
       .get(config.API.profileSalaryId(profileId.value))
       .then((res) => {
-        let data = res.data.result;      
+        let data = res.data.result;
         rows.value = [];
         data.map((e: ResponseObject) => {
           rows.value.push({
@@ -1624,7 +1625,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++;
       });
   }
 };
diff --git a/src/modules/04_registry/components/SalaryEmployee.vue b/src/modules/04_registry/components/SalaryEmployee.vue
index 0a8d3d4db..6b8b38ba7 100644
--- a/src/modules/04_registry/components/SalaryEmployee.vue
+++ b/src/modules/04_registry/components/SalaryEmployee.vue
@@ -1300,14 +1300,14 @@ onMounted(async () => {
 });
 
 const fetchDataSelector = async () => {
-  showLoader();
+  // showLoader();
   await fetchEmployeePosition();
   await fetchEmployeePositionSide();
   await fetchEmployeeLevel();
   await fetchEmployeeGroup();
   await fetchAgency();
   await nodeTree();
-  hideLoader();
+  // hideLoader();
 };
 // ตำแหน่ง
 const fetchEmployeePosition = async () => {
@@ -1416,7 +1416,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++
     });
 };
 
@@ -1548,7 +1548,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };
diff --git a/src/modules/04_registry/components/SalaryEmployeeTemp.vue b/src/modules/04_registry/components/SalaryEmployeeTemp.vue
index 552cede36..f5f303b8d 100644
--- a/src/modules/04_registry/components/SalaryEmployeeTemp.vue
+++ b/src/modules/04_registry/components/SalaryEmployeeTemp.vue
@@ -1329,14 +1329,14 @@ onMounted(async () => {
 });
 
 const fetchDataSelector = async () => {
-  showLoader();
+  // showLoader();
   await fetchEmployeePosition();
   await fetchEmployeePositionSide();
   await fetchEmployeeLevel();
   await fetchEmployeeGroup();
   await fetchAgency();
   await nodeTree();
-  hideLoader();
+  // hideLoader();
 };
 // ตำแหน่ง
 const fetchEmployeePosition = async () => {
@@ -1445,7 +1445,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++
     });
 };
 
@@ -1575,7 +1575,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };
diff --git a/src/modules/04_registry/components/Talent.vue b/src/modules/04_registry/components/Talent.vue
index 8cdc091ff..1a0550239 100644
--- a/src/modules/04_registry/components/Talent.vue
+++ b/src/modules/04_registry/components/Talent.vue
@@ -380,7 +380,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };
diff --git a/src/modules/04_registry/components/Train.vue b/src/modules/04_registry/components/Train.vue
index 182580c1f..afb78c4d6 100644
--- a/src/modules/04_registry/components/Train.vue
+++ b/src/modules/04_registry/components/Train.vue
@@ -50,8 +50,8 @@
                 icon="mdi-history"
                 @click="clickHistory(props.row)"
               >
-            <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
-            </q-btn>
+                <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
+              </q-btn>
             </q-td>
           </q-tr>
         </template>
@@ -65,9 +65,7 @@
         <DialogHeader tittle="การฝึกอบรม/ดูงาน" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
-            class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
@@ -784,7 +782,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        store.isLoad++;
       });
   }
 };
diff --git a/src/modules/04_registry/components/Work.vue b/src/modules/04_registry/components/Work.vue
index 7fecb3d3d..b3e6032bb 100644
--- a/src/modules/04_registry/components/Work.vue
+++ b/src/modules/04_registry/components/Work.vue
@@ -583,7 +583,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };
diff --git a/src/modules/04_registry/store.ts b/src/modules/04_registry/store.ts
index af09e0d0a..c43189d0c 100644
--- a/src/modules/04_registry/store.ts
+++ b/src/modules/04_registry/store.ts
@@ -2,7 +2,7 @@ import { ref, computed } from "vue";
 import { defineStore } from "pinia";
 
 export const useProfileDataStore = defineStore("profile", () => {
-  const emplployeeClass = ref<string | null>('')
+  const emplployeeClass = ref<string | null>("");
   interface profile {
     main: { columns: String[] };
     education: { columns: String[] };
@@ -73,7 +73,10 @@ export const useProfileDataStore = defineStore("profile", () => {
     profileData.value = JSON.parse(localStorage.getItem("profile") || "{}");
   }
 
+  const isLoad = ref<number>(0);
+
   return {
+    isLoad,
     profileData,
     changeProfileColumns,
     birthDate,
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index dfc96ed0d..0ae1e3e5c 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
-import type { DataOption1 } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QForm } from "quasar";
 import { useQuasar } from "quasar";
@@ -10,7 +9,7 @@ import config from "@/app.config";
 import type { treeTab } from "@/modules/05_placement/interface/index/Main";
 import type { ResponseOrganiz } from "@/modules/05_placement/interface/response/Order";
 import type { QTableProps } from "quasar";
-import type { OrederResult } from "@/modules/10_order/interface/index/Main";
+import type { DataOption1, OrederResult } from "@/modules/10_order/interface/index/Main";
 
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import { useOrderPlacementDataStore } from "@/modules/10_order/store";
@@ -121,6 +120,13 @@ const faultLevel = ref<string>("");
 const caseFault = ref<string>("");
 const result = ref<string>("");
 const refRaw = ref<string>("");
+const complaintId = ref<string>("");
+const complaintOption = ref<DataOption1[]>([
+  {
+    id: "00000000-0000-0000-0000-000000000000",
+    name: "ทุจริตต่อหน้าที่",
+  },
+]);
 
 const typeOrderFilter = ref<any>({
   typeOrderOption: [],
@@ -277,11 +283,12 @@ const fetchdetailOrder = async () => {
       conclusionTranferNo.value = data.conclusionTranferNo;
       conclusionTranferDate.value = data.conclusionTranferDate;
 
-      // 25-32
+      // 19, 20 และ 25-32
       faultLevel.value = data.faultLevel;
       caseFault.value = data.caseFault;
       result.value = data.result;
       refRaw.value = data.refRaw;
+      complaintId.value = data.complaintId;
 
       fecthExamRoundOption(data.orderTypeCode);
     })
@@ -293,6 +300,7 @@ const fetchdetailOrder = async () => {
       hideLoader();
     });
 };
+
 const fecthCommand = async () => {
   await http
     .get(config.API.organizationsOrder())
@@ -303,6 +311,7 @@ const fecthCommand = async () => {
       messageError($q, e);
     });
 };
+
 const selectCMP = (selectOrder: OrederResult) => {
   if (selectOrder != null) {
     fecthExamRoundOption(selectOrder.commandCode);
@@ -361,12 +370,15 @@ const selectCMP = (selectOrder: OrederResult) => {
   // 24
   conclusionTranferNo.value = "";
   conclusionTranferDate.value = new Date();
-  // 25-32
+  // 19, 20 & 25-32
   faultLevel.value = "";
   caseFault.value = "";
   result.value = "";
   refRaw.value = "";
+
+  complaintId.value = "";
 };
+
 // เรียกรอบการสอบ
 const fecthExamRoundOption = async (commandCode: string) => {
   await http
@@ -378,6 +390,7 @@ const fecthExamRoundOption = async (commandCode: string) => {
       messageError($q, e);
     });
 };
+
 // บันทึกข้อมูล
 const submit = async () => {
   let signBy = null;
@@ -481,11 +494,7 @@ const submit = async () => {
       govAidCommandNo: orderNumber.value,
       govAidCommandDate: orderNumberDate.value,
     });
-  } else if (
-    typeOrder.value.commandCode == "C-PM-18" ||
-    typeOrder.value.commandCode == "C-PM-19" ||
-    typeOrder.value.commandCode == "C-PM-20"
-  ) {
+  } else if (typeOrder.value.commandCode == "C-PM-18") {
     Object.assign(formdata, {
       fault: fault.value,
       guiltyBasis: guiltyBasis.value,
@@ -493,6 +502,22 @@ const submit = async () => {
       conclusionFireDate: conclusionFireDate.value,
       conclusionFireResolution: conclusionFireResolution.value,
     });
+  } else if (
+    typeOrder.value.commandCode == "C-PM-19" ||
+    typeOrder.value.commandCode == "C-PM-20"
+  ) {
+    Object.assign(formdata, {
+      complaintId: complaintId.value,
+      fault: "-",
+      guiltyBasis: "-",
+      conclusionFireNo: conclusionFireNo.value,
+      conclusionFireDate: conclusionFireDate.value,
+      conclusionFireResolution: conclusionFireResolution.value,
+      faultLevel: faultLevel.value,
+      caseFault: caseFault.value,
+      result: result.value,
+      refRaw: refRaw.value,
+    });
   } else if (typeOrder.value.commandCode == "C-PM-24") {
     Object.assign(formdata, {
       conclusionTranferNo: conclusionTranferNo.value,
@@ -509,6 +534,7 @@ const submit = async () => {
     typeOrder.value.commandCode == "C-PM-32"
   ) {
     Object.assign(formdata, {
+      complaintId: complaintId.value,
       faultLevel: faultLevel.value,
       caseFault: caseFault.value,
       result: result.value,
@@ -1781,12 +1807,7 @@ const getClass = (val: boolean) => {
       <!-- C-PM-18-20 -->
       <div
         class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
-        v-if="
-          typeOrder != null &&
-          (typeOrder.commandCode === 'C-PM-18' ||
-            typeOrder.commandCode === 'C-PM-19' ||
-            typeOrder.commandCode === 'C-PM-20')
-        "
+        v-if="typeOrder != null && typeOrder.commandCode === 'C-PM-18'"
       >
         <div class="col-xs-12 col-md-6">
           <q-input
@@ -1892,6 +1913,163 @@ const getClass = (val: boolean) => {
         </div>
       </div>
 
+      <!-- C-PM-18-19 -->
+      <div
+        class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
+        v-if="
+          typeOrder != null &&
+          (typeOrder.commandCode === 'C-PM-19' ||
+            typeOrder.commandCode === 'C-PM-20')
+        "
+      >
+        <div class="row col-12">
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="complaintId"
+              :rules="[(val: string) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
+              emit-value
+              hide-bottom-space
+              :label="`${'เรื่องร้องเรียน'}`"
+              map-options
+              option-label="name"
+              :options="complaintOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+            />
+          </div>
+        </div>
+
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusionFireNo"
+            :rules="[
+              (val) =>
+                !!val || `${'กรุณากรอกครั้งที่ (เรื่องการดำเนินการทางวินัย)'}`,
+            ]"
+            :label="`${'ครั้งที่ (เรื่องการดำเนินการทางวินัย)'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="conclusionFireDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  conclusionFireDate != null
+                    ? date2Thai(conclusionFireDate)
+                    : null
+                "
+                :label="`${'ลงวันที่ (เรื่องการดำเนินการทางวินัย) '}`"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${'กรุณาเลือกลงวันที่ (เรื่องการดำเนินการทางวินัย)'}`,
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-12 col-md-4">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="conclusionFireResolution"
+            :rules="[
+              (val) =>
+                !!val ||
+                `${'กรุณากรอก มติที่ประชุม(เรื่องการดำเนินการทางวินัย)'}`,
+            ]"
+            :label="`${'มติที่ประชุม (เรื่องการดำเนินการทางวินัย)'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="faultLevel"
+            :rules="[(val) => !!val || `${'กรุณากรอกระดับความผิด'}`]"
+            :label="`${'ระดับความผิด'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="caseFault"
+            :rules="[(val) => !!val || `${'กรุณากรอกกรณีความผิด'}`]"
+            :label="`${'กรณีความผิด'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="result"
+            :rules="[(val) => !!val || `${'กรุณากรอกผลดำเนินการพิจารณา'}`]"
+            :label="`${'ผลดำเนินการพิจารณา'}`"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="refRaw"
+            :rules="[(val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`]"
+            :label="`${'อ้างอิงมาตราตามกฎหมาย'}`"
+            hide-bottom-space
+          />
+        </div>
+      </div>
+
       <!-- C-PM-24 -->
       <div
         class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md"
@@ -1968,6 +2146,28 @@ const getClass = (val: boolean) => {
             typeOrder.commandCode === 'C-PM-32')
         "
       >
+        <div class="row col-12">
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="complaintId"
+              :rules="[(val: string) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
+              emit-value
+              hide-bottom-space
+              :label="`${'เรื่องร้องเรียน'}`"
+              map-options
+              option-label="name"
+              :options="complaintOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+            />
+          </div>
+        </div>
+
         <div class="col-xs-12 col-md-6">
           <q-input
             :class="getClass(true)"
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index 1d8780048..8ba0b009a 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@@ -40,6 +40,8 @@ const {
 
 const route = useRoute();
 const $q = useQuasar();
+
+const routeName = ref<string>(route.name ? route.name.toString() : "");
 const modalData = ref<any>({
   salaryAmount: null,
   positionSalaryAmount: null,
@@ -715,7 +717,9 @@ const pagination = ref({
             :visible-columns="visibleColumns"
             :filter="filter"
             row-key="name"
-            selection="multiple"
+            :selection="
+              routeName === 'disciplineOrderDatail' ? 'single' : 'multiple'
+            "
             v-model:selected="selected"
           >
             <template v-slot:header="props">
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index 34cb354f8..a90a1df7a 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -50,11 +50,9 @@ const dataGen = ref<any>();
 const orderId = ref<string>(orderId_params.toString());
 onMounted(async () => {
   if (orderId.value) {
-    showLoader();
     await fetchAttachment(orderId.value);
     await fecthstatusOrder();
     await getCommandDetail();
-    hideLoader();
   }
 });
 
@@ -99,6 +97,7 @@ const genReportStatus = computed(() => {
 
 // เรียกข้อมูลคำสั่ง
 const getCommandDetail = async () => {
+  showLoader();
   await http
     .get(config.API.detailOrder(orderId.value))
     .then(async (res) => {
diff --git a/src/modules/12_evaluatePersonal/interface/index/Main.ts b/src/modules/12_evaluatePersonal/interface/index/Main.ts
index f3ecb355b..1c0e74bac 100644
--- a/src/modules/12_evaluatePersonal/interface/index/Main.ts
+++ b/src/modules/12_evaluatePersonal/interface/index/Main.ts
@@ -1,86 +1,91 @@
 interface DataOption {
-    id: string;
-    name: string;
-  }
-  interface DataOptionYear {
-    id: number;
-    name: string;
-  }
-  interface DataOptioGroup {
-    id: string;
-    name: string;
-  
-    disable: Boolean;
-  }
-  
-  interface DataNumberOption {
-    id: number;
-    name: string;
-  }
-  
-  interface InvestigatefactsDataRowType {
-    id: string;
-    title: string;
-    respondentType: string;
-    offenseDetails: string;
-    investigationDetail: string;
-    dateInvestigate: string;
-    investigationStatusResult: string;
-    status: string;
-  }
-  
-  interface investigateDisDataRowType {
-    id: string; //id รายการ
-    title: string; //เรื่องร้องเรียน
-    interrogated: string; //ผู้ถูกสอบสวน
-    descMistake: string; //ลักษณะความผิด
-    mistakeLevel: string; //ระดับโทษความผิด
-    mistakeCase: string; //กรณีความผิด
-    investigationDate: Date | null; //วันที่สอบสวน
-    status: string | null; //สถานะ
-    isResultConfirmed: Boolean; //ยืนยันผลเเล้ว/ยังไม่ได้ยืนยันผล
-  }
-  
-  interface directorType {
-    id: string;
-    directorId?: string;
-    prefix: string;
-    firstName: string;
-    lastName: string;
-    position: string;
-    email: string;
-    phone: string;
-    total?: number;
-    duty?: string;
-  }
-  interface responseType {
-    id: string;
-    directorId?: string;
-    prefix: string;
-    firstName: string;
-    lastName: string;
-    position: string;
-    email: string;
-    phone: string;
-    total?: number;
-    duty?: string;
-    
-  }
-  
-  interface FileLists {
-    id: string; //id เอกสาร
-    fileName: string; //ชื่่อเอกสาร
-    pathName: string; //link file
-  }
-  
-  export type {
-    DataOption,
-    InvestigatefactsDataRowType,
-    investigateDisDataRowType,
-    directorType,
-    DataNumberOption,
-    responseType,
-    FileLists,
-    DataOptioGroup,
-    DataOptionYear,
-  };  
\ No newline at end of file
+  id: string;
+  name: string;
+}
+interface DataOptionYear {
+  id: number;
+  name: string;
+}
+interface DataOptioGroup {
+  id: string;
+  name: string;
+
+  disable: Boolean;
+}
+
+interface OptionStatus {
+  val: string;
+  label: string;
+}
+
+interface DataNumberOption {
+  id: number;
+  name: string;
+}
+
+interface InvestigatefactsDataRowType {
+  id: string;
+  title: string;
+  respondentType: string;
+  offenseDetails: string;
+  investigationDetail: string;
+  dateInvestigate: string;
+  investigationStatusResult: string;
+  status: string;
+}
+
+interface investigateDisDataRowType {
+  id: string; //id รายการ
+  title: string; //เรื่องร้องเรียน
+  interrogated: string; //ผู้ถูกสอบสวน
+  descMistake: string; //ลักษณะความผิด
+  mistakeLevel: string; //ระดับโทษความผิด
+  mistakeCase: string; //กรณีความผิด
+  investigationDate: Date | null; //วันที่สอบสวน
+  status: string | null; //สถานะ
+  isResultConfirmed: Boolean; //ยืนยันผลเเล้ว/ยังไม่ได้ยืนยันผล
+}
+
+interface directorType {
+  id: string;
+  directorId?: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  position: string;
+  email: string;
+  phone: string;
+  total?: number;
+  duty?: string;
+}
+interface responseType {
+  id: string;
+  directorId?: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  position: string;
+  email: string;
+  phone: string;
+  total?: number;
+  duty?: string;
+}
+
+interface FileLists {
+  id: string; //id เอกสาร
+  fileName: string; //ชื่่อเอกสาร
+  pathName: string; //link file
+}
+
+export type {
+  DataOption,
+  InvestigatefactsDataRowType,
+  investigateDisDataRowType,
+  directorType,
+  DataNumberOption,
+  responseType,
+  FileLists,
+  DataOptioGroup,
+  DataOptionYear,
+  OptionStatus,
+};
diff --git a/src/modules/12_evaluatePersonal/views/MainPage.vue b/src/modules/12_evaluatePersonal/views/MainPage.vue
index 75c2ee633..607a06856 100644
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { OptionStatus } from "@/modules/12_evaluatePersonal/interface/index/Main";
+
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvalutuonStore } from "@/modules/12_evaluatePersonal/store/Evaluate";
@@ -90,11 +92,15 @@ function resetFilter() {
 
 /** function เรียกรายการคำขอประเมิน*/
 async function fetchEvaluteList() {
+  const body = {
+    page: currentPage.value,
+    pageSize: pageSize.value,
+    keyword: filter.value,
+    status: selectedStatus.value,
+  };
   showLoader();
   await http
-    .get(
-      config.API.evaluationMain(currentPage.value, pageSize.value, filter.value)
-    )
+    .put(config.API.evaluationMain(), body)
     .then(async (res) => {
       const data = res.data.result.data;
       total.value = res.data.result.total;
@@ -103,7 +109,7 @@ async function fetchEvaluteList() {
       store.fetchData(data);
     })
     .catch((e) => {
-      messageError($q, e);
+      // messageError($q, e);
     })
     .finally(() => {
       hideLoader();
@@ -118,6 +124,56 @@ function Detailpage(id: string) {
   router.push(`/evaluate/detail/${id}`);
 }
 
+const selectedStatus = ref<string[]>([
+  "CHECK_SPEC",
+  "PREPARE_DOC_V1",
+  "CHECK_DOC_V1",
+  "WAIT_CHECK_DOC_V1",
+  "ANNOUNCE_WEB",
+  "PREPARE_DOC_V2",
+  "WAIT_CHECK_DOC_V2",
+  "CHECK_DOC_V2",
+]);
+const options = ref<OptionStatus[]>([]);
+const optionsMain = ref<OptionStatus[]>([
+  { val: "CHECK_SPEC", label: "ตรวจสอบคุณสมบัติด้วยตนเอง" },
+  { val: "PREPARE_DOC_V1", label: "จัดเตรียมเอกสารเล่ม 1" },
+  { val: "CHECK_DOC_V1", label: "ตรวจสอบความถูกต้องของเอกสารเล่ม 1" },
+  { val: "WAIT_CHECK_DOC_V1", label: "รอตรวจสอบคุณสมบัติ" },
+  { val: "ANNOUNCE_WEB", label: "ประกาศบนเว็บไซต์" },
+  { val: "PREPARE_DOC_V2", label: "จัดเตรียมเอกสารเล่ม 2" },
+  { val: "WAIT_CHECK_DOC_V2", label: "รอพิจารณาผลการประเมิน" },
+  { val: "CHECK_DOC_V2", label: "ตรวจสอบความถูกต้องของเอกสารเล่ม" },
+  { val: "DONE", label: "เสร็จสิ้น" },
+]);
+
+/** ชื่อค่าที่ค้นหาสภานะ*/
+const label = computed(() => {
+  const filterOption = optionsMain.value.filter((option) =>
+    selectedStatus.value.includes(option.val)
+  );
+  const labelval = filterOption.map((e) => e.label);
+  if (labelval.length !== 0) {
+    return labelval.length <= 2
+      ? `${labelval.slice(0, 2).join(", ")}`
+      : `${labelval.slice(0, 2).join(", ")}, อื่นๆ (${labelval.length - 2})`;
+  } else return "";
+});
+
+/**
+ * function ต้นหาข้อมูลของ Option
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+function filterOption(val: any, update: Function) {
+  update(() => {
+    options.value = optionsMain.value.filter(
+      (v: any) => v.label.indexOf(val) > -1
+    );
+  });
+}
+
 /** HookLifecycle */
 onMounted(async () => {
   await fetchEvaluteList(); // เรียกข้อมูลรายการปรัเมิน
@@ -130,6 +186,33 @@ onMounted(async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
+      <q-select
+        dense
+        outlined
+        multiple
+        v-model="selectedStatus"
+        emit-value
+        map-options
+        :options="options"
+        option-value="val"
+        label="ค้นหาสถานะ"
+        style="width: 35vw"
+        @update:model-value="fetchEvaluteList"
+        use-input
+        @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+      >
+        <template v-slot:selected>
+          <div>
+            {{ label }}
+          </div>
+        </template>
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
       <q-space />
       <q-input
         class="col-xs-12 col-sm-3 col-md-2"
diff --git a/src/router/index.ts b/src/router/index.ts
index 391977edd..79f5de822 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,8 +5,11 @@ const Dashboard = () => import("@/views/Dashboard.vue");
 const Error404NotFound = () => import("@/views/Error404NotFound.vue");
 
 import ModuleMetadata from "@/modules/01_metadata/router";
+import ModuleMetadataNew from "@/modules/01_metadataNew/router";
 import ModuleOrganizational from "@/modules/02_organizational/router";
+import ModuleOrganizationalNew from "@/modules/02_organizationalNew/router";
 import ModuleRecruiting from "@/modules/03_recruiting/router";
+import ModuleRecruitingNew from "@/modules/03_recruitingNew/router";
 import ModuleRegistry from "@/modules/04_registry/router";
 import ModulePlacement from "@/modules/05_placement/router";
 import ModuleRetirement from "@/modules/06_retirement/router";
@@ -39,8 +42,11 @@ const router = createRouter({
           },
         },
         ...ModuleMetadata,
+        ...ModuleMetadataNew,
         ...ModuleOrganizational,
+        ...ModuleOrganizationalNew,
         ...ModuleRecruiting,
+        ...ModuleRecruitingNew,
         ...ModuleRegistry,
         ...ModulePlacement,
         ...ModuleRetirement,