diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index c0e3329e7..f7649aa45 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -9,6 +9,8 @@ export default {
   /** history */
   developmentHistoryList: (type: string) =>
     `${development}/history/${type}/filter`,
+  developmentHistoryListByid: (type: string, id: string) =>
+    `${development}/history/${type}/${id}`,
   developmentHistoryAdd: (type: string) => `${development}/history/${type}`,
   developmentProjectSearch: () => `${development}/main/search`,
   developmentHistoryListOrg: (type: string, year: number) =>
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 187812b5b..0ae8749a7 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -43,9 +43,9 @@ const node = ref<any>([]);
 const filter = ref<string>("");
 const expanded = ref<any>([]);
 
-async function fetchData(id: string) {
+function fetchData(id: string) {
   showLoader();
-  await http
+  http
     .get(config.API.developmentMainTab("tab1", id))
     .then(async (res) => {
       const data = res.data.result;
@@ -60,8 +60,8 @@ async function fetchData(id: string) {
         if (nodeTree) {
           expanded.value = [];
           const parts = nodeTree?.orgName.split("/");
-          for (let i = 0; i < parts.length; i++) {
-            const arrangedParts = parts[i - 1];
+          for (let i = 1; i < parts.length; i++) {
+            const arrangedParts = parts[i];
             expanded.value.push(arrangedParts);
           }
           updateSelected(nodeTree);
@@ -137,17 +137,19 @@ function updateSelected(data: any) {
   formData.orgRevisionId = data.orgRevisionId;
 }
 
-function searchAndReplace(orgTreeData: any, treeId: string | null) {
-  for (let orgTree of orgTreeData) {
-    if (orgTree.orgTreeId === treeId) {
-      return orgTree;
-    }
-    let foundOrg: any = searchAndReplace(orgTree.children, treeId);
-    if (foundOrg) {
-      return foundOrg;
+async function searchAndReplace(orgTreeData: any, treeId: string | null) {
+  if (orgTreeData) {
+    for (let orgTree of orgTreeData) {
+      if (orgTree.orgTreeId === treeId) {
+        return orgTree;
+      }
+      let foundOrg: any = await searchAndReplace(orgTree.children, treeId);
+      if (foundOrg) {
+        return foundOrg;
+      }
     }
+    return false;
   }
-  return null;
 }
 
 onMounted(async () => {
diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index a58694bfe..fd0edabba 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -95,7 +95,7 @@ function getClass() {
 /** save */
 function onSubmit() {
   const url = id.value
-    ? config.API.developmentHistoryList("officer") + `${id.value}`
+    ? config.API.developmentHistoryListByid("officer", id.value)
     : config.API.developmentHistoryAdd("officer");
 
   const body = {
@@ -162,7 +162,7 @@ function upDateProject(data: any) {
 function getDataEdit() {
   showLoader();
   http
-    .get(config.API.developmentHistoryList("officer") + `${id.value}`)
+    .get(config.API.developmentHistoryListByid("officer", id.value))
     .then((res) => {
       const data = res.data.result;
       formMain.id = id.value;
diff --git a/src/modules/15_development/components/historyEmployee/AddPage.vue b/src/modules/15_development/components/historyEmployee/AddPage.vue
index 90a7776df..bdc937a19 100644
--- a/src/modules/15_development/components/historyEmployee/AddPage.vue
+++ b/src/modules/15_development/components/historyEmployee/AddPage.vue
@@ -94,7 +94,7 @@ function getClass() {
 /** save */
 function onSubmit() {
   const url = id.value
-    ? config.API.developmentHistoryList("employee") + `${id.value}`
+    ? config.API.developmentHistoryListByid("employee", id.value)
     : config.API.developmentHistoryAdd("employee");
 
   const body = {
@@ -115,7 +115,7 @@ function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
     http[id.value ? "put" : "post"](url, body)
-      .then((res) => {
+      .then(() => {
         router.push(`/development/employee-history`);
       })
       .catch((e) => {
@@ -150,7 +150,7 @@ function upDateProject(data: any) {
 function getDataEdit() {
   showLoader();
   http
-    .get(config.API.developmentHistoryList("employee") + `${id.value}`)
+    .get(config.API.developmentHistoryListByid("employee", id.value))
     .then((res) => {
       const data = res.data.result;
       formMain.id = id.value;
diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index a18007bd0..9e1305eac 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@@ -1,40 +1,19 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReportXLSX from "@/plugins/genreportxlsx";
+import { useRouter } from "vue-router";
+
 import type {
   DataOption,
   FormFilter,
 } from "@/modules/15_development/interface/index/Main";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
-
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
-import { useRoute, useRouter } from "vue-router";
-
-import genReportXLSX from "@/plugins/genreportxlsx";
-
-const maxPage = ref<number>(1);
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
-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,
-});
 
 /** use*/
 const router = useRouter();
@@ -42,22 +21,22 @@ const store = useDevelopmentDataStore();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+const maxPage = ref<number>(1);
+const formFilter = reactive({
+  root: "",
+  page: 1,
+  pageSize: 20,
+  keyword: "",
+  year: new Date().getFullYear(),
+});
+
 const rows = ref<any>([]);
 const agency = ref<string>("");
-const agencyOp = ref<DataOption[]>([
-  {
-    id: "id1",
-    name: "name1",
-  },
-  {
-    id: "id2",
-    name: "name2",
-  },
-  {
-    id: "id3",
-    name: "name3",
-  },
-]);
+const agencyOp = ref<[]>([]);
 
 const visibleColumns = ref<string[]>([
   "citizenId",
@@ -127,17 +106,29 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-// function onAdd() {
-//   store.statusEdit = false;
-//   router.push(`/development/employee-history/add`);
-// }
+function fetchListOrg() {
+  showLoader();
+  http
+    .get(config.API.developmentHistoryListOrg("employee", formFilter.year))
+    .then((res) => {
+      formFilter.root = "";
+      rows.value = [];
+      agencyOp.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 function onDownload() {
   showLoader();
   http
     .post(config.API.developmentReportHistoryOfficer(), {
       year: formFilter.year,
-      root: agency.value,
+      root: formFilter.root,
     })
     .then((res) => {
       const dataList = res.data.result;
@@ -162,12 +153,12 @@ function getData() {
     pageSize: formFilter.pageSize,
     keyword: formFilter.keyword,
     year: formFilter.year,
-    root: agency.value,
+    root: formFilter.root,
   };
 
   showLoader();
   http
-    .get(config.API.developmentHistoryList("employee"), { params: queryParams })
+    .post(config.API.developmentHistoryList("employee"), formFilter)
     .then((res) => {
       console.log(res.data.result.data);
       const data = res.data.result.data;
@@ -195,10 +186,10 @@ function getData() {
 
 function yearAll() {
   formFilter.year = 0;
-  getData();
+  // getData();
 }
 onMounted(() => {
-  getData();
+  fetchListOrg();
 });
 </script>
 
@@ -217,7 +208,7 @@ onMounted(() => {
             autoApply
             year-picker
             :enableTimePicker="false"
-            @update:model-value="getData()"
+            @update:model-value="fetchListOrg()"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -229,14 +220,16 @@ onMounted(() => {
                 lazy-rules
                 outlined
                 :model-value="
-                  formFilter.year === 0 ? null : Number(formFilter.year) + 543
+                  formFilter.year === 0
+                    ? 'ทั้งหมด'
+                    : Number(formFilter.year) + 543
                 "
                 :label="`${'ปีงบประมาณ'}`"
               >
                 <template v-if="formFilter.year" v-slot:append>
                   <q-icon
                     name="cancel"
-                    @click.stop.prevent="yearAll"
+                    @click.stop.prevent="(formFilter.year = 0), fetchListOrg()"
                     class="cursor-pointer"
                   />
                 </template>
@@ -258,10 +251,11 @@ onMounted(() => {
             dense
             outlined
             label="หน่วยงาน"
-            v-model="agency"
+            v-model="formFilter.root"
             :options="agencyOp"
             option-value="id"
             option-label="name"
+            @update:model-value="(formFilter.page = 1), getData()"
           />
         </div>