diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index 499edda5a..d8a52d8c3 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -29,4 +29,7 @@ export default {
   developmentReportHistoryOfficer: () =>
     `${developmentReport}/history-employee`,
   developmentReportScholarship: () => `${developmentReport}/scholarship`,
+
+
+
 };
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index a093ac698..9f36cc244 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -25,6 +25,10 @@ const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
+const ticked = ref<any>([]);
+const node = ref<any>([]);
+const expanded = ref<any>([]);
+const splitterModel = ref<number>(60);
 const modal = ref<boolean>(false);
 const projectName = ref<string>("");
 const orgName = ref<string>("");
@@ -186,10 +190,60 @@ function closeDialog() {
 
 /** dialog submit */
 function onSubmit() {
-  router.push("/development/add");
+  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]);
+}
+
+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();
+    });
 }
 
 onMounted(() => {
+  fetchActive();
   fetchListProject();
 });
 </script>
@@ -421,72 +475,106 @@ onMounted(() => {
           :close="closeDialog"
         />
         <q-separator />
-        <q-card-section>
-          <div class="row q-col-gutter-sm">
-            <div class="col-4">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="year"
-                :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
-                    hide-bottom-space
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
-                    outlined
-                    :model-value="year === 0 ? null : Number(year) + 543"
-                    :label="`${'ปีงบประมาณ'}`"
+        <q-card-sectio class="q-pa-none">
+          <q-splitter v-model="splitterModel" disable>
+            <template v-slot:before>
+              <q-scroll-area visible style="height: 60vh">
+                <q-tree
+                  class="q-pa-sm"
+                  dense
+                  :nodes="node"
+                  node-key="orgName"
+                  label-key="labelName"
+                  v-model:expanded="expanded"
+                  tick-strategy="strict"
+                  v-model:ticked="ticked"
+                  @update:ticked="updateTicked"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      clickable
+                      active-class="my-list-link text-primary text-weight-medium"
+                      class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                    >
+                      <div>
+                        <div class="text-weight-medium">
+                          {{ prop.node.orgTreeName }}
+                        </div>
+                        <div class="text-weight-light text-grey-8">
+                          {{
+                            prop.node.orgCode == null ? null : prop.node.orgCode
+                          }}
+                          {{
+                            prop.node.orgTreeShortName == null
+                              ? null
+                              : prop.node.orgTreeShortName
+                          }}
+                        </div>
+                      </div>
+                    </q-item>
+                  </template>
+                </q-tree>
+              </q-scroll-area>
+            </template>
+
+            <template v-slot:after>
+              <div class="row q-col-gutter-sm q-pa-sm">
+                <div class="col-12">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="year"
+                    :locale="'th'"
+                    autoApply
+                    year-picker
+                    :enableTimePicker="false"
                   >
-                    <template v-if="year" v-slot:append>
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="year = 0"
-                        class="cursor-pointer"
-                      />
-                    </template>
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        hide-bottom-space
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
+                        outlined
+                        :model-value="year === 0 ? null : Number(year) + 543"
+                        :label="`${'ปีงบประมาณ'}`"
                       >
-                      </q-icon>
+                        <template v-if="year" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="year = 0"
+                            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>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-8">
-              <q-input
-                v-model="orgName"
-                label="ชื่อหน่วยงานที่รับผิดชอบ"
-                dense
-                outlined
-                hide-bottom-space
-                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อหน่วยงานที่รับผิดชอบ'}`,]"
-              />
-            </div>
-            <div class="col-12">
-              <q-input
-                v-model="projectName"
-                label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
-                dense
-                outlined
-                hide-bottom-space
-                type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,]"
-              />
-            </div>
-          </div>
-        </q-card-section>
+                  </datepicker>
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="projectName"
+                    label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
+                    dense
+                    outlined
+                    hide-bottom-space
+                    type="textarea"
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,]"
+                  />
+                </div>
+              </div>
+            </template>
+          </q-splitter>
+        </q-card-sectio>
         <q-separator />
         <q-card-actions align="right">
           <q-btn label="บันทึก" type="submit" color="public" dense></q-btn>