diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index 15a2d7f03..c0e3329e7 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -7,9 +7,12 @@ const devStrategy = `${env.API_URI}/development/strategy`;
 export default {
   development,
   /** history */
-  developmentHistoryList: (type: string) => `${development}/history/${type}/`,
+  developmentHistoryList: (type: string) =>
+    `${development}/history/${type}/filter`,
   developmentHistoryAdd: (type: string) => `${development}/history/${type}`,
   developmentProjectSearch: () => `${development}/main/search`,
+  developmentHistoryListOrg: (type: string, year: number) =>
+    `${development}/history/${type}/org/${year}`,
 
   /** history employee */
   developmentProjectSearchEmployee: () => `${developmentOrg}/profile-employee/`,
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index 28f4bf4ba..46d9b8064 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -1,40 +1,28 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-import type {
-  DataOption,
-  FormFilter,
-} from "@/modules/15_development/interface/index/Main";
+import genReportXLSX from "@/plugins/genreportxlsx";
 
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
 
-import genReportXLSX from "@/plugins/genreportxlsx";
-
-const maxPage = ref<number>(1);
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
 
-const formFilter = reactive<FormFilter>({
+const formFilter = reactive({
+  root: "",
   page: 1,
   pageSize: 20,
   keyword: "",
   year: new Date().getFullYear(),
-  type: "",
-  posType: "",
-  posLevel: "",
-  retireYear: "",
-  rangeYear: { min: 0, max: 60 },
-  isShowRetire: null,
-  isProbation: null,
 });
+const maxPage = ref<number>(1);
 
 /** use*/
 const router = useRouter();
@@ -43,21 +31,6 @@ const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 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 visibleColumns = ref<string[]>([
   "citizenId",
@@ -136,50 +109,27 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-// function onAdd() {
-//   store.statusEdit = false;
-//   router.push(`/development/history/add`);
-// }
-
-function onDownload() {
+const agencyOp = ref<[]>([]);
+function fetchListOrg() {
   showLoader();
   http
-    .post(config.API.developmentReportHistory(), {
-      year: formFilter.year,
-      root: agency.value,
-    })
+    .get(config.API.developmentHistoryListOrg("officer", formFilter.year))
     .then((res) => {
-      const dataList = res.data.result;
-      genReportXLSX(
-        dataList,
-        "รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ"
-      );
+      formFilter.root = "";
+      agencyOp.value = res.data.result;
     })
-    .catch((e) => {
-      messageError($q, e);
+    .catch((err) => {
+      messageError($q, err);
     })
     .finally(() => {
       hideLoader();
     });
 }
 
-function onEdit(id: string) {
-  store.statusEdit = true;
-  router.push(`/development/history/${id}`);
-}
-
 function getData() {
-  let queryParams: any = {
-    page: formFilter.page,
-    pageSize: formFilter.pageSize,
-    keyword: formFilter.keyword,
-    year: formFilter.year,
-    root: agency.value,
-  };
-
   showLoader();
   http
-    .get(config.API.developmentHistoryList("officer"), { params: queryParams })
+    .post(config.API.developmentHistoryList("officer"), formFilter)
     .then((res) => {
       console.log(res.data.result.data);
       const data = res.data.result.data;
@@ -202,12 +152,35 @@ function getData() {
     });
 }
 
-function yearAll() {
-  formFilter.year = 0;
-  getData();
+function onDownload() {
+  showLoader();
+  http
+    .post(config.API.developmentReportHistory(), {
+      year: formFilter.year,
+      root: formFilter.root,
+    })
+    .then((res) => {
+      const dataList = res.data.result;
+      genReportXLSX(
+        dataList,
+        "รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
+
+function onEdit(id: string) {
+  store.statusEdit = true;
+  router.push(`/development/history/${id}`);
+}
+
 onMounted(() => {
-  getData();
+  fetchListOrg();
 });
 </script>
 
@@ -226,7 +199,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 }">{{
@@ -238,14 +211,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>
@@ -267,10 +242,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>