diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 063b61d8e..3e642aa5a 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -94,5 +94,8 @@ export default {
   orgCheckAvatar: (id: string) => `${orgProfile}/avatar/profileId/${id}`,
 
   changePosition: `${organization}/placement/change-position`,
+  changePositionById: `${organization}/placement/change-position/profile-all`,
+  changePositionByIdProfile: `${organization}/placement/change-position/profile`,
+
   orgProfileReport: `${orgProfile}-employee/report`,
 };
diff --git a/src/components/Dialogs/AddPersonal.vue b/src/components/Dialogs/AddPersonal.vue
index 1613ddf08..2f2a0903e 100644
--- a/src/components/Dialogs/AddPersonal.vue
+++ b/src/components/Dialogs/AddPersonal.vue
@@ -10,10 +10,20 @@ import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
 const mainStore = useDisciplineMainStore();
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogMessageNotify, showLoader, hideLoader } = mixin;
 
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 interface typeOp {
   id: string;
   name: string;
@@ -33,12 +43,12 @@ interface tableType {
 }
 
 const rows = ref<tableType[]>([]);
-const type = ref<string>("idcard");
+const type = ref<string>("citizenId");
 const search = ref<string>("");
 const selected = ref<any>([]);
 
 const typeOps = ref<typeOp[]>([
-  { id: "idcard", name: "เลขประจำตัวประชาชน" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
   { id: "firstname", name: "ชื่อ" },
   { id: "lastname", name: "นามสกุล" },
 ]);
@@ -112,62 +122,73 @@ const searchRef = ref<any>(null);
 async function searchInput() {
   searchRef.value.validate();
   if (!searchRef.value.hasError) {
-    showLoader();
-    const body = {
-      fieldName: type.value,
-      keyword: search.value,
-    };
-    await http
-      .post(config.API.orgSearchPersonal(), body)
-      .then((res) => {
-        const data = res.data.result;
-        const list = data.map((e: any) => ({
-          personId: e.id,
-          idcard: e.idcard,
-          prefix: e.prefix,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          name: `${e.prefix}${e.firstName}  ${e.lastName}`,
-          posNo: e.posNo ?? "-",
-          position: e.position ?? "-",
-          positionLevel: e.positionLevelName ?? "-",
-          salary: e.salary ?? "-",
-          organization: e.organization ?? "-",
-          phone: e.phone ?? "-",
-          email: e.email ?? "-",
-          root: e.root,
-          rootId: e.rootId,
-          rootShortName: e.rootShortName,
-          child1: e.child1,
-          child1Id: e.child1Id,
-          child1ShortName: e.child1ShortName,
-          child2: e.child2,
-          child2Id: e.child2Id,
-          child2ShortName: e.child2ShortName,
-          child3: e.child3,
-          child3Id: e.child3Id,
-          child3ShortName: e.child3ShortName,
-          child4: e.child4,
-          child4Id: e.child4Id,
-          child4ShortName: e.child4ShortName,
-          posMasterNo: e.posMasterNo,
-          posTypeId: e.posTypeId,
-          posTypeName: e.posTypeName,
-          posLevelId: e.posLevelId,
-          posLevelName: e.posLevelName,
-        }));
-
-        rows.value = list;
-      })
-      .catch((err) => {
-        console.log(err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
+    await getSearch();
   }
 }
 
+async function getSearch() {
+  showLoader();
+  const body = {
+    fieldName: type.value,
+    keyword: search.value,
+  };
+  await http
+    .post(
+      config.API.orgSearchPersonal() +
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${search.value}`,
+      body
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+      const list = data.map((e: any) => ({
+        personId: e.id,
+        idcard: e.citizenId,
+        prefix: e.prefix,
+        firstName: e.firstName,
+        lastName: e.lastName,
+        name: `${e.prefix ? e.prefix :''}${e.firstName ? e.firstName :''}  ${e.lastName ? e.lastName :''}`,
+        posNo: e.posNo ?? "-",
+        position: e.position ?? "-",
+        positionLevel: e.positionLevelName ?? "-",
+        salary: e.salary ?? "-",
+        organization: e.organization ?? "-",
+        phone: e.phone ?? "-",
+        email: e.email ?? "-",
+        root: e.root,
+        rootId: e.rootId,
+        rootShortName: e.rootShortName,
+        child1: e.child1,
+        child1Id: e.child1Id,
+        child1ShortName: e.child1ShortName,
+        child2: e.child2,
+        child2Id: e.child2Id,
+        child2ShortName: e.child2ShortName,
+        child3: e.child3,
+        child3Id: e.child3Id,
+        child3ShortName: e.child3ShortName,
+        child4: e.child4,
+        child4Id: e.child4Id,
+        child4ShortName: e.child4ShortName,
+        posMasterNo: e.posMasterNo,
+        posTypeId: e.posTypeId,
+        posTypeName: e.posTypeName,
+        posLevelId: e.posLevelId,
+        posLevelName: e.posLevelName,
+      }));
+
+      rows.value = list;
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 /** update เมื่อเปลี่ยน option */
 function updateSelect() {
   search.value = "";
@@ -180,6 +201,19 @@ watch(
     }
   }
 );
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getSearch();
+  }
+);
 </script>
 
 <template>
@@ -255,7 +289,22 @@ watch(
             :visible-columns="mainStore.visibleColumnsRespondent"
             :selection="props.selecetSwitch"
             v-model:selected="selected"
+            @update:pagination="updatePagination"
           >
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ total }} รายการ
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(totalList)"
+                size="sm"
+                boundary-links
+                direction-links
+                :max-pages="5"
+                @update:model-value="getSearch"
+              ></q-pagination>
+            </template>
             <template v-slot:header-selection="scope">
               <q-checkbox
                 keep-color
@@ -296,7 +345,11 @@ watch(
                 </td>
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'">
-                    {{ props.rowIndex + 1 }}
+                    {{
+                      (pagination.page - 1) * pagination.rowsPerPage +
+                      props.rowIndex +
+                      1
+                    }}
                   </div>
                   <div v-if="col.name === 'fullName'">
                     {{ props.prefix }}
diff --git a/src/modules/05_placement/components/ChangePosition/DialogChange.vue b/src/modules/05_placement/components/ChangePosition/DialogChange.vue
index c53634b0e..eba0637fe 100644
--- a/src/modules/05_placement/components/ChangePosition/DialogChange.vue
+++ b/src/modules/05_placement/components/ChangePosition/DialogChange.vue
@@ -3,6 +3,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
 import config from "@/app.config";
+
 import http from "@/plugins/http";
 import { reactive, ref, onMounted, watch } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -10,8 +11,14 @@ import type {
   optionData,
   tableType,
 } from "@/modules/05_placement/interface/index/Main";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 
+const props = defineProps({
+  getData: Function,
+});
+const route = useRoute();
+const router = useRouter();
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
 const searchRules = ref<boolean>(false);
 const selected = ref<any[]>([]);
 const searchRef = ref<any>(null);
@@ -35,8 +42,6 @@ const {
   findOrgName,
 } = mixin;
 
-const router = useRouter();
-
 const modalDialog = defineModel<boolean>("modal", { required: true });
 
 function onCloseDialog() {
@@ -141,30 +146,58 @@ function onSubmit() {
   if (selected.value.length == 0) {
     dialogMessageNotify($q, "กรุณาเลือกรายชื่อผู้ที่ย้ายสับเปลี่ยนตำแหน่ง");
   } else {
-    const dataProfile = selected.value[0];
+    const dataProfile = selected.value;
     dialogConfirm($q, () => {
-      //   showLoader();
-      //   http
-      //     .post(config.API.kpiEvaluationUser, {
-      //       kpiPeriodId: formRound.kpiPeriodId.id,
-      //       profileId: dataProfile.id,
-      //       evaluatorId: formRound.evaluatorId,
-      //       commanderId:
-      //         formRound.commanderId == "" ? null : formRound.commanderId,
-      //       commanderHighId:
-      //         formRound.commanderHighId == "" ? null : formRound.commanderHighId,
-      //     })
-      //     .then((res) => {
-      //       const id = res.data.result;
-      //       redirectViewDetail(id);
-      //       onCloseDialog();
-      //     })
-      //     .catch((err) => {
-      //       messageError($q, err);
-      //     })
-      //     .finally(() => {
-      //       hideLoader();
-      //     });
+      showLoader();
+      http
+        .post(config.API.changePositionByIdProfile + `/${id.value}`, {
+          changePositionId: id.value,
+          profiles: dataProfile.map((i: any) => ({
+            profileId: i.id,
+            prefix: i.prefix,
+            firstName: i.firstName,
+            lastName: i.lastName,
+            citizenId: i.idcard ? i.idcard :null,
+            birthDate: i.birthDate ? i.birthDate :null,
+            positionOld: i.position ? i.position :null,
+            positionTypeOld: i.positionType ? i.positionType :null,
+            positionLevelOld: i.positionLevel ? i.positionLevel :null,
+            positionNumberOld: i.posNo ? i.posNo :null,
+            organizationOld: i.organization ? i.organization :null,
+            amountOld: i.salary ? i.salary :null,
+            educationOld: i.educationDegree ? i.educationDegree :null,
+            rootOld: i.root ? i.root :null,
+            rootOldId: i.rootId ? i.rootId :null,
+            rootShortNameOld: i.rootShortName ? i.rootShortName :null,
+            child1Old: i.child1 ? i.child1 :null,
+            child1OldId: i.child1Id ? i.child1Id :null,
+            child1ShortNameOld: i.child1ShortName ? i.child1ShortName :null,
+            child2Old: i.child2 ? i.child2 :null,
+            child2OldId: i.child2Id ? i.child2Id :null,
+            child2ShortNameOld: i.child2ShortName ? i.child2ShortName :null,
+            child3Old: i.child3 ? i.child3 :null,
+            child3OldId: i.child3Id ? i.child3Id :null,
+            child3ShortNameOld: i.child3ShortName ? i.child3ShortName :null,
+            child4Old: i.child4 ? i.child4 :null,
+            child4OldId: i.child4Id ? i.child4Id :null,
+            child4ShortNameOld: i.child4ShortName ? i.child4ShortName :null,
+            posMasterNoOld: i.posMasterNo ? i.posMasterNo :null,
+            posTypeOldId: i.posTypeId ? i.posTypeId :null,
+            posTypeNameOld: i.posTypeName ? i.posTypeName :null,
+            posLevelOldId: i.posLevelId ? i.posLevelId :null,
+            posLevelNameOld: i.posLevelName ? i.posLevelName :null,
+          })),
+        })
+        .then((res) => {
+          onCloseDialog();
+          props.getData?.();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     });
   }
 }
diff --git a/src/modules/05_placement/components/ChangePosition/Main.vue b/src/modules/05_placement/components/ChangePosition/Main.vue
index 4022debc5..227266ec4 100644
--- a/src/modules/05_placement/components/ChangePosition/Main.vue
+++ b/src/modules/05_placement/components/ChangePosition/Main.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
@@ -17,8 +17,10 @@ import type { OpType } from "@/modules/05_placement/interface/response/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const round = ref<string>('');
-const idRound = ref<string>('');
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const round = ref<string>("");
+const idRound = ref<string>("");
 const editCheck = ref<boolean>(false);
 const modalRound = ref<boolean>(false);
 const $q = useQuasar();
@@ -95,6 +97,7 @@ const resetFilter = () => {
   filterKeyword.value = "";
   filterKeyword2.value = "";
   filterRef.value.focus();
+  fecthLists()
 };
 
 //ปิด modal
@@ -103,20 +106,27 @@ const clickClose = () => {
 };
 
 //เปิด modal
-const sendToCommand = () => {
+function sendToCommand() {
   modal.value = true;
   filterKeyword2.value = "";
   // fecthTypeOption();
-};
+}
 
 //ดึงข้อมูล API
-const fecthLists = async () => {
+async function fecthLists() {
   showLoader();
   rows.value = [];
   await http
-    .get(config.API.changePosition)
+    .get(
+      config.API.changePosition +
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${filterKeyword.value}`
+    )
     .then((res) => {
-      rows.value = res.data.result;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+      rows.value = res.data.result.data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -124,15 +134,15 @@ const fecthLists = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 // dialog สำหรับแก้ไข
-const openModaledit = (data: any) => {
+function openModaledit(data: any) {
   modalRound.value = true;
   editCheck.value = true;
-  round.value = data.name
-  idRound.value = data.id
-};
+  round.value = data.name;
+  idRound.value = data.id;
+}
 
 // ฟังก์ชั่นสำหรับเพิ่มรอบการย้ายสับเปลี่ยนตำแหน่ง
 function addRound() {
@@ -140,30 +150,42 @@ function addRound() {
 }
 
 //ลบข้อมูล
-const clickDelete = (id: string) => {
+function clickDelete(id: string) {
   dialogRemove($q, () => {
-      showLoader();
-      http
-        .delete(config.API.changePosition+`/${id}`)
-        .then(() => {
-          success($q, "ลบข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          fecthLists();
-          hideLoader();
-        });
+    showLoader();
+    http
+      .delete(config.API.changePosition + `/${id}`)
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        fecthLists();
+        hideLoader();
+      });
   });
-};
+}
 
 // ไปหน้ารายชื่อ
-const personalListPage = (id: string) => {
+function personalListPage(id: string) {
   router.push({
     path: `/change-positions/${id}`,
   });
-};
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await fecthLists();
+  }
+);
 
 onMounted(() => {
   fecthLists();
@@ -211,6 +233,7 @@ onMounted(() => {
             outlined
             debounce="300"
             placeholder="ค้นหา"
+            @keyup.enter="fecthLists()"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
@@ -244,11 +267,25 @@ onMounted(() => {
           <d-table
             :columns="columns"
             :rows="rows"
-            :filter="filterKeyword"
-            row-key="citizenId"
+            row-key="id"
             :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
+            :rows-per-page-options="[1, 25, 50, 100]"
+            @update:pagination="updatePagination"
           >
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ total }} รายการ
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(totalList)"
+                size="sm"
+                boundary-links
+                direction-links
+                :max-pages="5"
+                @update:model-value="fecthLists"
+              ></q-pagination>
+            </template>
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -265,7 +302,11 @@ onMounted(() => {
                   @click="personalListPage(props.row.id)"
                 >
                   <div v-if="col.name == 'no'">
-                    {{ props.rowIndex + 1 }}
+                    {{
+                      (pagination.page - 1) * pagination.rowsPerPage +
+                      props.rowIndex +
+                      1
+                    }}
                   </div>
 
                   <div v-else-if="col.name == 'createdAt'">
diff --git a/src/modules/05_placement/components/ChangePosition/PersonalDetail.vue b/src/modules/05_placement/components/ChangePosition/PersonalDetail.vue
index 6f89b4b7a..87e0255c2 100644
--- a/src/modules/05_placement/components/ChangePosition/PersonalDetail.vue
+++ b/src/modules/05_placement/components/ChangePosition/PersonalDetail.vue
@@ -41,6 +41,7 @@ const {
   hideLoader,
   success,
   dialogConfirm,
+  findOrgName,
 } = mixin;
 
 const title = ref<ResponseTitle>({
@@ -51,10 +52,10 @@ const title = ref<ResponseTitle>({
 });
 
 //เรียกข้อมูลตาม id
-const fecthappointmentByid = async () => {
+async function getData() {
   showLoader();
   await http
-    .get(config.API.appointmentByid(paramsId.toString()))
+    .get(config.API.changePositionByIdProfile + `/${paramsId.toString()}`)
     .then((res) => {
       dataProfile.value = res.data.result as unknown as DataProfile;
       const data = res.data.result;
@@ -69,12 +70,12 @@ const fecthappointmentByid = async () => {
       (status.value = data.status),
         (educationOld.value = data.educationOld ?? "-");
       organizationPositionOld.value = data.organizationPositionOld;
-      positionTypeOld.value = data.positionTypeOld;
-      positionLevelOld.value = data.positionLevelOld;
-      posNo.value = data.positionNumberOld;
-      salary.value = data.salary ?? 0;
+      positionTypeOld.value = data.posTypeNameOld;
+      positionLevelOld.value = data.posLevelNameOld;
+      posNo.value = data.posMasterNo;
+      salary.value = data.amountOld ?? 0;
       reason.value = data.reason;
-      date.value = data.positionDate;
+      date.value = data.dateCurrent;
       avatar.value = data.avatar ?? "";
     })
     .catch((e) => {
@@ -83,7 +84,7 @@ const fecthappointmentByid = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 // เเก้ไขข้อมูล
 function putAppointment() {
@@ -95,14 +96,18 @@ function putAppointment() {
         organizationPositionOld: organizationPositionOld.value,
         positionTypeOld: positionTypeOld.value,
         positionLevelOld: positionLevelOld.value,
-        positionNumberOld: posNo.value,
+        posMasterNoOld: posNo.value,
         amountOld: salary.value.toString().replace(/,/g, ""),
         reason: reason.value,
-        positionDate: date.value,
+        dateCurrent: date.value,
       };
       showLoader();
+      http;
       http
-        .put(config.API.appointmentByid(paramsId.toString()), data)
+        .put(
+          config.API.changePositionByIdProfile + `/${paramsId.toString()}`,
+          data
+        )
         .then(() => {
           success($q, "บันทึกข้อมูลสำเร็จ");
         })
@@ -110,7 +115,7 @@ function putAppointment() {
           messageError($q, e);
         })
         .finally(() => {
-          fecthappointmentByid();
+          getData();
           edit.value = false;
         });
     },
@@ -120,7 +125,7 @@ function putAppointment() {
 }
 const cancel = () => {
   edit.value = false;
-  fecthappointmentByid();
+  getData();
   myForm.value?.resetValidation();
 };
 const getClass = (val: boolean) => {
@@ -140,7 +145,7 @@ function updatemodalPersonal(modal: boolean) {
 }
 
 onMounted(async () => {
-  await fecthappointmentByid();
+  await getData();
 });
 </script>
 <template>
@@ -153,9 +158,7 @@ onMounted(async () => {
       flat
       color="primary"
       class="q-mr-sm"
-      @click="
-        router.push(`/change-positions/08dc86c2-98a5-45f0-8e37-3502a4eb78c0s`)
-      "
+      @click="router.go(-1)"
     />
     รายละเอียดผู้ที่ย้ายสับเปลี่ยนตำแหน่ง {{ title.fullname }}
   </div>
@@ -167,6 +170,7 @@ onMounted(async () => {
       @submit.prevent
       @validation-success="putAppointment"
       ref="myForm"
+      class="full-width"
     >
       <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
         <div class="q-pl-sm text-weight-bold text-dark">
@@ -316,7 +320,7 @@ onMounted(async () => {
                 lazy-rules
                 mask="###,###,###,###"
                 reverse-fill-mask
-                class="inputgreen"
+                :class="getClass(edit)"
               />
             </div>
           </div>
diff --git a/src/modules/05_placement/components/ChangePosition/PersonalList.vue b/src/modules/05_placement/components/ChangePosition/PersonalList.vue
index 65feac8ed..a80a3bc72 100644
--- a/src/modules/05_placement/components/ChangePosition/PersonalList.vue
+++ b/src/modules/05_placement/components/ChangePosition/PersonalList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
@@ -11,15 +11,15 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue";
-import DialogEvalute from '@/modules/05_placement/components/ChangePosition/DialogChange.vue'
+import DialogEvalute from "@/modules/05_placement/components/ChangePosition/DialogChange.vue";
 
 const router = useRouter();
 const route = useRoute();
-const id = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
 
-const modalDialog = ref<boolean>(false)
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const modalDialog = ref<boolean>(false);
 const posType = ref<string>("");
 const posLevel = ref<string>("");
 const position = ref<string>("");
@@ -40,7 +40,6 @@ const {
   dialogRemove,
 } = mixin;
 
-
 const rows = ref<any>([]);
 const modalTree = ref<boolean>(false);
 const personalId = ref<string>("");
@@ -55,8 +54,8 @@ const visibleColumns = ref<string[]>([
   "citizenId",
   "fullname",
   "organizationName",
-  "dateOfBirth",
-  "createdAt",
+  "birthDate",
+  "lastUpdatedAt",
   "status",
 ]);
 const pagination = ref({
@@ -103,20 +102,20 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "dateOfBirth",
+    name: "birthDate",
     align: "left",
     label: "วัน/เดือน/ปี เกิด",
     sortable: true,
-    field: "dateOfBirth",
+    field: "birthDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่ดำเนินการ",
     sortable: true,
-    field: "createdAt",
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -136,6 +135,7 @@ const resetFilter = () => {
   filterKeyword.value = "";
   filterKeyword2.value = "";
   filterRef.value.focus();
+  fecthLists()
 };
 
 //ปิด modal
@@ -145,18 +145,24 @@ const clickClose = () => {
 
 // เพิ่มรายชื่อเพื่อย้ายสับเปลี่ยนตำแหน่ง
 const addPerson = () => {
-  modalDialog.value = true
+  modalDialog.value = true;
 };
 
 //ดึงข้อมูล API
 const fecthLists = async () => {
   showLoader();
-  rows.value = [];
   await http
-    .get(config.API.changePosition+`/${id.value}`)
-    .then((res) => {
-      let response = res.data.result;
-      rows.value = response;
+    .get(
+      config.API.changePositionById +
+        `/${id.value}?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${filterKeyword.value}`
+    )
+    .then(async(res) => {
+      let response =  await res.data.result;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = response.total;
+      rows.value = response.data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -164,161 +170,6 @@ const fecthLists = async () => {
     .finally(() => {
       hideLoader();
     });
-
-  rows.value = [
-    {
-      id: "08dc7e02-08ff-4cb3-85a7-3feb2a38614d",
-      profileId: "1526d9d3-d8b1-43ab-81b5-a84dfbe99511",
-      prefix: "นางสาว",
-      firstName: "นิรมล",
-      lastName: "เต็มเปี่ยม",
-      citizenId: "3140700369248",
-      dateOfBirth: "1975-12-06T17:00:00",
-      root: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-      rootId: "3084a630-4715-413d-98ab-0ba59c5c115e",
-      rootShortName: "สกก.",
-      child1: "กองสรรหาบุคคล",
-      child1Id: "2e49b10a-1a59-41ec-8b62-98c301af39e3",
-      child1ShortName: "กสบ.",
-      child2: null,
-      child2Id: null,
-      child2ShortName: null,
-      child3: null,
-      child3Id: null,
-      child3ShortName: null,
-      child4: null,
-      child4Id: null,
-      child4ShortName: null,
-      orgRevisionId: "7cf4b332-694a-498b-8af2-d1b86d667506",
-      positionId: "c905cfb7-63f5-4e9e-a1f4-e7a709d018f3",
-      posMasterNo: 1,
-      position: null,
-      positionField: null,
-      posTypeId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08081",
-      posTypeName: "อำนวยการ",
-      posLevelId: "1526d9d3-d8b1-43ab-81b5-a84dfbe09262",
-      posLevelName: "ต้น",
-      node: 1,
-      nodeName: "กองสรรหาบุคคล",
-      nodeId: "2e49b10a-1a59-41ec-8b62-98c301af39e3",
-      nodeShortName: "กสบ.",
-      rootOld: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-      rootOldId: "3084a630-4715-413d-98ab-0ba59c5c115e",
-      rootShortNameOld: "สกก.",
-      child1Old: null,
-      child1OldId: null,
-      child1ShortNameOld: null,
-      child2Old: null,
-      child2OldId: null,
-      child2ShortNameOld: null,
-      child3Old: null,
-      child3OldId: null,
-      child3ShortNameOld: null,
-      child4Old: null,
-      child4OldId: null,
-      child4ShortNameOld: null,
-      posMasterNoOld: 12,
-      posTypeOldId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08071",
-      posTypeNameOld: "วิชาการ",
-      posLevelOldId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08662",
-      posLevelNameOld: "ชำนาญการ",
-      status: "PENDING",
-      amount: null,
-      reportingDate: "2024-06-05T02:55:48.319",
-      isActive: true,
-      positionDate: "2018-06-11T02:56:00",
-      reason: "1",
-      educationOld: "-",
-      salary: 10000,
-      positionTypeOld: "วิชาการ",
-      positionLevelOld: "ชำนาญการ",
-      positionNumberOld: "12",
-      organizationPositionOld:
-        "นักวิชาการเงินและบัญชี-สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-      amountOld: 10000,
-      organizationOld: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-      posmasterId: "bb753819-357b-4d12-a445-c93c2bc67096",
-      positionOld: "นักวิชาการเงินและบัญชี",
-      createdAt: "2024-05-27T11:03:58.545266",
-      typeCommand: "MOVE",
-    },
-    {
-      id: "08dc7b99-239c-4ae0-8246-45dbb2059fa4",
-      profileId: "1526d9d3-d8b1-43ab-81b5-a84dfbe99500",
-      prefix: "นาย",
-      firstName: "ณัฐพงศ์",
-      lastName: "ดิษยบุตร",
-      citizenId: "3100903812600",
-      dateOfBirth: "1964-05-13T17:00:00",
-      root: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-      rootId: "3084a630-4715-413d-98ab-0ba59c5c115e",
-      rootShortName: "สกก.",
-      child1: null,
-      child1Id: null,
-      child1ShortName: null,
-      child2: null,
-      child2Id: null,
-      child2ShortName: null,
-      child3: null,
-      child3Id: null,
-      child3ShortName: null,
-      child4: null,
-      child4Id: null,
-      child4ShortName: null,
-      orgRevisionId: "7cf4b332-694a-498b-8af2-d1b86d667506",
-      positionId: "2f12e761-a0ee-45a9-8b96-7ad88f297660",
-      posMasterNo: 1,
-      position: null,
-      positionField: null,
-      posTypeId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08091",
-      posTypeName: "บริหาร",
-      posLevelId: "1526d9d3-d8b1-43ab-81b5-a84dfbe09362",
-      posLevelName: "สูง",
-      node: 0,
-      nodeName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-      nodeId: "3084a630-4715-413d-98ab-0ba59c5c115e",
-      nodeShortName: "สกก.",
-      rootOld: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-      rootOldId: "3084a630-4715-413d-98ab-0ba59c5c115e",
-      rootShortNameOld: "สกก.",
-      child1Old: null,
-      child1OldId: null,
-      child1ShortNameOld: null,
-      child2Old: null,
-      child2OldId: null,
-      child2ShortNameOld: null,
-      child3Old: null,
-      child3OldId: null,
-      child3ShortNameOld: null,
-      child4Old: null,
-      child4OldId: null,
-      child4ShortNameOld: null,
-      posMasterNoOld: 1,
-      posTypeOldId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08091",
-      posTypeNameOld: "บริหาร",
-      posLevelOldId: "1526d9d3-d8b1-43ab-81b5-a84dfbe09362",
-      posLevelNameOld: "สูง",
-      status: "PENDING",
-      amount: null,
-      reportingDate: "2024-05-24T05:01:11.455",
-      isActive: true,
-      positionDate: "2024-05-07T02:31:00",
-      reason: null,
-      educationOld: "-",
-      salary: 10,
-      positionTypeOld: "บริหาร",
-      positionLevelOld: "ต้น",
-      positionNumberOld: "1",
-      organizationPositionOld:
-        "นักบริหาร-สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/",
-      amountOld: 10,
-      organizationOld: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/",
-      posmasterId: "74a4ab16-1958-4e7b-b807-a39d8b15472d",
-      positionOld: "นักบริหาร",
-      createdAt: "2024-05-24T09:28:03.669054",
-      typeCommand: "APPOINT",
-    },
-  ];
 };
 
 // เปิดโครงสร้าง
@@ -336,7 +187,7 @@ const clickDelete = (id: string) => {
   dialogRemove($q, () => {
     showLoader();
     http
-      .delete(config.API.appointmentDelete(id))
+      .delete(config.API.changePositionByIdProfile + `/${id}`)
       .then(() => {
         success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -358,22 +209,52 @@ const detailPage = (id: string) => {
 };
 
 function onSave(data: any) {
-  // showLoader();
-  // http
-  //   .put(config.API.appointmentPosition(personalId.value), dataAppoint)
-  //   .then((res) => {
-  //     modalTree.value = false;
-  //     success($q, "บันทึกสำเร็จ");
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //     fecthLists();
-  //     hideLoader();
-  //   });
+  console.log("🚀 ~ onSave ~ data:", data);
+  showLoader();
+  http
+    .put(
+      config.API.changePositionByIdProfile + `/position/${personalId.value}`,
+      {
+        node: data.node,
+        nodeId: data.nodeId,
+        posmasterId: data.posmasterId,
+        posMasterNo: data.posMasterNo,
+        positionId: data.positionId,
+        orgRevisionId: data.orgRevisionId,
+        position: data.positionName,
+        positionField: data.positionField,
+        posTypeId: data.posTypeId,
+        posTypeName: data.posTypeName,
+        posLevelId: data.posLevelId,
+        posLevelName: data.posLevelName,
+      }
+    )
+    .then((res) => {
+      modalTree.value = false;
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      fecthLists();
+      hideLoader();
+    });
 }
 
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async() => {
+   await fecthLists();
+  }
+);
+
 onMounted(() => {
   fecthLists();
 });
@@ -420,6 +301,7 @@ onMounted(() => {
             outlined
             debounce="300"
             placeholder="ค้นหา"
+            @keyup.enter="fecthLists()"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
@@ -453,11 +335,25 @@ onMounted(() => {
           <d-table
             :columns="columns"
             :rows="rows"
-            :filter="filterKeyword"
-            row-key="citizenId"
+            row-key="id"
             :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
+            :rows-per-page-options="[1, 25, 50, 100]"
+            @update:pagination="updatePagination"
           >
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ total }} รายการ
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(totalList)"
+                size="sm"
+                boundary-links
+                direction-links
+                :max-pages="5"
+                @update:model-value="fecthLists"
+              ></q-pagination>
+            </template>
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -475,7 +371,11 @@ onMounted(() => {
                   @click="detailPage(props.row.id)"
                 >
                   <div v-if="col.name == 'no'">
-                    {{ props.rowIndex + 1 }}
+                    {{
+                      (pagination.page - 1) * pagination.rowsPerPage +
+                      props.rowIndex +
+                      1
+                    }}
                   </div>
                   <div v-else-if="col.name == 'fullname'">
                     {{
@@ -490,11 +390,9 @@ onMounted(() => {
                   <div v-else-if="col.name == 'status'">
                     {{ props.row.status ? statusText(props.row.status) : "-" }}
                   </div>
-                  <div v-else-if="col.name == 'dateOfBirth'">
+                  <div v-else-if="col.name == 'birthDate'">
                     {{
-                      props.row.dateOfBirth
-                        ? date2Thai(props.row.dateOfBirth)
-                        : "-"
+                      props.row.birthDate ? date2Thai(props.row.birthDate) : "-"
                     }}
                   </div>
                   <div v-else-if="col.name == 'organizationName'">
@@ -508,20 +406,18 @@ onMounted(() => {
                         }}
                       </div>
                       <div class="text-weight-light">
+                        {{ props.row.root ? props.row.root : "" }}
                         {{
-                          props.row.nodeName !== null ? props.row.nodeName : ""
-                        }}
-                        {{
-                          props.row.nodeShortName !== null
-                            ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
+                          props.row.rootShortName
+                            ? `(${props.row.rootShortName}${props.row.posMasterNo})`
                             : ""
                         }}
                       </div>
                     </div>
                   </div>
-                  <div v-else-if="col.name == 'createdAt'">
+                  <div v-else-if="col.name == 'lastUpdatedAt'">
                     {{
-                      props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
+                      props.row.lastUpdatedAt ? date2Thai(props.row.lastUpdatedAt) : "-"
                     }}
                   </div>
                   <div v-else>
@@ -604,7 +500,7 @@ onMounted(() => {
     :onSubmit="onSave"
   />
 
-  <DialogEvalute v-model:modal="modalDialog" />
+  <DialogEvalute v-model:modal="modalDialog" :getData="fecthLists" />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
index 72ac3734c..74b50bbf0 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@@ -15,6 +15,15 @@ import config from "@/app.config";
 
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 const searchRef = ref<any>(null);
@@ -36,9 +45,9 @@ const props = defineProps({
   },
 });
 
-const type = ref<string>("idcard");
+const type = ref<string>("citizenId");
 const typeOps = ref<typeOp[]>([
-  { id: "idcard", name: "เลขประจำตัวประชาชน" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
   { id: "firstname", name: "ชื่อ" },
   { id: "lastname", name: "นามสกุล" },
 ]);
@@ -174,40 +183,48 @@ function updateSelect() {
 async function searchInput() {
   searchRef.value.validate();
   if (!searchRef.value.hasError) {
-    showLoader();
-    const body = {
-      fieldName: type.value,
-      keyword: search.value,
-    };
-    await http
-      .post(config.API.orgSearchPersonal(), body)
-      .then((res) => {
-        const data = res.data.result;
-        const list = data.map((e: ResponsePreson) => ({
-          personId: e.id,
-          idcard: e.idcard,
-          prefix: e.prefix,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          name: `${e.prefix}${e.firstName}  ${e.lastName}`,
-          posNo: e.posNo ?? "-",
-          position: e.position ?? "-",
-          positionLevel: e.positionLevel ?? "-",
-          salary: e.salaries ?? "-",
-          organization: e.organization ?? "-",
-          phone: e.phone ?? "-",
-          email: e.email ?? "-",
-        }));
-
-        rows.value = list;
-      })
-      .catch((err) => {})
-      .finally(() => {
-        hideLoader();
-      });
+    await getSearch();
   }
 }
 
+async function getSearch() {
+  showLoader();
+  const body = {
+    fieldName: type.value,
+    keyword: search.value,
+  };
+  await http
+    .post(config.API.orgSearchPersonal()+`?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${search.value}`, body)
+    .then((res) => {
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+      const data = res.data.result.data;
+      const list = data.map((e: ResponsePreson) => ({
+        personId: e.id,
+        idcard: e.citizenId,
+        prefix: e.prefix,
+        firstName: e.firstName,
+        lastName: e.lastName,
+        name: `${e.prefix ? e.prefix :''}${e.firstName ? e.firstName :''}  ${e.lastName ? e.lastName :''}`,
+        posNo: e.posNo ?? "-",
+        position: e.position ?? "-",
+        positionLevel: e.positionLevel ?? "-",
+        salary: e.salaries ?? "-",
+        organization: e.organization ?? "-",
+        phone: e.phone ?? "-",
+        email: e.email ?? "-",
+      }));
+
+      rows.value = list;
+    })
+    .catch((err) => {})
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function returnDetail(data: any) {
   formData.prefix = data.prefix;
   formData.firstname = data.firstName;
@@ -234,6 +251,12 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+
+}
+
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
@@ -248,6 +271,13 @@ watch(props.data, async () => {
   formData.email = props.data.email;
   formData.qualification = props.data.qualification;
 });
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async() => {
+   await getSearch();
+  }
+);
 </script>
 
 <template>
@@ -309,7 +339,24 @@ watch(props.data, async () => {
                 dense
                 class="custom-header-table"
                 :visible-columns="visibleColumnsRespondent"
+                :rows-per-page-options="[1, 25, 50, 100]"
+                @update:pagination="updatePagination"
               >
+              <template v-slot:pagination="scope">
+              ทั้งหมด {{ total }} รายการ
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(totalList)"
+                size="sm"
+                boundary-links
+                direction-links
+                :max-pages="5"
+                @update:model-value="getSearch"
+              ></q-pagination>
+            </template>
+
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -330,9 +377,13 @@ watch(props.data, async () => {
                       :props="props"
                       @click="returnDetail(props.row)"
                     >
-                      <div v-if="col.name == 'no'">
-                        {{ props.rowIndex + 1 }}
-                      </div>
+                    <div v-if="col.name == 'no'">
+                    {{
+                      (pagination.page - 1) * pagination.rowsPerPage +
+                      props.rowIndex +
+                      1
+                    }}
+                  </div>
                       <div v-else-if="col.name == 'info'">
                         <!-- <router-link
                           target="_blank"
diff --git a/src/modules/11_discipline/interface/request/director.ts b/src/modules/11_discipline/interface/request/director.ts
index 8c30c9708..93bcc6dfe 100644
--- a/src/modules/11_discipline/interface/request/director.ts
+++ b/src/modules/11_discipline/interface/request/director.ts
@@ -35,7 +35,7 @@ interface typeOp {
 interface ResponsePreson {
   id?: string; //id อ้างอิง profile
   personId?: string; //id อ้างอิง profile
-  idcard: string; //เลขประจำตัวประชาชน
+  citizenId: string; //เลขประจำตัวประชาชน
   prefix: string; //คำนำหน้า
   firstName: string; //ชื่อ
   lastName: string; //นามสกุล