diff --git a/src/api/api.development.ts b/src/api/api.development.ts
index 94606b1..c1f9521 100644
--- a/src/api/api.development.ts
+++ b/src/api/api.development.ts
@@ -2,6 +2,7 @@ import env from "./index";
 
 const development = `${env.API_URI}/development`;
 const urlFile = `${env.API_URI}/salary`;
+const orgProfile = `${env.API_URI}/org/profile`;
 
 export default {
   // portfolio
@@ -12,4 +13,7 @@ export default {
     `${urlFile}/file/${name}/${group}/${id}`,
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${urlFile}/file/${name}/${group}/${id}/${fileName}`,
+
+
+  developmentRequest:`${orgProfile}/development-request`
 };
diff --git a/src/modules/14_IDP/component/DialogDevelop.vue b/src/modules/14_IDP/component/DialogDevelop.vue
index b69f1d4..dcac47e 100644
--- a/src/modules/14_IDP/component/DialogDevelop.vue
+++ b/src/modules/14_IDP/component/DialogDevelop.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
+import axios from "axios";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store";
 
@@ -18,9 +21,33 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
-
+const isEdit = defineModel<boolean>("isEdit", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
+const idRow = defineModel<string>("idRow", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
 const isReadOnly = ref<boolean>(false);
 
+const props = defineProps({
+  getData: Function,
+});
+
+/** เช็ค true/false 70*/
+const isDevelopment70 = computed(() => {
+  return itemsDevelopmentAction.value.some((txt) =>
+    formData.development.includes(txt.value)
+  );
+});
+/** เช็ค true/false 20*/
+const isDevelopment20 = computed(() => {
+  return itemsDevelopmentPerson.value.some((txt) =>
+    formData.development.includes(txt.value)
+  );
+});
+/** เช็ค true/false 10*/
+const isDevelopment10 = computed(() => {
+  return itemsDevelopmentTraining.value.some((txt) =>
+    formData.development.includes(txt.value)
+  );
+});
+
 const formData = reactive<FormDataIDP>({
   topic: "",
   development: [],
@@ -119,10 +146,84 @@ const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
 
 function onSubmit() {
   dialogConfirm($q, () => {
-    console.log(formData);
+    showLoader();
+    const body = {
+      name: formData.topic,
+      developmentTarget: formData.developmentTarget,
+      developmentResults: formData.developmentResults,
+      developmentReport: formData.developmentReport,
+      reasonDevelopment70: formData.otherAction,
+      reasonDevelopment20: formData.otherPerson,
+      reasonDevelopment10: formData.otherTraining,
+      isDevelopment70: isDevelopment70.value,
+      isDevelopment20: isDevelopment20.value,
+      isDevelopment10: isDevelopment10.value,
+      developmentProjects: formData.development,
+    };
+    http
+      .post(config.API.developmentRequest, body)
+      .then(async (res) => {
+        await createURLUpload(res.data.result, formData.document);
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      })
+      .finally(() => {});
   });
 }
 
+/**
+ * function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
+ */
+async function createURLUpload(id: string, file: any) {
+  const fileName = { fileName: file.name };
+  await http
+    .post(
+      config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id),
+      {
+        replace: false,
+        fileList: fileName,
+      }
+    )
+    .then(async (res) => {
+      const foundKey: string | undefined = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      foundKey &&
+        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document));
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async (res) => {
+      success($q, `บันทึกข้อมูลสำเร็จ`);
+      closeDialog();
+      await props.getData?.();
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
 /**
  * function ปิด popup
  */
@@ -137,6 +238,9 @@ function closeDialog() {
   formData.developmentResults = "";
   formData.developmentReport = "";
   formData.document = null;
+
+  isEdit.value = false;
+  idRow.value = "";
 }
 
 /**
@@ -149,6 +253,36 @@ function classInput(val: boolean) {
     "full-width cursor-pointer inputgreen": !val,
   };
 }
+
+function getDetail() {
+  showLoader();
+  http
+    .get(config.API.developmentRequest + `/user/${idRow.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.topic = data.name;
+      formData.developmentTarget = data.developmentTarget;
+      formData.developmentResults = data.developmentResults;
+      formData.developmentReport = data.developmentReport;
+      formData.otherAction = data.reasonDevelopment70;
+      formData.otherPerson = data.reasonDevelopment20;
+      formData.otherTraining = data.reasonDevelopment10;
+      formData.development = data.developmentProjects;
+    }).catch((e)=>{
+      messageError($q,e)
+    }).finally(()=>{
+      hideLoader()
+    })
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (idRow.value) {
+      getDetail();
+    }
+  }
+);
 </script>
 
 <template>
@@ -156,7 +290,11 @@ function classInput(val: boolean) {
     <q-card style="min-width: 90vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
-          tittle="ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล"
+          :tittle="
+            isEdit
+              ? 'รายละเอียดยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล'
+              : 'ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล'
+          "
           :close="closeDialog"
         />
         <q-separator />
@@ -292,6 +430,7 @@ function classInput(val: boolean) {
                     label="เป้าหมายการนำไปพัฒนางาน"
                     dense
                     type="textarea"
+                    class="inputgreen"
                   />
                 </div>
 
@@ -303,6 +442,7 @@ function classInput(val: boolean) {
                     label="วิธีการวัดผลการพัฒนา"
                     dense
                     type="textarea"
+                    class="inputgreen"
                   />
                 </div>
 
@@ -314,6 +454,7 @@ function classInput(val: boolean) {
                     label="รายงานผลการพัฒนา"
                     dense
                     type="textarea"
+                    class="inputgreen"
                   />
                 </div>
                 <div class="col-12">
diff --git a/src/modules/14_IDP/store.ts b/src/modules/14_IDP/store.ts
index 7e16a5c..48d49ee 100644
--- a/src/modules/14_IDP/store.ts
+++ b/src/modules/14_IDP/store.ts
@@ -6,7 +6,7 @@ export const useIndividualDevelopmentPlan = defineStore(
   "individualDevelopmentPlan",
   () => {
     const optionStatus = ref<DataOption[]>([
-      { id: "", name: "ทั้งหมด" },
+      { id: "ALL", name: "ทั้งหมด" },
       { id: "PENDING", name: "รอดำเนินการ" },
       { id: "COMPLETE", name: "ดำเนินการแก้ไขแล้ว" },
       { id: "REJECT", name: "ไม่อนุมัตการแก้ไข" },
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
index e28152a..f6b1a5f 100644
--- a/src/modules/14_IDP/views/main.vue
+++ b/src/modules/14_IDP/views/main.vue
@@ -18,9 +18,11 @@ const mixin = useCounterMixin();
 const store = useIndividualDevelopmentPlan();
 const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
 
+const idRow = ref<string>("");
+const isEdit = ref<boolean>(false);
 const modalAdd = ref<boolean>(false); //ตัวแปร dialog #Add
 const filterKeyword = ref<string>("");
-const status = ref<string>(""); // สถานะคำร้อง
+const status = ref<string>("ALL"); // สถานะคำร้อง
 const statusOptions = ref<DataOption[]>(store.optionStatus);
 
 /** pagination */
@@ -38,9 +40,9 @@ const visibleColumns = ref<string[]>([
   "no",
   "name",
   "developmentProjects",
-  "target",
+  "developmentTarget",
   "developmentResults",
-  "point",
+  "developmentReport",
   "topic",
   "detail",
   "document",
@@ -80,11 +82,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "target",
+    name: "developmentTarget",
     align: "left",
     label: "เป้าหมายการพัฒนา",
     sortable: true,
-    field: "target",
+    field: "developmentTarget",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -102,11 +104,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "point",
+    name: "developmentReport",
     align: "left",
     label: "รายงานผลการพัฒนา",
     sortable: true,
-    field: "point",
+    field: "developmentReport",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -161,7 +163,7 @@ function filterOption(val: string, update: Function) {
  * function เคลียร์ข้อมูลสถานะคำร้อง
  */
 function clearStatus() {
-  status.value = "";
+  status.value = "ALL";
   statusOptions.value = store.optionStatus;
 }
 
@@ -172,100 +174,39 @@ function openAdd() {
 
 function onDelete(id: string) {
   dialogRemove($q, async () => {
-    // await http
-    //   .delete(config.API.path(id))
-    //   .then(async (res) => {
-    //     success($q, "ลบข้อมูลสำเร็จ");
-    //     await getListData();
-    //   })
-    //   .catch((e) => {
-    //     messageError($q, e);
-    //   })
-    //   .finally(() => {});
+    await http
+      .delete(config.API.developmentRequest + `/${id}`)
+      .then(async (res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        await getListData();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
   });
 }
 /** list รายการ */
 async function getListData() {
-  //   showLoader();
-  //   await http
-  //     .get(
-  //       config.API.path +
-  //         `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${filterKeyword.value}
-  // `
-  //     )
-  //     .then(async (res) => {
-  //       const data = await res.data.result.data;
-  //       const dataTotal = await res.data.result.total;
-  //       totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
-  //       total.value = dataTotal;
-  //       rows.value = data;
-
-  /** จำลอง */
-  rows.value = [
-    {
-      id: "01c73dc6-f716-4518-883b-289587cf91d7",
-      createdAt: "2024-08-27T01:20:44.960Z",
-      createdUserId: "59134ef9-9e62-41d0-aac5-339be727f2b0",
-      lastUpdatedAt: "2024-08-27T03:41:09.440Z",
-      lastUpdateUserId: "59134ef9-9e62-41d0-aac5-339be727f2b0",
-      createdFullName: "นันทนา ศรีพัฒน์",
-      lastUpdateFullName: "นันทนา ศรีพัฒน์",
-      profileId: "08dc4c98-8739-401f-8180-65a982ee4237",
-      profileEmployeeId: null,
-      name: "พัฒนาด้านการสื่อสาร",
-      target: "สื่อสารได้ดีมากขึ้น",
-      summary: 10,
-      point: 10,
-      achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
-      achievement5:
-        "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
-      achievement0: "ไม่ได้ดำเนินการพัฒนา",
-      isDevelopment70: true,
-      isDevelopment20: true,
-      isDevelopment10: true,
-      reasonDevelopment70: "",
-      reasonDevelopment20: "",
-      reasonDevelopment10: "",
-      kpiDevelopmentId: "1cddfbd8-9264-4720-a985-0a6500b8e8aa",
-      status: "PENDING",
-      remark: "เปลี่ยนรูปภาพแล้ว",
-    },
-    {
-      id: "f0ad722f-5915-4292-b4f4-9d9c9c891cb5",
-      createdAt: "2024-08-27T01:20:45.958Z",
-      createdUserId: "59134ef9-9e62-41d0-aac5-339be727f2b0",
-      lastUpdatedAt: "2024-08-27T03:41:09.398Z",
-      lastUpdateUserId: "59134ef9-9e62-41d0-aac5-339be727f2b0",
-      createdFullName: "นันทนา ศรีพัฒน์",
-      lastUpdateFullName: "นันทนา ศรีพัฒน์",
-      profileId: "08dc4c98-8739-401f-8180-65a982ee4237",
-      profileEmployeeId: null,
-      name: "พัฒนาด้านการทำงานเป็นทีม",
-      target: "ทำงานเป็นทีมได้ดีขึ้น",
-      summary: 10,
-      point: 10,
-      achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
-      achievement5:
-        "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
-      achievement0: "ไม่ได้ดำเนินการพัฒนา",
-      isDevelopment70: true,
-      isDevelopment20: true,
-      isDevelopment10: true,
-      reasonDevelopment70: "บรรยาย",
-      reasonDevelopment20: "",
-      reasonDevelopment10: "",
-      kpiDevelopmentId: "86ea3b48-96c4-494c-a180-5c315b4c4f85",
-      status: "COMPLETE",
-      remark: "เปลี่ยนรูปภาพแล้ว",
-    },
-  ];
-
-  //       hideLoader();
-  //     })
-  //     .catch((e) => {
-  //       hideLoader();
-  //     })
-  //     .finally(() => {});
+  showLoader();
+  await http
+    .get(
+      config.API.developmentRequest +
+        `/user?status=${status.value}&keyword=${filterKeyword.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}
+  `
+    )
+    .then(async (res) => {
+      const data = await res.data.result.data;
+      const dataTotal = await res.data.result.total;
+      totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
+      total.value = dataTotal;
+      rows.value = data;
+      hideLoader();
+    })
+    .catch((e) => {
+      hideLoader();
+    })
+    .finally(() => {});
 }
 
 /**
@@ -275,19 +216,10 @@ async function getListData() {
 function onDownloadFile(id: string) {
   showLoader();
   http
-    .get(
-      config.API.file(
-        "ระบบทะเบียนประวัติ",
-        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
-        "eecb1cd9-4c55-4e73-ba52-36fce07ef18d"
-      )
-    )
+    .get(config.API.file("IDP", "ยื่นคำร้องขอแก้ไขข้อมูล", id))
     .then((res) => {
       if (res.data.length !== 0) {
-        downloadUrl(
-          "eecb1cd9-4c55-4e73-ba52-36fce07ef18d",
-          res.data[0].fileName
-        );
+        downloadUrl(id, res.data[0].fileName);
       } else {
         hideLoader();
       }
@@ -307,8 +239,8 @@ function downloadUrl(id: string, fileName: string) {
   http
     .get(
       config.API.fileByFile(
-        "ระบบทะเบียนประวัติ",
-        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        "IDP",
+        "ยื่นคำร้องขอแก้ไขข้อมูล",
         id,
         fileName
       )
@@ -330,6 +262,16 @@ function updatePagination(newPagination: any) {
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
 
+/**
+ * ฟังชั่น เปิดรายละเอียด
+ * @param id id row
+ */
+function onDetail(id: string) {
+  modalAdd.value = true;
+  isEdit.value = true;
+  idRow.value = id;
+}
+
 watch(
   () => pagination.value.rowsPerPage,
   async () => {
@@ -374,8 +316,6 @@ onMounted(async () => {
               :options="statusOptions"
               style="width: 250px"
               @update:model-value="getListData()"
-              :clearable="status !== ''"
-              @clear="clearStatus"
               @filter="(inputValue:string,
               doneFn:Function) => filterOption(inputValue, doneFn
               ) "
@@ -386,8 +326,15 @@ onMounted(async () => {
                     ไม่มีข้อมูล
                   </q-item-section>
                 </q-item>
-              </template></q-select
-            >
+              </template>
+              <template v-if="status !== 'ALL'" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="(status = 'ALL'), getListData()"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
             <q-btn dense round flat icon="add" color="primary" @click="openAdd">
               <q-tooltip>เพิ่มข้อมูล</q-tooltip>
             </q-btn>
@@ -396,12 +343,20 @@ onMounted(async () => {
             <q-input
               v-model="filterKeyword"
               outlined
-              clearable
               dense
               label="ค้นหา"
               @keydown.enter="getListData()"
               style="width: 200px"
             >
+              <template v-slot:append>
+                <q-icon v-if="filterKeyword == ''" name="search" />
+                <q-icon
+                  v-if="filterKeyword !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="(filterKeyword = ''), getListData()"
+                />
+              </template>
             </q-input>
             <q-select
               v-model="visibleColumns"
@@ -447,7 +402,10 @@ onMounted(async () => {
                     v-for="col in props.cols"
                     :key="col.name"
                     :props="props"
-                    class="vertical-top"
+                    class="vertical-top cursor-pointer"
+                    @click="
+                      col.name === 'document' ? '' : onDetail(props.row.id)
+                    "
                   >
                     <div v-if="col.name == 'no'">
                       {{
@@ -470,7 +428,7 @@ onMounted(async () => {
                       </q-btn>
                     </div>
                     <div v-else-if="col.name == 'developmentProjects'">
-                      <div class="column">
+                      <div class="column no-pointer-events">
                         <q-checkbox
                           size="xs"
                           :model-value="props.row.isDevelopment70"
@@ -488,31 +446,6 @@ onMounted(async () => {
                         />
                       </div>
                     </div>
-                    <div v-else-if="col.name == 'developmentResults'">
-                      <div class="column">
-                        <span>
-                          {{
-                            props.row.achievement10
-                              ? `- ${props.row.achievement10} (10)`
-                              : ""
-                          }}
-                        </span>
-                        <span>
-                          {{
-                            props.row.achievement5
-                              ? `- ${props.row.achievement5} (5)`
-                              : ""
-                          }}
-                        </span>
-                        <span>
-                          {{
-                            props.row.achievement0
-                              ? `- ${props.row.achievement10} (0)`
-                              : ""
-                          }}
-                        </span>
-                      </div>
-                    </div>
                     <div v-else class="table_ellipsis">
                       {{ col.value ? col.value : "-" }}
                     </div>
@@ -556,6 +489,11 @@ onMounted(async () => {
     </div>
   </div>
 
-  <DialogDevelop v-model:modal="modalAdd" />
+  <DialogDevelop
+    v-model:modal="modalAdd"
+    :get-data="getListData"
+    v-model:is-edit="isEdit"
+    v-model:id-row="idRow"
+  />
 </template>
 <style scoped lang="scss"></style>