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/14_KPI/components/competency/04ListCriteria.vue b/src/modules/14_KPI/components/competency/04ListCriteria.vue
index 16db804c5..b77c54a45 100644
--- a/src/modules/14_KPI/components/competency/04ListCriteria.vue
+++ b/src/modules/14_KPI/components/competency/04ListCriteria.vue
@@ -1,5 +1,135 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+
+const fieldLabels = {
+  score5: "5",
+  score4: "4",
+  score3: "3",
+  score2: "2",
+  score1: "1",
+};
+
+const formScore = reactive<any>({
+  score5: "",
+  score4: "",
+  score3: "",
+  score2: "",
+  score1: "",
+});
+
+interface FormScore {
+  score5: string;
+  score4: string;
+  score3: string;
+  score2: string;
+  score1: string;
+  [key:string]:any
+}
+
+function onSubmit() {
+const array = ref<any>([])
+
+  for (const key in formScore) {
+    if (formScore.hasOwnProperty(key)) {
+      if (key in formScore) {
+        const scoreObj: Partial<FormScore> = {}; // กำหนด scoreObj ให้เป็น Partial<FormScore>
+        scoreObj[key] = formScore[key];
+        array.value.push(scoreObj)
+      }
+    }
+  }
+  const body = {
+    formScore: array.value ,
+  };
+  console.log(body);
+}
+</script>
 
 <template>
-  <div>หลักเกณฑ์</div>
+  <q-card flat bordered>
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <q-card-section class="bg-grey-3 q-pa-sm">
+        <div class="row text-dark text-body2 text-weight-medium">
+          <div class="text-center col-8">เกณฑ์การประเมิน</div>
+          <div class="text-center col-4">ระดับคะแนน</div>
+        </div>
+      </q-card-section>
+      <q-card-section class="q-pa-none">
+        <div
+          v-for="(field, index) in Object.keys(fieldLabels)"
+          :key="index + 1"
+        >
+          <div class="row q-pa-sm">
+            <div class="col-8 text-left">
+              <q-field
+                class="q_field_p_none"
+                ref="fieldRef"
+                v-model="formScore[field]"
+                label-slot
+                borderless
+                :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                hide-bottom-space
+              >
+                <template #control>
+                  <q-editor
+                    class="full-width"
+                    v-model="formScore[field]"
+                    :dense="$q.screen.lt.md"
+                    min-height="5rem"
+                    :toolbar="[
+                      [
+                        'bold',
+                        'italic',
+                        'strike',
+                        'underline',
+                        'subscript',
+                        'superscript',
+                      ],
+
+                      ['unordered', 'ordered'],
+                    ]"
+                    :fonts="{
+                      arial: 'Arial',
+                      arial_black: 'Arial Black',
+                      comic_sans: 'Comic Sans MS',
+                      courier_new: 'Courier New',
+                      impact: 'Impact',
+                      lucida_grande: 'Lucida Grande',
+                      times_new_roman: 'Times New Roman',
+                      verdana: 'Verdana',
+                    }"
+                  />
+                </template>
+              </q-field>
+              <!-- <q-input
+              v-model="formScore[field]"
+              dense
+              outlined
+              class="inputgreen"
+              label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
+              :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
+              hide-bottom-space
+            /> -->
+            </div>
+            <div
+              class="col-4 text-center text-body1 text-weight-bold self-center"
+            >
+              {{ fieldLabels[field as keyof typeof fieldLabels] }}
+            </div>
+          </div>
+          <div
+            class="col-12"
+            v-if="index !== Object.keys(fieldLabels).length - 1"
+          >
+            <q-separator />
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="บันทึก" color="secondary" type="submit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-form>
+  </q-card>
 </template>
diff --git a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
index 241e429da..83245ab23 100644
--- a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted,watch } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
@@ -15,7 +15,16 @@ const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 
-const id = ref<string>(route.params.id ? route.params.id.toLocaleString():'');
+const filter = ref<string>("");
+const node = ref<any>([]);
+const expanded = ref<any>([]);
+const ticked = ref<any>([]);
+const orgName = ref<string>("");
+const nodeId = ref<string>("");
+
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
 const {
   dialogConfirm,
   showLoader,
@@ -40,6 +49,10 @@ const form = reactive<FormDataRole>({
   weight: "", //น้ำหนัก
   meaning: "", //นิยามหรือความหมาย
   formula: "", //สูตรคำนวณ
+
+  node: null,
+  nodeId: null,
+  orgRevisionId: null,
 });
 
 const fieldLabels = {
@@ -120,7 +133,7 @@ function onSubmit() {
   // const url = id.value ? config.API.???:config.API.???
 }
 
-function getDetail(){
+function getDetail() {
   // showLoader()
   // http
   // .get(config.API.???)
@@ -144,12 +157,58 @@ function getDetail(){
   // })
 }
 
+function fetchActive() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      fetchTree(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+async function fetchTree(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      node.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updateTicked(val: any) {
+  console.log(expanded.value);
+
+  ticked.value = [];
+  ticked.value.push(val[val.length - 1]);
+}
+
+function updateSelected(data: any) {
+  console.log(data)
+  nodeId.value = data.orgTreeId;
+  orgName.value = data.orgTreeName;
+  form.node = data.orgLevel;
+  form.nodeId = data.orgTreeId;
+  form.orgRevisionId = data.orgRevisionId;
+}
 
 onMounted(() => {
+  fetchActive();
   getOptions();
-  if(id.value !== ''){
-    console.log('edit')
-    getDetail()
+  if (id.value !== "") {
+    console.log("edit");
+    getDetail();
   }
 });
 </script>
@@ -252,20 +311,6 @@ onMounted(() => {
               hide-bottom-space
             />
           </div>
-          <div class="col-4">
-            <q-input
-              dense
-              outlined
-              class="inputgreen"
-              v-model="form.org"
-              inputgreen
-              label="หน่วยงาน/ส่วนราชการ"
-              lazy-rules
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกหน่วยงาน/ส่วนราชการ'}`,]"
-              hide-bottom-space
-              @click="selectAgency"
-            />
-          </div>
           <div class="col-2">
             <q-input
               label="รหัสตัวชี้วัด"
@@ -278,7 +323,7 @@ onMounted(() => {
               hide-bottom-space
             />
           </div>
-          <div class="col-6">
+          <div class="col-4">
             <q-input
               label="ชื่อตัวชี้วัด"
               v-model="form.includingName"
@@ -326,9 +371,77 @@ onMounted(() => {
               hide-bottom-space
             />
           </div>
-          <div class="col-12">
+          <div class="col-8" style="height: 340px">
             <q-card flat bordered>
-              <q-card-section class="bg-grey-4 q-pa-sm">
+              <q-card-section class="bg-grey-3 q-pa-sm">
+                <div class="text-dark text-body2 text-weight-medium">
+                  หน่วยงาน/ส่วนราชการ
+                </div>
+              </q-card-section>
+              <q-card-section class="q-pa-sm">
+                <q-input
+                  dense
+                  outlined
+                  v-model="filter"
+                  label="ค้นหา"
+                  class="inputgreen"
+                >
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="filter !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="filter = ''"
+                    />
+                    <q-icon v-else name="search" color="grey-5" />
+                  </template>
+                </q-input>
+                <q-scroll-area visible style="height: 223px; margin-top: 5px">
+                  <q-tree
+                    dense
+                    :nodes="node"
+                    node-key="orgTreeName"
+                    label-key="orgTreeName"
+                    v-model:expanded="expanded"
+                    :filter="filter"
+                    no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                    no-nodes-label="ไม่มีข้อมูล"
+                  >
+                    <template v-slot:default-header="prop">
+                      <q-item
+                        clickable
+                        @click.stop="updateSelected(prop.node)"
+                        :active="form.nodeId === prop.node.orgTreeId"
+                        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-scroll-area>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="col-4" style="height: 340px">
+            <q-card flat bordered>
+              <q-card-section class="bg-grey-3 q-pa-sm">
                 <div class="row text-dark text-body2 text-weight-medium">
                   <div class="text-center col-4">ระดับคะแนน</div>
                   <div class="col-8">อ้างอิง</div>
@@ -435,7 +548,7 @@ onMounted(() => {
           </div>
         </div>
       </q-card-section>
-      <q-separator/>
+      <q-separator />
       <q-card-actions align="right">
         <q-btn color="public" label="บันทึก" type="submit" unelevated>
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
@@ -450,4 +563,12 @@ onMounted(() => {
   />
 </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/14_KPI/interface/request/Main.ts b/src/modules/14_KPI/interface/request/Main.ts
index 5ff08cce9..4fd86ae77 100644
--- a/src/modules/14_KPI/interface/request/Main.ts
+++ b/src/modules/14_KPI/interface/request/Main.ts
@@ -35,6 +35,9 @@ interface FormDataRole {
   weight: string;
   meaning: string;
   formula: string;
+  node: number | null;
+  nodeId: string | null;
+  orgRevisionId: string | null;
 }
 
 export type { FormQueryRound, FormRound, FormCompetency, FormDataRole };
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index e2f80d0ac..187812b5b 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -40,7 +40,6 @@ const formData = reactive<FormBasicinfo>({
 
 const orgName = ref<string>("");
 const node = ref<any>([]);
-const nodeId = ref<string>("");
 const filter = ref<string>("");
 const expanded = ref<any>([]);
 
@@ -56,15 +55,18 @@ async function fetchData(id: string) {
       formData.objective = data.objective;
       formData.nodeId = data.nodeId;
 
-      const test = await searchAndReplace(node.value, formData?.nodeId);
-      console.log(test);
-
-      const parts = test.orgName.split("/");
-      for (let i = 0; i < parts.length; i++) {
-        const arrangedParts = parts[i];
-        expanded.value.push(arrangedParts);
+      if (node.value && formData?.nodeId) {
+        const nodeTree = await searchAndReplace(node.value, formData?.nodeId);
+        if (nodeTree) {
+          expanded.value = [];
+          const parts = nodeTree?.orgName.split("/");
+          for (let i = 0; i < parts.length; i++) {
+            const arrangedParts = parts[i - 1];
+            expanded.value.push(arrangedParts);
+          }
+          updateSelected(nodeTree);
+        }
       }
-      updateSelected(test);
     })
     .catch((err) => {
       messageError($q, err);
@@ -129,9 +131,6 @@ async function fetchTree(id: string) {
 }
 
 function updateSelected(data: any) {
-  console.log(expanded.value);
-
-  nodeId.value = data.orgTreeId;
   orgName.value = data.orgTreeName;
   formData.node = data.orgLevel;
   formData.nodeId = data.orgTreeId;
@@ -163,60 +162,54 @@ onMounted(async () => {
   <q-form greedy @submit.prevent @validation-success="onSubmit">
     <q-card bordered class="col-12 row caedNone">
       <div class="col-xs-12 col-sm-3 row">
-        <div class="col-12 row no-wrap bg-grey-1">
-          <div class="col-12 q-py-sm q-px-sm">
-            <q-card-section
-              class="q-pt-none q-pa-sm scroll"
-              style="max-height: 65vh"
+        <div class="col-12 row no-wrap">
+          <div class="col-12 q-py-sm q-px-sm q-gutter-sm">
+            <q-input dense outlined v-model="filter" label="ค้นหา">
+              <template v-slot:append>
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="filter = ''"
+                />
+                <q-icon v-else name="search" color="grey-5" />
+              </template>
+            </q-input>
+            <q-tree
+              class="tree-container"
+              dense
+              :nodes="node"
+              node-key="orgTreeName"
+              label-key="labelName"
+              v-model:expanded="expanded"
+              :filter="filter"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
             >
-              <q-input dense outlined v-model="filter" label="ค้นหา">
-                <template v-slot:append>
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                  <q-icon v-else name="search" color="grey-5" />
-                </template>
-              </q-input>
-              <q-tree
-                dense
-                :nodes="node"
-                node-key="orgTreeName"
-                label-key="orgTreeName"
-                v-model:expanded="expanded"
-                :filter="filter"
-                no-results-label="ไม่พบข้อมูลที่ค้นหา"
-                no-nodes-label="ไม่มีข้อมูล"
-              >
-                <template v-slot:default-header="prop">
-                  <q-item
-                    clickable
-                    @click.stop="updateSelected(prop.node)"
-                    :active="formData.nodeId === prop.node.orgTreeId"
-                    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>
+              <template v-slot:default-header="prop">
+                <q-item
+                  clickable
+                  @click.stop="updateSelected(prop.node)"
+                  :active="formData.nodeId === prop.node.orgTreeId"
+                  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>
-                  </q-item>
-                </template>
-              </q-tree>
-            </q-card-section>
+                    <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>
           </div>
 
           <div class="col-12 row">
@@ -344,6 +337,13 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+.tree-container {
+  overflow: auto;
+  height: 70vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
 .my-list-link {
   color: rgb(118, 168, 222);
   border-radius: 5px;
diff --git a/src/modules/15_development/components/Record.vue b/src/modules/15_development/components/Record.vue
index 32392f40e..fb79176b1 100644
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@@ -111,11 +111,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "startDate",
+    name: "dateStart",
     align: "left",
     label: "วันที่เริ่มต้น",
     sortable: true,
-    field: "startDate",
+    field: "dateStart",
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -123,11 +123,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "endDate",
+    name: "dateEnd",
     align: "left",
     label: "วันที่สิ้นสุด",
     sortable: true,
-    field: "endDate",
+    field: "dateEnd",
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
diff --git a/src/modules/15_development/components/history/DialogGov.vue b/src/modules/15_development/components/history/DialogGov.vue
index ed8cf6017..b84522fea 100644
--- a/src/modules/15_development/components/history/DialogGov.vue
+++ b/src/modules/15_development/components/history/DialogGov.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { ref, watch, computed,reactive } from "vue";
+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 type {
+  DataOption,
+  FormFilter,
+  NewPagination,
+} from "@/modules/15_development/interface/index/Main";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
@@ -9,8 +13,7 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-
-const rows = ref<any[]>([])
+const rows = ref<any[]>([]);
 const props = defineProps({
   upDate: { type: Function },
 });
@@ -138,27 +141,30 @@ 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();
-
+    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,
+      org: data.org,
+      rootId: data.rootId,
+      root: data.root,
+      orgRootShortName: data.orgRootShortName,
+      orgRevisionId: data.orgRevisionId,
+    };
+    props.upDate?.(body);
+    closeDialog();
   }
 }
 
@@ -167,7 +173,7 @@ function closeDialog() {
   modal.value = false;
   rows.value = [];
   selected.value = [];
-  inputSearch.value = ''
+  inputSearch.value = "";
 }
 
 /** class */
@@ -186,20 +192,27 @@ function searchFilter() {
       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,
-        name: item.firstName ? `${item.prefix}${item.firstName} ${item.lastName}` : null,
-        prefix:item.prefix ? item.prefix : null,
-        rank:item.rank ? item.rank : 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,
-        posLevelId:item.posLevelId ? item.posLevelId : null,
-        posTypeId:item.posTypeId ? item.posTypeId : null,
-        position:item.position ? item.position : null,
-        positionSide:item.posExecutive ? item.posExecutive : null,
-        posNo:item.posNo ? item.posNo : null,
+        id: item.id ? item.id : null,
+        name: item.firstName
+          ? `${item.prefix}${item.firstName} ${item.lastName}`
+          : null,
+        prefix: item.prefix ? item.prefix : null,
+        rank: item.rank ? item.rank : 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,
+        posLevelId: item.posLevelId ? item.posLevelId : null,
+        posTypeId: item.posTypeId ? item.posTypeId : null,
+        position: item.position ? item.position : null,
+        positionSide: item.posExecutive ? item.posExecutive : null,
+        posNo: item.posNo ? item.posNo : null,
+        org: item.org ? item.org : null,
+        rootId: item.rootId ? item.rootId : null,
+        root: item.root ? item.root : null,
+        orgRootShortName: item.orgRootShortName ? item.orgRootShortName : null,
+        orgRevisionId: item.orgRevisionId ? item.orgRevisionId : null,
       }));
     })
     .catch((e) => {
@@ -210,7 +223,7 @@ function searchFilter() {
     });
 }
 
-function updatePage(val:number){
+function updatePage(val: number) {
   formFilter.page = val;
   searchFilter();
 }
diff --git a/src/modules/15_development/components/scholarship/DetailView.vue b/src/modules/15_development/components/scholarship/DetailView.vue
index 48ba20ec9..0578c03fb 100644
--- a/src/modules/15_development/components/scholarship/DetailView.vue
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@@ -106,6 +106,11 @@ const formBody = reactive<FormsSholarship>({
   posExecutive: "", //ชื่อตำแหน่งทางการบริหาร
   posLevelId: null, //ไอดีระดับตำแหน่ง
   posTypeId: null, //ไอดีประเภทตำแหน่ง
+  org: "",
+  rootId: null,
+  root: "",
+  orgRootShortName: "",
+  orgRevisionId: null,
   guarantorRank: "", //ยศ(ผู้ค้ำ)
   guarantorPrefix: "", //คำนำหน้าชื่อ(ผู้ค้ำ)
   guarantorFirstName: "", //ชื่อ(ผู้ค้ำ)
@@ -218,11 +223,12 @@ function fetchDataDetail(id: string) {
       dataPerson.type = data.posTypeName ? data.posTypeName : "-";
       dataPerson.level = data.posLevelName ? data.posLevelName : "-";
       dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
+      dataPerson.org = data.org ? data.org : "-";
 
       dataGuarantor.citizenId = data.guarantorCitizenId
         ? data.guarantorCitizenId
         : "-";
-      dataGuarantor.name = `${data.guarantorPrefix} ${data.guarantorFirstName} ${data.guarantorLastName}`;
+      dataGuarantor.name = `${data.guarantorPrefix}${data.guarantorFirstName} ${data.guarantorLastName}`;
       dataGuarantor.position = data.position ? data.position : "-";
       dataGuarantor.type = data.posTypeguarantorName
         ? data.posTypeguarantorName
@@ -252,6 +258,17 @@ function onSubmit() {
       typeof formBody.budgetApprove === "string"
         ? Number(formBody.budgetApprove.replace(/,/g, ""))
         : formBody.budgetApprove;
+
+    if (formBody.scholarshipType === "RESEARCH") {
+      formBody.planType = "";
+      formBody.fundType = "";
+      formBody.budgetSource = "";
+      formBody.useOfficialTime = false;
+      formBody.reportBackNo = "";
+      formBody.reportBackNoDate = null;
+      formBody.reportBackDate = null;
+      formBody.changeDetail = "";
+    }
     try {
       const url = scholarshipId.value
         ? config.API.devScholarshipByid(scholarshipId.value)
@@ -363,7 +380,6 @@ function onSelectGov(isGov: boolean) {
 
 function upDate(data: DataPerson) {
   if (isSelectGov.value) {
-    console.log(data);
     formBody.profileId = data.id;
     formBody.rank = data.rank;
     formBody.prefix = data.prefix;
@@ -374,6 +390,11 @@ function upDate(data: DataPerson) {
     formBody.posTypeId = data.posTypeId;
     formBody.posLevelId = data.posLevelId;
     formBody.posExecutive = data.positionSide;
+    formBody.org = data.org;
+    formBody.rootId = data.rootId;
+    formBody.root = data.root;
+    formBody.orgRootShortName = data.orgRootShortName;
+    formBody.orgRevisionId = data.orgRevisionId;
 
     dataPerson.id = data.id ? data.id : "-";
     dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
@@ -382,6 +403,7 @@ function upDate(data: DataPerson) {
     dataPerson.type = data.type ? data.type : "-";
     dataPerson.level = data.level ? data.level : "-";
     dataPerson.positionSide = data.positionSide ? data.positionSide : "-";
+    dataPerson.org = data.org ? data.org : "-";
     isGov.value = true;
   } else {
     formBody.guarantorRank = data.rank;
@@ -484,18 +506,18 @@ onMounted(() => {
         <q-btn
           unelevated
           color="green"
-          label="สำเร็จการศึกษา"
+          label="เรียนจบ"
           @click="onClickUpdateStatus('GRADUATE')"
         />
         <q-btn
           unelevated
           color="red"
-          label="ไม่จบการศึกษา"
+          label="เรียนไม่จบ"
           @click="onClickUpdateStatus('NOTGRADUATE')"
         />
       </div>
       <div :class="isStatus === 'GRADUATE' ? 'text-green' : 'text-red'" v-else>
-        {{ isStatus === "GRADUATE" ? "สำเร็จการศึกษา" : "ไม่จบการศึกษา" }}
+        {{ isStatus === "GRADUATE" ? "เรียนจบ" : "เรียนไม่จบ" }}
       </div>
     </div>
   </div>
@@ -533,7 +555,7 @@ onMounted(() => {
                 <div class="col-8 text-weight-medium">
                   {{ dataPerson.position }}
                 </div>
-                <div class="col-4 text-grey">ประเภท</div>
+                <div class="col-4 text-grey">ประเภทตำแหน่ง</div>
                 <div class="col-8 text-weight-medium">
                   {{ dataPerson.type }}
                 </div>
@@ -587,7 +609,8 @@ onMounted(() => {
           class="col-3"
           v-if="
             formBody.scholarshipType !== '' &&
-            formBody.scholarshipType !== 'EXECUTIVE'
+            formBody.scholarshipType !== 'EXECUTIVE' &&
+            formBody.scholarshipType !== 'RESEARCH'
           "
         >
           <q-select
@@ -610,7 +633,7 @@ onMounted(() => {
           />
         </div>
 
-        <div class="col-12">
+        <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
           <q-radio
             v-model="formBody.planType"
             checked-icon="task_alt"
@@ -629,193 +652,208 @@ onMounted(() => {
             class="q-pl-sm"
           />
         </div>
-        <div class="col-3">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="formBody.scholarshipYear"
-            :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
-                outlined
-                class="inputgreen"
-                :model-value="
-                  formBody.scholarshipYear
-                    ? Number(formBody.scholarshipYear) + 543
-                    : null
-                "
-                :label="`${'ปีงบประมาณที่ได้รับทุน'}`"
-                hide-bottom-space
-                :rules="[
+
+        <div class="row col-12 q-col-gutter-md">
+          <div class="col-3">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formBody.scholarshipYear"
+              :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
+                  outlined
+                  class="inputgreen"
+                  :model-value="
+                    formBody.scholarshipYear
+                      ? Number(formBody.scholarshipYear) + 543
+                      : null
+                  "
+                  :label="`${
+                    formBody.scholarshipType === 'RESEARCH'
+                      ? 'ปีงบประมาณที่ได้รับอนุมัติ '
+                      : 'ปีงบประมาณที่ได้รับทุน'
+                  }`"
+                  hide-bottom-space
+                  :rules="[
                   (val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
                 ]"
-              >
-                <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 class="col-3">
-          <q-select
-            dense
-            outlined
-            class="inputgreen"
-            label="แหล่งงบประมาณ"
-            hide-bottom-space
-            v-model="formBody.budgetSource"
-            :options="budgetSourceOp"
-            option-label="name"
-            option-value="id"
-            emit-value
-            map-options
-            :rules="[
+                >
+                  <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-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+            <q-select
+              dense
+              outlined
+              class="inputgreen"
+              label="แหล่งงบประมาณ"
+              hide-bottom-space
+              v-model="formBody.budgetSource"
+              :options="budgetSourceOp"
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              :rules="[
               (val: string) =>
                 !!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
             ]"
-          />
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              dense
+              outlined
+              hide-bottom-space
+              class="inputgreen"
+              v-model="formBody.budgetApprove"
+              label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
+              mask="###,###,###,###,###,###"
+              reverse-fill-mask
+              :rules="[
+                (val: any) => {
+                  if (!val && !formBody.isNoUseBudget) {
+                    return 'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร';
+                  }
+                  return true;
+                },
+              ]"
+            />
+          </div>
+          <div class="col-3">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="formBody.isNoUseBudget"
+              label="ไม่ใช้งบประมาณ"
+            />
+          </div>
         </div>
-        <div class="col-3">
-          <q-input
-            dense
-            outlined
-            hide-bottom-space
-            class="inputgreen"
-            v-model="formBody.budgetApprove"
-            label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
-            mask="###,###,###,###,###,###"
-            reverse-fill-mask
-            :rules="[
-              (val: string) =>
-                !!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
-            ]"
-          />
-        </div>
-        <div class="col-3">
-          <q-checkbox
-            keep-color
-            color="primary"
-            v-model="formBody.isNoUseBudget"
-            label="ไม่ใช้งบประมาณ"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            dense
-            outlined
-            class="inputgreen"
-            v-model="formBody.bookNo"
-            label="เลขที่หนังสืออนุมัติ"
-            hide-bottom-space
-            :rules="[
+
+        <div class="row col-12 q-col-gutter-md">
+          <div class="col-3">
+            <q-input
+              dense
+              outlined
+              class="inputgreen"
+              v-model="formBody.bookNo"
+              label="เลขที่หนังสืออนุมัติ"
+              hide-bottom-space
+              :rules="[
               (val: string) =>
                 !!val || `${'กรุณากรอกเลขที่หนังสืออนุมัติ'}`,
             ]"
-          />
-        </div>
-        <div class="col-3">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="formBody.bookNoDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                dense
-                outlined
-                class="inputgreen"
-                :model-value="
-                  formBody.bookNoDate ? date2Thai(formBody.bookNoDate) : null
-                "
-                :label="`${'ลงวันที่'}`"
-                hide-bottom-space
-                :rules="[
+            />
+          </div>
+          <div class="col-3">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formBody.bookNoDate"
+              :locale="'th'"
+              autoApply
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  outlined
+                  class="inputgreen"
+                  :model-value="
+                    formBody.bookNoDate ? date2Thai(formBody.bookNoDate) : null
+                  "
+                  :label="`${'ลงวันที่'}`"
+                  hide-bottom-space
+                  :rules="[
                   (val: string) =>
                     !!val || `${'กรุณาเลือกวันที่'}`,
                 ]"
-              >
-                <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 class="col-3">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="formBody.bookApproveDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                dense
-                outlined
-                class="inputgreen"
-                :model-value="
-                  formBody.bookApproveDate
-                    ? date2Thai(formBody.bookApproveDate)
-                    : null
-                "
-                :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
-                hide-bottom-space
-                :rules="[
+                >
+                  <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 class="col-3">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formBody.bookApproveDate"
+              :locale="'th'"
+              autoApply
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  outlined
+                  class="inputgreen"
+                  :model-value="
+                    formBody.bookApproveDate
+                      ? date2Thai(formBody.bookApproveDate)
+                      : null
+                  "
+                  :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
+                  hide-bottom-space
+                  :rules="[
                   (val: string) =>
                     !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
                 ]"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
+                >
+                  <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-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+            <q-checkbox
+              keep-color
+              color="primary"
+              v-model="formBody.useOfficialTime"
+              label="ใช้เวลาราชการ"
+            />
+          </div>
         </div>
-        <div class="col-3">
-          <q-checkbox
-            keep-color
-            color="primary"
-            v-model="formBody.useOfficialTime"
-            label="ใช้เวลาราชการ"
-          />
-        </div>
-        <div class="col-12">
+
+        <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
           <q-input
             outlined
             dense
@@ -832,13 +870,7 @@ onMounted(() => {
           />
         </div>
 
-        <div
-          class="col-12"
-          v-if="
-            formBody.scholarshipType !== '' &&
-            formBody.scholarshipType !== 'EXECUTIVE'
-          "
-        >
+        <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
           <div class="row col-12 q-col-gutter-md">
             <div class="col-3">
               <q-input
@@ -895,7 +927,7 @@ onMounted(() => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-3">
+            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
               <q-input
                 dense
                 outlined
@@ -909,7 +941,7 @@ onMounted(() => {
                 ]"
               />
             </div>
-            <div class="col-2">
+            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formBody.reportBackNoDate"
@@ -950,7 +982,7 @@ onMounted(() => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-2">
+            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formBody.reportBackDate"
@@ -1888,12 +1920,12 @@ onMounted(() => {
                     outlined
                     lazy-rules
                     hide-bottom-space
-                    label="สถานที่ไปศึกษาดูงาน"
+                    label="สถานที่ไปศึกษาดูงานในประเทศ"
                     class="inputgreen"
                     v-model="formBody.studyPlace"
                     :rules="[
                       (val: string) =>
-                        !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+                        !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงานในประเทศ'}`,
                     ]"
                   />
                 </div>
@@ -1903,12 +1935,12 @@ onMounted(() => {
                     outlined
                     lazy-rules
                     hide-bottom-space
-                    label="หัวข้อการไปศึกษาดูงาน"
+                    label="หัวข้อการไปศึกษาดูงานในประเทศ"
                     class="inputgreen"
                     v-model="formBody.studyTopic"
                     :rules="[
                       (val: string) =>
-                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+                        !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานในประเทศ'}`,
                     ]"
                   />
                 </div>
@@ -1936,11 +1968,11 @@ onMounted(() => {
                             ? date2Thai(formBody.studyStartDate)
                             : null
                         "
-                        :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                        :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
                         hide-bottom-space
                         :rules="[
                           (val: string) =>
-                            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
+                            !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานในประเทศ'}`,
                         ]"
                       >
                         <template v-slot:prepend>
@@ -1986,11 +2018,11 @@ onMounted(() => {
                             ? date2Thai(formBody.studyEndDate)
                             : null
                         "
-                        :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                        :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
                         hide-bottom-space
                         :rules="[
                           (val: string) =>
-                            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
+                            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงานในประเทศ'}`,
                         ]"
                       >
                         <template v-slot:prepend>
@@ -2012,12 +2044,12 @@ onMounted(() => {
                     outlined
                     lazy-rules
                     hide-bottom-space
-                    label="ประเทศที่ไปศึกษาดูงาน"
+                    label="ประเทศที่เดินทางไปศึกษาดูงาน"
                     class="inputgreen"
                     v-model="formBody.studyCountry"
                     :rules="[
                       (val: string) =>
-                        !!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
+                        !!val || `${'กรุณากรอกประเทศที่เดินทางไปศึกษาดูงาน'}`,
                     ]"
                   />
                 </div>
@@ -2147,6 +2179,217 @@ onMounted(() => {
                 </div>
               </div>
             </div>
+
+            <!-- เลือกทุน 5 -->
+            <div
+              class="col-12"
+              v-else-if="formBody.scholarshipType === 'RESEARCH'"
+            >
+              <div class="row q-col-gutter-md">
+                <div class="col-3">
+                  <q-select
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    class="inputgreen"
+                    label="ประเภทการพัฒนา"
+                    v-model="formBody.studyTopic"
+                    :options="[
+                      'ศึกษา',
+                      'ฝึกอบรม',
+                      'ประชุม',
+                      'ดูงาน',
+                      'ปฏิบัติการวิจัย',
+                    ]"
+                    :rules="[
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกประเภทการพัฒนา'}`,
+                ]"
+                  />
+                </div>
+
+                <div class="col-3">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="ระดับปริญญา"
+                    class="inputgreen"
+                    v-model="formBody.degreeLevel"
+                    :rules="[
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกระดับปริญญา'}`,
+                    ]"
+                  />
+                </div>
+
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    class="inputgreen"
+                    label="หลักสูตรการฝึกอบรม"
+                    v-model="formBody.course"
+                    :rules="[
+                  (val: string) =>
+                    !!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
+                ]"
+                  />
+                </div>
+
+                <div class="col-3">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="สาขาวิชา"
+                    class="inputgreen"
+                    v-model="formBody.field"
+                    :rules="[
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกสาขาวิชา'}`,
+                    ]"
+                  />
+                </div>
+
+                <div class="col-3">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="คณะ"
+                    class="inputgreen"
+                    v-model="formBody.faculty"
+                    :rules="[
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกคณะ'}`,
+                    ]"
+                  />
+                </div>
+
+                <div class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="สถาบันการศึกษา/หน่วยงานผู้จัด"
+                    class="inputgreen"
+                    v-model="formBody.studyPlace"
+                    :rules="[
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัด'}`,
+                    ]"
+                  />
+                </div>
+
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.startDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    @update:model-value="changeStartDate('startDate')"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formBody.startDate
+                            ? date2Thai(formBody.startDate)
+                            : null
+                        "
+                        :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                        hide-bottom-space
+                        :rules="[
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
+                        ]"
+                      >
+                        <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 class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formBody.endDate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    :min-date="formBody.startDate"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formBody.endDate ? date2Thai(formBody.endDate) : null
+                        "
+                        :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                        hide-bottom-space
+                        :rules="[
+                          (val: string) =>
+                            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
+                        ]"
+                      >
+                        <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 class="col-6">
+                  <q-input
+                    dense
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    label="ประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย"
+                    class="inputgreen"
+                    v-model="formBody.studyCountry"
+                    :rules="[
+                      (val: string) =>
+                        !!val || `${'กรุณากรอกประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย'}`,
+                    ]"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 
@@ -2276,12 +2519,12 @@ onMounted(() => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                label="สถานที่ไปศึกษาดูงาน"
+                label="สถานที่ไปศึกษาดูงานในประเทศ"
                 class="inputgreen"
                 v-model="formBody.studyPlace"
                 :rules="[
                   (val: string) =>
-                    !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
+                    !!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงานในประเทศ'}`,
                 ]"
               />
             </div>
@@ -2291,12 +2534,12 @@ onMounted(() => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                label="หัวข้อการไปศึกษาดูงาน"
+                label="หัวข้อการไปศึกษาดูงานในประเทศ"
                 class="inputgreen"
                 v-model="formBody.studyTopic"
                 :rules="[
                   (val: string) =>
-                    !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
+                    !!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานในประเทศ'}`,
                 ]"
               />
             </div>
@@ -2324,11 +2567,11 @@ onMounted(() => {
                         ? date2Thai(formBody.studyStartDate)
                         : null
                     "
-                    :label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
+                    :label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
                     hide-bottom-space
                     :rules="[
                       (val: string) =>
-                        !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
+                        !!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานในประเทศ'}`,
                     ]"
                   >
                     <template v-slot:prepend>
@@ -2373,11 +2616,11 @@ onMounted(() => {
                         ? date2Thai(formBody.studyEndDate)
                         : null
                     "
-                    :label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
+                    :label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
                     hide-bottom-space
                     :rules="[
                       (val: string) =>
-                        !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
+                        !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงานในประเทศ'}`,
                     ]"
                   >
                     <template v-slot:prepend>
@@ -2521,12 +2764,12 @@ onMounted(() => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                label="รวมระยะเวลาในการศึกษา"
+                label="รวมระยะเวลาในการฝึกอบรม "
                 class="inputgreen"
                 v-model="formBody.totalPeriod"
                 :rules="[
                   (val: string) =>
-                    !!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
+                    !!val || `${'กรุณากรอกรวมระยะเวลาในการฝึกอบรม '}`,
                 ]"
               />
             </div>
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index 610fa1921..ddb7eade0 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -5,6 +5,8 @@ interface FormQueryListProject {
   org: string;
   keyword: string;
   status: string;
+  node: number | null;
+  nodeId: string | null;
 }
 
 interface FormBasicinfo {
@@ -230,6 +232,14 @@ interface PlannedGoals {
   amount: number | null;
 }
 
+interface FormProject {
+  year: number | null;
+  projectName: "";
+  node: number | null;
+  nodeId: string | null;
+  orgRevisionId: string | null;
+}
+
 export type {
   FormQueryListProject,
   FormAddProject,
@@ -242,4 +252,5 @@ export type {
   FormAddHistoryProject,
   FormAddHistoryEmployee,
   FormGroupTargetPlannedGoal,
+  FormProject,
 };
diff --git a/src/modules/15_development/interface/request/Scholarship.ts b/src/modules/15_development/interface/request/Scholarship.ts
index df3790cf6..9ec9baa54 100644
--- a/src/modules/15_development/interface/request/Scholarship.ts
+++ b/src/modules/15_development/interface/request/Scholarship.ts
@@ -9,6 +9,11 @@ interface FormsSholarship {
   posExecutive: string; //ชื่อตำแหน่งทางการบริหาร
   posLevelId: string | null; //ไอดีระดับตำแหน่ง
   posTypeId: string | null; //ไอดีประเภทตำแหน่ง
+  org: string;
+  rootId: string | null;
+  root: string;
+  orgRootShortName: string;
+  orgRevisionId: string | null;
   guarantorRank: string; //ยศ(ผู้ค้ำ)
   guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
   guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)
diff --git a/src/modules/15_development/interface/response/Scholarship.ts b/src/modules/15_development/interface/response/Scholarship.ts
index a10895e75..c14f378dc 100644
--- a/src/modules/15_development/interface/response/Scholarship.ts
+++ b/src/modules/15_development/interface/response/Scholarship.ts
@@ -20,6 +20,7 @@ interface DataSholarship {
   posTypeId: string; //ไอดีประเภทตำแหน่ง
   posTypeName: string; //ไอดีระดับตำแหน่ง
   posLevelName: string; //ไอดีประเภทตำแหน่ง
+  org: string;
   guarantorRank: string; //ยศ(ผู้ค้ำ)
   guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
   guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)
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>
 
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 9f36cc244..06a0042f4 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -2,19 +2,21 @@
 import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
+import genReportXLSX from "@/plugins/genreportxlsx";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import DialogHeader from "@/components/DialogHeader.vue";
 
-import genReportXLSX from "@/plugins/genreportxlsx";
+import DialogHeader from "@/components/DialogHeader.vue";
 
 /**importType*/
 import type {
   DataOption,
-  ItemsMenu,
   NewPagination,
 } from "@/modules/15_development/interface/index/Main";
-import type { FormQueryListProject } from "@/modules/15_development/interface/request/Main";
+import type {
+  FormQueryListProject,
+  FormProject,
+} from "@/modules/15_development/interface/request/Main";
 import type { ResListProject } from "@/modules/15_development/interface/response/Main";
 
 /** importStore*/
@@ -23,11 +25,14 @@ import { useCounterMixin } from "@/stores/mixin";
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogMessageNotify } =
+  useCounterMixin();
 
 const ticked = ref<any>([]);
 const node = ref<any>([]);
 const expanded = ref<any>([]);
+const filter = ref<string>("");
+const filterMain = ref<string>("");
 const splitterModel = ref<number>(60);
 const modal = ref<boolean>(false);
 const projectName = ref<string>("");
@@ -68,28 +73,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["year", "projectName", "org"]);
 
-/** เมนูดาวน์โหลด*/
-const itemDownload = ref<ItemsMenu[]>([
-  {
-    label: "Excel",
-    value: "EXCEL",
-    icon: "mdi-file-pdf-box",
-    color: "green",
-  },
-  {
-    label: "ดาวน์โหลด 2",
-    value: "PDF",
-    icon: "mdi-file-table",
-    color: "red",
-  },
-  {
-    label: "ดาวน์โหลด 3",
-    value: "WORD",
-    icon: "mdi-file-word",
-    color: "blue",
-  },
-]);
-
 const statusOpt = ref<DataOption[]>([
   { id: "ONGOING", name: "กำลังดำเนินการ" },
   { id: "FINISH", name: "เสร็จสิ้นโครงการ" },
@@ -102,8 +85,9 @@ const formQuery = reactive<FormQueryListProject>({
   org: "1",
   keyword: "",
   status: "ONGOING",
+  node: null,
+  nodeId: null,
 });
-const orgOp = ref<DataOption[]>([{ id: "1", name: "หน่วยงาน 1" }]);
 
 const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
 
@@ -113,7 +97,7 @@ function fetchListProject() {
   http
     .get(
       config.API.developmentMain +
-        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&status=${formQuery.status}`
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&status=${formQuery.status}&node=${formQuery.node}&nodeId=${formQuery.nodeId}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -188,28 +172,30 @@ function closeDialog() {
   projectName.value = "";
 }
 
+const formProject = reactive<FormProject>({
+  year: null,
+  projectName: "",
+  node: null,
+  nodeId: null,
+  orgRevisionId: null,
+});
+
 /** dialog submit */
 function onSubmit() {
-  http
-    .post(config.API.developmentMain,{
-      year:year.value,
-      projectName:projectName.value
-    })
-    .then((res) => {
-      closeDialog();
-      router.push(`/development/${res.data.result}`);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {});
-}
-
-function updateTicked(val: any) {
-  console.log(expanded.value);
-
-  ticked.value = [];
-  ticked.value.push(val[val.length - 1]);
+  if (formProject.nodeId) {
+    http
+      .post(config.API.developmentMain, formProject)
+      .then((res) => {
+        closeDialog();
+        router.push(`/development/${res.data.result}`);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
+  } else {
+    dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่รับผิดชอบ");
+  }
 }
 
 function fetchActive() {
@@ -242,6 +228,24 @@ async function fetchTree(id: string) {
     });
 }
 
+function updateSelected(data: any) {
+  formProject.node = data.orgLevel;
+  formProject.nodeId = data.orgTreeId;
+  formProject.orgRevisionId = data.orgRevisionId;
+}
+
+function updateSelectedTreeMain(data: any) {
+  if (formQuery.node === data.orgLevel && formQuery.nodeId === data.orgTreeId) {
+    formQuery.node = null;
+    formQuery.nodeId = null;
+  } else {
+    formQuery.node = data.orgLevel;
+    formQuery.nodeId = data.orgTreeId;
+  }
+
+  fetchListProjectNew();
+}
+
 onMounted(() => {
   fetchActive();
   fetchListProject();
@@ -252,218 +256,251 @@ onMounted(() => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
   </div>
-  <q-card flat bordered class="q-pa-md">
-    <q-toolbar style="padding: 0">
-      <div class="row q-gutter-sm">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formQuery.year"
-          :locale="'th'"
-          autoApply
-          year-picker
-          :enableTimePicker="false"
-          style="width: 150px"
-          @update:model-value="fetchListProjectNew"
-        >
-          <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="
-                formQuery.year === 0 ? 'ทั้งหมด' : Number(formQuery.year) + 543
-              "
-              :label="`${'ปีงบประมาณ'}`"
-            >
-              <template v-if="formQuery.year" v-slot:append>
+  <q-card bordered class="col-12 row caedNone">
+    <div class="col-xs-12 col-sm-3 row">
+      <div class="col-12 row no-wrap">
+        <div class="col-12 q-py-sm q-px-sm">
+          <div class="q-gutter-sm">
+            <q-input dense outlined v-model="filterMain" label="ค้นหา">
+              <template v-slot:append>
                 <q-icon
-                  name="cancel"
-                  @click.stop.prevent="
-                    (formQuery.year = 0), fetchListProjectNew()
-                  "
+                  v-if="filterMain !== ''"
+                  name="clear"
                   class="cursor-pointer"
+                  @click="filterMain = ''"
                 />
-              </template>
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
+                <q-icon v-else name="search" color="grey-5" />
               </template>
             </q-input>
-          </template>
-        </datepicker>
-        <q-select
-          dense
-          outlined
-          v-model="formQuery.status"
-          :options="statusOpt"
-          label="สถานะโครงการ"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-          @update:model-value="fetchListProjectNew"
-        />
-        <q-select
-          dense
-          outlined
-          v-model="formQuery.org"
-          :options="orgOp"
-          label="หน่วยงาน"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-          @update:model-value="fetchListProjectNew"
-        />
-        <q-toolbar-title>
-          <q-btn flat round dense icon="add" color="primary" @click="onAdd()">
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-        </q-toolbar-title>
-      </div>
 
-      <q-space />
-      <div class="row q-gutter-sm">
-        <div>
-          <q-btn
-            flat
-            round
-            dense
-            icon="mdi-arrow-down-bold-circle-outline"
-            color="blue"
-            @click="onDownload"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-          <!-- <q-btn
-            flat
-            round
-            color="blue"
-            icon="mdi-arrow-down-bold-circle-outline"
-          >
-            <q-menu>
-              <q-list style="min-width: 100px" dense>
+            <q-tree
+              class="tree-container"
+              dense
+              :nodes="node"
+              node-key="orgTreeName"
+              label-key="labelName"
+              v-model:expanded="expanded"
+              :filter="filterMain"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+              v-model:selected="formQuery.nodeId"
+            >
+              <template v-slot:default-header="prop">
                 <q-item
                   clickable
-                  v-close-popup
-                  v-for="items in itemDownload"
-                  :key="items.value"
-                  @click="onDownload(items.value)"
+                  @click.stop="updateSelectedTreeMain(prop.node)"
+                  :active="formQuery.nodeId === prop.node.orgTreeId"
+                  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"
                 >
-                  <q-item-section avatar>
-                    <q-icon :color="items.color" :name="items.icon" />
-                  </q-item-section>
-                  <q-item-section :class="`text-${items.color}`">{{
-                    items.label
-                  }}</q-item-section>
+                  <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>
-              </q-list>
-            </q-menu>
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn> -->
+              </template>
+            </q-tree>
+          </div>
         </div>
-        <div>
-          <q-input
-            standout
-            dense
-            v-model="formQuery.keyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keyup.enter="fetchListProjectNew"
-          >
-            <template v-slot:append>
-              <q-icon v-if="formQuery.keyword == ''" name="search" />
-              <q-icon
-                v-if="formQuery.keyword !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="
-                  (formQuery.keyword = ''),
-                    fetchListProject(),
-                    (formQuery.page = 1)
-                "
-              />
-            </template>
-          </q-input>
-        </div>
-        <div>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-          />
+        <div class="col-12 row">
+          <q-separator :vertical="!$q.screen.lt.md" />
         </div>
       </div>
-    </q-toolbar>
-
-    <div class="col-12">
-      <d-table
-        for="table"
-        ref="table"
-        :columns="columns"
-        :rows="rows"
-        row-key="id"
-        flat
-        bordered
-        dense
-        class="custom-header-table"
-        :rows-per-page-options="[10, 25, 50, 100]"
-        :visible-columns="visibleColumns"
-        @update:pagination="updatePagination"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="onClickAddOrView(true, props.row.id)"
+    </div>
+    <div class="col-xs-12 col-sm-9 q-pa-md row">
+      <div class="col-12">
+        <q-toolbar style="padding: 0">
+          <div class="row q-gutter-sm">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formQuery.year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              style="width: 150px"
+              @update:model-value="fetchListProjectNew"
             >
-              <div class="table_ellipsis">
-                {{ col.value ? col.value : "-" }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-        <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="formQuery.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(totalList)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="fetchListProject"
-          ></q-pagination>
-        </template>
-      </d-table>
+              <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="
+                    formQuery.year === 0
+                      ? 'ทั้งหมด'
+                      : Number(formQuery.year) + 543
+                  "
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-if="formQuery.year" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="
+                        (formQuery.year = 0), fetchListProjectNew()
+                      "
+                      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>
+            <q-select
+              dense
+              outlined
+              v-model="formQuery.status"
+              :options="statusOpt"
+              label="สถานะโครงการ"
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              @update:model-value="fetchListProjectNew"
+            />
+            <q-toolbar-title>
+              <q-btn
+                flat
+                round
+                dense
+                icon="add"
+                color="primary"
+                @click="onAdd()"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </q-toolbar-title>
+          </div>
+          <q-space />
+          <div class="row q-gutter-sm">
+            <div>
+              <q-btn
+                flat
+                round
+                dense
+                icon="mdi-arrow-down-bold-circle-outline"
+                color="blue"
+                @click="onDownload"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+              </q-btn>
+            </div>
+            <div>
+              <q-input
+                standout
+                dense
+                v-model="formQuery.keyword"
+                ref="filterRef"
+                outlined
+                placeholder="ค้นหา"
+                @keyup.enter="fetchListProjectNew"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="formQuery.keyword == ''" name="search" />
+                  <q-icon
+                    v-if="formQuery.keyword !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="
+                      (formQuery.keyword = ''),
+                        fetchListProject(),
+                        (formQuery.page = 1)
+                    "
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div>
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+              />
+            </div>
+          </div>
+        </q-toolbar>
+
+        <div class="col-12">
+          <d-table
+            for="table"
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            flat
+            bordered
+            dense
+            class="custom-header-table"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            @update:pagination="updatePagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  @click="onClickAddOrView(true, props.row.id)"
+                >
+                  <div class="table_ellipsis">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="formQuery.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(totalList)"
+                size="sm"
+                boundary-links
+                direction-links
+                :max-pages="5"
+                @update:model-value="fetchListProject"
+              ></q-pagination>
+            </template>
+          </d-table>
+        </div>
+      </div>
     </div>
   </q-card>
 
@@ -479,20 +516,34 @@ onMounted(() => {
           <q-splitter v-model="splitterModel" disable>
             <template v-slot:before>
               <q-scroll-area visible style="height: 60vh">
+                <div class="q-pa-md">
+                  <q-input dense outlined v-model="filter" label="ค้นหา">
+                    <template v-slot:append>
+                      <q-icon
+                        v-if="filter !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="filter = ''"
+                      />
+                      <q-icon v-else name="search" color="grey-5" />
+                    </template>
+                  </q-input>
+                </div>
                 <q-tree
-                  class="q-pa-sm"
                   dense
                   :nodes="node"
-                  node-key="orgName"
+                  node-key="orgTreeName"
                   label-key="labelName"
                   v-model:expanded="expanded"
-                  tick-strategy="strict"
-                  v-model:ticked="ticked"
-                  @update:ticked="updateTicked"
+                  :filter="filter"
+                  no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                  no-nodes-label="ไม่มีข้อมูล"
                 >
                   <template v-slot:default-header="prop">
                     <q-item
                       clickable
+                      @click.stop="updateSelected(prop.node)"
+                      :active="formProject.nodeId === prop.node.orgTreeId"
                       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"
                     >
@@ -522,7 +573,7 @@ onMounted(() => {
                 <div class="col-12">
                   <datepicker
                     menu-class-name="modalfix"
-                    v-model="year"
+                    v-model="formProject.year"
                     :locale="'th'"
                     autoApply
                     year-picker
@@ -538,13 +589,17 @@ onMounted(() => {
                         hide-bottom-space
                         :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
                         outlined
-                        :model-value="year === 0 ? null : Number(year) + 543"
+                        :model-value="
+                          formProject.year === null
+                            ? null
+                            : Number(formProject.year) + 543
+                        "
                         :label="`${'ปีงบประมาณ'}`"
                       >
-                        <template v-if="year" v-slot:append>
+                        <template v-if="formProject.year" v-slot:append>
                           <q-icon
                             name="cancel"
-                            @click.stop.prevent="year = 0"
+                            @click.stop.prevent="formProject.year = null"
                             class="cursor-pointer"
                           />
                         </template>
@@ -562,7 +617,7 @@ onMounted(() => {
                 </div>
                 <div class="col-12">
                   <q-input
-                    v-model="projectName"
+                    v-model="formProject.projectName"
                     label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
                     dense
                     outlined
@@ -591,4 +646,19 @@ onMounted(() => {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.tree-container {
+  overflow: auto;
+  height: 80vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.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>