diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index 579de44b6..5efda6cb6 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -66,43 +66,22 @@ const formData = reactive<FormProjectDetail>({
   developmentProjectTechniqueActuals: [],
   projectModalActual: null,
   projectModalPlanneds: null,
+  strategyChildPlannedId: null, //id ยุทธศาสตร์เป้าหมายตามแผน
+  strategyChildPlannedNode: 0, //node ยุทธศาสตร์เป้าหมายตามแผน
+  strategyChildActualId: null, //id ยุทธศาสตร์เป้าหมายตามจริง
+  strategyChildActualNode: 0, //node ยุทธศาสตร์เป้าหมายตามจริง
 });
 
-const nodes = ref<any>([
-  {
-    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
-    level: "0",
-    children: [
-      {
-        orgTreeName: "ยุทธศาสตร์ที่ 1",
-        level: "1",
-        children: [
-          {
-            orgTreeName: "ยุทธศาสตร์ที่ 2",
-            level: "2",
-            children: [
-              {
-                orgTreeName: "ยุทธศาสตร์ที่ 3",
-                level: "3",
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-]);
+const nodes = ref<any>([]);
 const filter = ref<string>("");
 const filter2 = ref<string>("");
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
 const expanded = ref<Array<any>>([]);
 const expanded2 = ref<Array<any>>([]);
-const nodeId = ref<string>("");
-const nodeId2 = ref<string>("");
-async function fetchData() {
+function fetchData() {
   showLoader();
-  await http
+  http
     .get(config.API.developmentMainTab("tab3", projectId.value))
     .then((res) => {
       const data = res.data.result;
@@ -123,6 +102,26 @@ async function fetchData() {
       formData.projectNigthHoldActual = data.projectNigthHoldActual;
       formData.developmentProjectTechniqueActuals =
         data.developmentProjectTechniqueActuals;
+      formData.strategyChildPlannedId = data.strategyChildPlannedId;
+      formData.strategyChildPlannedNode = data.strategyChildPlannedNode;
+      formData.strategyChildActualId = data.strategyChildActualId;
+      formData.strategyChildActualNode = data.strategyChildActualNode;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchTree() {
+  showLoader();
+  http
+    .get(config.API.devStrategy)
+    .then((res) => {
+      const data = res.data.result;
+      nodes.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -135,10 +134,9 @@ async function fetchData() {
 async function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
-
     await http
       .put(config.API.developmentMainTab("tab3", projectId.value), formData)
-      .then((res) => {
+      .then(() => {
         success($q, "บันทึกข้อมูลสำเร็จ");
         fetchData();
       })
@@ -151,14 +149,17 @@ async function onSubmit() {
 
 function updateSelected(data: any, type: string) {
   if (type === "1") {
-    nodeId.value = data.orgTreeName;
+    formData.strategyChildPlannedId = data.id;
+    formData.strategyChildPlannedNode = data.level;
   } else if (type === "2") {
-    nodeId2.value = data.orgTreeName;
+    formData.strategyChildActualId = data.id;
+    formData.strategyChildActualNode = data.level;
   }
 }
 
 onMounted(() => {
   fetchData();
+  fetchTree();
 });
 </script>
 
@@ -216,8 +217,8 @@ onMounted(() => {
                   dense
                   :nodes="nodes"
                   selected-color="primary"
-                  node-key="orgTreeName"
-                  label-key="orgTreeName"
+                  node-key="id"
+                  label-key="id"
                   :filter="filter"
                   :no-results-label="notFound"
                   :no-nodes-label="noData"
@@ -227,13 +228,13 @@ onMounted(() => {
                     <q-item
                       clickable
                       @click.stop="updateSelected(prop.node, '1')"
-                      :active="nodeId == prop.node.orgTreeName"
-                      active-class="my-list-link text-white text-weight-medium bg-primary"
+                      :active="formData.strategyChildPlannedId == prop.node.id"
+                      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 }}
+                          {{ prop.node.name }}
                         </div>
                       </div>
                     </q-item>
@@ -266,8 +267,8 @@ onMounted(() => {
                 <q-tree
                   dense
                   :nodes="nodes"
-                  node-key="orgTreeName"
-                  label-key="orgTreeName"
+                  node-key="id"
+                  label-key="id"
                   :filter="filter2"
                   :no-results-label="notFound"
                   :no-nodes-label="noData"
@@ -277,13 +278,13 @@ onMounted(() => {
                     <q-item
                       clickable
                       @click.stop="updateSelected(prop.node, '2')"
-                      :active="nodeId2 == prop.node.orgTreeName"
-                      active-class="my-list-link text-white text-weight-medium bg-primary"
+                      :active="formData.strategyChildActualId == prop.node.id"
+                      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 }}
+                          {{ prop.node.name }}
                         </div>
                       </div>
                     </q-item>
@@ -498,4 +499,12 @@ onMounted(() => {
   </q-form>
 </template>
 
-<style scoped></style>
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index 85250e452..1d179fe89 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -79,6 +79,10 @@ interface FormProjectDetail {
   developmentProjectTechniqueActuals: [];
   projectModalActual?: string | null;
   projectModalPlanneds?: string | null;
+  strategyChildPlannedId: string | null; //id ยุทธศาสตร์เป้าหมายตามแผน
+  strategyChildPlannedNode: number; //node ยุทธศาสตร์เป้าหมายตามแผน
+  strategyChildActualId: string | null; //id ยุทธศาสตร์เป้าหมายตามจริง
+  strategyChildActualNode: number; //node ยุทธศาสตร์เป้าหมายตามจริง
 }
 
 export type {
diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index 00d7bb263..a18007bd0 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@@ -127,28 +127,28 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onAdd() {
-  store.statusEdit = false;
-  router.push(`/development/employee-history/add`);
-}
+// function onAdd() {
+//   store.statusEdit = false;
+//   router.push(`/development/employee-history/add`);
+// }
+
 function onDownload() {
   showLoader();
-    http
-      .get(config.API.developmentReportHistoryOfficer())
-      .then((res) => {
-        const dataList = res.data.result;
-        genReportXLSX(
-          dataList,
-          "รายการประวัติฝึกอบรม/ดูงานลูกจ้าง"
-        );
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-
+  http
+    .post(config.API.developmentReportHistoryOfficer(), {
+      year: formFilter.year,
+      root: agency.value,
+    })
+    .then((res) => {
+      const dataList = res.data.result;
+      genReportXLSX(dataList, "รายการประวัติฝึกอบรม/ดูงานลูกจ้าง");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function onEdit(id: string) {
@@ -162,6 +162,7 @@ function getData() {
     pageSize: formFilter.pageSize,
     keyword: formFilter.keyword,
     year: formFilter.year,
+    root: agency.value,
   };
 
   showLoader();
@@ -200,6 +201,7 @@ onMounted(() => {
   getData();
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     รายการประวัติฝึกอบรม/ดูงานลูกจ้าง
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index 370d22fc1..5d12a9afb 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -136,27 +136,31 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onAdd() {
-  store.statusEdit = false;
-  router.push(`/development/history/add`);
-}
+// function onAdd() {
+//   store.statusEdit = false;
+//   router.push(`/development/history/add`);
+// }
+
 function onDownload() {
   showLoader();
-    http
-      .get(config.API.developmentReportHistory())
-      .then((res) => {
-        const dataList = res.data.result;
-        genReportXLSX(
-          dataList,
-          "รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ"
-        );
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
+  http
+    .post(config.API.developmentReportHistory(), {
+      year: formFilter.year,
+      root: agency.value,
+    })
+    .then((res) => {
+      const dataList = res.data.result;
+      genReportXLSX(
+        dataList,
+        "รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function onEdit(id: string) {
@@ -170,6 +174,7 @@ function getData() {
     pageSize: formFilter.pageSize,
     keyword: formFilter.keyword,
     year: formFilter.year,
+    root: agency.value,
   };
 
   showLoader();
@@ -205,6 +210,7 @@ onMounted(() => {
   getData();
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ
@@ -309,23 +315,21 @@ onMounted(() => {
             </template>
           </q-input>
         </div>
-<div class="col-4">
-  <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
-
-        />
-</div>
-
+        <div class="col-4">
+          <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
+          />
+        </div>
       </q-toolbar>
     </div>
     <div class="col-12">
diff --git a/src/modules/15_development/views/Strategic.vue b/src/modules/15_development/views/Strategic.vue
index 719b4ef8a..dce36070b 100644
--- a/src/modules/15_development/views/Strategic.vue
+++ b/src/modules/15_development/views/Strategic.vue
@@ -40,30 +40,7 @@ const ListMenu = ref<ItemsMenu[]>([
   },
 ]);
 
-const nodes = ref<any>([
-  // {
-  //   orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
-  //   level: "0",
-  //   children: [
-  //     {
-  //       orgTreeName: "ยุทธศาสตร์ที่ 1",
-  //       level: "1",
-  //       children: [
-  //         {
-  //           orgTreeName: "ยุทธศาสตร์ที่ 2",
-  //           level: "2",
-  //           children: [
-  //             {
-  //               orgTreeName: "ยุทธศาสตร์ที่ 3",
-  //               level: "3",
-  //             },
-  //           ],
-  //         },
-  //       ],
-  //     },
-  //   ],
-  // },
-]);
+const nodes = ref<any>([]);
 const filter = ref<string>("");
 const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
 const noData = ref<string>("ไม่มีข้อมูล");
@@ -78,7 +55,9 @@ function fetchDataTree() {
       const data = res.data.result;
       nodes.value = data;
     })
-    .catch((err) => {})
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });