diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index b847b1d..93a0bc9 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -106,6 +106,14 @@ const items = ref<MenuMainList[]>([
     path: "/scholarship",
     active: false,
   },
+  {
+    icon: "mdi-human-handsup",
+    title: "การพัฒนารายบุคคล",
+    sub: "Individual Development Plan",
+    color: "orange-3",
+    path: "/IDP",
+    active: false,
+  },
 ]);
 
 /**
@@ -122,7 +130,6 @@ const fetchlistInbox = async (index: number) => {
         totalInbox.value = res.data.result.total;
         let listItem: InboxDetail[] = [];
         if (data && data.length > 0) {
-
           data.map((e: InboxList) => {
             listItem.push({
               no: e.id ?? "",
diff --git a/src/modules/14_IDP/component/DialogDevelop.vue b/src/modules/14_IDP/component/DialogDevelop.vue
new file mode 100644
index 0000000..b69f1d4
--- /dev/null
+++ b/src/modules/14_IDP/component/DialogDevelop.vue
@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store";
+
+import type {
+  FormDataIDP,
+  DataItemsDevelopment,
+} from "@/modules/14_IDP/interface/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const store = useIndividualDevelopmentPlan();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
+
+const isReadOnly = ref<boolean>(false);
+
+const formData = reactive<FormDataIDP>({
+  topic: "",
+  development: [],
+  otherAction: "",
+  otherPerson: "",
+  otherTraining: "",
+  developmentTarget: "",
+  developmentResults: "",
+  developmentReport: "",
+  document: null,
+});
+
+//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+const itemsDevelopmentAction = ref<DataItemsDevelopment[]>([
+  {
+    value: "on_the_job_training",
+    label: "การฝึกปฏิบัติในงาน (On the job training)",
+  },
+  {
+    value: "job_project_assignment",
+    label: "การมอบหมายงาน/โครงการ (Job/Project assignment)",
+  },
+  {
+    value: "job_shadowing",
+    label: "การติดตามเรียนรู้รูปแบบการทำงานของผู้บริหาร (Job shadowing)",
+  },
+  {
+    value: "job_enlargement",
+    label: "การมอบหมายงานเพิ่มขึ้น (Job enlargement)",
+  },
+  {
+    value: "internal_trainer",
+    label: "การเป็นวิทยากรภายในหน่วยงาน (Internal trainer)",
+  },
+  {
+    value: "rotation",
+    label: "การหมุนเวียนงาน (Rotation)",
+  },
+  {
+    value: "activity",
+    label: "การทำกิจกรรม (Activity)",
+  },
+  {
+    value: "site_visit",
+    label: "การศึกษาดูงานนอกสถานที่ (Site visit)",
+  },
+  {
+    value: "benchmarking",
+    label: "การแลกเปลี่ยน เทียบเคียงความรู้ ประสมการณ์ (Benchmarking)",
+  },
+  {
+    value: "problem_solving",
+    label: "การแก้ปัญหา (Problem-solving)",
+  },
+  {
+    value: "team_working",
+    label: "การทำงานเป็นทีม (Team working)",
+  },
+  {
+    value: "other1",
+    label: "อื่น ๆ (ระบุ)",
+  },
+]);
+//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
+const itemsDevelopmentPerson = ref<DataItemsDevelopment[]>([
+  { value: "coaching", label: "การสอนงาน (Coaching)" },
+  { value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
+  { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
+  { value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
+  { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
+  { value: "other2", label: "อื่น ๆ (ระบุ)" },
+]);
+//10 การฝึกอบรมอื่นๆ
+const itemsDevelopmentTraining = ref<DataItemsDevelopment[]>([
+  {
+    value: "self_learning",
+    label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
+  },
+  { value: "classroom_training", label: "การฝึกอบรม (Classroom training)" },
+  {
+    value: "in_house_training",
+    label: "การฝึกอบรมภายในองค์กร (In – house training)",
+  },
+  {
+    value: "public_training",
+    label: "การฝึกอบรมจากองค์กรภายนอก (Public training)",
+  },
+  {
+    value: "e_training",
+    label: "การฝึกอบรมผ่าน online (e – training / e – learning)",
+  },
+  { value: "meeting", label: "การประชุม (Meeting)" },
+  { value: "seminar", label: "การสัมมนา (Seminar)" },
+  { value: "other3", label: "อื่น ๆ (ระบุ)" },
+]);
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    console.log(formData);
+  });
+}
+
+/**
+ * function ปิด popup
+ */
+function closeDialog() {
+  modal.value = false;
+  formData.topic = "";
+  formData.development = [];
+  formData.otherAction = "";
+  formData.otherPerson = "";
+  formData.otherTraining = "";
+  formData.developmentTarget = "";
+  formData.developmentResults = "";
+  formData.developmentReport = "";
+  formData.document = null;
+}
+
+/**
+ * class inpui
+ * @param val ค่าสถานะ
+ */
+function classInput(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 90vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          tittle="ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section style="max-height: 80vh" class="scroll">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12">
+                  <q-input
+                    :class="classInput(isReadOnly)"
+                    outlined
+                    v-model="formData.topic"
+                    label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
+                    dense
+                  />
+                </div>
+
+                <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-12 col-sm-6 col-lg-4">
+                      <q-label class="q-mb-sm text-weight-medium text-body2"
+                        >70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</q-label
+                      >
+                      <q-option-group
+                        class="check_box q-mt-sm"
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="formData.development"
+                        :options="itemsDevelopmentAction"
+                        type="checkbox"
+                      />
+
+                      <div
+                        class="row q-pb-md"
+                        v-if="formData.development.includes('other1')"
+                      >
+                        <div
+                          class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
+                        >
+                          <div class="other_custom_input">
+                            <q-input
+                              v-model="formData.otherAction"
+                              dense
+                              outlined
+                              class="inputgreen"
+                              label="กรุณาระบุ"
+                            ></q-input>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
+                    <div class="col-12 col-sm-6 col-lg-4">
+                      <q-label class="q-mb-sm text-weight-medium text-body2"
+                        >20 การเรียนรู้จากผู้อื่น
+                        (Coach/Mentor/Consulting)</q-label
+                      >
+                      <q-option-group
+                        class="check_box q-mt-sm"
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="formData.development"
+                        :options="itemsDevelopmentPerson"
+                        type="checkbox"
+                      />
+                      <div
+                        class="row q-pb-md"
+                        v-if="formData.development.includes('other2')"
+                      >
+                        <div
+                          class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
+                        >
+                          <div class="other_custom_input">
+                            <q-input
+                              v-model="formData.otherPerson"
+                              dense
+                              outlined
+                              label="กรุณาระบุ"
+                            ></q-input>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- 10 การฝึกอบรมอื่นๆ -->
+                    <div class="col-12 col-sm-6 col-lg-4">
+                      <q-label class="q-mb-sm text-weight-medium text-body2"
+                        >10 การฝึกอบรมอื่นๆ</q-label
+                      >
+                      <q-option-group
+                        class="check_box q-mt-sm"
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="formData.development"
+                        :options="itemsDevelopmentTraining"
+                        type="checkbox"
+                      />
+                      <div
+                        class="row q-pb-md"
+                        v-if="formData.development.includes('other3')"
+                      >
+                        <div
+                          class="offset-4 offset-md-3 col-8 q-mt-sm relative-position"
+                        >
+                          <div class="other_custom_input">
+                            <q-input
+                              v-model="formData.otherTraining"
+                              dense
+                              outlined
+                              label="กรุณาระบุ"
+                            ></q-input>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- เป้าหมายการนำไปพัฒนางาน -->
+                <div class="col-12">
+                  <q-input
+                    outlined
+                    v-model="formData.developmentTarget"
+                    label="เป้าหมายการนำไปพัฒนางาน"
+                    dense
+                    type="textarea"
+                  />
+                </div>
+
+                <!-- วิธีการวัดผลการพัฒนา -->
+                <div class="col-12">
+                  <q-input
+                    outlined
+                    v-model="formData.developmentResults"
+                    label="วิธีการวัดผลการพัฒนา"
+                    dense
+                    type="textarea"
+                  />
+                </div>
+
+                <!-- รายงานผลการพัฒนา -->
+                <div class="col-12">
+                  <q-input
+                    outlined
+                    v-model="formData.developmentReport"
+                    label="รายงานผลการพัฒนา"
+                    dense
+                    type="textarea"
+                  />
+                </div>
+                <div class="col-12">
+                  <q-file
+                    :class="classInput(isReadOnly)"
+                    v-model="formData.document"
+                    label="อัปโหลดเอกสารหลักฐาน"
+                    flat
+                    dense
+                    outlined
+                    hide-bottom-space
+                    :rules="[(val:any) => !!val || `${'กรุณาเลือกไฟล์'}`]"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </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>
+</template>
+
+<style scoped>
+:deep(.check_box .q-checkbox) {
+  align-items: start;
+}
+
+.other_custom_input {
+  position: absolute;
+  top: -25px;
+  width: 100%;
+}
+</style>
diff --git a/src/modules/14_IDP/interface/Main.ts b/src/modules/14_IDP/interface/Main.ts
new file mode 100644
index 0000000..7e3f83a
--- /dev/null
+++ b/src/modules/14_IDP/interface/Main.ts
@@ -0,0 +1,51 @@
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+interface DataItemsDevelopment {
+  value: string;
+  label: string;
+}
+
+interface FormDataIDP {
+  topic: string;
+  development: string[];
+  otherAction: string;
+  otherPerson: string;
+  otherTraining: string;
+  developmentTarget: string;
+  developmentResults: string;
+  developmentReport: string;
+  document: File | null;
+}
+
+interface RowsListMain {
+  id: string;
+  createdAt: string;
+  createdUserId: string;
+  lastUpdatedAt: string;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  profileId: string;
+  profileEmployeeId: string | null;
+  name: string;
+  target: string;
+  summary: number;
+  point: number;
+  achievement10: string;
+  achievement5: string;
+  achievement0: string;
+  isDevelopment70: boolean;
+  isDevelopment20: boolean;
+  isDevelopment10: boolean;
+  reasonDevelopment70: string;
+  reasonDevelopment20: string;
+  reasonDevelopment10: string;
+  kpiDevelopmentId: string;
+  status: string;
+  remark: string;
+}
+
+export type { DataOption, RowsListMain, DataItemsDevelopment, FormDataIDP };
diff --git a/src/modules/14_IDP/router.ts b/src/modules/14_IDP/router.ts
new file mode 100644
index 0000000..654998f
--- /dev/null
+++ b/src/modules/14_IDP/router.ts
@@ -0,0 +1,17 @@
+/**
+ * Router การพัฒนา
+ */
+
+const idpMain = () => import("@/modules/14_IDP/views/main.vue");
+
+export default [
+  {
+    path: "/idp",
+    name: "idpMain",
+    component: idpMain,
+    meta: {
+      Auth: true,
+      Key: [14],
+    },
+  },
+];
diff --git a/src/modules/14_IDP/store.ts b/src/modules/14_IDP/store.ts
new file mode 100644
index 0000000..7e16a5c
--- /dev/null
+++ b/src/modules/14_IDP/store.ts
@@ -0,0 +1,29 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { DataOption } from "@/modules/10_registry/interface/index/Main";
+
+export const useIndividualDevelopmentPlan = defineStore(
+  "individualDevelopmentPlan",
+  () => {
+    const optionStatus = ref<DataOption[]>([
+      { id: "", name: "ทั้งหมด" },
+      { id: "PENDING", name: "รอดำเนินการ" },
+      { id: "COMPLETE", name: "ดำเนินการแก้ไขแล้ว" },
+      { id: "REJECT", name: "ไม่อนุมัตการแก้ไข" },
+    ]);
+
+    function convertStatus(val: string) {
+      switch (val) {
+        case "PENDING":
+          return "รอดำเนินการ";
+        case "COMPLETE":
+          return "ดำเนินการแก้ไขแล้ว";
+        case "REJECT":
+          return "ไม่อนุมัตการแก้ไข";
+        default:
+          return "-";
+      }
+    }
+    return { convertStatus, optionStatus };
+  }
+);
diff --git a/src/modules/14_IDP/views/main.vue b/src/modules/14_IDP/views/main.vue
new file mode 100644
index 0000000..e28152a
--- /dev/null
+++ b/src/modules/14_IDP/views/main.vue
@@ -0,0 +1,561 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store"; // ดึง store IDP
+
+import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
+
+import DialogDevelop from "@/modules/14_IDP/component/DialogDevelop.vue";
+
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const store = useIndividualDevelopmentPlan();
+const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
+
+const modalAdd = ref<boolean>(false); //ตัวแปร dialog #Add
+const filterKeyword = ref<string>("");
+const status = ref<string>(""); // สถานะคำร้อง
+const statusOptions = ref<DataOption[]>(store.optionStatus);
+
+/** pagination */
+const rows = ref<RowsListMain[]>([]);
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "developmentProjects",
+  "target",
+  "developmentResults",
+  "point",
+  "topic",
+  "detail",
+  "document",
+  "status",
+  "remark",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: (row) => rows.value.indexOf(row) + 1,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentProjects",
+    align: "left",
+    label: "วิธีการพัฒนา",
+    sortable: true,
+    field: "developmentProjects",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "target",
+    align: "left",
+    label: "เป้าหมายการพัฒนา",
+    sortable: true,
+    field: "target",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentResults",
+    align: "left",
+    label: "วิธีการวัดผลการพัฒนา",
+    sortable: true,
+    field: "developmentResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point",
+    align: "left",
+    label: "รายงานผลการพัฒนา",
+    sortable: true,
+    field: "point",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "document",
+    align: "left",
+    label: "หลักฐานอ้างอิง",
+    sortable: true,
+    field: "document",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะคำร้อง",
+    sortable: true,
+    field: "status",
+    format: (v) => store.convertStatus(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ ",
+    sortable: true,
+    field: "remark",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/**
+ * function ค้นหาข้อมูลใน select
+ * @param val คำค้นหา
+ * @param update Function
+ */
+function filterOption(val: string, update: Function) {
+  update(() => {
+    status.value = val ? "" : status.value;
+    statusOptions.value = store.optionStatus.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+/**
+ * function เคลียร์ข้อมูลสถานะคำร้อง
+ */
+function clearStatus() {
+  status.value = "";
+  statusOptions.value = store.optionStatus;
+}
+
+/** ฟังชั่น เปิด popup */
+function openAdd() {
+  modalAdd.value = true;
+}
+
+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(() => {});
+  });
+}
+/** 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(() => {});
+}
+
+/**
+ * function หาชื่อไฟล์
+ * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
+ */
+function onDownloadFile(id: string) {
+  showLoader();
+  http
+    .get(
+      config.API.file(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        "eecb1cd9-4c55-4e73-ba52-36fce07ef18d"
+      )
+    )
+    .then((res) => {
+      if (res.data.length !== 0) {
+        downloadUrl(
+          "eecb1cd9-4c55-4e73-ba52-36fce07ef18d",
+          res.data[0].fileName
+        );
+      } else {
+        hideLoader();
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+/**
+ * function  โหลดไฟล์
+ * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
+ * @param fileName  ชื่อไฟล์
+ */
+function downloadUrl(id: string, fileName: string) {
+  http
+    .get(
+      config.API.fileByFile(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
+        id,
+        fileName
+      )
+    )
+    .then((res) => {
+      window.open(res.data.downloadUrl, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** เมื่อมีการเปลี่ยน แถว ดึงข้อมูลใหม่ */
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getListData();
+  }
+);
+
+onMounted(async () => {
+  await getListData();
+});
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+        รายการคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล (Individual Development Plan)
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <div class="items-center col-12 row q-gutter-sm q-mb-sm">
+            <q-select
+              dense
+              outlined
+              label="สถานะคำร้อง"
+              v-model="status"
+              emit-value
+              map-options
+              use-input
+              option-label="name"
+              option-value="id"
+              :options="statusOptions"
+              style="width: 250px"
+              @update:model-value="getListData()"
+              :clearable="status !== ''"
+              @clear="clearStatus"
+              @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
+            >
+            <q-btn dense round flat icon="add" color="primary" @click="openAdd">
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </q-btn>
+
+            <q-space />
+            <q-input
+              v-model="filterKeyword"
+              outlined
+              clearable
+              dense
+              label="ค้นหา"
+              @keydown.enter="getListData()"
+              style="width: 200px"
+            >
+            </q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="width: 200px"
+            />
+          </div>
+
+          <div>
+            <d-table
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              :paging="true"
+              :visible-columns="visibleColumns"
+              :rows-per-page-options="[1, 25, 50, 100]"
+              @update:pagination="updatePagination"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                  <q-th auto-width />
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    class="vertical-top"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{
+                        (pagination.page - 1) * pagination.rowsPerPage +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+                    <div v-else-if="col.name === 'document'">
+                      <q-btn
+                        icon="mdi-download"
+                        round
+                        dense
+                        flat
+                        color="primary"
+                        size="12px"
+                        @click.pervent="onDownloadFile(props.row.id)"
+                      >
+                        <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div v-else-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 == '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>
+                    <div v-else class="table_ellipsis2">
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                  <q-td class="vertical-top">
+                    <q-btn
+                      v-if="props.row.status === 'PENDING'"
+                      flat
+                      round
+                      color="red"
+                      icon="mdi-delete"
+                      size="12px"
+                      @click="onDelete(props.row.id)"
+                    >
+                      <q-tooltip>ลบข้อมูล</q-tooltip>
+                    </q-btn>
+                  </q-td>
+                </q-tr>
+              </template>
+              <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="getListData()"
+                ></q-pagination>
+              </template>
+            </d-table>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
+
+  <DialogDevelop v-model:modal="modalAdd" />
+</template>
+<style scoped lang="scss"></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index f94c403..53bb5de 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,6 +18,7 @@ import ModuleRegistry from "@/modules/10_registry/router";
 import ModuleProbation from "@/modules/11_probation/router";
 import ModuleOrganization from "@/modules/12_organization/router";
 import ModulePortfolio from "@/modules/13_portfolio/router";
+import ModuleDevelop from "@/modules/14_IDP/router";
 import { authenticated, tokenParsed } from "@/plugins/auth";
 import { ro } from "date-fns/locale";
 // TODO: ใช้หรือไม่?
@@ -57,6 +58,7 @@ const router = createRouter({
         ...ModuleProbation,
         ...ModuleOrganization,
         ...ModulePortfolio,
+        ...ModuleDevelop,
       ],
     },
     {