diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 21dec61c1..be30dbfae 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -122,6 +122,11 @@ export default {
    */
   requestEdit: `${orgProfile}/edit/`,
 
+  /**
+   * ข้อมูลการพัฒนารายบุคคล IDP
+   */
+  requestDevelopmentEdit: `${orgProfile}/development-request/`,
+
   /**
    * รายการเมนู
    */
diff --git a/src/components/LoadView.vue b/src/components/LoadView.vue
new file mode 100644
index 000000000..ff2093e02
--- /dev/null
+++ b/src/components/LoadView.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="full-width row flex-center text-accent q-gutter-sm">
+    <span
+      ><div
+        style="
+          height: 50vh;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        "
+        class="text-grey-5"
+      >
+        <q-spinner color="primary" size="3em" :thickness="10" />
+      </div>
+    </span>
+  </div>
+</template>
diff --git a/src/components/LoginLinkage.vue b/src/components/LoginLinkage.vue
new file mode 100644
index 000000000..baf5cc4cc
--- /dev/null
+++ b/src/components/LoginLinkage.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import DialogHeader from "./DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const step = ref<number>(1);
+const devices = ref<string>("");
+const devicesData = ref<string[]>([
+  "Generic",
+  "EMV",
+  "Smartcard",
+  "Reader",
+  "0",
+]);
+const devicesOp = ref<string[]>([]);
+
+/** 1.เสียบบัตรประชาชนเข้ากับเครื่องอ่าน*/
+function fetchDeviceLists() {
+  step.value++;
+}
+
+/** 2.เลือกเครื่องอ่านบัตร*/
+function readDevice() {
+  step.value++;
+}
+
+function verifyPin() {
+  step.value++;
+}
+
+/**
+ * function ต้นหาข้อมูลของ Option
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ */
+function filterOption(val: string, update: Function) {
+  update(() => {
+    const newVal = val.toLocaleUpperCase();
+    devicesOp.value = devicesData.value.filter(
+      (v: string) => v.toLocaleUpperCase().indexOf(newVal) > -1
+    );
+  });
+}
+
+function onClose() {
+  modal.value = false;
+  step.value = 1;
+  devices.value = "";
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <DialogHeader :tittle="'เข้าสู่ระบบ Linkage Center'" :close="onClose" />
+      <q-separator />
+      <q-card-section>
+        <q-card flat bordered>
+          <q-card-section>
+            <div class="row">
+              <div class="text-red">
+                *ต้องใช้บน Windows และต้องติดตั้ง Agent
+                <a
+                  href="https://linkagemgmt.bora.dopa.go.th/app/LinkageManagement-v1.11.0.zip"
+                  >ลิงก์ดาวน์โหลด Agent</a
+                >
+              </div>
+            </div>
+
+            <q-timeline color="primary">
+              <!-- เสียบบัตรประชาชนเข้ากับเครื่องอ่าน -->
+              <q-timeline-entry
+                title="เสียบบัตรประชาชนเข้ากับเครื่องอ่าน"
+                style="font-size: 12px"
+                :icon="
+                  step === 1
+                    ? 'mdi-pencil'
+                    : step > 1
+                    ? 'done'
+                    : 'mdi-numeric-1'
+                "
+              >
+                <div class="row" v-if="step === 1">
+                  <q-btn
+                    color="primary"
+                    label="ดำเนินการต่อ"
+                    @click="fetchDeviceLists"
+                  />
+                </div>
+              </q-timeline-entry>
+
+              <!-- เลือกเครื่องอ่านบัตร -->
+              <q-timeline-entry
+                title="เลือกเครื่องอ่านบัตร"
+                :icon="
+                  step === 2
+                    ? 'mdi-pencil'
+                    : step > 2
+                    ? 'done'
+                    : 'mdi-numeric-2'
+                "
+                :color="step < 2 ? 'grey-4' : ''"
+              >
+                <div class="row" v-if="step === 2">
+                  <q-form
+                    greedy
+                    @submit.prevent
+                    @validation-success="readDevice"
+                  >
+                    <div class="q-col-gutter-sm">
+                      <div>
+                        <q-select
+                          dense
+                          v-model="devices"
+                          label="เลือกเครื่องอ่านบัตร"
+                          outlined
+                          emit-value
+                          map-options
+                          fill-input
+                          hide-selected
+                          lazy-rules
+                          hide-bottom-space
+                          option-label="name"
+                          option-value="id"
+                          class="inputgreen"
+                          :options="devicesOp"
+                          use-input
+                          :rules="[(val:string) => !!val || `${'กรุณาเลือกเลือกเครื่องอ่านบัตร'}`,]"
+                          @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn) "
+                        >
+                          <template v-slot:no-option>
+                            <q-item>
+                              <q-item-section class="text-grey">
+                                ไม่มีข้อมูล
+                              </q-item-section>
+                            </q-item>
+                          </template>
+                        </q-select>
+                      </div>
+
+                      <div>
+                        <q-btn
+                          color="primary"
+                          label="ดำเนินการต่อ"
+                          type="submit"
+                        />
+                      </div></div
+                  ></q-form>
+                </div>
+              </q-timeline-entry>
+
+              <!-- เชื่อมต่อและใส่ PIN -->
+              <q-timeline-entry
+                title="เชื่อมต่อและใส่ PIN"
+                :icon="
+                  step === 3
+                    ? 'mdi-pencil'
+                    : step > 3
+                    ? 'done'
+                    : 'mdi-numeric-3'
+                "
+                :color="step < 3 ? 'grey-4' : ''"
+              >
+                <div class="row" v-if="step === 3">
+                  <q-btn
+                    color="primary"
+                    label="ดำเนินการต่อ"
+                    @click="verifyPin"
+                  />
+                </div>
+              </q-timeline-entry>
+            </q-timeline>
+          </q-card-section>
+        </q-card>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+:deep(.q-timeline__title) {
+  font-size: 15px; /* ปรับขนาดฟอนต์ตามที่ต้องการ */
+  font-weight: normal; /* หรือปรับน้ำหนักฟอนต์ */
+}
+</style>
diff --git a/src/modules/02_organization/components/TreeView.vue b/src/modules/02_organization/components/TreeView.vue
index fb1e1452c..e0ab8ffd0 100644
--- a/src/modules/02_organization/components/TreeView.vue
+++ b/src/modules/02_organization/components/TreeView.vue
@@ -19,6 +19,7 @@ import type { FilterMaster } from "@/modules/02_organization/interface/request/o
 /** importComponents*/
 import TreeMain from "@/modules/02_organization/components/TreeMain.vue";
 import TreeTable from "@/modules/02_organization/components/TreeTable.vue";
+import LoadView from "@/components/LoadView.vue";
 
 /** use*/
 const store = useOrganizational();
@@ -278,15 +279,7 @@ onMounted(async () => {
 
       <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>
+          <LoadView v-if="isLoad" />
 
           <div v-else class="col-12 row">
             <div class="col-12" v-if="nodeId !== ''">
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index 04a4964d3..13fdf2f1c 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -418,7 +418,7 @@ async function getDevelop() {
 
 /**
  * บันทึกข้อมูลผลการประเมินการปฏิบัติราชการ
- * @param editStatus แก่ไข,เพิ่ม
+ * @param editStatus แก้ไข,เพิ่ม
  */
 async function addEditData(editStatus: boolean = false) {
   if (!profileId.value) return;
@@ -706,7 +706,9 @@ onMounted(async () => {
                       icon="mdi-history"
                       @click="clickHistory(props.row)"
                     >
-                      <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
+                      <q-tooltip
+                        >ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip
+                      >
                     </q-btn>
                     <q-btn
                       v-if="checkPermission($route)?.attrIsUpdate"
@@ -716,7 +718,7 @@ onMounted(async () => {
                       icon="edit"
                       @click.stop.prevent="onClickOpenDialog(true, props.row)"
                     >
-                      <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+                      <q-tooltip>แก้ไขข้อมุล</q-tooltip>
                     </q-btn>
                   </q-card-actions>
                   <q-separator />
diff --git a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
index 2d4833055..777a65404 100644
--- a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
@@ -2,15 +2,12 @@
 import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 
-import { useRouter } from "vue-router";
-import config from "@/app.config";
-import http from "@/plugins/http";
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
-/**
- * importType
- */
+/** importType*/
 import type { QTableProps } from "quasar";
 import type {
   DataOption,
@@ -18,22 +15,14 @@ import type {
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DateRequest } from "@/modules/04_registryPerson/interface/response/Main";
 
-/**
- * importComponents
- */
+/** importComponents*/
 import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue";
 
-/**
- * use
- */
 const $q = useQuasar();
-const router = useRouter();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
-/**
- * Table
- */
+//Table
 const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
 const page = ref<number>(1); //หน้า
 const pageSize = ref<number>(10); //จำนวนต่อหน้า
@@ -119,18 +108,14 @@ const visibleColumns = ref<string[]>([
   "remark",
 ]);
 
-/**
- * ตัวแปร
- */
+//ตัวแปร
 const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
 const keyword = ref<string>(""); //คำค้นหา
 const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
 const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
 const requestId = ref<string>(""); //id รายการแก้ไข
 
-/**
- * function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
- */
+/** function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ*/
 function fetchListRequset() {
   showLoader();
   http
@@ -156,18 +141,14 @@ function fetchListRequset() {
     });
 }
 
-/**
- * function เลือกสถานะคำร้อง
- */
+/** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
   page.value = 1;
   // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
   fetchListRequset();
 }
 
-/**
- * function เคลียร์ สถานะคำร้อง
- */
+/** function เคลียร์ สถานะคำร้อง*/
 function clearStatus() {
   status.value = "";
   statusOption.value = store.optionStatus;
@@ -260,7 +241,6 @@ async function downloadUrl(id: string, fileName: string) {
 
 /**
  * ดูการเปลี่ยนแปลงของ pageSize
- *
  * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
  */
 watch(
diff --git a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
index 8cffe9722..f34761819 100644
--- a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 import type { QTableProps } from "quasar";
-
 import type {
   DataOption,
   Pagination,
 } from "@/modules/04_registryPerson/interface/index/Main";
+import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/Main";
 
 import DialogEditIDP from "@/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue";
 
+const $q = useQuasar();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 /**
@@ -20,14 +24,14 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
  */
 const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
 const keyword = ref<string>(""); //คำค้นหา
-const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
+const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายการสถานะ
 const modalEdit = ref<boolean>(false); //แก้ไขสถานะคำร้อง
 const requestId = ref<string>(""); //id รายการแก้ไข
 
 /**
  * Table
  */
-const rows = ref<any[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
+const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
 const page = ref<number>(1); //หน้า
 const pageSize = ref<number>(10); //จำนวนต่อหน้า
 const rowsTotal = ref<number>(0); //จำนวนรายการ
@@ -44,11 +48,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "knowledgeSkills",
+    name: "name",
     align: "left",
     label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
     sortable: true,
-    field: "knowledgeSkills",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -103,16 +107,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "สถานะคำร้อง",
     sortable: true,
     field: "status",
-    format: (v) => store.convertStatus(v),
+    format: (v) => store.convertStatusIDP(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "remark",
+    name: "reason",
     align: "left",
     label: "หมายเหตุ",
     sortable: true,
-    field: "remark",
+    field: "reason",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -120,47 +124,53 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
   "createdAt",
-  "knowledgeSkills",
+  "name",
   "developmentProjects",
   "developmentTarget",
   "developmentResults",
   "developmentReport",
   "document",
   "status",
-  "remark",
+  "reason",
 ]);
 
-function fetchData() {
-  const data = [
-    {
-      id: "1",
-      createdAt: "2024-09-17T08:21:21.600Z",
-      status: "PENDING",
-      knowledgeSkills: "ความรู้",
-      developmentProjects: "การพัฒนา",
-      developmentTarget: "เป้าหมาย",
-      developmentResults: "ผล",
-      developmentReport: "รายงาน",
-    },
-  ];
-  rows.value = data;
+/** function fetch ข้อมูลรายการการพัฒนารายบุคคล*/
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.requestDevelopmentEdit + `admin`, {
+      params: {
+        page: page.value,
+        pageSize: pageSize.value,
+        status: status.value ? status.value : "",
+        keyword: keyword.value,
+      },
+    })
+    .then(async (res) => {
+      const data = await res.data.result;
+      maxPage.value = Math.ceil(data.total / pageSize.value);
+      rowsTotal.value = data.total;
+      rows.value = data.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-/**
- * function เลือกสถานะคำร้อง
- */
+/** function เลือกสถานะคำร้อง */
 function updateStatusValue() {
   page.value = 1;
   // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
-  //   function  fetchData() {
+  fetchData();
 }
 
-/**
- * function เคลียร์ สถานะคำร้อง
- */
+/** function เคลียร์ สถานะคำร้อง */
 function clearStatus() {
   status.value = "";
-  statusOption.value = store.optionStatus;
+  statusOption.value = store.optionStatusIDP;
 }
 
 /**
@@ -171,7 +181,7 @@ function clearStatus() {
 function filterOption(val: string, update: Function) {
   update(() => {
     status.value = val ? "" : status.value;
-    statusOption.value = store.optionStatus.filter(
+    statusOption.value = store.optionStatusIDP.filter(
       (v: DataOption) => v.name.indexOf(val) > -1
     );
   });
@@ -195,6 +205,70 @@ function onclickEdit(id: string) {
   requestId.value = id;
 }
 
+/**
+ * function หาชื่อไฟล์
+ * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
+ */
+function onDownloadFile(id: string) {
+  showLoader();
+  http
+    .get(
+      config.API.file(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id
+      )
+    )
+    .then(async (res) => {
+      if (res.data.length !== 0) {
+        await downloadUrl(id, res.data[0].fileName);
+      } else {
+        hideLoader();
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+/**
+ * function  โหลดไฟล์
+ * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
+ * @param fileName  ชื่อไฟล์
+ */
+async function downloadUrl(id: string, fileName: string) {
+  await http
+    .get(
+      config.API.fileByFile(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id,
+        fileName
+      )
+    )
+    .then((res) => {
+      window.open(res.data.downloadUrl, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ pageSize
+ * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
+ */
+watch(
+  () => pageSize.value,
+  () => {
+    fetchData();
+  }
+);
+
 onMounted(() => {
   fetchData();
 });
@@ -291,12 +365,38 @@ onMounted(() => {
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name === 'document'">
-                <q-btn icon="mdi-download" round dense flat color="primary">
+              <div v-if="col.name == 'developmentProjects'">
+                <div class="column">
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment70"
+                    label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+                  />
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment20"
+                    label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+                  />
+                  <q-checkbox
+                    size="xs"
+                    :model-value="props.row.isDevelopment10"
+                    label="10 การฝึกอบรมอื่นๆ"
+                  />
+                </div>
+              </div>
+              <div v-else-if="col.name === 'document'">
+                <q-btn
+                  icon="mdi-download"
+                  round
+                  dense
+                  flat
+                  color="primary"
+                  @click.pervent="onDownloadFile(props.row.id)"
+                >
                   <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
                 </q-btn>
               </div>
-              <div v-else class="table_ellipsis2">
+              <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
@@ -320,7 +420,11 @@ onMounted(() => {
     </div>
   </q-card>
 
-  <DialogEditIDP v-model:modal="modalEdit" v-model:request-id="requestId" />
+  <DialogEditIDP
+    v-model:modal="modalEdit"
+    v-model:request-id="requestId"
+    :fetch-data-list="fetchData"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue b/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
index 3bc1ddbcd..277232104 100644
--- a/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue
@@ -9,22 +9,14 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 
-/**
- * importComponents
- */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * use
- */
 const $q = useQuasar();
 const store = useRequestEditStore();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
 
-/**
- *  props
- */
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
 const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
 const props = defineProps({
@@ -42,9 +34,7 @@ const statusOptionMain = ref<DataOption[]>(
 );
 const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
 
-/**
- * function บันทึกรายการคำร้อง
- */
+/** function บันทึกรายการคำร้อง*/
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -67,9 +57,7 @@ function onSubmit() {
   });
 }
 
-/**
- * function ปิด popup
- */
+/** function ปิด popup*/
 function closeDialog() {
   modal.value = false;
   formData.status = "";
@@ -89,9 +77,7 @@ function filterOption(val: string, update: Function) {
   });
 }
 
-/**
- * function fetch ข้อมูลคำร้องแก้ไข
- */
+/** function fetch ข้อมูลคำร้องแก้ไข*/
 function fetchDataRequest() {
   showLoader();
   http
@@ -127,7 +113,6 @@ function classInput(val: boolean) {
 
 /**
  * ดูการเปลี่ยนแปลงของ modal
- *
  * เมื่อ modal เป็น true ทำการดึงข้อมูลคำร้องแก้ไข
  */
 watch(
diff --git a/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue b/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
index e7cee0f22..2dae1f215 100644
--- a/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 import type {
   DataOption,
@@ -20,24 +22,28 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
 
 const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
 const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
+const { fetchDataList } = defineProps({
+  fetchDataList: { type: Function, require: true },
+});
 
-const isReadOnly = ref<boolean>(false);
+const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว
 
+//ฟอร์มข้อมูลการพัฒนารายบุคคล
 const formData = reactive<FormDataIDP>({
-  topic: "",
-  development: [],
-  otherAction: "",
-  otherPerson: "",
-  otherTraining: "",
-  developmentTarget: "",
-  developmentResults: "",
-  developmentReport: "",
-  status: "",
-  remark: "",
+  topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
+  developmentProjects: [], //วิธีการพัฒนา
+  reasonDevelopment70: "", //อื่นๆ 70 การลงมือปฏิบัติ
+  reasonDevelopment20: "", //อื่นๆ 20 การเรียนรู้จากผู้อื่น
+  reasonDevelopment10: "", //อื่นๆ 10 การฝึกอบรมอื่นๆ
+  developmentTarget: "", //เป้าหมายการนำไปพัฒนางาน
+  developmentResults: "", //วิธีการวัดผลการพัฒนา
+  developmentReport: "", //รายงานผลการพัฒนา
+  status: "", //สถานะ
+  reason: "", //หมายเหตุ
 });
 
 //70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
-const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
+const itemsDevelopment70 = ref<DataItemsDevelopment[]>([
   {
     value: "on_the_job_training",
     label: "การฝึกปฏิบัติในงาน (On the job training)",
@@ -88,7 +94,7 @@ const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
   },
 ]);
 //20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
-const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
+const itemsDevelopment20 = ref<DataItemsDevelopment[]>([
   { value: "coaching", label: "การสอนงาน (Coaching)" },
   { value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
   { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
@@ -97,7 +103,7 @@ const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
   { value: "other2", label: "อื่น ๆ (ระบุ)" },
 ]);
 //10 การฝึกอบรมอื่นๆ
-const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
+const itemsDevelopment10 = ref<DataItemsDevelopment[]>([
   {
     value: "self_learning",
     label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
@@ -121,10 +127,39 @@ const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
 ]);
 //ข้อมูลรายการสถานะ
 const statusOptionMain = ref<DataOption[]>(
-  store.optionStatus.filter((e: DataOption) => e.id !== "")
+  store.optionStatusIDP.filter((e: DataOption) => e.id !== "")
 );
 const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
 
+/**
+ * function fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
+ * @param id ID ที่ต้องการดูรายละเอียด
+ */
+function fetchDataByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.requestDevelopmentEdit + `admin/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.topic = data.name;
+      formData.developmentProjects = data.developmentProjects;
+      formData.developmentTarget = data.developmentTarget;
+      formData.developmentResults = data.developmentResults;
+      formData.developmentReport = data.developmentReport;
+      formData.reasonDevelopment70 = data.reasonDevelopment70;
+      formData.reasonDevelopment20 = data.reasonDevelopment20;
+      formData.reasonDevelopment10 = data.reasonDevelopment10;
+      formData.status = data.status;
+      formData.reason = data.reason;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * function ค้นหาคำใน select  สถานะคำร้อง
  * @param val คำค้น
@@ -139,25 +174,45 @@ function filterOption(val: string, update: Function) {
   });
 }
 
+/** function บันทึกข้อมูลการพัฒนารายบุคคล */
 function onSubmit() {
-  dialogConfirm($q, () => {});
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .patch(config.API.requestDevelopmentEdit + `admin/${requestId.value}`, {
+        status: formData.status,
+        reason: formData.reason,
+      })
+      .then(async () => {
+        await fetchDataList?.();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 /**
  * function ปิด popup
+ * และกำหนด formData เป็นค่า Defult
  */
 function closeDialog() {
   modal.value = false;
   formData.topic = "";
-  formData.development = [];
-  formData.otherAction = "";
-  formData.otherPerson = "";
-  formData.otherTraining = "";
+  formData.developmentProjects = [];
+  formData.reasonDevelopment70 = "";
+  formData.reasonDevelopment20 = "";
+  formData.reasonDevelopment10 = "";
   formData.developmentTarget = "";
   formData.developmentResults = "";
   formData.developmentReport = "";
   formData.status = "";
-  formData.remark = "";
+  formData.reason = "";
 }
 
 /**
@@ -170,234 +225,249 @@ function classInput(val: boolean) {
     "full-width cursor-pointer inputgreen": !val,
   };
 }
+
+/**
+ * ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
+ * fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
+ */
+watch(modal, (val) => {
+  if (val) {
+    fetchDataByid(requestId.value);
+  }
+});
 </script>
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 90%">
+    <q-card style="min-width: 65%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader tittle="ข้อมูลการพัฒนารายบุคคล" :close="closeDialog" />
         <q-separator />
 
-        <q-card-section style="max-height: 84vh" class="scroll">
-          <div class="row q-col-gutter-sm">
-            <div class="col-md-3 col-xs-12">
-              <div class="row q-col-gutter-sm">
-                <!-- สถานะ -->
-                <div class="col-12">
-                  <q-select
-                    :class="classInput(isReadOnly)"
-                    v-model="formData.status"
-                    label="สถานะ"
-                    dense
-                    outlined
-                    emit-value
-                    map-options
-                    :options="statusOption"
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
-                    lazy-rules
-                    hide-bottom-space
-                    use-input
-                    option-label="name"
-                    option-value="id"
-                    @filter="(inputValue:string,
+        <!-- สถานะคำร้อง -->
+        <q-card-section>
+          <q-card bordered class="col-12">
+            <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+              สถานะคำร้อง
+            </div>
+            <q-separator />
+            <div class="row q-pa-md q-col-gutter-sm">
+              <!-- สถานะ -->
+              <div class="col-4">
+                <q-select
+                  :class="classInput(isReadOnly)"
+                  v-model="formData.status"
+                  label="สถานะ"
+                  dense
+                  outlined
+                  emit-value
+                  map-options
+                  :options="statusOption"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                  use-input
+                  option-label="name"
+                  option-value="id"
+                  @filter="(inputValue:string,
                         doneFn:Function) => filterOption(inputValue, doneFn
                         ) "
-                  >
-                    <template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-grey">
-                          ไม่มีข้อมูล
-                        </q-item-section>
-                      </q-item>
-                    </template>
-                  </q-select>
-                </div>
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
 
-                <!-- หมายเหตุ -->
-                <div class="col-12">
-                  <q-input
-                    :class="classInput(isReadOnly)"
-                    v-model="formData.remark"
-                    label="หมายเหตุ"
-                    dense
-                    outlined
-                    type="textarea"
-                    hide-bottom-space
-                  />
-                </div>
+              <!-- หมายเหตุ -->
+              <div class="col-8">
+                <q-input
+                  :class="classInput(isReadOnly)"
+                  v-model="formData.reason"
+                  label="หมายเหตุ"
+                  dense
+                  outlined
+                  type="textarea"
+                  hide-bottom-space
+                />
               </div>
             </div>
 
-            <div class="col-md-9 col-xs-12">
-              <div class="row q-col-gutter-sm">
-                <div class="col-12">
-                  <q-input
-                    :class="classInput(isReadOnly)"
-                    readonly
-                    outlined
-                    v-model="formData.topic"
-                    label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
-                    dense
-                  />
+            <q-card-actions align="right">
+              <q-btn label="บันทึก" color="secondary" type="submit"
+                ><q-tooltip>บันทึก</q-tooltip></q-btn
+              >
+            </q-card-actions>
+          </q-card>
+        </q-card-section>
+
+        <!-- รายละเอียด -->
+        <q-card-section class="q-pt-none">
+          <q-card bordered class="col-12">
+            <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+              รายละเอียด
+            </div>
+            <q-separator />
+            <div class="row q-col-gutter-sm q-pa-md">
+              <div class="col-12">
+                <q-input
+                  readonly
+                  outlined
+                  v-model="formData.topic"
+                  label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
+                  dense
+                />
+              </div>
+
+              <div class="col-12">
+                <div class="q-mb-sm text-weight-medium text-body2">
+                  วิธีการพัฒนา
                 </div>
+                <div class="row col-12 q-ml-md q-col-gutter-sm">
+                  <!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
+                  <div class="col-4">
+                    <div class="q-mb-sm text-weight-medium text-body2">
+                      70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+                    </div>
+                    <q-option-group
+                      disable
+                      class="check_box q-mt-sm"
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="formData.developmentProjects"
+                      :options="itemsDevelopment70"
+                      type="checkbox"
+                    />
 
-                <div class="col-12">
-                  <q-label class="q-mb-sm text-weight-medium text-body2"
-                    >วิธีการพัฒนา
-                  </q-label>
-                  <div class="row col-12 q-ml-md q-col-gutter-sm">
-                    <!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
-                    <div class="col-4">
-                      <q-label class="q-mb-sm text-weight-medium text-body2"
-                        >70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</q-label
-                      >
-                      <q-option-group
-                        disable
-                        class="check_box q-mt-sm"
-                        keep-color
-                        color="primary"
-                        dense
-                        v-model="formData.development"
-                        :options="itemsDevelopmentAction"
-                        type="checkbox"
-                      />
-
-                      <div
-                        class="row"
-                        v-if="formData.development.includes('other1')"
-                      >
-                        <div class="col-8 q-mt-sm relative-position">
-                          <div class="other_custom_input">
-                            <q-input
-                              readonly
-                              v-model="formData.otherAction"
-                              dense
-                              outlined
-                              class="inputgreen"
-                              label="กรุณาระบุ"
-                            ></q-input>
-                          </div>
+                    <div
+                      class="row"
+                      v-if="formData.developmentProjects.includes('other1')"
+                    >
+                      <div class="col-8 q-mt-sm relative-position">
+                        <div class="other_custom_input">
+                          <q-input
+                            readonly
+                            v-model="formData.reasonDevelopment70"
+                            dense
+                            outlined
+                            label="กรุณาระบุ"
+                          ></q-input>
                         </div>
                       </div>
                     </div>
+                  </div>
 
-                    <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
-                    <div class="col-4">
-                      <q-label class="q-mb-sm text-weight-medium text-body2"
-                        >20 การเรียนรู้จากผู้อื่น
-                        (Coach/Mentor/Consulting)</q-label
-                      >
-                      <q-option-group
-                        disable
-                        class="check_box q-mt-sm"
-                        keep-color
-                        color="primary"
-                        dense
-                        v-model="formData.development"
-                        :options="itemsDevelopmentPerson"
-                        type="checkbox"
-                      />
-                      <div
-                        class="row"
-                        v-if="formData.development.includes('other2')"
-                      >
-                        <div class="col-8 q-mt-sm relative-position">
-                          <div class="other_custom_input">
-                            <q-input
-                              readonly
-                              v-model="formData.otherPerson"
-                              dense
-                              outlined
-                              label="กรุณาระบุ"
-                            ></q-input>
-                          </div>
+                  <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
+                  <div class="col-4">
+                    <div class="q-mb-sm text-weight-medium text-body2">
+                      20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
+                    </div>
+                    <q-option-group
+                      disable
+                      class="check_box q-mt-sm"
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="formData.developmentProjects"
+                      :options="itemsDevelopment20"
+                      type="checkbox"
+                    />
+                    <div
+                      class="row"
+                      v-if="formData.developmentProjects.includes('other2')"
+                    >
+                      <div class="col-8 q-mt-sm relative-position">
+                        <div class="other_custom_input">
+                          <q-input
+                            readonly
+                            v-model="formData.reasonDevelopment20"
+                            dense
+                            outlined
+                            label="กรุณาระบุ"
+                          ></q-input>
                         </div>
                       </div>
                     </div>
+                  </div>
 
-                    <!-- 10 การฝึกอบรมอื่นๆ -->
-                    <div class="col-4">
-                      <q-label class="q-mb-sm text-weight-medium text-body2"
-                        >10 การฝึกอบรมอื่นๆ</q-label
-                      >
-                      <q-option-group
-                        disable
-                        class="check_box q-mt-sm"
-                        keep-color
-                        color="primary"
-                        dense
-                        v-model="formData.development"
-                        :options="itemsDevelopmentTraining"
-                        type="checkbox"
-                      />
-                      <div
-                        class="row"
-                        v-if="formData.development.includes('other3')"
-                      >
-                        <div class="offset-4 col-8 q-mt-sm relative-position">
-                          <div class="other_custom_input">
-                            <q-input
-                              readonly
-                              v-model="formData.otherTraining"
-                              dense
-                              outlined
-                              label="กรุณาระบุ"
-                            ></q-input>
-                          </div>
+                  <!-- 10 การฝึกอบรมอื่นๆ -->
+                  <div class="col-4">
+                    <div class="q-mb-sm text-weight-medium text-body2">
+                      10 การฝึกอบรมอื่นๆ
+                    </div>
+                    <q-option-group
+                      disable
+                      class="check_box q-mt-sm"
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="formData.developmentProjects"
+                      :options="itemsDevelopment10"
+                      type="checkbox"
+                    />
+                    <div
+                      class="row"
+                      v-if="formData.developmentProjects.includes('other3')"
+                    >
+                      <div class="offset-4 col-8 q-mt-sm relative-position">
+                        <div class="other_custom_input">
+                          <q-input
+                            readonly
+                            v-model="formData.reasonDevelopment10"
+                            dense
+                            outlined
+                            label="กรุณาระบุ"
+                          ></q-input>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
+              </div>
 
-                <!-- เป้าหมายการนำไปพัฒนางาน -->
-                <div class="col-12">
-                  <q-input
-                    readonly
-                    outlined
-                    v-model="formData.developmentTarget"
-                    label="เป้าหมายการนำไปพัฒนางาน"
-                    dense
-                    type="textarea"
-                  />
-                </div>
+              <!-- เป้าหมายการนำไปพัฒนางาน -->
+              <div class="col-12">
+                <q-input
+                  readonly
+                  outlined
+                  v-model="formData.developmentTarget"
+                  label="เป้าหมายการนำไปพัฒนางาน"
+                  dense
+                  type="textarea"
+                />
+              </div>
 
-                <!-- วิธีการวัดผลการพัฒนา -->
-                <div class="col-12">
-                  <q-input
-                    readonly
-                    outlined
-                    v-model="formData.developmentResults"
-                    label="วิธีการวัดผลการพัฒนา"
-                    dense
-                    type="textarea"
-                  />
-                </div>
+              <!-- วิธีการวัดผลการพัฒนา -->
+              <div class="col-12">
+                <q-input
+                  readonly
+                  outlined
+                  v-model="formData.developmentResults"
+                  label="วิธีการวัดผลการพัฒนา"
+                  dense
+                  type="textarea"
+                />
+              </div>
 
-                <!-- รายงานผลการพัฒนา -->
-                <div class="col-12">
-                  <q-input
-                    readonly
-                    outlined
-                    v-model="formData.developmentReport"
-                    label="รายงานผลการพัฒนา"
-                    dense
-                    type="textarea"
-                  />
-                </div>
+              <!-- รายงานผลการพัฒนา -->
+              <div class="col-12">
+                <q-input
+                  readonly
+                  outlined
+                  v-model="formData.developmentReport"
+                  label="รายงานผลการพัฒนา"
+                  dense
+                  type="textarea"
+                />
               </div>
             </div>
-          </div>
+          </q-card>
         </q-card-section>
-
-        <q-separator />
-
-        <q-card-actions align="right">
-          <q-btn label="บันทึก" color="secondary" type="submit"
-            ><q-tooltip>บันทึก</q-tooltip></q-btn
-          >
-        </q-card-actions>
       </q-form>
     </q-card>
   </q-dialog>
diff --git a/src/modules/04_registryPerson/interface/request/Main.ts b/src/modules/04_registryPerson/interface/request/Main.ts
index 178cb0ece..97556ceb6 100644
--- a/src/modules/04_registryPerson/interface/request/Main.ts
+++ b/src/modules/04_registryPerson/interface/request/Main.ts
@@ -68,15 +68,15 @@ interface FormChangeName {
 
 interface FormDataIDP {
   topic: string;
-  development: string[];
-  otherAction: string;
-  otherPerson: string;
-  otherTraining: string;
+  developmentProjects: string[];
+  reasonDevelopment70: string;
+  reasonDevelopment20: string;
+  reasonDevelopment10: string;
   developmentTarget: string;
   developmentResults: string;
   developmentReport: string;
   status: string;
-  remark: string;
+  reason: string;
 }
 
 export type {
diff --git a/src/modules/04_registryPerson/interface/response/Main.ts b/src/modules/04_registryPerson/interface/response/Main.ts
index 2e740320e..95f0abf69 100644
--- a/src/modules/04_registryPerson/interface/response/Main.ts
+++ b/src/modules/04_registryPerson/interface/response/Main.ts
@@ -152,6 +152,30 @@ interface DataLeaveType {
   refCommandDate: string;
 }
 
+interface DataListsIDP {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  developmentReport: string;
+  developmentResults: string;
+  developmentTarget: string;
+  id: string;
+  isDevelopment10: boolean;
+  isDevelopment20: boolean;
+  isDevelopment70: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  name: string;
+  profileEmployeeId: string;
+  profileId: string;
+  reason: string;
+  reasonDevelopment10: string;
+  reasonDevelopment20: string;
+  reasonDevelopment70: string;
+  status: string;
+}
+
 export type {
   DataType,
   DataLevel,
@@ -160,4 +184,5 @@ export type {
   DataProfile,
   DataLeave,
   DataLeaveType,
+  DataListsIDP,
 };
diff --git a/src/modules/04_registryPerson/stores/RequestEdit.ts b/src/modules/04_registryPerson/stores/RequestEdit.ts
index 118b17db3..32e889d20 100644
--- a/src/modules/04_registryPerson/stores/RequestEdit.ts
+++ b/src/modules/04_registryPerson/stores/RequestEdit.ts
@@ -20,6 +20,13 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
     { id: "REJECT", name: "ไม่อนุมัตการแก้ไข" },
   ]);
 
+  const optionStatusIDP = ref<DataOption[]>([
+    { id: "", name: "ทั้งหมด" },
+    { id: "PENDING", name: "รอดำเนินการ" },
+    { id: "APPROVE", name: "อนุมัติ" },
+    { id: "REJECT", name: "ไม่อนุมัติ" },
+  ]);
+
   function convertStatus(val: string) {
     switch (val) {
       case "PENDING":
@@ -32,5 +39,24 @@ export const useRequestEditStore = defineStore("requestEditStore", () => {
         return "-";
     }
   }
-  return { convertStatus, optionTopic, optionStatus };
+
+  function convertStatusIDP(val: string) {
+    switch (val) {
+      case "PENDING":
+        return "รอดำเนินการ";
+      case "APPROVE":
+        return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
+      default:
+        return "-";
+    }
+  }
+  return {
+    convertStatus,
+    optionTopic,
+    optionStatus,
+    optionStatusIDP,
+    convertStatusIDP,
+  };
 });
diff --git a/src/modules/15_development/components/Record.vue b/src/modules/15_development/components/Record.vue
index d56649358..e64ad1c9b 100644
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -8,26 +8,18 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 import type { ResRecord } from "@/modules/15_development/interface/response/Main";
 
-/**
- * usec
- */
-const route = useRoute();
 const $q = useQuasar();
-const id = ref<string>(route.params.id.toString());
 const { date2Thai } = useCounterMixin();
 
-/**
- * prosp
- */
+//prosp
 const isProfile = defineModel<boolean>("isProfile", { required: true });
 const listPerson = defineModel<ResRecord[]>("listPerson", { required: true });
 
-/**
- * ข้อมุล Table
- */
+//ข้อมุล Table
 const keyword = ref<string>("");
 const rows = ref<ResRecord[]>([]);
-const columns = ref<QTableProps["columns"]>([
+// baseColumns
+const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "isDone",
     align: "left",
@@ -194,6 +186,17 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const columns = computed(() => {
+  if (!isProfile.value) {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) => column.name !== "isDone" && column.name !== "isDoneIDP"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+
 const visibleColumns = ref<string[]>([
   "isDone",
   "isDoneIDP",
@@ -204,8 +207,8 @@ const visibleColumns = ref<string[]>([
   "posTypeName",
   "posLevelName",
   "posExecutive",
-  "startDate",
-  "endDate",
+  "dateStart",
+  "dateEnd",
   "trainingDays",
   "org",
   "commandNumber",
@@ -231,9 +234,7 @@ function formBmaofficer(val: string) {
   }
 }
 
-/**
- *  function เรียกข้อมูลโครงการ
- */
+/** function เรียกข้อมูลโครงการ*/
 function fetchDataProject() {
   rows.value = listPerson.value.filter(
     (e: ResRecord) => e.isProfile === isProfile.value
diff --git a/src/modules/15_development/views/RecordPage.vue b/src/modules/15_development/views/RecordPage.vue
index 452859046..42c32102e 100644
--- a/src/modules/15_development/views/RecordPage.vue
+++ b/src/modules/15_development/views/RecordPage.vue
@@ -13,9 +13,6 @@ import type { ResRecord } from "@/modules/15_development/interface/response/Main
 import Record from "@/modules/15_development/components/Record.vue";
 import DialogRecordPerson from "@/modules/15_development/components/DialogRecordPerson.vue";
 
-/**
- * use
- */
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
@@ -23,9 +20,7 @@ const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, messageError, dialogConfirm, success } =
   useCounterMixin();
 
-/**
- * ตัวแปร
- */
+//ตัวแปร
 const projectId = ref<string>(route.params.id.toLocaleString()); //id route
 const tab = ref<string>("IN"); //tab
 const title = ref<string>(""); // หัวข้อ
@@ -54,9 +49,7 @@ async function fetchData(id: string) {
     });
 }
 
-/**
- *  function เรียกข้อมูลรายชื่อทั้งหมด
- */
+/** function เรียกข้อมูลรายชื่อทั้งหมด*/
 async function fetchDataProject() {
   isLoadPage.value = false;
   showLoader();
@@ -103,9 +96,7 @@ function clickUpload(file: any) {
   );
 }
 
-/**
- *  function ส่งไปบันทึกที่ทะเบียนประวัติ
- */
+/** function ส่งไปบันทึกที่ทะเบียนประวัติ*/
 function sendRecordRegistry() {
   dialogConfirm(
     $q,
@@ -127,33 +118,29 @@ function sendRecordRegistry() {
   );
 }
 
-/**
- *  function ส่งข้อมูลการพัฒนารายบุคคลไปบันทึกที่ทะเบียนประวัติ
- */
+/** function ส่งข้อมูลการพัฒนารายบุคคลไปบันทึกที่ทะเบียนประวัติ (IDP)*/
 function sendDevalopRegistry() {
   dialogConfirm(
     $q,
     () => {
-      // showLoader();
-      // http
-      //   .get(config.API.developmentMainTab("tab6/done", projectId.value))
-      //   .then(async () => {
-      //     await fetchDataProject();
-      //     await success($q, "ส่งข้อมูลสำเร็จ");
-      //   })
-      //   .catch((e) => {
-      //     messageError($q, e);
-      //     hideLoader();
-      //   });
+      showLoader();
+      http
+        .get(config.API.developmentMainTab("tab6/done-idp", projectId.value))
+        .then(async () => {
+          await fetchDataProject();
+          await success($q, "ส่งข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+          hideLoader();
+        });
     },
     "ยืนยันการส่งข้อมูลการพัฒนารายบุคคลไปบันทึกที่ทะเบียนประวัติ",
     "ต้องการยืนยันการส่งข้อมูลการพัฒนารายบุคคลไปบันทึกที่ทะเบียนประวัติหรือไม่"
   );
 }
 
-/**
- * function  ดาวน์โหลดไฟล์ต้นแบบ
- */
+/** function  ดาวน์โหลดไฟล์ต้นแบบ*/
 function downloadFile() {
   const link = document.createElement("a");
   link.href = `${window.location.protocol}//${window.location.host}/default-บันทึกผล.xlsx`;
@@ -232,6 +219,7 @@ onMounted(() => {
       </q-btn>
 
       <q-btn
+        v-if="listPerson.length > 0"
         size="md"
         icon="mdi-clipboard-account-outline"
         round
diff --git a/src/modules/16_positionEmployee/views/main.vue b/src/modules/16_positionEmployee/views/main.vue
index d1376e4e7..1ec3f4dfa 100644
--- a/src/modules/16_positionEmployee/views/main.vue
+++ b/src/modules/16_positionEmployee/views/main.vue
@@ -21,6 +21,7 @@ import type { FilterMaster } from "@/modules/16_positionEmployee/interface/reque
 /** importComponents*/
 import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
 import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
+import LoadView from "@/components/LoadView.vue";
 
 /** use*/
 const store = usePositionEmp();
@@ -237,15 +238,7 @@ onMounted(() => {
 
             <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>
+                <LoadView v-if="isLoad" />
 
                 <div v-else class="col-12 row">
                   <div class="col-12" v-if="nodeId !== ''">
diff --git a/src/modules/17_acting/views/main.vue b/src/modules/17_acting/views/main.vue
index a45f7c996..7b041e42d 100644
--- a/src/modules/17_acting/views/main.vue
+++ b/src/modules/17_acting/views/main.vue
@@ -2,12 +2,11 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
-
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useStructureTree } from "@/stores/structureTree";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -17,7 +16,7 @@ import type {
   ListPerson,
 } from "@/modules/17_acting/interface/response/Main";
 
-/** importStore*/
+import LoadView from "@/components/LoadView.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -59,14 +58,20 @@ async function fetchOrganizationActive() {
   }
 }
 
+const isLaod = ref<boolean>(false);
+
 /**
- * function เลือกตำแหน่งที่จะให่รักษาการ
+ * function เลือกตำแหน่งที่จะให้ษาการ
  * @param data ข้อมูลตำแหน่ง
  */
 async function updateSelected(data: PosMaster) {
   posmasterId.value = data.posmasterId;
+  isLaod.value = true;
   // เรียกใช้ function  fetch รายชื่อ ,fetch รายชื่อรักษาการ
-  await Promise.all([fetchPosMaster(), fetchListAct()]);
+  await Promise.all([fetchPosMaster(), fetchListAct()]).finally(() => {
+    isLaod.value = false;
+    console.log("test");
+  });
 }
 
 /** ตำแหน่ง*/
@@ -143,9 +148,8 @@ const keyword = ref<string>("");
 /**
  * function fetch รายชื่อ
  */
-function fetchPosMaster() {
-  showLoader();
-  http
+async function fetchPosMaster() {
+  await http
     .post(config.API.orgPosAct + `/search`, {
       posmasterId: posmasterId.value,
       isAll: isAll.value,
@@ -156,9 +160,6 @@ function fetchPosMaster() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -198,9 +199,8 @@ const keywordAct = ref<string>("");
 /**
  *  function fetch รายชื่อรักษาการ
  */
-function fetchListAct() {
-  showLoader();
-  http
+async function fetchListAct() {
+  await http
     .get(config.API.orgPosAct + `/${posmasterId.value}`)
     .then((res) => {
       const data = res.data.result;
@@ -208,9 +208,6 @@ function fetchListAct() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -341,7 +338,8 @@ onMounted(() => {
         class="col-lg-9 col-md-8 col-xs-12 scroll"
         style="height: 80vh"
       >
-        <div class="column q-col-gutter-sm">
+        <LoadView v-if="isLaod" />
+        <div class="column q-col-gutter-sm" v-else>
           <div class="col">
             <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
               <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
diff --git a/src/modules/18_command/components/Main/DialogFormCommand.vue b/src/modules/18_command/components/Main/DialogFormCommand.vue
index ef7f1c69e..f391a5d04 100644
--- a/src/modules/18_command/components/Main/DialogFormCommand.vue
+++ b/src/modules/18_command/components/Main/DialogFormCommand.vue
@@ -3,6 +3,8 @@ import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useCommandListStore } from "@/modules/18_command/store/ListStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -11,41 +13,34 @@ import type { DataCommandType } from "@/modules/18_command/interface/response/Ma
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const router = useRouter();
+const store = useCommandListStore();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
 
-const modal = defineModel<boolean>("modal", { required: true });
-const isCopy = defineModel<boolean>("isCopy", { required: true });
-const commandId = defineModel<string>("commandId", { default: "" });
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด Popup
+const isCopy = defineModel<boolean>("isCopy", { required: true }); //สถานะทำสำเนา
+const commandId = defineModel<string>("commandId", { default: "" }); // id ประเภทคำสั่งที่คำสำเนา
 
-const commandType = ref<string>("");
-const commandNo = ref<string>("");
-const commandYear = ref<number>(new Date().getFullYear());
+const commandType = ref<string>(""); //ประเภทคำสั่ง
+const commandNo = ref<string>(""); //คำสั่งเลขที่
+const commandYear = ref<number>(new Date().getFullYear()); //ปี
 
-const listCommand = ref<DataCommandType[]>([]);
-const commandOp = ref<DataCommandType[]>([]);
+const listCommand = ref<DataCommandType[]>([]); //ข้อมูลรายการประเภทคำสั่ง
+const commandOp = ref<DataCommandType[]>([]); //ตัวเลือกประเภทคำสั่ง
 
+/** ฟังก์ชันดึงข้อมูลปรเภทคำสั่ง*/
 async function fetchCommandType() {
-  showLoader();
-  await http
-    .get(config.API.commandType)
-    .then(async (res) => {
-      const data = await res.data.result;
-      listCommand.value = data;
-      commandOp.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  const data = await store.fetchCommandType();
+  if (data) {
+    listCommand.value = data;
+    commandOp.value = data;
+  }
 }
 
+/** ฟังก์ชันยืนยันการบันทึกข้อมูล */
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -74,29 +69,36 @@ function onSubmit() {
   });
 }
 
-function filterSelector(val: string, update: Function, refData: string) {
-  switch (refData) {
-    case "OrderTypeOption":
-      update(() => {
-        commandType.value = val ? "" : commandType.value;
-        commandOp.value = listCommand.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
+/**
+ * ฟังก์ชันค้นหาข้อมูลรายการประเภทคำสั่ง
+ * @param val คำที่ค้องการค้นหา
+ * @param update function จาก quasar
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    commandType.value = val ? "" : commandType.value;
+    commandOp.value = listCommand.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
 }
 
+/**
+ * ฟังก์ชันปิด Popup
+ * และกำหนด  commandNo commandYear เป็นค่า Defult
+ * */
 function onClose() {
   modal.value = false;
   commandNo.value = "";
   commandYear.value = new Date().getFullYear();
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ * เมื่อ  modal เป็น True และ isCopy เป็น False จะเรียก ฟังก์ชัน fetchCommandType เพื่อดึงข้อมูลปรเภทคำสั่ง
+ */
 watch(modal, () => {
+  //เช็คค่าของ modal และ isCopy
   if (modal.value && !isCopy.value) {
     fetchCommandType();
   }
@@ -131,8 +133,7 @@ watch(modal, () => {
                 outlined
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
                 @filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
-                    ) "
+                    doneFn:Function) => filterSelector(inputValue, doneFn) "
               >
                 <template v-slot:no-option>
                   <q-item>
diff --git a/src/modules/18_command/interface/response/Main.ts b/src/modules/18_command/interface/response/Main.ts
index 40c60bc25..87f915311 100644
--- a/src/modules/18_command/interface/response/Main.ts
+++ b/src/modules/18_command/interface/response/Main.ts
@@ -30,6 +30,7 @@ interface DataCommandType {
   lastUpdateUserId: string;
   lastUpdatedAt: string | Date;
   name: string;
+  subtitle: string;
 }
 
 interface DataFileDownload {
diff --git a/src/modules/18_command/store/ListStore.ts b/src/modules/18_command/store/ListStore.ts
index ec0b4554a..deb5a759d 100644
--- a/src/modules/18_command/store/ListStore.ts
+++ b/src/modules/18_command/store/ListStore.ts
@@ -1,7 +1,18 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import { useQuasar } from "quasar";
 
-import type { DataListCommand } from "@/modules/18_command/interface/response/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  DataListCommand,
+  DataCommandType,
+} from "@/modules/18_command/interface/response/Main";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 export const useCommandListStore = defineStore("commandListStore", () => {
   const tabsMain = ref<string>("DRAFT");
@@ -9,10 +20,42 @@ export const useCommandListStore = defineStore("commandListStore", () => {
   const total = ref<number>(0);
   const maxPage = ref<number>(0);
 
+  const listCommand = ref<DataCommandType[]>([]); //รายการข้อมูลปรเภทคำสั่ง
+
+  /**
+   * ฟังก์ชันดึงข้อมูลปรเภทคำสั่งจาก API
+   * ถ้า 'listCommand' ยังไม่มีข้อมูล จะเรียก Call API เพื่อดึงข้อมูลประเภทคำสั่ง
+   * @returns รายการประเภทคำสั่ง
+   */
+  async function fetchCommandType() {
+    //เช็คค่าของ listCommand
+    if (listCommand.value.length === 0) {
+      showLoader();
+      try {
+        const res = await http.get(config.API.commandType);
+        const data = res.data.result;
+
+        listCommand.value = data.map((e: DataCommandType) => ({
+          id: e.id,
+          name: e.subtitle ? `${e.name} (${e.subtitle})` : e.name,
+        }));
+
+        return listCommand.value;
+      } catch (err) {
+        messageError($q, err);
+      } finally {
+        hideLoader();
+      }
+    } else {
+      return listCommand.value;
+    }
+  }
+
   return {
     tabsMain,
     rows,
     total,
     maxPage,
+    fetchCommandType,
   };
 });
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 6be7fd209..5e33e30eb 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -19,6 +19,8 @@ import type {
 import { tabList, tabListPlacement } from "../interface/request/main/main";
 import { useroleUserDataStore } from "@/stores/roleUser";
 
+import LoginLinkage from "@/components/LoginLinkage.vue";
+
 const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll;
 const store = useDataStore();
 const route = useRoute();
@@ -74,6 +76,7 @@ const options = ref<optionType[]>([
     color: "indigo",
   },
 ]);
+const modalLoginLinkage = ref<boolean>(false); //เข้าสู่ระบบ Linkage Center
 
 async function fetchmsgNoread() {
   await http
@@ -700,7 +703,38 @@ async function fetchPermissionsSys() {
                 <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
                   {{ fullname }}
                 </div>
-                <div id="#logout">
+                <div class="row q-col-gutter-sm q-pa-sm">
+                  <div class="col-6">
+                    <q-btn
+                      color="blue"
+                      label="เข้าสู่ระบบ Linkage Center"
+                      size="sm"
+                      v-close-popup
+                      @click="modalLoginLinkage = true"
+                    />
+                  </div>
+                  <div class="col-6">
+                    <q-btn
+                      color="primary"
+                      label="ออกจากระบบ"
+                      v-close-popup
+                      @click="doLogout"
+                      class="full-width full-height"
+                    />
+                  </div>
+                </div>
+
+                <!-- <div id="#logout">
+                  <q-btn
+                    color="blue"
+                    label="เข้าสู่ระบบ Linkage Center"
+                    push
+                    size="sm"
+                    v-close-popup
+                    @click="modalLoginLinkage = true"
+                  />
+                </div>
+                <div id="#logout" class="q-mt-sm">
                   <q-btn
                     color="primary"
                     label="ออกจากระบบ"
@@ -708,8 +742,8 @@ async function fetchPermissionsSys() {
                     size="sm"
                     v-close-popup
                     @click="doLogout"
-                  /><!--  -->
-                </div>
+                  />
+                </div> -->
               </div>
 
               <!-- <div class="column col-12">
@@ -1137,6 +1171,8 @@ async function fetchPermissionsSys() {
     </q-page-container>
     <full-loader :visibility="loader" />
   </q-layout>
+
+  <LoginLinkage v-model:modal="modalLoginLinkage" />
 </template>
 
 <style>