diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 95bfd4f19..72f3efdcd 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -3,6 +3,7 @@ import env from "../index";
 const organization = `${env.API_URI}/org`;
 const orgPos = `${env.API_URI}/org/pos`;
 const orgProfile = `${env.API_URI}/org/profile`;
+const orgEmployeePos = `${env.API_URI}/org/employee/pos`;
 
 export default {
   /** โครงสร้างอัตรากำลัง*/
@@ -60,4 +61,20 @@ export default {
   activeOrganizationRoot: `${organization}/active/root`,
   activeOrganizationRootById: (id: string) =>
     `${organization}/active/root/${id}`,
+
+  /** ข้อมูลตำแหน่งลูกจ้างประจำ*/
+  orgEmployeePos: `${orgEmployeePos}/position`,
+  orgEmployeePosById: (id: string) => `${orgEmployeePos}/position/${id}`,
+  orgEmployeeType: `${orgEmployeePos}/type`,
+  orgEmployeeTypeById: (id: string) => `${orgEmployeePos}/type/${id}`,
+  orgEmployeelevel: `${orgEmployeePos}/level`,
+  orgEmployeelevelById: (id: string) => `${orgEmployeePos}/level/${id}`,
+
+  /** อัตรากำลังลูกจ้างประจำ*/
+  orgSummaryEmp: `${orgEmployeePos}/summary`,
+  orgReportEmp: (report: string) => `${orgEmployeePos}/report/${report}`,
+  orgDeleteProfileEmp: (id: string) => `${orgEmployeePos}/profile/delete/${id}`,
+  orgPosMasterByIdEmp: (id: string) => `${orgEmployeePos}/master/${id}`,
+  orgPosMasterListEmp: `${orgEmployeePos}/master/list`,
+  orgPosMasterEmp: `${orgEmployeePos}/master`,
 };
diff --git a/src/api/manage/api.insignia.ts b/src/api/manage/api.insignia.ts
index 5fe13f047..5933393f3 100644
--- a/src/api/manage/api.insignia.ts
+++ b/src/api/manage/api.insignia.ts
@@ -5,6 +5,8 @@
 import env from "../index";
 const insignia = `${env.API_URI}/metadata/insignia/`;
 const insigniaType = `${env.API_URI}/metadata/insignia-type/`;
+const insigniaOrg = `${env.API_URI}/org/insignia/insignia/`;
+const insigniaTypeOrg = `${env.API_URI}/org/insignia/insignia-type/`;
 
 export default {
   /**
@@ -36,4 +38,11 @@ export default {
   insigniaTypeNewId: (id: string) => `${insigniaType}${id}`,
   insigniaNewId: (id: string) => `${insignia}${id}`,
   insigniaSort: (id: string) => `${insignia}sort/${id}`,
+
+  insigniaOrg,
+  insigniaTypeOrg,
+  insigniaTypeNewOrg: `${insigniaOrg}`,
+  insigniaTypeNewIdOrg: (id: string) => `${insigniaOrg}${id}`,
+  insigniaNewIdOrg: (id: string) => `${insigniaOrg}${id}`,
+  insigniaSortOrg: (id: string) => `${insigniaOrg}sort/${id}`,
 };
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index d2c993c4b..8aacd7725 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -131,6 +131,14 @@ const menuList = readonly<any[]>([
     //   },
     // ],
   },
+  {
+    key: 4,
+    icon: "o_groups",
+    activeIcon: "groups",
+    label: "อัตรากำลังลูกจ้างประจำฯ",
+    path: "positionEmployee",
+    role: "positionEmployee",
+  },
   {
     key: 4,
     icon: "o_contact_page",
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
index a0d3d5c0d..1526bb26d 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -170,7 +170,7 @@ function validateForm() {
 async function fetchData(id: string) {
   showLoader();
   await http
-    .get(config.API.insigniaTypeNewId(id))
+    .get(config.API.insigniaTypeNewIdOrg(id))
     .then(async (res) => {
       insigniaTypeId.value = res.data.result.name;
       store.fetchData(res.data.result.insignias, res.data.result.name);
@@ -206,7 +206,7 @@ async function onSubmit() {
 }
 
 async function addData() {
-  await http.post(config.API.insignia, {
+  await http.post(config.API.insigniaOrg, {
     name: name.value,
     isActive: isActive.value,
     shortName: shortName.value,
@@ -217,7 +217,7 @@ async function addData() {
 }
 
 async function editData(idData: string) {
-  await http.put(config.API.insigniaNewId(idData), {
+  await http.put(config.API.insigniaNewIdOrg(idData), {
     name: name.value,
     isActive: isActive.value,
     shortName: shortName.value,
@@ -228,7 +228,7 @@ async function editData(idData: string) {
 }
 
 async function deleteData(idData: string) {
-  await http.delete(config.API.insigniaNewId(idData));
+  await http.delete(config.API.insigniaNewIdOrg(idData));
   fetchData(id.value);
 }
 
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
index 2d95029b0..7358c8555 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
@@ -100,7 +100,7 @@ const visibleColumns = ref<string[]>([
 async function fetchData() {
   showLoader();
   await http
-    .get(config.API.insigniaTypeNew)
+    .get(config.API.insigniaTypeNewOrg)
     .then(async (res) => {
       store.fetchData(res.data.result);
     })
@@ -125,7 +125,7 @@ function onclickDetail(id: string) {
 }
 
 async function addData() {
-  await http.post(config.API.insigniaType, {
+  await http.post(config.API.insigniaTypeOrg, {
     name: name.value,
     isActive: isActive.value,
   });
@@ -133,7 +133,7 @@ async function addData() {
 }
 
 async function editData(id: string) {
-  await http.put(config.API.insigniaTypeNewId(id), {
+  await http.put(config.API.insigniaTypeNewIdOrg(id), {
     name: name.value,
     isActive: isActive.value,
   });
@@ -141,7 +141,7 @@ async function editData(id: string) {
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.insigniaTypeNewId(id));
+  await http.delete(config.API.insigniaTypeNewIdOrg(id));
   fetchData();
 }
 
diff --git a/src/modules/01_metadataNew/components/insignia/TableDraggable.vue b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
index a6d551d6e..fc5654fdd 100644
--- a/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
+++ b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
@@ -64,12 +64,11 @@ async function save() {
   const dataPost = await rows.value.map((obj: any) => {
     return obj.id;
   });
-  console.log("post data===> ", dataPost);
   modal.value = false;
 
   showLoader();
   await http
-    .put(config.API.insigniaSort(id.value), { id: dataPost })
+    .put(config.API.insigniaSortOrg(id.value), { id: dataPost })
     .then(() => {
       store.row = rows.value;
     })
diff --git a/src/modules/01_metadataNew/components/position-employee/01ListPosition.vue b/src/modules/01_metadataNew/components/position-employee/01ListPosition.vue
index 2f2f0af64..b1e309a66 100644
--- a/src/modules/01_metadataNew/components/position-employee/01ListPosition.vue
+++ b/src/modules/01_metadataNew/components/position-employee/01ListPosition.vue
@@ -1,53 +1,44 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  ObjectPosRef,
+  FormQuery,
+} from "@/modules/01_metadataNew/interface/index/positionEmployee";
 import type {
   DataOption,
-  FormPositionSelect,
-  ListMenu,
   RowDetailPositions,
 } from "@/modules/01_metadataNew/interface/request/position/index";
-import type { QTableProps } from "quasar";
-import DialogAddPosition from "@/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue";
+import type {
+  ResGroup,
+  ResLevel,
+  ResPossition,
+} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
 
-const editPosition = ref<boolean>(false);
-const modalAddPosition = ref<boolean>(false);
-const levelOpsMain = ref<DataOption[]>([]);
-const dataLevel = ref<any>();
-const levelOps = ref<DataOption[]>([]);
+/**importComponets*/
+import DialogHeader from "@/components/DialogHeader.vue";
 
-const isSpecial = ref<boolean>(false);
-const formPositionSelect = reactive<FormPositionSelect>({
-  positionId: "",
-  posTypeId: "",
-  positionName: "",
-  positionField: "",
-  positionType: "",
-  positionLevel: "",
-  positionExecutive: "",
-  positionExecutiveField: "",
-  positionArea: "",
-  isSpecial: false,
-});
+/**importStore*/
+import { useCounterMixin } from "@/stores/mixin";
 
-const rows = ref<RowDetailPositions[]>([]);
-const listMenu = ref<ListMenu[]>([
-  {
-    label: "คัดลอก",
-    icon: "mdi-content-copy",
-    type: "copy",
-    color: "blue-6",
-  },
-  {
-    label: "ลบ",
-    icon: "delete",
-    type: "remove",
-    color: "red",
-  },
-]);
+/**use*/
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = mixin;
+
+const rows = ref<ResPossition[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -59,11 +50,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "positionName",
+    name: "posDictName",
     align: "left",
     label: "ชื่อตำแหน่ง",
     sortable: true,
-    field: "positionName",
+    field: "posDictName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -88,136 +79,177 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
   "no",
-  "positionName",
+  "posDictName",
   "posTypeName",
   "posLevelName",
 ]);
 
-const $q = useQuasar();
-const rowsPositionSelect = ref<RowDetailPositions[]>([]);
-const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogRemove,
-} = mixin;
+const formQuery = reactive<FormQuery>({
+  type: "positionName",
+  keyword: "",
+});
 
-/** input ค้นหา */
-const searchRef = ref<any>(null);
-const search = ref<string>("");
-const type = ref<string>("positionName");
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const optionFilter = ref<DataOption[]>([
   { id: "positionName", name: "ชื่อตำแหน่ง" },
   { id: "positionType", name: "กลุ่มงาน" },
   { id: "positionLevel", name: "ระดับชั้นงาน" },
 ]);
 
-/**
- * คัดลอกข้อมูล
- * @param data ข้อมูลตำแหน่ง
- */
-function copyDetiail(data: RowDetailPositions) {
-  formPositionSelect.positionId = data.id;
-  formPositionSelect.posTypeId = data.posTypeId;
-  formPositionSelect.positionName = data.positionName;
-  formPositionSelect.positionType = data.posTypeId;
-  formPositionSelect.positionLevel = data.posLevelId;
-  modalAddPosition.value = true;
-}
-/**
- * แก้ไขข้อมูล
- * @param data ข้อมูลตำแหน่ง
- */
-function editDetiail(data: RowDetailPositions) {
-  formPositionSelect.positionId = data.id;
-  formPositionSelect.posTypeId = data.posTypeId;
-  formPositionSelect.positionName = data.positionName;
-  formPositionSelect.positionType = data.posTypeId;
-  formPositionSelect.positionLevel = data.posLevelId;
-  modalAddPosition.value = true;
-  editPosition.value = true;
-}
+const modalDialog = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+const posId = ref<string>("");
+const formDataPos = reactive({
+  posName: "",
+  posTypeName: "",
+  posLevelName: "",
+});
+const posNameRef = ref<object | null>(null);
+const posTypeNameRef = ref<object | null>(null);
+const posLevelNameRef = ref<object | null>(null);
+const objectRef: ObjectPosRef = {
+  posName: posNameRef,
+  posTypeName: posTypeNameRef,
+  posLevelName: posLevelNameRef,
+};
 
-/**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-async function searchInput() {
-  // showLoader();
-  // await http
-  //   .get(
-  //     config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
-  //   )
-  //   .then((res) => {
-  //     rowsPositionSelect.value = res.data.result;
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
-}
-
-function addPosition(data: RowDetailPositions) {
-  const isIdExist = rows.value.some((item: any) => item.id === data.id);
-
-  if (!isIdExist) {
-    rows.value = [data, ...rows.value];
-  }
-}
+const posTypeMain = ref<ResGroup[]>([]);
+const posTypeOp = ref<DataOption[]>([]);
+const posLevelOp = ref<DataOption[]>([]);
 
 function deletePos(id: string) {
   dialogRemove($q, () => {
-    // showLoader();
-    // http
-    //   .delete(config.API.orgPosPositionById(id))
-    //   .then(() => {
-    //     success($q, "ลบข้อมูลสำเร็จ");
-    //   })
-    //   .catch((err) => {
-    //     messageError($q, err);
-    //   })
-    //   .finally(() => {
-    //     searchInput();
-    //     hideLoader();
-    //   });
+    showLoader();
+    http
+      .delete(config.API.orgEmployeePosById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchData();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
-function popupAdd() {
-  modalAddPosition.value = true;
+async function onClickOpenDialog(typeEdit: boolean = false, data: any = []) {
+  modalDialog.value = true;
+  isStatusEdit.value = typeEdit;
+  await fetchType();
+  updatePosTypeName(data.posTypeId);
+  if (data) {
+    posId.value = data.id;
+    setTimeout(() => {
+      formDataPos.posName = data.posDictName;
+      formDataPos.posTypeName = data.posTypeId;
+      formDataPos.posLevelName = data.posLevelId;
+    }, 200);
+  }
 }
 
-async function fetchData() {
-  // search.value = "";
-  // showLoader();
-  // await http
-  //   .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
-  //   .then((res) => {
-  //     rowsPositionSelect.value = res.data.result;
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+async function fetchData(statusFetch: boolean = false) {
+  showLoader();
+  await http
+    .get(
+      config.API.orgEmployeePos +
+        `?keyword=${formQuery.keyword}&type=${
+          statusFetch ? "" : formQuery.type
+        }`
+    )
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchType() {
+  if (posTypeMain.value.length === 0) {
+    showLoader();
+    await http
+      .get(config.API.orgEmployeeType)
+      .then((res) => {
+        const data = res.data.result;
+        posTypeMain.value = data;
+        posTypeOp.value = data.map((e: ResGroup) => ({
+          id: e.id,
+          name: e.posTypeName,
+        }));
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+async function onClickSubmit() {
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    dialogConfirm($q, () => {
+      submit();
+    });
+  }
+}
+
+async function submit() {
+  const body = {
+    posDictName: formDataPos.posName,
+    posTypeId: formDataPos.posTypeName,
+    posLevelId: formDataPos.posLevelName,
+  };
+  showLoader();
+  try {
+    const url = !isStatusEdit.value
+      ? config.API.orgEmployeePos
+      : config.API.orgEmployeePosById(posId.value);
+    await http[!isStatusEdit.value ? "post" : "put"](url, body);
+    success($q, "บันทีกข้อมูลสำเร็จ");
+    fetchData();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+    closeDialog();
+  }
+}
+
+function updatePosTypeName(id: string) {
+  const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
+  posLevelOp.value =
+    posLevel?.posLevels.map((e: ResLevel) => ({
+      id: e.id,
+      name: e.posLevelName.toString(),
+    })) ?? [];
+  formDataPos.posLevelName = "";
+}
+
+function closeDialog() {
+  modalDialog.value = false;
+  formDataPos.posName = "";
+  formDataPos.posTypeName = "";
+  formDataPos.posLevelName = "";
 }
 
 onMounted(() => {
-  fetchData();
+  fetchData(true);
 });
 </script>
 <template>
@@ -231,7 +263,7 @@ onMounted(() => {
         round
         color="primary"
         icon="mdi-plus"
-        @click="popupAdd()"
+        @click="onClickOpenDialog()"
         ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
       >
     </div>
@@ -240,7 +272,7 @@ onMounted(() => {
       <div class="col-md-4">
         <q-select
           label="ค้นหาจาก"
-          v-model="type"
+          v-model="formQuery.type"
           :options="optionFilter"
           emit-value
           dense
@@ -254,19 +286,19 @@ onMounted(() => {
       <div class="col-md-6">
         <q-input
           ref="searchRef"
-          :class="inputEdit(isReadonly)"
-          v-model="search"
+          v-model="formQuery.keyword"
           outlined
           dense
           lazy-rules
           label="คำค้น"
           hide-bottom-space
+          @keydown.enter="fetchData()"
         >
           <template v-slot:append>
             <q-icon
-              v-if="search"
+              v-if="formQuery.keyword"
               name="cancel"
-              @click="fetchData()"
+              @click="(formQuery.keyword = ''), fetchData()"
               class="cursor-pointer"
             ></q-icon>
           </template>
@@ -279,7 +311,7 @@ onMounted(() => {
           icon="search"
           label="ค้นหา"
           class="full-width"
-          @click="searchInput()"
+          @click="fetchData()"
         />
       </div>
     </div>
@@ -289,7 +321,7 @@ onMounted(() => {
     <d-table
       ref="table"
       :columns="columns"
-      :rows="rowsPositionSelect"
+      :rows="rows"
       row-key="id"
       flat
       bordered
@@ -313,24 +345,11 @@ onMounted(() => {
       </template>
       <template v-slot:body="props">
         <q-tr :props="props" class="cursor-pointer">
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="addPosition(props.row)"
-          >
+          <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 === 'posLevelName'">
-              {{
-                props.row.posLevelName
-                  ? props.row.isSpecial == true
-                    ? `${props.row.posLevelName} (ฉ)`
-                    : props.row.posLevelName
-                  : "-"
-              }}
-            </div>
+
             <div v-else>
               {{ col.value ? col.value : "-" }}
             </div>
@@ -347,7 +366,7 @@ onMounted(() => {
               clickable
               @click.stop="
                 () => {
-                  copyDetiail(props.row);
+                  onClickOpenDialog(false, props.row);
                 }
               "
             >
@@ -361,7 +380,7 @@ onMounted(() => {
               size="12px"
               icon="mdi-pencil"
               clickable
-              @click.stop="editDetiail(props.row)"
+              @click.stop="onClickOpenDialog(true, props.row)"
               v-close-popup
             >
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
@@ -384,10 +403,80 @@ onMounted(() => {
       </template>
     </d-table>
   </div>
-  <DialogAddPosition
-    v-model:add-position="modalAddPosition"
-    v-model:form-data="formPositionSelect"
-    v-model:edit-check="editPosition"
-    :get-data="searchInput"
-  />
+
+  <q-dialog v-model="modalDialog" class="dialog" persistent>
+    <q-card style="width: 350px">
+      <form @submit.prevent="onClickSubmit">
+        <DialogHeader
+          :tittle="`${
+            isStatusEdit
+              ? 'แก้ไขข้อมูลตำแหน่งลูกจ้างประจำ'
+              : 'เพิ่มข้อมูลตำแหน่งลูกจ้างประจำ'
+          }`"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm col-12">
+            <div class="col-12">
+              <q-input
+                ref="posNameRef"
+                v-model="formDataPos.posName"
+                dense
+                outlined
+                for="#positionName"
+                label="ชื่อตำแหน่ง"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posTypeNameRef"
+                label="กลุ่มงาน"
+                v-model="formDataPos.posTypeName"
+                :options="posTypeOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                @update:model-value="updatePosTypeName"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posLevelNameRef"
+                label="ระดับชั้นงาน"
+                v-model="formDataPos.posLevelName"
+                :disable="formDataPos.posTypeName === ''"
+                :options="posLevelOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
 </template>
diff --git a/src/modules/01_metadataNew/components/position-employee/02ListType.vue b/src/modules/01_metadataNew/components/position-employee/02ListType.vue
index 3de9086b8..b022f8b22 100644
--- a/src/modules/01_metadataNew/components/position-employee/02ListType.vue
+++ b/src/modules/01_metadataNew/components/position-employee/02ListType.vue
@@ -1,15 +1,26 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QInput, QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted, reactive } from "vue";
 import { useRouter } from "vue-router";
-import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
-import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const store = usePositionTypeDataStore();
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { ObjectGroupRef } from "@/modules/01_metadataNew/interface/index/positionEmployee";
+import type { ResGroup } from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
+import type { FrmDataGroup } from "@/modules/01_metadataNew/interface/request/positionEmployee";
+
+/** importComponents*/
+import dialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { usePositionEmployeeDataStore } from "@/modules/01_metadataNew/stores/positionEmployeeStore";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const store = usePositionEmployeeDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
 const {
@@ -20,7 +31,8 @@ const {
   showLoader,
   hideLoader,
 } = mixin;
-const columns = [
+
+const columns = ref<QTableProps["columns"]>([
   {
     name: "posTypeName",
     align: "left",
@@ -29,8 +41,15 @@ const columns = [
     field: "posTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posTypeShortName",
+    align: "left",
+    label: "อักษรย่อกลุ่มงาน",
+    sortable: true,
+    field: "posTypeShortName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
   {
     name: "posTypeRank",
@@ -40,71 +59,43 @@ const columns = [
     field: "posTypeRank",
     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" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-] as const satisfies QTableProps["columns"];
-
-const $q = useQuasar();
-
-const editId = ref<string>("");
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const posTypeName = ref<string>("");
-const posTypeNameRef = ref<QInput | null>(null);
-const posTypeShortName = ref<string>("");
-const posTypeShortNameRef = ref<QInput | null>(null);
-const posTypeRank = ref<number | undefined>();
-const posTypeRankRef = ref<QInput | null>(null);
-const dialogStatus = ref<string>("");
+]);
 const visibleColumns = ref<string[]>([
   "posTypeName",
   "posTypeShortName",
   "posTypeRank",
-  // "createdAt",
-  // "lastUpdatedAt",
-  // "lastUpdateFullName",
 ]);
 
+/** from เพิ่มข้อมูลกลุ่มงาน */
+const formDataGroup = reactive<FrmDataGroup>({
+  posTypeName: "",
+  posTypeShortName: "",
+  posTypeRank: null,
+});
+
+/** formRef*/
+const posTypeNameRef = ref<Object | null>(null);
+const posTypeShortNameRef = ref<Object | null>(null);
+const posTypeRankRef = ref<Object | null>(null);
+const objectGroupRef: ObjectGroupRef = {
+  posTypeName: posTypeNameRef,
+  posTypeShortName: posTypeShortNameRef,
+  posTypeRank: posTypeRankRef,
+};
+
+const editId = ref<string>("");
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const dialogStatus = ref<string>("");
+const rows = ref<ResGroup[]>([]);
+
 async function fetchData() {
   showLoader();
   await http
-    .get(config.API.orgPosType)
+    .get(config.API.orgEmployeeType)
     .then(async (res) => {
-      store.save(res.data.result);
+      rows.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -114,80 +105,91 @@ async function fetchData() {
     });
 }
 
-async function addData() {
-  await http
-    .post(config.API.orgPosType, {
-      posTypeName: posTypeName.value,
-      posTypeShortName: posTypeShortName.value,
-      posTypeRank: posTypeRank.value,
-    })
-    .then(() => {
-      fetchData();
-    })
-    .catch((err) => {
-      messageError($q, err);
+async function onClickSubmit() {
+  const hasError = [];
+  for (const key in objectGroupRef) {
+    if (Object.prototype.hasOwnProperty.call(objectGroupRef, key)) {
+      const property = objectGroupRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    dialogConfirm($q, () => {
+      submit();
     });
+  }
 }
 
-async function editData(id: string) {
-  await http
-    .put(config.API.orgPosTypeId(id), {
-      posTypeName: posTypeName.value,
-      posTypeShortName: posTypeShortName.value,
-      posTypeRank: posTypeRank.value,
-    })
-    .then(() => {
-      fetchData();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+async function submit() {
+  const body: FrmDataGroup = {
+    posTypeName: formDataGroup.posTypeName,
+    posTypeShortName: formDataGroup.posTypeShortName,
+    posTypeRank: Number(formDataGroup.posTypeRank),
+  };
+  showLoader();
+  try {
+    const url =
+      dialogStatus.value === "create"
+        ? config.API.orgEmployeeType
+        : config.API.orgEmployeeTypeById(editId.value);
+    await http[dialogStatus.value === "create" ? "post" : "put"](url, body);
+    success($q, "บันทีกข้อมูลสำเร็จ");
+    fetchData();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+    closeDialog();
+  }
 }
 
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgPosTypeId(id))
-    .then(() => {
-      fetchData();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+function onClickDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgEmployeeTypeById(id))
+      .then(() => {
+        fetchData();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
-onMounted(async () => {
-  fetchData();
-});
-
-function closeDialog() {
-  dialog.value = false;
+function onClickOpenDialogEdit(data: ResGroup) {
+  dialogStatus.value = "edit";
+  dialog.value = true;
+  editId.value = data.id;
+  formDataGroup.posTypeName = data.posTypeName;
+  formDataGroup.posTypeShortName = data.posTypeShortName;
+  formDataGroup.posTypeRank = data.posTypeRank;
 }
 
-function onclickDetail(id: string) {
+function onClickDetail(id: string) {
   router.push(`/master-data/position-employee/level/${id}`);
 }
 
-function validateForm() {
-  posTypeNameRef.value?.validate();
-  posTypeRankRef.value?.validate();
-  onSubmit();
+function closeDialog() {
+  dialog.value = false;
+  clearFormData();
 }
 
-async function onSubmit() {
-  if (posTypeName.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-        posTypeName.value = "";
-        posTypeRank.value = undefined;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
+function clearFormData() {
+  formDataGroup.posTypeName = "";
+  formDataGroup.posTypeShortName = "";
+  formDataGroup.posTypeRank = null;
 }
+
+onMounted(() => {
+  fetchData();
+});
 </script>
 
 <template>
@@ -229,7 +231,7 @@ async function onSubmit() {
   <d-table
     ref="table"
     :columns="columns"
-    :rows="store.row"
+    :rows="rows"
     :filter="filterKeyword"
     row-key="name"
     flat
@@ -237,6 +239,7 @@ async function onSubmit() {
     :paging="true"
     dense
     class="custom-header-table"
+    :rows-per-page-options="[10, 20, 50, 100]"
     :visible-columns="visibleColumns"
   >
     <template v-slot:header="props">
@@ -251,10 +254,10 @@ async function onSubmit() {
       <q-tr
         :props="props"
         class="cursor-pointer"
-        @click.stop="onclickDetail(props.row.id)"
+        @click.stop="onClickDetail(props.row.id)"
       >
         <q-td v-for="col in props.cols" :key="col.id">
-          {{ col.value }}
+          {{ col.value ? col.value : "-" }}
         </q-td>
         <q-td auto-width>
           <q-btn
@@ -265,16 +268,7 @@ async function onSubmit() {
             class="q-mr-xs"
             size="12px"
             icon="edit"
-            clickable
-            @click.stop="
-              () => {
-                dialogStatus = 'edit';
-                dialog = true;
-                editId = props.row.id;
-                posTypeName = props.row.posTypeName;
-                posTypeRank = props.row.posTypeRank;
-              }
-            "
+            @click.stop="onClickOpenDialogEdit(props.row)"
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
@@ -286,10 +280,7 @@ async function onSubmit() {
             size="12px"
             icon="mdi-delete"
             clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
+            @click.stop="onClickDelete(props.row.id)"
           >
             <q-tooltip>ลบข้อมูล</q-tooltip>
           </q-btn>
@@ -300,7 +291,7 @@ async function onSubmit() {
 
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="width: 350px">
-      <form @submit.prevent="validateForm">
+      <form @submit.prevent="onClickSubmit">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
             :tittle="
@@ -318,7 +309,7 @@ async function onSubmit() {
             <q-input
               ref="posTypeNameRef"
               outlined
-              v-model="posTypeName"
+              v-model="formDataGroup.posTypeName"
               label="ชื่อกลุ่มงาน"
               dense
               lazy-rules
@@ -332,7 +323,7 @@ async function onSubmit() {
           <div class="col-12">
             <q-input
               ref="posTypeShortNameRef"
-              v-model="posTypeShortName"
+              v-model="formDataGroup.posTypeShortName"
               dense
               outlined
               for="#positionShortName"
@@ -347,16 +338,16 @@ async function onSubmit() {
             <q-input
               ref="posTypeRankRef"
               outlined
-              v-model="posTypeRank"
+              v-model="formDataGroup.posTypeRank"
               label="ระดับกลุ่มงาน"
               dense
-              type="number"
               lazy-rules
               borderless
               min="1"
               bg-color="white"
               :rules="[(val) => val != undefined || 'กรุณากรอกระดับกลุ่มงาน']"
               hide-bottom-space
+              mask="############"
             />
           </div>
         </q-card-section>
@@ -379,72 +370,4 @@ async function onSubmit() {
   </q-dialog>
 </template>
 
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/modules/01_metadataNew/components/position-employee/03ListLevel.vue b/src/modules/01_metadataNew/components/position-employee/03ListLevel.vue
index cd2b046b8..2cfcbdf08 100644
--- a/src/modules/01_metadataNew/components/position-employee/03ListLevel.vue
+++ b/src/modules/01_metadataNew/components/position-employee/03ListLevel.vue
@@ -1,10 +1,231 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-import ListLevelDetail from "@/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue";
+import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  ResGroup,
+  ResLevel,
+} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
+import type { ObjectLevelRef } from "@/modules/01_metadataNew/interface/index/positionEmployee";
+import type { FormDataLevel } from "@/modules/01_metadataNew/interface/request/positionEmployee";
+
+/** importComponts*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**use*/
+const $q = useQuasar();
+const route = useRoute();
 const router = useRouter();
 const posName = ref<string>("");
+const posTypeId = ref<string>(route.params.id.toString());
+
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+const storeOption = useMainOptionDataStore();
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px; width:0px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "posLevelAuthority",
+    align: "left",
+    label: "ผู้มีอำนาจสั่งบรรจุ",
+    sortable: true,
+    field: "posLevelAuthority",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>();
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "posLevelName",
+  "posTypeName",
+  "posLevelAuthority",
+]);
+const filter = ref<string>("");
+
+const levelId = ref<string>("");
+const titleName = ref<string | null>("");
+const formDataLevel = reactive<FormDataLevel>({
+  posLevelName: null,
+  posTypeName: "",
+  posLevelAuthority: "",
+});
+
+/** formRef*/
+const posLevelNameRef = ref<Object | null>(null);
+const commanderRef = ref<Object | null>(null);
+const objectLevelRef: ObjectLevelRef = {
+  posLevelName: posLevelNameRef,
+  posLevelAuthority: commanderRef,
+};
+
+function fetchPosGroup() {
+  showLoader();
+  http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      const data: ResGroup[] = res.data.result;
+      const group = data.find((e: ResGroup) => e.id === posTypeId.value);
+
+      titleName.value = group?.posTypeName ?? null;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchData(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgEmployeelevel)
+    .then((res) => {
+      const data: ResLevel[] = res.data.result;
+      const list = data.filter((e: ResLevel) => e.posTypeId === id);
+
+      rows.value = list ? list : [];
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const isStatusEdit = ref<boolean>(false);
+const modalDialog = ref<boolean>(false);
+function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
+  isStatusEdit.value = statusEdit;
+  modalDialog.value = true;
+
+  if (statusEdit) {
+    levelId.value = data.id;
+    formDataLevel.posLevelName = data.posLevelName;
+    formDataLevel.posTypeName = data.posTypeName;
+    formDataLevel.posLevelAuthority = data.posLevelAuthority;
+  } else {
+    formDataLevel.posTypeName = titleName.value ? titleName.value : "";
+  }
+}
+
+function onClickCloseDialog() {
+  modalDialog.value = false;
+  formDataLevel.posLevelName = null;
+  formDataLevel.posTypeName = "";
+  formDataLevel.posLevelAuthority = "";
+}
+
+function onClickSubmit() {
+  const hasError = [];
+  for (const key in objectLevelRef) {
+    if (Object.prototype.hasOwnProperty.call(objectLevelRef, key)) {
+      const property = objectLevelRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    dialogConfirm($q, () => {
+      submit();
+    });
+  }
+}
+
+async function submit() {
+  const body = {
+    posLevelName: Number(formDataLevel.posLevelName),
+    posTypeId: posTypeId.value,
+    posLevelRank: Number(formDataLevel.posLevelName),
+    posLevelAuthority: formDataLevel.posLevelAuthority,
+  };
+  showLoader();
+  try {
+    const url = !isStatusEdit.value
+      ? config.API.orgEmployeelevel
+      : config.API.orgEmployeelevelById(levelId.value);
+    await http[!isStatusEdit.value ? "post" : "put"](url, body);
+    success($q, "บันทีกข้อมูลสำเร็จ");
+    fetchData(posTypeId.value);
+    onClickCloseDialog();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
+function onClickDelete(id: string) {
+  dialogRemove($q, () => {
+    http
+      .delete(config.API.orgEmployeelevelById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchData(posTypeId.value);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  });
+}
+
+function convertPosLevelAuthority(val: string) {
+  const result = storeOption.posLevelAuthorityOption.find((e) => e.id === val);
+  return result?.label;
+}
+
+onMounted(() => {
+  posTypeId.value && fetchData(posTypeId.value);
+  fetchPosGroup();
+});
 </script>
 
 <template>
@@ -19,12 +240,184 @@ const posName = ref<string>("");
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายการระดับชั้นงาน{{ posName }}
+    รายการระดับชั้นงาน{{ titleName }}
   </div>
 
   <q-card flat bordered>
-    <ListLevelDetail v-model:posName="posName" />
+    <div class="q-pa-md">
+      <q-toolbar style="padding: 0">
+        <q-btn
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click.stop.pervent="onClickOpenDialog()"
+        >
+          <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="row q-gutter-sm">
+          <q-input outlined dense v-model="filter" label="ค้นหา"></q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+      </q-toolbar>
+
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filter"
+        row-key="name"
+        flat
+        bordered
+        :paging="true"
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-bold">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="(col, index) in props.cols" :key="col.id">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name === 'posLevelAuthority'">
+                {{ col.value ? convertPosLevelAuthority(col.value) : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="edit"
+                flat
+                dense
+                round
+                class="q-mr-xs"
+                size="12px"
+                icon="edit"
+                @click.stop.pervent="onClickOpenDialog(true, props.row)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="12px"
+                icon="mdi-delete"
+                @click="onClickDelete(props.row.id)"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
   </q-card>
+
+  <q-dialog v-model="modalDialog" class="dialog" persistent>
+    <q-card style="width: 350px">
+      <form @submit.prevent="onClickSubmit">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <DialogHeader
+            :tittle="isStatusEdit ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="onClickCloseDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="row q-gutter-y-md">
+          <div class="col-12">
+            <q-input
+              outlined
+              ref="posLevelNameRef"
+              v-model="formDataLevel.posLevelName"
+              label="ระดับชั้นงาน"
+              dense
+              lazy-rules
+              borderless
+              bg-color="white"
+              hide-bottom-space
+              mask="#######################################"
+              :rules="[(val) => !!val || 'กรุณากรอกระดับชั้นงาน']"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="commanderRef"
+              outlined
+              v-model="formDataLevel.posLevelAuthority"
+              emit-value
+              map-options
+              :options="storeOption.posLevelAuthorityOption"
+              option-value="id"
+              label="ผู้มีอำนาจสั่งบรรจุ"
+              dense
+              lazy-rules
+              borderless
+              bg-color="white"
+              hide-bottom-space
+              :rules="[(val) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="posTypeIdRef"
+              v-model="formDataLevel.posTypeName"
+              label="กลุ่มงาน"
+              outlined
+              dense
+              bg-color="white"
+              options-cover
+              hide-bottom-space
+              readonly
+            />
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue b/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
deleted file mode 100644
index 5fb09ee4d..000000000
--- a/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
+++ /dev/null
@@ -1,513 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QInput, QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter, useRoute } from "vue-router";
-import { usePositionEmployeeDataStore } from "@/modules/01_metadataNew/stores/positionEmployeeStore";
-import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
-import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
-
-import dialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-const store = usePositionEmployeeDataStore();
-const storeName = usePositionTypeDataStore();
-const storeOption = useMainOptionDataStore();
-const router = useRouter();
-const mixin = useCounterMixin();
-
-const posName = defineModel<string>("posName", {
-  required: true,
-});
-
-const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
-  mixin;
-const $q = useQuasar();
-const columns = [
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px; width:0px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posLevelName",
-    align: "left",
-    label: "ระดับชั้นงาน",
-    sortable: true,
-    field: "posLevelName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posTypeName",
-    align: "left",
-    label: "กลุ่มงาน",
-    sortable: true,
-    field: "posTypeName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  // {
-  //   name: "posLevelRank",
-  //   align: "left",
-  //   label: "ระดับของระดับตำแหน่ง",
-  //   sortable: true,
-  //   field: "posLevelRank",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  //   sort: (a: string, b: string) =>
-  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  // },
-  {
-    name: "posLevelAuthority",
-    align: "left",
-    label: "ผู้มีอำนาจสั่งบรรจุ",
-    sortable: true,
-    field: "posLevelAuthority",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "createdAt",
-    align: "center",
-    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: "lastUpdatedAt",
-    align: "center",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-] as const satisfies QTableProps["columns"];
-const route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const dialogStatus = ref<string>("");
-const editId = ref<string>("");
-const posLevelName = ref<string>("");
-// const posLevelRank = ref<number>();
-const posLevelAuthority = ref<string>("");
-// const posTypeId = ref<null>();
-const posLevelNameRef = ref<QInput | null>(null);
-// const posLevelRankRef = ref<QInput | null>(null);
-const posTypeIdRef = ref<QInput | null>(null);
-// const name = ref<string>("");
-const visibleColumns = ref<string[]>([
-  "no",
-  "posTypeName",
-  "posLevelName",
-  // "posLevelRank",
-  "posLevelAuthority",
-  //   "createdAt",
-  //   "lastUpdatedAt",
-  //   "lastUpdateFullName",
-]);
-
-async function fetchData() {
-  // showLoader();
-  // await http
-  //   .get(config.API.orgPosLevel)
-  //   .then(async (res) => {
-  //     store.save(res.data.result, id.value);
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
-}
-
-async function addData() {
-  await http.post(config.API.orgPosLevel, {
-    posLevelName: posLevelName.value,
-    // posLevelRank: posLevelRank.value,
-    posLevelAuthority:
-      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-    posTypeId: id.value,
-  });
-  fetchData();
-}
-
-async function editData(editId: string) {
-  await http.put(config.API.orgPosLevelId(editId), {
-    posLevelName: posLevelName.value,
-    // posLevelRank: posLevelRank.value,
-    posLevelAuthority:
-      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
-    posTypeId: id.value,
-  });
-  fetchData();
-}
-
-async function deleteData(id: string) {
-  await http.delete(config.API.orgPosLevelId(id));
-  fetchData();
-}
-
-onMounted(async () => {
-  fetchName();
-  storeName.row.forEach((e) => {
-    if (e.id === id.value) {
-      posName.value = e.posTypeName ? e.posTypeName : "";
-    }
-  });
-  fetchData();
-});
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function validateForm() {
-  posLevelNameRef.value?.validate();
-  // posLevelRankRef.value?.validate();
-  posTypeIdRef.value?.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (posLevelName.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
-
-async function fetchName() {
-  // showLoader();
-  // await http
-  //   .get(config.API.orgPosType)
-  //   .then(async (res) => {
-  //     storeName.save(res.data.result);
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
-}
-</script>
-
-<template>
-  <div class="q-pa-md">
-    <q-toolbar style="padding: 0">
-      <q-btn
-        flat
-        round
-        color="primary"
-        icon="add"
-        @click.stop="
-          () => {
-            dialogStatus = 'create';
-            dialog = true;
-            posLevelName = '';
-            // posLevelRank = undefined;
-            posLevelAuthority = '';
-          }
-        "
-      >
-        <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-      </q-btn>
-      <q-space />
-      <div class="row q-gutter-sm">
-        <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-        />
-      </div>
-    </q-toolbar>
-
-    <d-table
-      ref="table"
-      :columns="columns"
-      :rows="store.row"
-      :filter="filterKeyword"
-      row-key="name"
-      flat
-      bordered
-      :paging="true"
-      dense
-      class="custom-header-table"
-      :visible-columns="visibleColumns"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-bold">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
-      <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.id">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="edit"
-              flat
-              dense
-              round
-              class="q-mr-xs"
-              size="12px"
-              icon="edit"
-              clickable
-              @click.stop="
-                () => {
-                  dialogStatus = 'edit';
-                  dialog = true;
-                  editId = props.row.id;
-                  posLevelName = props.row.posLevelName;
-                  // posLevelRank = props.row.posLevelRank;
-                  posLevelAuthority = props.row.posLevelAuthority;
-                }
-              "
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <q-btn
-              color="red"
-              flat
-              dense
-              round
-              size="12px"
-              icon="mdi-delete"
-              clickable
-              @click.stop="
-                dialogRemove($q, async () => await deleteData(props.row.id))
-              "
-              v-close-popup
-            >
-              <q-tooltip>ลบข้อมูล</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-    </d-table>
-
-    <q-dialog v-model="dialog" class="dialog" persistent>
-      <q-card style="width: 350px">
-        <form @submit.prevent="validateForm">
-          <q-card-section class="flex justify-between" style="padding: 0">
-            <dialog-header
-              :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-              :close="closeDialog"
-            />
-          </q-card-section>
-
-          <q-separator color="grey-4" />
-          <q-card-section class="row q-gutter-y-md">
-            <div class="col-12">
-              <q-input
-                outlined
-                ref="posLevelNameRef"
-                v-model="posLevelName"
-                label="ระดับชั้นงาน"
-                dense
-                lazy-rules
-                borderless
-                bg-color="white"
-                hide-bottom-space
-                :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับชั้นงาน']"
-              />
-            </div>
-
-            <!-- <div class="col-12">
-              <q-input
-                ref="posLevelRankRef"
-                outlined
-                v-model="posLevelRank"
-                label="ระดับ"
-                dense
-                type="number"
-                lazy-rules
-                borderless
-                min="1"
-                bg-color="white"
-                :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
-                hide-bottom-space
-              />
-            </div> -->
-
-            <div class="col-12">
-              <q-select
-                outlined
-                v-model="posLevelAuthority"
-                emit-value
-                map-options
-                :options="storeOption.posLevelAuthorityOption"
-                option-value="label"
-                label="ผู้มีอำนาจสั่งบรรจุ"
-                dense
-                lazy-rules
-                borderless
-                bg-color="white"
-                hide-bottom-space
-              />
-            </div>
-
-            <div class="col-12">
-              <q-select
-                ref="posTypeIdRef"
-                v-model="posName"
-                label="กลุ่มงาน"
-                outlined
-                dense
-                bg-color="white"
-                options-cover
-                hide-bottom-space
-                readonly
-              />
-            </div>
-          </q-card-section>
-
-          <q-card-actions align="right">
-            <q-btn
-              id="onSubmit"
-              type="submit"
-              dense
-              unelevated
-              label="บันทึก"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-card-actions>
-        </form>
-      </q-card>
-    </q-dialog>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>
diff --git a/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue b/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue
deleted file mode 100644
index 2da4369b0..000000000
--- a/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue
+++ /dev/null
@@ -1,286 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, defineProps } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-// import type { QTableProps } from "quasar";
-import DialogHeader from "@/components/DialogHeader.vue";
-import type {
-  DataOption,
-  FormPositionEmployeeSelectDialog,
-  FormPositionEmployeeSelectRef,
-  OptionType,
-  OptionLevel,
-} from "@/modules/01_metadataNew/interface/request/position/index";
-import { useCounterMixin } from "@/stores/mixin";
-const levelOps = ref<DataOption[]>([]);
-const levelOpsMain = ref<DataOption[]>([]);
-const typeOps = ref<DataOption[]>([]);
-const typeOpsMain = ref<DataOption[]>([]);
-const dataLevel = ref<any>();
-const formPositionSelect = reactive<FormPositionEmployeeSelectDialog>({
-  positionId: "",
-  positionName: "",
-  positionType: "",
-  positionLevel: "",
-});
-const $q = useQuasar();
-const isSpecial = ref<boolean>(false);
-const props = defineProps({
-  getData: Function,
-});
-const { dialogConfirm, showLoader, success, hideLoader, messageError } =
-  useCounterMixin();
-
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const modal = defineModel<boolean>("addPosition", { required: true });
-const formData = defineModel<any>("formData", { required: true });
-const editCheck = defineModel<boolean>("editCheck", { required: true });
-
-const positionNameRef = ref<Object | null>(null);
-const positionTypeRef = ref<Object | null>(null);
-const positionLevelRef = ref<Object | null>(null);
-
-const objectPositionSelectRef: FormPositionEmployeeSelectRef = {
-  positionName: positionNameRef,
-  positionType: positionTypeRef,
-  positionLevel: positionLevelRef,
-};
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateFormPositionEdit() {
-  const hasError = [];
-  for (const key in objectPositionSelectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
-      const property = objectPositionSelectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (editCheck.value == true) {
-      saveSelectEdit();
-    } else {
-      onSubmitSelectEdit();
-    }
-  }
-}
-
-/** ฟังชั่น บันทึก */
-function saveSelectEdit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      // showLoader();
-      // const body = {
-      //   posDictName: formPositionSelect.positionName,
-      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
-      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-      // };
-      // await http
-      //   .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
-      //   .then(() => {
-      //     success($q, "เพิ่มข้อมูลสำเร็จ");
-      //     clearFormPositionSelect();
-      //     modal.value = false;
-      //     editCheck.value = false;
-      //     props.getData?.();
-      //   })
-      //   .catch((err) => {
-      //     messageError($q, err);
-      //   })
-      //   .finally(() => {
-      //     hideLoader();
-      //   });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
-}
-/** ฟังชั่น บันทึก */
-function onSubmitSelectEdit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      // showLoader();
-      // const body = {
-      //   posDictName: formPositionSelect.positionName,
-      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
-      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-      // };
-      // await http
-      //   .post(config.API.orgPosPosition, body)
-      //   .then(() => {
-      //     success($q, "เพิ่มข้อมูลสำเร็จ");
-      //     clearFormPositionSelect();
-      //     modal.value = false;
-      //     editCheck.value = false;
-      //   })
-      //   .catch((err) => {
-      //     messageError($q, err);
-      //   })
-      //   .finally(() => {
-      //     hideLoader();
-      //   });
-    },
-    "ยืนยันการเพิ่มตำแหน่ง",
-    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-  );
-}
-
-async function clearFormPositionSelect() {
-  formPositionSelect.positionId = "";
-  formPositionSelect.positionName = "";
-  formPositionSelect.positionType = "";
-  formPositionSelect.positionLevel = "";
-}
-
-/**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-/** function เรียกรายการประเภทตำแหน่ง */
-async function fetchType() {
-  showLoader();
-  await http
-    .get(config.API.orgPosType)
-    .then((res) => {
-      const data = res.data.result;
-      dataLevel.value = data;
-      typeOpsMain.value = data.map((e: OptionType) => ({
-        id: e.id,
-        name: e.posTypeName,
-      }));
-      typeOps.value = typeOpsMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-watch(
-  () => modal.value,
-  () => {
-    if (modal.value == true) {
-      fetchType();
-      if (formData.value) {
-        const dataList = formData.value;
-        setTimeout(() => {
-          updateSelectType(dataList.posTypeId);
-        }, 1000);
-        formPositionSelect.positionId = dataList.positionId;
-        formPositionSelect.positionName = dataList.positionName;
-        formPositionSelect.positionType = dataList.positionType;
-        formPositionSelect.positionLevel = dataList.positionLevel;
-      }
-    }
-  }
-);
-
-function updateSelectType(val: string) {
-  const listLevel = dataLevel.value.find((e: any) => e.id === val);
-  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
-    id: e.id,
-    name: e.posLevelName,
-  }));
-  levelOps.value = levelOpsMain.value;
-}
-
-function close() {
-  modal.value = false;
-  editCheck.value = false;
-}
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 50vw">
-      <form @submit.prevent="validateFormPositionEdit">
-        <DialogHeader
-          :tittle="`${
-            editCheck
-              ? 'แก้ไขข้อมูลตำแหน่งลูกจ้างประจำ'
-              : 'เพิ่มข้อมูลตำแหน่งลูกจ้างประจำ'
-          }`"
-          :close="close"
-        />
-        <q-separator />
-
-        <q-card-section>
-          <div class="row q-col-gutter-sm col-12">
-            <div class="col-12">
-              <q-input
-                ref="positionNameRef"
-                v-model="formPositionSelect.positionName"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                for="#positionName"
-                label="ชื่อตำแหน่ง"
-                lazy-rules
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
-              />
-            </div>
-
-            <div class="col-6">
-              <q-select
-                ref="positionTypeRef"
-                :class="inputEdit(isReadonly)"
-                label="กลุ่มงาน"
-                v-model="formPositionSelect.positionType"
-                :options="typeOps"
-                emit-value
-                dense
-                @update:model-value="updateSelectType"
-                map-options
-                outlined
-                option-label="name"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
-              />
-            </div>
-
-            <div class="col-6">
-              <q-select
-                ref="positionLevelRef"
-                :class="inputEdit(isReadonly)"
-                label="ระดับชั้นงาน"
-                v-model="formPositionSelect.positionLevel"
-                :disable="formPositionSelect.positionType === ''"
-                :options="levelOps"
-                emit-value
-                dense
-                map-options
-                outlined
-                option-label="name"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn type="submit" :label="`บันทึก`" color="public" />
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/01_metadataNew/interface/index/positionEmployee.ts b/src/modules/01_metadataNew/interface/index/positionEmployee.ts
new file mode 100644
index 000000000..b23a01a7b
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/index/positionEmployee.ts
@@ -0,0 +1,28 @@
+interface ObjectGroupRef {
+  posTypeName: object | null;
+  posTypeShortName: object | null;
+  posTypeRank: object | null;
+  [key: string]: any;
+}
+
+interface ObjectLevelRef {
+  posLevelName: object | null;
+  posLevelAuthority: object | null;
+
+  [key: string]: any;
+}
+
+interface ObjectPosRef {
+  posName: object | null;
+  posTypeName: object | null;
+  posLevelName: object | null;
+
+  [key: string]: any;
+}
+
+interface FormQuery {
+  type: string;
+  keyword: string;
+}
+
+export type { ObjectGroupRef, ObjectLevelRef, ObjectPosRef, FormQuery };
diff --git a/src/modules/01_metadataNew/interface/request/positionEmployee.ts b/src/modules/01_metadataNew/interface/request/positionEmployee.ts
new file mode 100644
index 000000000..d4cbeeb37
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/request/positionEmployee.ts
@@ -0,0 +1,13 @@
+interface FrmDataGroup {
+  posTypeName: string;
+  posTypeShortName: string;
+  posTypeRank: number | null;
+}
+
+interface FormDataLevel {
+  posLevelName: number | null;
+  posTypeName: string | undefined;
+  posLevelAuthority: string;
+}
+
+export type { FrmDataGroup, FormDataLevel };
diff --git a/src/modules/01_metadataNew/interface/response/positionEmployee/Main.ts b/src/modules/01_metadataNew/interface/response/positionEmployee/Main.ts
new file mode 100644
index 000000000..64ed9d67d
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/positionEmployee/Main.ts
@@ -0,0 +1,26 @@
+interface ResGroup {
+  id: string;
+  posLevels: ResLevel[];
+  posTypeName: string;
+  posTypeRank: number;
+  posTypeShortName: string;
+}
+
+interface ResLevel {
+  id: string;
+  posLevelName: number;
+  posTypeName: string;
+  posTypeId: string;
+  posLevelAuthority: string;
+}
+
+interface ResPossition {
+  id: string;
+  posDictName: string;
+  posLevelId: string;
+  posLevelName: number;
+  posTypeId: string;
+  posTypeName: string;
+}
+
+export type { ResGroup, ResLevel, ResPossition };
diff --git a/src/modules/01_metadataNew/stores/positionEmployeeStore.ts b/src/modules/01_metadataNew/stores/positionEmployeeStore.ts
index 297426e1b..3c95e77bb 100644
--- a/src/modules/01_metadataNew/stores/positionEmployeeStore.ts
+++ b/src/modules/01_metadataNew/stores/positionEmployeeStore.ts
@@ -1,9 +1,12 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+
 import type {
   DataResponse,
   DataRow,
 } from "../interface/response/position/ListType";
+import type { ResGroup } from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
 const storeOption = useMainOptionDataStore();
@@ -14,25 +17,8 @@ export const usePositionEmployeeDataStore = defineStore(
   "positionEmployeeStore",
   () => {
     const pathLocation = ref<string>("list_position");
-    const row = ref<DataRow[]>([]);
-    function save(data: DataResponse[], id: string) {
-      const list = data.map((e) => ({
-        ...e,
-        posTypes: undefined,
-        posTypeId: e.posTypes?.id,
-        posTypeName: e.posTypes?.posTypeName,
-        posTypeRank: e.posTypes?.posTypeRank,
-        createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
-        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
-        posLevelAuthority: e.posLevelAuthority
-          ? storeOption.posLevelAuthorityConvert(e.posLevelAuthority)
-          : "-",
-      })) satisfies DataRow[];
-      row.value = list.filter((e) => e.posTypeId === id);
-    }
+
     return {
-      save,
-      row,
       pathLocation,
     };
   }
diff --git a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
index ddf8b2574..b0c09720d 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -337,7 +337,7 @@ function closeHistoryDialog() {
               label="ชื่อใบอนุญาต"
               bg-color="white"
               dense
-              :rules="[(val) => !!val || `${'กรุณากรอกชื่นใบอนุญาต'}`]"
+              :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
               hide-bottom-space
             />
           </div>
@@ -349,7 +349,7 @@ function closeHistoryDialog() {
               bg-color="white"
               dense
               :rules="[
-                (val) => !!val || `${'กรุณากรอกชื่อหน่วยงานผู้ออกใบอนุญาต'}`,
+                (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
               ]"
               hide-bottom-space
             />
@@ -394,9 +394,9 @@ function closeHistoryDialog() {
                       : ''
                   "
                   :rules="[
-                    (val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
+                    (val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
                   ]"
-                  :label="`${'วัน/เดือน/ปี ที่ออกใบอนุญาต'}`"
+                  :label="`${'วันที่ออกใบอนุญาต'}`"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -428,7 +428,6 @@ function closeHistoryDialog() {
               <template #trigger>
                 <q-input
                   dense
-                  lazy-rules
                   outlined
                   bg-color="white"
                   hide-bottom-space
@@ -437,7 +436,7 @@ function closeHistoryDialog() {
                       ? date2Thai(profesLicenseData.expireDate)
                       : ''
                   "
-                  :label="`${'วัน/เดือน/ปี ที่หมดอายุ'}`"
+                  :label="`${'วันที่หมดอายุ'}`"
                 >
                   <template v-slot:prepend>
                     <q-icon
diff --git a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
index 9204dc0ce..205f3339c 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
@@ -645,10 +645,10 @@ watch(
                       :rules="[
                         (val) =>
                           !!val ||
-                          `${'กรุณาเลือกวัน/เดือน/ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
+                          `${'กรุณาเลือกวันที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
                       ]"
                       hide-bottom-space
-                      :label="`${'วัน/เดือน/ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
+                      :label="`${'วันที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -683,11 +683,10 @@ watch(
                       :model-value="date2Thai(trainData.endDate)"
                       :rules="[
                         (val) =>
-                          !!val ||
-                          `${'กรุณาเลือกวัน/เดือน/ปี ที่จบการฝึกอบรม/ดูงาน'}`,
+                          !!val || `${'กรุณาเลือกวันที่จบการฝึกอบรม/ดูงาน'}`,
                       ]"
                       hide-bottom-space
-                      :label="`${'วัน/เดือน/ปี ที่จบการฝึกอบรม/ดูงาน'}`"
+                      :label="`${'วันที่จบการฝึกอบรม/ดูงาน'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
diff --git a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
index 83bd28c02..0f47b3505 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
@@ -48,9 +48,9 @@ const page = ref<string>();
 const dateAnnounce = ref<Date | null | string>(null);
 const refCommandNo = ref<string>();
 const refCommandDate = ref<Date | null | string>();
-const editRow = ref<boolean>(false);
 const note = ref<string>();
 
+const editRow = ref<boolean>(false);
 const myForm = ref<any>();
 const edit = ref<boolean>(false);
 const modal = ref<boolean>(false);
@@ -534,7 +534,7 @@ const clickClose = async () => {
       ok: "ยืนยัน",
       persistent: true,
     }).onOk(async () => {
-      // modal.value = false;
+      modal.value = false;
       // next.value = false;
       // previous.value = false;
     });
@@ -554,6 +554,10 @@ function onSubmit() {
   });
 }
 
+function selectData(props: any) {
+  modal.value = true;
+}
+
 function filterSelector(val: any, update: Function, refData: string) {
   switch (refData) {
     case "insigniaOptions":
@@ -685,6 +689,7 @@ onMounted(async () => {
     />
 
     <q-btn-toggle
+      dense
       v-model="modelView"
       toggle-color="grey-4"
       class="no-shadow toggle-borderd"
@@ -696,7 +701,7 @@ onMounted(async () => {
       <template v-slot:table>
         <q-icon
           name="format_list_bulleted"
-          size="sm"
+          size="24px"
           :style="{
             color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
           }"
@@ -705,7 +710,7 @@ onMounted(async () => {
       <template v-slot:card>
         <q-icon
           name="mdi-view-grid-outline"
-          size="sm"
+          size="24px"
           :style="{
             color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
           }"
@@ -714,159 +719,134 @@ onMounted(async () => {
     </q-btn-toggle>
   </q-toolbar>
 
-  <div>
-    <q-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      ref="table"
-      v-bind="attrs"
-      class="custom-header-table"
-      :rows="rows"
-      :columns="columns"
-      :filter="filterSearch"
-      :grid="modelView === 'card'"
-      :rows-per-page-options="[0]"
-      :pagination="initialPagination"
-      :visible-columns="visibleColumns"
-      :pagination-label="paginationLabel"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
+  <d-table
+    flat
+    dense
+    bordered
+    virtual-scroll
+    ref="table"
+    v-bind="attrs"
+    :rows="rows"
+    :columns="columns"
+    :filter="filterSearch"
+    :grid="modelView === 'card'"
+    :pagination="initialPagination"
+    :visible-columns="visibleColumns"
+    :pagination-label="paginationLabel"
+    :rows-per-page-options="[20, 50, 100]"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
 
-      <template v-slot:body="props" v-if="modelView === 'table'">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td
-            v-for="col in props.cols"
-            class="cursor-pointer"
-            :key="col.name"
-            :props="props"
+    <template v-slot:body="props" v-if="modelView === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          class="cursor-pointer"
+          :key="col.name"
+          :props="props"
+          @click="selectData(props)"
+        >
+          <div
+            v-if="
+              col.name == 'receiveDate' ||
+              col.name == 'dateAnnounce' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
           >
-            <div
-              v-if="
-                col.name == 'receiveDate' ||
-                col.name == 'dateAnnounce' ||
-                col.name == 'refCommandDate'
-              "
-              class="table_ellipsis"
-            >
-              {{ col.value == null ? "-" : date2Thai(col.value) }}
-            </div>
-            <div v-else-if="col.name == 'year'" class="table_ellipsis">
-              {{ col.value + 543 }}
-            </div>
-            <div v-else class="table_ellipsis">
-              {{ col.value ? col.value : "-" }}
-            </div>
-          </q-td>
-          <q-td auto-width>
+            {{ col.value == null ? "-" : date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'year'" class="table_ellipsis">
+            {{ col.value + 543 }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            flat
+            dense
+            round
+            size="14px"
+            color="info"
+            icon="mdi-history"
+            @click="clickHistory(props.row)"
+          >
+            <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions class="bg-grey-3" align="right">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-pencil-outline"
+              @click.stop.prevent="onClickOpenDialog()"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
             <q-btn
               flat
-              dense
               round
-              size="14px"
               color="info"
               icon="mdi-history"
-              @click="clickHistory(props.row)"
+              @click.stop.prevent="clickHistory(props.row)"
             >
               <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
             </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
+          </q-card-actions>
+          <q-separator />
+          <div>
+            <q-item
+              v-for="(col, index) in props.cols.filter(
+                (col) => col.name !== 'desc'
+              )"
+              :key="col.name"
+              :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
+            >
+              <q-item-section class="text-grey-6">
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
 
-      <template v-slot:item="props" v-else>
-        <div
-          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
-        >
-          <q-card bordered>
-            <q-card-actions class="bg-grey-3" align="right">
-              <q-btn
-                flat
-                round
-                color="primary"
-                icon="mdi-pencil-outline"
-                @click.stop.prevent="onClickOpenDialog()"
-              >
-                <q-tooltip>แก่ไขข้อมุล</q-tooltip>
-              </q-btn>
-              <q-btn
-                flat
-                round
-                color="info"
-                icon="mdi-history"
-                @click.stop.prevent="clickHistory(props.row)"
-              >
-                <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
-              </q-btn>
-            </q-card-actions>
-            <q-separator />
-            <div>
-              <q-item
-                v-for="(col, index) in props.cols.filter(
-                  (col) => col.name !== 'desc'
-                )"
-                :key="col.name"
-                :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
-              >
-                <q-item-section class="text-grey-6" v-if="index <= 7">
-                  <q-item-label>{{ col.label }}</q-item-label>
-                </q-item-section>
-
-                <q-item-section class="text-dark" v-if="index <= 7">
-                  <q-item-label
-                    v-if="
-                      col.name == 'receiveDate' ||
-                      col.name == 'dateAnnounce' ||
-                      col.name == 'refCommandDate'
-                    "
-                  >
-                    {{ col.value ? date2Thai(col.value) : "-" }}
-                  </q-item-label>
-                  <q-item-label v-else-if="col.name == 'year'">
-                    {{ col.value + 543 }}
-                  </q-item-label>
-                  <q-item-label v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </q-item-label>
-                </q-item-section>
-
-                <q-item-section class="text-grey-6" v-if="index > 7">
-                  <q-item-label>{{ col.label }}</q-item-label>
-                </q-item-section>
-
-                <q-item-section class="text-dark" v-if="index > 7">
-                  <q-item-label
-                    v-if="
-                      col.name == 'receiveDate' ||
-                      col.name == 'dateAnnounce' ||
-                      col.name == 'refCommandDate'
-                    "
-                  >
-                    {{ col.value ? date2Thai(col.value) : "-" }}
-                  </q-item-label>
-                  <q-item-label v-else-if="col.name == 'year'">
-                    {{ col.value + 543 }}
-                  </q-item-label>
-                  <q-item-label v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </q-item-label>
-                </q-item-section>
-              </q-item>
-            </div>
-          </q-card>
-        </div>
-      </template>
-    </q-table>
-  </div>
+              <q-item-section class="text-dark">
+                <q-item-label
+                  v-if="
+                    col.name == 'receiveDate' ||
+                    col.name == 'dateAnnounce' ||
+                    col.name == 'refCommandDate'
+                  "
+                >
+                  {{ col.value ? date2Thai(col.value) : "-" }}
+                </q-item-label>
+                <q-item-label v-else-if="col.name == 'year'">
+                  {{ col.value + 543 }}
+                </q-item-label>
+                <q-item-label v-else>
+                  {{ col.value ? col.value : "-" }}
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </div>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
 
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
@@ -923,6 +903,7 @@ onMounted(async () => {
                 menu-class-name="modalfix"
                 v-model="receiveDate"
                 :locale="'th'"
+                :enableTimePicker="false"
               >
                 <template #year="{ year }">
                   {{ year + 543 }}
@@ -942,9 +923,9 @@ onMounted(async () => {
                         ? date2Thai(receiveDate as Date)
                         : null
                     "
-                    :label="`${'วัน/เดือน/ปี ที่วันที่ได้รับ'}`"
+                    :label="`${'วันที่ได้รับ'}`"
                     :rules="[
-                      (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
+                      (val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`,
                     ]"
                     @update:modelValue="() => (editRow = true)"
                   >
@@ -1085,7 +1066,7 @@ onMounted(async () => {
                     lazy-rules
                     hide-bottom-space
                     :model-value="date2Thai(dateAnnounce as Date)"
-                    :label="`${'วัน/เดือน/ปี ที่ประกาศในราชกิจจาฯ'}`"
+                    :label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
                     :rules="[
                       (val:string) =>
                         !!val || `${'กรุณาเลือกวันที่ประกาศในราชกิจจาฯ'}`,
@@ -1160,13 +1141,6 @@ onMounted(async () => {
                         color="primary"
                       />
                     </template>
-                    <template v-if="refCommandDate && edit" v-slot:append>
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="refCommandDate = null"
-                        class="cursor-pointer"
-                      />
-                    </template>
                   </q-input>
                 </template>
               </datepicker>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
index d2f2565c1..55a82f3c3 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
@@ -1,6 +1,756 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+import HistoryTable from "@/components/TableHistory.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  RequestItemsObject,
+  Columns,
+} from "@/modules/04_registryNew/interface/request/DeclarationHonor";
+
+import type {
+  DataOption,
+  DataOptionInsignia,
+  InsigniaOps,
+  Pagination,
+} from "@/modules/04_registryNew/interface/index/Main";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const attrs = ref<any>(useAttrs());
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDate,
+  convertDateDisplay,
+} = mixin;
+
+const isDate = ref<string | null>("false");
+const issuer = ref<string>();
+const detail = ref<string>();
+const issueDate = ref<number>();
+const issueDate2 = ref<Date>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>();
+
+const editRow = ref<boolean>(false);
+const myForm = ref<any>();
+const edit = ref<boolean>(false);
+const modal = ref<boolean>(false);
+const modelView = ref<string>("table");
+const filterSearch = ref("");
+const filterHistory = ref<string>("");
+const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<RequestItemsObject[]>([]);
+const tittleHistory = ref<string>("ประวัติแก้ไขประกาศเกียรติคุณ");
+
+// mock data
+const rows = ref<any[]>([
+  {
+    id: "08dc2c84-4ef1-463e-8004-a6018ccaea19",
+    issuer: "",
+    detail: "ประกาศเกียรติคุณ ชั้น 2",
+    isDate: false,
+    issueDate: new Date("2019-01-01T00:00:00").getFullYear(),
+    issueDate2: new Date("2019-01-01T00:00:00"),
+    refCommandNo: "",
+    refCommandDate: null,
+    createdAt: new Date("2024-02-13T18:09:55.151412"),
+    createdFullName: "สาวิตรี ศรีสมัย",
+  },
+  {
+    id: "08dc2c84-4ef1-463e-8004-a6018ccaea19",
+    issuer: "",
+    detail: "ประกาศเกียรติคุณ ชั้น 2",
+    isDate: true,
+    issueDate: new Date("2015-12-05T00:00:00").getFullYear(),
+    issueDate2: new Date("2015-12-05T00:00:00"),
+    refCommandNo: "",
+    refCommandDate: null,
+    createdAt: new Date("2024-02-13T18:10:37.425739"),
+    createdFullName: "สาวิตรี ศรีสมัย",
+  },
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "ผู้มีอำนาจลงนาม",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    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: "issueDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "ผู้มีอำนาจลงนาม",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    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 visibleColumns = ref<String[]>([
+  "issuer",
+  "detail",
+  "issueDate",
+  "refCommandNo",
+  "refCommandDate",
+]);
+
+const visibleColumnsHistory = ref<String[]>([
+  "issuer",
+  "detail",
+  "issueDate",
+  "refCommandNo",
+  "refCommandDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
+  modal.value = true;
+}
+
+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;
+  }
+};
+
+function onSubmit() {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      // await saveData();
+      modal.value = false;
+    }
+  });
+}
+
+function selectData(props: any) {
+  modal.value = true;
+}
+
+async function clickHistory(row: RequestItemsObject) {
+  modalHistory.value = true;
+  // tittleHistory.value =
+  //   props.profileType == "employee"
+  //     ? "ประวัติแก้ไขประกาศลูกจ้างดีเด่น"
+  //     : "ประวัติแก้ไขประกาศเกียรติคุณ";
+  // modalHistory.value = true;
+  // filterHistory.value = "";
+  // showLoader();
+  // await http
+  //   .get(config.API.profileHonorHisId(row.id))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: any) => {
+  //       rowsHistory.value.push({
+  //         id: e.id,
+  //         issuer: e.issuer,
+  //         detail: e.detail,
+  //         issueDate: new Date(e.issueDate).getFullYear(),
+  //         issueDate2: new Date(e.issueDate),
+  //         refCommandNo: e.refCommandNo,
+  //         refCommandDate:
+  //           e.refCommandDate == null ? null : new Date(e.refCommandDate),
+  //         createdAt: new Date(e.createdAt),
+  //         createdFullName: e.createdFullName,
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+</script>
 <template>
-  <div>ประกาศเกียรติคุณ</div>
+  <q-toolbar style="padding: 0px" class="text-primary">
+    <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      dense
+      outlined
+      label="ค้นหา"
+      class="q-mr-sm"
+      v-model="filterSearch"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+
+    <q-select
+      v-if="modelView === 'table'"
+      dense
+      multiple
+      outlined
+      emit-value
+      map-options
+      options-cover
+      options-dense
+      class="q-mr-sm"
+      option-value="name"
+      style="min-width: 150px"
+      v-model="visibleColumns"
+      :options="columns"
+      :display-value="$q.lang.table.columns"
+    />
+
+    <q-btn-toggle
+      dense
+      v-model="modelView"
+      toggle-color="grey-4"
+      class="no-shadow toggle-borderd"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
+
+  <d-table
+    flat
+    dense
+    bordered
+    virtual-scroll
+    ref="table"
+    v-bind="attrs"
+    :rows="rows"
+    :columns="columns"
+    :filter="filterSearch"
+    :grid="modelView === 'card'"
+    :pagination="initialPagination"
+    :visible-columns="visibleColumns"
+    :pagination-label="paginationLabel"
+    :rows-per-page-options="[20, 50, 100]"
+    :virtual-scroll-sticky-size-start="48"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+
+    <template v-slot:body="props" v-if="modelView === 'table'">
+      <q-tr :props="props">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.name"
+          :props="props"
+          class="cursor-pointer"
+          @click="selectData(props)"
+        >
+          <div v-if="col.name == 'issueDate'" class="table_ellipsis">
+            {{
+              props.row.isDate == true
+                ? date2Thai(props.row.issueDate2)
+                : col.value + 543
+            }}
+          </div>
+          <div v-else-if="col.name == 'refCommandDate'" class="table_ellipsis">
+            {{
+              props.row.refCommandDate
+                ? date2Thai(props.row.refCommandDate)
+                : "-"
+            }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value ? 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-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions class="bg-grey-3" align="right">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-pencil-outline"
+              @click.stop.prevent="onClickOpenDialog()"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="info"
+              icon="mdi-history"
+              @click.stop.prevent="clickHistory(props.row)"
+            >
+              <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+          <div>
+            <q-item
+              v-for="(col, index) in props.cols.filter(
+                (col) => col.name !== 'desc'
+              )"
+              :key="col.name"
+              :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
+            >
+              <q-item-section class="col-7 text-grey-6">
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
+
+              <q-item-section class="text-dark">
+                <q-item-label v-if="col.name == 'issueDate'">
+                  {{
+                    props.row.isDate == true
+                      ? date2Thai(props.row.issueDate2)
+                      : col.value + 543
+                  }}
+                </q-item-label>
+                <q-item-label v-else-if="col.name == 'refCommandDate'">
+                  {{
+                    props.row.refCommandDate
+                      ? date2Thai(props.row.refCommandDate)
+                      : "-"
+                  }}
+                </q-item-label>
+                <q-item-label v-else>
+                  {{ col.value ? col.value : "-" }}
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </div>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form greedy ref="myForm" @submit="onSubmit">
+        <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-gutter-md q-py-sm text-grey-7">
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="false"
+                label="ปี"
+                dense
+              />
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="true"
+                label="วัน/เดือน/ปี"
+                dense
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                year-picker
+                v-model="issueDate"
+                week-start="0"
+                menu-class-name="modalfix"
+                :locale="'th'"
+                :enableTimePicker="false"
+                v-if="isDate === 'false'"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    :model-value="issueDate ? issueDate + 543 : ''"
+                    :rules="[
+                      (val:string) =>
+                        !!val ||
+                        `${'กรุณาเลือกปีที่ได้รับ'}`,
+                    ]"
+                    :label="`${'ปีที่ได้รับ'}`"
+                    @update:modelValue="() => (editRow = true)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="issueDate2"
+                :locale="'th'"
+                :enableTimePicker="false"
+                v-else
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    hide-bottom-space
+                    :model-value="date2Thai(issueDate2 as Date)"
+                    :label="`${'วันที่ได้รับ'}`"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`,
+                    ]"
+                    @update:modelValue="() => (editRow = true)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="issuer"
+                :label="`${'ผู้มีอำนาจลงนาม'}`"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="detail"
+                :label="`${'รายละเอียด'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="refCommandNo"
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="() => (editRow = true)"
+              >
+                <template v-slot:append>
+                  <q-icon name="mdi-file" class="cursor-pointer" />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="refCommandDate"
+                :locale="'th'"
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    clearable
+                    hide-bottom-space
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                    @clear="refCommandDate = null"
+                    @update:modelValue="() => (editRow = true)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <div class="text-right q-pa-sm">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <history-table
+    :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 == 'issueDate' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value ? date2Thai(col.value) : "-" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </history-table>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
index 9d68fe9d6..a23c9ac7c 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
@@ -1,6 +1,771 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref, watch, useAttrs } from "vue";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+import HistoryTable from "@/components/TableHistory.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registryNew/interface/request/ResultsPerformance";
+
+const $q = useQuasar();
+const attrs = ref<any>(useAttrs());
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDate,
+  convertDateDisplay,
+} = mixin;
+
+const id = ref<string>("");
+const name = ref<string>();
+const point1Total = ref<number>(0);
+const point1 = ref<number>(0);
+const point2Total = ref<number>(0);
+const point2 = ref<number>(0);
+const pointSumTotal = ref<number>(0);
+const pointSum = ref<number>(0);
+const date = ref<Date>();
+
+const editRow = ref<boolean>(false);
+const myForm = ref<any>();
+const edit = ref<boolean>(false);
+const modal = ref<boolean>(false);
+const modelView = ref<string>("table");
+const filterSearch = ref("");
+const filterHistory = ref<string>("");
+const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<RequestItemsObject[]>([]);
+const tittleHistory = ref<string>("ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ");
+
+const rows = ref<RequestItemsObject[]>([
+  {
+    id: "08dc2c84-7afa-4bee-80f0-7f225dd261b3",
+    point1Total: 100.0,
+    point1: 100.0,
+    point2Total: 100.0,
+    point2: 100.0,
+    pointSumTotal: 100.0,
+    pointSum: 100.0,
+    name: "",
+    date: new Date("2022-05-18T00:00:00"),
+    createdFullName: "สาวิตรี ศรีสมัย",
+    createdAt: new Date("2024-02-13T18:11:09.032485"),
+  },
+  {
+    id: "08dc2c84-7afa-4bee-80f0-7f225dd261b3",
+    point1Total: 100.0,
+    point1: 100.0,
+    point2Total: 100.0,
+    point2: 100.0,
+    pointSumTotal: 100.0,
+    pointSum: 100.0,
+    name: "",
+    date: new Date("2021-09-25T00:00:00"),
+    createdFullName: "สาวิตรี ศรีสมัย",
+    createdAt: new Date("2024-02-13T18:11:35.602659"),
+  },
+]);
+
+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: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    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) =>
+      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) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    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) =>
+      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) =>
+      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[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
+  "name",
+  "date",
+  "createdFullName",
+  "createdAt",
+]);
+
+const visibleColumns = ref<String[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
+  "name",
+  "date",
+]);
+
+function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
+  modal.value = true;
+}
+
+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;
+  }
+};
+
+function onSubmit() {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      // await saveData();
+      modal.value = false;
+    }
+  });
+}
+
+function selectData(props: any) {
+  modal.value = true;
+}
+
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  // tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
+  // filterHistory.value = "";
+  // showLoader();
+  // await http
+  //   .get(config.API.profileAssessmentHisId(row.id))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: ResponseObject) => {
+  //       rowsHistory.value.push({
+  //         id: e.id,
+  //         name: e.name,
+  //         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,
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+};
+
+function 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 "";
+}
+
+function 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>
 <template>
-  <div>ผลการประเมินการปฏิบัติราชการ</div>
+  <q-toolbar style="padding: 0px" class="text-primary">
+    <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      dense
+      outlined
+      label="ค้นหา"
+      class="q-mr-sm"
+      v-model="filterSearch"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+
+    <q-select
+      v-if="modelView === 'table'"
+      dense
+      multiple
+      outlined
+      emit-value
+      map-options
+      options-cover
+      options-dense
+      class="q-mr-sm"
+      option-value="name"
+      style="min-width: 150px"
+      v-model="visibleColumns"
+      :options="columns"
+      :display-value="$q.lang.table.columns"
+    />
+
+    <q-btn-toggle
+      dense
+      v-model="modelView"
+      toggle-color="grey-4"
+      class="no-shadow toggle-borderd"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
+
+  <d-table
+    flat
+    dense
+    bordered
+    virtual-scroll
+    ref="table"
+    v-bind="attrs"
+    :rows="rows"
+    :columns="columns"
+    :filter="filterSearch"
+    :grid="modelView === 'card'"
+    :visible-columns="visibleColumns"
+    :rows-per-page-options="[20, 50, 100]"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+
+    <template v-slot:body="props" v-if="modelView === 'table'">
+      <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">
+            {{ col.value ? 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 ? 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-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions class="bg-grey-3" align="right">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-pencil-outline"
+              @click.stop.prevent="onClickOpenDialog()"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="info"
+              icon="mdi-history"
+              @click="clickHistory(props.row)"
+            >
+              <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+          <div>
+            <q-item
+              v-for="(col, index) in props.cols.filter(
+                (col) => col.name !== 'desc'
+              )"
+              :key="col.name"
+              :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
+            >
+              <q-item-section class="text-grey-6">
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
+
+              <q-item-section class="text-dark">
+                <q-item-label v-if="col.name == 'date'">
+                  {{ col.value ? date2Thai(col.value) : "-" }}
+                </q-item-label>
+                <q-item-label v-else-if="col.name == 'name'">
+                  {{ textPoint(props.row.pointSum) }}
+                  {{ textRangePoint(props.row.pointSum) }}
+                </q-item-label>
+                <q-item-label v-else>
+                  {{ col.value ? col.value : "-" }}
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </div>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form greedy ref="myForm" @submit="onSubmit">
+        <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="col-12">
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="date"
+                :locale="'th'"
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    hide-bottom-space
+                    :model-value="date2Thai(date as Date)"
+                    :label="`${'วันที่ได้รับ'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                    @update:modelValue="() => (editRow = true)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                type="number"
+                class="inputgreen"
+                v-model="point1Total"
+                input-class="text-right "
+                :label="`${'ส่วนที่1 (คะแนน)'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                type="number"
+                class="inputgreen"
+                v-model="point1"
+                input-class="text-right"
+                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
+                ]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                type="number"
+                class="inputgreen"
+                v-model="point2Total"
+                input-class="text-right"
+                :label="`${'ส่วนที่2 (คะแนน)'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                type="number"
+                class="inputgreen"
+                v-model="point2"
+                input-class="text-right"
+                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
+                ]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                type="number"
+                class="inputgreen"
+                v-model="pointSumTotal"
+                input-class="text-right"
+                :label="`${'ผลรวม (คะแนน)'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                type="number"
+                v-model="pointSum"
+                class="inputgreen"
+                input-class="text-right"
+                :label="`${'ผลประเมินรวม (คะแนน)'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
+                ]"
+                @update:modelValue="() => (editRow = true)"
+              />
+            </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>
+        </q-card-section>
+        <q-separator />
+        <div class="text-right q-pa-sm">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <history-table
+    :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 == 'name'" class="table_ellipsis">
+            {{ textPoint(props.row.pointSum) }}
+            {{ textRangePoint(props.row.pointSum) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </history-table>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 283c78086..98e075ef0 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -275,106 +275,94 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="row justify-end items-center">
-    <div class="toptitle row">
-      <q-input
-        dense
-        outlined
-        debounce="300"
-        ref="filterRef"
-        v-model="filterSearch"
-        placeholder="ค้นหา"
-        style="max-width: 200px"
-      >
-        <template v-slot:append>
-          <q-icon name="search" v-if="filterSearch == ''" />
-          <q-icon
-            name="clear"
-            v-if="filterSearch !== ''"
-            @click="filterSearch = ''"
-            class="cursor-pointer"
-          />
-        </template>
-      </q-input>
-      <q-select
-        dense
-        multiple
-        outlined
-        emit-value
-        map-options
-        options-dense
-        option-value="name"
-        v-model="visibleColumns"
-        :options="columns"
-        class="q-ml-sm"
-        style="min-width: 150px"
-        :display-value="$q.lang.table.columns"
-      />
-    </div>
-  </div>
-
-  <div>
-    <q-table
-      flat
+  <q-toolbar style="padding: 0px" class="text-primary row justify-end">
+    <q-input
       dense
-      bordered
-      virtual-scroll
-      ref="table"
-      v-bind="attrs"
-      class="custom-header-table"
-      :rows="rows"
-      :columns="columns"
-      :filter="filterSearch"
-      :rows-per-page-options="[0]"
-      :pagination="initialPagination"
-      :visible-columns="visibleColumns"
-      :pagination-label="paginationLabel"
-      :virtual-scroll-sticky-size-start="48"
+      outlined
+      label="ค้นหา"
+      class="q-mr-sm"
+      v-model="filterSearch"
     >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
+      <template v-slot:append>
+        <q-icon name="search" />
       </template>
+    </q-input>
 
-      <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
-            <div v-if="col.name == '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>
-    </q-table>
-  </div>
+    <q-select
+      dense
+      multiple
+      outlined
+      emit-value
+      map-options
+      options-cover
+      options-dense
+      option-value="name"
+      style="min-width: 150px"
+      v-model="visibleColumns"
+      :options="columns"
+      :display-value="$q.lang.table.columns"
+    />
+  </q-toolbar>
+
+  <d-table
+    flat
+    dense
+    bordered
+    virtual-scroll
+    ref="table"
+    v-bind="attrs"
+    :rows="rows"
+    :columns="columns"
+    :filter="filterSearch"
+    :rows-per-page-options="[0]"
+    :pagination="initialPagination"
+    :visible-columns="visibleColumns"
+    :pagination-label="paginationLabel"
+    :virtual-scroll-sticky-size-start="48"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="(col, index) in props.cols" :key="col.name">
+          <div v-if="col.name == '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>
+  </d-table>
 
   <history-table
     :rows="rowsHistory"
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
index 01e224c38..ac9052d15 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
@@ -492,7 +492,7 @@ async function selectProvince(e: string | null, name: string) {
     myForm.value.resetValidation();
     await fetchDistrict(e, name);
   }
-};
+}
 
 async function selectDistrict(e: string | null, name: string) {
   if (e != null) {
@@ -506,7 +506,7 @@ async function selectDistrict(e: string | null, name: string) {
     myForm.value.resetValidation();
     await fetchSubDistrict(e, name);
   }
-};
+}
 
 function selectSubDistrict(e: string | null, name: string) {
   if (e != null) {
@@ -520,7 +520,7 @@ function selectSubDistrict(e: string | null, name: string) {
       addressData.value.codec = namecode;
     }
   }
-};
+}
 
 async function getNewData() {
   await fetchData();
@@ -640,7 +640,7 @@ onMounted(async () => {
     </div>
   </div>
 
-  <q-card bordered class="my-card bg-grey-1 q-pa-md">
+  <q-card class="my-card bg-grey-1 q-pa-md">
     <div :class="$q.screen.gt.xs ? 'row' : 'column'">
       <!-- column 1 -->
       <div class="col-md-6 col-12 row">
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
index e941320c2..88719ae50 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -33,7 +33,7 @@ const fatherData = reactive({
   job: "ตำรวจ",
 });
 const motherData = reactive({
-  isHaveInfo: 0,
+  isHaveInfo: 1,
   isDead: 0,
   citizenId: "1-1345-67891-01-2",
   prefix: "นาง",
@@ -155,12 +155,12 @@ function deleteChildren(items: any) {
       </div>
     </div>
     <div v-if="fatherData.isHaveInfo">
-      <div class="col-12 row q-pb-sm q-pt-md">
+      <div class="col-12 row q-pb-sm">
         <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
           • บิดา
         </div>
       </div>
-      <div class="bg-grey-1 q-gutter-md q-mb-lg">
+      <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
         <div class="row items-center">
           <div class="col-2">
             <div>เลขบัตรประจำตัวประชาชน</div>
@@ -204,7 +204,7 @@ function deleteChildren(items: any) {
             <div v-else>ถึงแก่กรรม</div>
           </div>
         </div>
-      </div>
+      </q-card>
     </div>
     <div v-if="motherData.isHaveInfo">
       <div class="col-12 row q-pb-sm q-pt-md">
@@ -212,7 +212,7 @@ function deleteChildren(items: any) {
           • มารดา
         </div>
       </div>
-      <div class="bg-grey-1 q-gutter-md q-mb-lg">
+      <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
         <div class="row items-center">
           <div class="col-2">
             <div>เลขบัตรประจำตัวประชาชน</div>
@@ -256,7 +256,7 @@ function deleteChildren(items: any) {
             <div v-else>ถึงแก่กรรม</div>
           </div>
         </div>
-      </div>
+      </q-card>
     </div>
     <div v-if="spouseData.isHave">
       <div class="col-12 row q-pb-sm q-pt-md">
@@ -264,7 +264,7 @@ function deleteChildren(items: any) {
           • คู่สมรส
         </div>
       </div>
-      <div class="bg-grey-1 q-gutter-md q-mb-lg">
+      <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
         <div class="row items-center">
           <div class="col-2">
             <div>เลขบัตรประจำตัวประชาชน</div>
@@ -308,7 +308,7 @@ function deleteChildren(items: any) {
             <div v-else>ถึงแก่กรรม</div>
           </div>
         </div>
-      </div>
+      </q-card>
     </div>
     <div v-if="childrenData.childrens[0] !== undefined">
       <div class="col-12 row q-pb-sm q-pt-md">
@@ -320,7 +320,7 @@ function deleteChildren(items: any) {
         <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
           <div class="text-medium">บุตรคนที่ : {{ index + 1 }}</div>
         </div>
-        <div class="bg-grey-1 q-gutter-md q-mb-lg">
+        <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
           <div class="row items-center">
             <div class="col-2">
               <div>เลขบัตรประจำตัวประชาชน</div>
@@ -364,7 +364,7 @@ function deleteChildren(items: any) {
               <div v-else>ถึงแก่กรรม</div>
             </div>
           </div>
-        </div>
+        </q-card>
       </div>
     </div>
   </div>
@@ -405,7 +405,7 @@ function deleteChildren(items: any) {
               />
             </div>
           </div>
-          <q-card-section class="bg-grey-1">
+          <q-card bordered class="bg-grey-1 q-pa-md">
             <div class="row q-col-gutter-md">
               <div class="col">
                 <q-input
@@ -470,9 +470,9 @@ function deleteChildren(items: any) {
                 />
               </div>
             </div>
-            <div class="row q-gutter-md">
-              <div>สถานภาพการมีชีวิต</div>
-              <div class>
+            <div class="row">
+              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+              <div>
                 <q-radio
                   :disable="!fatherData.isHaveInfo"
                   class="q-mr-sm"
@@ -496,7 +496,7 @@ function deleteChildren(items: any) {
                 />
               </div>
             </div>
-          </q-card-section>
+          </q-card>
           <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
             <div
               class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
@@ -524,7 +524,7 @@ function deleteChildren(items: any) {
               />
             </div>
           </div>
-          <q-card-section class="bg-grey-1">
+          <q-card bordered class="bg-grey-1 q-pa-md">
             <div class="row q-col-gutter-md">
               <div class="col">
                 <q-input
@@ -573,7 +573,7 @@ function deleteChildren(items: any) {
                   dense
                   bg-color="white"
                   lazy-rules
-                  v-model="motherData.lastName"
+                  v-model="fatherData.lastName"
                   :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
                   label="นามสกุล"
                 />
@@ -589,9 +589,9 @@ function deleteChildren(items: any) {
                 />
               </div>
             </div>
-            <div class="row q-gutter-md">
-              <div>สถานภาพการมีชีวิต</div>
-              <div class="">
+            <div class="row">
+              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+              <div>
                 <q-radio
                   :disable="!motherData.isHaveInfo"
                   class="q-mr-sm"
@@ -599,7 +599,7 @@ function deleteChildren(items: any) {
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="1"
-                  label="ยังมีชัวิตอยู่"
+                  label="ยังมีชีวิตอยู่"
                   dense
                   :color="!motherData.isHaveInfo ? 'grey' : 'primary'"
                 />
@@ -615,7 +615,7 @@ function deleteChildren(items: any) {
                 />
               </div>
             </div>
-          </q-card-section>
+          </q-card>
           <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
             <div
               class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
@@ -643,7 +643,7 @@ function deleteChildren(items: any) {
               />
             </div>
           </div>
-          <q-card-section class="bg-grey-1">
+          <q-card bordered class="bg-grey-1 q-pa-md">
             <div class="row q-col-gutter-md">
               <div class="col">
                 <q-input
@@ -708,9 +708,9 @@ function deleteChildren(items: any) {
                 />
               </div>
             </div>
-            <div class="row q-gutter-md">
-              <div>สถานภาพการมีชีวิต</div>
-              <div class="">
+            <div class="row">
+              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+              <div>
                 <q-radio
                   :disable="!spouseData.isHave"
                   class="q-mr-sm"
@@ -718,7 +718,7 @@ function deleteChildren(items: any) {
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="1"
-                  label="ยังมีชัวิตอยู่"
+                  label="ยังมีชีวิตอยู่"
                   dense
                   :color="!spouseData.isHave ? 'grey' : 'primary'"
                 />
@@ -728,13 +728,13 @@ function deleteChildren(items: any) {
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="0"
-                  :color="!spouseData.isHave ? 'grey' : 'red'"
+                  :color="!motherData.isHaveInfo ? 'grey' : 'red'"
                   label="ถึงแก่กรรม"
                   dense
                 />
               </div>
             </div>
-          </q-card-section>
+          </q-card>
           <div class="col-12 row q-pb-sm q-pt-md items-center">
             <div
               class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
@@ -757,8 +757,8 @@ function deleteChildren(items: any) {
               <div class="text-medium q-pl-md">บุตรคนที่ : {{ index + 1 }}</div>
             </div>
             <div class="row items-center">
-              <q-card-section class="bg-grey-1 col-11 q-pb-sm">
-                <div class="row q-col-gutter-sm">
+              <q-card bordered class="bg-grey-1 q-pa-md col-11 q-mb-lg">
+                <div class="row q-col-gutter-md">
                   <div class="col">
                     <q-input
                       outlined
@@ -815,31 +815,33 @@ function deleteChildren(items: any) {
                     />
                   </div>
                 </div>
-                <div class="row q-gutter-md">
-                  <div>สถานภาพการมีชีวิต</div>
-                  <div class="">
+                <div class="row">
+                  <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+                  <div>
                     <q-radio
+                      :disable="!spouseData.isHave"
                       class="q-mr-sm"
-                      v-model="items.isDead"
+                      v-model="spouseData.isDead"
                       checked-icon="task_alt"
                       unchecked-icon="panorama_fish_eye"
                       :val="1"
-                      label="ยังมีชัวิตอยู่"
+                      label="ยังมีชีวิตอยู่"
                       dense
-                      color="primary"
+                      :color="!spouseData.isHave ? 'grey' : 'primary'"
                     />
                     <q-radio
-                      v-model="items.isDead"
+                      :disable="!spouseData.isHave"
+                      v-model="spouseData.isDead"
                       checked-icon="task_alt"
                       unchecked-icon="panorama_fish_eye"
                       :val="0"
-                      color="red"
+                      :color="!motherData.isHaveInfo ? 'grey' : 'red'"
                       label="ถึงแก่กรรม"
                       dense
                     />
                   </div>
                 </div>
-              </q-card-section>
+              </q-card>
               <div class="col-1">
                 <div class="row justify-center">
                   <q-btn
@@ -858,8 +860,8 @@ function deleteChildren(items: any) {
             </div>
           </div>
         </q-card-section>
-
-        <q-card-actions align="right">
+        <q-separator />
+        <q-card-actions class="q-mt-md" align="right">
           <q-btn
             id="onSubmit"
             type="submit"
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index e377befbb..73f95b296 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -696,7 +696,7 @@ watch(
                         (val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
                       ]"
                       hide-bottom-space
-                      :label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
+                      :label="`${'วันที่เริ่มต้นศึกษา'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -733,7 +733,7 @@ watch(
                         (val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
                       ]"
                       hide-bottom-space
-                      :label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
+                      :label="`${'วันที่จบการศึกษา'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
diff --git a/src/modules/04_registryNew/interface/request/DeclarationHonor.ts b/src/modules/04_registryNew/interface/request/DeclarationHonor.ts
new file mode 100644
index 000000000..46d4ab710
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/DeclarationHonor.ts
@@ -0,0 +1,33 @@
+interface gDataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  issuer: string;
+  detail: string;
+  issueDate: number | null;
+  issueDate2: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null | string;
+  createdFullName: string;
+  createdAt: Date;
+  isDate: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns };
diff --git a/src/modules/04_registryNew/interface/request/ResultsPerformance.ts b/src/modules/04_registryNew/interface/request/ResultsPerformance.ts
new file mode 100644
index 000000000..58bcb2a51
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/ResultsPerformance.ts
@@ -0,0 +1,34 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
+  name: string;
+  date: Date;
+  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_registryNew/interface/response/DeclarationHonor.ts b/src/modules/04_registryNew/interface/response/DeclarationHonor.ts
new file mode 100644
index 000000000..2b6eb44ac
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/DeclarationHonor.ts
@@ -0,0 +1,15 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  issuer: string;
+  detail: string;
+  issueDate: number;
+  issueDate2: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+  isDate: string;
+}
+
+export type { ResponseObject };
diff --git a/src/modules/04_registryNew/interface/response/ResultsPerformance.ts b/src/modules/04_registryNew/interface/response/ResultsPerformance.ts
new file mode 100644
index 000000000..af1f8598a
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/ResultsPerformance.ts
@@ -0,0 +1,16 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
+  name: string;
+  date: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
index 468b62b05..a898e0dc0 100644
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -41,6 +41,7 @@ const itemsMenu = ref<DataOption[]>([
 ]);
 const input = document.createElement("input");
 input.type = "file";
+input.accept = ".jpg,.png,.tif,.pic";
 
 function selectFile() {
   input.click();
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue b/src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue
new file mode 100644
index 000000000..e7c8e6496
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue
@@ -0,0 +1,4 @@
+<template>
+<q-card class="q-pa-sm"> แสดง dashboard สำหรับ สกจ. </q-card>
+
+</template>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue
new file mode 100644
index 000000000..b178d0430
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogAddPerson.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
+import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
+import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } =
+  useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+});
+
+/** Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำเเหน่ง",
+    sortable: true,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<DataPerson[]>([]);
+
+/** ข้อมูุลค้นหา*/
+const formFilter = reactive<DataFilterPerson>({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  rootId: "",
+  year: 0,
+  period: "",
+});
+const maxPage = ref<number>(1);
+
+/** function close popup*/
+function closeModal() {
+  modal.value = false;
+  formFilter.page = 1;
+  formFilter.keyword = "";
+}
+
+/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
+function fetchListPerson() {
+  showLoader();
+  formFilter.rootId = store.rootId;
+  formFilter.period = store.roundMainCode;
+  formFilter.year = store.roundYear;
+  http
+    .post(config.API.salaryListPerson, formFilter)
+    .then((res) => {
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+      closeModal();
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ยืนยันการเพิ่มคนเลื่อนเงินเดือน
+ * @param data ข้อมูลคนที่เพิ่ม
+ */
+function onClickAddPerson(data: DataPerson) {
+  const body: DataPersonReq = {
+    id: store.groupId,
+    type: store.tabType,
+    ...data,
+  };
+
+  dialogConfirm(
+    $q,
+    () => {
+      http
+        .post(config.API.salaryPeriodProfile, body)
+        .then(() => {
+          props.fetchData?.();
+          success($q, "เพื่มรายชื่อสำเร็จ");
+          closeModal();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มรายชื่อ",
+    "ต้องการยืนยันการเพิ่มรายชื่อนี้ใช่หรือไม่?"
+  );
+}
+
+/** function updatePage*/
+async function updatePagePagination() {
+  fetchListPerson();
+}
+
+/** function updatePageSize*/
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** function ค้นหาข้อมูลตาม keyword*/
+function searchData() {
+  formFilter.page = 1;
+  fetchListPerson();
+}
+
+/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchListPerson();
+    }
+  }
+);
+
+/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
+watch(
+  () => formFilter.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="max-width: 100vw">
+      <Header :tittle="'เพิ่มคนเลื่อนเงินเดือน'" :close="closeModal" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              borderless
+              dense
+              debounce="300"
+              outlined
+              placeholder="ค้นหา"
+              v-model="formFilter.keyword"
+              @keydown.enter.prevent="searchData"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-12">
+            <d-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              @update:pagination="updatePageSizePagination"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                  <q-th auto-width></q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name === 'no'">
+                      {{
+                        (formFilter.page - 1) * formFilter.pageSize +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+                    <div v-else-if="col.name === 'fullName'">
+                      {{
+                        `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                  <q-td>
+                    <q-btn
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="onClickAddPerson(props.row)"
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="formFilter.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(maxPage)"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  @update:model-value="updatePagePagination()"
+                ></q-pagination>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <!-- <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center"
+          color="light-blue-10"
+          label="บันทึก"
+        />
+      </q-card-actions> -->
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue
new file mode 100644
index 000000000..832096723
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, success, messageError } = mixin;
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const amount = defineModel<number | null>("amount", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+});
+
+const amountRef = ref<any>();
+
+/** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  if (amountRef.value.validate()) {
+    onSubmit();
+  }
+}
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  amount.value = null;
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    if (amount.value !== null) {
+      const amountString: string = amount.value.toString();
+      const body = {
+        profileId: profileId.value,
+        amount:
+          typeof amount.value === "number"
+            ? amount.value
+            : Number(amountString.replace(/,/g, "")),
+      };
+      http
+        .post(config.API.salaryPeriod() + `/change/amount`, body)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          props.fetchData?.();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          close();
+        });
+    }
+  });
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-input
+            ref="amountRef"
+            dense
+            outlined
+            v-model="amount"
+            label="เงินเดือนฐาน"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue
new file mode 100644
index 000000000..7eeb283a2
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Header from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const separator = ref<any>("cell");
+/** ปิด Dialog */
+function closeDialog() {
+  modal.value = !modal.value;
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" full-width>
+      <Header
+        tittle="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
+        :close="closeDialog"
+      />
+      <q-separator />
+      <q-card-section>
+        <div class="q-pa-md">
+          <q-markup-table
+            :separator="separator"
+            flat
+            bordered
+            class="custom-header-table"
+          >
+            <thead>
+              <tr>
+                <th class="text-center">หลักเกณฑ์ในการพิจารณาเลื่อนขั้นฯ</th>
+                <th class="text-center">หนึ่งขั้น</th>
+                <th class="text-center">ครึ่งขั้น</th>
+                <th class="text-center">ไม่ได้รับการเลื่อนขั้น</th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- ข้อ1 -->
+              <tr>
+                <td class="text-left">1. ผลการประเมินผลการปฎิบัติราชการ</td>
+                <td class="text-center">
+                  ผลการประเมินผลในระดับดีเด่น<br />(90-100%)
+                </td>
+                <td class="text-center">
+                  ผลการประเมินเป็นที่ยอมรับได้<br />(60-89%)
+                </td>
+                <td class="text-center">
+                  ผลการประเมินต้องปรับปรุง<br />(ต่ำกว่า 60%)
+                </td>
+              </tr>
+
+              <!-- ข้อ2 -->
+              <tr>
+                <td class="text-left">
+                  2. ระยะเวลาการปฎิบัติราชการในรอบครึ่งปี
+                </td>
+                <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
+                <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
+                <td class="text-center">
+                  น้อยกว่า 4 เดือน<br />(บรรจุใหม่ ลาศึกษา ฝึกอบรมดูงาน)
+                </td>
+              </tr>
+
+              <!-- ข้อ3 -->
+              <tr>
+                <td class="text-left">3. การลงโทษทางวินัย</td>
+                <td class="text-center">
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
+                </td>
+                <td class="text-center">
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
+                </td>
+                <td class="text-center">
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
+                </td>
+              </tr>
+
+              <!-- ข้อ4 -->
+              <tr>
+                <td class="text-left">4. พักราชการ</td>
+                <td class="text-center">ไม่ถูกสั่งพักราชการ</td>
+                <td class="text-center">
+                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
+                </td>
+                <td class="text-center">
+                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
+                </td>
+              </tr>
+
+              <!-- ข้อ5 -->
+              <tr>
+                <td class="text-left">5. ขาดราชการ</td>
+                <td class="text-center">ไม่ขาดราชการ</td>
+                <td class="text-center">ไม่ขาดราชการ</td>
+                <td class="text-center">ไม่ขาดราชการ</td>
+              </tr>
+
+              <!-- ข้อ6 -->
+              <tr class="vertical-top">
+                <td class="text-left">6. วันลา</td>
+                <td class="text-left">
+                  <p class="q-mb-none txt-under">
+                    ไม่เกิน 5 ครั้ง 23 วัน<br />สายไม่เกิน 5 ครั้ง
+                  </p>
+                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
+                  <p class="text-bold q-mb-none">ยกเว้น</p>
+                  <p class="q-mb-none">
+                    - ลาอุปสมบท
+                    <br />
+                    - ลาคลอดบุตร (ไม่เกิน 90 วัน)
+                    <br />
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
+                </td>
+                <td class="text-left">
+                  <p class="txt-under q-mb-none">
+                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
+                  </p>
+                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
+                  <p class="text-bold q-mb-none">ยกเว้น</p>
+                  <p class="q-mb-none">
+                    - ลาอุปสมบท
+                    <br />
+                    - ลาคลอดบุตร (ไม่เกิน 90 วัน)
+                    <br />
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
+                </td>
+                <td class="text-left">
+                  <p class="txt-under q-mb-none">
+                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
+                  </p>
+                  <p>(นับเฉพาะการลาป่วยลากิจ)</p>
+                  <br />
+                  <br />
+                  <p class="q-mb-none">
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </q-markup-table>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.txt-under {
+  text-decoration: underline;
+}
+
+.q-table th {
+  font-size: 14px !important;
+}
+</style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue
new file mode 100644
index 000000000..409210efc
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref, defineModel, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const { dialogConfirm, success, messageError, showLoader, hideLoader } =
+  useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+const props = defineProps({
+  group: { type: String },
+  fetchData: {
+    type: Function,
+  },
+});
+
+/** ตัวแปร*/
+const group = ref<string>("");
+const groupRef = ref<any>(null);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  if (groupRef.value.validate()) {
+    onSubmit();
+  }
+}
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  group.value = "";
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+      profileId: profileId.value,
+      groupId: group.value,
+    };
+    http
+      .post(config.API.salaryPeriod() + `/change/group`, body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+        close();
+      });
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      group.value =
+        props.group === "กลุ่ม1" ? store.groupOp[1].id : store.groupOp[0].id;
+    }
+  }
+);
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`ย้ายกลุ่ม`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-select
+            ref="groupRef"
+            :class="inputEdit(isReadonly)"
+            v-model="group"
+            label="กลุ่ม"
+            dense
+            outlined
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="store.groupOp.filter((e) => e.name !== props.group)"
+            :rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue
new file mode 100644
index 000000000..75e6a2f7d
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/**porps*/
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+const props = defineProps({
+  typeLevel: { type: String, required: true },
+  isReserve: { type: Boolean, required: true },
+  fetchData: {
+    type: Function,
+  },
+});
+
+const type = ref<string>("");
+const typeRef = ref<any>(null);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isChange = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
+const isReserve = ref<boolean>(false); // สำรองหรือไม่
+
+const typeRangeOps = computed(() => {
+  return store.roundMainCode == "OCT"
+    ? [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+        { id: "FULLHAFT", name: "1.5 ขั้น" },
+      ]
+    : [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+      ];
+});
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  if (typeRef.value.validate()) {
+    // if (
+    //   store.roundMainCode === "APR" &&
+    //   store.remaining === 0 &&
+    //   type.value === "FULL"
+    // ) {
+    //   dialogMessageNotify($q, "ไม่สามารถย้ายขั้นได้เนื่องจากโควตาคงเหลือไม่พอ");
+    // } else {
+    onSubmit();
+    // }
+  }
+}
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  type.value = "";
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+      profileId: profileId.value,
+      type: type.value,
+      isReserve: isReserve.value,
+    };
+    http
+      .post(config.API.salaryPeriod() + `/change/type`, body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        close();
+        hideLoader();
+      });
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    type.value = props.typeLevel == 'PENDING' ? "" : props.typeLevel;
+    isReserve.value = props.isReserve;
+    isChange.value = false;
+  }
+);
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`ย้ายขั้น`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-select
+            ref="typeRef"
+            :class="inputEdit(isReadonly)"
+            v-model="type"
+            label="เลื่อนขั้น"
+            dense
+            outlined
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="typeRangeOps"
+            :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
+            lazy-rules
+            hide-bottom-space
+            @update:model-value="isChange = true"
+          />
+          <!-- :options="typeRangeOps.filter((e) => e.id !== store.tabType)" -->
+
+          <q-checkbox
+            v-if="type === 'FULL'"
+            keep-color
+            label="สำรอง"
+            dense
+            v-model="isReserve"
+            @update:model-value="isChange = true"
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            :disabled="!isChange"
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue b/src/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue
new file mode 100644
index 000000000..0bad57794
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/**porps*/
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("id", { required: true });
+const props = defineProps({
+  isPunish: { type: Boolean, required: true },
+  isSuspension: { type: Boolean, required: true },
+  isAbsent: { type: Boolean, required: true },
+  isLeave: { type: Boolean, required: true },
+  fetchData: {
+    type: Function,
+  },
+});
+
+const type = ref<string>("");
+const typeRef = ref<any>(null);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
+const isPunish = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
+const isSuspension = ref<boolean>(false); // สำรองหรือไม่
+const isAbsent = ref<boolean>(false); // สำรองหรือไม่
+const isLeave = ref<boolean>(false); // สำรองหรือไม่
+
+const typeRangeOps = computed(() => {
+  return store.roundMainCode == "OCT"
+    ? [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+        { id: "FULLHAFT", name: "1.5 ขั้น" },
+      ]
+    : [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+      ];
+});
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+    onSubmit();
+  }
+
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  type.value = "";
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+        isPunish: isPunish.value,
+        isSuspension: isSuspension.value,
+        isAbsent: isAbsent.value,
+        isLeave: isLeave.value,
+    };
+    http
+      .put(config.API.salaryProperty(profileId.value), body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        close();
+        hideLoader();
+      });
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    isPunish.value = props.isPunish;
+    isSuspension.value = props.isSuspension;
+    isAbsent.value = props.isAbsent;
+    isLeave.value = props.isLeave;
+  }
+);
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 20%">
+      <Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm column">
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ถูกลงโทษทางวินัย"
+            dense
+            v-model="isPunish"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ถูกพักราชการ"
+            dense
+            v-model="isSuspension"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ขาดราชการ"
+            dense
+            v-model="isAbsent"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="วันลาไม่เกิน"
+            dense
+            v-model="isLeave"
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
new file mode 100644
index 000000000..811975d4b
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
+
+const sendStep = ref<number>(1);
+const fileUpload = ref<any>(null);
+const document = ref<string>("");
+/**
+ * function อัปโหลดไฟล์เจ้าหน้าที่
+ * @param event file
+ */
+async function uploadFile(event: any) {
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = event;
+      const formdata = new FormData();
+      formdata.append("Document", selectedFile);
+      // await http
+      //   .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
+      //   .then(async () => {
+      //     await fecthInsigniaByOc(
+      //       round.value,
+      //       DataStore.agency,
+      //       "officer",
+      //       tab.value
+      //     );
+      //     success($q, "อัปโหลดไฟล์สำเร็จ");
+      //     fileUpload.value = null;
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   }),
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+function saveReccommend() {
+  dialogConfirm(
+    $q,
+    async () => {
+      sendStep.value = sendStep.value + 1;
+      modalRecommend.value = false;
+    },
+    "ยืนยันการ" + titleRecommend.value,
+    "ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
+  );
+}
+
+function sendToDirector(msg: string) {
+  dialogConfirm(
+    $q,
+    async () => {
+      sendStep.value = sendStep.value == 3 ? 6 : sendStep.value + 1;
+    },
+    "ยืนยันการ" + msg,
+    "ต้องการยืนยันการ" + msg + "หรือไม่?"
+  );
+}
+
+const modalRecommend = ref<boolean>(false);
+const titleRecommend = ref<string>("");
+function sendAndRecommend(title: string) {
+  modalRecommend.value = true;
+  titleRecommend.value = title;
+}
+</script>
+
+<template>
+  <div class="row col-12 q-pa-md">
+    <q-toolbar>
+      <q-file
+        v-if="sendStep == 1"
+        bg-color="white"
+        clearable
+        outlined
+        dense
+        v-model="fileUpload"
+        accept=".pdf"
+        label="อัปโหลดไฟล์"
+      >
+        <template v-slot:prepend>
+          <q-icon color="light-blue" name="attach_file" />
+          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+        </template>
+      </q-file>
+
+      <q-btn
+        flat
+        color="light-blue"
+        icon="upload"
+        @click="uploadFile(fileUpload)"
+        v-if="fileUpload !== null"
+      />
+      <div v-if="document">
+        <q-btn
+          dense
+          color="primary"
+          icon-right="mdi-download"
+          label="ดาวน์โหลดไฟล์"
+          outline
+          :href="document"
+          target="_blank"
+        >
+          <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
+        >
+      </div>
+
+      <q-toolbar-title>
+        <!-- Toolbar -->
+      </q-toolbar-title>
+      <div>
+        <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
+        <q-btn
+          v-if="sendStep == 1"
+          unelevated
+          color="public"
+          label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
+          @click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ')"
+        />
+
+        <!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
+        <q-btn
+          v-if="sendStep == 2"
+          unelevated
+          color="public"
+          label="ยืนยันและส่งเอกสารให้ สกจ."
+          @click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.')"
+        />
+
+        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
+        <q-btn
+          v-if="sendStep == 3"
+          unelevated
+          color="green"
+          label="ยืนยันการตรวจสอบ"
+          @click="sendToDirector('ยืนยันการตรวจสอบ')"
+        />
+
+        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
+        <q-btn
+          v-if="sendStep == 3"
+          class="q-ml-sm"
+          unelevated
+          color="warning"
+          label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
+          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
+        />
+
+        <!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
+        <q-btn
+          v-if="sendStep == 4"
+          unelevated
+          color="public"
+          label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
+          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
+        />
+
+        <q-btn
+          v-if="sendStep > 4"
+          unelevated
+          color="public"
+          label="ส่งไปออกคำสั่ง"
+        />
+      </div>
+    </q-toolbar>
+
+    <DialogPopupReason
+      v-model:modal="modalRecommend"
+      :title="titleRecommend"
+      label="คำแนะนำ"
+      :savaForm="saveReccommend"
+      textReport=""
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
new file mode 100644
index 000000000..a2aa41812
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
@@ -0,0 +1,492 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive, computed } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReportXLSX from "@/plugins/genreportxlsx";
+
+/** importType*/
+import type { DataOption } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
+import type {
+  DataPeriodLatest,
+  DataPeriod,
+} from "@/modules/13_salary/interface/response/SalaryList";
+
+/** importComponents*/
+import TableTabType1 from "@/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue";
+import TableTabType2 from "@/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue";
+import DialogInfoCriteria from "@/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+
+/** props*/
+const props = defineProps({
+  periodLatest: { type: Object as () => DataPeriodLatest, require: true },
+});
+
+const total = ref<number>();
+const splitterModel = ref<number>(13);
+const rows = ref<DataPeriod[]>([]);
+
+/** itemsTab กลุ่ม*/
+const itemsTabGroup = ref([
+  {
+    lable: "กลุ่ม 1",
+    name: "group1",
+  },
+  {
+    lable: "กลุ่ม 2",
+    name: "group2",
+  },
+]);
+
+/** itemsTab ขั้น*/
+const itemsTabType = computed(() => {
+  return store.roundMainCode === "OCT"
+    ? [
+        {
+          lable: "รายชื่อคนครอง",
+          name: "tab1",
+          type: "PENDING",
+        },
+        {
+          lable: "รายชื่อผู้เกษียณอายุราชการ",
+          name: "tab5",
+          type: "RETIRE",
+        },
+        {
+          lable: "1 ขั้น",
+          name: "tab2",
+          type: "FULL",
+        },
+        {
+          lable: "0.5 ขั้น",
+          name: "tab3",
+          type: "HAFT",
+        },
+        {
+          lable: "1.5 ขั้น",
+          name: "tab4",
+          type: "FULLHAFT",
+        },
+        {
+          lable: "ไม่ได้เลื่อน",
+          name: "tab4",
+          type: "NONE",
+        },
+      ]
+    : [
+        {
+          lable: "รายชื่อคนครอง",
+          name: "tab1",
+          type: "PENDING",
+        },
+        {
+          lable: "1 ขั้น",
+          name: "tab2",
+          type: "FULL",
+        },
+        {
+          lable: "0.5 ขั้น",
+          name: "tab3",
+          type: "HAFT",
+        },
+        {
+          lable: "ไม่ได้เลื่อน",
+          name: "tab4",
+          type: "NONE",
+        },
+      ];
+});
+
+/** itemsCard*/
+const itemsCard = ref([
+  {
+    lable: "จำนวนคนทั้งหมด",
+    name: "group1",
+    color: "secondary",
+    total: 0,
+  },
+  {
+    lable: "15% ของจำนวนคน",
+    name: "group2",
+    color: "light-blue-4",
+    total: 0,
+  },
+  {
+    lable: "เลือกไปแล้ว",
+    name: "group2",
+    color: "primary",
+    total: 0,
+  },
+  {
+    lable: "คงเหลือโควตา",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
+  {
+    lable: "สำรอง",
+    name: "group2",
+    color: "red-6",
+    total: 0,
+  },
+  {
+    lable: "จำนวนเงินคนครองปัจจุบัน",
+    name: "group1",
+    color: "secondary",
+    total: 0,
+  },
+
+  {
+    lable: "วงเงิน 6%",
+    name: "group2",
+    color: "light-blue-4",
+    total: 0,
+  },
+  {
+    lable: "ยอดเงินที่ใช้ไป",
+    name: "group2",
+    color: "primary",
+    total: 0,
+  },
+  {
+    lable: "วงเงิน 6%-ยอดเงินที่ใช้ไป",
+    name: "group2",
+    color: "indigo-6",
+    total: 0,
+  },
+  {
+    lable: "ใช้ไปเท่าไหร่",
+    name: "group2",
+    color: "blue-6",
+    total: 0,
+  },
+  {
+    lable: "เหลือเท่าไหร่",
+    name: "group2",
+    color: "green-6",
+    total: 0,
+  },
+  {
+    lable: "สำรอง",
+    name: "group2",
+    color: "red-6",
+    total: 0,
+  },
+]);
+
+/** ข้อมูลค้นหารายชื่อคยขึ้นเงินเดือน*/
+const formFilter = reactive<DataFilter>({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  type: store.tabType,
+});
+const maxPage = ref<number>(1);
+
+/**
+ * function เรียกข้อมูลจำนวนโควต้า
+ * @param id กลุ่ม
+ */
+function fetchDataQuota(id: string) {
+  // showLoader();
+  http
+    .get(config.API.salaryListPeriodQuota(id))
+    .then((res) => {
+      const data = res.data.result;
+      store.remaining = data.remaining;
+      itemsCard.value[0].total = data.total;
+      itemsCard.value[1].total = data.fifteenPercent;
+      itemsCard.value[2].total = data.chosen;
+      itemsCard.value[3].total = data.remaining;
+      itemsCard.value[4].total = data.totalBackup;
+
+      itemsCard.value[5].total = data.currentAmount;
+      itemsCard.value[6].total = data.sixPercentAmount;
+      itemsCard.value[7].total = data.spentAmount;
+      itemsCard.value[8].total = data.sixPercentSpentAmount;
+      itemsCard.value[9].total = data.useAmount;
+      itemsCard.value[10].total = data.remainingAmount;
+
+      itemsCard.value[11].total = data.totalBackup;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+  // .finally(() => {
+  //   hideLoader();
+  // });
+}
+
+/**
+ * function เรียกข้อมูลรายชื่อ
+ * @param id กลุ่ม
+ */
+function fetchDataPeriod(id: string) {
+  rows.value = [];
+  const formData = {
+    page: formFilter.page.toString(),
+    pageSize: formFilter.pageSize.toString(),
+    keyword: formFilter.keyword,
+    type: store.tabType === "RETIRE" ? "" : store.tabType,
+    isRetire: store.tabType === "RETIRE" ? true : null,
+  };
+
+  http
+    .put(config.API.salaryListPeriodORG(id), formData)
+    .then((res) => {
+      rows.value = res.data.result.data;
+      total.value = res.data.result.total;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**function เปลี่ยนกลุ่ม*/
+function changeTabGroup() {
+  formFilter.page = 1;
+  formFilter.pageSize = 10;
+  formFilter.keyword = "";
+  store.tabType = "PENDING";
+  props.periodLatest &&
+    store.fetchPeriodLatest(props?.periodLatest, store.tabGroup);
+  store.groupId && fetchDataQuota(store.groupId);
+  store.groupId && fetchDataPeriod(store.groupId);
+  splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
+}
+
+/**function เปลี่ยนขั้น*/
+function changeTabType() {
+  formFilter.page = 1;
+  formFilter.pageSize = 10;
+  formFilter.keyword = "";
+  store.groupId && fetchDataPeriod(store.groupId);
+}
+
+/** function เรียกข้อมูลรายชื่ออีกครั้ง*/
+function fetchDataPeriodNew() {
+  store.groupId && fetchDataPeriod(store.groupId);
+  store.groupId && fetchDataQuota(store.groupId);
+}
+
+function onClickDownload(data: DataOption) {
+  console.log(data);
+  // showLoader();
+  // http
+  //   .get(config.API.salaryReportByid(salaryId.value))
+  //   .then((res) => {
+  //     const dataList = res.data.result;
+  //     genReportXLSX(dataList, "อัตราเงินเดือน");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+const modalDialogInfoCriteria = ref<boolean>(false);
+onMounted(async () => {
+  await fetchDataQuota(store.groupId);
+  await fetchDataPeriod(store.groupId);
+  splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
+});
+</script>
+
+<template>
+  <!-- Tab กลุ่ม -->
+  <!-- <q-tabs
+    v-model="store.tabGroup"
+    dense
+    class="text-grey"
+    active-color="primary"
+    active-class="bg-teal-1"
+    indicator-color="primary"
+    align="left"
+  >
+    <div
+      v-for="(item, index) in itemsTabGroup"
+      :key="index"
+      @click="changeTabGroup"
+    >
+      <q-tab :name="item.name" :label="item.lable" />
+    </div>
+
+    <q-space />
+    <q-btn
+      dense
+      flat
+      icon="info"
+      class="q-mr-sm"
+      label="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
+      @click="() => (modalDialogInfoCriteria = true)"
+    />
+  </q-tabs> -->
+  <!-- <q-separator /> -->
+  <q-tab-panels v-model="store.tabGroup" animated class="bg-grey-1">
+    <q-tab-panel
+      style="padding: 0px"
+      v-for="(item, index) in itemsTabGroup"
+      :key="index"
+      :name="item.name"
+    >
+      <!-- Card โควต้า -->
+      <div class="row col-12 q-pa-md">
+        <div
+          :class="`row col-12 ${
+            store.roundMainCode === 'APR' ? `q-col-gutter-md` : `q-gutter-md`
+          } items-start`"
+        >
+          <div
+            v-for="(item, index) in store.roundMainCode === 'APR'
+              ? itemsCard.slice(0, 5)
+              : store.roundMainCode === 'OCT'
+              ? itemsCard.slice(5, 12)
+              : itemsCard"
+            :key="index"
+            :class="
+              store.roundMainCode === 'APR'
+                ? 'col-6 col-sm-4 col-md-3 col-lg-2'
+                : 'col-3'
+            "
+          >
+            <q-card>
+              <q-card-section>
+                <div class="row items-center no-wrap">
+                  <div class="col">
+                    <div class="">{{ item.lable }}</div>
+                  </div>
+
+                  <div :class="`text-${item.color} text-bold`">
+                    {{ item.total ? item.total.toLocaleString() : 0 }}
+                  </div>
+                </div>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="row col justify-end self-center">
+            <q-btn-dropdown color="blue-5" label="ดาวน์โหลด">
+              <q-list>
+                <q-item
+                  v-for="(item, index) in store.roundMainCode === 'APR'
+                    ? store.itemDownloadApr
+                    : store.roundMainCode === 'OCT'
+                    ? store.itemDownloadOct
+                    : []"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="onClickDownload(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+            <!-- <q-btn color="blue-5" icon="download" label="ดาวน์โหลด" /> -->
+          </div>
+        </div>
+      </div>
+      <q-separator />
+
+      <!-- Tab ขั้น -->
+      <q-card flat bordered>
+        <q-splitter v-model="splitterModel" disable>
+          <template v-slot:before>
+            <q-tabs
+              v-model="store.tabType"
+              vertical
+              dense
+              class="text-grey-black"
+              active-color="blue-5"
+              active-class="bg-blue-1"
+              indicator-color="blue-5"
+              align="left"
+            >
+              <div
+                v-for="(item, index) in itemsTabType"
+                :key="index"
+                class="row"
+                :style="
+                  store.roundMainCode === 'OCT'
+                    ? index === 1
+                      ? 'border-bottom: 1px solid #c8d3db;'
+                      : ''
+                    : ''
+                "
+              >
+                <q-tab
+                  class="col-12"
+                  style="justify-content: left"
+                  :name="item.type"
+                  :label="item.lable"
+                  @click="changeTabType()"
+                />
+              </div>
+            </q-tabs>
+          </template>
+          <template v-slot:after>
+            <q-tab-panels
+              v-model="store.tabType"
+              animated
+              swipeable
+              vertical
+              transition-prev="jump-up"
+              transition-next="jump-up"
+            >
+              <q-tab-panel
+                class="q-pa-md"
+                v-for="(item, index) in itemsTabType"
+                :key="index"
+                :name="item.type"
+              >
+                <TableTabType1
+                  v-if="index === 0"
+                  :rows="rows"
+                  v-model:maxPage="maxPage"
+                  v-model:formFilter="formFilter"
+                  :fetchDataTable="fetchDataPeriodNew"
+                  :total="total"
+                />
+                <TableTabType2
+                  v-else
+                  :rows="rows"
+                  v-model:maxPage="maxPage"
+                  v-model:formFilter="formFilter"
+                  :fetchDataTable="fetchDataPeriodNew"
+                  :total="total"
+                />
+              </q-tab-panel>
+            </q-tab-panels>
+          </template>
+        </q-splitter>
+      </q-card>
+    </q-tab-panel>
+  </q-tab-panels>
+
+  <DialogInfoCriteria v-model:modal="modalDialogInfoCriteria" />
+</template>
+
+<style scoped>
+.my-card {
+  width: 100%;
+  max-width: 200px;
+}
+
+.q-tabs--vertical .q-tab {
+  padding: 0 20px;
+}
+</style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
new file mode 100644
index 000000000..734a5ad74
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
@@ -0,0 +1,493 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
+
+/** importComponents*/
+import DialogAddPerson from "@/modules/13_salary/components/SalaryEmployeeLists//DialogAddPerson.vue";
+import DialogFormEdit from "@/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue";
+import DialogMoveGroup from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue";
+import DialogMoveLevel from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
+/** props*/
+const formFilter = defineModel<DataFilter>("formFilter", { required: true });
+const maxPage = defineModel<Number>("maxPage", { required: true });
+const props = defineProps({
+  rows: { type: Array },
+  fetchDataTable: {
+    type: Function,
+  },
+  total: {
+    type: Number,
+  },
+});
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: false,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: false,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: false,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือนฐาน",
+    sortable: false,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "amountUse",
+    align: "left",
+    label: "จำนวนเงินที่ใช้เลื่อน",
+    sortable: false,
+    field: "amountUse",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินเดือนหลังเลื่อน",
+    sortable: false,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isRetired",
+    align: "center",
+    label: "เกษียณอายุ",
+    sortable: false,
+    field: "isRetired",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "posNo",
+  "fullName",
+  "position",
+  "posType",
+  "posLevel",
+  "posExecutive",
+  "amount",
+  "amountUse",
+  "positionSalaryAmount",
+  "isRetired",
+]);
+
+/** modalDialog*/
+const modalDialogAddPerson = ref<boolean>(false);
+const modalDialogForm = ref<boolean>(false);
+const modalDialogMoveGroup = ref<boolean>(false);
+const modalDialogMoveLeve = ref<boolean>(false);
+
+const profileId = ref<string>("");
+const amount = ref<number>(0);
+
+/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}
+
+/**
+ * function openPopup แก้ไขเงินเดือน
+ * @param id profileId
+ * @param amountSalary จำนวนเงินเดือน
+ *
+ */
+function onClickEdit(id: string, amountSalary: number) {
+  profileId.value = id;
+  amount.value = amountSalary;
+  modalDialogForm.value = !modalDialogForm.value;
+}
+
+/**
+ * function openPopup ย้ายกลุ่ม
+ * @param id profileId
+ *
+ */
+function onClickMovieGroup(id: string) {
+  profileId.value = id;
+  modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
+}
+
+const typeLevel = ref<string>("");
+const isReserve = ref<boolean>(false);
+/**
+ * function openPopup ย้ายกขั้น
+ * @param id profileId
+ *
+ */
+function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
+  profileId.value = id;
+  modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
+  typeLevel.value = typeVal;
+  isReserve.value = isReserveVal;
+}
+
+/**
+ * function ยืนยันการลบรายชื่อ
+ *  @param id profileId
+ */
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.salaryListPeriodProfileById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        props.fetchDataTable?.();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** function updatePageTable*/
+function updatePagePagination() {
+  props.fetchDataTable?.();
+}
+
+/** function updatePageSizeTable*/
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.value.page = 1;
+  formFilter.value.pageSize = newPagination.rowsPerPage;
+}
+
+/** function ค้นหาข้อมูล Table*/
+function searchData() {
+  formFilter.value.page = 1;
+  props.fetchDataTable?.();
+}
+
+/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
+watch(
+  () => formFilter.value.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+<template>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn
+      v-if="!store.isClosedRound"
+      flat
+      round
+      dense
+      icon="add"
+      @click="onClickAddPerson"
+    >
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      debounce="300"
+      outlined
+      v-model="formFilter.keyword"
+      placeholder="ค้นหา"
+      @keydown.enter.prevent="searchData"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <q-select
+      for="#select"
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+    />
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
+    :rows="props.rows"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :visible-columns="visibleColumns"
+    @update:pagination="updatePageSizePagination"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width></q-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.name"
+          :props="props"
+          :class="
+            store.tabType !== 'RETIRE'
+              ? props.row.isNext == true
+                ? 'text-red'
+                : ''
+              : ''
+          "
+        >
+          <div v-if="col.name === 'no'">
+            {{
+              (formFilter.page - 1) * formFilter.pageSize +
+              props.rowIndex +
+              1 +
+              (store.tabType == "FULL" && props.row.isReserve == true
+                ? " (สำรอง)"
+                : "")
+            }}
+          </div>
+          <div v-else-if="col.name === 'posNo'">
+            {{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
+          </div>
+          <div v-else-if="col.name === 'fullName'">
+            {{
+              `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
+            }}
+          </div>
+          <div v-else-if="col.name === 'amount'">
+            {{
+              props.row.amount !== null ? props.row.amount.toLocaleString() : ""
+            }}
+          </div>
+          <div v-else-if="col.name === 'amountUse'">
+            {{
+              props.row.amountUse !== null
+                ? props.row.amountUse.toLocaleString()
+                : ""
+            }}
+            {{
+              props.row.amountSpecial > 0
+                ? `(${props.row.amountSpecial.toLocaleString()})`
+                : ""
+            }}
+          </div>
+          <div v-else-if="col.name === 'positionSalaryAmount'">
+            {{
+              props.row.positionSalaryAmount !== null
+                ? props.row.positionSalaryAmount.toLocaleString()
+                : ""
+            }}
+            {{
+              props.row.amountSpecial > 0
+                ? `(${props.row.amountSpecial.toLocaleString()})`
+                : ""
+            }}
+          </div>
+
+          <div
+            v-else-if="
+              col.name === 'isRetired' && store.roundMainCode === 'OCT'
+            "
+          >
+            <q-icon
+              name="check"
+              color="primary"
+              size="24px"
+              v-if="props.row.isRetired"
+            />
+          </div>
+
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td>
+          <q-btn
+            v-if="!store.isClosedRound"
+            flat
+            dense
+            icon="mdi-dots-vertical"
+            class="q-pa-none q-ml-xs"
+            color="grey-13"
+            size="12px"
+          >
+            <q-menu>
+              <q-list dense style="min-width: 150px">
+                <q-item
+                  v-for="(item, index) in store.itemMenu.filter((x:any)=>x.type != 'properties')"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="
+                    item.type === 'edit'
+                      ? onClickEdit(props.row.id, props.row.amount)
+                      : item.type === 'moveGroup'
+                      ? onClickMovieGroup(props.row.id)
+                      : item.type === 'moveLevel'
+                      ? onClickMoveLevel(
+                          props.row.id,
+                          props.row.type,
+                          props.row.isReserve
+                        )
+                      : item.type === 'delete'
+                      ? onClickDelete(props.row.id)
+                      : null
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        :color="item.color"
+                        size="17px"
+                        :name="item.icon"
+                      />
+                      <div class="q-pl-md">{{ item.label }}</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.total }} รายการ
+      <q-pagination
+        v-model="formFilter.page"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+        @update:model-value="updatePagePagination()"
+      ></q-pagination>
+    </template>
+  </d-table>
+
+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
+  <DialogFormEdit
+    v-model:modal="modalDialogForm"
+    v-model:profileId="profileId"
+    v-model:amount="amount"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveGroup
+    v-model:modal="modalDialogMoveGroup"
+    v-model:profileId="profileId"
+    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveLevel
+    :typeLevel="typeLevel"
+    :isReserve="isReserve"
+    v-model:modal="modalDialogMoveLeve"
+    v-model:profileId="profileId"
+    :fetchData="props.fetchDataTable"
+    :type="store.tabType"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
new file mode 100644
index 000000000..bc2db8d56
--- /dev/null
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue
@@ -0,0 +1,589 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
+
+/** importComponents*/
+import DialogAddPerson from "@/modules/13_salary/components/SalaryEmployeeLists//DialogAddPerson.vue";
+import DialogFormEdit from "@/modules/13_salary/components/SalaryEmployeeLists/DialogFormEdit.vue";
+import DialogMoveGroup from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveGroup.vue";
+import DialogMoveLevel from "@/modules/13_salary/components/SalaryEmployeeLists/DialogMoveLevel.vue";
+import DialogProperties from "@/modules/13_salary/components/SalaryEmployeeLists/DialogProperties.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryEmployeeListSDataStore();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
+/** Props*/
+const formFilter = defineModel<DataFilter>("formFilter", { required: true });
+const maxPage = defineModel<Number>("maxPage", { required: true });
+const props = defineProps({
+  rows: { type: Array },
+  fetchDataTable: {
+    type: Function,
+  },
+  maxPage: {
+    type: Number,
+  },
+  total: {
+    type: Number,
+  },
+});
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    field: "position",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    field: "posLevel",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    field: "amount",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "result",
+    align: "center",
+    label: "ผลการประเมินฯ",
+    sortable: false,
+    field: "result",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "duration",
+    align: "center",
+    label: "ระยะเวลาการปฏิบัติราชการในรอบครึ่งปี",
+    sortable: false,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isPunish",
+    align: "center",
+    label: "ไม่ถูกลงโทษทางวินัย",
+    sortable: false,
+    field: "isPunish",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isSuspension",
+    align: "center",
+    label: "ไม่ถูกพักราชการ",
+    sortable: false,
+    field: "isSuspension",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isAbsent",
+    align: "center",
+    label: "ไม่ขาดราชการ",
+    sortable: false,
+    field: "isAbsent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isLeave",
+    align: "center",
+    label: "วันลาไม่เกิน",
+    sortable: false,
+    field: "isLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "posType",
+  "posExecutive",
+  "position",
+  "posLevel",
+  "amount",
+  "organization",
+  "result",
+  "duration",
+  "isPunish",
+  "isSuspension",
+  "isAbsent",
+  "isLeave",
+]);
+
+/** modalDialog*/
+const modalDialogAddPerson = ref<boolean>(false);
+const modalDialogForm = ref<boolean>(false);
+const modalDialogMoveGroup = ref<boolean>(false);
+const modalDialogMoveLeve = ref<boolean>(false);
+const modalDialogProperties = ref<boolean>(false);
+
+/** ตัวแปร*/
+const profileId = ref<string>("");
+const amount = ref<number>(0);
+const isPunish = ref<boolean>(false)
+const isSuspension = ref<boolean>(false)
+const isAbsent = ref<boolean>(false)
+const isLeave = ref<boolean>(false)
+/**
+ * function ยืนยันการลบรายชื่อ
+ *  @param id profileId
+ */
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.salaryListPeriodProfileById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        props.fetchDataTable?.();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}
+
+/**
+ * function openPopup แก้ไขเงินเดือน
+ * @param id profileId
+ * @param amountSalary จำนวนเงินเดือน
+ *
+ */
+function onClickEdit(id: string, amountSalary: number) {
+  profileId.value = id;
+  amount.value = amountSalary;
+  modalDialogForm.value = !modalDialogForm.value;
+}
+
+/**
+ * function openPopup ย้ายกลุ่ม
+ * @param id profileId
+ *
+ */
+function onClickMovieGroup(id: string) {
+  profileId.value = id;
+  modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
+}
+
+const typeLevel = ref<string>("");
+const isReserve = ref<boolean>(false);
+/**
+ * function openPopup ย้ายกขั้น
+ * @param id profileId
+ *
+ */
+function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
+  profileId.value = id;
+  modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
+  typeLevel.value = typeVal;
+  isReserve.value = isReserveVal;
+}
+
+/** function updatePageTable*/
+function updatePagePagination() {
+  props.fetchDataTable?.();
+}
+
+/** function updatePageSizeTable*/
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.value.page = 1;
+  formFilter.value.pageSize = newPagination.rowsPerPage;
+}
+
+/** function ค้นหาข้อมูล Table*/
+function searchData() {
+  formFilter.value.page = 1;
+  props.fetchDataTable?.();
+}
+
+function onProperties(data:any){
+  console.log(data)
+  modalDialogProperties.value = true
+  profileId.value = data.id
+  isPunish.value = data.isPunish
+  isSuspension.value = data.isSuspension
+  isAbsent.value = data.isAbsent
+  isLeave.value = data.isLeave
+}
+/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
+watch(
+  () => formFilter.value.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+
+<template>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn           v-if="!store.isClosedRound" flat round dense icon="add" @click="onClickAddPerson">
+      <q-tooltip>เพิ่ม </q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      debounce="300"
+      outlined
+      v-model="formFilter.keyword"
+      placeholder="ค้นหา"
+      @keydown.enter.prevent="searchData"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <q-select
+      for="#select"
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+    />
+  </q-toolbar>
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="props.rows"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :visible-columns="visibleColumns"
+    @update:pagination="updatePageSizePagination"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name === 'no'">
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
+          </div>
+          <div v-else-if="col.name === 'fullName'">
+            {{
+              `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
+            }}
+          </div>
+          <div v-else-if="col.name == 'organization'" class="table_ellipsis">
+            <div
+              v-if="
+                props.row.child4 === null &&
+                props.row.child3 === null &&
+                props.row.child2 === null &&
+                props.row.child1 === null &&
+                props.row.root === null
+              "
+            >
+              -
+            </div>
+            {{
+              `${props.row.child4 ? props.row.child4 + "/" : ""}${
+                props.row.child3 ? props.row.child3 + "/" : ""
+              }${props.row.child2 ? props.row.child2 + "-" : ""}${
+                props.row.child1 ? props.row.child1 + "/" : ""
+              }${props.row.root ? props.row.root : ""}`
+            }}
+          </div>
+          <!-- <div v-else-if="col.name === 'isResult'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isResult"
+            />
+          </div>
+          <div v-else-if="col.name === 'isDuration'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isDuration"
+            />
+          </div>
+          <div v-else-if="col.name === 'isPunish'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isPunish"
+            />
+          </div>
+          <div v-else-if="col.name === 'isRetired'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isRetired"
+            />
+          </div>
+          <div v-else-if="col.name === 'isRetired2'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isRetired2"
+              false
+            />
+          </div> -->
+          <div v-else-if="col.name == 'isPunish'">
+            <q-icon
+              v-if="props.row.isPunish !== null"
+              :name="props.row.isPunish ? 'done' : 'close'"
+              :color="props.row.isPunish ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isPunish == null">
+              {{ props.row.isPunish == null ? '-':''}}
+            </div>
+          </div>
+          <div v-else-if="col.name == 'isSuspension'">
+            <q-icon
+              v-if="props.row.isSuspension !== null"
+              :name="props.row.isSuspension ? 'done' : 'close'"
+              :color="props.row.isSuspension ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isSuspension == null">
+              {{ props.row.isSuspension == null ? '-':''}}
+            </div>
+          </div>
+          <div v-else-if="col.name == 'isAbsent'">
+            <q-icon
+              v-if="props.row.isAbsent !== null"
+              :name="props.row.isAbsent ? 'done' : 'close'"
+              :color="props.row.isAbsent ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isAbsent == null">
+              {{ props.row.isAbsent == null ? '-':''}}
+            </div>
+          </div>
+          <div v-else-if="col.name == 'amount'">
+              {{Number(props.row.amount).toLocaleString()}}
+            </div>
+          <div v-else-if="col.name == 'isLeave'">
+            <q-icon
+              v-if="props.row.isLeave !== null"
+              :name="props.row.isLeave ? 'done' : 'close'"
+              :color="props.row.isLeave ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isLeave == null">
+              {{ props.row.isLeave == null ? '-':''}}
+            </div>
+          
+          </div>
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td>
+          <q-btn
+          v-if="!store.isClosedRound"
+            flat
+            dense
+            icon="mdi-dots-vertical"
+            class="q-pa-none q-ml-xs"
+            color="grey-13"
+            size="12px"
+          >
+            <q-menu>
+              <q-list dense style="min-width: 150px">
+                <q-item
+                  v-for="(item, index) in store.itemMenu"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="
+                    item.type === 'edit'
+                      ? onClickEdit(props.row.id, props.row.amount)
+                      : item.type === 'moveGroup'
+                      ? onClickMovieGroup(props.row.id)
+                      : item.type === 'moveLevel'
+                      ? onClickMoveLevel(
+                          props.row.id,
+                          props.row.type,
+                          props.row.isReserve
+                        )
+                      : item.type === 'delete'
+                      ? onClickDelete(props.row.id)
+                      : item.type === 'properties'
+                      ? onProperties(props.row)
+                      : null
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        :color="item.color"
+                        size="17px"
+                        :name="item.icon"
+                      />
+                      <div class="q-pl-md">{{ item.label }}</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.total }} รายการ
+      <q-pagination
+        v-model="formFilter.page"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+        @update:model-value="updatePagePagination()"
+      ></q-pagination>
+    </template>
+  </d-table>
+
+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
+  <DialogFormEdit
+    v-model:modal="modalDialogForm"
+    v-model:profileId="profileId"
+    v-model:amount="amount"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveGroup
+    v-model:modal="modalDialogMoveGroup"
+    v-model:profileId="profileId"
+    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveLevel
+    :typeLevel="typeLevel"
+    :isReserve="isReserve"
+    v-model:modal="modalDialogMoveLeve"
+    v-model:profileId="profileId"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogProperties
+  v-model:modal="modalDialogProperties"
+  v-model:id="profileId"
+  :is-punish="isPunish"
+  :is-suspension="isSuspension"
+  :is-absent="isAbsent"
+  :is-leave="isLeave"
+  :fetch-data="props.fetchDataTable"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/Dashboard.vue b/src/modules/13_salary/components/SalaryLists/Dashboard.vue
index e7c8e6496..ec1fe7073 100644
--- a/src/modules/13_salary/components/SalaryLists/Dashboard.vue
+++ b/src/modules/13_salary/components/SalaryLists/Dashboard.vue
@@ -1,4 +1,4 @@
-<template>
-<q-card class="q-pa-sm"> แสดง dashboard สำหรับ สกจ. </q-card>
-
-</template>
+<template>
+<q-card class="q-pa-sm"> แสดง dashboard สำหรับ สกจ. </q-card>
+
+</template>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
index 6aaeefa4d..509466ed6 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
@@ -1,316 +1,316 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import { useQuasar } from "quasar";
-import config from "@/app.config";
-import http from "@/plugins/http";
-
-/** importType*/
-import type { QTableProps } from "quasar";
-import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
-import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
-import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
-import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
-
-/** importComponents*/
-import Header from "@/components/DialogHeader.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-
-/** use*/
-const $q = useQuasar();
-const store = useSalaryListSDataStore();
-const { messageError, showLoader, hideLoader, dialogConfirm, success } =
-  useCounterMixin();
-
-/** props*/
-const modal = defineModel<boolean>("modal", { required: true });
-const props = defineProps({
-  fetchData: {
-    type: Function,
-  },
-});
-
-/** Table*/
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullName",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    field: "fullName",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posType",
-    align: "left",
-    label: "ประเภทตำเเหน่ง",
-    sortable: true,
-    field: "posType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posLevel",
-    align: "left",
-    label: "ระดับตำเเหน่ง",
-    sortable: true,
-    field: "posLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const rows = ref<DataPerson[]>([]);
-
-/** ข้อมูุลค้นหา*/
-const formFilter = reactive<DataFilterPerson>({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-  rootId: "",
-  year: 0,
-  period: "",
-});
-const maxPage = ref<number>(1);
-
-/** function close popup*/
-function closeModal() {
-  modal.value = false;
-  formFilter.page = 1;
-  formFilter.keyword = "";
-}
-
-/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
-function fetchListPerson() {
-  showLoader();
-  formFilter.rootId = store.rootId;
-  formFilter.period = store.roundMainCode;
-  formFilter.year = store.roundYear;
-  http
-    .post(config.API.salaryListPerson, formFilter)
-    .then((res) => {
-      const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      rows.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-      closeModal();
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * function ยืนยันการเพิ่มคนเลื่อนเงินเดือน
- * @param data ข้อมูลคนที่เพิ่ม
- */
-function onClickAddPerson(data: DataPerson) {
-  const body: DataPersonReq = {
-    id: store.groupId,
-    type: store.tabType,
-    ...data,
-  };
-
-  dialogConfirm(
-    $q,
-    () => {
-      http
-        .post(config.API.salaryPeriodProfile, body)
-        .then(() => {
-          props.fetchData?.();
-          success($q, "เพื่มรายชื่อสำเร็จ");
-          closeModal();
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการเพิ่มรายชื่อ",
-    "ต้องการยืนยันการเพิ่มรายชื่อนี้ใช่หรือไม่?"
-  );
-}
-
-/** function updatePage*/
-async function updatePagePagination() {
-  fetchListPerson();
-}
-
-/** function updatePageSize*/
-function updatePageSizePagination(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-/** function ค้นหาข้อมูลตาม keyword*/
-function searchData() {
-  formFilter.page = 1;
-  fetchListPerson();
-}
-
-/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
-watch(
-  () => modal.value,
-  () => {
-    if (modal.value) {
-      fetchListPerson();
-    }
-  }
-);
-
-/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
-watch(
-  () => formFilter.pageSize,
-  () => {
-    updatePagePagination();
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="max-width: 100vw">
-      <Header :tittle="'เพิ่มคนเลื่อนเงินเดือน'" :close="closeModal" />
-      <q-separator />
-
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="row q-col-gutter-sm">
-          <div class="col-12">
-            <q-input
-              borderless
-              dense
-              debounce="300"
-              outlined
-              placeholder="ค้นหา"
-              v-model="formFilter.keyword"
-              @keydown.enter.prevent="searchData"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-          </div>
-          <div class="col-12">
-            <d-table
-              ref="table"
-              :columns="columns"
-              :rows="rows"
-              row-key="id"
-              flat
-              bordered
-              :paging="true"
-              dense
-              :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePageSizePagination"
-            >
-              <template v-slot:header="props">
-                <q-tr :props="props">
-                  <q-th
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
-                    <span class="text-weight-medium">{{ col.label }}</span>
-                  </q-th>
-                  <q-th auto-width></q-th>
-                </q-tr>
-              </template>
-              <template v-slot:body="props">
-                <q-tr :props="props" class="cursor-pointer">
-                  <q-td
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
-                    <div v-if="col.name === 'no'">
-                      {{
-                        (formFilter.page - 1) * formFilter.pageSize +
-                        props.rowIndex +
-                        1
-                      }}
-                    </div>
-                    <div v-else-if="col.name === 'fullName'">
-                      {{
-                        `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
-                      }}
-                    </div>
-                    <div v-else>
-                      {{ col.value ? col.value : "-" }}
-                    </div>
-                  </q-td>
-                  <q-td>
-                    <q-btn
-                      outline
-                      color="primary"
-                      label="เพิ่ม"
-                      @click="onClickAddPerson(props.row)"
-                    />
-                  </q-td>
-                </q-tr>
-              </template>
-              <template v-slot:pagination="scope">
-                <q-pagination
-                  v-model="formFilter.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(maxPage)"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  @update:model-value="updatePagePagination()"
-                ></q-pagination>
-              </template>
-            </d-table>
-          </div>
-        </div>
-      </q-card-section>
-      <q-separator />
-
-      <!-- <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          type="submit"
-          unelevated
-          dense
-          class="q-px-md items-center"
-          color="light-blue-10"
-          label="บันทึก"
-        />
-      </q-card-actions> -->
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilterPerson } from "@/modules/13_salary/interface/index/SalaryList";
+import type { DataPersonReq } from "@/modules/13_salary/interface/request/SalaryList";
+import type { DataPerson } from "@/modules/13_salary/interface/response/SalaryList";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryListSDataStore();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } =
+  useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+});
+
+/** Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำเเหน่ง",
+    sortable: true,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<DataPerson[]>([]);
+
+/** ข้อมูุลค้นหา*/
+const formFilter = reactive<DataFilterPerson>({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  rootId: "",
+  year: 0,
+  period: "",
+});
+const maxPage = ref<number>(1);
+
+/** function close popup*/
+function closeModal() {
+  modal.value = false;
+  formFilter.page = 1;
+  formFilter.keyword = "";
+}
+
+/** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
+function fetchListPerson() {
+  showLoader();
+  formFilter.rootId = store.rootId;
+  formFilter.period = store.roundMainCode;
+  formFilter.year = store.roundYear;
+  http
+    .post(config.API.salaryListPerson, formFilter)
+    .then((res) => {
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+      closeModal();
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ยืนยันการเพิ่มคนเลื่อนเงินเดือน
+ * @param data ข้อมูลคนที่เพิ่ม
+ */
+function onClickAddPerson(data: DataPerson) {
+  const body: DataPersonReq = {
+    id: store.groupId,
+    type: store.tabType,
+    ...data,
+  };
+
+  dialogConfirm(
+    $q,
+    () => {
+      http
+        .post(config.API.salaryPeriodProfile, body)
+        .then(() => {
+          props.fetchData?.();
+          success($q, "เพื่มรายชื่อสำเร็จ");
+          closeModal();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มรายชื่อ",
+    "ต้องการยืนยันการเพิ่มรายชื่อนี้ใช่หรือไม่?"
+  );
+}
+
+/** function updatePage*/
+async function updatePagePagination() {
+  fetchListPerson();
+}
+
+/** function updatePageSize*/
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** function ค้นหาข้อมูลตาม keyword*/
+function searchData() {
+  formFilter.page = 1;
+  fetchListPerson();
+}
+
+/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchListPerson();
+    }
+  }
+);
+
+/** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปลี่ยน PageSize*/
+watch(
+  () => formFilter.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="max-width: 100vw">
+      <Header :tittle="'เพิ่มคนเลื่อนเงินเดือน'" :close="closeModal" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              borderless
+              dense
+              debounce="300"
+              outlined
+              placeholder="ค้นหา"
+              v-model="formFilter.keyword"
+              @keydown.enter.prevent="searchData"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-12">
+            <d-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              @update:pagination="updatePageSizePagination"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                  <q-th auto-width></q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name === 'no'">
+                      {{
+                        (formFilter.page - 1) * formFilter.pageSize +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+                    <div v-else-if="col.name === 'fullName'">
+                      {{
+                        `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                  <q-td>
+                    <q-btn
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="onClickAddPerson(props.row)"
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="formFilter.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(maxPage)"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  @update:model-value="updatePagePagination()"
+                ></q-pagination>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <!-- <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center"
+          color="light-blue-10"
+          label="บันทึก"
+        />
+      </q-card-actions> -->
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue b/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
index 832096723..7a76453e0 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogFormEdit.vue
@@ -1,112 +1,112 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** importComponents*/
-import Header from "@/components/DialogHeader.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
-/** use*/
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { dialogConfirm, success, messageError } = mixin;
-
-/** props*/
-const modal = defineModel<boolean>("modal", { required: true });
-const amount = defineModel<number | null>("amount", { required: true });
-const profileId = defineModel<string>("profileId", { required: true });
-const props = defineProps({
-  fetchData: {
-    type: Function,
-  },
-});
-
-const amountRef = ref<any>();
-
-/** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  if (amountRef.value.validate()) {
-    onSubmit();
-  }
-}
-
-/** function ปืด Popup */
-function close() {
-  modal.value = false;
-  amount.value = null;
-}
-
-/** function ยืนยันการบันทึกข้อมูล*/
-function onSubmit() {
-  dialogConfirm($q, () => {
-    if (amount.value !== null) {
-      const amountString: string = amount.value.toString();
-      const body = {
-        profileId: profileId.value,
-        amount:
-          typeof amount.value === "number"
-            ? amount.value
-            : Number(amountString.replace(/,/g, "")),
-      };
-      http
-        .post(config.API.salaryPeriod() + `/change/amount`, body)
-        .then(() => {
-          success($q, "บันทึกข้อมูลสำเร็จ");
-          props.fetchData?.();
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          close();
-        });
-    }
-  });
-}
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 30%">
-      <Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
-      <q-separator />
-
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm">
-          <q-input
-            ref="amountRef"
-            dense
-            outlined
-            v-model="amount"
-            label="เงินเดือนฐาน"
-            mask="###,###,###,###"
-            reverse-fill-mask
-            :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
-            lazy-rules
-            hide-bottom-space
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn
-            type="submit"
-            for="#submitForm"
-            unelevated
-            dense
-            class="q-px-md items-center"
-            color="light-blue-10"
-            label="บันทึก"
-          />
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style lang="scss" scoped></style>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, success, messageError } = mixin;
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const amount = defineModel<number | null>("amount", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+});
+
+const amountRef = ref<any>();
+
+/** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  if (amountRef.value.validate()) {
+    onSubmit();
+  }
+}
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  amount.value = null;
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    if (amount.value !== null) {
+      const amountString: string = amount.value.toString();
+      const body = {
+        profileId: profileId.value,
+        amount:
+          typeof amount.value === "number"
+            ? amount.value
+            : Number(amountString.replace(/,/g, "")),
+      };
+      http
+        .post(config.API.salaryPeriod() + `/change/amount`, body)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          props.fetchData?.();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          close();
+        });
+    }
+  });
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`แก้ไขเงินเดือน`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-input
+            ref="amountRef"
+            dense
+            outlined
+            v-model="amount"
+            label="เงินเดือนฐาน"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนฐาน'}`]"
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue b/src/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue
index 7eeb283a2..53e97832d 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue
@@ -1,160 +1,160 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import Header from "@/components/DialogHeader.vue";
-
-const modal = defineModel<boolean>("modal", { required: true });
-const separator = ref<any>("cell");
-/** ปิด Dialog */
-function closeDialog() {
-  modal.value = !modal.value;
-}
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" full-width>
-      <Header
-        tittle="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
-        :close="closeDialog"
-      />
-      <q-separator />
-      <q-card-section>
-        <div class="q-pa-md">
-          <q-markup-table
-            :separator="separator"
-            flat
-            bordered
-            class="custom-header-table"
-          >
-            <thead>
-              <tr>
-                <th class="text-center">หลักเกณฑ์ในการพิจารณาเลื่อนขั้นฯ</th>
-                <th class="text-center">หนึ่งขั้น</th>
-                <th class="text-center">ครึ่งขั้น</th>
-                <th class="text-center">ไม่ได้รับการเลื่อนขั้น</th>
-              </tr>
-            </thead>
-            <tbody>
-              <!-- ข้อ1 -->
-              <tr>
-                <td class="text-left">1. ผลการประเมินผลการปฎิบัติราชการ</td>
-                <td class="text-center">
-                  ผลการประเมินผลในระดับดีเด่น<br />(90-100%)
-                </td>
-                <td class="text-center">
-                  ผลการประเมินเป็นที่ยอมรับได้<br />(60-89%)
-                </td>
-                <td class="text-center">
-                  ผลการประเมินต้องปรับปรุง<br />(ต่ำกว่า 60%)
-                </td>
-              </tr>
-
-              <!-- ข้อ2 -->
-              <tr>
-                <td class="text-left">
-                  2. ระยะเวลาการปฎิบัติราชการในรอบครึ่งปี
-                </td>
-                <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
-                <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
-                <td class="text-center">
-                  น้อยกว่า 4 เดือน<br />(บรรจุใหม่ ลาศึกษา ฝึกอบรมดูงาน)
-                </td>
-              </tr>
-
-              <!-- ข้อ3 -->
-              <tr>
-                <td class="text-left">3. การลงโทษทางวินัย</td>
-                <td class="text-center">
-                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
-                </td>
-                <td class="text-center">
-                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
-                </td>
-                <td class="text-center">
-                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
-                </td>
-              </tr>
-
-              <!-- ข้อ4 -->
-              <tr>
-                <td class="text-left">4. พักราชการ</td>
-                <td class="text-center">ไม่ถูกสั่งพักราชการ</td>
-                <td class="text-center">
-                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
-                </td>
-                <td class="text-center">
-                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
-                </td>
-              </tr>
-
-              <!-- ข้อ5 -->
-              <tr>
-                <td class="text-left">5. ขาดราชการ</td>
-                <td class="text-center">ไม่ขาดราชการ</td>
-                <td class="text-center">ไม่ขาดราชการ</td>
-                <td class="text-center">ไม่ขาดราชการ</td>
-              </tr>
-
-              <!-- ข้อ6 -->
-              <tr class="vertical-top">
-                <td class="text-left">6. วันลา</td>
-                <td class="text-left">
-                  <p class="q-mb-none txt-under">
-                    ไม่เกิน 5 ครั้ง 23 วัน<br />สายไม่เกิน 5 ครั้ง
-                  </p>
-                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
-                  <p class="text-bold q-mb-none">ยกเว้น</p>
-                  <p class="q-mb-none">
-                    - ลาอุปสมบท
-                    <br />
-                    - ลาคลอดบุตร (ไม่เกิน 90 วัน)
-                    <br />
-                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
-                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
-                  </p>
-                </td>
-                <td class="text-left">
-                  <p class="txt-under q-mb-none">
-                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
-                  </p>
-                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
-                  <p class="text-bold q-mb-none">ยกเว้น</p>
-                  <p class="q-mb-none">
-                    - ลาอุปสมบท
-                    <br />
-                    - ลาคลอดบุตร (ไม่เกิน 90 วัน)
-                    <br />
-                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
-                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
-                  </p>
-                </td>
-                <td class="text-left">
-                  <p class="txt-under q-mb-none">
-                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
-                  </p>
-                  <p>(นับเฉพาะการลาป่วยลากิจ)</p>
-                  <br />
-                  <br />
-                  <p class="q-mb-none">
-                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
-                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
-                  </p>
-                </td>
-              </tr>
-            </tbody>
-          </q-markup-table>
-        </div>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style lang="scss" scoped>
-.txt-under {
-  text-decoration: underline;
-}
-
-.q-table th {
-  font-size: 14px !important;
-}
-</style>
+<script setup lang="ts">
+import { ref } from "vue";
+import Header from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const separator = ref<any>("cell");
+/** ปิด Dialog */
+function closeDialog() {
+  modal.value = !modal.value;
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" full-width>
+      <Header
+        tittle="หลักเกณฑ์การพิจารณาเลื่อนขั้นเงินข้าราชการ"
+        :close="closeDialog"
+      />
+      <q-separator />
+      <q-card-section>
+        <div class="q-pa-md">
+          <q-markup-table
+            :separator="separator"
+            flat
+            bordered
+            class="custom-header-table"
+          >
+            <thead>
+              <tr>
+                <th class="text-center">หลักเกณฑ์ในการพิจารณาเลื่อนขั้นฯ</th>
+                <th class="text-center">หนึ่งขั้น</th>
+                <th class="text-center">ครึ่งขั้น</th>
+                <th class="text-center">ไม่ได้รับการเลื่อนขั้น</th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- ข้อ1 -->
+              <tr>
+                <td class="text-left">1. ผลการประเมินผลการปฎิบัติราชการ</td>
+                <td class="text-center">
+                  ผลการประเมินผลในระดับดีเด่น<br />(90-100%)
+                </td>
+                <td class="text-center">
+                  ผลการประเมินเป็นที่ยอมรับได้<br />(60-89%)
+                </td>
+                <td class="text-center">
+                  ผลการประเมินต้องปรับปรุง<br />(ต่ำกว่า 60%)
+                </td>
+              </tr>
+
+              <!-- ข้อ2 -->
+              <tr>
+                <td class="text-left">
+                  2. ระยะเวลาการปฎิบัติราชการในรอบครึ่งปี
+                </td>
+                <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
+                <td class="text-center">ไม่น้อยกว่า 4 เดือน</td>
+                <td class="text-center">
+                  น้อยกว่า 4 เดือน<br />(บรรจุใหม่ ลาศึกษา ฝึกอบรมดูงาน)
+                </td>
+              </tr>
+
+              <!-- ข้อ3 -->
+              <tr>
+                <td class="text-left">3. การลงโทษทางวินัย</td>
+                <td class="text-center">
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
+                </td>
+                <td class="text-center">
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
+                </td>
+                <td class="text-center">
+                  ถูกสั่งลงโทษไม่หนักกว่า<br />ภาคทัณฑ์
+                </td>
+              </tr>
+
+              <!-- ข้อ4 -->
+              <tr>
+                <td class="text-left">4. พักราชการ</td>
+                <td class="text-center">ไม่ถูกสั่งพักราชการ</td>
+                <td class="text-center">
+                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
+                </td>
+                <td class="text-center">
+                  ถูกสั่งพักราชการ<br />ไม่เกิน 2 เดือน
+                </td>
+              </tr>
+
+              <!-- ข้อ5 -->
+              <tr>
+                <td class="text-left">5. ขาดราชการ</td>
+                <td class="text-center">ไม่ขาดราชการ</td>
+                <td class="text-center">ไม่ขาดราชการ</td>
+                <td class="text-center">ไม่ขาดราชการ</td>
+              </tr>
+
+              <!-- ข้อ6 -->
+              <tr class="vertical-top">
+                <td class="text-left">6. วันลา</td>
+                <td class="text-left">
+                  <p class="q-mb-none txt-under">
+                    ไม่เกิน 5 ครั้ง 23 วัน<br />สายไม่เกิน 5 ครั้ง
+                  </p>
+                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
+                  <p class="text-bold q-mb-none">ยกเว้น</p>
+                  <p class="q-mb-none">
+                    - ลาอุปสมบท
+                    <br />
+                    - ลาคลอดบุตร (ไม่เกิน 90 วัน)
+                    <br />
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
+                </td>
+                <td class="text-left">
+                  <p class="txt-under q-mb-none">
+                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
+                  </p>
+                  <p class="q-mb-none">(นับเฉพาะการลาป่วยลากิจ)</p>
+                  <p class="text-bold q-mb-none">ยกเว้น</p>
+                  <p class="q-mb-none">
+                    - ลาอุปสมบท
+                    <br />
+                    - ลาคลอดบุตร (ไม่เกิน 90 วัน)
+                    <br />
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
+                </td>
+                <td class="text-left">
+                  <p class="txt-under q-mb-none">
+                    ไม่เกิน 8 ครั้ง 23 วัน<br />สายไม่เกิน 23 ครั้ง
+                  </p>
+                  <p>(นับเฉพาะการลาป่วยลากิจ)</p>
+                  <br />
+                  <br />
+                  <p class="q-mb-none">
+                    * กรณีลาป่วยซึ่งจำเป็นต้องรักษาตัวเป็นเวลานาน<br />ไม่ว่าคราวเดียวหรือหลายคราว
+                    รวมกัน<span class="txt-under">ไม่เกิน</span> 60 วันทำการ
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </q-markup-table>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.txt-under {
+  text-decoration: underline;
+}
+
+.q-table th {
+  font-size: 14px !important;
+}
+</style>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue b/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
index f9cba5cab..a1118830f 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue
@@ -1,135 +1,135 @@
-<script setup lang="ts">
-import { ref, defineModel, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** importComponents*/
-import Header from "@/components/DialogHeader.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-
-/** use*/
-const $q = useQuasar();
-const store = useSalaryListSDataStore();
-const { dialogConfirm, success, messageError, showLoader, hideLoader } =
-  useCounterMixin();
-
-/** props*/
-const modal = defineModel<boolean>("modal", { required: true });
-const profileId = defineModel<string>("profileId", { required: true });
-const props = defineProps({
-  group: { type: String },
-  fetchData: {
-    type: Function,
-  },
-});
-
-/** ตัวแปร*/
-const group = ref<string>("");
-const groupRef = ref<any>(null);
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  if (groupRef.value.validate()) {
-    onSubmit();
-  }
-}
-
-/** function ปืด Popup */
-function close() {
-  modal.value = false;
-  group.value = "";
-}
-
-/** function ยืนยันการบันทึกข้อมูล*/
-function onSubmit() {
-  dialogConfirm($q, () => {
-    showLoader();
-    const body = {
-      profileId: profileId.value,
-      groupId: group.value,
-    };
-    http
-      .post(config.API.salaryPeriod() + `/change/group`, body)
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        props.fetchData?.();
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-        close();
-      });
-  });
-}
-
-watch(
-  () => modal.value,
-  () => {
-    if (modal.value) {
-      group.value =
-        props.group === "กลุ่ม1" ? store.groupOp[1].id : store.groupOp[0].id;
-    }
-  }
-);
-
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 30%">
-      <Header :tittle="`ย้ายกลุ่ม`" :close="close" />
-      <q-separator />
-
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm">
-          <q-select
-            ref="groupRef"
-            :class="inputEdit(isReadonly)"
-            v-model="group"
-            label="กลุ่ม"
-            dense
-            outlined
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            :options="store.groupOp.filter((e) => e.name !== props.group)"
-            :rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
-            lazy-rules
-            hide-bottom-space
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
-        <q-card-actions align="right" class="bg-white text-teal">
-          <!-- <q-btn flat label="OK" v-close-popup /> -->
-          <q-btn
-            type="submit"
-            for="#submitForm"
-            unelevated
-            dense
-            class="q-px-md items-center"
-            color="light-blue-10"
-            label="บันทึก"
-          />
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style lang="scss" scoped></style>
+<script setup lang="ts">
+import { ref, defineModel, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryListSDataStore();
+const { dialogConfirm, success, messageError, showLoader, hideLoader } =
+  useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+const props = defineProps({
+  group: { type: String },
+  fetchData: {
+    type: Function,
+  },
+});
+
+/** ตัวแปร*/
+const group = ref<string>("");
+const groupRef = ref<any>(null);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  if (groupRef.value.validate()) {
+    onSubmit();
+  }
+}
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  group.value = "";
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+      profileId: profileId.value,
+      groupId: group.value,
+    };
+    http
+      .post(config.API.salaryPeriod() + `/change/group`, body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+        close();
+      });
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      group.value =
+        props.group === "กลุ่ม1" ? store.groupOp[1].id : store.groupOp[0].id;
+    }
+  }
+);
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`ย้ายกลุ่ม`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-select
+            ref="groupRef"
+            :class="inputEdit(isReadonly)"
+            v-model="group"
+            label="กลุ่ม"
+            dense
+            outlined
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="store.groupOp.filter((e) => e.name !== props.group)"
+            :rules="[(val) => !!val || `${'กรุณากลุ่ม'}`]"
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
index 13a558a61..b23ba22cd 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue
@@ -1,178 +1,178 @@
-<script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** importComponents*/
-import Header from "@/components/DialogHeader.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-
-/** use*/
-const $q = useQuasar();
-const store = useSalaryListSDataStore();
-const {
-  dialogConfirm,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogMessageNotify,
-} = useCounterMixin();
-
-/**porps*/
-const modal = defineModel<boolean>("modal", { required: true });
-const profileId = defineModel<string>("profileId", { required: true });
-const props = defineProps({
-  typeLevel: { type: String, required: true },
-  isReserve: { type: Boolean, required: true },
-  fetchData: {
-    type: Function,
-  },
-});
-
-const type = ref<string>("");
-const typeRef = ref<any>(null);
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const isChange = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
-const isReserve = ref<boolean>(false); // สำรองหรือไม่
-
-const typeRangeOps = computed(() => {
-  return store.roundMainCode == "OCT"
-    ? [
-        { id: "NONE", name: "ไม่ได้เลื่อน" },
-        { id: "HAFT", name: "0.5 ขั้น" },
-        { id: "FULL", name: "1 ขั้น" },
-        { id: "FULLHAFT", name: "1.5 ขั้น" },
-      ]
-    : [
-        { id: "NONE", name: "ไม่ได้เลื่อน" },
-        { id: "HAFT", name: "0.5 ขั้น" },
-        { id: "FULL", name: "1 ขั้น" },
-      ];
-});
-
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  if (typeRef.value.validate()) {
-    // if (
-    //   store.roundMainCode === "APR" &&
-    //   store.remaining === 0 &&
-    //   type.value === "FULL"
-    // ) {
-    //   dialogMessageNotify($q, "ไม่สามารถย้ายขั้นได้เนื่องจากโควตาคงเหลือไม่พอ");
-    // } else {
-    onSubmit();
-    // }
-  }
-}
-
-/** function ปืด Popup */
-function close() {
-  modal.value = false;
-  type.value = "";
-}
-
-/** function ยืนยันการบันทึกข้อมูล*/
-function onSubmit() {
-  dialogConfirm($q, () => {
-    showLoader();
-    const body = {
-      profileId: profileId.value,
-      type: type.value,
-      isReserve: isReserve.value,
-    };
-    http
-      .post(config.API.salaryPeriod() + `/change/type`, body)
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        props.fetchData?.();
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        close();
-        hideLoader();
-      });
-  });
-}
-
-watch(
-  () => modal.value,
-  () => {
-    type.value = props.typeLevel == 'PENDING' ? "" : props.typeLevel;
-    isReserve.value = props.isReserve;
-    isChange.value = false;
-  }
-);
-
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 30%">
-      <Header :tittle="`ย้ายขั้น`" :close="close" />
-      <q-separator />
-
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm">
-          <q-select
-            ref="typeRef"
-            :class="inputEdit(isReadonly)"
-            v-model="type"
-            label="เลื่อนขั้น"
-            dense
-            outlined
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            :options="typeRangeOps"
-            :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
-            lazy-rules
-            hide-bottom-space
-            @update:model-value="isChange = true"
-          />
-          <!-- :options="typeRangeOps.filter((e) => e.id !== store.tabType)" -->
-
-          <q-checkbox
-            v-if="type === 'FULL'"
-            keep-color
-            label="สำรอง"
-            dense
-            v-model="isReserve"
-            @update:model-value="isChange = true"
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
-        <q-card-actions align="right" class="bg-white text-teal">
-          <!-- <q-btn flat label="OK" v-close-popup /> -->
-          <q-btn
-            :disabled="!isChange"
-            type="submit"
-            for="#submitForm"
-            unelevated
-            dense
-            class="q-px-md items-center"
-            color="light-blue-10"
-            label="บันทึก"
-          />
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style lang="scss" scoped></style>
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryListSDataStore();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/**porps*/
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+const props = defineProps({
+  typeLevel: { type: String, required: true },
+  isReserve: { type: Boolean, required: true },
+  fetchData: {
+    type: Function,
+  },
+});
+
+const type = ref<string>("");
+const typeRef = ref<any>(null);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isChange = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
+const isReserve = ref<boolean>(false); // สำรองหรือไม่
+
+const typeRangeOps = computed(() => {
+  return store.roundMainCode == "OCT"
+    ? [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+        { id: "FULLHAFT", name: "1.5 ขั้น" },
+      ]
+    : [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+      ];
+});
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  if (typeRef.value.validate()) {
+    // if (
+    //   store.roundMainCode === "APR" &&
+    //   store.remaining === 0 &&
+    //   type.value === "FULL"
+    // ) {
+    //   dialogMessageNotify($q, "ไม่สามารถย้ายขั้นได้เนื่องจากโควตาคงเหลือไม่พอ");
+    // } else {
+    onSubmit();
+    // }
+  }
+}
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  type.value = "";
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+      profileId: profileId.value,
+      type: type.value,
+      isReserve: isReserve.value,
+    };
+    http
+      .post(config.API.salaryPeriod() + `/change/type`, body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        close();
+        hideLoader();
+      });
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    type.value = props.typeLevel == 'PENDING' ? "" : props.typeLevel;
+    isReserve.value = props.isReserve;
+    isChange.value = false;
+  }
+);
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header :tittle="`ย้ายขั้น`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-select
+            ref="typeRef"
+            :class="inputEdit(isReadonly)"
+            v-model="type"
+            label="เลื่อนขั้น"
+            dense
+            outlined
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="typeRangeOps"
+            :rules="[(val) => !!val || `${'กรุณาเลือก ขั้น'}`]"
+            lazy-rules
+            hide-bottom-space
+            @update:model-value="isChange = true"
+          />
+          <!-- :options="typeRangeOps.filter((e) => e.id !== store.tabType)" -->
+
+          <q-checkbox
+            v-if="type === 'FULL'"
+            keep-color
+            label="สำรอง"
+            dense
+            v-model="isReserve"
+            @update:model-value="isChange = true"
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            :disabled="!isChange"
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogProperties.vue b/src/modules/13_salary/components/SalaryLists/DialogProperties.vue
index e4dda3aab..9b5b70b0c 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogProperties.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogProperties.vue
@@ -1,176 +1,176 @@
-<script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** importComponents*/
-import Header from "@/components/DialogHeader.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-
-/** use*/
-const $q = useQuasar();
-const store = useSalaryListSDataStore();
-const {
-  dialogConfirm,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogMessageNotify,
-} = useCounterMixin();
-
-/**porps*/
-const modal = defineModel<boolean>("modal", { required: true });
-const profileId = defineModel<string>("id", { required: true });
-const props = defineProps({
-  isPunish: { type: Boolean, required: true },
-  isSuspension: { type: Boolean, required: true },
-  isAbsent: { type: Boolean, required: true },
-  isLeave: { type: Boolean, required: true },
-  fetchData: {
-    type: Function,
-  },
-});
-
-const type = ref<string>("");
-const typeRef = ref<any>(null);
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-
-const isPunish = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
-const isSuspension = ref<boolean>(false); // สำรองหรือไม่
-const isAbsent = ref<boolean>(false); // สำรองหรือไม่
-const isLeave = ref<boolean>(false); // สำรองหรือไม่
-
-const typeRangeOps = computed(() => {
-  return store.roundMainCode == "OCT"
-    ? [
-        { id: "NONE", name: "ไม่ได้เลื่อน" },
-        { id: "HAFT", name: "0.5 ขั้น" },
-        { id: "FULL", name: "1 ขั้น" },
-        { id: "FULLHAFT", name: "1.5 ขั้น" },
-      ]
-    : [
-        { id: "NONE", name: "ไม่ได้เลื่อน" },
-        { id: "HAFT", name: "0.5 ขั้น" },
-        { id: "FULL", name: "1 ขั้น" },
-      ];
-});
-
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-    onSubmit();
-  }
-
-
-/** function ปืด Popup */
-function close() {
-  modal.value = false;
-  type.value = "";
-}
-
-/** function ยืนยันการบันทึกข้อมูล*/
-function onSubmit() {
-  dialogConfirm($q, () => {
-    showLoader();
-    const body = {
-        isPunish: isPunish.value,
-        isSuspension: isSuspension.value,
-        isAbsent: isAbsent.value,
-        isLeave: isLeave.value,
-    };
-    http
-      .put(config.API.salaryProperty(profileId.value), body)
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        props.fetchData?.();
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        close();
-        hideLoader();
-      });
-  });
-}
-
-watch(
-  () => modal.value,
-  () => {
-    isPunish.value = props.isPunish;
-    isSuspension.value = props.isSuspension;
-    isAbsent.value = props.isAbsent;
-    isLeave.value = props.isLeave;
-  }
-);
-
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-</script>
-
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 20%">
-      <Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
-      <q-separator />
-
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm column">
-          <q-checkbox
-          toggle-indeterminate
-            keep-color
-            label="ไม่ถูกลงโทษทางวินัย"
-            dense
-            v-model="isPunish"
-          />
-          <q-checkbox
-          toggle-indeterminate
-            keep-color
-            label="ไม่ถูกพักราชการ"
-            dense
-            v-model="isSuspension"
-          />
-          <q-checkbox
-          toggle-indeterminate
-            keep-color
-            label="ไม่ขาดราชการ"
-            dense
-            v-model="isAbsent"
-          />
-          <q-checkbox
-          toggle-indeterminate
-            keep-color
-            label="วันลาไม่เกิน"
-            dense
-            v-model="isLeave"
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
-        <q-card-actions align="right" class="bg-white text-teal">
-          <!-- <q-btn flat label="OK" v-close-popup /> -->
-          <q-btn
-            type="submit"
-            for="#submitForm"
-            unelevated
-            dense
-            class="q-px-md items-center"
-            color="light-blue-10"
-            label="บันทึก"
-          />
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style lang="scss" scoped></style>
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryListSDataStore();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/**porps*/
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("id", { required: true });
+const props = defineProps({
+  isPunish: { type: Boolean, required: true },
+  isSuspension: { type: Boolean, required: true },
+  isAbsent: { type: Boolean, required: true },
+  isLeave: { type: Boolean, required: true },
+  fetchData: {
+    type: Function,
+  },
+});
+
+const type = ref<string>("");
+const typeRef = ref<any>(null);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
+const isPunish = ref<boolean>(false); // มีการแก้ไขข้อมูลหรือไม่
+const isSuspension = ref<boolean>(false); // สำรองหรือไม่
+const isAbsent = ref<boolean>(false); // สำรองหรือไม่
+const isLeave = ref<boolean>(false); // สำรองหรือไม่
+
+const typeRangeOps = computed(() => {
+  return store.roundMainCode == "OCT"
+    ? [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+        { id: "FULLHAFT", name: "1.5 ขั้น" },
+      ]
+    : [
+        { id: "NONE", name: "ไม่ได้เลื่อน" },
+        { id: "HAFT", name: "0.5 ขั้น" },
+        { id: "FULL", name: "1 ขั้น" },
+      ];
+});
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+    onSubmit();
+  }
+
+
+/** function ปืด Popup */
+function close() {
+  modal.value = false;
+  type.value = "";
+}
+
+/** function ยืนยันการบันทึกข้อมูล*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const body = {
+        isPunish: isPunish.value,
+        isSuspension: isSuspension.value,
+        isAbsent: isAbsent.value,
+        isLeave: isLeave.value,
+    };
+    http
+      .put(config.API.salaryProperty(profileId.value), body)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        close();
+        hideLoader();
+      });
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    isPunish.value = props.isPunish;
+    isSuspension.value = props.isSuspension;
+    isAbsent.value = props.isAbsent;
+    isLeave.value = props.isLeave;
+  }
+);
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 20%">
+      <Header :tittle="`แก้ไขคุณสมบัติ`" :close="close" />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm column">
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ถูกลงโทษทางวินัย"
+            dense
+            v-model="isPunish"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ถูกพักราชการ"
+            dense
+            v-model="isSuspension"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="ไม่ขาดราชการ"
+            dense
+            v-model="isAbsent"
+          />
+          <q-checkbox
+          toggle-indeterminate
+            keep-color
+            label="วันลาไม่เกิน"
+            dense
+            v-model="isLeave"
+          />
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
index 811975d4b..ce53168f7 100644
--- a/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
+++ b/src/modules/13_salary/components/SalaryLists/ProcessStep.vue
@@ -1,190 +1,190 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useQuasar } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const $q = useQuasar(); //ใช้ noti quasar
-const mixin = useCounterMixin();
-const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
-
-const sendStep = ref<number>(1);
-const fileUpload = ref<any>(null);
-const document = ref<string>("");
-/**
- * function อัปโหลดไฟล์เจ้าหน้าที่
- * @param event file
- */
-async function uploadFile(event: any) {
-  dialogConfirm(
-    $q,
-    async () => {
-      const selectedFile = event;
-      const formdata = new FormData();
-      formdata.append("Document", selectedFile);
-      // await http
-      //   .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
-      //   .then(async () => {
-      //     await fecthInsigniaByOc(
-      //       round.value,
-      //       DataStore.agency,
-      //       "officer",
-      //       tab.value
-      //     );
-      //     success($q, "อัปโหลดไฟล์สำเร็จ");
-      //     fileUpload.value = null;
-      //   })
-      //   .catch((err) => {
-      //     messageError($q, err);
-      //   }),
-    },
-    "ยืนยันการอัปโหลดไฟล์",
-    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
-  );
-}
-
-function saveReccommend() {
-  dialogConfirm(
-    $q,
-    async () => {
-      sendStep.value = sendStep.value + 1;
-      modalRecommend.value = false;
-    },
-    "ยืนยันการ" + titleRecommend.value,
-    "ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
-  );
-}
-
-function sendToDirector(msg: string) {
-  dialogConfirm(
-    $q,
-    async () => {
-      sendStep.value = sendStep.value == 3 ? 6 : sendStep.value + 1;
-    },
-    "ยืนยันการ" + msg,
-    "ต้องการยืนยันการ" + msg + "หรือไม่?"
-  );
-}
-
-const modalRecommend = ref<boolean>(false);
-const titleRecommend = ref<string>("");
-function sendAndRecommend(title: string) {
-  modalRecommend.value = true;
-  titleRecommend.value = title;
-}
-</script>
-
-<template>
-  <div class="row col-12 q-pa-md">
-    <q-toolbar>
-      <q-file
-        v-if="sendStep == 1"
-        bg-color="white"
-        clearable
-        outlined
-        dense
-        v-model="fileUpload"
-        accept=".pdf"
-        label="อัปโหลดไฟล์"
-      >
-        <template v-slot:prepend>
-          <q-icon color="light-blue" name="attach_file" />
-          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
-        </template>
-      </q-file>
-
-      <q-btn
-        flat
-        color="light-blue"
-        icon="upload"
-        @click="uploadFile(fileUpload)"
-        v-if="fileUpload !== null"
-      />
-      <div v-if="document">
-        <q-btn
-          dense
-          color="primary"
-          icon-right="mdi-download"
-          label="ดาวน์โหลดไฟล์"
-          outline
-          :href="document"
-          target="_blank"
-        >
-          <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
-        >
-      </div>
-
-      <q-toolbar-title>
-        <!-- Toolbar -->
-      </q-toolbar-title>
-      <div>
-        <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
-        <q-btn
-          v-if="sendStep == 1"
-          unelevated
-          color="public"
-          label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
-          @click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ')"
-        />
-
-        <!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
-        <q-btn
-          v-if="sendStep == 2"
-          unelevated
-          color="public"
-          label="ยืนยันและส่งเอกสารให้ สกจ."
-          @click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.')"
-        />
-
-        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
-        <q-btn
-          v-if="sendStep == 3"
-          unelevated
-          color="green"
-          label="ยืนยันการตรวจสอบ"
-          @click="sendToDirector('ยืนยันการตรวจสอบ')"
-        />
-
-        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
-        <q-btn
-          v-if="sendStep == 3"
-          class="q-ml-sm"
-          unelevated
-          color="warning"
-          label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
-          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
-        />
-
-        <!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
-        <q-btn
-          v-if="sendStep == 4"
-          unelevated
-          color="public"
-          label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
-          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
-        />
-
-        <q-btn
-          v-if="sendStep > 4"
-          unelevated
-          color="public"
-          label="ส่งไปออกคำสั่ง"
-        />
-      </div>
-    </q-toolbar>
-
-    <DialogPopupReason
-      v-model:modal="modalRecommend"
-      :title="titleRecommend"
-      label="คำแนะนำ"
-      :savaForm="saveReccommend"
-      textReport=""
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
+
+const sendStep = ref<number>(1);
+const fileUpload = ref<any>(null);
+const document = ref<string>("");
+/**
+ * function อัปโหลดไฟล์เจ้าหน้าที่
+ * @param event file
+ */
+async function uploadFile(event: any) {
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = event;
+      const formdata = new FormData();
+      formdata.append("Document", selectedFile);
+      // await http
+      //   .put(config.API.uploadfileOnlyInsignia(requestId.value), formdata)
+      //   .then(async () => {
+      //     await fecthInsigniaByOc(
+      //       round.value,
+      //       DataStore.agency,
+      //       "officer",
+      //       tab.value
+      //     );
+      //     success($q, "อัปโหลดไฟล์สำเร็จ");
+      //     fileUpload.value = null;
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   }),
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+function saveReccommend() {
+  dialogConfirm(
+    $q,
+    async () => {
+      sendStep.value = sendStep.value + 1;
+      modalRecommend.value = false;
+    },
+    "ยืนยันการ" + titleRecommend.value,
+    "ต้องการยืนยันการ" + titleRecommend.value + "หรือไม่?"
+  );
+}
+
+function sendToDirector(msg: string) {
+  dialogConfirm(
+    $q,
+    async () => {
+      sendStep.value = sendStep.value == 3 ? 6 : sendStep.value + 1;
+    },
+    "ยืนยันการ" + msg,
+    "ต้องการยืนยันการ" + msg + "หรือไม่?"
+  );
+}
+
+const modalRecommend = ref<boolean>(false);
+const titleRecommend = ref<string>("");
+function sendAndRecommend(title: string) {
+  modalRecommend.value = true;
+  titleRecommend.value = title;
+}
+</script>
+
+<template>
+  <div class="row col-12 q-pa-md">
+    <q-toolbar>
+      <q-file
+        v-if="sendStep == 1"
+        bg-color="white"
+        clearable
+        outlined
+        dense
+        v-model="fileUpload"
+        accept=".pdf"
+        label="อัปโหลดไฟล์"
+      >
+        <template v-slot:prepend>
+          <q-icon color="light-blue" name="attach_file" />
+          <q-tooltip>อัปโหลดไฟล์</q-tooltip>
+        </template>
+      </q-file>
+
+      <q-btn
+        flat
+        color="light-blue"
+        icon="upload"
+        @click="uploadFile(fileUpload)"
+        v-if="fileUpload !== null"
+      />
+      <div v-if="document">
+        <q-btn
+          dense
+          color="primary"
+          icon-right="mdi-download"
+          label="ดาวน์โหลดไฟล์"
+          outline
+          :href="document"
+          target="_blank"
+        >
+          <q-tooltip>ดาวน์โหลด</q-tooltip></q-btn
+        >
+      </div>
+
+      <q-toolbar-title>
+        <!-- Toolbar -->
+      </q-toolbar-title>
+      <div>
+        <!-- การเจ้าหน้าที่ของหน่วยงานส่งเอกสารให้ ผอ. หน่วยงานตรวจสอบ -->
+        <q-btn
+          v-if="sendStep == 1"
+          unelevated
+          color="public"
+          label="ส่งเอกสารให้ ผอ. ตรวจสอบ"
+          @click="sendToDirector('ส่งเอกสารให้ ผอ. ตรวจสอบ')"
+        />
+
+        <!-- ผอ. หน่วยงานทำการยืนยันและส่งให้ สกจ. -->
+        <q-btn
+          v-if="sendStep == 2"
+          unelevated
+          color="public"
+          label="ยืนยันและส่งเอกสารให้ สกจ."
+          @click="sendToDirector('ยืนยันและส่งเอกสารให้ สกจ.')"
+        />
+
+        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา ไม่มีปรับโควต้า -->
+        <q-btn
+          v-if="sendStep == 3"
+          unelevated
+          color="green"
+          label="ยืนยันการตรวจสอบ"
+          @click="sendToDirector('ยืนยันการตรวจสอบ')"
+        />
+
+        <!-- สกจ. ตรวจสอบเอกสารและข้อมูลรายการเงินเดือนที่แต่ละหน่วยงานส่งมา มีปรับโควต้า -->
+        <q-btn
+          v-if="sendStep == 3"
+          class="q-ml-sm"
+          unelevated
+          color="warning"
+          label="ส่งคำแนะนำให้ ผอ. ตรวจสอบ"
+          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
+        />
+
+        <!-- ผอ.หน่วยงานส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน -->
+        <q-btn
+          v-if="sendStep == 4"
+          unelevated
+          color="public"
+          label="ส่งคำแนะนำให้การเจ้าหน้าที่หน่วยงาน"
+          @click="sendAndRecommend('ส่งคำแนะนำให้ ผอ. ตรวจสอบ')"
+        />
+
+        <q-btn
+          v-if="sendStep > 4"
+          unelevated
+          color="public"
+          label="ส่งไปออกคำสั่ง"
+        />
+      </div>
+    </q-toolbar>
+
+    <DialogPopupReason
+      v-model:modal="modalRecommend"
+      :title="titleRecommend"
+      label="คำแนะนำ"
+      :savaForm="saveReccommend"
+      textReport=""
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
index 7e0f3a6db..bae1d8d94 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypeOther.vue
@@ -1,493 +1,493 @@
-<script setup lang="ts">
-import { ref, watch, computed } from "vue";
-import { useQuasar } from "quasar";
-import config from "@/app.config";
-import http from "@/plugins/http";
-
-/** importType*/
-import type { QTableProps } from "quasar";
-import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
-import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
-
-/** importComponents*/
-import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
-import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
-import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
-import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-
-/** use*/
-const $q = useQuasar();
-const store = useSalaryListSDataStore();
-const { dialogRemove, messageError, showLoader, hideLoader, success } =
-  useCounterMixin();
-
-/** props*/
-const formFilter = defineModel<DataFilter>("formFilter", { required: true });
-const maxPage = defineModel<Number>("maxPage", { required: true });
-const props = defineProps({
-  rows: { type: Array },
-  fetchDataTable: {
-    type: Function,
-  },
-  total: {
-    type: Number,
-  },
-});
-
-/** ข้อมูล Table*/
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullName",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    field: "fullName",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posType",
-    align: "left",
-    label: "ตำแหน่งประเภท",
-    sortable: false,
-    field: "posType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posLevel",
-    align: "left",
-    label: "ระดับตำแหน่ง",
-    sortable: false,
-    field: "posLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posExecutive",
-    align: "left",
-    label: "ตำแหน่งทางการบริหาร",
-    sortable: false,
-    field: "posExecutive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "amount",
-    align: "left",
-    label: "เงินเดือนฐาน",
-    sortable: false,
-    field: "amount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "amountUse",
-    align: "left",
-    label: "จำนวนเงินที่ใช้เลื่อน",
-    sortable: false,
-    field: "amountUse",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "positionSalaryAmount",
-    align: "left",
-    label: "เงินเดือนหลังเลื่อน",
-    sortable: false,
-    field: "positionSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "isRetired",
-    align: "center",
-    label: "เกษียณอายุ",
-    sortable: false,
-    field: "isRetired",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-const visibleColumns = ref<string[]>([
-  "no",
-  "posNo",
-  "fullName",
-  "position",
-  "posType",
-  "posLevel",
-  "posExecutive",
-  "amount",
-  "amountUse",
-  "positionSalaryAmount",
-  "isRetired",
-]);
-
-/** modalDialog*/
-const modalDialogAddPerson = ref<boolean>(false);
-const modalDialogForm = ref<boolean>(false);
-const modalDialogMoveGroup = ref<boolean>(false);
-const modalDialogMoveLeve = ref<boolean>(false);
-
-const profileId = ref<string>("");
-const amount = ref<number>(0);
-
-/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
-function onClickAddPerson() {
-  modalDialogAddPerson.value = !modalDialogAddPerson.value;
-}
-
-/**
- * function openPopup แก้ไขเงินเดือน
- * @param id profileId
- * @param amountSalary จำนวนเงินเดือน
- *
- */
-function onClickEdit(id: string, amountSalary: number) {
-  profileId.value = id;
-  amount.value = amountSalary;
-  modalDialogForm.value = !modalDialogForm.value;
-}
-
-/**
- * function openPopup ย้ายกลุ่ม
- * @param id profileId
- *
- */
-function onClickMovieGroup(id: string) {
-  profileId.value = id;
-  modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
-}
-
-const typeLevel = ref<string>("");
-const isReserve = ref<boolean>(false);
-/**
- * function openPopup ย้ายกขั้น
- * @param id profileId
- *
- */
-function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
-  profileId.value = id;
-  modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
-  typeLevel.value = typeVal;
-  isReserve.value = isReserveVal;
-}
-
-/**
- * function ยืนยันการลบรายชื่อ
- *  @param id profileId
- */
-function onClickDelete(id: string) {
-  dialogRemove($q, async () => {
-    showLoader();
-    await http
-      .delete(config.API.salaryListPeriodProfileById(id))
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        props.fetchDataTable?.();
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-/** function updatePageTable*/
-function updatePagePagination() {
-  props.fetchDataTable?.();
-}
-
-/** function updatePageSizeTable*/
-function updatePageSizePagination(newPagination: NewPagination) {
-  formFilter.value.page = 1;
-  formFilter.value.pageSize = newPagination.rowsPerPage;
-}
-
-/** function ค้นหาข้อมูล Table*/
-function searchData() {
-  formFilter.value.page = 1;
-  props.fetchDataTable?.();
-}
-
-/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
-watch(
-  () => formFilter.value.pageSize,
-  () => {
-    updatePagePagination();
-  }
-);
-</script>
-<template>
-  <q-toolbar class="text-primary" style="padding: 0px">
-    <q-btn
-      v-if="!store.isClosedRound"
-      flat
-      round
-      dense
-      icon="add"
-      @click="onClickAddPerson"
-    >
-      <q-tooltip>เพิ่ม</q-tooltip>
-    </q-btn>
-    <q-space />
-    <q-input
-      borderless
-      dense
-      debounce="300"
-      outlined
-      v-model="formFilter.keyword"
-      placeholder="ค้นหา"
-      @keydown.enter.prevent="searchData"
-    >
-      <template v-slot:append>
-        <q-icon name="search" />
-      </template>
-    </q-input>
-    <q-select
-      for="#select"
-      v-model="visibleColumns"
-      multiple
-      outlined
-      dense
-      options-dense
-      :display-value="$q.lang.table.columns"
-      emit-value
-      map-options
-      :options="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
-      option-value="name"
-      options-cover
-      style="min-width: 150px"
-      class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-    />
-  </q-toolbar>
-
-  <d-table
-    ref="table"
-    :columns="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
-    :rows="props.rows"
-    row-key="id"
-    flat
-    bordered
-    :paging="true"
-    dense
-    :rows-per-page-options="[10, 25, 50, 100]"
-    :visible-columns="visibleColumns"
-    @update:pagination="updatePageSizePagination"
-  >
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium">{{ col.label }}</span>
-        </q-th>
-        <q-th auto-width></q-th>
-      </q-tr>
-    </template>
-    <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer">
-        <q-td
-          v-for="col in props.cols"
-          :key="col.name"
-          :props="props"
-          :class="
-            store.tabType !== 'RETIRE'
-              ? props.row.isNext == true
-                ? 'text-red'
-                : ''
-              : ''
-          "
-        >
-          <div v-if="col.name === 'no'">
-            {{
-              (formFilter.page - 1) * formFilter.pageSize +
-              props.rowIndex +
-              1 +
-              (store.tabType == "FULL" && props.row.isReserve == true
-                ? " (สำรอง)"
-                : "")
-            }}
-          </div>
-          <div v-else-if="col.name === 'posNo'">
-            {{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
-          </div>
-          <div v-else-if="col.name === 'fullName'">
-            {{
-              `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
-            }}
-          </div>
-          <div v-else-if="col.name === 'amount'">
-            {{
-              props.row.amount !== null ? props.row.amount.toLocaleString() : ""
-            }}
-          </div>
-          <div v-else-if="col.name === 'amountUse'">
-            {{
-              props.row.amountUse !== null
-                ? props.row.amountUse.toLocaleString()
-                : ""
-            }}
-            {{
-              props.row.amountSpecial > 0
-                ? `(${props.row.amountSpecial.toLocaleString()})`
-                : ""
-            }}
-          </div>
-          <div v-else-if="col.name === 'positionSalaryAmount'">
-            {{
-              props.row.positionSalaryAmount !== null
-                ? props.row.positionSalaryAmount.toLocaleString()
-                : ""
-            }}
-            {{
-              props.row.amountSpecial > 0
-                ? `(${props.row.amountSpecial.toLocaleString()})`
-                : ""
-            }}
-          </div>
-
-          <div
-            v-else-if="
-              col.name === 'isRetired' && store.roundMainCode === 'OCT'
-            "
-          >
-            <q-icon
-              name="check"
-              color="primary"
-              size="24px"
-              v-if="props.row.isRetired"
-            />
-          </div>
-
-          <div v-else>
-            {{ col.value ? col.value : "-" }}
-          </div>
-        </q-td>
-        <q-td>
-          <q-btn
-            v-if="!store.isClosedRound"
-            flat
-            dense
-            icon="mdi-dots-vertical"
-            class="q-pa-none q-ml-xs"
-            color="grey-13"
-            size="12px"
-          >
-            <q-menu>
-              <q-list dense style="min-width: 150px">
-                <q-item
-                  v-for="(item, index) in store.itemMenu.filter((x:any)=>x.type != 'properties')"
-                  :key="index"
-                  clickable
-                  v-close-popup
-                  @click="
-                    item.type === 'edit'
-                      ? onClickEdit(props.row.id, props.row.amount)
-                      : item.type === 'moveGroup'
-                      ? onClickMovieGroup(props.row.id)
-                      : item.type === 'moveLevel'
-                      ? onClickMoveLevel(
-                          props.row.id,
-                          props.row.type,
-                          props.row.isReserve
-                        )
-                      : item.type === 'delete'
-                      ? onClickDelete(props.row.id)
-                      : null
-                  "
-                >
-                  <q-item-section>
-                    <div class="row items-center">
-                      <q-icon
-                        :color="item.color"
-                        size="17px"
-                        :name="item.icon"
-                      />
-                      <div class="q-pl-md">{{ item.label }}</div>
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ props.total }} รายการ
-      <q-pagination
-        v-model="formFilter.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(maxPage)"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-        @update:model-value="updatePagePagination()"
-      ></q-pagination>
-    </template>
-  </d-table>
-
-  <DialogAddPerson
-    v-model:modal="modalDialogAddPerson"
-    :fetchData="props.fetchDataTable"
-  />
-
-  <DialogFormEdit
-    v-model:modal="modalDialogForm"
-    v-model:profileId="profileId"
-    v-model:amount="amount"
-    :fetchData="props.fetchDataTable"
-  />
-  <DialogMoveGroup
-    v-model:modal="modalDialogMoveGroup"
-    v-model:profileId="profileId"
-    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.fetchDataTable"
-  />
-  <DialogMoveLevel
-    :typeLevel="typeLevel"
-    :isReserve="isReserve"
-    v-model:modal="modalDialogMoveLeve"
-    v-model:profileId="profileId"
-    :fetchData="props.fetchDataTable"
-    :type="store.tabType"
-  />
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
+
+/** importComponents*/
+import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
+import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
+import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
+import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryListSDataStore();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
+/** props*/
+const formFilter = defineModel<DataFilter>("formFilter", { required: true });
+const maxPage = defineModel<Number>("maxPage", { required: true });
+const props = defineProps({
+  rows: { type: Array },
+  fetchDataTable: {
+    type: Function,
+  },
+  total: {
+    type: Number,
+  },
+});
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: false,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: false,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: false,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือนฐาน",
+    sortable: false,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "amountUse",
+    align: "left",
+    label: "จำนวนเงินที่ใช้เลื่อน",
+    sortable: false,
+    field: "amountUse",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินเดือนหลังเลื่อน",
+    sortable: false,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isRetired",
+    align: "center",
+    label: "เกษียณอายุ",
+    sortable: false,
+    field: "isRetired",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "posNo",
+  "fullName",
+  "position",
+  "posType",
+  "posLevel",
+  "posExecutive",
+  "amount",
+  "amountUse",
+  "positionSalaryAmount",
+  "isRetired",
+]);
+
+/** modalDialog*/
+const modalDialogAddPerson = ref<boolean>(false);
+const modalDialogForm = ref<boolean>(false);
+const modalDialogMoveGroup = ref<boolean>(false);
+const modalDialogMoveLeve = ref<boolean>(false);
+
+const profileId = ref<string>("");
+const amount = ref<number>(0);
+
+/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}
+
+/**
+ * function openPopup แก้ไขเงินเดือน
+ * @param id profileId
+ * @param amountSalary จำนวนเงินเดือน
+ *
+ */
+function onClickEdit(id: string, amountSalary: number) {
+  profileId.value = id;
+  amount.value = amountSalary;
+  modalDialogForm.value = !modalDialogForm.value;
+}
+
+/**
+ * function openPopup ย้ายกลุ่ม
+ * @param id profileId
+ *
+ */
+function onClickMovieGroup(id: string) {
+  profileId.value = id;
+  modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
+}
+
+const typeLevel = ref<string>("");
+const isReserve = ref<boolean>(false);
+/**
+ * function openPopup ย้ายกขั้น
+ * @param id profileId
+ *
+ */
+function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
+  profileId.value = id;
+  modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
+  typeLevel.value = typeVal;
+  isReserve.value = isReserveVal;
+}
+
+/**
+ * function ยืนยันการลบรายชื่อ
+ *  @param id profileId
+ */
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.salaryListPeriodProfileById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        props.fetchDataTable?.();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** function updatePageTable*/
+function updatePagePagination() {
+  props.fetchDataTable?.();
+}
+
+/** function updatePageSizeTable*/
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.value.page = 1;
+  formFilter.value.pageSize = newPagination.rowsPerPage;
+}
+
+/** function ค้นหาข้อมูล Table*/
+function searchData() {
+  formFilter.value.page = 1;
+  props.fetchDataTable?.();
+}
+
+/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
+watch(
+  () => formFilter.value.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+<template>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn
+      v-if="!store.isClosedRound"
+      flat
+      round
+      dense
+      icon="add"
+      @click="onClickAddPerson"
+    >
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      debounce="300"
+      outlined
+      v-model="formFilter.keyword"
+      placeholder="ค้นหา"
+      @keydown.enter.prevent="searchData"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <q-select
+      for="#select"
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+    />
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="store.roundMainCode === 'OCT' ? columns : columns.slice(0, 10)"
+    :rows="props.rows"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :visible-columns="visibleColumns"
+    @update:pagination="updatePageSizePagination"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width></q-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.name"
+          :props="props"
+          :class="
+            store.tabType !== 'RETIRE'
+              ? props.row.isNext == true
+                ? 'text-red'
+                : ''
+              : ''
+          "
+        >
+          <div v-if="col.name === 'no'">
+            {{
+              (formFilter.page - 1) * formFilter.pageSize +
+              props.rowIndex +
+              1 +
+              (store.tabType == "FULL" && props.row.isReserve == true
+                ? " (สำรอง)"
+                : "")
+            }}
+          </div>
+          <div v-else-if="col.name === 'posNo'">
+            {{ `${props.row.orgShortName}${props.row.posMasterNo}` }}
+          </div>
+          <div v-else-if="col.name === 'fullName'">
+            {{
+              `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
+            }}
+          </div>
+          <div v-else-if="col.name === 'amount'">
+            {{
+              props.row.amount !== null ? props.row.amount.toLocaleString() : ""
+            }}
+          </div>
+          <div v-else-if="col.name === 'amountUse'">
+            {{
+              props.row.amountUse !== null
+                ? props.row.amountUse.toLocaleString()
+                : ""
+            }}
+            {{
+              props.row.amountSpecial > 0
+                ? `(${props.row.amountSpecial.toLocaleString()})`
+                : ""
+            }}
+          </div>
+          <div v-else-if="col.name === 'positionSalaryAmount'">
+            {{
+              props.row.positionSalaryAmount !== null
+                ? props.row.positionSalaryAmount.toLocaleString()
+                : ""
+            }}
+            {{
+              props.row.amountSpecial > 0
+                ? `(${props.row.amountSpecial.toLocaleString()})`
+                : ""
+            }}
+          </div>
+
+          <div
+            v-else-if="
+              col.name === 'isRetired' && store.roundMainCode === 'OCT'
+            "
+          >
+            <q-icon
+              name="check"
+              color="primary"
+              size="24px"
+              v-if="props.row.isRetired"
+            />
+          </div>
+
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td>
+          <q-btn
+            v-if="!store.isClosedRound"
+            flat
+            dense
+            icon="mdi-dots-vertical"
+            class="q-pa-none q-ml-xs"
+            color="grey-13"
+            size="12px"
+          >
+            <q-menu>
+              <q-list dense style="min-width: 150px">
+                <q-item
+                  v-for="(item, index) in store.itemMenu.filter((x:any)=>x.type != 'properties')"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="
+                    item.type === 'edit'
+                      ? onClickEdit(props.row.id, props.row.amount)
+                      : item.type === 'moveGroup'
+                      ? onClickMovieGroup(props.row.id)
+                      : item.type === 'moveLevel'
+                      ? onClickMoveLevel(
+                          props.row.id,
+                          props.row.type,
+                          props.row.isReserve
+                        )
+                      : item.type === 'delete'
+                      ? onClickDelete(props.row.id)
+                      : null
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        :color="item.color"
+                        size="17px"
+                        :name="item.icon"
+                      />
+                      <div class="q-pl-md">{{ item.label }}</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.total }} รายการ
+      <q-pagination
+        v-model="formFilter.page"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+        @update:model-value="updatePagePagination()"
+      ></q-pagination>
+    </template>
+  </d-table>
+
+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
+  <DialogFormEdit
+    v-model:modal="modalDialogForm"
+    v-model:profileId="profileId"
+    v-model:amount="amount"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveGroup
+    v-model:modal="modalDialogMoveGroup"
+    v-model:profileId="profileId"
+    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveLevel
+    :typeLevel="typeLevel"
+    :isReserve="isReserve"
+    v-model:modal="modalDialogMoveLeve"
+    v-model:profileId="profileId"
+    :fetchData="props.fetchDataTable"
+    :type="store.tabType"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
index 2e170c966..36b48f649 100644
--- a/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
+++ b/src/modules/13_salary/components/SalaryLists/TableTypePending.vue
@@ -1,589 +1,589 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { useQuasar } from "quasar";
-
-/** importType*/
-import type { QTableProps } from "quasar";
-import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
-import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
-
-/** importComponents*/
-import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
-import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
-import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
-import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
-import DialogProperties from "@/modules/13_salary/components/SalaryLists/DialogProperties.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** use*/
-const $q = useQuasar();
-const store = useSalaryListSDataStore();
-const { dialogRemove, messageError, showLoader, hideLoader, success } =
-  useCounterMixin();
-
-/** Props*/
-const formFilter = defineModel<DataFilter>("formFilter", { required: true });
-const maxPage = defineModel<Number>("maxPage", { required: true });
-const props = defineProps({
-  rows: { type: Array },
-  fetchDataTable: {
-    type: Function,
-  },
-  maxPage: {
-    type: Number,
-  },
-  total: {
-    type: Number,
-  },
-});
-
-/** ข้อมูล Table*/
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fullName",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posType",
-    align: "left",
-    label: "ตำแหน่งประเภท",
-    sortable: true,
-    field: "posType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posExecutive",
-    align: "left",
-    label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
-    field: "posExecutive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    field: "position",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posLevel",
-    align: "left",
-    label: "ระดับตำแหน่ง",
-    field: "posLevel",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "amount",
-    align: "left",
-    label: "เงินเดือน",
-    field: "amount",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "result",
-    align: "center",
-    label: "ผลการประเมินฯ",
-    sortable: false,
-    field: "result",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "duration",
-    align: "center",
-    label: "ระยะเวลาการปฏิบัติราชการในรอบครึ่งปี",
-    sortable: false,
-    field: "duration",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "isPunish",
-    align: "center",
-    label: "ไม่ถูกลงโทษทางวินัย",
-    sortable: false,
-    field: "isPunish",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "isSuspension",
-    align: "center",
-    label: "ไม่ถูกพักราชการ",
-    sortable: false,
-    field: "isSuspension",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "isAbsent",
-    align: "center",
-    label: "ไม่ขาดราชการ",
-    sortable: false,
-    field: "isAbsent",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "isLeave",
-    align: "center",
-    label: "วันลาไม่เกิน",
-    sortable: false,
-    field: "isLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "no",
-  "fullName",
-  "posType",
-  "posExecutive",
-  "position",
-  "posLevel",
-  "amount",
-  "organization",
-  "result",
-  "duration",
-  "isPunish",
-  "isSuspension",
-  "isAbsent",
-  "isLeave",
-]);
-
-/** modalDialog*/
-const modalDialogAddPerson = ref<boolean>(false);
-const modalDialogForm = ref<boolean>(false);
-const modalDialogMoveGroup = ref<boolean>(false);
-const modalDialogMoveLeve = ref<boolean>(false);
-const modalDialogProperties = ref<boolean>(false);
-
-/** ตัวแปร*/
-const profileId = ref<string>("");
-const amount = ref<number>(0);
-const isPunish = ref<boolean>(false)
-const isSuspension = ref<boolean>(false)
-const isAbsent = ref<boolean>(false)
-const isLeave = ref<boolean>(false)
-/**
- * function ยืนยันการลบรายชื่อ
- *  @param id profileId
- */
-function onClickDelete(id: string) {
-  dialogRemove($q, async () => {
-    showLoader();
-    await http
-      .delete(config.API.salaryListPeriodProfileById(id))
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        props.fetchDataTable?.();
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
-function onClickAddPerson() {
-  modalDialogAddPerson.value = !modalDialogAddPerson.value;
-}
-
-/**
- * function openPopup แก้ไขเงินเดือน
- * @param id profileId
- * @param amountSalary จำนวนเงินเดือน
- *
- */
-function onClickEdit(id: string, amountSalary: number) {
-  profileId.value = id;
-  amount.value = amountSalary;
-  modalDialogForm.value = !modalDialogForm.value;
-}
-
-/**
- * function openPopup ย้ายกลุ่ม
- * @param id profileId
- *
- */
-function onClickMovieGroup(id: string) {
-  profileId.value = id;
-  modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
-}
-
-const typeLevel = ref<string>("");
-const isReserve = ref<boolean>(false);
-/**
- * function openPopup ย้ายกขั้น
- * @param id profileId
- *
- */
-function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
-  profileId.value = id;
-  modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
-  typeLevel.value = typeVal;
-  isReserve.value = isReserveVal;
-}
-
-/** function updatePageTable*/
-function updatePagePagination() {
-  props.fetchDataTable?.();
-}
-
-/** function updatePageSizeTable*/
-function updatePageSizePagination(newPagination: NewPagination) {
-  formFilter.value.page = 1;
-  formFilter.value.pageSize = newPagination.rowsPerPage;
-}
-
-/** function ค้นหาข้อมูล Table*/
-function searchData() {
-  formFilter.value.page = 1;
-  props.fetchDataTable?.();
-}
-
-function onProperties(data:any){
-  console.log(data)
-  modalDialogProperties.value = true
-  profileId.value = data.id
-  isPunish.value = data.isPunish
-  isSuspension.value = data.isSuspension
-  isAbsent.value = data.isAbsent
-  isLeave.value = data.isLeave
-}
-/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
-watch(
-  () => formFilter.value.pageSize,
-  () => {
-    updatePagePagination();
-  }
-);
-</script>
-
-<template>
-  <q-toolbar class="text-primary" style="padding: 0px">
-    <q-btn           v-if="!store.isClosedRound" flat round dense icon="add" @click="onClickAddPerson">
-      <q-tooltip>เพิ่ม </q-tooltip>
-    </q-btn>
-    <q-space />
-    <q-input
-      borderless
-      dense
-      debounce="300"
-      outlined
-      v-model="formFilter.keyword"
-      placeholder="ค้นหา"
-      @keydown.enter.prevent="searchData"
-    >
-      <template v-slot:append>
-        <q-icon name="search" />
-      </template>
-    </q-input>
-    <q-select
-      for="#select"
-      v-model="visibleColumns"
-      multiple
-      outlined
-      dense
-      options-dense
-      :display-value="$q.lang.table.columns"
-      emit-value
-      map-options
-      :options="columns"
-      option-value="name"
-      options-cover
-      style="min-width: 150px"
-      class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
-    />
-  </q-toolbar>
-  <d-table
-    ref="table"
-    :columns="columns"
-    :rows="props.rows"
-    row-key="id"
-    flat
-    bordered
-    :paging="true"
-    dense
-    :rows-per-page-options="[10, 25, 50, 100]"
-    :visible-columns="visibleColumns"
-    @update:pagination="updatePageSizePagination"
-  >
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium">{{ col.label }}</span>
-        </q-th>
-        <q-th auto-width />
-      </q-tr>
-    </template>
-    <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name === 'no'">
-            {{
-              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
-            }}
-          </div>
-          <div v-else-if="col.name === 'fullName'">
-            {{
-              `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
-            }}
-          </div>
-          <div v-else-if="col.name == 'organization'" class="table_ellipsis">
-            <div
-              v-if="
-                props.row.child4 === null &&
-                props.row.child3 === null &&
-                props.row.child2 === null &&
-                props.row.child1 === null &&
-                props.row.root === null
-              "
-            >
-              -
-            </div>
-            {{
-              `${props.row.child4 ? props.row.child4 + "/" : ""}${
-                props.row.child3 ? props.row.child3 + "/" : ""
-              }${props.row.child2 ? props.row.child2 + "-" : ""}${
-                props.row.child1 ? props.row.child1 + "/" : ""
-              }${props.row.root ? props.row.root : ""}`
-            }}
-          </div>
-          <!-- <div v-else-if="col.name === 'isResult'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isResult"
-            />
-          </div>
-          <div v-else-if="col.name === 'isDuration'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isDuration"
-            />
-          </div>
-          <div v-else-if="col.name === 'isPunish'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isPunish"
-            />
-          </div>
-          <div v-else-if="col.name === 'isRetired'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isRetired"
-            />
-          </div>
-          <div v-else-if="col.name === 'isRetired2'">
-            <q-checkbox
-              disable
-              keep-color
-              color="primary"
-              v-model="props.row.isRetired2"
-              false
-            />
-          </div> -->
-          <div v-else-if="col.name == 'isPunish'">
-            <q-icon
-              v-if="props.row.isPunish !== null"
-              :name="props.row.isPunish ? 'done' : 'close'"
-              :color="props.row.isPunish ? 'primary' : 'red'"
-              size="24px"
-            />
-            <div v-else-if="props.row.isPunish == null">
-              {{ props.row.isPunish == null ? '-':''}}
-            </div>
-          </div>
-          <div v-else-if="col.name == 'isSuspension'">
-            <q-icon
-              v-if="props.row.isSuspension !== null"
-              :name="props.row.isSuspension ? 'done' : 'close'"
-              :color="props.row.isSuspension ? 'primary' : 'red'"
-              size="24px"
-            />
-            <div v-else-if="props.row.isSuspension == null">
-              {{ props.row.isSuspension == null ? '-':''}}
-            </div>
-          </div>
-          <div v-else-if="col.name == 'isAbsent'">
-            <q-icon
-              v-if="props.row.isAbsent !== null"
-              :name="props.row.isAbsent ? 'done' : 'close'"
-              :color="props.row.isAbsent ? 'primary' : 'red'"
-              size="24px"
-            />
-            <div v-else-if="props.row.isAbsent == null">
-              {{ props.row.isAbsent == null ? '-':''}}
-            </div>
-          </div>
-          <div v-else-if="col.name == 'amount'">
-              {{Number(props.row.amount).toLocaleString()}}
-            </div>
-          <div v-else-if="col.name == 'isLeave'">
-            <q-icon
-              v-if="props.row.isLeave !== null"
-              :name="props.row.isLeave ? 'done' : 'close'"
-              :color="props.row.isLeave ? 'primary' : 'red'"
-              size="24px"
-            />
-            <div v-else-if="props.row.isLeave == null">
-              {{ props.row.isLeave == null ? '-':''}}
-            </div>
-          
-          </div>
-          <div v-else>
-            {{ col.value ? col.value : "-" }}
-          </div>
-        </q-td>
-        <q-td>
-          <q-btn
-          v-if="!store.isClosedRound"
-            flat
-            dense
-            icon="mdi-dots-vertical"
-            class="q-pa-none q-ml-xs"
-            color="grey-13"
-            size="12px"
-          >
-            <q-menu>
-              <q-list dense style="min-width: 150px">
-                <q-item
-                  v-for="(item, index) in store.itemMenu"
-                  :key="index"
-                  clickable
-                  v-close-popup
-                  @click="
-                    item.type === 'edit'
-                      ? onClickEdit(props.row.id, props.row.amount)
-                      : item.type === 'moveGroup'
-                      ? onClickMovieGroup(props.row.id)
-                      : item.type === 'moveLevel'
-                      ? onClickMoveLevel(
-                          props.row.id,
-                          props.row.type,
-                          props.row.isReserve
-                        )
-                      : item.type === 'delete'
-                      ? onClickDelete(props.row.id)
-                      : item.type === 'properties'
-                      ? onProperties(props.row)
-                      : null
-                  "
-                >
-                  <q-item-section>
-                    <div class="row items-center">
-                      <q-icon
-                        :color="item.color"
-                        size="17px"
-                        :name="item.icon"
-                      />
-                      <div class="q-pl-md">{{ item.label }}</div>
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ props.total }} รายการ
-      <q-pagination
-        v-model="formFilter.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(maxPage)"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-        @update:model-value="updatePagePagination()"
-      ></q-pagination>
-    </template>
-  </d-table>
-
-  <DialogAddPerson
-    v-model:modal="modalDialogAddPerson"
-    :fetchData="props.fetchDataTable"
-  />
-
-  <DialogFormEdit
-    v-model:modal="modalDialogForm"
-    v-model:profileId="profileId"
-    v-model:amount="amount"
-    :fetchData="props.fetchDataTable"
-  />
-  <DialogMoveGroup
-    v-model:modal="modalDialogMoveGroup"
-    v-model:profileId="profileId"
-    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
-    :fetchData="props.fetchDataTable"
-  />
-  <DialogMoveLevel
-    :typeLevel="typeLevel"
-    :isReserve="isReserve"
-    v-model:modal="modalDialogMoveLeve"
-    v-model:profileId="profileId"
-    :fetchData="props.fetchDataTable"
-  />
-  <DialogProperties
-  v-model:modal="modalDialogProperties"
-  v-model:id="profileId"
-  :is-punish="isPunish"
-  :is-suspension="isSuspension"
-  :is-absent="isAbsent"
-  :is-leave="isLeave"
-  :fetch-data="props.fetchDataTable"
-  />
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
+
+/** importComponents*/
+import DialogAddPerson from "@/modules/13_salary/components/SalaryLists//DialogAddPerson.vue";
+import DialogFormEdit from "@/modules/13_salary/components/SalaryLists/DialogFormEdit.vue";
+import DialogMoveGroup from "@/modules/13_salary/components/SalaryLists/DialogMoveGroup.vue";
+import DialogMoveLevel from "@/modules/13_salary/components/SalaryLists/DialogMoveLevel.vue";
+import DialogProperties from "@/modules/13_salary/components/SalaryLists/DialogProperties.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** use*/
+const $q = useQuasar();
+const store = useSalaryListSDataStore();
+const { dialogRemove, messageError, showLoader, hideLoader, success } =
+  useCounterMixin();
+
+/** Props*/
+const formFilter = defineModel<DataFilter>("formFilter", { required: true });
+const maxPage = defineModel<Number>("maxPage", { required: true });
+const props = defineProps({
+  rows: { type: Array },
+  fetchDataTable: {
+    type: Function,
+  },
+  maxPage: {
+    type: Number,
+  },
+  total: {
+    type: Number,
+  },
+});
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    field: "position",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    field: "posLevel",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    field: "amount",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "result",
+    align: "center",
+    label: "ผลการประเมินฯ",
+    sortable: false,
+    field: "result",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "duration",
+    align: "center",
+    label: "ระยะเวลาการปฏิบัติราชการในรอบครึ่งปี",
+    sortable: false,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isPunish",
+    align: "center",
+    label: "ไม่ถูกลงโทษทางวินัย",
+    sortable: false,
+    field: "isPunish",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isSuspension",
+    align: "center",
+    label: "ไม่ถูกพักราชการ",
+    sortable: false,
+    field: "isSuspension",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isAbsent",
+    align: "center",
+    label: "ไม่ขาดราชการ",
+    sortable: false,
+    field: "isAbsent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isLeave",
+    align: "center",
+    label: "วันลาไม่เกิน",
+    sortable: false,
+    field: "isLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "posType",
+  "posExecutive",
+  "position",
+  "posLevel",
+  "amount",
+  "organization",
+  "result",
+  "duration",
+  "isPunish",
+  "isSuspension",
+  "isAbsent",
+  "isLeave",
+]);
+
+/** modalDialog*/
+const modalDialogAddPerson = ref<boolean>(false);
+const modalDialogForm = ref<boolean>(false);
+const modalDialogMoveGroup = ref<boolean>(false);
+const modalDialogMoveLeve = ref<boolean>(false);
+const modalDialogProperties = ref<boolean>(false);
+
+/** ตัวแปร*/
+const profileId = ref<string>("");
+const amount = ref<number>(0);
+const isPunish = ref<boolean>(false)
+const isSuspension = ref<boolean>(false)
+const isAbsent = ref<boolean>(false)
+const isLeave = ref<boolean>(false)
+/**
+ * function ยืนยันการลบรายชื่อ
+ *  @param id profileId
+ */
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.salaryListPeriodProfileById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        props.fetchDataTable?.();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** function openPopup เพิ่มคนเลื่อนเงินเดือน*/
+function onClickAddPerson() {
+  modalDialogAddPerson.value = !modalDialogAddPerson.value;
+}
+
+/**
+ * function openPopup แก้ไขเงินเดือน
+ * @param id profileId
+ * @param amountSalary จำนวนเงินเดือน
+ *
+ */
+function onClickEdit(id: string, amountSalary: number) {
+  profileId.value = id;
+  amount.value = amountSalary;
+  modalDialogForm.value = !modalDialogForm.value;
+}
+
+/**
+ * function openPopup ย้ายกลุ่ม
+ * @param id profileId
+ *
+ */
+function onClickMovieGroup(id: string) {
+  profileId.value = id;
+  modalDialogMoveGroup.value = !modalDialogMoveGroup.value;
+}
+
+const typeLevel = ref<string>("");
+const isReserve = ref<boolean>(false);
+/**
+ * function openPopup ย้ายกขั้น
+ * @param id profileId
+ *
+ */
+function onClickMoveLevel(id: string, typeVal: string, isReserveVal: boolean) {
+  profileId.value = id;
+  modalDialogMoveLeve.value = !modalDialogMoveLeve.value;
+  typeLevel.value = typeVal;
+  isReserve.value = isReserveVal;
+}
+
+/** function updatePageTable*/
+function updatePagePagination() {
+  props.fetchDataTable?.();
+}
+
+/** function updatePageSizeTable*/
+function updatePageSizePagination(newPagination: NewPagination) {
+  formFilter.value.page = 1;
+  formFilter.value.pageSize = newPagination.rowsPerPage;
+}
+
+/** function ค้นหาข้อมูล Table*/
+function searchData() {
+  formFilter.value.page = 1;
+  props.fetchDataTable?.();
+}
+
+function onProperties(data:any){
+  console.log(data)
+  modalDialogProperties.value = true
+  profileId.value = data.id
+  isPunish.value = data.isPunish
+  isSuspension.value = data.isSuspension
+  isAbsent.value = data.isAbsent
+  isLeave.value = data.isLeave
+}
+/** callblack function เรียกข้อมูลรายชื่อใหม่ เมื่อมีการเปลี่ยน PageSize*/
+watch(
+  () => formFilter.value.pageSize,
+  () => {
+    updatePagePagination();
+  }
+);
+</script>
+
+<template>
+  <q-toolbar class="text-primary" style="padding: 0px">
+    <q-btn           v-if="!store.isClosedRound" flat round dense icon="add" @click="onClickAddPerson">
+      <q-tooltip>เพิ่ม </q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      borderless
+      dense
+      debounce="300"
+      outlined
+      v-model="formFilter.keyword"
+      placeholder="ค้นหา"
+      @keydown.enter.prevent="searchData"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <q-select
+      for="#select"
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+    />
+  </q-toolbar>
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="props.rows"
+    row-key="id"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :visible-columns="visibleColumns"
+    @update:pagination="updatePageSizePagination"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name === 'no'">
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
+          </div>
+          <div v-else-if="col.name === 'fullName'">
+            {{
+              `${props.row.prefix}${props.row.firstName}  ${props.row.lastName}`
+            }}
+          </div>
+          <div v-else-if="col.name == 'organization'" class="table_ellipsis">
+            <div
+              v-if="
+                props.row.child4 === null &&
+                props.row.child3 === null &&
+                props.row.child2 === null &&
+                props.row.child1 === null &&
+                props.row.root === null
+              "
+            >
+              -
+            </div>
+            {{
+              `${props.row.child4 ? props.row.child4 + "/" : ""}${
+                props.row.child3 ? props.row.child3 + "/" : ""
+              }${props.row.child2 ? props.row.child2 + "-" : ""}${
+                props.row.child1 ? props.row.child1 + "/" : ""
+              }${props.row.root ? props.row.root : ""}`
+            }}
+          </div>
+          <!-- <div v-else-if="col.name === 'isResult'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isResult"
+            />
+          </div>
+          <div v-else-if="col.name === 'isDuration'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isDuration"
+            />
+          </div>
+          <div v-else-if="col.name === 'isPunish'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isPunish"
+            />
+          </div>
+          <div v-else-if="col.name === 'isRetired'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isRetired"
+            />
+          </div>
+          <div v-else-if="col.name === 'isRetired2'">
+            <q-checkbox
+              disable
+              keep-color
+              color="primary"
+              v-model="props.row.isRetired2"
+              false
+            />
+          </div> -->
+          <div v-else-if="col.name == 'isPunish'">
+            <q-icon
+              v-if="props.row.isPunish !== null"
+              :name="props.row.isPunish ? 'done' : 'close'"
+              :color="props.row.isPunish ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isPunish == null">
+              {{ props.row.isPunish == null ? '-':''}}
+            </div>
+          </div>
+          <div v-else-if="col.name == 'isSuspension'">
+            <q-icon
+              v-if="props.row.isSuspension !== null"
+              :name="props.row.isSuspension ? 'done' : 'close'"
+              :color="props.row.isSuspension ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isSuspension == null">
+              {{ props.row.isSuspension == null ? '-':''}}
+            </div>
+          </div>
+          <div v-else-if="col.name == 'isAbsent'">
+            <q-icon
+              v-if="props.row.isAbsent !== null"
+              :name="props.row.isAbsent ? 'done' : 'close'"
+              :color="props.row.isAbsent ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isAbsent == null">
+              {{ props.row.isAbsent == null ? '-':''}}
+            </div>
+          </div>
+          <div v-else-if="col.name == 'amount'">
+              {{Number(props.row.amount).toLocaleString()}}
+            </div>
+          <div v-else-if="col.name == 'isLeave'">
+            <q-icon
+              v-if="props.row.isLeave !== null"
+              :name="props.row.isLeave ? 'done' : 'close'"
+              :color="props.row.isLeave ? 'primary' : 'red'"
+              size="24px"
+            />
+            <div v-else-if="props.row.isLeave == null">
+              {{ props.row.isLeave == null ? '-':''}}
+            </div>
+          
+          </div>
+          <div v-else>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+        <q-td>
+          <q-btn
+          v-if="!store.isClosedRound"
+            flat
+            dense
+            icon="mdi-dots-vertical"
+            class="q-pa-none q-ml-xs"
+            color="grey-13"
+            size="12px"
+          >
+            <q-menu>
+              <q-list dense style="min-width: 150px">
+                <q-item
+                  v-for="(item, index) in store.itemMenu"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="
+                    item.type === 'edit'
+                      ? onClickEdit(props.row.id, props.row.amount)
+                      : item.type === 'moveGroup'
+                      ? onClickMovieGroup(props.row.id)
+                      : item.type === 'moveLevel'
+                      ? onClickMoveLevel(
+                          props.row.id,
+                          props.row.type,
+                          props.row.isReserve
+                        )
+                      : item.type === 'delete'
+                      ? onClickDelete(props.row.id)
+                      : item.type === 'properties'
+                      ? onProperties(props.row)
+                      : null
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        :color="item.color"
+                        size="17px"
+                        :name="item.icon"
+                      />
+                      <div class="q-pl-md">{{ item.label }}</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.total }} รายการ
+      <q-pagination
+        v-model="formFilter.page"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+        @update:model-value="updatePagePagination()"
+      ></q-pagination>
+    </template>
+  </d-table>
+
+  <DialogAddPerson
+    v-model:modal="modalDialogAddPerson"
+    :fetchData="props.fetchDataTable"
+  />
+
+  <DialogFormEdit
+    v-model:modal="modalDialogForm"
+    v-model:profileId="profileId"
+    v-model:amount="amount"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveGroup
+    v-model:modal="modalDialogMoveGroup"
+    v-model:profileId="profileId"
+    :group="store.tabGroup === 'group1' ? 'กลุ่ม1' : 'กลุ่ม2'"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogMoveLevel
+    :typeLevel="typeLevel"
+    :isReserve="isReserve"
+    v-model:modal="modalDialogMoveLeve"
+    v-model:profileId="profileId"
+    :fetchData="props.fetchDataTable"
+  />
+  <DialogProperties
+  v-model:modal="modalDialogProperties"
+  v-model:id="profileId"
+  :is-punish="isPunish"
+  :is-suspension="isSuspension"
+  :is-absent="isAbsent"
+  :is-leave="isLeave"
+  :fetch-data="props.fetchDataTable"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/13_salary/store/SalaryEmployeeListsStore.ts b/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
new file mode 100644
index 000000000..418f37873
--- /dev/null
+++ b/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
@@ -0,0 +1,159 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+/** importType*/
+import type {
+  ItemsMenu,
+  DataOption,
+} from "@/modules/13_salary/interface/index/Main";
+import type { DataPeriodLatest } from "@/modules/13_salary/interface/response/SalaryList";
+
+export const useSalaryEmployeeListSDataStore = defineStore("salaryEmployeeListStore", () => {
+  const tabGroup = ref<string>("group1");
+  const tabType = ref<string>("PENDING");
+  const groupOp = ref<DataOption[]>([
+    { id: "", name: "กลุ่ม1" },
+    { id: "", name: "กลุ่ม2" },
+  ]);
+
+  const remaining = ref<number>(0);
+
+  const groupId = ref<string>("");
+  const rootId = ref<string>("");
+  const roundMainCode = ref<string>("");
+  const roundYear = ref<number>(0);
+  const roundCode = ref<string>("");
+  const isClosedRound = ref<boolean>(false); // การปิดรอบ
+  /** List Menu*/
+  const itemMenu = ref<ItemsMenu[]>([
+    {
+      label: "แก้ไขเงินเดือน",
+      icon: "edit",
+      color: "edit",
+      type: "edit",
+    },
+    {
+      label: "ย้ายกลุ่ม",
+      icon: "mdi-account-arrow-right-outline",
+      color: "indigo-6",
+      type: "moveGroup",
+    },
+    {
+      label: "ย้ายขั้น",
+      icon: "mdi-swap-vertical-bold",
+      color: "green-6",
+      type: "moveLevel",
+    },
+    {
+      label: "แก้ไขคุณสมบัติ",
+      icon: "mdi-format-list-checks",
+      color: "blue-6",
+      type: "properties",
+    },
+    {
+      label: "ลบ",
+      icon: "delete",
+      color: "red",
+      type: "delete",
+    },
+  ]);
+
+  /** List Download รายงานของรอบเมษายน*/
+  const itemDownloadApr = ref<DataOption[]>([
+    {
+      id: "gov1-01",
+      name: "รายชื่อข้าราชการผู้ที่ครองตำแหน่ง ณ วันที่ 1 มีนาคม",
+    },
+    {
+      id: "gov1-02",
+      name: "บัญชีการคำนวณโควตาเลื่อนเงินเดือน รอบเมษายน",
+    },
+    {
+      id: "gov1-03",
+      name: "รายชื่อข้าราชการที่ได้รับการเสนอขอเลื่อนหนึ่งขั้น",
+    },
+    {
+      id: "gov1-04",
+      name: "แบบ 1 กท รอบเมษายน",
+    },
+    {
+      id: "gov1-05",
+      name: "แบบ 2 กท รอบเมษายน",
+    },
+    {
+      id: "gov1-06",
+      name: "แบบ 3 กท บัญชีแสดงวันลาครึ่งปี ขรก.",
+    },
+    {
+      id: "gov1-07",
+      name: "คำสั่งเลื่อนเงินเดือน รอบเมษายน",
+    },
+    {
+      id: "gov1-08",
+      name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อน รอบเมษายน",
+    },
+  ]);
+
+  /** List Download รายงานของรอบตุลาคม*/
+  const itemDownloadOct = ref<DataOption[]>([
+    {
+      id: "gov2-01",
+      name: "รายชื่อข้าราชการผู้ที่ครองตำแหน่ง ณ วันที่ 1 กันยายน",
+    },
+    {
+      id: "gov2-02",
+      name: "บัญชีการคำนวณวงเงินเลื่อนเงินเดือน รอบตุลาคม",
+    },
+    {
+      id: "gov2-03",
+      name: "รายชื่อข้าราชการผู้ที่ได้รับการเสนอขอเลื่อนเงินเดือนทั้งปีสองขั้น",
+    },
+    {
+      id: "gov2-04",
+      name: "แบบ 1 กท รอบตุลาคม",
+    },
+    {
+      id: "gov2-05",
+      name: "แบบ 2 กท รอบตุลาคม",
+    },
+    {
+      id: "gov2-06",
+      name: "แบบ 3 กท บัญชีแสดงวันลาครึ่งปี ขรก. ",
+    },
+    {
+      id: "gov2-07",
+      name: "คำสั่งเลื่อนเงินเดือนข้าราชการเกษียณ",
+    },
+    {
+      id: "gov2-08",
+      name: "คำสั่งเลื่อนเงินเดือน รอบตุลาคม",
+    },
+    {
+      id: "gov2-09",
+      name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อนเงินเดือน รอบตุลาคม",
+    },
+  ]);
+
+  function fetchPeriodLatest(data: DataPeriodLatest, type: string) {
+    groupId.value = type === "group1" ? data.group1id : data.group2id;
+    roundCode.value = data.period;
+    groupOp.value[0].id = data.group1id;
+    groupOp.value[1].id = data.group2id;
+  }
+  return {
+    tabGroup,
+    tabType,
+    itemMenu,
+    itemDownloadOct,
+    itemDownloadApr,
+    groupId,
+    fetchPeriodLatest,
+    rootId,
+    roundCode,
+    groupOp,
+    roundMainCode,
+    remaining,
+    isClosedRound,
+    roundYear,
+  };
+});
diff --git a/src/modules/13_salary/views/salaryEmployeeLists.vue b/src/modules/13_salary/views/salaryEmployeeLists.vue
index c9b5c17fc..09beb1080 100644
--- a/src/modules/13_salary/views/salaryEmployeeLists.vue
+++ b/src/modules/13_salary/views/salaryEmployeeLists.vue
@@ -3,8 +3,7 @@ import { onMounted, ref, computed, nextTick } from "vue";
 import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
-import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
-import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
+
 /** importType*/
 import type {
   DataOption,
@@ -17,7 +16,9 @@ import type {
 } from "@/modules/13_salary/interface/response/SalaryList";
 
 /** importComponents*/
-import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
+import TabGroup from "@/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue";
+// import ProcessStep from "@/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue";
+// import PageDashBoard from "@/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue";
 
 /** importStore*/
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
diff --git a/src/modules/16_positionEmployee/components/DialogAddPosition.vue b/src/modules/16_positionEmployee/components/DialogAddPosition.vue
new file mode 100644
index 000000000..7bee3f75a
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogAddPosition.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { ref, reactive, watch, defineProps } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  ResGroup,
+  ResLevel,
+} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
+import type { ObjectPosRef } from "@/modules/01_metadataNew/interface/index/positionEmployee";
+import type { DataOption } from "@/modules/16_positionEmployee/interface/index/Main";
+
+import type { OptionType } from "@/modules/16_positionEmployee/interface/response/organizational";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const isSpecial = ref<boolean>(false);
+const props = defineProps({
+  emitSearch: Function,
+  getData: Function,
+  data: Object,
+  levelOp: Object,
+});
+const modal = defineModel<boolean>("modalAdd", { required: true });
+const isEditCheck = defineModel<boolean>("isEdit", { required: true });
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
+
+const isDisValidate = ref<boolean>(false);
+const formDataPos = reactive({
+  posName: "",
+  posTypeName: "",
+  posLevelName: "",
+});
+
+const posNameRef = ref<object | null>(null);
+const posTypeNameRef = ref<object | null>(null);
+const posLevelNameRef = ref<object | null>(null);
+const objectRef: ObjectPosRef = {
+  posName: posNameRef,
+  posTypeName: posTypeNameRef,
+  posLevelName: posLevelNameRef,
+};
+const posTypeMain = ref<ResGroup[]>([]);
+const posTypeOp = ref<DataOption[]>([]);
+const posLevelOp = ref<DataOption[]>([]);
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateFormPositionEdit() {
+  isDisValidate.value = false;
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    dialogConfirm($q, () => {
+      submit();
+    });
+  }
+}
+async function submit() {
+  const body = {
+    posDictName: formDataPos.posName,
+    posTypeId: formDataPos.posTypeName,
+    posLevelId: formDataPos.posLevelName,
+  };
+  showLoader();
+  try {
+    const url = !isEditCheck.value
+      ? config.API.orgEmployeePos
+      : config.API.orgEmployeePosById(props?.data?.id);
+    await http[!isEditCheck.value ? "post" : "put"](url, body);
+    success($q, "บันทีกข้อมูลสำเร็จ");
+    props.emitSearch?.(formDataPos.posName, "positionName");
+    close();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
+async function clearFormPositionSelect() {
+  isEditCheck.value = false;
+  isDisValidate.value = true;
+  formDataPos.posName = "";
+  formDataPos.posTypeName = "";
+  formDataPos.posLevelName = "";
+  isSpecial.value = false;
+  setTimeout(() => {
+    isDisValidate.value = false;
+  }, 1000);
+}
+
+function close() {
+  modal.value = false;
+  clearFormPositionSelect();
+}
+
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      posTypeMain.value = res.data.result;
+      posTypeOp.value = res.data.result.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updatePosTypeName(id: string) {
+  const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
+  posLevelOp.value =
+    posLevel?.posLevels.map((e: ResLevel) => ({
+      id: e.id,
+      name: e.posLevelName.toString(),
+    })) ?? [];
+  formDataPos.posLevelName = "";
+}
+
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value === true) {
+      await fetchType();
+
+      if (props.data) {
+        const dataList = props.data;
+        updatePosTypeName(dataList.posTypeId);
+
+        formDataPos.posName = dataList.posDictName;
+        formDataPos.posTypeName = dataList.posTypeId;
+        formDataPos.posLevelName = dataList.posLevelId;
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 50vw">
+      <DialogHeader
+        :tittle="`${isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`}`"
+        :close="close"
+      />
+      <q-separator />
+
+      <q-card-section class="q-pa-none">
+        <form @submit.prevent="validateFormPositionEdit">
+          <div class="row q-col-gutter-sm col-12 q-pa-md">
+            <div class="col-12">
+              <q-input
+                ref="posNameRef"
+                v-model="formDataPos.posName"
+                dense
+                outlined
+                for="#positionName"
+                label="ชื่อตำแหน่ง"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posTypeNameRef"
+                label="กลุ่มงาน"
+                v-model="formDataPos.posTypeName"
+                :options="posTypeOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                @update:model-value="updatePosTypeName"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posLevelNameRef"
+                label="ระดับชั้นงาน"
+                v-model="formDataPos.posLevelName"
+                :disable="formDataPos.posTypeName === ''"
+                :options="posLevelOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+              />
+            </div>
+          </div>
+
+          <q-separator />
+          <q-card-actions align="right" class="bg-white text-teal q-pa-sm">
+            <q-btn
+              type="submit"
+              :label="`${isEditCheck ? 'แก้ไขตำแหน่ง' : 'เพิ่มตำแหน่ง'}`"
+              color="public"
+            />
+          </q-card-actions>
+        </form>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/16_positionEmployee/components/DialogFormPosition.vue b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
new file mode 100644
index 000000000..60d4e1ec2
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
@@ -0,0 +1,701 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type {
+  FormDataPosition,
+  FormPositionRef,
+  DataOption,
+  FormPositionSelect,
+  RowDetailPositions,
+  FormPositionSelectRef,
+  ListMenu,
+} from "@/modules/16_positionEmployee/interface/index/Main";
+import type {
+  OptionType,
+  OptionLevel,
+  OptionExecutive,
+  DataPosition,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogAddPosition from "@/modules/16_positionEmployee/components/DialogAddPosition.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+  orgLevel: Number,
+  treeId: String,
+  actionType: String,
+  rowId: { type: String, default: "" },
+  fetchDataTable: Function,
+  getSummary: Function,
+  shortName: { type: String, required: true },
+});
+
+const isEdit = ref<boolean>(false);
+const modalAdd = ref<boolean>(false);
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isDisValidate = ref<boolean>(false);
+const isPosition = ref<boolean>(false);
+
+const dataCopy = ref<any>();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+  dialogMessageNotify,
+} = mixin;
+
+const search = ref<string>("");
+const type = ref<string>("positionName");
+const optionFilter = ref<DataOption[]>([
+  { id: "positionName", name: "ชื่อตำแหน่ง" },
+  { id: "positionType", name: "กลุ่มงาน" },
+  { id: "positionLevel", name: "ระดับชั้นงาน" },
+]);
+
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "คัดลอก",
+    icon: "mdi-content-copy",
+    type: "copy",
+    color: "blue-6",
+  },
+  {
+    label: "แก้ไข",
+    icon: "mdi-pencil",
+    type: "edit",
+    color: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "remove",
+    color: "red",
+  },
+]);
+
+const rows = ref<RowDetailPositions[]>([]);
+const rowsPositionSelect = ref<RowDetailPositions[]>([]);
+
+const prefixNoRef = ref<Object | null>(null);
+const positionNoRef = ref<Object | null>(null);
+
+const formData = reactive<FormDataPosition>({
+  shortName: props.shortName,
+  prefixNo: "",
+  positionNo: "",
+  suffixNo: "",
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectPositionRef: FormPositionRef = {
+  prefixNo: prefixNoRef,
+  positionNo: positionNoRef,
+};
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posDictName",
+    align: "left",
+    label: "ชื่อตำแหน่ง",
+    sortable: true,
+    field: "posDictName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "posDictName",
+  "posTypeName",
+  "posLevelName",
+]);
+
+async function fetchPosition(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgPosPositionById(id))
+    .then((res) => {
+      const data = res.data.result;
+      formData.prefixNo = data.posMasterNoPrefix;
+      formData.positionNo = data.posMasterNo;
+      formData.suffixNo = data.posMasterNoSuffix;
+      rows.value = data.positions;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectPositionRef) {
+    if (Object.prototype.hasOwnProperty.call(objectPositionRef, key)) {
+      const property = objectPositionRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    if (rows.value.length == 0) {
+      dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
+    } else {
+      onSubmit();
+    }
+  }
+}
+
+/** ฟังชั่น บันทึก */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const positionsData = rows.value.map((e: any) => ({
+      posDictName: e.posDictName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+      posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
+      posLevelId: e.posLevelId, //*ระดับตำแหน่ง
+    }));
+    const body = {
+      posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+      posMasterNo: Number(formData.positionNo), //*เลขที่ตำแหน่ง เป็นตัวเลข
+      posMasterNoSuffix: formData.suffixNo, //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+      orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
+      orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
+      orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
+      orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
+      orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
+      positions: positionsData,
+      // succession: succession.value,
+    };
+    try {
+      const url =
+        props.actionType === "ADD"
+          ? config.API.orgPosMasterEmp
+          : config.API.orgPosMasterByIdEmp(props.rowId);
+      await http[props.actionType === "ADD" ? "post" : "put"](url, body);
+      success($q, "บันทีกข้อมูลสำเร็จ");
+      props.getSummary?.();
+      props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
+      close();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/** input ค้นหา */
+const searchRef = ref<any>(null);
+async function searchInput() {
+  searchRef.value.validate();
+  if (!searchRef.value.hasError) {
+    showLoader();
+    await http
+      .get(
+        config.API.orgEmployeePos +
+          `?keyword=${search.value}&type=${type.value}`
+      )
+      .then((res) => {
+        rowsPositionSelect.value = res.data.result;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * คัดลอกข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function copyDetiail(data: RowDetailPositions) {
+  modalAdd.value = true;
+  dataCopy.value = data;
+}
+/**
+ * แก้ไขข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function editDetiail(data: RowDetailPositions) {
+  isEdit.value = true;
+  modalAdd.value = true;
+  dataCopy.value = data;
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+function addPosition(data: RowDetailPositions) {
+  rows.value = [];
+  rows.value.push(data);
+}
+
+function deletePos(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgEmployeePosById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        searchInput();
+        hideLoader();
+      });
+  });
+}
+
+function clearFormPositionSelect() {
+  isDisValidate.value = true;
+
+  setTimeout(() => {
+    isDisValidate.value = false;
+  }, 1000);
+}
+
+function close() {
+  props.close?.();
+  isPosition.value = false;
+}
+
+async function emitSearch(keyword: string, typeSelect: string) {
+  search.value = await keyword;
+  type.value = await typeSelect;
+
+  await searchInput();
+}
+
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal === true) {
+      if (props.actionType === "ADD") {
+        rowsPositionSelect.value = [];
+        search.value = "";
+        rows.value = [];
+        clearFormPositionSelect();
+        formData.prefixNo = "";
+        formData.positionNo = "";
+        formData.suffixNo = "";
+      } else {
+        props.rowId && fetchPosition(props.rowId);
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 80vw">
+      <DialogHeader
+        :tittle="
+          props.actionType === 'ADD' ? 'เพิ่มอัตรากำลัง' : 'แก้ไขอัตรากำลัง'
+        "
+        :close="close"
+      />
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-section class="q-pa-sm fixed-height">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                >
+                  ข้อมูลอัตรากำลัง
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="row q-col-gutter-sm col-12 q-pa-sm">
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.shortName"
+                      dense
+                      outlined
+                      readonly
+                      for="#shortName"
+                      label="อักษรย่อ"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.prefixNo"
+                      :class="inputEdit(isReadonly)"
+                      ref="prefixNoRef"
+                      dense
+                      outlined
+                      for="#prefixNo"
+                      label="Prefix เลขที่ตำเเหน่ง"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.positionNo"
+                      :class="inputEdit(isReadonly)"
+                      ref="positionNoRef"
+                      dense
+                      outlined
+                      for="#positionNo"
+                      label="เลขที่ตำแหน่ง"
+                      lazy-rules
+                      hide-bottom-space
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                      mask="########################"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.suffixNo"
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      outlined
+                      for="#suffixNo"
+                      label="Suffix เลขที่ตำแหน่ง"
+                    />
+                  </div>
+                  <div class="col-12">
+                    <d-table
+                      ref="table"
+                      :columns="columns"
+                      :rows="rows"
+                      row-key="id"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                      :visible-columns="visibleColumns"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            style="color: #000000; font-weight: 500"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                          <q-th auto-width></q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div v-else-if="col.name === 'posExecutiveName'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+
+                            <div
+                              v-else-if="col.name === 'positionExecutiveField'"
+                            >
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else-if="col.name === 'posLevelName'">
+                              {{
+                                props.row.posLevelName
+                                  ? props.row.isSpecial == true
+                                    ? `${props.row.posLevelName} (ฉ)`
+                                    : props.row.posLevelName
+                                  : "-"
+                              }}
+                            </div>
+                            <div v-else-if="col.name === 'positionArea'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </div>
+                <q-separator />
+
+                <q-card-actions class="bg-white q-pa-xs">
+                  <q-btn
+                    :icon="!isPosition ? 'mdi-menu-right' : 'mdi-menu-down'"
+                    flat
+                    color="teal"
+                    class="q-ml-sm"
+                    label="เพิ่มตำแหน่ง"
+                    @click="isPosition = !isPosition"
+                    ><q-tooltip>{{
+                      !isPosition
+                        ? "คลิกเพื่อแสดงส่วนของการเพิ่มตำแหน่ง"
+                        : "ปิดหน้าต่างการเพิ่มตำแหน่ง"
+                    }}</q-tooltip></q-btn
+                  >
+                  <q-space />
+                </q-card-actions>
+              </q-card>
+            </div>
+          </div>
+
+          <div v-if="isPosition" class="row q-col-gutter-sm q-mt-sm">
+            <div class="col-12">
+              <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                >
+                  เลือกตำแหน่งที่ต้องการเพิ่ม
+                  <q-btn
+                    icon="mdi-plus"
+                    flat
+                    round
+                    color="teal"
+                    @click="() => (modalAdd = true)"
+                    ><q-tooltip>สร้างตำแหน่ง</q-tooltip></q-btn
+                  >
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="q-pa-sm">
+                  <div class="row col-12 q-col-gutter-sm items-start">
+                    <div class="col-12 col-sm-6 col-md-3">
+                      <q-select
+                        label="ค้นหาจาก"
+                        v-model="type"
+                        :options="optionFilter"
+                        emit-value
+                        dense
+                        map-options
+                        outlined
+                        option-label="name"
+                        option-value="id"
+                      />
+                    </div>
+
+                    <div class="col-12 col-sm-6 col-md-6">
+                      <q-input
+                        ref="searchRef"
+                        :class="inputEdit(isReadonly)"
+                        v-model="search"
+                        outlined
+                        clearable
+                        dense
+                        lazy-rules
+                        label="คำค้น"
+                        hide-bottom-space
+                        :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
+                        @keydown.enter.prevent="searchInput()"
+                      />
+                    </div>
+
+                    <div class="col-12 col-sm-6 col-md-3">
+                      <q-btn
+                        color="primary"
+                        icon="search"
+                        label="ค้นหา"
+                        class="full-width q-pa-sm"
+                        @click="searchInput()"
+                      >
+                      </q-btn>
+                    </div>
+                  </div>
+
+                  <div class="full-width q-mt-sm">
+                    <d-table
+                      ref="table"
+                      :columns="columns"
+                      :rows="rowsPositionSelect"
+                      row-key="id"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                      :visible-columns="visibleColumns"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            style="color: #000000; font-weight: 500"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                          <q-th auto-width></q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            @click="addPosition(props.row)"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div v-else-if="col.name === 'posExecutiveName'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+
+                            <div
+                              v-else-if="col.name === 'positionExecutiveField'"
+                            >
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else-if="col.name === 'posLevelName'">
+                              {{
+                                props.row.posLevelName
+                                  ? props.row.isSpecial == true
+                                    ? `${props.row.posLevelName} (ฉ)`
+                                    : props.row.posLevelName
+                                  : "-"
+                              }}
+                            </div>
+
+                            <div v-else-if="col.name === 'positionArea'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                          <q-td auto-width>
+                            <q-btn
+                              flat
+                              dense
+                              icon="mdi-dots-vertical"
+                              class="q-pa-none q-ml-xs"
+                              color="grey-13"
+                            >
+                              <q-menu anchor="bottom middle" self="top middle">
+                                <q-list
+                                  dense
+                                  v-for="(item, index) in listMenu"
+                                  :key="index"
+                                >
+                                  <q-item
+                                    clickable
+                                    v-close-popup
+                                    @click="
+                                      item.type === 'copy'
+                                        ? copyDetiail(props.row)
+                                        : item.type === 'edit'
+                                        ? editDetiail(props.row)
+                                        : deletePos(props.row.id)
+                                    "
+                                  >
+                                    <q-item-section avatar>
+                                      <q-icon
+                                        :color="item.color"
+                                        :name="item.icon"
+                                        size="sm"
+                                      />
+                                    </q-item-section>
+                                    <q-item-section>{{
+                                      item.label
+                                    }}</q-item-section>
+                                  </q-item>
+                                </q-list>
+                              </q-menu>
+                            </q-btn>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+  <DialogAddPosition
+    v-model:modalAdd="modalAdd"
+    :emitSearch="emitSearch"
+    :data="dataCopy"
+    v-model:is-edit="isEdit"
+    :get-data="searchInput"
+  />
+</template>
+
+<style scoped>
+.fixed-height {
+  overflow-y: auto;
+  height: 80vh;
+}
+</style>
diff --git a/src/modules/16_positionEmployee/components/DialogHistoryPos.vue b/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
new file mode 100644
index 000000000..7f1e3791e
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type { HistoryPos } from "@/modules/16_positionEmployee/interface/response/organizational";
+
+import Header from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+const store = usePositionEmp();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const $q = useQuasar();
+const modal = defineModel<boolean>("modal", { required: true });
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orgShortName",
+    align: "left",
+    label: "อักษรย่อ",
+    sortable: true,
+    field: "orgShortName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNoPrefix",
+    align: "left",
+    label: " Prefix เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNoPrefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNoSuffix",
+    align: "left",
+    label: "Suffix เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNoSuffix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>();
+
+const props = defineProps({
+  rowId: {
+    type: String,
+  },
+});
+
+async function fetchHistoryPos(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgPosHistory(id))
+    .then((res) => {
+      const data: HistoryPos[] = res.data.result;
+      const list = data.map((e: HistoryPos) => ({
+        ...e,
+        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
+        posMasterNoPrefix: e.posMasterNoPrefix ?? "-",
+        posMasterNo: e.posMasterNo ?? "-",
+        posMasterNoSuffix: e.posMasterNoSuffix ?? "-",
+      }));
+      rows.value = list;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && props.rowId && fetchHistoryPos(props.rowId);
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal">
+    <q-card style="width: 700px; max-width: 80vw">
+      <Header
+        :tittle="'ประวัติตำแหน่ง'"
+        :close="
+          () => {
+            modal = false;
+          }
+        "
+      />
+      <q-separator />
+
+      <q-card-section class="q-pt-none q-pa-sm">
+        <d-table
+          flat
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="id"
+          no-data-label="ไม่มีข้อมูล"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{
+                    store.typeOrganizational === "current"
+                      ? props.rowIndex + 1
+                      : props.rowIndex + 1 == 1
+                      ? "1 (แบบร่าง)"
+                      : props.rowIndex + 1 == 2
+                      ? "2 (ปัจจุบัน)"
+                      : props.rowIndex + 1
+                  }}
+                </div>
+
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/16_positionEmployee/components/DialogMovePos.vue b/src/modules/16_positionEmployee/components/DialogMovePos.vue
new file mode 100644
index 000000000..c63eb86ce
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogMovePos.vue
@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type {
+  OrgTree,
+  PosMaster2,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+import type {
+  MovePos,
+  FilterMaster,
+} from "@/modules/16_positionEmployee/interface/request/organizational";
+import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
+
+import HeaderDialog from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+
+const $q = useQuasar();
+const store = usePositionEmp();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const totalPage = defineModel<number>("totalPage", { required: true });
+const nodeTree = defineModel<OrgTree[]>("nodeTree", { required: true });
+const columns = defineModel<QTableProps[]>("columns", {});
+const rows = defineModel<PosMaster2[]>("rows", { required: true });
+
+const props = defineProps({
+  fetchDataTree: {
+    type: Function,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  rowId: {
+    type: String,
+    required: true,
+  },
+  mainTree: {
+    type: Object,
+    required: true,
+  },
+});
+
+const title = ref<string>("ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน");
+const filterTree = ref<string>("");
+const filterRef = ref();
+const selectedTree = ref<string>("");
+const levelTree = ref<number>(0);
+
+const filterTable = ref<string>("");
+const selectedFilter = ref<PosMaster2[]>([]);
+
+function resetFilter() {
+  filterTree.value = "";
+  filterRef.value.focus();
+}
+
+function updateSelected(data: DataTree) {
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
+}
+
+const isDisable = computed(() => {
+  if (selectedTree.value === "" && selectedFilter.value.length === 0) {
+    return true;
+  } else return false;
+});
+
+function onClickMovePos() {
+  if (selectedTree.value === "" || selectedTree.value === null) {
+    console.log("เลือกหน่วยงาน");
+    dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่จะย้ายไป");
+  } else if (selectedFilter.value.length === 0) {
+    console.log("เลือกตำแห่นง");
+    dialogMessageNotify($q, "กรุณาเลือกตำแห่นงที่จะย้าย");
+  } else {
+    dialogConfirm(
+      $q,
+      async () => {
+        const position = selectedFilter.value.map((e: PosMaster2) => e.id);
+        const body: MovePos = {
+          id: selectedTree.value,
+          type: levelTree.value,
+          positionMaster: position,
+        };
+        showLoader();
+        await http
+          .post(config.API.orgPosMove, body)
+          .then(() => {
+            props.fetchDataTree?.(store.draftId);
+            modal.value = false;
+            success($q, "ย้ายตำแหน่งสำเร็จ");
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      },
+      "ยืนยันการย้ายตำแหน่ง",
+      "ต้องการยืนยันการย้ายตำแหน่งนี้หรือไม่ ?"
+    );
+  }
+}
+
+watch(
+  () => modal.value,
+  () => {
+    reqMaster.value.page = 1;
+    filterTree.value = "";
+
+    title.value = `ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน ${props.mainTree.orgName}`;
+    if (modal.value && props.type === "SINGER") {
+      const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId);
+      selectedFilter.value = data;
+      selectedTree.value = "";
+    } else {
+      selectedFilter.value = [];
+      selectedTree.value = "";
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" full-width persistent>
+    <q-card>
+      <HeaderDialog :tittle="title" :close="() => (modal = false)" />
+      <q-separator />
+
+      <q-card-section class="q-pt-none bg-grey-2 q-pa-sm">
+        <div class="row">
+          <q-card bordered class="col-12 col-sm-8 q-pa-sm">
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกตำแหน่งที่ต้องการย้าย</q-toolbar-title
+              >
+              <q-space />
+
+              <div>
+                <q-input outlined dense v-model="filterTable" label="ค้นหา" />
+              </div>
+            </q-toolbar>
+
+            <d-table
+              flat
+              bordered
+              :rows="rows"
+              :columns="columns"
+              row-key="id"
+              :filter="filterTable"
+              no-data-label="ไม่มีข้อมูล"
+              selection="multiple"
+              v-model:selected="selectedFilter"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{
+                        (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="reqMaster.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="totalPage"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template>
+            </d-table>
+          </q-card>
+
+          <q-card
+            bordered
+            class="col-12 col-sm-4 scroll q-pa-sm"
+            style="height: 750px"
+          >
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกหน่วยงาน/ส่วนราชการปลายทาง</q-toolbar-title
+              >
+            </q-toolbar>
+
+            <q-input
+              ref="filterRef"
+              dense
+              outlined
+              v-model="filterTree"
+              label="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterTree !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <q-tree
+              class="q-pa-md q-gutter-sm"
+              dense
+              default-expand-all
+              selected-color="primary"
+              :nodes="nodeTree"
+              node-key="orgTreeId"
+              label-key="labelName"
+              :filter="filterTree"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+            >
+              <template v-slot:default-header="prop">
+                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+
+                <q-item
+                  clickable
+                  :active="selectedTree == prop.node.orgTreeId"
+                  @click.stop="updateSelected(prop.node)"
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
+          </q-card>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn
+          unelevated
+          label="ย้ายตำแหน่ง"
+          color="public"
+          @click="onClickMovePos"
+          class="q-px-md"
+          :disable="isDisable"
+        >
+          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>
diff --git a/src/modules/16_positionEmployee/components/DialogPositionDetail.vue b/src/modules/16_positionEmployee/components/DialogPositionDetail.vue
new file mode 100644
index 000000000..2f4db32b4
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogPositionDetail.vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** import type*/
+import type { QTableProps } from "quasar";
+import type {
+  FormDetailPosition,
+  Position,
+} from "@/modules/16_positionEmployee/interface/index/organizational";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+
+/**use*/
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const store = usePositionEmp();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+/**Props*/
+const modal = defineModel<boolean>("positionDetail", { required: true });
+const prosp = defineProps({
+  dataDetailPos: { type: Object, require: true },
+});
+
+/** formData*/
+const formData = reactive<FormDetailPosition>({
+  positionNo: "", //*เลขที่ตำแหน่ง
+  positionType: "", //*ตำแหน่งประเภท
+  positionPathSide: "", //*ตำแหน่งในสายงาน
+  positionLine: "", //*สายงาน
+  positionSide: "", //*ด้าน/สาขา
+  positionLevel: "", //*ระดับตำแหน่ง
+  positionExecutive: "", //*ตำแหน่งทางการบริหาร
+  positionExecutiveSide: "", //*ด้านทางการบริหาร
+  status: "", //*สถานะตำแหน่ง
+});
+
+// const columns = ref<QTableProps["columns"]>([
+//   {
+//     name: "no",
+//     align: "left",
+//     label: "ลำดับ",
+//     sortable: false,
+//     field: "no",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionName",
+//     align: "left",
+//     label: "ตำแหน่งในสายงาน",
+//     sortable: true,
+//     field: "positionName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionField",
+//     align: "left",
+//     label: "สายงาน",
+//     sortable: true,
+//     field: "positionField",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "posTypeName",
+//     align: "left",
+//     label: "ประเภทตำเเหน่ง",
+//     sortable: true,
+//     field: "posTypeName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "posLevelName",
+//     align: "left",
+//     label: "ระดับตำแหน่ง",
+//     sortable: true,
+//     field: "posLevelName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "posExecutiveName",
+//     align: "left",
+//     label: "ตำแหน่งทางการบริหาร",
+//     sortable: true,
+//     field: "posExecutiveName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionExecutiveField",
+//     align: "left",
+//     label: "ด้านทางการบริหาร",
+//     sortable: true,
+//     field: "positionExecutiveField",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionArea",
+//     align: "left",
+//     label: "ด้าน/สาขา",
+//     sortable: true,
+//     field: "positionArea",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+// ]);
+// const row = ref<Position[]>([]);
+
+/** function ปิด popup*/
+function close() {
+  modal.value = false;
+}
+
+/** callblack function ทำเมื่อเปิด popup set เลขที่ตำแหน่ง และสถานะตำแหน่ง */
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      if (prosp.dataDetailPos) {
+        formData.positionNo = prosp.dataDetailPos.posMasterNo;
+        formData.status =
+          store.typeOrganizational === "current"
+            ? "ปกติ"
+            : store.typeOrganizational === "draft"
+            ? "แบบร่าง"
+            : "ยุบเลิก";
+        formData.positionType = prosp.dataDetailPos.posTypeName;
+        formData.positionPathSide = prosp.dataDetailPos.positionName;
+        formData.positionLine = prosp.dataDetailPos.positionField;
+        formData.positionSide = prosp.dataDetailPos.positionArea
+          ? prosp.dataDetailPos.positionArea
+          : "-";
+        formData.positionLevel = prosp.dataDetailPos.posLevelName;
+        formData.positionExecutive = prosp.dataDetailPos.posExecutiveName
+          ? prosp.dataDetailPos.posExecutiveName
+          : "-";
+        formData.positionExecutiveSide = prosp.dataDetailPos
+          .positionExecutiveField
+          ? prosp.dataDetailPos.positionExecutiveField
+          : "-";
+
+        // row.value = prosp.dataDetailPos.positions.map((e: Position) => ({
+        //   ...e,
+        //   positionName: e.positionName ? e.positionName : "-",
+        //   positionField: e.positionField ? e.positionField : "-",
+        //   posTypeName: e.posTypeName ? e.posTypeName : "-",
+        //   posLevelName: e.posLevelName ? e.posLevelName : "-",
+        //   posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
+        //   positionExecutiveField: e.positionExecutiveField
+        //     ? e.positionExecutiveField
+        //     : "-",
+        //   positionArea: e.positionArea ? e.positionArea : "-",
+        // }));
+      }
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card :style="$q.screen.gt.md ? 'min-width: 40vw' : 'min-width: 80vw'">
+        <DialogHeader :tittle="`รายละเอียดตำแหน่ง`" :close="close" />
+        <q-separator />
+        <q-card-section>
+          <div class="q-px-md">
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>เลขที่ตำแหน่ง</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionNo }}</p>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ตำแหน่งประเภท</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionType }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ตำแหน่งในสายงาน</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionPathSide }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>สายงาน</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionLine }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ด้าน/สาขา</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionSide }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ระดับตำแหน่ง</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionLevel }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ตำแหน่งทางการบริหาร</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionExecutive }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ด้านทางการบริหาร</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionExecutiveSide }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>สถานะตำแหน่ง</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.status }}</p>
+              </div>
+            </div>
+
+            <!-- <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-12">
+                <d-table
+                  flat
+                  :columns="columns"
+                  :rows="row"
+                  row-key="id"
+                  dense
+                  hide-bottom
+                  class="custom-header-table-expand"
+                >
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                    </q-tr>
+                  </template>
+                  <template v-slot:body="props">
+                    <q-tr :props="props" class="cursor-pointer">
+                      <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <div v-if="col.name == 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </div>
+
+                        <div v-else>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </div> -->
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
diff --git a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
new file mode 100644
index 000000000..99dc1566c
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
@@ -0,0 +1,726 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  Position,
+  SeaechResult,
+  FormPositionFilter,
+} from "@/modules/16_positionEmployee/interface/index/organizational";
+import type {
+  DataOption,
+  NewPagination,
+} from "@/modules/16_positionEmployee/interface/index/Main";
+import type {
+  OptionType,
+  OptionLevel,
+  SelectPerson,
+  TypePos,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+
+/** importCompoonents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** import*Store*/
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+
+/** use*/
+const $q = useQuasar();
+const store = usePositionEmp();
+const {
+  dialogConfirm,
+  showLoader,
+  success,
+  hideLoader,
+  messageError,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchActive: {
+    type: Function,
+    require: true,
+  },
+  fetchDataTable: {
+    type: Function,
+    required: true,
+  },
+  getSummary: {
+    type: Function,
+    required: true,
+  },
+  dataDetailPos: { type: Object, require: true },
+});
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isDisValidate = ref<boolean>(false);
+const typeOpsMain = ref<DataOption[]>([]);
+const levelOpsMain = ref<DataOption[]>([]);
+const typeOps = ref<DataOption[]>([]);
+const levelOps = ref<DataOption[]>([]);
+const dataLevel = ref<TypePos[]>([]);
+const selected = ref<Position[]>([]);
+const isSit = ref<boolean>(false);
+
+const formData = reactive<FormPositionFilter>({
+  positionNo: "", //*เลขที่ตำแหน่ง
+  positionType: "", //*เลขที่ตำแหน่ง
+  positionLevel: "", //*เลขที่ตำแหน่ง
+  personal: "", //*เลขที่ตำแหน่ง
+  position: "", //*เลขที่ตำแหน่ง
+  status: "",
+});
+
+/** Table*/
+const visibleColumnsResult = ref<String[]>([
+  "no",
+  "citizenId",
+  "name",
+  "posTypeName",
+  "posLevelName",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsResult = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const row = ref<Position[]>([]);
+const rowResult = ref<SeaechResult[]>([]);
+
+/** function closePopup*/
+function close() {
+  modal.value = false;
+}
+
+/** function เรียกข้อมูลประเภทตำแหน่ง*/
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      dataLevel.value = res.data.result;
+      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      typeOps.value = typeOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/** function เรียกข้แมูลระดับตำแหน่ง*/
+function updateSelectType(val: string) {
+  const listLevel: any = dataLevel.value.find((e: TypePos) => e.id === val);
+  levelOpsMain.value = listLevel?.posLevels.map((e: OptionLevel) => ({
+    id: e.id,
+    name: e.posLevelName,
+  }));
+  levelOps.value = levelOpsMain.value;
+  formData.positionLevel = "";
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  if (selected.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกรายการตำแหน่ง");
+  } else if (selectedProfile.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกคนครอง");
+  } else {
+    onSubmit();
+  }
+}
+
+/** function ยืนยันการบันทึกข้อมูล */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    () => {
+      const body = {
+        posMaster: props.dataDetailPos?.id, //*id อัตรากำลัง
+        position: selected.value[0]?.id, //*id ตำแหน่ง
+        profileId: selectedProfile.value[0]?.id, //*id profile
+        isSit: isSit.value, //*นั่งทับที่ไหม
+      };
+      showLoader();
+      http
+        .post(config.API.orgProfile, body)
+        .then(() => {
+          props.fetchDataTable?.(store.treeId, store.level, false);
+          props.getSummary();
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(async () => {
+          modal.value = await false;
+          close();
+          hideLoader();
+        });
+    },
+    "ยืนยันการเลือกคนครอง",
+    "ต้องการยืนยันการเลือกคนครองตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
+const totalPage = ref<number>(0);
+const selectedProfile = ref<SeaechResult[]>([]);
+/** functiuon ค้นหาคนครอง */
+async function searchData() {
+  showLoader();
+  const reqBody = {
+    posTypeId: formData.positionType, // id ประเภทตำแหน่ง
+    posLevelId: formData.positionLevel, // id ระดับตำแหน่ง
+    position: formData.position, // ตำแหน่ง
+    page: page.value, //*หน้า
+    pageSize: pageSize.value, //*จำนวนแถวต่อหน้า
+    keyword: formData.personal, //นามสกุล ชื่อ สกุล เลขบัตร
+  };
+  await http
+    .post(config.API.orgSearchProfile, reqBody)
+    .then((res) => {
+      totalPage.value = Math.ceil(res.data.result.total / pageSize.value);
+      const list = res.data.result.data.map((e: SelectPerson) => ({
+        id: e.id,
+        citizenId: e.citizenId,
+        name: `${e.prefix + e.firstName + " " + e.lastName}`,
+        posTypeName: e.posType ?? "-",
+        positionName: e.position ?? "-",
+        posLevelName: e.posLevel ?? "-",
+      }));
+      rowResult.value = list;
+    })
+
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function update PageSize*/
+function updatePagination(newPagination: NewPagination) {
+  pageSize.value = newPagination.rowsPerPage;
+  page.value = 1;
+}
+
+/** function เคลียร์Form*/
+function clearForm() {
+  formData.positionType = "";
+  formData.positionLevel = "";
+  formData.personal = "";
+  formData.position = "";
+  row.value = [];
+  rowResult.value = [];
+  selected.value = [];
+  selectedProfile.value = [];
+  isSit.value = false;
+}
+
+/** function เคลียร์ตำแหน่ง*/
+function clearPosition() {
+  formData.positionType = "";
+  formData.positionLevel = "";
+}
+
+/** callback function ทำงานเมื่อเปิด popup*/
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value == true) {
+      await clearForm();
+      await fetchType();
+
+      if (props.dataDetailPos) {
+        formData.positionNo = props.dataDetailPos.posMasterNo;
+        formData.status =
+          store.typeOrganizational === "current"
+            ? "ปกติ"
+            : store.typeOrganizational === "draft"
+            ? "แบบร่าง"
+            : "ยุบเลิก";
+        row.value = props.dataDetailPos.positions.map((e: Position) => ({
+          ...e,
+          positionName: e.positionName ? e.positionName : "-",
+          positionField: e.positionField ? e.positionField : "-",
+          posTypeName: e.posTypeName ? e.posTypeName : "-",
+          posLevelName: e.posLevelName ? e.posLevelName : "-",
+          posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
+          positionExecutiveField: e.positionExecutiveField
+            ? e.positionExecutiveField
+            : "-",
+          positionArea: e.positionArea ? e.positionArea : "-",
+        }));
+        if (row.value.length === 1) {
+          selected.value.push(row.value[0]);
+        }
+      }
+    }
+  }
+);
+
+/** callback function ทำงานการค้นหาข้อมุลคนครองเมื่อมีการ update Pagination*/
+watch([() => page.value, () => pageSize.value], () => {
+  searchData();
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80vw">
+      <form @submit.prevent="validateForm">
+        <DialogHeader :tittle="`เลือกคนครอง`" :close="close" />
+        <q-separator />
+
+        <q-card-section class="fixed-height">
+          <div class="q-px-md">
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="text-bold text-body1">
+                <p>เลขที่ตำแหน่ง</p>
+              </div>
+              <div class="text-grey-8 q-ml-sm text-body1">
+                <p>{{ formData.positionNo }}</p>
+              </div>
+            </div>
+
+            <q-card
+              bordered
+              class="row col-12"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                รายการตำแหน่ง
+              </div>
+              <div class="col-12"><q-separator /></div>
+
+              <div class="q-pa-sm col-12">
+                <d-table
+                  flat
+                  :columns="columns"
+                  :rows="row"
+                  row-key="id"
+                  dense
+                  hide-pagination
+                  class="custom-header-table"
+                  selection="single"
+                  v-model:selected="selected"
+                >
+                  <template v-slot:header-selection="scope">
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="scope.checkBox"
+                    />
+                  </template>
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <q-th class="text-center"> </q-th>
+
+                      <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                    </q-tr>
+                  </template>
+                  <template v-slot:body="props">
+                    <q-tr :props="props" class="cursor-pointer">
+                      <q-td class="text-center">
+                        <q-checkbox
+                          keep-color
+                          color="primary"
+                          dense
+                          v-model="props.selected"
+                        />
+                      </q-td>
+
+                      <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <div v-if="col.name == 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </div>
+
+                        <div v-else>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </q-card>
+
+            <q-card
+              bordered
+              class="row col-12 q-mt-sm"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                ค้นหาคนครอง
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="col-12">
+                <div class="row q-col-gutter-sm q-pa-sm">
+                  <div class="col-2">
+                    <q-input
+                      ref="positionExecutiveFieldRef"
+                      v-model="formData.personal"
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      outlined
+                      for="#search"
+                      label="ค้นหาจากชื่อ-นามสกุล หรือเลขประจำตัวประชาชน"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      ref="positionRef"
+                      v-model="formData.position"
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      outlined
+                      for="#position"
+                      label="ตำแหน่งในสายงาน"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-2">
+                    <q-select
+                      ref="positionTypeRef"
+                      :class="inputEdit(isReadonly)"
+                      label="ประเภทตำแหน่ง"
+                      v-model="formData.positionType"
+                      :options="typeOps"
+                      emit-value
+                      dense
+                      @update:model-value="updateSelectType"
+                      map-options
+                      outlined
+                      option-label="name"
+                      option-value="id"
+                      lazy-rules
+                      hide-bottom-space
+                      ><template v-if="formData.positionType" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="clearPosition()"
+                          class="cursor-pointer"
+                        /> </template
+                    ></q-select>
+                  </div>
+                  <div class="col-2">
+                    <q-select
+                      ref="positionLevelRef"
+                      :class="inputEdit(isReadonly)"
+                      label="ระดับตำแหน่ง"
+                      v-model="formData.positionLevel"
+                      :disable="formData.positionType == ''"
+                      :options="levelOps"
+                      emit-value
+                      dense
+                      map-options
+                      outlined
+                      option-label="name"
+                      option-value="id"
+                      lazy-rules
+                      hide-bottom-space
+                    >
+                      <template v-if="formData.positionLevel" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="formData.positionLevel = ''"
+                          class="cursor-pointer"
+                        /> </template
+                    ></q-select>
+                  </div>
+                  <div class="col-2">
+                    <q-btn
+                      label="ค้นหา"
+                      color="teal-5"
+                      class="full-height"
+                      icon="search"
+                      @click="searchData"
+                    />
+                  </div>
+
+                  <q-select
+                    for="#select"
+                    v-model="visibleColumnsResult"
+                    multiple
+                    outlined
+                    dense
+                    options-dense
+                    :display-value="$q.lang.table.columns"
+                    emit-value
+                    map-options
+                    :options="columnsResult"
+                    option-value="name"
+                    options-cover
+                    style="min-width: 150px"
+                    class="col-xs-12 col-sm-3 col-md-2"
+                  />
+                  <div class="col-12">
+                    <d-table
+                      ref="table"
+                      flat
+                      :columns="columnsResult"
+                      :rows="rowResult"
+                      row-key="id"
+                      dense
+                      class="custom-header-table"
+                      :paging="true"
+                      :rows-per-page-options="[10, 25, 50, 100]"
+                      @update:pagination="updatePagination"
+                      selection="single"
+                      v-model:selected="selectedProfile"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th auto-width />
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <q-td>
+                            <q-checkbox
+                              keep-color
+                              color="primary"
+                              dense
+                              v-model="props.selected"
+                            />
+                          </q-td>
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{
+                                (page - 1) * Number(pageSize) +
+                                props.rowIndex +
+                                1
+                              }}
+                            </div>
+
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                      <template v-slot:pagination="scope">
+                        <q-pagination
+                          v-model="page"
+                          active-color="primary"
+                          color="dark"
+                          :max="totalPage"
+                          size="sm"
+                          boundary-links
+                          direction-links
+                        ></q-pagination>
+                      </template>
+                    </d-table>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+
+            <div class="row col-12 q-pa-sm">
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="isSit"
+                label="ทับที่"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn type="submit" :label="`ยืนยัน`" color="public" />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.fixed-height {
+  overflow-y: auto;
+  height: 80vh;
+}
+</style>
diff --git a/src/modules/16_positionEmployee/components/DialogSortPosition.vue b/src/modules/16_positionEmployee/components/DialogSortPosition.vue
new file mode 100644
index 000000000..a205a1751
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogSortPosition.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { ref, watch, defineProps } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+
+const $q = useQuasar();
+const store = usePositionEmp();
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("sortPosition", { required: true });
+const rows = ref<any>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    required: true,
+    label: "ชื่อ",
+    align: "left",
+    field: "name",
+    sortable: true,
+  },
+]);
+
+const props = defineProps({
+  fetchDataTable: Function,
+});
+
+function onDrop(from: any, to: any) {
+  onDropRow(from, to);
+}
+
+function onDropRow(from: any, to: any) {
+  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
+}
+
+function save() {
+  dialogConfirm($q, () => {
+    const data = rows.value;
+    const dataId = data.map((item: any) => item.id);
+    showLoader();
+    http
+      .post(config.API.orgPosSort, {
+        id: store.treeId,
+        type: store.level,
+        sortId: dataId,
+      })
+      .then((res) => {
+        modal.value = false;
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchDataTable?.(store.treeId, store.level, false);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function getData() {
+  showLoader();
+  http
+    .post(config.API.orgPosMasterList, {
+      id: store.treeId,
+      type: store.level,
+      isAll: false,
+      page: 1,
+      pageSize: 100,
+      keyword: "",
+      revisionId: store.draftId,
+    })
+    .then((res) => {
+      const dataList = res.data.result.data;
+      const dataMap = dataList.map((item: any) => ({
+        id: item.id,
+        name: `${item.orgShortname}${item.posMasterNoPrefix}${item.posMasterNo}${item.posMasterNoSuffix}`,
+        posMasterNoPrefix: item.posMasterNoPrefix,
+        posMasterNo: item.posMasterNo,
+        posMasterNoSuffix: item.posMasterNoSuffix,
+      }));
+      rows.value = dataMap;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      getData();
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card style="min-width: 50vw">
+        <DialogHeader
+          :tittle="`จัดลำดับตำแหน่ง`"
+          :close="() => (modal = false)"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <q-table
+            v-if="rows.length > 0"
+            v-draggable-table="{
+              options: {
+                mode: 'row',
+                onlyBody: true,
+                dragHandler: 'th,td',
+              },
+              onDrop,
+            }"
+            flat
+            bordered
+            :rows="rows"
+            :columns="columns"
+            :rows-per-page-options="[100]"
+            row-key="orgTreeId"
+            hide-bottom
+            hide-pagination
+            hide-header
+          />
+          <div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            :disable="rows.length === 0"
+            type="submit"
+            :label="`บันทึก`"
+            color="public"
+            @click="save"
+          />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
diff --git a/src/modules/16_positionEmployee/components/DialogSuccession.vue b/src/modules/16_positionEmployee/components/DialogSuccession.vue
new file mode 100644
index 000000000..c705207e3
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogSuccession.vue
@@ -0,0 +1,413 @@
+<script setup lang="ts">
+import { ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/16_positionEmployee/interface/index/Main";
+import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
+import type {
+  OrgTree,
+  PosMaster,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+import type {
+  FilterMaster,
+  Inherit,
+} from "@/modules/16_positionEmployee/interface/request/organizational";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+
+/** use*/
+const $q = useQuasar();
+const store = usePositionEmp();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  rowId: { type: String, default: "" },
+});
+
+/*************************** Tree ***********************************/
+const filterTree = ref<string>("");
+const nodeTree = ref<OrgTree[]>([]);
+const selectedTree = ref<string>("");
+const filterRef = ref();
+const levelTree = ref<number>(0);
+
+/** function เรียกข้อมูล Tree แบบ ปัจจุบัน*/
+async function fetchTree() {
+  showLoader();
+  const id: string = store.activeId ? store.activeId?.toString() : "";
+  await http
+    .get(config.API.orgByid(id))
+    .then((res) => {
+      console.log(res);
+      nodeTree.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** resetFilterTree*/
+function resetFilter() {
+  filterTree.value = "";
+  filterRef.value.focus();
+}
+
+/** function เลือกหน่วยงาน*/
+async function updateSelected(data: DataTree) {
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
+  reqMaster.id = await data.orgTreeId;
+  reqMaster.type = await data.orgLevel;
+  await fetchTable();
+}
+
+/*************************** TABLE ***********************************/
+/** columns*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<PosMaster[]>([]);
+const reqMaster = reactive<FilterMaster>({
+  id: "",
+  type: 0,
+  isAll: false,
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  revisionId: store.activeId,
+});
+const totalRow = ref<number>(0);
+const selectedPos = ref<PosMaster[]>([]);
+
+/** function เรียกข้อมูล Table Position*/
+async function fetchTable() {
+  selectedPos.value = [];
+  await http
+    .post(config.API.orgPosMasterList, reqMaster)
+    .then((res) => {
+      totalRow.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      const data = res.data.result.data;
+      const list = data.map((e: PosMaster) => ({
+        ...e,
+        posMasterNo:
+          e.orgShortname +
+          e.posMasterNoPrefix +
+          e.posMasterNo +
+          e.posMasterNoSuffix,
+      }));
+      rows.value = list;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  reqMaster.pageSize = newPagination.rowsPerPage;
+  reqMaster.page = 1;
+}
+
+/** funcion ค้นหาข้อมูลใน Table*/
+async function filterKeyword() {
+  reqMaster.page = 1;
+  fetchTable();
+}
+
+/** function ยืนยันกาสืบทอดตำแหน่ง */
+function onClickConfirm() {
+  if (selectedPos.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่งสืบทอด");
+  } else {
+    dialogConfirm(
+      $q,
+      async () => {
+        console.log(props.rowId, selectedPos.value[0].id);
+        const body: Inherit = {
+          draftPositionId: props.rowId,
+          publishPositionId: selectedPos.value[0].id,
+        };
+        showLoader();
+        await http
+          .post(config.API.orgPosDNA, body)
+          .then(() => {
+            success($q, "การสืบทอดตำแหน่งสำเร็จ");
+            modal.value = false;
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      },
+      "ยืนยันการสืบทอดตำแหน่ง",
+      "ต้องการยืนยันการสืบทอดตำแหน่งนี้หรือไม่ ?"
+    );
+  }
+}
+
+/** callblck function ทำการ fetch ข้อมูล tree เมื่อเปิด popup*/
+watch(
+  () => modal.value,
+  async () => {
+    modal.value ? await fetchTree() : clearForm();
+  }
+);
+
+/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
+watch([() => reqMaster.page, () => reqMaster.pageSize], async () => {
+  await fetchTable();
+});
+
+/** function clear ข้อมูล*/
+function clearForm() {
+  nodeTree.value = [];
+  rows.value = [];
+  selectedTree.value = "";
+  reqMaster.id = "";
+  reqMaster.type = 0;
+  reqMaster.isAll = false;
+  reqMaster.page = 1;
+  reqMaster.pageSize = 10;
+  reqMaster.keyword = "";
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" full-width persistent>
+    <q-card>
+      <Header
+        :tittle="'เลือกตำแหน่งที่ต้องการสืบทอดจากโครงสร้างปัจจุบัน'"
+        :close="
+          () => {
+            modal = false;
+          }
+        "
+      />
+      <q-separator />
+
+      <q-card-section class="q-pt-none q-pa-sm bg-grey-2">
+        <div class="row">
+          <q-card
+            bordered
+            class="col-12 col-sm-4 scroll q-pa-sm"
+            style="height: 75vh"
+          >
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
+              >
+            </q-toolbar>
+
+            <q-input
+              ref="filterRef"
+              dense
+              outlined
+              v-model="filterTree"
+              label="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterTree !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <q-tree
+              class="q-pa-md q-gutter-sm"
+              dense
+              default-expand-all
+              selected-color="primary"
+              :nodes="nodeTree"
+              node-key="orgTreeId"
+              label-key="labelName"
+              :filter="filterTree"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+            >
+              <template v-slot:default-header="prop">
+                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+
+                <q-item
+                  clickable
+                  :active="selectedTree == prop.node.orgTreeId"
+                  @click.stop="updateSelected(prop.node)"
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
+          </q-card>
+
+          <q-card bordered class="col-12 col-sm-8 q-pa-sm">
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกตำแหน่งที่ต้องการสืบทอด</q-toolbar-title
+              >
+              <q-space />
+
+              <div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="reqMaster.keyword"
+                  label="ค้นหา"
+                  @keyup.enter="filterKeyword"
+                />
+              </div>
+            </q-toolbar>
+            <div class="col-12">
+              <d-table
+                flat
+                bordered
+                :rows="rows"
+                :columns="columns"
+                row-key="id"
+                no-data-label="ไม่มีข้อมูล"
+                ref="table"
+                :paging="true"
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                @update:pagination="updatePagination"
+                selection="single"
+                v-model:selected="selectedPos"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width></q-th>
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td>
+                      <q-checkbox
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="props.selected"
+                      />
+                    </q-td>
+
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'">
+                        {{ props.rowIndex + 1 }}
+                      </div>
+
+                      <div v-else>
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-slot:pagination="scope">
+                  <q-pagination
+                    v-model="reqMaster.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="totalRow"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                  ></q-pagination>
+                </template>
+              </d-table>
+            </div>
+          </q-card>
+        </div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>
diff --git a/src/modules/16_positionEmployee/components/TreeMain.vue b/src/modules/16_positionEmployee/components/TreeMain.vue
new file mode 100644
index 000000000..cdba203f6
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/TreeMain.vue
@@ -0,0 +1,625 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { ListMenu } from "@/modules/16_positionEmployee/interface/index/Main";
+import type { OrgTree } from "@/modules/16_positionEmployee/interface/response/organizational";
+import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
+
+/** importStore*/
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const store = usePositionEmp();
+const {
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = useCounterMixin();
+
+/** props*/
+const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
+const nodeId = defineModel<string>("nodeId", { required: true });
+const shortName = defineModel<string>("shortName", { required: true });
+const props = defineProps({
+  fetchDataTree: {
+    type: Function,
+    require: true,
+  },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+  },
+});
+
+/** ListMenuTree*/
+const listAdd = ref<ListMenu[]>([
+  {
+    label: "เพิ่ม",
+    icon: "add",
+    type: "ADD",
+    color: "primary",
+  },
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    type: "EDIT",
+    color: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "DEL",
+    color: "red",
+  },
+
+  {
+    label: "ประวัติ",
+    icon: "history",
+    type: "HISTORY",
+    color: "purple",
+  },
+  {
+    label: "จัดลำดับ",
+    icon: "mdi-sort",
+    type: "SORT",
+    color: "blue-6",
+  },
+  {
+    label: "ดูรายละเอียด",
+    icon: "mdi-eye",
+    type: "DETAIL",
+    color: "blue-9",
+  },
+]);
+
+const filter = ref<string>("");
+const nodes = ref<Array<OrgTree>>([]);
+const dataSort = ref<Array<any>>([]);
+const lazy = ref(nodes);
+const expanded = ref<Array<any>>([]);
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+const orgLevel = ref<number>(0);
+const type = ref<number>(0);
+const orgId = ref<string>("");
+
+/**
+ * funtion เลือกข้อมูล Tree
+ * @param data ข่อมูล Tree
+ */
+function updateSelected(data: DataTree) {
+  shortName.value = data.orgTreeShortName;
+
+  if (!store.treeId || store.treeId != data.orgTreeId) {
+    store.treeId = data.orgTreeId;
+    store.level = data.orgLevel;
+
+    nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
+
+    data.orgTreeId &&
+      props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
+    /** ดึงข้อมูลสถิติจำนวนด้านบน*/
+    http
+      .post(config.API.orgSummaryEmp, {
+        id: data.orgTreeId, //*Id node
+        type: data.orgLevel, //*ประเภทnode
+        isNode: false, //*นับทั้ง node ไหม
+      })
+      .then(async (res: any) => {
+        const data = await res.data.result;
+        if (data) {
+          store.getSumPosition({
+            totalPosition: data.totalPosition,
+            totalPositionCurrentUse: data.totalPositionCurrentUse,
+            totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+            totalPositionNextUse: data.totalPositionNextUse,
+            totalPositionNextVacant: data.totalPositionNextVacant,
+            totalRootPosition: data.totalPosition,
+            totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+            totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+            totalRootPositionNextUse: data.totalPositionNextUse,
+            totalRootPositionNextVacant: data.totalPositionNextVacant,
+          });
+        }
+      });
+  }
+}
+
+const breakLoop = ref<boolean>(false);
+
+/**
+ * function แก้ไขโครสร้าง
+ * @param id ID โครงสร้าง
+ * @param type ละดับโครงสร้าง
+ * @param data ข้อมูลโครงสร้าง
+ * @param orgRootCode
+ */
+async function edit(id: string, type: string, data: any, orgRootCode: string) {
+  breakLoop.value = false;
+  const targetNodeId = id;
+
+  for (let index = 0; index < nodes.value.length; index++) {
+    const element = nodes.value[index];
+
+    searchAndReplace(element, targetNodeId, data, type, orgRootCode);
+
+    if (breakLoop.value) break;
+  }
+}
+
+/**
+ * function แก้ไขโครสร้าง
+ * @param treeNode
+ * @param organizationId ID โครงสร้าง
+ * @param data ข้อมูลโครงสร้าง
+ * @param type ละดับโครงสร้าง
+ * @param orgRootCode
+ */
+function searchAndReplace(
+  treeNode: any,
+  organizationId: string,
+  data: any,
+  type: string,
+  orgRootCode: string
+) {
+  if (treeNode.orgTreeId === organizationId) {
+    let newData = {
+      ...treeNode,
+      orgTreeName: data[`org${type}Name`],
+      orgTreeShortName: data[`org${type}ShortName`],
+      orgCode:
+        data.orgRootRank == "DEPARTMENT"
+          ? data[`org${type}Code`] + "00"
+          : orgRootCode + data[`org${type}Code`],
+      orgTreeCode: data[`org${type}Code`],
+      orgTreePhoneEx: data[`org${type}PhoneEx`],
+      orgTreePhoneIn: data[`org${type}PhoneIn`],
+      orgTreeFax: data[`org${type}Fax`],
+      orgTreeRank: data[`org${type}Rank`],
+    };
+
+    Object.assign(treeNode, newData);
+    breakLoop.value = true;
+  } else if (treeNode.children) {
+    for (const child of treeNode.children) {
+      searchAndReplace(child, organizationId, data, type, orgRootCode);
+    }
+  }
+}
+
+/**
+ * function ลบข้อมูลโครงสร้าง
+ * @param rootId RootID
+ * @param treeId TreeID
+ */
+async function deleteUpdate(rootId: string, treeId: string) {
+  breakLoop.value = false;
+  if (rootId) {
+    for (let index = 0; index < nodes.value.length; index++) {
+      const element = nodes.value[index];
+      deleteNode(element, rootId, treeId);
+
+      if (breakLoop.value) break;
+    }
+  } else {
+    nodes.value = nodes.value.filter((x: any) => x.orgTreeId != treeId);
+  }
+}
+
+/**
+ * function ลบข้อมูลโครงสร้าง
+ * @param treeNode ข้อมูล Tree
+ * @param rootId RootID
+ * @param treeId TreeID
+ */
+function deleteNode(treeNode: any, rootId: string, treeId: string): boolean {
+  if (treeNode.orgTreeId === rootId) {
+    const childrenNew = treeNode.children.filter(
+      (x: any) => x.orgTreeId != treeId
+    );
+    let newData = {
+      ...treeNode,
+      children: childrenNew,
+    };
+    Object.assign(treeNode, newData);
+
+    breakLoop.value = true;
+  } else if (treeNode.children) {
+    for (const child of treeNode.children) {
+      deleteNode(child, rootId, treeId);
+    }
+  }
+
+  return false;
+}
+
+const modalHistory = ref<boolean>(false);
+const modalSortAgency = ref<boolean>(false);
+const dialogAgency = ref<boolean>(false);
+const actionType = ref<string>("");
+const dataNode = ref<any>();
+const treeId = ref<string>("");
+
+/**
+ * funcion openPopup เพิ่มหน่วยงาน
+ * @param level ระดับโครงสร้าง
+ * @param node ข้อมูล โครงสร้าง
+ */
+function onClickAgency(level: number, node: OrgTree | {}) {
+  dialogAgency.value = !dialogAgency.value;
+  orgLevel.value = level;
+  dataNode.value = node;
+  actionType.value = "ADD";
+}
+
+const dialogDetail = ref<boolean>(false);
+/**
+ * funtion ดูรายละเอียดโครงสร้าง
+ * @param id ID โครงสร้าง
+ * @param level ระดับโครงสร้าง
+ */
+function onClickDetail(id: string, level: number) {
+  showLoader();
+  treeId.value = id;
+  dialogDetail.value = !dialogDetail.value;
+  orgLevel.value = level;
+}
+
+/**
+ * function openPopup แก้ไขข้อมูลโครงสร้าง
+ * @param node ข้อมูล โครงสร้าง
+ */
+async function onClickEdit(node: OrgTree) {
+  console.log(node);
+
+  dialogAgency.value = !dialogAgency.value;
+  actionType.value = "EDIT";
+  orgLevel.value = node.orgLevel;
+  dataNode.value = node;
+}
+
+/**
+ * function ยื่นยันการลบโครงสร้าง
+ * @param type  ระดับโครงสร้าง
+ * @param id  ID โครงสร้าง
+ * @param rootId RootID
+ */
+async function onClickDel(type: number, id: string, rootId: string) {
+  const level = store.checkLevel(type);
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.orgLevelByid(level.toLocaleLowerCase(), id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        deleteUpdate(rootId, id);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function การจัดลำดับโครงสร้าง
+ * @param id ID โครงสร้าง
+ * @param level ระดับโครงสร้าง
+ */
+async function onClickSort(id: string, level: number) {
+  type.value = level;
+  modalSortAgency.value = true;
+  if (id) {
+    breakLoop.value = false;
+    const orgId = id;
+    for (let index = 0; index < nodes.value.length; index++) {
+      const data = nodes.value[index];
+      searchAndReplace(data, orgId);
+      if (breakLoop.value) break;
+    }
+  } else {
+    const dataList = nodes.value;
+    const dataMap = dataList.map((item: any) => ({
+      orgTreeId: item.orgTreeId,
+      orgLevel: item.orgLevel,
+      orgTreeName: item.orgTreeName,
+      orgTreeShortName: item.orgTreeShortName,
+      orgRevisionId: item.orgRevisionId,
+    }));
+
+    dataSort.value = dataMap;
+  }
+
+  function searchAndReplace(data: any, id: string) {
+    if (data.orgTreeId === id) {
+      dataSort.value = data.children;
+      breakLoop.value = true;
+    } else if (data.children) {
+      for (const child of data.children) {
+        searchAndReplace(child, id);
+      }
+    }
+  }
+}
+
+/**
+ *  function ดูประวัดโครงสร้าง
+ * @param level ระดับโครงสร้าง
+ * @param id ID โครงสร้าง
+ */
+function onClickHistory(level: number, id: string) {
+  type.value = level;
+  orgId.value = id;
+  modalHistory.value = true;
+}
+
+watch(
+  () => nodeTEST.value,
+  () => {
+    nodes.value = nodeTEST.value;
+  }
+);
+</script>
+
+<template>
+  <div class="col-12 q-py-sm q-px-sm">
+    <div class="q-gutter-sm">
+      <div class="row q-col-gutter-sm q-pl-sm">
+        <div class="col-2" v-if="store.typeOrganizational === 'draft'">
+          <q-btn
+            dense
+            flat
+            round
+            color="primary"
+            icon="add"
+            @click="onClickAgency(0, {})"
+          >
+            <q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
+          </q-btn>
+        </div>
+
+        <div
+          :class="store.typeOrganizational === 'draft' ? 'col-10' : 'col-12'"
+        >
+          <q-input dense outlined v-model="filter" label="ค้นหา">
+            <template v-slot:append>
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
+        </div>
+      </div>
+      <div class="bg-white tree-container q-pa-xs">
+        <q-tree
+          class="q-pa-sm q-gutter-sm"
+          dense
+          default-expand-all
+          :nodes="lazy"
+          node-key="orgTreeId"
+          label-key="labelName"
+          :filter="filter"
+          :no-results-label="notFound"
+          :no-nodes-label="noData"
+          v-model:expanded="expanded"
+        >
+          <template v-slot:default-header="prop">
+            <q-item
+              clickable
+              :active="nodeId == prop.node.orgTreeId"
+              @click.stop="updateSelected(prop.node)"
+              active-class="my-list-link text-primary text-weight-medium"
+              class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+            >
+              <div>
+                <div class="text-weight-medium">
+                  {{ prop.node.orgTreeName }}
+                </div>
+                <div class="text-weight-light text-grey-8">
+                  {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                  {{
+                    prop.node.orgTreeShortName == null
+                      ? null
+                      : prop.node.orgTreeShortName
+                  }}
+                </div>
+              </div>
+
+              <q-btn
+                v-if="store.typeOrganizational === 'draft'"
+                flat
+                dense
+                icon="mdi-dots-vertical"
+                class="q-ml-xs"
+                color="grey-13"
+                size="12px"
+                round
+              >
+                <q-menu>
+                  <q-list
+                    dense
+                    v-for="(item, index) in prop.node.orgLevel === 4
+                      ? listAdd.slice(1, 6)
+                      : listAdd"
+                    :key="index"
+                    style="min-width: 100px"
+                  >
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="
+                        item.type === 'EDIT'
+                          ? onClickEdit(prop.node)
+                          : item.type === 'ADD'
+                          ? onClickAgency(prop.node.orgLevel + 1, prop.node)
+                          : item.type === 'DETAIL'
+                          ? onClickDetail(
+                              prop.node.orgTreeId,
+                              prop.node.orgLevel
+                            )
+                          : item.type === 'DEL'
+                          ? onClickDel(
+                              prop.node.orgLevel,
+                              prop.node.orgTreeId,
+                              prop.node.orgRootId
+                            )
+                          : item.type === 'SORT'
+                          ? onClickSort(prop.node.orgRootId, prop.node.orgLevel)
+                          : item.type === 'HISTORY'
+                          ? onClickHistory(
+                              prop.node.orgLevel,
+                              prop.node.orgTreeId
+                            )
+                          : null
+                      "
+                    >
+                      <q-item-section avatar style="min-width: 20px">
+                        <q-icon
+                          size="17px"
+                          :color="item.color"
+                          :name="item.icon"
+                        />
+                      </q-item-section>
+                      <div v-if="prop.node.orgLevel === 0">
+                        <q-item-section
+                          v-if="
+                            item.type === 'EDIT' ||
+                            item.type === 'DEL' ||
+                            item.type === 'HISTORY' ||
+                            item.type === 'SORT'
+                          "
+                        >
+                          {{ item.label }}หน่วยงาน
+                        </q-item-section>
+                        <q-item-section v-else-if="item.type === 'ADD'">
+                          {{ item.label }}ส่วนราชการ
+                        </q-item-section>
+                        <q-item-section v-else>
+                          {{ item.label }}
+                        </q-item-section>
+                      </div>
+
+                      <div v-else>
+                        <q-item-section
+                          v-if="
+                            item.type === 'ADD' ||
+                            item.type === 'EDIT' ||
+                            item.type === 'DEL' ||
+                            item.type === 'HISTORY' ||
+                            item.type === 'SORT'
+                          "
+                          >{{ item.label }}ส่วนราชการ</q-item-section
+                        >
+                        <q-item-section v-else>{{ item.label }}</q-item-section>
+                      </div>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+
+              <q-btn
+                v-else
+                flat
+                dense
+                icon="mdi-dots-vertical"
+                class="q-pa-none q-ml-xs"
+                color="grey-13"
+                size="12px"
+                round
+              >
+                <q-menu>
+                  <q-list
+                    dense
+                    v-for="(item, index) in listAdd.slice(5, 6)"
+                    :key="index"
+                    style="min-width: 100px"
+                  >
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="
+                        onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
+                      "
+                    >
+                      <q-item-section avatar style="min-width: 20px">
+                        <q-icon
+                          size="17px"
+                          :color="item.color"
+                          :name="item.icon"
+                        />
+                      </q-item-section>
+                      <q-item-section>{{ item.label }}</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-item>
+          </template>
+        </q-tree>
+      </div>
+    </div>
+  </div>
+
+  <!-- เพิ่มหน่วยงาน -->
+  <DialogAgency
+    :modal="dialogAgency"
+    :close="onClickAgency"
+    v-model:orgLevel="orgLevel"
+    :fetchDataTree="props.fetchDataTree"
+    :fetchDataTable="props.fetchDataTable"
+    v-model:actionType="actionType"
+    :dataNode="dataNode"
+    :edit="edit"
+  />
+
+  <!-- รายละเอียดโครงสร้าง -->
+  <DialogStructureDetail
+    v-model:structure-detail="dialogDetail"
+    v-model:treeId="treeId"
+    v-model:orgLevel="orgLevel"
+  />
+
+  <DialogSortAgency
+    v-model:sort-agency="modalSortAgency"
+    v-model:data="dataSort"
+    :fetchDataTree="props.fetchDataTree"
+    v-model:type="type"
+  />
+  <DialogHistory
+    v-model:history="modalHistory"
+    v-model:type="type"
+    v-model:org-id="orgId"
+  />
+</template>
+
+<style scoped>
+.tree-container {
+  overflow: auto;
+  height: 73vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>
diff --git a/src/modules/16_positionEmployee/components/TreeTable.vue b/src/modules/16_positionEmployee/components/TreeTable.vue
new file mode 100644
index 000000000..ce96087a0
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/TreeTable.vue
@@ -0,0 +1,853 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import genreport from "@/plugins/genreportxlsx";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  ListMenu,
+  NewPagination,
+} from "@/modules/16_positionEmployee/interface/index/Main";
+import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
+import type {
+  PosMaster2,
+  OrgTree,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+import type { DataPosition } from "@/modules/16_positionEmployee/interface/index/organizational";
+
+/** importComponents*/
+import DialogFormPosotion from "@/modules/16_positionEmployee/components/DialogFormPosition.vue";
+import DialogPositionDetail from "@/modules/16_positionEmployee/components/DialogPositionDetail.vue";
+import DialogSort from "@/modules/16_positionEmployee/components/DialogSortPosition.vue";
+import DialogMovePos from "@/modules/16_positionEmployee/components/DialogMovePos.vue";
+import DialogHistoryPos from "@/modules/16_positionEmployee/components/DialogHistoryPos.vue";
+import DialogSelectPerson from "@/modules/16_positionEmployee/components/DialogSelectPerson.vue";
+import DialogSuccession from "@/modules/16_positionEmployee/components/DialogSuccession.vue";
+
+/** importStore*/
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const store = usePositionEmp();
+const { showLoader, hideLoader, messageError, success, dialogRemove } =
+  useCounterMixin();
+
+/** prosp*/
+const nodeTree = defineModel<any>("nodeTree", { required: true });
+const orgLevel = defineModel<number>("orgLevel", { required: true });
+const treeId = defineModel<string>("treeId", { required: true });
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const totalPage = defineModel<number>("totalPage", { required: true });
+const posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
+// const shortName = defineModel<string>("shortName", { required: true });
+const props = defineProps({
+  filterKeyword: { type: Function, require: true, default: () => {} },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+    default: () => {},
+  },
+  shortName: { type: String, required: true },
+  fetchDataTree: {
+    type: Function,
+    require: true,
+    default: () => {},
+  },
+  mainTree: {
+    type: Object,
+    require: true,
+  },
+});
+
+const modalSelectPerson = ref<boolean>(false);
+const rowId = ref<string>("");
+const actionType = ref<string>("");
+/** ListMenu Table*/
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    type: "EDIT",
+    color: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "DEL",
+    color: "red",
+  },
+  {
+    label: "ย้ายตำแหน่ง",
+    icon: "mdi-cursor-move",
+    type: "MOVE",
+    color: "blue-10",
+  },
+  {
+    label: "สืบทอดตำแหน่ง",
+    icon: "mdi-account-multiple-outline",
+    type: "INHERIT",
+    color: "deep-orange",
+  },
+  {
+    label: "ประวัติตำแหน่ง",
+    icon: "history",
+    type: "HISTORY",
+    color: "deep-purple",
+  },
+]);
+const document = ref<any>([
+  {
+    name: "บัญชี 1",
+    val: "report1",
+  },
+  {
+    name: "บัญชี 2",
+    val: "report2",
+  },
+  {
+    name: "บัญชี 3",
+    val: "report3",
+  },
+]);
+
+/** columns*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: false,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    field: "positionName",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: false,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: false,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionIsSelected",
+    align: "left",
+    label: "คนครอง",
+    sortable: false,
+    field: "positionIsSelected",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const columnsExpand = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const dialogPosition = ref<boolean>(false);
+/**
+ * function  openPopup เพิ่มอัตรากำลัง
+ * @param type ประเภท
+ * @param id id
+ */
+function onClickPosition(type: string, id: string) {
+  rowId.value = id ? id : "";
+  actionType.value = type;
+  dialogPosition.value = !dialogPosition.value;
+}
+
+const dialogDetail = ref<boolean>(false);
+const dataDetailPos = ref<DataPosition[]>([]);
+/**
+ * function ดูรายละเอียดประวัติตำแหน่ง
+ * @param data ข้อมูล ประวัติตำแหน่ง
+ */
+function onClickViewDetail(data: DataPosition[]) {
+  dialogDetail.value = !dialogDetail.value;
+  dataDetailPos.value = data;
+}
+
+/**
+ * function ยืนยันการลบตำแหน่ง
+ * @param id id ตำแหน่ง
+ */
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.orgPosMasterByIdEmp(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
+        getSummary();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+const modalSort = ref<boolean>(false);
+/** fdunction จัดลำดับตำแหน่ง */
+function onClickSort() {
+  modalSort.value = true;
+}
+
+const modalDialogMMove = ref<boolean>(false);
+const typeMove = ref<string>("");
+/**
+ * function openPopup  ย้ายตำแหน่ง
+ * @param id ID ตำแหน่ง
+ * @param type ประเภท [ALL,SINGER]
+ */
+function onClickMovePos(id: string, type: string) {
+  modalDialogMMove.value = !modalDialogMMove.value;
+  typeMove.value = type;
+  rowId.value = id;
+}
+
+const modalDialogHistoryPos = ref<boolean>(false);
+/**
+ * function ดูประวัติตำแหน่ง
+ * @param id ID ตำแหน่ง
+ */
+function onClickHistoryPos(id: string) {
+  modalDialogHistoryPos.value = !modalDialogHistoryPos.value;
+  rowId.value = id;
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  reqMaster.value.pageSize = newPagination.rowsPerPage;
+  reqMaster.value.page = 1;
+}
+
+/** function openPopup เลือกตนครอง*/
+function openSelectPerson(data: DataPosition[]) {
+  modalSelectPerson.value = true;
+  dataDetailPos.value = data;
+}
+
+/** ลบคนครอง */
+function removePerson(id: string) {
+  dialogRemove(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .post(config.API.orgDeleteProfileEmp(id))
+        .then(() => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          props.fetchDataTable?.(
+            reqMaster.value.id,
+            reqMaster.value.type,
+            false
+          );
+          getSummary();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการลบคนครอง",
+    "ต้องการยืนยันการลบคนครองนี้ใช่หรือไม่?"
+  );
+}
+
+const modalDialogSuccession = ref<boolean>(false);
+/** function openPopup สืบทอดตำแหน่ง*/
+function onClickInherit(id: string) {
+  modalDialogSuccession.value = !modalDialogSuccession.value;
+  rowId.value = id;
+}
+
+/** ดึงข้อมูลสถิติจำนวนด้านบน*/
+function getSummary() {
+  showLoader();
+  http
+    .post(config.API.orgSummaryEmp, {
+      id: reqMaster.value.id, //*Id node
+      type: reqMaster.value.type, //*ประเภทnode
+      isNode: reqMaster.value.isAll, //*นับทั้ง node ไหม
+    })
+    .then(async (res: any) => {
+      const data = await res.data.result;
+
+      store.getSumPosition({
+        totalPosition: data.totalPosition,
+        totalPositionCurrentUse: data.totalPositionCurrentUse,
+        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalPositionNextUse: data.totalPositionNextUse,
+        totalPositionNextVacant: data.totalPositionNextVacant,
+        totalRootPosition: data.totalPosition,
+        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalRootPositionNextUse: data.totalPositionNextUse,
+        totalRootPositionNextVacant: data.totalPositionNextVacant,
+      });
+    })
+    .catch((err) => {
+      // messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function DownloadReport*/
+async function onClickDownloadReport(val: string, name: string) {
+  showLoader();
+  await http
+    .get(config.API.orgReportEmp(val))
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        genreport(data, name);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+</script>
+
+<template>
+  <!-- TOOLBAR -->
+  <div class="col-12">
+    <q-toolbar style="padding: 0">
+      <div>
+        <q-btn
+          flat
+          round
+          dense
+          color="primary"
+          icon="add"
+          @click="onClickPosition('ADD', '')"
+        >
+          <q-tooltip>เพิ่มตำแหน่ง</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          flat
+          round
+          dense
+          color="blue"
+          icon="mdi-sort"
+          @click="onClickSort()"
+        >
+          <q-tooltip>จัดลำดับ</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          flat
+          round
+          dense
+          color="blue-10"
+          icon="mdi-cursor-move"
+          @click="onClickMovePos('', 'All')"
+        >
+          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+        </q-btn>
+      </div>
+
+      <q-btn
+        v-if="store.typeOrganizational === 'draft'"
+        flat
+        round
+        dense
+        color="deep-purple"
+        icon="save_alt"
+      >
+        <q-menu>
+          <q-list
+            dense
+            style="min-width: 100px"
+            v-for="(item, index) in document"
+            :key="index"
+          >
+            <q-item
+              clickable
+              v-close-popup
+              @click.stop="onClickDownloadReport(item.val, item.name)"
+            >
+              <q-item-section>{{ item.name }}</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+        <q-tooltip>ดาวน์โหลด</q-tooltip>
+      </q-btn>
+      <q-space />
+      <div class="row q-gutter-md">
+        <div>
+          <q-checkbox
+            keep-color
+            v-model="reqMaster.isAll"
+            label="แสดงตำแหน่งทั้งหมด"
+            color="primary"
+          >
+            <q-tooltip
+              >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+            >
+          </q-checkbox>
+        </div>
+        <div>
+          <q-input
+            outlined
+            dense
+            v-model="reqMaster.keyword"
+            label="ค้นหา"
+            @keydown.enter.prevent="props.filterKeyword(reqMaster.keyword)"
+          >
+            <template v-slot:append>
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
+        </div>
+      </div>
+    </q-toolbar>
+  </div>
+
+  <!-- TABLE -->
+  <div class="col-12">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="posMaster"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      :rows-per-page-options="[10, 25, 50, 100]"
+      @update:pagination="updatePagination"
+      class="tableTb"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width></q-th>
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th auto-width></q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td>
+            <q-btn
+              flat
+              size="14px"
+              color="primary"
+              round
+              dense
+              @click="props.expand = !props.expand"
+              :icon="props.expand ? 'mdi-menu-down' : 'mdi-menu-right'"
+            />
+          </q-td>
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div v-if="col.name == 'no'">
+              {{
+                (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                props.rowIndex +
+                1
+              }}
+            </div>
+            <div v-else-if="col.name === 'posMasterNo'">
+              {{ props.row.isSit ? col.value + " " + "(ทับที่)" : col.value }}
+            </div>
+            <div v-else-if="col.name === 'posLevelName'">
+              {{
+                props.row.posLevelName
+                  ? props.row.isSpecial == true
+                    ? `${props.row.posLevelName} (ฉ)`
+                    : props.row.posLevelName
+                  : "-"
+              }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td>
+            <q-btn
+              flat
+              dense
+              icon="mdi-dots-vertical"
+              class="q-pa-none q-ml-xs"
+              color="grey-13"
+              size="12px"
+            >
+              <q-menu>
+                <q-list dense style="min-width: 150px">
+                  <!-- เลือกคนครอง -->
+                  <q-item
+                    v-if="
+                      props.row.positionIsSelected == 'ว่าง' &&
+                      store.typeOrganizational === 'draft'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="openSelectPerson(props.row)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon
+                          color="secondary"
+                          size="17px"
+                          name="mdi-account"
+                        />
+                        <div class="q-pl-md">เลือกคนครอง</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-else-if="
+                      props.row.positionIsSelected != 'ว่าง' &&
+                      store.typeOrganizational === 'draft'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="removePerson(props.row.id)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon
+                          color="red"
+                          size="17px"
+                          name="mdi-account-remove"
+                        />
+                        <div class="q-pl-md">ลบคนครอง</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-for="(item, index) in store.typeOrganizational === 'draft'
+                      ? listMenu
+                      : listMenu.filter((e) => e.type === 'HISTORY')"
+                    :key="index"
+                    clickable
+                    v-close-popup
+                    @click="
+                      item.type === 'EDIT'
+                        ? onClickPosition('EDIT', props.row.id)
+                        : item.type === 'DEL'
+                        ? onClickDelete(props.row.id)
+                        : item.type === 'MOVE'
+                        ? onClickMovePos(props.row.id, 'SINGER')
+                        : item.type === 'HISTORY'
+                        ? onClickHistoryPos(props.row.id)
+                        : item.type === 'INHERIT'
+                        ? onClickInherit(props.row.id)
+                        : null
+                    "
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon
+                          :color="item.color"
+                          size="17px"
+                          :name="item.icon"
+                        />
+                        <div class="q-pl-md">{{ item.label }}</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="props.row.positionIsSelected != 'ว่าง'"
+                    clickable
+                    v-close-popup
+                    @click="onClickViewDetail(props.row)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon color="blue" size="17px" name="mdi-eye" />
+                        <div class="q-pl-md">ดูรายละเอียด</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </q-tr>
+
+        <q-tr v-show="props.expand" :props="props">
+          <q-td colspan="100%" class="bg-grey-1">
+            <q-card flat bordered class="text-left q-ma-sm">
+              <d-table
+                flat
+                :columns="columnsExpand"
+                :rows="props.row.positions"
+                table-class="text-grey-9"
+                row-key="id"
+                dense
+                hide-bottom
+                bordered
+                separator="vertical"
+                class="custom-header-table-expand"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props" class="bg-grey-2">
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="q-px-sm text-body2 text-black">{{
+                        col.label
+                      }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'" class="text-body2">
+                        {{ props.rowIndex + 1 }}
+                      </div>
+                      <div
+                        v-else-if="col.name === 'posExecutiveName'"
+                        class="text-body2"
+                      >
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+
+                      <div
+                        v-else-if="col.name === 'positionExecutiveField'"
+                        class="text-body2"
+                      >
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+
+                      <div
+                        v-else-if="col.name === 'positionArea'"
+                        class="text-body2"
+                      >
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+
+                      <div v-else class="text-body2">
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </q-card>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-slot:pagination="scope">
+        <q-pagination
+          v-model="reqMaster.page"
+          active-color="primary"
+          color="dark"
+          :max="totalPage"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </template>
+    </d-table>
+  </div>
+
+  <!-- รายละเอียดตำแหน่ง -->
+  <DialogPositionDetail
+    v-model:position-detail="dialogDetail"
+    :dataDetailPos="dataDetailPos"
+  />
+
+  <!-- อัตรากำลัง -->
+  <DialogFormPosotion
+    :modal="dialogPosition"
+    :shortName="shortName"
+    :close="onClickPosition"
+    :orgLevel="orgLevel"
+    :treeId="treeId"
+    :actionType="actionType"
+    :rowId="rowId"
+    v-model:reqMaster="reqMaster"
+    :fetchDataTable="props.fetchDataTable"
+    :getSummary="getSummary"
+  />
+
+  <!-- จัดลำดับ -->
+  <DialogSort
+    v-model:sort-position="modalSort"
+    :fetchDataTable="props.fetchDataTable"
+  />
+
+  <!-- ย้ายตำแหน่ง -->
+  <DialogMovePos
+    v-model:modal="modalDialogMMove"
+    v-model:nodeTree="nodeTree"
+    v-model:columns="columns as QTableProps[]"
+    v-model:rows="posMaster"
+    v-model:totalPage="totalPage"
+    v-model:reqMaster="reqMaster"
+    :fetchDataTree="props.fetchDataTree"
+    :type="typeMove"
+    :rowId="rowId"
+    :mainTree="props.mainTree ? props.mainTree : []"
+  />
+
+  <!-- ประวัติตำแหน่ง -->
+  <DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
+
+  <!-- เลือกคนครอง -->
+  <DialogSelectPerson
+    v-model:modal="modalSelectPerson"
+    :dataDetailPos="dataDetailPos"
+    :fetchDataTable="props.fetchDataTable"
+    :getSummary="getSummary"
+  />
+
+  <!-- สืบทอดตำแหน่ง -->
+  <DialogSuccession v-model:modal="modalDialogSuccession" :rowId="rowId" />
+</template>
+
+<style lang="scss" scoped>
+.custom-header-table-expand {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: white;
+  }
+
+  .q-table thead tr {
+    background: white;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+    padding: 0px;
+  }
+}
+</style>
diff --git a/src/modules/16_positionEmployee/components/TreeView.vue b/src/modules/16_positionEmployee/components/TreeView.vue
new file mode 100644
index 000000000..d82acc8b6
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/TreeView.vue
@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type {
+  OrgTree,
+  PosMaster,
+  Position,
+  PosMaster2,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
+
+/** importComponents*/
+import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
+import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
+
+/** importStore*/
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const store = usePositionEmp();
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+/** props*/
+const historyId = defineModel<string>("historyId", { required: true }); // id ประวัติโครงสร้าง
+const count = defineModel<number>("count", { required: true });
+
+const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
+const nodeId = ref<string>(""); // id ของ Tree
+const orgLevel = ref<number>(0); // levelTree
+const isLoad = ref<boolean>(false); // loadTable
+const isLoadTree = ref<boolean>(false); // loadTable
+const mainTree = ref<OrgTree>();
+
+const selected = ref<string>("");
+
+const reqMaster = reactive<FilterMaster>({
+  id: "",
+  type: 0,
+  isAll: false,
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  revisionId: "",
+});
+const totalPage = ref<number>(1);
+const action1 = ref<boolean>(false);
+const posMaster = ref<PosMaster2[]>([]);
+const shortName = ref<string>("");
+
+/**
+ * function fetch ข้อมูลของ Tree
+ * @param id id โครงสร้าง
+ */
+async function fetchDataTree(id: string) {
+  isLoadTree.value = false;
+  showLoader();
+  await http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      nodeTree.value = data;
+      selected.value = "";
+      nodeId.value = "";
+      store.treeId = "";
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function fetch ข้อรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+async function fetchDataTable(id: string, level: number, action: boolean) {
+  searchAndReplaceOrgName(nodeTree.value, id);
+
+  orgLevel.value = level;
+  reqMaster.id = id;
+  reqMaster.type = level;
+  action1.value = action;
+  if (action) {
+    setTimeout(() => {
+      action1.value = false;
+    }, 1000);
+    reqMaster.isAll = false;
+    reqMaster.page = 1;
+    reqMaster.pageSize = 10;
+    reqMaster.keyword = "";
+    reqMaster.revisionId =
+      store.typeOrganizational == "draft"
+        ? store.draftId
+        : store.typeOrganizational == "current"
+        ? store.activeId
+        : store.historyId;
+  }
+
+  if (action === true) {
+    isLoad.value = true;
+  }
+  await http
+    .post(config.API.orgPosMasterListEmp, reqMaster)
+    .then((res) => {
+      posMaster.value = [];
+      const dataMain: PosMaster[] = [];
+      totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      res.data.result.data.forEach((e: PosMaster) => {
+        const p = e.positions;
+        if (p.length !== 0) {
+          const a = p.find((el: Position) => el.positionIsSelected === true);
+          const { id, ...rest } = a ? a : p[0];
+          const test = { ...e, ...rest };
+          dataMain.push(test);
+        }
+      });
+      posMaster.value = store.fetchPosMaster(dataMain);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      posMaster.value = [];
+    })
+    .finally(() => {
+      setTimeout(() => {
+        isLoad.value = false;
+      }, 500);
+    });
+}
+
+/** ดึงข้อมูลสถิติจำนวนด้านบน*/
+function getSummary() {
+  http
+    .post(config.API.orgSummaryEmp, {
+      id: reqMaster.id, //*Id node
+      type: reqMaster.type, //*ประเภทnode
+      isNode: reqMaster.isAll, //*นับทั้ง node ไหม
+    })
+    .then(async (res: any) => {
+      const data = await res.data.result;
+      store.getSumPosition({
+        totalPosition: data.totalPosition,
+        totalPositionCurrentUse: data.totalPositionCurrentUse,
+        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalPositionNextUse: data.totalPositionNextUse,
+        totalPositionNextVacant: data.totalPositionNextVacant,
+        totalRootPosition: data.totalPosition,
+        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalRootPositionNextUse: data.totalPositionNextUse,
+        totalRootPositionNextVacant: data.totalPositionNextVacant,
+      });
+    });
+}
+
+/** funcion ค้นหาข้อมูลใน Table*/
+async function filterKeyword() {
+  reqMaster.page = 1;
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+}
+
+function searchAndReplaceOrgName(data: any, targetId: string) {
+  for (const child of data) {
+    if (child.orgTreeId === targetId) {
+      mainTree.value = child;
+
+      return true; // Found the targetId in this level
+    }
+    if (child.children && searchAndReplaceOrgName(child.children, targetId)) {
+      return true; // Found the targetId in the nested children
+    }
+  }
+  return false; // Not found in this branch
+}
+
+/**lifecycle Hook*/
+onMounted(async () => {
+  const id =
+    store.typeOrganizational === "current"
+      ? store.activeId
+      : store.typeOrganizational === "draft"
+      ? store.draftId
+      : historyId.value;
+  id && (await fetchDataTree(id));
+});
+
+/** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
+watch(
+  () => count.value,
+  () => {
+    fetchDataTree(historyId.value);
+  }
+);
+
+/** callblck function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง*/
+watch(
+  () => store.typeOrganizational,
+  () => {
+    const id =
+      store.typeOrganizational === "current" ? store.activeId : store.draftId;
+    id && store.typeOrganizational !== "old" && fetchDataTree(id);
+    nodeId.value = "";
+    store.treeId = "";
+  }
+);
+
+/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
+watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+});
+
+/** callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด*/
+watch(
+  () => reqMaster.isAll,
+  () => {
+    getSummary();
+    if (reqMaster.page !== 1) {
+      reqMaster.page = 1;
+    } else {
+      fetchDataTable(reqMaster.id, reqMaster.type, false);
+    }
+  }
+);
+
+watch(
+  () => store.draftId,
+  () => {
+    store.draftId && fetchDataTree(store.draftId?.toString());
+  }
+);
+</script>
+
+<template>
+  <div class="col-12">
+    <q-card bordered class="col-12 row caedNone">
+      <div class="col-xs-12 col-sm-3 row">
+        <div class="col-12 row no-wrap bg-grey-1">
+          <TreeMain
+            v-model:nodeTree="nodeTree"
+            v-model:shortName="shortName"
+            v-model:nodeId="nodeId"
+            :fetchDataTree="fetchDataTree"
+            :fetchDataTable="fetchDataTable"
+          />
+
+          <div class="col-12 row">
+            <q-separator :vertical="!$q.screen.lt.md" />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-sm-9 q-pa-md row">
+        <div class="col-12 row">
+          <div
+            class="row col-12 justify-center"
+            v-if="isLoad"
+            style="height: 550px"
+          >
+            <div class="col-2">
+              <q-spinner color="primary" size="3em" />
+            </div>
+          </div>
+
+          <div v-else class="col-12 row">
+            <div class="col-12" v-if="nodeId !== ''">
+              <!-- summary -->
+              <q-card
+                bordered
+                v-if="nodeId"
+                class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
+              >
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งทั้งหมด</div>
+                  <q-space />
+                  <q-badge
+                    color="secondary"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.total
+                        : store.sumPosition.totalRoot
+                    "
+                  />
+                </div>
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
+                  <q-space />
+                  <q-badge
+                    color="primary"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.use
+                        : store.sumPosition.useRoot
+                    "
+                  />
+                </div>
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งว่าง</div>
+                  <q-space />
+                  <q-badge
+                    color="red"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.vacant
+                        : store.sumPosition.vacantRoot
+                    "
+                  />
+                </div>
+              </q-card>
+
+              <TreeTable
+                v-if="nodeId !== ''"
+                v-model:nodeTree="nodeTree"
+                v-model:orgLevel="orgLevel"
+                v-model:treeId="nodeId"
+                v-model:reqMaster="reqMaster"
+                v-model:totalPage="totalPage"
+                v-model:posMaster="posMaster"
+                :shortName="shortName"
+                :mainTree="mainTree"
+                :fetchDataTable="fetchDataTable"
+                :filterKeyword="filterKeyword"
+                :fetchDataTree="fetchDataTree"
+              />
+            </div>
+            <div class="row col-12 items-center" v-else>
+              <q-banner class="q-pa-lg col-12 text-center">
+                <q-icon
+                  name="mdi-hand-pointing-left"
+                  size="lg"
+                  color="primary"
+                />
+                <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
+              </q-banner>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style scoped>
+.list-summary .item {
+  border: 1px solid rgb(231, 231, 231);
+  border-radius: 4px;
+  background-color: white;
+}
+</style>
diff --git a/src/modules/16_positionEmployee/interface/index/Main.ts b/src/modules/16_positionEmployee/interface/index/Main.ts
new file mode 100644
index 000000000..598a075b1
--- /dev/null
+++ b/src/modules/16_positionEmployee/interface/index/Main.ts
@@ -0,0 +1,146 @@
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+interface ListMenu {
+  label: string;
+  icon: string;
+  type: string;
+  color: string;
+}
+
+interface FormDataAgency {
+  orgName: string;
+  orgShortName: string;
+  orgCode: string;
+  orgPhoneEx: string;
+  orgPhoneIn: string;
+  orgFax: string;
+  orgLevel: string;
+  orgLevelSub: string;
+}
+
+interface FormDataPosition {
+  shortName: string;
+  prefixNo: string;
+  positionNo: string;
+  suffixNo: string;
+}
+
+interface FormDataNewStructure {
+  orgRevisionId: string;
+  orgRevisionName: string;
+  typeDraft: string;
+}
+
+interface FormAgencyRef {
+  orgName: object | null;
+  orgShortName: object | null;
+  orgCode: object | null;
+  // orgPhoneEx: object | null;
+  // orgPhoneIn: object | null;
+  // orgFax: object | null;
+  orgLevel: object | null;
+  [key: string]: any;
+}
+
+interface FormPositionRef {
+  prefixNo: object | null;
+  positionNo: object | null;
+  [key: string]: any;
+}
+
+interface FormDateTimeRef {
+  dateTime: object | null;
+  [key: string]: any;
+}
+
+interface FormNewStructureRef {
+  orgRevisionName: object | null;
+  orgRevisionId: object | null;
+  type: object | null;
+  [key: string]: any;
+}
+
+interface HistoryType {
+  orgRevisionId: string;
+  orgRevisionName: string;
+  orgRevisionIsCurrent: boolean;
+  orgRevisionIsDraft: boolean;
+  orgRevisionCreatedAt: Date | string;
+}
+interface HistoryPostType {
+  id: string;
+  name: string;
+  lastUpdatedAt: Date;
+  orgRevisionName: string;
+}
+
+interface FormPositionSelect {
+  positionId: string;
+  positionName: string;
+  positionField: string;
+  positionType: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveField: string;
+  positionArea: string;
+}
+
+interface FormPositionSelectRef {
+  positionName: object | null;
+  positionField: object | null;
+  positionType: object | null;
+  positionLevel: object | null;
+  positionExecutive: object | null;
+  positionExecutiveField: object | null;
+  positionArea: object | null;
+  [key: string]: any;
+}
+
+interface RowDetailPositions {
+  id: string;
+  positionId: string;
+  positionName: string;
+  positionField: string;
+  positionType: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveField: string;
+  positionArea: string;
+  posTypeId: string;
+  posLevelId: string;
+  posExecutiveId: string;
+  isSpecial: boolean;
+}
+
+interface NewPagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
+}
+
+export type {
+  Pagination,
+  DataOption,
+  FormDataAgency,
+  FormDataPosition,
+  FormAgencyRef,
+  FormPositionRef,
+  FormDateTimeRef,
+  FormDataNewStructure,
+  FormNewStructureRef,
+  HistoryType,
+  ListMenu,
+  FormPositionSelect,
+  RowDetailPositions,
+  HistoryPostType,
+  FormPositionSelectRef,
+  NewPagination,
+};
diff --git a/src/modules/16_positionEmployee/interface/index/organizational.ts b/src/modules/16_positionEmployee/interface/index/organizational.ts
new file mode 100644
index 000000000..f6f21bd60
--- /dev/null
+++ b/src/modules/16_positionEmployee/interface/index/organizational.ts
@@ -0,0 +1,107 @@
+interface DataPosition {
+  id: string;
+  orgRootId: string;
+  orgChild1Id: string | null;
+  orgChild2Id: string | null;
+  orgChild3Id: string | null;
+  orgChild4Id: string | null;
+  posMasterNoPrefix: string;
+  posMasterNo: string;
+  posMasterNoSuffix: string;
+  orgShortname: string;
+  positions: Position[];
+  positionName: string;
+  positionField: string;
+  posTypeId: string;
+  posTypeName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  positionExecutiveField: string;
+  positionArea: string;
+  positionIsSelected: string | boolean;
+}
+
+interface Position {
+  id: string;
+  positionName: string;
+  positionField: string;
+  posTypeId: string;
+  posTypeName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  positionExecutiveField: string;
+  positionArea: string;
+  positionIsSelected: boolean;
+}
+
+interface FormDetailPosition {
+  positionNo: string;
+  positionType: string;
+  positionPathSide: string;
+  positionLine: string;
+  positionSide: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveSide: string;
+  status: string;
+}
+
+interface DataTree {
+  orgTreeId: string;
+  orgRootId?: string;
+  orgLevel: number;
+  orgName: string;
+  orgTreeName: string;
+  orgTreeShortName: string;
+  orgTreeCode: string;
+  orgCode: string;
+  orgTreeRank: string;
+  orgTreeOrder: number;
+  orgRootCode?: string;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeFax: string;
+  orgRevisionId: string;
+  orgRootName: string;
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+
+  children?: DataTree[];
+}
+
+interface SeaechResult {
+  id: string;
+  citizenId: string;
+  name: string;
+  posTypeName: string;
+  posLevelName: string;
+}
+interface FormPositionFilter {
+  positionNo: string;
+  positionType: string;
+  positionLevel: string;
+  personal: string;
+  position: string;
+  status: string;
+}
+
+export type {
+  DataPosition,
+  Position,
+  FormDetailPosition,
+  DataTree,
+  SeaechResult,
+  FormPositionFilter,
+};
diff --git a/src/modules/16_positionEmployee/interface/request/Main.ts b/src/modules/16_positionEmployee/interface/request/Main.ts
new file mode 100644
index 000000000..b5eb23bd3
--- /dev/null
+++ b/src/modules/16_positionEmployee/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/16_positionEmployee/interface/request/organizational.ts b/src/modules/16_positionEmployee/interface/request/organizational.ts
new file mode 100644
index 000000000..074095c3d
--- /dev/null
+++ b/src/modules/16_positionEmployee/interface/request/organizational.ts
@@ -0,0 +1,21 @@
+interface FilterMaster {
+  id: string; //*Id node
+  type: number; //*ประเภทnode
+  isAll: boolean; //*(true->ทั้งหมด, false->ในระดับตัวเอง)
+  page: number; //*หน้า
+  pageSize: number; //*จำนวนแถวต่อหน้า
+  keyword: string; //ข้อความที่ต้องการค้นหา
+  revisionId?: string
+}
+interface MovePos {
+  id: string;
+  type: number;
+  positionMaster: string[];
+}
+
+interface Inherit {
+  draftPositionId: string;
+  publishPositionId: string;
+}
+
+export type { FilterMaster, MovePos, Inherit };
diff --git a/src/modules/16_positionEmployee/interface/response/organizational.ts b/src/modules/16_positionEmployee/interface/response/organizational.ts
new file mode 100644
index 000000000..d674b5773
--- /dev/null
+++ b/src/modules/16_positionEmployee/interface/response/organizational.ts
@@ -0,0 +1,203 @@
+interface DataActive {
+  activeId: string;
+  activeName: string;
+  draftId: string;
+  draftName: string;
+  isPublic: boolean;
+  orgPublishDate: Date | null;
+}
+
+interface SumPosition {
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+}
+
+interface OrgTree {
+  orgTreeId: string;
+  orgRootId: string;
+  orgLevel: number;
+  orgTreeName: string;
+  orgTreeShortName: string;
+  orgTreeCode: string;
+  orgCode: string;
+  orgTreeRank: string;
+  orgTreeOrder: number | null;
+  orgRootCode: string;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeFax: string;
+  orgRevisionId: string;
+  children: OrgTree[];
+}
+
+interface OrgRevision {
+  orgRevisionCreatedAt: string | null;
+  orgRevisionId: string;
+  orgRevisionIsCurrent: boolean;
+  orgRevisionIsDraft: boolean;
+  orgRevisionName: string;
+}
+
+interface OptionType {
+  id: string;
+  posTypeName: string;
+}
+
+interface OptionLevel {
+  id: string;
+  posLevelName: string;
+}
+
+interface OptionExecutive {
+  id: string;
+  posExecutiveName: string;
+}
+
+interface DataPosition {
+  id: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posTypeId: string;
+  posTypeName: string;
+  positionArea: string;
+  positionExecutiveField: string;
+  positionField: string;
+  positionIsSelected: boolean;
+  positionName: string;
+}
+
+interface Position {
+  id: string; // id ตำแหน่ง
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+}
+
+interface PosMaster {
+  id: string; // id อัตรากำลัง posmaster
+  orgShortname: string; // อักษรย่อตำแหน่ง
+  posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+  posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
+  posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  fullNameCurrentHolder: string | null;
+  fullNameNextHolder: string | null;
+  positions: Position[]; // ตำแหน่ง
+  isSit: boolean;
+  profilePosition: string;
+  profilePostype: string;
+  profilePoslevel: string;
+}
+interface Position2 {
+  id: string; // id ตำแหน่ง
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+}
+
+interface PosMaster2 {
+  id: string; // id อัตรากำลัง posmaster
+  orgShortname: string; // อักษรย่อตำแหน่ง
+  posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+  posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
+  posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positions: Position[]; // ตำแหน่ง
+}
+
+interface HistoryPos {
+  id: string; //id node
+  orgShotName: string; //ชื่อย่อส่วนราชการ
+  lastUpdatedAt: Date; //วันที่แก้ไข
+  posMasterNoPrefix: string; //Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+  posMasterNo: number; //เลขที่ตำแหน่ง เป็นตัวเลข
+  posMasterNoSuffix: string; //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+}
+
+interface SelectPerson {
+  citizenId: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  posLevel: string;
+  posType: string;
+  position: string;
+  prefix: string;
+}
+
+interface PosLevels {
+  id: string;
+  posLevelAuthority: null;
+  posLevelName: string;
+  posLevelRank: number;
+}
+interface TypePos {
+  id: string;
+  PosLevels: PosLevels[];
+  posTypeName: string;
+  posTypeRank: number;
+}
+
+export type {
+  DataActive,
+  OrgTree,
+  OrgRevision,
+  OptionType,
+  OptionLevel,
+  OptionExecutive,
+  DataPosition,
+  PosMaster,
+  PosMaster2,
+  Position,
+  Position2,
+  SumPosition,
+  HistoryPos,
+  SelectPerson,
+  TypePos,
+};
diff --git a/src/modules/16_positionEmployee/router.ts b/src/modules/16_positionEmployee/router.ts
new file mode 100644
index 000000000..9865b0d11
--- /dev/null
+++ b/src/modules/16_positionEmployee/router.ts
@@ -0,0 +1,14 @@
+const mainPage = () => import("@/modules/16_positionEmployee/views/main.vue");
+
+export default [
+  {
+    path: "/position-employee",
+    name: "positionEmployee",
+    component: mainPage,
+    meta: {
+      Auth: true,
+      Key: [1],
+      Role: "positionEmployee",
+    },
+  },
+];
diff --git a/src/modules/16_positionEmployee/store/organizational.ts b/src/modules/16_positionEmployee/store/organizational.ts
new file mode 100644
index 000000000..087677863
--- /dev/null
+++ b/src/modules/16_positionEmployee/store/organizational.ts
@@ -0,0 +1,141 @@
+import { defineStore } from "pinia";
+import { reactive, ref } from "vue";
+
+/** importType*/
+import type {
+  DataActive,
+  SumPosition,
+  PosMaster,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+
+export const usePositionEmp = defineStore("positionEmpStore", () => {
+  const typeOrganizational = ref<string>("current");
+  const statusView = ref<string>("list");
+
+  const dataActive = ref<DataActive>();
+  const activeId = ref<string>();
+  const draftId = ref<string>();
+  const historyId = ref<string>();
+  const treeId = ref<string>();
+  const level = ref<number>();
+  const isPublic = ref<boolean>(false);
+  const orgPublishDate = ref<Date | null>(null);
+  const sumPosition = reactive({
+    total: 0,
+    use: 0,
+    vacant: 0,
+    totalRoot: 0,
+    useRoot: 0,
+    vacantRoot: 0,
+  });
+
+  function getSumPosition(data: SumPosition) {
+    sumPosition.total = data.totalPosition;
+    sumPosition.totalRoot = data.totalRootPosition ? data.totalRootPosition : 0;
+
+    if (typeOrganizational.value == "draft") {
+      sumPosition.use = data.totalPositionNextUse;
+      sumPosition.useRoot = data.totalRootPositionNextUse
+        ? data.totalRootPositionNextUse
+        : 0;
+
+      sumPosition.vacant = data.totalPositionNextVacant;
+      sumPosition.vacantRoot = data.totalRootPositionNextVacant
+        ? data.totalRootPositionNextVacant
+        : 0;
+    } else {
+      sumPosition.use = data.totalPositionCurrentUse;
+      sumPosition.useRoot = data.totalRootPositionCurrentUse
+        ? data.totalRootPositionCurrentUse
+        : 0;
+
+      sumPosition.vacant = data.totalPositionCurrentVacant;
+      sumPosition.vacantRoot = data.totalRootPositionCurrentVacant
+        ? data.totalRootPositionCurrentVacant
+        : 0;
+    }
+  }
+
+  function fetchDataActive(data: DataActive) {
+    activeId.value = data.activeId;
+    draftId.value = data.draftId;
+    dataActive.value = data;
+    isPublic.value = data.isPublic;
+    orgPublishDate.value = data.orgPublishDate;
+  }
+
+  function fetchPosMaster(data: PosMaster[]) {
+    const newPosMaster = data.map((e: PosMaster) => ({
+      ...e,
+      positionIsSelected:
+        typeOrganizational.value === "draft" && e.fullNameNextHolder !== null
+          ? e.fullNameNextHolder
+          : typeOrganizational.value !== "draft" &&
+            e.fullNameCurrentHolder !== null
+          ? e.fullNameCurrentHolder
+          : "ว่าง",
+      posMasterNo:
+        e.orgShortname +
+        e.posMasterNoPrefix +
+        e.posMasterNo +
+        e.posMasterNoSuffix,
+      positionName: e.isSit ? e.profilePosition : e.positionName,
+      posTypeName: e.isSit ? e.profilePostype : e.posTypeName,
+      posLevelName: e.isSit ? e.profilePoslevel : e.posLevelName,
+      posExecutiveName: e.posExecutiveName,
+      isSit: e.isSit,
+    }));
+
+    return newPosMaster;
+  }
+
+  function checkLevel(type: number) {
+    switch (type) {
+      case 0:
+        return "Root";
+      case 1:
+        return "Child1";
+      case 2:
+        return "Child2";
+      case 3:
+        return "Child3";
+      default:
+        return "Child4";
+    }
+  }
+
+  function convertType(type: string) {
+    switch (type) {
+      case "DEPARTMENT":
+        return "ระดับสำนัก";
+      case "OFFICE":
+        return "ระดับกอง/สำนักงาน/ส่วนราชการ/โรงพยาบาล/เทียบเท่ากอง";
+      case "DIVISION":
+        return "ระดับส่วน/กลุ่มภารกิจ";
+      case "SECTION":
+        return "ระดับฝ่าย/กลุ่มงาน";
+      default:
+        return "-";
+    }
+  }
+
+  return {
+    typeOrganizational,
+    statusView,
+
+    //
+    fetchDataActive,
+    checkLevel,
+    convertType,
+    draftId,
+    activeId,
+    historyId,
+    treeId,
+    level,
+    isPublic,
+    orgPublishDate,
+    fetchPosMaster,
+    sumPosition,
+    getSumPosition,
+  };
+});
diff --git a/src/modules/16_positionEmployee/views/main.vue b/src/modules/16_positionEmployee/views/main.vue
new file mode 100644
index 000000000..9093bf021
--- /dev/null
+++ b/src/modules/16_positionEmployee/views/main.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import TreeView from "@/modules/16_positionEmployee/components/TreeView.vue";
+
+/** importStore*/
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+const store = usePositionEmp();
+
+/** สถานะ*/
+const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
+
+/** ประวัติโครงสร้าง*/
+const historyId = ref<string>(""); // ID ประวัติโครงสร้าง
+const count = ref<number>(0);
+
+/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
+async function fetchOrganizationActive() {
+  showLoader();
+  await http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        store.fetchDataActive(data);
+        if (data.activeName === null && data.draftName === null) {
+          isStatusData.value = false;
+        } else {
+          isStatusData.value = true;
+          if (isStatusData.value) {
+            if (data.activeName === null) {
+              // ishasActive.value = true;
+              store.typeOrganizational = "draft";
+            } else if (data.draftName === null) {
+              // ishasDraft.value = true;
+              store.typeOrganizational = "current";
+            }
+          }
+        }
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** lifecycleHook */
+onMounted(async () => {
+  store.typeOrganizational = "current";
+  await fetchOrganizationActive();
+});
+</script>
+
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      อัตรากำลังลูกจ้างประจำฯ
+    </div>
+  </div>
+
+  <q-card flat bordered>
+    <q-card class="my-card">
+      <q-card-section style="padding: 0px">
+        <TreeView v-model:historyId="historyId" v-model:count="count" />
+      </q-card-section>
+    </q-card>
+  </q-card>
+</template>
+
+<style scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 2b49a0802..c40e5cc50 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,6 +8,7 @@ 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 ModulePositionEmployee from "@/modules/16_positionEmployee/router";
 import ModuleRecruiting from "@/modules/03_recruiting/router";
 import ModuleRecruitingNew from "@/modules/04_registryNew/router";
 import ModuleRegistry from "@/modules/04_registry/router";
@@ -49,6 +50,7 @@ const router = createRouter({
         ...ModuleMetadataNew,
         ...ModuleOrganizational,
         ...ModuleOrganizationalNew,
+        ...ModulePositionEmployee,
         ...ModuleRecruiting,
         ...ModuleRecruitingNew,
         ...ModuleRegistry,