From 32ff7bdc964d15af51696d60577a89e55cc239b7 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Fri, 20 Sep 2024 14:47:35 +0700
Subject: [PATCH] Refactoring code module 15_development

---
 .../15_development/components/BasicInfo.vue   |  45 ++-
 .../15_development/components/Budget.vue      |  11 +-
 .../components/DialogRecordPerson.vue         |  43 +--
 .../components/DialogSelectAgency.vue         | 143 -------
 .../components/FollowResult.vue               |  26 +-
 .../15_development/components/MainTab.vue     |  77 ++--
 .../15_development/components/Other.vue       |   5 +-
 .../components/ProjectDetail.vue              |  35 +-
 .../15_development/components/Record.vue      |  21 +-
 .../15_development/components/Risk.vue        |  13 +-
 .../15_development/components/Target.vue      |  15 +-
 .../components/history/AddPage.vue            |  10 +-
 .../components/history/DialogGov.vue          |  31 +-
 .../components/history/DialogProject.vue      | 342 -----------------
 .../components/historyEmployee/AddPage.vue    |   5 +-
 .../components/historyEmployee/DialogGov.vue  | 348 ------------------
 .../historyEmployee/DialogProject.vue         | 340 -----------------
 .../components/scholarship/DetailView.vue     |  32 +-
 .../15_development/interface/index/Main.ts    |  53 +++
 src/modules/15_development/router.ts          |   9 +-
 .../15_development/views/EmployeeHistory.vue  |  17 +-
 src/modules/15_development/views/History.vue  |  16 +-
 src/modules/15_development/views/MainPage.vue |  42 +--
 .../15_development/views/RecordPage.vue       |  29 +-
 .../15_development/views/Scholarship.vue      |   3 +-
 25 files changed, 271 insertions(+), 1440 deletions(-)
 delete mode 100644 src/modules/15_development/components/DialogSelectAgency.vue
 delete mode 100644 src/modules/15_development/components/history/DialogProject.vue
 delete mode 100644 src/modules/15_development/components/historyEmployee/DialogGov.vue
 delete mode 100644 src/modules/15_development/components/historyEmployee/DialogProject.vue

diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index e7f1b1a72..a867ea8e4 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-
 import { useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useStructureTree } from "@/stores/structureTree";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
 import type { DataTree } from "@/modules/15_development/interface/response/Main";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const $q = useQuasar();
 const route = useRoute();
@@ -30,23 +28,24 @@ const props = defineProps({
   onCheckChangeData: { type: Function, required: true },
 });
 
-const projectId = ref<string>(route.params.id.toLocaleString());
+const projectId = ref<string>(route.params.id.toLocaleString()); // เก็บ id
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
-);
+); // check ชื่อ route
+
 const formData = reactive<FormBasicinfo>({
-  year: new Date().getFullYear(),
-  projectName: "",
-  reason: "",
-  objective: "",
-  node: null,
-  nodeId: null,
+  year: new Date().getFullYear(), //ปี
+  projectName: "", //ชืื่อ
+  reason: "", //หลักการเเละเหตุผล
+  objective: "", //วัตถุประสงค์
+  node: null, //หน่วยงาน/ส่วนราชการ
+  nodeId: null, //id หน่วยงาน/ส่วนราชการ
   orgRevisionId: null,
 });
 
-const orgName = ref<string>("");
-const node = ref<any[]>([]);
-const filter = ref<string>("");
+const orgName = ref<string>(""); //ชื่อ หน่วยงาน/ส่วนราชการ
+const node = ref<any[]>([]); //โครงสร้าง หน่วยงาน/ส่วนราชการ
+const filter = ref<string>(""); //input ค้นหา
 const expanded = ref<string[]>([]);
 
 /**
@@ -107,7 +106,7 @@ function onSubmit() {
 }
 
 /**
- *
+ * ดึงข้อมูลโครง้ราง
  */
 async function fetchActive() {
   const dataTree = await fetchStructureTree(route.meta.Key as string, true);
@@ -135,19 +134,19 @@ function onNextTab() {
   props.nextStep();
 }
 
-/**
- * ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น
- */
-onMounted(async () => {
-  fetchActive();
-});
-
 /**
  * เรียก function ไปใช่หน้าหลัก
  */
 defineExpose({
   onSubmit,
 });
+
+/**
+ * ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น
+ */
+onMounted(async () => {
+  fetchActive();
+});
 </script>
 
 <template>
diff --git a/src/modules/15_development/components/Budget.vue b/src/modules/15_development/components/Budget.vue
index 367c9c3e3..2661281fd 100644
--- a/src/modules/15_development/components/Budget.vue
+++ b/src/modules/15_development/components/Budget.vue
@@ -2,8 +2,10 @@
 import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * importType
@@ -11,11 +13,6 @@ import config from "@/app.config";
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
 import type { FormBudget } from "@/modules/15_development/interface/request/Main";
 
-/**
- * importstor
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -33,11 +30,11 @@ const props = defineProps({
   nextStep: { type: Function, required: true },
   onCheckChangeData: { type: Function, required: true },
 });
-const projectId = ref<string>(route.params.id.toLocaleString());
+const projectId = ref<string>(route.params.id.toLocaleString()); //id route
 
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
-);
+); // check ชื่อ route
 const step = ref<string>("");
 
 const budgetOp = ref<DataOption[]>([
diff --git a/src/modules/15_development/components/DialogRecordPerson.vue b/src/modules/15_development/components/DialogRecordPerson.vue
index d67780d50..9ad5aad10 100644
--- a/src/modules/15_development/components/DialogRecordPerson.vue
+++ b/src/modules/15_development/components/DialogRecordPerson.vue
@@ -2,8 +2,10 @@
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * importType
@@ -16,7 +18,6 @@ import type { ResPrefix } from "@/modules/15_development/interface/response/Main
 import DialogHeader from "@/components/DialogHeader.vue";
 
 /** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -33,27 +34,27 @@ const {
 /**
  * props
  */
-const modal = defineModel<boolean>("modal", { required: true });
-const tab = defineModel<string>("tab", { required: true });
+const modal = defineModel<boolean>("modal", { required: true }); //รับ ตัวแปร popup
+const tab = defineModel<string>("tab", { required: true }); //รับข้อมูล tab
 
 const props = defineProps({
   fetchData: { type: Function, required: true },
 });
 
-const projectId = ref<string>(route.params.id.toString());
+const projectId = ref<string>(route.params.id.toString()); // id route
 const formData = reactive({
-  type: "",
-  citizenId: "",
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  position: "",
-  org: "",
-  dateStart: null,
-  dateEnd: null,
-  trainingDays: "",
-  commandNumber: "",
-  commandDate: null,
+  type: "", //ประเภท
+  citizenId: "", // เลข ปชช
+  prefix: "", //คำนำหน้า
+  firstName: "", //ชื่อ
+  lastName: "", //นามสกุล
+  position: "", //ตำแหน่ง
+  org: "", //หน่วยงาน
+  dateStart: null, //วันที่เริ่ม
+  dateEnd: null, //วันที่สิ้นสุด
+  trainingDays: "", //จำนวนวันที่ อบรม
+  commandNumber: "", //เลขที่คำสั่ง
+  commandDate: null, //ลงวันที่
 });
 
 /** Option*/
@@ -67,9 +68,9 @@ const typeOpsMain = ref<DataOption[]>([
     name: "ลูกจ้างประจำ",
   },
 ]);
-const typeOps = ref<DataOption[]>(typeOpsMain.value);
-const prefixOpsMain = ref<DataOption[]>([]);
-const prefixOps = ref<DataOption[]>([]);
+const typeOps = ref<DataOption[]>(typeOpsMain.value); // ตัวเลือกประเภท
+const prefixOpsMain = ref<DataOption[]>([]); //ตัวเลือกคำนำหน้า หลัก
+const prefixOps = ref<DataOption[]>([]); //ตัวเลือกคำนำหน้า
 
 /**
  * function บันทึกข้อมูลการเพิ่มราชชื่อ
@@ -100,7 +101,7 @@ function onSubmit() {
  * @param update function
  * @param refData ประเภท
  */
-const filterSelector = (val: string, update: Function, refData: string) => {
+function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "type":
       update(() => {
@@ -121,7 +122,7 @@ const filterSelector = (val: string, update: Function, refData: string) => {
     default:
       break;
   }
-};
+}
 
 /**
  * function ปิด Dialig และเคลียร์ข้อมูลใน formData
diff --git a/src/modules/15_development/components/DialogSelectAgency.vue b/src/modules/15_development/components/DialogSelectAgency.vue
deleted file mode 100644
index e7b4ff003..000000000
--- a/src/modules/15_development/components/DialogSelectAgency.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-
-const $q = useQuasar();
-const route = useRoute();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
-
-const modal = defineModel<boolean>("modal", { default: false });
-
-const emit = defineEmits(["update:updateAgency"]);
-const node = ref<any>([]);
-const expanded = ref<any>([]);
-const ticked = ref<any>([]);
-
-/** ปิด dialog */
-function closeDialog() {
-  modal.value = false;
-  ticked.value = [];
-  expanded.value = [];
-}
-
-/** ดึงข้อมูล หน่วยงาน */
-function fetchActive() {
-  showLoader();
-  http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-      fetchTree(data.activeId);
-    })
-    .catch((err) => {
-      messageError($q, err);
-      hideLoader();
-    });
-}
-
-/**
- * ดึงข้อมูลหน่วยงาน
- * @param id idเเต่ละรายการ
- */
-async function fetchTree(id: string) {
-  showLoader();
-  http
-    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
-    .then((res) => {
-      const data = res.data.result;
-      node.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * update ข้อมูลเมื่อเลือกหน่วยงาน
- * @param val ข้อมูลหน่วยงาน
- */
-function updateTicked(val: any) {
-  ticked.value = [];
-  ticked.value.push(val[val.length - 1]);
-}
-
-/** บันทึก ส่งข้อมูลกลับไปหน้าหลัก */
-function onSubmit() {
-  emit("update:updateAgency", ticked.value[0]);
-  closeDialog();
-}
-
-watch(
-  () => modal.value,
-  () => {
-    modal.value && fetchActive();
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modal">
-    <q-card style="width: 600px; max-width: 80vw">
-      <DialogHeader
-        :tittle="'เลือกหน่วยงานที่รับผิดชอบ'"
-        :close="closeDialog"
-      />
-      <q-separator />
-
-      <q-card-section class="q-pt-none scroll" style="max-height: 65vh">
-        <q-tree
-          class="q-pa-sm q-gutter-sm"
-          dense
-          :nodes="node"
-          node-key="orgName"
-          label-key="labelName"
-          v-model:expanded="expanded"
-          tick-strategy="strict"
-          v-model:ticked="ticked"
-          @update:ticked="updateTicked"
-        >
-          <template v-slot:default-header="prop">
-            <q-item
-              clickable
-              active-class="my-list-link text-primary text-weight-medium"
-              class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-            >
-              <div>
-                <div class="text-weight-medium">
-                  {{ prop.node.orgTreeName }}
-                </div>
-                <div class="text-weight-light text-grey-8">
-                  {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
-                  {{
-                    prop.node.orgTreeShortName == null
-                      ? null
-                      : prop.node.orgTreeShortName
-                  }}
-                </div>
-              </div>
-            </q-item>
-          </template>
-        </q-tree>
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn dense unelevated label="บันทึก" color="public" @click="onSubmit">
-          <q-tooltip>บันทึกข้อมูล</q-tooltip>
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/15_development/components/FollowResult.vue b/src/modules/15_development/components/FollowResult.vue
index 649a4aad7..46899231e 100644
--- a/src/modules/15_development/components/FollowResult.vue
+++ b/src/modules/15_development/components/FollowResult.vue
@@ -55,22 +55,25 @@ const checkRoutePermission = ref<boolean>(
 const step = ref<string>("");
 
 /***** ตัวชี้วัดความสำเร็จ ******/
-const modalDialog = ref<boolean>(false);
-const isEdit = ref<boolean>(false);
-const indicatorId = ref<string>("");
-const typeAction = ref<string>("");
+const modalDialog = ref<boolean>(false); //popup ตัวชี้วัด
+const isEdit = ref<boolean>(false); // check edit
+const indicatorId = ref<string>(""); //id ตัวชี้วัด
+const typeAction = ref<string>(""); //แยกประเภท ผลการดำเนินการ /แก้ไขตัวชี้วัด /เพิ่มตัวชี้วัด
 const formIndicators = reactive<FormIndicators>({
-  indicators: "",
-  target: null,
-  metricType: "",
-  calculation: "",
-  measuRement: "",
-  results: "",
+  indicators: "", //ตัวชี้วัด
+  target: null, //เป้าหมาย
+  metricType: "", //ประเภทตัวชี้วัด
+  calculation: "", //วิธีการคำนวณ/เครื่องมือ
+  measuRement: "", //ระยะเวลาวัดผล
+  results: "", //ผลการดำเนิดการ
   obstacles: "",
   suggestions: "",
 });
 /** ข้อมูล Table */
 const rows = ref<DevelopmentEvaluations[]>([]); // ข้อมูลรายการ
+const progressTracking = ref<string>(""); //การติดตามความก้าวหน้า
+const projectEvaluation = ref<string>(""); // การประเมินผลโครงการ
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "indicators",
@@ -144,9 +147,6 @@ const metricTypeOp = ref<DataOption[]>([
   },
 ]);
 
-const progressTracking = ref<string>(""); //การติดตามความก้าวหน้า
-const projectEvaluation = ref<string>(""); // การประเมินผลโครงการ
-
 /**
  * ดึงข้อมูลการติดตามผลและการประเมิน
  */
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index 68a4508d6..e909eee20 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -2,8 +2,11 @@
 import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 /** importComponents*/
 import BasicInfo from "@/modules/15_development/components/BasicInfo.vue"; // ข้อมูลเบื้องต้น
@@ -13,11 +16,6 @@ import Budget from "@/modules/15_development/components/Budget.vue"; // งบ
 import Risk from "@/modules/15_development/components/Risk.vue"; //ความเสี่ยง
 import FollowResult from "@/modules/15_development/components/FollowResult.vue"; // การติดตามประเมินผล
 import Other from "@/modules/15_development/components/Other.vue"; // อื่นๆ
-// import Record from "@/modules/15_development/components/Record.vue"; // บันทึกผล
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 /** use*/
 const $q = useQuasar();
@@ -31,9 +29,9 @@ const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
-const projectId = ref<string>(route.params.id.toLocaleString());
-const tab = ref<string>("BasicInfo");
-const status = ref<string>("ONGOING");
+const projectId = ref<string>(route.params.id.toLocaleString()); //id route
+const tab = ref<string>("BasicInfo"); //tab เริ่มต้น
+const status = ref<string>("ONGOING"); //สถานะเริ่มต้น
 const step = ref<string[]>([
   "BasicInfo",
   "Target",
@@ -45,12 +43,28 @@ const step = ref<string[]>([
   "Result",
 ]);
 
+const isChangeData = ref<boolean>(false);
+
+const childBasicInfoRef = ref<InstanceType<typeof BasicInfo> | null>(null);
+const childProjectDetailRef = ref<InstanceType<typeof ProjectDetail> | null>(
+  null
+);
+const childBudgetRef = ref<InstanceType<typeof Budget> | null>(null);
+const childRiskRef = ref<InstanceType<typeof Risk> | null>(null);
+const childFollowResultRef = ref<InstanceType<typeof FollowResult> | null>(
+  null
+);
+const childOtherRef = ref<InstanceType<typeof Other> | null>(null);
+
+//ย้อนกลับ
 function prevStep() {
   const index = step.value.indexOf(tab.value);
   if (index > 0) {
     tab.value = step.value[index - 1];
   }
 }
+
+// ไปข้างหน้า
 function nextStep() {
   const index = step.value.indexOf(tab.value);
   if (index < step.value.length - 1) {
@@ -100,12 +114,6 @@ function onFinish(id: string) {
   );
 }
 
-/** hooklifecycle*/
-onMounted(() => {
-  projectId.value && getStatus(projectId.value);
-});
-
-const isChangeData = ref<boolean>(false);
 /**
  * function เช็คการแกไข้ข้อมูล
  */
@@ -113,17 +121,6 @@ function onCheckChangeData() {
   isChangeData.value = true;
 }
 
-const childBasicInfoRef = ref<InstanceType<typeof BasicInfo> | null>(null);
-const childProjectDetailRef = ref<InstanceType<typeof ProjectDetail> | null>(
-  null
-);
-const childBudgetRef = ref<InstanceType<typeof Budget> | null>(null);
-const childRiskRef = ref<InstanceType<typeof Risk> | null>(null);
-const childFollowResultRef = ref<InstanceType<typeof FollowResult> | null>(
-  null
-);
-const childOtherRef = ref<InstanceType<typeof Other> | null>(null);
-
 watch(tab, (newValue, oldValue) => {
   console.log(`Count changed from ${oldValue} to ${newValue}`);
   if (isChangeData.value) {
@@ -143,6 +140,11 @@ watch(tab, (newValue, oldValue) => {
     }
   }
 });
+
+/** hooklifecycle*/
+onMounted(() => {
+  projectId.value && getStatus(projectId.value);
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -209,8 +211,8 @@ watch(tab, (newValue, oldValue) => {
           <BasicInfo
             ref="childBasicInfoRef"
             :next-step="nextStep"
-            :onCheckChangeData="onCheckChangeData"
-            v-model:isChangeData.value="isChangeData"
+            :on-check-change-data="onCheckChangeData"
+            v-model:is-change-data.value="isChangeData"
           />
         </q-tab-panel>
 
@@ -225,8 +227,8 @@ watch(tab, (newValue, oldValue) => {
             ref="childProjectDetailRef"
             :prev-step="prevStep"
             :next-step="nextStep"
-            :onCheckChangeData="onCheckChangeData"
-            v-model:isChangeData.value="isChangeData"
+            :on-check-change-data="onCheckChangeData"
+            v-model:is-change-data.value="isChangeData"
           />
         </q-tab-panel>
 
@@ -237,8 +239,8 @@ watch(tab, (newValue, oldValue) => {
             :status="status"
             :prev-step="prevStep"
             :next-step="nextStep"
-            :onCheckChangeData="onCheckChangeData"
-            v-model:isChangeData.value="isChangeData"
+            :on-check-change-data="onCheckChangeData"
+            v-model:is-change-data.value="isChangeData"
           />
         </q-tab-panel>
 
@@ -248,8 +250,8 @@ watch(tab, (newValue, oldValue) => {
             ref="childRiskRef"
             :prev-step="prevStep"
             :next-step="nextStep"
-            :onCheckChangeData="onCheckChangeData"
-            v-model:isChangeData.value="isChangeData"
+            :on-check-change-data="onCheckChangeData"
+            v-model:is-change-data.value="isChangeData"
           />
         </q-tab-panel>
         <q-tab-panel name="FollowResult" style="padding: 0px">
@@ -258,8 +260,8 @@ watch(tab, (newValue, oldValue) => {
             :status="status"
             :prev-step="prevStep"
             :next-step="nextStep"
-            :onCheckChangeData="onCheckChangeData"
-            v-model:isChangeData.value="isChangeData"
+            :on-check-change-data="onCheckChangeData"
+            v-model:is-change-data.value="isChangeData"
           />
         </q-tab-panel>
         <q-tab-panel name="Other" style="padding: 0px">
@@ -267,11 +269,10 @@ watch(tab, (newValue, oldValue) => {
             ref="childOtherRef"
             :status="status"
             :prev-step="prevStep"
-            :onCheckChangeData="onCheckChangeData"
-            v-model:isChangeData.value="isChangeData"
+            :on-check-change-data="onCheckChangeData"
+            v-model:is-change-data.value="isChangeData"
           />
         </q-tab-panel>
-        <!-- <q-tab-panel name="Record"> <Record /> </q-tab-panel> -->
       </q-tab-panels>
     </div>
   </q-card>
diff --git a/src/modules/15_development/components/Other.vue b/src/modules/15_development/components/Other.vue
index 9dcf9ce1c..9c747003e 100644
--- a/src/modules/15_development/components/Other.vue
+++ b/src/modules/15_development/components/Other.vue
@@ -39,15 +39,14 @@ const {
   success,
 } = useCounterMixin();
 
-const projectId = ref<string>(route.params.id.toLocaleString());
+const projectId = ref<string>(route.params.id.toLocaleString()); //id route
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
-);
+); //check ชื่อ route
 
 /**
  * props
  */
-const status = defineModel<string>("status", { required: true });
 const isChangeData = defineModel<boolean>("isChangeData", { required: true });
 const props = defineProps({
   prevStep: { type: Function, required: true },
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index a7a688c08..db0674c1e 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -2,20 +2,27 @@
 import { onMounted, reactive, ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 /**importType*/
 import type {
   DataOptionTechnique,
   FormProjectDetail,
   DataOption,
+  StrategyNode
 } from "@/modules/15_development/interface/index/Main";
 import type { DataStrategic } from "@/modules/15_development/interface/response/Main";
 
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
+const $q = useQuasar();
+const store = useDevelopmentDataStore();
+const route = useRoute();
+const projectId = ref<string>(route.params.id.toLocaleString());
+const { showLoader, hideLoader, messageError, date2Thai, diffDay, success } =
+  useCounterMixin();
 
 const isChangeData = defineModel<boolean>("isChangeData", { required: true });
 const props = defineProps({
@@ -25,12 +32,12 @@ const props = defineProps({
 });
 
 const step = ref<string>("");
-const reasonPlanned70 = ref<string>("");
-const reasonPlanned20 = ref<string>("");
-const reasonPlanned10 = ref<string>("");
-const reasonActual70 = ref<string>("");
-const reasonActual20 = ref<string>("");
-const reasonActual10 = ref<string>("");
+const reasonPlanned70 = ref<string>(""); //การเรียนรู้และการพัฒนาจากการลงมือทำ 70 เทคนิควิธีการที่ใช้ในการพัฒนา
+const reasonPlanned20 = ref<string>(""); // การเรียนรู้และการพัฒนาจากบุคคลอื่น 20 เทคนิควิธีการที่ใช้ในการพัฒนา
+const reasonPlanned10 = ref<string>(""); // การเรียนรู้และการพัฒนาจากการฝึกอบรม 10 เทคนิควิธีการที่ใช้ในการพัฒนา
+const reasonActual70 = ref<string>(""); //การเรียนรู้และการพัฒนาจากการลงมือทำ 70 รูปแบบโครงการตามจริง
+const reasonActual20 = ref<string>(""); // การเรียนรู้และการพัฒนาจากบุคคลอื่น 20 รูปแบบโครงการตามจริง
+const reasonActual10 = ref<string>(""); // การเรียนรู้และการพัฒนาจากการฝึกอบรม 10 รูปแบบโครงการตามจริง
 
 const checkOtherBox11 = computed<boolean>(() => {
   return formData.developmentProjectTechniquePlanneds.includes("other1");
@@ -52,12 +59,6 @@ const checkOtherBox23 = computed<boolean>(() => {
   return formData.developmentProjectTechniqueActuals.includes("other3");
 });
 
-const $q = useQuasar();
-const store = useDevelopmentDataStore();
-const route = useRoute();
-const projectId = ref<string>(route.params.id.toLocaleString());
-const { showLoader, hideLoader, messageError, date2Thai, diffDay, success } =
-  useCounterMixin();
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
@@ -182,7 +183,7 @@ const formData = reactive<FormProjectDetail>({
   developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
 });
 
-const nodes = ref<any>([]);
+const nodes = ref<StrategyNode[]>([]);
 const filter = ref<string>("");
 const filter2 = ref<string>("");
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
diff --git a/src/modules/15_development/components/Record.vue b/src/modules/15_development/components/Record.vue
index e67ad2765..4ce60b3ba 100644
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@@ -2,34 +2,19 @@
 import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-/**
- * importType
- */
+import { useCounterMixin } from "@/stores/mixin";
+
 import type { QTableProps } from "quasar";
 import type { ResRecord } from "@/modules/15_development/interface/response/Main";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * usec
  */
 const route = useRoute();
 const $q = useQuasar();
 const id = ref<string>(route.params.id.toString());
-const {
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  date2Thai,
-} = useCounterMixin();
+const { date2Thai } = useCounterMixin();
 
 /**
  * prosp
diff --git a/src/modules/15_development/components/Risk.vue b/src/modules/15_development/components/Risk.vue
index 4619a44a0..954d07df0 100644
--- a/src/modules/15_development/components/Risk.vue
+++ b/src/modules/15_development/components/Risk.vue
@@ -2,26 +2,17 @@
 import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
-/**
- * importType
- */
 import type { QTableProps } from "quasar";
 import type { FormRisk } from "@/modules/15_development/interface/request/Main";
 import type { ResRisk } from "@/modules/15_development/interface/response/Main";
 
-/**
- * importComponents
- */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importstore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index 3c6fb30e4..8c18da78c 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -2,12 +2,12 @@
 import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
 
-/**
- * importType
- */
 import type { QTableProps } from "quasar";
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
 import type {
@@ -22,17 +22,8 @@ import type {
   ResActualGoals,
 } from "@/modules/15_development/interface/response/Main";
 
-/**
- * importComponents
- */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index 31dc5c65a..042e43f47 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -2,16 +2,16 @@
 import { ref, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type {
   FormAddHistory,
   FormAddHistoryProject,
 } from "@/modules/15_development/interface/request/Main";
 
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
@@ -19,9 +19,9 @@ const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 const router = useRouter();
 const route = useRoute();
 
-const id = ref<string>(route.params.id as string);
-const dateOrder = ref<Date | null>(null);
-const order = ref<string>("");
+const id = ref<string>(route.params.id as string); // id route
+const dateOrder = ref<Date | null>(null); // คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่
+const order = ref<string>(""); //เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ
 
 /** ตัวแปรข้อมูลข้าราชการ */
 const formMain = reactive<FormAddHistory>({
diff --git a/src/modules/15_development/components/history/DialogGov.vue b/src/modules/15_development/components/history/DialogGov.vue
index 772f1be5d..96541bfaa 100644
--- a/src/modules/15_development/components/history/DialogGov.vue
+++ b/src/modules/15_development/components/history/DialogGov.vue
@@ -1,23 +1,30 @@
 <script setup lang="ts">
-import { ref, watch, computed, reactive } from "vue";
-import Header from "@/components/DialogHeader.vue";
+import { ref, watch, reactive } from "vue";
+
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type {
   DataOption,
   FormFilter,
   NewPagination,
 } from "@/modules/15_development/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
+import Header from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
 
 const rows = ref<any[]>([]);
 const props = defineProps({
   upDate: { type: Function },
 });
 
-const maxPage = ref<number>(1);
+const maxPage = ref<number>(1); // จำนวนหน้าสูงสุด
 
 const formFilter = reactive<FormFilter>({
   page: 1,
@@ -38,14 +45,10 @@ const pagination = ref({
   rowsPerPage: 20,
 });
 
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
-
 const modal = defineModel<boolean>("modal", { required: true });
-const selected = ref<any[]>([]);
-const search = ref<string>("citizenId");
-const inputSearch = ref<any>("");
+const selected = ref<any[]>([]); // checkbox
+const search = ref<string>("citizenId"); // กำหนดค่าเริ่มต้น ค้นหาจาก
+const inputSearch = ref<any>(""); //ตัวแปร ค้นหา
 const govOp = ref<DataOption[]>([
   {
     id: "citizenId",
diff --git a/src/modules/15_development/components/history/DialogProject.vue b/src/modules/15_development/components/history/DialogProject.vue
deleted file mode 100644
index 6031cfc7f..000000000
--- a/src/modules/15_development/components/history/DialogProject.vue
+++ /dev/null
@@ -1,342 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, reactive } from "vue";
-import Header from "@/components/DialogHeader.vue";
-import type {
-  DataOption,
-  FormFilter,
-  NewPagination,
-} from "@/modules/15_development/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const rows = ref<any[]>([]);
-
-const props = defineProps({
-  upDate: { type: Function },
-});
-
-const year = ref<string>("");
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
-
-const modal = defineModel<boolean>("modal", { required: true });
-
-const maxPage = ref<number>(1);
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 20,
-});
-
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 20,
-  keyword: "",
-  type: "",
-  year: new Date().getFullYear(),
-  posType: "",
-  posLevel: "",
-  retireYear: "",
-  rangeYear: { min: 0, max: 60 },
-  isShowRetire: null,
-  isProbation: null,
-});
-
-const selected = ref<any[]>([]);
-const search = ref<string>("projectName");
-const inputSearch = ref<string>("");
-
-const projectOp = ref<DataOption[]>([
-  {
-    id: "projectName",
-    name: "ชื่อโครงการ",
-  },
-  {
-    id: "year",
-    name: "ปีงบประมาณ",
-  },
-]);
-
-const visibleColumns = ref<string[]>(["project", "year", "organizingTraining"]);
-
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "project",
-    align: "left",
-    label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
-    sortable: true,
-    field: "project",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "year",
-    align: "left",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "organizingTraining",
-    align: "left",
-    label: "หน่วยงานที่รับผิดชอบ",
-    sortable: true,
-    field: "organizingTraining",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-/** save ข้อมูล */
-function onSubmit() {
-  if (selected.value?.length == 0) {
-    dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
-  } else {
-    const data = selected.value[0];
-    const body = {
-      id: data.id,
-      year: data.year,
-      project: data.project,
-      dateStart: data.dateStart,
-      dateEnd: data.dateEnd,
-      totalDate: data.totalDate,
-      addressAcademic: data.addressAcademic,
-      topicAcademic: data.topicAcademic,
-    };
-    props.upDate?.(body);
-    closeDialog();
-  }
-}
-
-/** ปิด dialog */
-function closeDialog() {
-  modal.value = false;
-  rows.value = [];
-  selected.value = [];
-  inputSearch.value = "";
-}
-
-/** class */
-function getClass() {
-  return "inputgreen";
-}
-
-/** ค้นข้อมูลตาม ฟิลเตอร์ */
-function searchFilter() {
-  let queryParams: any = {
-    page: formFilter.page,
-    pageSize: formFilter.pageSize,
-    searchField: search.value,
-    searchKeyword: search.value == "year" ? year.value : inputSearch.value,
-  };
-  showLoader();
-  http
-    .get(config.API.developmentProjectSearch(), { params: queryParams })
-    .then((res) => {
-      const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      rows.value = data.map((item: any) => ({
-        id: item.id ? item.id : null,
-        year: item.year ? item.year : null,
-        project: item.projectName ? item.projectName : null,
-        dateStart: item.dateStart ? item.dateStart : null,
-        dateEnd: item.dateEnd ? item.dateEnd : null,
-        totalDate: item.totalDate ? item.totalDate : null,
-        addressAcademic: item.addressAcademic ? item.addressAcademic : null,
-        topicAcademic: item.topicAcademic ? item.topicAcademic : null,
-      }));
-    })
-    .catch((e) => {
-      messageError($q, e``);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** update ค่า เเถวข้อมูล */
-function updatePage(val: number) {
-  formFilter.page = val;
-  searchFilter();
-}
-
-/** update ค่า เเถวข้อมูล */
-function updatePageSize(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-/** เช็คเเถวข้อมูลว่ามีการเปลี่ยนแปลงไหม */
-watch(
-  () => formFilter.pageSize,
-  () => {
-    searchFilter();
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 60%">
-      <Header :tittle="'เลือกโครงการ'" :close="closeDialog" />
-      <q-separator />
-
-      <q-card-section>
-        <div class="row q-col-gutter-x-sm">
-          <div class="col-2">
-            <q-select
-              dense
-              outlined
-              label="ค้นหาจาก"
-              v-model="search"
-              option-label="name"
-              option-value="id"
-              :options="projectOp"
-              map-options
-              emit-value
-              :class="getClass()"
-            />
-          </div>
-          <div v-if="search == 'year'" class="col-3">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="year"
-              class="col-2"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  dense
-                  lazy-rules
-                  outlined
-                  :model-value="year === '' ? null : Number(year) + 543"
-                  :label="`${'ปีงบประมาณ'}`"
-                >
-                  <template v-if="year" v-slot:append>
-                    <q-icon
-                      name="cancel"
-                      @click.stop.prevent="year = ''"
-                      class="cursor-pointer"
-                    />
-                  </template>
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div v-else class="col-8">
-            <q-input
-              dense
-              outlined
-              label="ค้นหา"
-              v-model="inputSearch"
-              :class="getClass()"
-            />
-          </div>
-          <q-space v-if="search == 'year'" />
-          <div class="col-2">
-            <q-btn
-              label="ค้นหา"
-              class="full-width"
-              unelevated
-              color="teal"
-              @click="searchFilter()"
-            >
-            </q-btn>
-          </div>
-        </div>
-        <div class="q-mt-sm">
-          <d-table
-            selection="single"
-            v-model:selected="selected"
-            for="table"
-            ref="table"
-            :columns="columns"
-            :rows="rows"
-            row-key="id"
-            flat
-            bordered
-            dense
-            class="custom-header-table"
-            :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
-            :rows-per-page-options="[20, 25, 50, 100]"
-            @update:pagination="updatePageSize"
-          >
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="formFilter.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(maxPage)"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-                @update:model-value="updatePage"
-              ></q-pagination>
-            </template>
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th class="text-center"> </q-th>
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td class="text-center">
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
-                </q-td>
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name == 'year'">
-                    {{ col.value ? col.value + 543 : "-" }}
-                  </div>
-                  <div v-else class="table_ellipsis">
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
-      </q-card-section>
-      <q-separator />
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          label="บันทึก"
-          color="secondary"
-          type="submit"
-          @click="onSubmit()"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/15_development/components/historyEmployee/AddPage.vue b/src/modules/15_development/components/historyEmployee/AddPage.vue
index 4d5607029..4266de2b1 100644
--- a/src/modules/15_development/components/historyEmployee/AddPage.vue
+++ b/src/modules/15_development/components/historyEmployee/AddPage.vue
@@ -2,6 +2,7 @@
 import { ref, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -15,9 +16,9 @@ import type {
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
+const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
@@ -53,8 +54,6 @@ const formMainProject = reactive<FormAddHistoryProject>({
   totalTraining: "", //รวมระยะเวลาในการฝึกอบรม
   location: "", //สถานที่ไปศึกษาดูงาน
   topic: "", //หัวข้อการไปศึกษาดูงาน
-  // studyStart: "", //วันเริ่มต้นการศึกษาดูงาน
-  // studyEnd: "", //วันสิ้นสุดการศึกษาดูงาน
   organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
 });
 
diff --git a/src/modules/15_development/components/historyEmployee/DialogGov.vue b/src/modules/15_development/components/historyEmployee/DialogGov.vue
deleted file mode 100644
index ea03d2cba..000000000
--- a/src/modules/15_development/components/historyEmployee/DialogGov.vue
+++ /dev/null
@@ -1,348 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, computed, reactive } from "vue";
-import Header from "@/components/DialogHeader.vue";
-import type {
-  DataOption,
-  FormFilter,
-  NewPagination,
-} from "@/modules/15_development/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const rows = ref<any[]>([]);
-const props = defineProps({
-  upDate: { type: Function },
-});
-
-const maxPage = ref<number>(1);
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 20,
-  keyword: "",
-  year: new Date().getFullYear(),
-  type: "",
-  posType: "",
-  posLevel: "",
-  retireYear: "",
-  rangeYear: { min: 0, max: 60 },
-  isShowRetire: null,
-  isProbation: null,
-});
-
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 20,
-});
-
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
-
-const modal = defineModel<boolean>("modal", { required: true });
-const selected = ref<any[]>([]);
-const search = ref<string>("citizenId");
-const inputSearch = ref<any>("");
-
-const govOp = ref<DataOption[]>([
-  {
-    id: "citizenId",
-    name: "เลขประจำตัวประชาชน",
-  },
-  {
-    id: "fullName",
-    name: "ชื่อ - นามสกุล",
-  },
-]);
-
-const visibleColumns = ref<string[]>([
-  "citizenId",
-  "name",
-  "position",
-  "type",
-  "level",
-  "positionSide",
-]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ - นามสกุล",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "position",
-    align: "left",
-    label: "ตําแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "type",
-    align: "left",
-    label: "กลุ่มงาน",
-    sortable: true,
-    field: "type",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "level",
-    align: "left",
-    label: "ระดับชั้นงาน",
-    sortable: true,
-    field: "level",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-/** save ข้อมูล */
-function onSubmit() {
-  if (selected.value?.length == 0) {
-    dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
-  } else {
-    const data = selected.value[0];
-    const body = {
-      id: data.id,
-      name: data.name,
-      prefix: data.prefix,
-      rank: data.rank,
-      firstName: data.firstName,
-      lastName: data.lastName,
-      citizenId: data.citizenId,
-      level: data.level,
-      type: data.type,
-      posLevelId: data.posLevelId,
-      posTypeId: data.posTypeId,
-      position: data.position,
-      positionSide: data.positionSide,
-      posNo: data.posNo,
-    };
-    props.upDate?.(body);
-    closeDialog();
-  }
-}
-
-/** ปิด dialog */
-function closeDialog() {
-  modal.value = false;
-  rows.value = [];
-  selected.value = [];
-  inputSearch.value = "";
-}
-
-/** class */
-function getClass() {
-  return "inputgreen";
-}
-
-/** ดึงข้อมูลตาม keyword */
-function searchFilter() {
-  let queryParams: any = {
-    page: formFilter.page,
-    pageSize: formFilter.pageSize,
-    searchField: search.value,
-    searchKeyword: inputSearch.value,
-  };
-  showLoader();
-  http
-    .get(config.API.developmentProjectSearchEmployee(), { params: queryParams })
-    .then((res) => {
-      const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      rows.value = data.map((item: any) => ({
-        id: item.id ? item.id : null,
-        prefix: item.prefix ? item.prefix : null,
-        rank: item.rank ? item.rank : null,
-        name: item.firstName
-          ? `${item.prefix}${item.firstName} ${item.lastName}`
-          : null,
-        firstName: item.firstName ? item.firstName : null,
-        lastName: item.lastName ? item.lastName : null,
-        citizenId: item.citizenId ? item.citizenId : null,
-        level: item.posLevel ? item.posLevel : null,
-        type: item.posType ? item.posType : null,
-        posTypeShortName: item.posTypeShortName ? item.posTypeShortName : null,
-        posLevelId: item.posLevelId ? item.posLevelId : null,
-        posTypeId: item.posTypeId ? item.posTypeId : null,
-        position: item.position ? item.position : null,
-        posNo: item.posNo ? item.posNo : null,
-      }));
-    })
-    .catch((e) => {
-      messageError($q, e``);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** update ค่า เเถวข้อมูล
- * @param val ตัวเลขที่มีการเปลี่ยนค่า
- */
-function updatePage(val: number) {
-  formFilter.page = val;
-  searchFilter();
-}
-
-/** update ค่า เเถวข้อมูล
- * @param newPagination ตัวเลขที่มีการเปลี่ยนค่า
- */
-function updatePageSize(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-/** เช็คเเถวข้อมูลว่ามีการเปลี่ยนแปลงไหม */
-watch(
-  () => formFilter.pageSize,
-  () => {
-    searchFilter();
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 60%">
-      <Header :tittle="'เลือกลูกจ้าง'" :close="closeDialog" />
-      <q-separator />
-
-      <q-card-section>
-        <div class="row q-col-gutter-x-sm">
-          <div class="col-3">
-            <q-select
-              dense
-              outlined
-              label="ค้นหาจาก"
-              v-model="search"
-              option-label="name"
-              option-value="id"
-              :options="govOp"
-              map-options
-              emit-value
-              :class="getClass()"
-              @update:model-value="inputSearch = ''"
-            />
-          </div>
-          <div class="col-7">
-            <q-input
-              dense
-              outlined
-              label="ค้นหา"
-              v-model="inputSearch"
-              :class="getClass()"
-              :mask="search === 'citizenId' ? '#############' : undefined"
-            />
-          </div>
-          <div class="col-2">
-            <q-btn
-              label="ค้นหา"
-              class="full-width"
-              unelevated
-              color="teal"
-              @click="searchFilter()"
-            >
-            </q-btn>
-          </div>
-        </div>
-        <div class="q-mt-sm">
-          <d-table
-            style="max-height: 70vh"
-            virtual-scroll
-            selection="single"
-            v-model:selected="selected"
-            for="table"
-            ref="table"
-            :columns="columns"
-            :rows="rows"
-            row-key="id"
-            flat
-            bordered
-            dense
-            class="custom-header-table"
-            :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
-            :rows-per-page-options="[20, 25, 50, 100]"
-            @update:pagination="updatePageSize"
-          >
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="formFilter.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(maxPage)"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-                @update:model-value="updatePage"
-              ></q-pagination>
-            </template>
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th class="text-center"> </q-th>
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td class="text-center">
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
-                </q-td>
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name == 'type'">
-                    {{ col.value ? col.value : "-"
-                    }}{{
-                      props.row.posTypeShortName
-                        ? `(${props.row.posTypeShortName})`
-                        : ""
-                    }}
-                  </div>
-                  <div v-else>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
-      </q-card-section>
-      <q-separator />
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          label="บันทึก"
-          color="secondary"
-          type="submit"
-          @click="onSubmit()"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/15_development/components/historyEmployee/DialogProject.vue b/src/modules/15_development/components/historyEmployee/DialogProject.vue
deleted file mode 100644
index 125897360..000000000
--- a/src/modules/15_development/components/historyEmployee/DialogProject.vue
+++ /dev/null
@@ -1,340 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, reactive } from "vue";
-import Header from "@/components/DialogHeader.vue";
-import type {
-  DataOption,
-  FormFilter,
-  NewPagination,
-} from "@/modules/15_development/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const rows = ref<any[]>([]);
-const props = defineProps({
-  upDate: { type: Function },
-});
-
-const year = ref<string>("");
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
-
-const modal = defineModel<boolean>("modal", { required: true });
-
-const maxPage = ref<number>(1);
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 20,
-});
-
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 20,
-  keyword: "",
-  type: "",
-  year: new Date().getFullYear(),
-  posType: "",
-  posLevel: "",
-  retireYear: "",
-  rangeYear: { min: 0, max: 60 },
-  isShowRetire: null,
-  isProbation: null,
-});
-
-const selected = ref<any[]>([]);
-const search = ref<string>("projectName");
-const inputSearch = ref<string>("");
-
-const projectOp = ref<DataOption[]>([
-  {
-    id: "projectName",
-    name: "ชื่อโครงการ",
-  },
-  {
-    id: "year",
-    name: "ปีงบประมาณ",
-  },
-]);
-
-const visibleColumns = ref<string[]>(["project", "year", "organizingTraining"]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "project",
-    align: "left",
-    label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
-    sortable: true,
-    field: "project",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "year",
-    align: "left",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "organizingTraining",
-    align: "left",
-    label: "หน่วยงานที่รับผิดชอบ",
-    sortable: true,
-    field: "organizingTraining",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-/** save ข้อมูล */
-function onSubmit() {
-  if (selected.value?.length == 0) {
-    dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
-  } else {
-    const data = selected.value[0];
-    const body = {
-      id: data.id,
-      year: data.year,
-      project: data.project,
-      dateStart: data.dateStart,
-      dateEnd: data.dateEnd,
-      totalDate: data.totalDate,
-      addressAcademic: data.addressAcademic,
-      topicAcademic: data.topicAcademic,
-    };
-    props.upDate?.(body);
-    closeDialog();
-  }
-}
-
-/** ปิด dialog */
-function closeDialog() {
-  modal.value = false;
-  rows.value = [];
-  selected.value = [];
-  inputSearch.value = "";
-}
-
-/** class */
-function getClass() {
-  return "inputgreen";
-}
-
-/** ค้นข้อมูลตาม ฟิลเตอร์ */
-function searchFilter() {
-  let queryParams: any = {
-    page: formFilter.page,
-    pageSize: formFilter.pageSize,
-    searchField: search.value,
-    searchKeyword: search.value == "year" ? year.value : inputSearch.value,
-  };
-  showLoader();
-  http
-    .get(config.API.developmentProjectSearch(), { params: queryParams })
-    .then((res) => {
-      const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      rows.value = data.map((item: any) => ({
-        id: item.id ? item.id : null,
-        year: item.year ? item.year : null,
-        project: item.projectName ? item.projectName : null,
-        dateStart: item.dateStart ? item.dateStart : null,
-        dateEnd: item.dateEnd ? item.dateEnd : null,
-        totalDate: item.totalDate ? item.totalDate : null,
-        addressAcademic: item.addressAcademic ? item.addressAcademic : null,
-        topicAcademic: item.topicAcademic ? item.topicAcademic : null,
-      }));
-    })
-    .catch((e) => {
-      messageError($q, e``);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** update ค่า เเถวข้อมูล */
-function updatePage(val: number) {
-  formFilter.page = val;
-  searchFilter();
-}
-
-/** update ค่า เเถวข้อมูล */
-function updatePageSize(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-/** เช็คเเถวข้อมูลว่ามีการเปลี่ยนแปลงไหม */
-watch(
-  () => formFilter.pageSize,
-  () => {
-    searchFilter();
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 60%">
-      <Header :tittle="'เลือกโครงการ'" :close="closeDialog" />
-      <q-separator />
-
-      <q-card-section>
-        <div class="row q-col-gutter-x-sm">
-          <div class="col-2">
-            <q-select
-              dense
-              outlined
-              label="ค้นหาจาก"
-              v-model="search"
-              option-label="name"
-              option-value="id"
-              :options="projectOp"
-              map-options
-              emit-value
-              :class="getClass()"
-            />
-          </div>
-          <div v-if="search == 'year'" class="col-3">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="year"
-              class="col-2"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  dense
-                  lazy-rules
-                  outlined
-                  :model-value="year === '' ? null : Number(year) + 543"
-                  :label="`${'ปีงบประมาณ'}`"
-                >
-                  <template v-if="year" v-slot:append>
-                    <q-icon
-                      name="cancel"
-                      @click.stop.prevent="year = ''"
-                      class="cursor-pointer"
-                    />
-                  </template>
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div v-else class="col-8">
-            <q-input
-              dense
-              outlined
-              label="ค้นหา"
-              v-model="inputSearch"
-              :class="getClass()"
-            />
-          </div>
-          <q-space v-if="search == 'year'" />
-          <div class="col-2">
-            <q-btn
-              label="ค้นหา"
-              class="full-width"
-              unelevated
-              color="teal"
-              @click="searchFilter()"
-            >
-            </q-btn>
-          </div>
-        </div>
-        <div class="q-mt-sm">
-          <d-table
-            selection="single"
-            v-model:selected="selected"
-            for="table"
-            ref="table"
-            :columns="columns"
-            :rows="rows"
-            row-key="id"
-            flat
-            bordered
-            dense
-            class="custom-header-table"
-            :visible-columns="visibleColumns"
-            v-model:pagination="pagination"
-            :rows-per-page-options="[20, 25, 50, 100]"
-            @update:pagination="updatePageSize"
-          >
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="formFilter.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(maxPage)"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-                @update:model-value="updatePage"
-              ></q-pagination>
-            </template>
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th class="text-center"> </q-th>
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td class="text-center">
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
-                </q-td>
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name == 'year'">
-                    {{ col.value ? col.value + 543 : "-" }}
-                  </div>
-                  <div v-else class="table_ellipsis">
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
-      </q-card-section>
-      <q-separator />
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn
-          label="บันทึก"
-          color="secondary"
-          type="submit"
-          @click="onSubmit()"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/15_development/components/scholarship/DetailView.vue b/src/modules/15_development/components/scholarship/DetailView.vue
index 9d9fbe855..47afaebaa 100644
--- a/src/modules/15_development/components/scholarship/DetailView.vue
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@@ -2,26 +2,25 @@
 import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type {
   DataOption,
   DataPerson,
+  PersonData
 } from "@/modules/15_development/interface/index/Main";
 import type { FormsSholarship } from "@/modules/15_development/interface/request/Scholarship";
 import type { DataSholarship } from "@/modules/15_development/interface/response/Scholarship";
 
 import DialogGov from "@/modules/15_development/components/history/DialogGov.vue";
-import { useCounterMixin } from "@/stores/mixin";
 
 const fileBackReceived = ref<string>("");
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const checkRouteDetail = ref<boolean>(
-  route.name == "developmentScholarshipidDetail"
-);
 const {
   dialogConfirm,
   showLoader,
@@ -32,12 +31,17 @@ const {
   calculateDurationYmd,
 } = useCounterMixin();
 
-const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
+const checkRouteDetail = ref<boolean>(
+  route.name == "developmentScholarshipidDetail"
+); // check ชือ route
+
+const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม"); //หัวข้อหน้า
 const scholarshipId = ref<string | null>(
   route.params.id ? route.params.id.toLocaleString() : null
-);
-const isStatus = ref<string>("");
-const modalDialogGov = ref<boolean>(false);
+); // เก็บ id route.
+
+const isStatus = ref<string>(""); // สถานะ
+const modalDialogGov = ref<boolean>(false); // popup เลือกข้าราชการ ฯ
 
 const budgetSourceOp = ref<DataOption[]>([
   { id: "BKK", name: "งบประมาณ กทม." },
@@ -74,10 +78,11 @@ const fundTypeOp = ref<DataOption[]>([
   { id: "FUND5", name: "ทุนส่วนตัว" },
 ]);
 
-const isGov = ref<boolean>(false);
-const isGuarantor = ref<boolean>(false);
-const isSelectGov = ref<boolean>(false);
-const dataPerson = reactive({
+const isGov = ref<boolean>(false); // เก็บเช็คข้าราชการ ถ้ามี เลข ปชช. true/false
+const isGuarantor = ref<boolean>(false); // ข้อมูลผู้ค้ำประกัน มี/ไม่มี
+const isSelectGov = ref<boolean>(false); // เลือกข้าราชการ
+
+const dataPerson = reactive<PersonData>({
   id: "",
   citizenId: "",
   name: "",
@@ -87,7 +92,8 @@ const dataPerson = reactive({
   positionSide: "",
   org: "-",
 });
-const dataGuarantor = reactive({
+
+const dataGuarantor = reactive<PersonData>({
   id: "",
   citizenId: "",
   name: "",
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index c9cbaacc3..9729cdf31 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -105,6 +105,56 @@ interface DataHistory {
   year: number;
 }
 
+interface OrgTree {
+  orgTreeId: string;
+  orgRootId: string;
+  orgLevel: number;
+  orgName: string;
+  orgTreeName: string;
+  orgTreeShortName: string;
+  orgTreeCode: string;
+  orgCode: string;
+  orgTreeRank: string;
+  orgTreeRankSub: string;
+  orgTreeOrder: number;
+  orgRootCode: string;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeFax: string;
+  orgRevisionId: string;
+  orgRootName: string;
+  responsibility: string;
+  labelName: string;
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+  children: OrgTree[];
+}
+
+interface PersonData {
+  id: string;
+  citizenId: string;
+  name: string;
+  position: string;
+  type: string;
+  level: string;
+  positionSide: string;
+  org: string;
+}
+
+interface StrategyNode {
+  id: string;
+  level: number;
+  name: string;
+  children: StrategyNode[];
+}
 export type {
   DataOption,
   DataOptionCheckBox,
@@ -116,4 +166,7 @@ export type {
   FormProjectDetail,
   DataOptionTechnique,
   DataHistory,
+  OrgTree,
+  PersonData,
+  StrategyNode,
 };
diff --git a/src/modules/15_development/router.ts b/src/modules/15_development/router.ts
index ad1063244..3cf0115a8 100644
--- a/src/modules/15_development/router.ts
+++ b/src/modules/15_development/router.ts
@@ -8,22 +8,15 @@ const employeeHistory = () =>
   import("@/modules/15_development/views/EmployeeHistory.vue");
 const Scholarship = () =>
   import("@/modules/15_development/views/Scholarship.vue");
-// const historyAdd = () =>
-//   import("@/modules/15_development/components/history/AddPage.vue");
 const historyEdit = () =>
   import("@/modules/15_development/components/history/AddPage.vue");
-// const historyEmployeeAdd = () =>
-//   import("@/modules/15_development/components/historyEmployee/AddPage.vue");
+
 const historyEmployeeEdit = () =>
   import("@/modules/15_development/components/historyEmployee/AddPage.vue");
 const ScholarshipDetail = () =>
   import("@/modules/15_development/components/scholarship/DetailView.vue");
 const ScholarshipDetailById = () =>
   import("@/modules/15_development/components/scholarship/DetailView.vue");
-// const historyAdd = () =>
-//   import("@/modules/15_development/components/history/AddPage.vue");
-// const StrategicView = () =>
-//   import("@/modules/15_development/views/Strategic.vue");
 
 const RecordPage = () =>
   import("@/modules/15_development/views/RecordPage.vue");
diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index d2e531b4f..de06229b0 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@@ -1,27 +1,28 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
 import { useRoute, useRouter } from "vue-router";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 
 import type {
   NewPagination,
   ItemsMenu,
 } from "@/modules/15_development/interface/index/Main";
 
-/** importStore*/
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
-import { useCounterMixin } from "@/stores/mixin";
-import { checkPermission } from "@/utils/permissions";
 /** use*/
+const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
 const store = useDevelopmentDataStore();
-const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
-const maxPage = ref<number>(1);
+
+const maxPage = ref<number>(1); // จำนวนหน้า
 const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 const formFilter = reactive({
   root: null,
@@ -317,10 +318,6 @@ onMounted(() => {
             />
           </template>
         </q-select>
-
-        <!-- <q-btn flat round dense icon="add" color="primary" @click="onAdd()">
-          <q-tooltip>เพิ่ม</q-tooltip>
-        </q-btn> -->
       </q-toolbar>
       <q-toolbar class="col-4 text-white q-pa-none q-gutter-x-sm">
         <q-space />
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index ec5bab91b..e0c41af0c 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -2,9 +2,13 @@
 import { ref, onMounted, reactive, 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 genReportXLSX from "@/plugins/genreportxlsx";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 
 /**
  * importType
@@ -17,17 +21,10 @@ import type {
 } from "@/modules/15_development/interface/index/Main";
 import type { ResHistory } from "@/modules/15_development/interface/response/Main";
 
-/**
- * importStore
- */
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
-import { useCounterMixin } from "@/stores/mixin";
-import { checkPermission } from "@/utils/permissions";
-
 /** use*/
+const $q = useQuasar();
 const router = useRouter();
 const store = useDevelopmentDataStore();
-const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const formFilter = reactive({
@@ -42,9 +39,8 @@ const agencyOp = ref<DataOption[]>([]); // หน่วยงาน
 /**
  * ข้อมูล Table
  */
-
 const rows = ref<DataHistory[]>([]);
-const maxPage = ref<number>(1);
+const maxPage = ref<number>(1); //จำนวนหน้าสูงสุด
 const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 const columns = ref<QTableProps["columns"]>([
   {
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index f4af382e5..ef3518300 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import genReportXLSX from "@/plugins/genreportxlsx";
-
 import { useRoute, useRouter } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
 import { useStructureTree } from "@/stores/structureTree";
+import genReportXLSX from "@/plugins/genreportxlsx";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**importType*/
 import type {
   DataOption,
   NewPagination,
+  OrgTree,
 } from "@/modules/15_development/interface/index/Main";
 import type {
   FormQueryListProject,
@@ -23,14 +26,7 @@ import type {
   DataTree,
 } from "@/modules/15_development/interface/response/Main";
 
-/**
- * importComponents
- */
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();
@@ -46,16 +42,16 @@ const {
   dialogConfirm,
 } = useCounterMixin();
 
-const node = ref<any>([]);
+const node = ref<OrgTree[]>([]); // หน่วยงาน/ส่วนราชการ
 const expanded = ref<string[]>([]);
 const expandedDialog = ref<string[]>([]);
 
-const filter = ref<string>("");
-const filterMain = ref<string>("");
-const splitterModel = ref<number>(60);
-const modal = ref<boolean>(false);
+const filter = ref<string>(""); //ค้นหา เพิ่มโครงการ/หลักสูตรการฝึกอบรม
+const filterMain = ref<string>(""); //ค้นหา หน่วยงาน/ส่วนราชการ
+const splitterModel = ref<number>(60); //แบ่ง ส่วน
+const modal = ref<boolean>(false); // ตัวแปร dialog
 const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
-const totalPage = ref<number>(1);
+const totalPage = ref<number>(1); // จำนวนข้อมูลที่มี
 
 const statusOpt = ref<DataOption[]>([
   { id: "ONGOING", name: "กำลังดำเนินการ" },
@@ -269,14 +265,6 @@ function onRedirectToRecordPage(id: string) {
   router.push(`/development/record/${id}`);
 }
 
-/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchListProject();
-  }
-);
-
 /**
  * function redirect หน้าบันทึกผล
  * @param id โครงการ
@@ -285,6 +273,14 @@ function onDetail(id: string) {
   router.push(`/development-detail/${id}`);
 }
 
+/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchListProject();
+  }
+);
+
 /** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
 onMounted(() => {
   fetchActive();
diff --git a/src/modules/15_development/views/RecordPage.vue b/src/modules/15_development/views/RecordPage.vue
index f779a45ab..7f135843d 100644
--- a/src/modules/15_development/views/RecordPage.vue
+++ b/src/modules/15_development/views/RecordPage.vue
@@ -2,21 +2,16 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import env from "@/api/index";
-
-/**
- * importComponents
- */
-import Record from "@/modules/15_development/components/Record.vue"; // บันทึกผล
-import DialogRecordPerson from "@/modules/15_development/components/DialogRecordPerson.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 import type { ResRecord } from "@/modules/15_development/interface/response/Main";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import Record from "@/modules/15_development/components/Record.vue";
+import DialogRecordPerson from "@/modules/15_development/components/DialogRecordPerson.vue";
 
 /**
  * use
@@ -31,13 +26,13 @@ const { showLoader, hideLoader, messageError, dialogConfirm, success } =
 /**
  * ตัวแปร
  */
-const projectId = ref<string>(route.params.id.toLocaleString());
-const tab = ref<string>("IN");
-const title = ref<string>("");
-const isLoadPage = ref<boolean>(false);
-const files = ref<any>(null);
-const listPerson = ref<ResRecord[]>([]);
-const modalAddPerson = ref<boolean>(false);
+const projectId = ref<string>(route.params.id.toLocaleString()); //id route
+const tab = ref<string>("IN"); //tab
+const title = ref<string>(""); // หัวข้อ
+const isLoadPage = ref<boolean>(false); // เช็คโหลดหน้า
+const files = ref<any>(null); // ไฟล์
+const listPerson = ref<ResRecord[]>([]); // ตัวแปร เก็บบุคคล
+const modalAddPerson = ref<boolean>(false); // ตัวแปร dialog เพิ่มบุคคล
 
 /**
  * function fetch ข้อมูลเบื้องต้น
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index 6a22d6f90..fa32564f9 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -2,9 +2,11 @@
 import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import genReportXLSX from "@/plugins/genreportxlsx";
 
 import type {
@@ -14,7 +16,6 @@ import type {
 } from "@/modules/15_development/interface/index/Main";
 import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship";
 /** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();