diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index d8a52d8c3..268f06a8d 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -16,6 +16,8 @@ export default {
   /** รายการโครงการ*/
   developmentMain: `${development}/main`,
   developmentMainById: (id: string) => `${development}/main/${id}`,
+  developmentMainTab: (tab: string, id: string) =>
+    `${development}/main/${tab}/${id}`,
 
   /** ทุนการศึกษา/ฝึกอบรม*/
   devScholarship,
@@ -32,4 +34,11 @@ export default {
 
 
 
+  // ปิดโครงการ
+  developmentMainFinish: (id: string) => `${development}/main/finish/${id}`,
+  // ข้อมูล status ของโครงการ
+  developmentMainStatus: (id: string) => `${development}/main/status/${id}`,
+
+    /** โครงการ tab ข้อมูลเบื้องต้น */
+    developmentBasicInfoById: (id:string) => `${development}/main/tab1/${id}`
 };
diff --git a/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue b/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
index 105cc93e5..25eb3a087 100644
--- a/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
+++ b/src/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -21,8 +21,16 @@ const {
   success,
   date2Thai,
 } = mixin;
-const L1Editor = ref<string>("");
-const competencyName = ref<string>("");
+
+const formData = reactive({
+  competencyType: "",
+  competencyName: "",
+  definition: "",
+  level1: "",
+  level2: "",
+  level3: "",
+  evaluation: "",
+});
 async function onSubmit() {
   dialogConfirm($q, async () => {});
 }
@@ -32,12 +40,19 @@ async function onSubmit() {
   <div class="full-width">
     <q-form @submit.prevent greedy @validation-success="onSubmit()">
       <div class="col-12">
-        <q-input outlined v-model="competencyName" dense label="ชื่อสมรรถนะ" />
+        <q-input
+          outlined
+          v-model="formData.competencyName"
+          dense
+          label="ชื่อสมรรถนะ"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`]"
+        />
       </div>
       <q-card-section class="col-12 q-px-none">
         <div>
           <q-editor
-            v-model="L1Editor"
+            v-model="formData.definition"
             :dense="$q.screen.lt.md"
             min-height="7rem"
             placeholder="คำจำกัดความ"
@@ -83,34 +98,48 @@ async function onSubmit() {
               </span>
             </q-card-section>
             <q-card-section class="q-pa-none col-6">
-              <div class="q-py-md q-mr-md">
-                <q-editor
-                  v-model="L1Editor"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
-
-                    ['unordered', 'ordered'],
+              <div class="q-mr-md">
+                <q-field
+                  ref="fieldRef"
+                  v-model="formData.level1"
+                  label-slot
+                  borderless
+                  :rules="[
+                    (val) => !!val || 'กรุณากรอก L1 ระดับ หัวหน้าฝ่ายในสังกัด',
                   ]"
-                  :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',
-                  }"
-                />
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      v-model="formData.level1"
+                      :dense="$q.screen.lt.md"
+                      min-height="5rem"
+                      class="full-width"
+                      :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>
               </div>
             </q-card-section>
           </div>
@@ -121,34 +150,49 @@ async function onSubmit() {
               </span>
             </q-card-section>
             <q-card-section class="q-pa-none col-6">
-              <div class="q-py-md q-mr-md">
-                <q-editor
-                  v-model="L1Editor"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
-
-                    ['unordered', 'ordered'],
+              <div class="q-mr-md">
+                <q-field
+                  ref="fieldRef"
+                  v-model="formData.level2"
+                  label-slot
+                  borderless
+                  :rules="[
+                    (val) =>
+                      !!val || 'กรุณากรอก L2 ระดับ ผู้ช่วยผู้อำนวยการเขต',
                   ]"
-                  :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',
-                  }"
-                />
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      v-model="formData.level2"
+                      :dense="$q.screen.lt.md"
+                      min-height="5rem"
+                      class="full-width"
+                      :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>
               </div>
             </q-card-section>
           </div>
@@ -159,52 +203,74 @@ async function onSubmit() {
               </span>
             </q-card-section>
             <q-card-section class="q-pa-none col-6">
-              <div class="q-py-md q-mr-md">
-                <q-editor
-                  v-model="L1Editor"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
-
-                    ['unordered', 'ordered'],
+              <div class="q-mr-md">
+                <q-field
+                  ref="fieldRef"
+                  v-model="formData.level3"
+                  label-slot
+                  borderless
+                  :rules="[
+                    (val) => !!val || 'กรุณากรอก L3 ระดับ ผู้อำนวยการเขต',
                   ]"
-                  :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',
-                  }"
-                />
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      v-model="formData.level3"
+                      :dense="$q.screen.lt.md"
+                      min-height="5rem"
+                      class="full-width"
+                      :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>
               </div>
             </q-card-section>
           </div>
         </q-card>
+        <div class="col-12 q-mt-md">
+          <q-input
+            v-model="formData.evaluation"
+            label="กำหนดเกณฑ์การประเมิน"
+            dense
+            type="textarea"
+            outlined
+          />
+        </div>
         <q-separator color="grey-4" />
-        <q-toolbar class="fit row wrap justify-end items-start content-start">
+        <div class="col-12 row justify-end q-mt-md">
           <q-btn
             dense
             unelevated
             label="บันทึก"
-            id="onSubmit"
-            type="submit"
             color="public"
             class="q-px-md"
+            type="submit"
           >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
-        </q-toolbar>
+        </div>
       </div>
     </q-form>
   </div>
diff --git a/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue b/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
index a4a0f6b24..68a3e829d 100644
--- a/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
+++ b/src/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -21,8 +21,16 @@ const {
   success,
   date2Thai,
 } = mixin;
-const L1Editor = ref<string>("");
-const competencyName = ref<string>("");
+
+const formData = reactive({
+  competencyType: "",
+  competencyName: "",
+  definition: "",
+  level1: "",
+  level2: "",
+  evaluation: "",
+});
+
 async function onSubmit() {
   dialogConfirm($q, async () => {});
 }
@@ -32,12 +40,19 @@ async function onSubmit() {
   <div class="full-width">
     <q-form @submit.prevent greedy @validation-success="onSubmit()">
       <div class="col-12">
-        <q-input outlined v-model="competencyName" dense label="ชื่อสมรรถนะ" />
+        <q-input
+          outlined
+          v-model="formData.competencyName"
+          dense
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`]"
+          label="ชื่อสมรรถนะ"
+        />
       </div>
       <q-card-section class="col-12 q-px-none">
         <div>
           <q-editor
-            v-model="L1Editor"
+            v-model="formData.definition"
             :dense="$q.screen.lt.md"
             min-height="7rem"
             placeholder="คำจำกัดความ"
@@ -83,34 +98,48 @@ async function onSubmit() {
               </span>
             </q-card-section>
             <q-card-section class="q-pa-none col-6">
-              <div class="q-py-md q-mr-md">
-                <q-editor
-                  v-model="L1Editor"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
-
-                    ['unordered', 'ordered'],
+              <div class="q-mr-md">
+                <q-field
+                  ref="fieldRef"
+                  v-model="formData.level1"
+                  label-slot
+                  borderless
+                  :rules="[
+                    (val) => !!val || 'กรุณากรอก L1 ประเภทอำนวยการ ระดับสูง',
                   ]"
-                  :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',
-                  }"
-                />
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      v-model="formData.level1"
+                      :dense="$q.screen.lt.md"
+                      min-height="5rem"
+                      class="full-width"
+                      :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>
               </div>
             </q-card-section>
           </div>
@@ -121,52 +150,74 @@ async function onSubmit() {
               </span>
             </q-card-section>
             <q-card-section class="q-pa-none col-6">
-              <div class="q-py-md q-mr-md">
-                <q-editor
-                  v-model="L1Editor"
-                  :dense="$q.screen.lt.md"
-                  min-height="5rem"
-                  :toolbar="[
-                    [
-                      'bold',
-                      'italic',
-                      'strike',
-                      'underline',
-                      'subscript',
-                      'superscript',
-                    ],
-
-                    ['unordered', 'ordered'],
+              <div class="q-mr-md">
+                <q-field
+                  ref="fieldRef"
+                  v-model="formData.level2"
+                  label-slot
+                  borderless
+                  :rules="[
+                    (val) => !!val || 'กรุณากรอก L2 ประเภทบริหาร ระดับสูง',
                   ]"
-                  :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',
-                  }"
-                />
+                  hide-bottom-space
+                >
+                  <template #control>
+                    <q-editor
+                      v-model="formData.level2"
+                      :dense="$q.screen.lt.md"
+                      min-height="5rem"
+                      class="full-width"
+                      :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>
               </div>
             </q-card-section>
           </div>
         </q-card>
+        <div class="col-12 q-mt-md">
+          <q-input
+            v-model="formData.evaluation"
+            outlined
+            label="กำหนดเกณฑ์การประเมิน"
+            type="textarea"
+            dense
+          />
+        </div>
         <q-separator color="grey-4" />
-        <q-toolbar class="fit row wrap justify-end items-start content-start">
+        <div class="col-12 row justify-end q-mt-md">
           <q-btn
             dense
             unelevated
             label="บันทึก"
-            id="onSubmit"
-            type="submit"
             color="public"
             class="q-px-md"
+            type="submit"
           >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
-        </q-toolbar>
+        </div>
       </div>
     </q-form>
   </div>
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 1d51a6f9f..9f05fd06f 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
@@ -9,11 +9,22 @@ import DialogSelectAgency from "@/modules/15_development/components/DialogSelect
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
-const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
+const mixin = useCounterMixin();
 
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = mixin;
 const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
 
@@ -25,6 +36,8 @@ const formData = reactive<FormBasicinfo>({
   objective: "",
 });
 
+const rows = ref<FormBasicinfo[]>([]);
+
 const modalDialogSelect = ref<boolean>(false);
 function selectAgency() {
   modalDialogSelect.value = true;
@@ -33,14 +46,56 @@ function updateAgency(name: string) {
   formData.org = name;
 }
 
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.developmentBasicInfoById(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      formData.year = data.year;
+      formData.reason = data.reason;
+      formData.projectName = data.projectName;
+      formData.objective = data.objective;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData(id: string) {
+  await http
+    .put(config.API.developmentBasicInfoById(id), {
+      year: formData.year,
+      reason: formData.reason,
+      projectName: formData.projectName,
+      objective: formData.objective,
+    })
+    .then(() => {
+      fetchData(id);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
-    // post
-    console.log("projectId===>", projectId.value);
+    editData(projectId.value);
     hideLoader();
   });
 }
+
+onMounted(async () => {
+  fetchData(projectId.value);
+});
 </script>
 
 <template>
@@ -49,7 +104,7 @@ function onSubmit() {
       <div class="col-xs-6 col-sm-2 col-md-2">
         <datepicker
           menu-class-name="modalfix"
-          v-model="store.formAddProject.year"
+          v-model="formData.year"
           :locale="'th'"
           autoApply
           year-picker
@@ -65,7 +120,7 @@ function onSubmit() {
               lazy-rules
               outlined
               class="inputgreen"
-              :model-value="Number(store.formAddProject.year) + 543"
+              :model-value="Number(formData.year) + 543"
               :label="`${'ปีงบประมาณ'}`"
             >
               <template v-slot:prepend>
@@ -93,16 +148,16 @@ function onSubmit() {
           @click="selectAgency"
         />
         <!-- :rules="[
-        (val:string) =>
-          !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
-      ]" -->
+          (val:string) =>
+            !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
+        ]" -->
       </div>
       <div class="col-xs-12 col-sm-12 col-md-12">
         <q-input
           outlined
           class="inputgreen"
           dense
-          v-model="store.formAddProject.projectName"
+          v-model="formData.projectName"
           label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
           rows="6"
           type="textarea"
@@ -110,7 +165,6 @@ function onSubmit() {
           :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
-
           ]"
         />
       </div>
@@ -119,7 +173,7 @@ function onSubmit() {
           outlined
           class="inputgreen"
           dense
-          v-model="store.formAddProject.reason"
+          v-model="formData.reason"
           label="หลักการและเหตุผล"
           rows="6"
           hide-bottom-space
@@ -131,7 +185,7 @@ function onSubmit() {
           outlined
           class="inputgreen"
           dense
-          v-model="store.formAddProject.objective"
+          v-model="formData.objective"
           label="วัตถุประสงค์"
           rows="6"
           hide-bottom-space
diff --git a/src/modules/15_development/components/DialogSelectAgency.vue b/src/modules/15_development/components/DialogSelectAgency.vue
index 516fc1855..0ffaffd5a 100644
--- a/src/modules/15_development/components/DialogSelectAgency.vue
+++ b/src/modules/15_development/components/DialogSelectAgency.vue
@@ -69,10 +69,8 @@ function updateTicked(val: any) {
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
-    emit("update:updateAgency", ticked.value[0]);
-    closeDialog();
-  });
+  emit("update:updateAgency", ticked.value[0]);
+  closeDialog();
 }
 
 function splitWords(sentence: string) {
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index 13a8c2508..badbce8f2 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -40,185 +40,201 @@ const projectId = ref<string>(route.params.id.toLocaleString());
 const tab = ref<string>("BasicInfo");
 
 const status = ref<string>("ONGOING");
-function fetchDataProject(id: string) {
+// function fetchDataProject(id: string) {
+//   showLoader();
+//   http
+//     .get(config.API.developmentMainById(id))
+//     .then((res) => {
+//       const data: ResDataProject = res.data.result;
+//       /** ข้อมูลเบื้องต้น*/
+//       status.value = data.status ? data.status : "ONGOING";
+//       store.formAddProject.year = data.year;
+//       store.formAddProject.projectName = data.projectName;
+//       store.formAddProject.reason = data.reason;
+//       store.formAddProject.objective = data.objective;
+//       /**เป้าหมาย*/
+//       const plannedGoals = data.plannedGoals.map((e: any) => ({
+//         groupTarget: e.groupTarget,
+//         groupTargetSub: e.groupTargetSub,
+//         positions: e.plannedGoalPositions.map((v: any) => ({
+//           position: v.position,
+//           posTypePlannedId: v.posTypePlannedId,
+//           posLevelPlannedId: v.posLevelPlannedId,
+//         })),
+//         type: e.type ? e.type : null,
+//         amount: e.amount,
+//       }));
+//       const plannedPeoples = data.plannedPeoples.map((e: ResPeople) => ({
+//         groupTarget: e.groupTarget,
+//         amount: e.amount,
+//       }));
+//       store.formAddProject.plannedGoals = plannedGoals;
+//       store.formAddProject.plannedPeoples = plannedPeoples;
+
+//       const actualGoals = data.actualGoals.map((e: ResActualGoals) => ({
+//         groupTarget: e.groupTarget,
+//         groupTargetSub: e.groupTargetSub,
+//         position: e.position,
+//         posTypeActualId: e.posTypeActualId,
+//         posLevelActualId: e.posLevelActualId,
+//         type: e.type,
+//         amount: e.amount,
+//       }));
+//       const actualPeoples = data.actualPeoples.map((e: ResPeople) => ({
+//         groupTarget: e.groupTarget,
+//         amount: e.amount,
+//       }));
+//       store.formAddProject.actualGoals = actualGoals;
+//       store.formAddProject.actualPeoples = actualPeoples;
+
+//       // ลักษณะโครงการ
+//       store.formAddProject.projectType = data.projectType;
+//       store.formAddProject.projectCharacteristics = data.projectCharacteristics;
+//       store.formAddProject.projectDay = data.projectDay;
+//       store.formAddProject.projectNigth = data.projectNigth;
+//       store.formAddProject.projectTechniques = data.projectTechniques;
+//       store.formAddProject.projectModal = data.projectModal;
+
+//       /** การติดตามผลดารประเมิน*/
+//       store.formAddProject.metricType = data.metricType;
+//       store.formAddProject.indicators = data.indicators;
+//       store.formAddProject.target = data.target;
+//       store.formAddProject.calculation = data.calculation;
+//       store.formAddProject.measuRement = data.measuRement;
+//       store.formAddProject.results = data.results;
+//       store.formAddProject.obstacles = data.obstacles;
+//       store.formAddProject.suggestions = data.suggestions;
+//       store.formAddProject.project = data.project;
+//       store.formAddProject.isPassAllocate = data.isPassAllocate;
+//       store.formAddProject.isPassNoAllocate = data.isPassNoAllocate;
+//       store.formAddProject.isNoPass = data.isNoPass;
+//       store.formAddProject.isBudget = data.isBudget;
+//       store.formAddProject.isOutBudget = data.isOutBudget;
+
+//       /** อื่นๆ*/
+//       store.formAddProject.dateStart = data.dateStart;
+//       store.formAddProject.dateEnd = data.dateEnd;
+//       store.formAddProject.totalDate = data.totalDate;
+//       store.formAddProject.address = data.address;
+
+//       const provinces = data.provinces.map((e: any) => e.id);
+//       const provincesId = [...provinces];
+//       store.formAddProject.provinceIds = provincesId;
+
+//       store.formAddProject.budget = data.budget;
+//       store.formAddProject.accept = data.accept;
+//       store.formAddProject.receive = data.receive;
+//       store.formAddProject.approved = data.approved;
+//       store.formAddProject.budgetPay = data.budgetPay;
+//       store.formAddProject.issues = data.issues;
+//       store.formAddProject.chance = Number(data.chance);
+//       store.formAddProject.effects = Number(data.effects);
+//       store.formAddProject.riskLevel = data.riskLevel;
+//       store.formAddProject.riskManagement = data.riskManagement;
+//       store.formAddProject.expect = data.expect;
+//       store.formAddProject.topicAcademic = data.topicAcademic;
+//       store.formAddProject.addressAcademic = data.addressAcademic;
+//       store.formAddProject.provinceActualId = data.provinceActualId;
+//     })
+//     .catch((err) => {
+//       messageError($q, err);
+//     })
+//     .finally(() => {
+//       setTimeout(() => {
+//         hideLoader();
+//       }, 1000);
+//     });
+// }
+
+// function onSubmit() {
+//   if (store.formAddProject.projectName === "" && tab.value !== "BasicInfo") {
+//     dialogMessageNotify($q, "ชื่อโครงการ/กิจกรรม/หลักสูตร");
+//     tab.value = "BasicInfo";
+//   } else {
+//     dialogConfirm($q, async () => {
+//       showLoader();
+//       /** การติดตามผลดารประเมิน*/
+//       if (store.formAddProject.project === "OFFER") {
+//         store.formAddProject.isBudget = false;
+//         store.formAddProject.isOutBudget = false;
+//       } else {
+//         store.formAddProject.isPassAllocate = false;
+//         store.formAddProject.isPassNoAllocate = false;
+//         store.formAddProject.isNoPass = false;
+//       }
+
+//       // ลักษณะโครงการ;
+//       store.formAddProject.projectDay = store.formAddProject.projectDay
+//         ? Number(store.formAddProject.projectDay)
+//         : null;
+//       store.formAddProject.projectNigth = store.formAddProject.projectNigth
+//         ? Number(store.formAddProject.projectNigth)
+//         : null;
+//       store.formAddProject.projectModal = store.formAddProject.projectModal
+//         ? Number(store.formAddProject.projectModal)
+//         : null;
+
+//       /** อื่นๆ*/
+//       store.formAddProject.totalDate = Number(store.formAddProject.totalDate);
+//       store.formAddProject.accept =
+//         typeof store.formAddProject.accept === "string"
+//           ? Number(store.formAddProject.accept.replace(/,/g, ""))
+//           : store.formAddProject.accept;
+//       store.formAddProject.receive =
+//         typeof store.formAddProject.receive === "string"
+//           ? Number(store.formAddProject.receive.replace(/,/g, ""))
+//           : store.formAddProject.receive;
+//       store.formAddProject.approved =
+//         typeof store.formAddProject.approved === "string"
+//           ? Number(store.formAddProject.approved.replace(/,/g, ""))
+//           : store.formAddProject.approved;
+//       store.formAddProject.budgetPay =
+//         typeof store.formAddProject.budgetPay === "string"
+//           ? Number(store.formAddProject.budgetPay.replace(/,/g, ""))
+//           : store.formAddProject.budgetPay;
+
+//       const url = projectId.value
+//         ? config.API.developmentMainById(projectId.value)
+//         : config.API.developmentMain;
+//       const method = projectId.value ? "put" : "post";
+//       try {
+//         const res = await http[method](url, store.formAddProject);
+//         success($q, "บันทึกข้อมูลสำเร็จ");
+//         !projectId.value && router.push(`/development/${res.data.result}`);
+//         projectId.value && fetchDataProject(projectId.value);
+//       } catch (e) {
+//         messageError($q, e);
+//       } finally {
+//         hideLoader();
+//       }
+//     });
+//   }
+// }
+
+function getStatus(id: string) {
   showLoader();
   http
-    .get(config.API.developmentMainById(id))
+    .get(config.API.developmentMainStatus(id)) // change path
     .then((res) => {
-      const data: ResDataProject = res.data.result;
-      /** ข้อมูลเบื้องต้น*/
-      status.value = data.status ? data.status : "ONGOING";
-      store.formAddProject.year = data.year;
-      store.formAddProject.projectName = data.projectName;
-      store.formAddProject.reason = data.reason;
-      store.formAddProject.objective = data.objective;
-      /**เป้าหมาย*/
-      const plannedGoals = data.plannedGoals.map((e: any) => ({
-        groupTarget: e.groupTarget,
-        groupTargetSub: e.groupTargetSub,
-        positions: e.plannedGoalPositions.map((v: any) => ({
-          position: v.position,
-          posTypePlannedId: v.posTypePlannedId,
-          posLevelPlannedId: v.posLevelPlannedId,
-        })),
-        type: e.type ? e.type : null,
-        amount: e.amount,
-      }));
-      const plannedPeoples = data.plannedPeoples.map((e: ResPeople) => ({
-        groupTarget: e.groupTarget,
-        amount: e.amount,
-      }));
-      store.formAddProject.plannedGoals = plannedGoals;
-      store.formAddProject.plannedPeoples = plannedPeoples;
-
-      const actualGoals = data.actualGoals.map((e: ResActualGoals) => ({
-        groupTarget: e.groupTarget,
-        groupTargetSub: e.groupTargetSub,
-        position: e.position,
-        posTypeActualId: e.posTypeActualId,
-        posLevelActualId: e.posLevelActualId,
-        type: e.type,
-        amount: e.amount,
-      }));
-      const actualPeoples = data.actualPeoples.map((e: ResPeople) => ({
-        groupTarget: e.groupTarget,
-        amount: e.amount,
-      }));
-      store.formAddProject.actualGoals = actualGoals;
-      store.formAddProject.actualPeoples = actualPeoples;
-
-      // ลักษณะโครงการ
-      store.formAddProject.projectType = data.projectType;
-      store.formAddProject.projectCharacteristics = data.projectCharacteristics;
-      store.formAddProject.projectDay = data.projectDay;
-      store.formAddProject.projectNigth = data.projectNigth;
-      store.formAddProject.projectTechniques = data.projectTechniques;
-      store.formAddProject.projectModal = data.projectModal;
-
-      /** การติดตามผลดารประเมิน*/
-      store.formAddProject.metricType = data.metricType;
-      store.formAddProject.indicators = data.indicators;
-      store.formAddProject.target = data.target;
-      store.formAddProject.calculation = data.calculation;
-      store.formAddProject.measuRement = data.measuRement;
-      store.formAddProject.results = data.results;
-      store.formAddProject.obstacles = data.obstacles;
-      store.formAddProject.suggestions = data.suggestions;
-      store.formAddProject.project = data.project;
-      store.formAddProject.isPassAllocate = data.isPassAllocate;
-      store.formAddProject.isPassNoAllocate = data.isPassNoAllocate;
-      store.formAddProject.isNoPass = data.isNoPass;
-      store.formAddProject.isBudget = data.isBudget;
-      store.formAddProject.isOutBudget = data.isOutBudget;
-
-      /** อื่นๆ*/
-      store.formAddProject.dateStart = data.dateStart;
-      store.formAddProject.dateEnd = data.dateEnd;
-      store.formAddProject.totalDate = data.totalDate;
-      store.formAddProject.address = data.address;
-
-      const provinces = data.provinces.map((e: any) => e.id);
-      const provincesId = [...provinces];
-      store.formAddProject.provinceIds = provincesId;
-
-      store.formAddProject.budget = data.budget;
-      store.formAddProject.accept = data.accept;
-      store.formAddProject.receive = data.receive;
-      store.formAddProject.approved = data.approved;
-      store.formAddProject.budgetPay = data.budgetPay;
-      store.formAddProject.issues = data.issues;
-      store.formAddProject.chance = Number(data.chance);
-      store.formAddProject.effects = Number(data.effects);
-      store.formAddProject.riskLevel = data.riskLevel;
-      store.formAddProject.riskManagement = data.riskManagement;
-      store.formAddProject.expect = data.expect;
-      store.formAddProject.topicAcademic = data.topicAcademic;
-      store.formAddProject.addressAcademic = data.addressAcademic;
-      store.formAddProject.provinceActualId = data.provinceActualId;
+      status.value = res.data.result.status;
     })
-    .catch((err) => {
-      messageError($q, err);
+    .catch((e) => {
+      messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
+      hideLoader();
     });
 }
 
-function onSubmit() {
-  if (store.formAddProject.projectName === "" && tab.value !== "BasicInfo") {
-    dialogMessageNotify($q, "ชื่อโครงการ/กิจกรรม/หลักสูตร");
-    tab.value = "BasicInfo";
-  } else {
-    dialogConfirm($q, async () => {
-      showLoader();
-      /** การติดตามผลดารประเมิน*/
-      if (store.formAddProject.project === "OFFER") {
-        store.formAddProject.isBudget = false;
-        store.formAddProject.isOutBudget = false;
-      } else {
-        store.formAddProject.isPassAllocate = false;
-        store.formAddProject.isPassNoAllocate = false;
-        store.formAddProject.isNoPass = false;
-      }
-
-      // ลักษณะโครงการ;
-      store.formAddProject.projectDay = store.formAddProject.projectDay
-        ? Number(store.formAddProject.projectDay)
-        : null;
-      store.formAddProject.projectNigth = store.formAddProject.projectNigth
-        ? Number(store.formAddProject.projectNigth)
-        : null;
-      store.formAddProject.projectModal = store.formAddProject.projectModal
-        ? Number(store.formAddProject.projectModal)
-        : null;
-
-      /** อื่นๆ*/
-      store.formAddProject.totalDate = Number(store.formAddProject.totalDate);
-      store.formAddProject.accept =
-        typeof store.formAddProject.accept === "string"
-          ? Number(store.formAddProject.accept.replace(/,/g, ""))
-          : store.formAddProject.accept;
-      store.formAddProject.receive =
-        typeof store.formAddProject.receive === "string"
-          ? Number(store.formAddProject.receive.replace(/,/g, ""))
-          : store.formAddProject.receive;
-      store.formAddProject.approved =
-        typeof store.formAddProject.approved === "string"
-          ? Number(store.formAddProject.approved.replace(/,/g, ""))
-          : store.formAddProject.approved;
-      store.formAddProject.budgetPay =
-        typeof store.formAddProject.budgetPay === "string"
-          ? Number(store.formAddProject.budgetPay.replace(/,/g, ""))
-          : store.formAddProject.budgetPay;
-
-      const url = projectId.value
-        ? config.API.developmentMainById(projectId.value)
-        : config.API.developmentMain;
-      const method = projectId.value ? "put" : "post";
-      try {
-        const res = await http[method](url, store.formAddProject);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        !projectId.value && router.push(`/development/${res.data.result}`);
-        projectId.value && fetchDataProject(projectId.value);
-      } catch (e) {
-        messageError($q, e);
-      } finally {
-        hideLoader();
-      }
-    });
-  }
-}
-
 function onFinish(id: string) {
   dialogConfirm(
     $q,
     async () => {
       showLoader();
       http
-        .get(config.API.developmentMainById(id)) // change path
+        .get(config.API.developmentMainFinish(id)) // change path
         .then((res) => {
+          getStatus(id);
           success($q, "บันทึกข้อมูลสำเร็จ");
         })
         .catch((e) => {
@@ -234,7 +250,7 @@ function onFinish(id: string) {
 }
 
 onMounted(() => {
-  projectId.value && fetchDataProject(projectId.value);
+  projectId.value && getStatus(projectId.value);
 });
 
 onUnmounted(() => {
@@ -267,7 +283,7 @@ onUnmounted(() => {
       <q-tooltip>บันทึกข้อมูล</q-tooltip>
     </q-btn> -->
     <q-btn
-      v-if="status === 'FINISH'"
+      v-if="status === 'ONGOING'"
       unelevated
       label="เสร็จสิ้นโครงการ"
       color="green"
diff --git a/src/modules/15_development/components/Other.vue b/src/modules/15_development/components/Other.vue
index 5382b4c08..187ec895e 100644
--- a/src/modules/15_development/components/Other.vue
+++ b/src/modules/15_development/components/Other.vue
@@ -7,6 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import type { FormData } from "@/modules/15_development/interface/request/Other";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
@@ -21,7 +22,6 @@ const {
   messageError,
   dialogConfirm,
 } = useCounterMixin();
-
 const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
 
@@ -55,7 +55,6 @@ const budgetSubOp = ref<DataOption[]>([
     name: "เงินอุดหนุน",
   },
 ]);
-
 const getProvince = async () => {
   showLoader();
   http
@@ -77,30 +76,81 @@ const getProvince = async () => {
     });
 };
 
+const formData = reactive<FormData>({
+  dateStart: null, //วันที่เริ่มต้น
+  dateEnd: null, //วันที่สิ้นสุด
+  totalDate: null, //รวมระยะเวลา (วัน)
+  developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
+  budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
+  budgetSub: "",
+  accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
+  receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
+  approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
+  budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
+  issues: "", //ประเด็นความเสี่ยง
+  chance: null, //โอกาสที่จะเกิด
+  effects: null, //ผลกระทบจากการเกิด
+  riskLevel: "", //ระดับความเสี่ยง
+  riskManagement: "", //เเนวทางการบริหารความเสี่ยง
+  expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
+  topicAcademic: "", //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
+  addressAcademic: "", //สถานที่ฝึกอบรม ศึกษาดูงาน
+  provinceActualId: "", //จังหวัด(ข้อมูลวิชาการ)
+});
+
+function fetchData() {
+  http
+    .get(config.API.developmentMainTab("tab5", projectId.value))
+    .then((res) => {
+      console.log(res);
+      const data = res.data.result;
+
+      formData.dateStart = data.dateStart;
+      formData.dateEnd = data.dateEnd;
+      formData.totalDate = data.totalDate;
+      formData.developmentAddresss = data.developmentAddresss.map((e: any) => ({
+        address: e.address,
+        provinceId: e.provinceId,
+      }));
+
+      formData.budget = data.budget;
+      formData.accept = data.accept;
+      formData.receive = data.receive;
+      formData.approved = data.approved;
+      formData.budgetPay = data.budgetPay;
+      formData.issues = data.issues;
+      formData.chance = Number(data.chance);
+      formData.effects = Number(data.effects);
+      formData.riskLevel = data.riskLevel;
+      formData.riskManagement = data.riskManagement;
+      formData.expect = data.expect;
+      formData.topicAcademic = data.topicAcademic;
+      formData.addressAcademic = data.addressAcademic;
+      formData.provinceActualId = data.provinceActualId;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function changeDateStart() {
-  if (
-    store.formAddProject.dateStart !== null &&
-    store.formAddProject.dateEnd !== null
-  ) {
-    const startDate = new Date(store.formAddProject.dateStart);
-    const endDate = new Date(store.formAddProject.dateEnd);
+  if (formData.dateStart !== null && formData.dateEnd !== null) {
+    const startDate = new Date(formData.dateStart);
+    const endDate = new Date(formData.dateEnd);
     if (startDate > endDate) {
-      store.formAddProject.dateEnd = null;
-      store.formAddProject.totalDate = null;
+      formData.dateEnd = null;
+      formData.totalDate = null;
     } else {
-      store.formAddProject.totalDate = diffDay(
-        store.formAddProject.dateStart,
-        store.formAddProject.dateEnd
-      );
+      formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
     }
   }
 }
 
 function changeDateEnd() {
-  store.formAddProject.totalDate = diffDay(
-    store.formAddProject.dateStart,
-    store.formAddProject.dateEnd
-  );
+  formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
 }
 
 /**
@@ -117,11 +167,10 @@ const filterSelector = (val: string, update: Function) => {
 };
 
 async function calRiskLevel() {
-  if (store.formAddProject.chance && store.formAddProject.effects) {
+  if (formData.chance && formData.effects) {
     const riskLevel =
-      (await store.formAddProject.chance) * store.formAddProject.effects;
-
-    store.formAddProject.riskLevel =
+      (await Number(formData.chance)) * Number(formData.effects);
+    formData.riskLevel =
       riskLevel == 1
         ? "น้อยมาก"
         : riskLevel == 2
@@ -140,16 +189,55 @@ async function calRiskLevel() {
   }
 }
 
+function onClickAddLocation() {
+  const data = {
+    address: "",
+    provinceId: "",
+  };
+  formData.developmentAddresss.push(data);
+}
+
+function onClickDeleteLocation(index: number) {
+  formData.developmentAddresss.splice(index, 1);
+}
+
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
-    // post
-    console.log("projectId===>", projectId.value);
-    hideLoader();
+    formData.totalDate = Number(formData.totalDate);
+    formData.accept =
+      typeof formData.accept === "string"
+        ? Number(formData.accept.replace(/,/g, ""))
+        : formData.accept;
+    formData.receive =
+      typeof formData.receive === "string"
+        ? Number(formData.receive.replace(/,/g, ""))
+        : formData.receive;
+    formData.approved =
+      typeof formData.approved === "string"
+        ? Number(formData.approved.replace(/,/g, ""))
+        : formData.approved;
+    formData.budgetPay =
+      typeof formData.budgetPay === "string"
+        ? Number(formData.budgetPay.replace(/,/g, ""))
+        : formData.budgetPay;
+
+    http
+      .put(config.API.developmentMainTab("tab5", projectId.value), formData)
+      .then(() => {
+        fetchData();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
 onMounted(() => {
+  fetchData();
   getProvince();
 });
 </script>
@@ -162,7 +250,7 @@ onMounted(() => {
       <div class="col-12 col-sm-6 col-md-3">
         <datepicker
           menu-class-name="modalfix"
-          v-model="store.formAddProject.dateStart"
+          v-model="formData.dateStart"
           :locale="'th'"
           autoApply
           :enableTimePicker="false"
@@ -179,9 +267,7 @@ onMounted(() => {
               dense
               outlined
               :model-value="
-                store.formAddProject.dateStart
-                  ? date2Thai(store.formAddProject.dateStart)
-                  : null
+                formData.dateStart ? date2Thai(formData.dateStart) : null
               "
               :label="`${'วันที่เริ่มต้น'}`"
             >
@@ -200,12 +286,12 @@ onMounted(() => {
       <div class="col-12 col-sm-6 col-md-3">
         <datepicker
           menu-class-name="modalfix"
-          v-model="store.formAddProject.dateEnd"
+          v-model="formData.dateEnd"
           :locale="'th'"
           autoApply
           :enableTimePicker="false"
           week-start="0"
-          :min-date="store.formAddProject.dateStart"
+          :min-date="formData.dateStart"
           @update:model-value="changeDateEnd()"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
@@ -218,9 +304,7 @@ onMounted(() => {
               outlined
               class="inputgreen"
               :model-value="
-                store.formAddProject.dateEnd
-                  ? date2Thai(store.formAddProject.dateEnd)
-                  : null
+                formData.dateEnd ? date2Thai(formData.dateEnd) : null
               "
               :label="`${'วันที่สิ้นสุด'}`"
             >
@@ -242,7 +326,7 @@ onMounted(() => {
           outlined
           class="inputgreen"
           label="รวมระยะเวลา (วัน)"
-          v-model="store.formAddProject.totalDate"
+          v-model="formData.totalDate"
           mask="#"
           reverse-fill-mask
         />
@@ -250,42 +334,71 @@ onMounted(() => {
 
       <div class="col-12 q-mt-md">
         <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
-      </div>
-      <div class="col-8">
-        <q-input
-          outlined
+        <q-btn
           dense
-          class="inputgreen"
-          v-model="store.formAddProject.address"
-          label="ที่อยู่"
-        />
-      </div>
-      <div class="col-4">
-        <q-select
-          outlined
-          dense
-          v-model="store.formAddProject.provinceIds"
-          label="จังหวัด"
-          :options="provinceOp"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-          class="inputgreen"
-          use-input
-          multiple
-          @filter="
-        (inputValue:string, doneFn:Function) =>
-          filterSelector(inputValue, doneFn, )
-      "
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click="onClickAddLocation"
         >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
+          <q-tooltip>เพิ่มสถานที่ดำเนินการ</q-tooltip>
+        </q-btn>
       </div>
+      <div class="col-12" v-for="(item, index) in formData.developmentAddresss">
+        <div class="row q-col-gutter-sm">
+          <div class="col-8">
+            <q-input
+              outlined
+              dense
+              class="inputgreen"
+              v-model="formData.developmentAddresss[index].address"
+              label="ที่อยู่"
+            />
+          </div>
+          <div class="col-3">
+            <q-select
+              outlined
+              dense
+              v-model="formData.developmentAddresss[index].provinceId"
+              label="จังหวัด"
+              :options="provinceOp"
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              class="inputgreen"
+              use-input
+              @filter="
+            (inputValue:string, doneFn:Function) =>
+              filterSelector(inputValue, doneFn, )
+          "
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่พบข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+          <div class="col-1 text-center">
+            <q-btn
+              v-if="index !== 0"
+              dense
+              flat
+              round
+              color="red"
+              icon="delete"
+              @click="onClickDeleteLocation(index)"
+            >
+              <q-tooltip>ลบ</q-tooltip></q-btn
+            >
+          </div>
+        </div>
+      </div>
+
       <div class="col-12 q-mt-md">
         <span class="text-weight-medium text-body1">งบประมาณ</span>
       </div>
@@ -293,7 +406,7 @@ onMounted(() => {
         <q-select
           outlined
           dense
-          v-model="store.formAddProject.budget"
+          v-model="formData.budget"
           label="ประเภทงบประมาณ"
           :options="budgetOp"
           option-label="name"
@@ -305,10 +418,10 @@ onMounted(() => {
       </div>
       <div class="col-2">
         <q-select
-          v-if="store.formAddProject.budget === 'OUTSIDEBUDGET'"
+          v-if="formData.budget === 'OUTSIDEBUDGET'"
           outlined
           dense
-          v-model="store.formAddProject.budgetSub"
+          v-model="formData.budgetSub"
           label="ประเภทย่อย"
           :options="budgetSubOp"
           option-label="name"
@@ -325,7 +438,7 @@ onMounted(() => {
               outlined
               dense
               class="inputgreen"
-              v-model="store.formAddProject.accept"
+              v-model="formData.accept"
               label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
               mask="###,###,###,###,###"
               reverse-fill-mask
@@ -336,7 +449,7 @@ onMounted(() => {
               outlined
               dense
               class="inputgreen"
-              v-model="store.formAddProject.receive"
+              v-model="formData.receive"
               mask="###,###,###,###,###"
               reverse-fill-mask
               label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
@@ -347,7 +460,7 @@ onMounted(() => {
               outlined
               dense
               class="inputgreen"
-              v-model="store.formAddProject.approved"
+              v-model="formData.approved"
               hide-bottom-space
               mask="###,###,###,###,###"
               label="จํานวนงบประมาณที่ได้รับอนุมัติ"
@@ -359,7 +472,7 @@ onMounted(() => {
               outlined
               dense
               class="inputgreen"
-              v-model="store.formAddProject.budgetPay"
+              v-model="formData.budgetPay"
               mask="###,###,###,###,###"
               reverse-fill-mask
               label="จํานวนงบประมาณที่จ่ายจริง"
@@ -367,7 +480,6 @@ onMounted(() => {
           </div>
         </div>
       </div>
-
       <div class="col-12 q-mt-md">
         <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
       </div>
@@ -377,7 +489,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.issues"
+          v-model="formData.issues"
           label="ประเด็นความเสี่ยง"
           type="textarea"
         />
@@ -387,7 +499,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.chance"
+          v-model="formData.chance"
           label="โอกาสที่จะเกิด"
           :options="[1, 2, 3, 4]"
           @update:model-value="calRiskLevel"
@@ -398,7 +510,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.effects"
+          v-model="formData.effects"
           label="ผลกระทบจากการเกิด"
           :options="[1, 2, 3, 4]"
           @update:model-value="calRiskLevel"
@@ -411,7 +523,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.riskLevel"
+          v-model="formData.riskLevel"
           label="ระดับความเสี่ยง"
         />
       </div>
@@ -420,7 +532,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.riskManagement"
+          v-model="formData.riskManagement"
           label="เเนวทางการบริหารความเสี่ยง"
           type="textarea"
         />
@@ -435,7 +547,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.expect"
+          v-model="formData.expect"
           label="ประโยชน์ที่คาดว่าจะได้รับ"
           type="textarea"
         />
@@ -448,7 +560,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.topicAcademic"
+          v-model="formData.topicAcademic"
           label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
         />
       </div>
@@ -457,7 +569,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
-          v-model="store.formAddProject.addressAcademic"
+          v-model="formData.addressAcademic"
           label="สถานที่ฝึกอบรม ศึกษาดูงาน"
         />
       </div>
@@ -465,7 +577,7 @@ onMounted(() => {
         <q-select
           outlined
           dense
-          v-model="store.formAddProject.provinceActualId"
+          v-model="formData.provinceActualId"
           label="จังหวัด"
           :options="provinceOp"
           option-label="name"
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index 3dbd08e9f..3bc44b536 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -26,15 +26,26 @@ const projectCharacteristicsOp = ref<DataOption[]>([
   { id: "HOLD", name: "พักค้าง" },
   { id: "GO_BACK_HOLD", name: "ไป-กลับและพักค้าง" },
 ]);
-const projectTechniquesOp = ref<DataOption[]>([
-  { id: "TRAINING", name: "การอบรม" },
-  { id: "MEETING", name: "การประชุม" },
-  { id: "SEMINAR", name: "การสัมมนา" },
-  { id: "STUDY_TOUR", name: "การศึกษาดูงาน" },
-  { id: "ACADEMIC_SEMINAR", name: "การสัมมนาทางวิชาการ" },
-  { id: "WORKSHOP", name: "การสัมมนาเชิงปฏิบัติการ" },
-  { id: "SPECIAL_LECTURE", name: "การบรรยายพิเศษ" },
-  { id: "STUDY_TRAINING", name: "การฝึกศึกษา" },
+// const projectTechniquesOp = ref<DataOption[]>([
+//   { id: "TRAINING", name: "การอบรม" },
+//   { id: "MEETING", name: "การประชุม" },
+//   { id: "SEMINAR", name: "การสัมมนา" },
+//   { id: "STUDY_TOUR", name: "การศึกษาดูงาน" },
+//   { id: "ACADEMIC_SEMINAR", name: "การสัมมนาทางวิชาการ" },
+//   { id: "WORKSHOP", name: "การสัมมนาเชิงปฏิบัติการ" },
+//   { id: "SPECIAL_LECTURE", name: "การบรรยายพิเศษ" },
+//   { id: "STUDY_TRAINING", name: "การฝึกศึกษา" },
+// ]);
+
+const projectTechniquesOp = ref<any[]>([
+  { value: "TRAINING", label: "การอบรม" },
+  { value: "MEETING", label: "การประชุม" },
+  { value: "SEMINAR", label: "การสัมมนา" },
+  { value: "STUDY_TOUR", label: "การศึกษาดูงาน" },
+  { value: "ACADEMIC_SEMINAR", label: "การสัมมนาทางวิชาการ" },
+  { value: "WORKSHOP", label: "การสัมมนาเชิงปฏิบัติการ" },
+  { value: "SPECIAL_LECTURE", label: "การบรรยายพิเศษ" },
+  { value: "STUDY_TRAINING", label: "การฝึกศึกษา" },
 ]);
 
 function onSubmit() {
@@ -50,7 +61,7 @@ function onSubmit() {
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
     <div class="row q-pa-md q-col-gutter-sm">
-      <div class="col-12 col-sm-12 col-md-4">
+      <div class="col-12">
         <q-select
           dense
           outlined
@@ -64,53 +75,6 @@ function onSubmit() {
         />
       </div>
       <div class="col-12 col-sm-6 col-md-4">
-        <q-select
-          dense
-          outlined
-          v-model="store.formAddProject.projectCharacteristics"
-          :options="projectCharacteristicsOp"
-          label="ลักษณะ"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-        />
-      </div>
-      <div class="col-12 col-sm-6 col-md-2">
-        <q-input
-          dense
-          outlined
-          v-model="store.formAddProject.projectDay"
-          label="จำนวน (วัน)"
-          mask="#"
-          reverse-fill-mask
-        />
-      </div>
-      <div class="col-12 col-sm-6 col-md-2">
-        <q-input
-          v-if="store.formAddProject.projectCharacteristics !== 'GO_BACK'"
-          dense
-          outlined
-          v-model="store.formAddProject.projectNigth"
-          label="จำนวน (คืน)"
-          mask="#"
-          reverse-fill-mask
-        />
-      </div>
-      <div class="col-12 col-sm-6 col-md-4">
-        <q-select
-          dense
-          outlined
-          v-model="store.formAddProject.projectTechniques"
-          :options="projectTechniquesOp"
-          label="เทคนิควิธีการที่ใช้ในการพัฒนา"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-        />
-      </div>
-      <div class="col-12 col-sm-6 col-md-2">
         <q-input
           dense
           outlined
@@ -120,6 +84,149 @@ function onSubmit() {
           reverse-fill-mask
         />
       </div>
+
+      <div class="col-12"><q-separator class="q-my-md" /></div>
+
+      <div class="col-12 text-bold">รูปแบบโครงการตามแผน</div>
+
+      <div class="col-12 q-py-md">
+        <q-label>เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
+        <q-option-group
+          keep-color
+          color="primary"
+          dense
+          v-model="store.formAddProject.projectTechniques"
+          :options="projectTechniquesOp"
+          type="checkbox"
+          inline
+        />
+      </div>
+
+      <div class="row col-12 q-col-gutter-sm">
+        <div class="col-12 col-sm-2">
+          <q-checkbox
+            keep-color
+            color="primary"
+            dense
+            value="GO_BLACK"
+            label="ไป-กลับ"
+            v-model="store.formAddProject.projectCharacteristics"
+          ></q-checkbox>
+        </div>
+        <div class="col-12 col-sm-3">
+          <q-input
+            dense
+            outlined
+            v-model="store.formAddProject.projectDay"
+            label="จำนวน (วัน)"
+            mask="#"
+            reverse-fill-mask
+          />
+        </div>
+      </div>
+      <div class="row col-12 q-col-gutter-sm">
+        <div class="col-12 col-sm-2">
+          <q-checkbox
+            keep-color
+            color="primary"
+            dense
+            value="HOLD"
+            label="พักค้าง"
+            v-model="store.formAddProject.projectCharacteristics"
+          ></q-checkbox>
+        </div>
+        <div class="col-12 col-sm-3">
+          <q-input
+            dense
+            outlined
+            v-model="store.formAddProject.projectDay"
+            label="จำนวน (วัน)"
+            mask="#"
+            reverse-fill-mask
+          />
+        </div>
+        <div class="col-12 col-sm-3">
+          <q-input
+            dense
+            outlined
+            v-model="store.formAddProject.projectNigth"
+            label="จำนวน (คืน)"
+            mask="#"
+            reverse-fill-mask
+          />
+        </div>
+      </div>
+
+      <div class="col-12"><q-separator class="q-my-md" /></div>
+
+      <div class="col-12 text-bold">รูปแบบโครงการตามจริง</div>
+      <div class="col-12 q-py-md">
+        <q-label>เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
+        <q-option-group
+          keep-color
+          color="primary"
+          dense
+          v-model="store.formAddProject.projectTechniques"
+          :options="projectTechniquesOp"
+          type="checkbox"
+          inline
+        />
+      </div>
+
+      <div class="row col-12 q-col-gutter-sm">
+        <div class="col-12 col-sm-2">
+          <q-checkbox
+            keep-color
+            color="primary"
+            dense
+            value="GO_BLACK"
+            label="ไป-กลับ"
+            v-model="store.formAddProject.projectCharacteristics"
+          ></q-checkbox>
+        </div>
+        <div class="col-12 col-sm-3">
+          <q-input
+            dense
+            outlined
+            v-model="store.formAddProject.projectDay"
+            label="จำนวน (วัน)"
+            mask="#"
+            reverse-fill-mask
+          />
+        </div>
+      </div>
+      <div class="row col-12 q-col-gutter-sm">
+        <div class="col-12 col-sm-2">
+          <q-checkbox
+            keep-color
+            color="primary"
+            dense
+            value="HOLD"
+            label="พักค้าง"
+            v-model="store.formAddProject.projectCharacteristics"
+          ></q-checkbox>
+        </div>
+        <div class="col-12 col-sm-3">
+          <q-input
+            dense
+            outlined
+            v-model="store.formAddProject.projectDay"
+            label="จำนวน (วัน)"
+            mask="#"
+            reverse-fill-mask
+          />
+        </div>
+        <div class="col-12 col-sm-3">
+          <q-input
+            dense
+            outlined
+            v-model="store.formAddProject.projectNigth"
+            label="จำนวน (คืน)"
+            mask="#"
+            reverse-fill-mask
+          />
+        </div>
+      </div>
     </div>
     <q-separator />
     <div class="text-right q-pa-sm">
diff --git a/src/modules/15_development/components/scholarship/DetailView.vue b/src/modules/15_development/components/scholarship/DetailView.vue
index f755ac0eb..af180e209 100644
--- a/src/modules/15_development/components/scholarship/DetailView.vue
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@@ -37,9 +37,13 @@ const isStatus = ref<string>("");
 const modalDialogGov = ref<boolean>(false);
 
 const budgetSourceOp = ref<DataOption[]>([
-  { id: "BKK", name: "แหล่งงบประมาณกทม" },
-  { id: "OTHER", name: "แหล่งงบประมาณอื่นๆ" },
+  { id: "BKK", name: "งบประมาณ กทม." },
+  { id: "HOSPITAL", name: "เงินบำรุงโรงพยาบาล" },
+  { id: "FUND", name: "เงินกองทุน" },
+  { id: "SUBSIDY", name: "เงินอุดหนุน" },
+  { id: "OTHER", name: "เงินอื่น ๆ" },
 ]);
+
 const scholarshipTypeOp = ref<DataOption[]>([
   { id: "DOMESTICE", name: "การศึกษาในประเทศ" },
   {
@@ -56,8 +60,11 @@ const scholarshipTypeOp = ref<DataOption[]>([
   },
 ]);
 const fundTypeOp = ref<DataOption[]>([
-  { id: "FUND1", name: "ทุน 1 (ก)(ข)(ค)" },
-  { id: "FUND2", name: "ทุน 2 (ก)(ข)" },
+  { id: "FUND1", name: "ทุน 1 (ก)" },
+  { id: "FUND2", name: "ทุน 1 (ข)" },
+  { id: "FUND3", name: "ทุน 1 (ค)" },
+  { id: "FUND4", name: "ทุน 2" },
+  { id: "FUND5", name: "ทุนส่วนตัว" },
 ]);
 
 const isGov = ref<boolean>(false);
@@ -135,6 +142,8 @@ const formBody = reactive<FormsSholarship>({
   studyAbroadStartDate: null, //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
   studyAbroadEndDate: null, //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
   totalPeriod: "", //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+  planType: "",
+  isNoUseBudget: false,
 });
 
 function fetchDataDetail(id: string) {
@@ -195,6 +204,8 @@ function fetchDataDetail(id: string) {
       formBody.studyAbroadStartDate = data.studyAbroadStartDate;
       formBody.studyAbroadEndDate = data.studyAbroadEndDate;
       formBody.totalPeriod = data.totalPeriod;
+      formBody.planType = data.planType ? data.planType : "";
+      formBody.isNoUseBudget = data.isNoUseBudget ? data.isNoUseBudget : false;
 
       dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
       dataPerson.name = `${data.prefix}${data.firstName}  ${data.lastName}`;
@@ -501,6 +512,25 @@ onMounted(() => {
         </q-card>
       </div>
       <div class="row q-col-gutter-md q-pa-md" v-if="isGov">
+        <div class="col-12">
+          <q-radio
+            v-model="formBody.planType"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="INPLAN"
+            label="ในแผนฯ"
+            dense
+          />
+          <q-radio
+            v-model="formBody.planType"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="OUTPLAN"
+            label="นอกแผนฯ"
+            dense
+            class="q-pl-sm"
+          />
+        </div>
         <div class="col-3">
           <datepicker
             menu-class-name="modalfix"
@@ -561,7 +591,7 @@ onMounted(() => {
             ]"
           />
         </div>
-        <div class="col-6">
+        <div class="col-3">
           <q-input
             dense
             outlined
@@ -577,6 +607,14 @@ onMounted(() => {
             ]"
           />
         </div>
+        <div class="col-3">
+          <q-checkbox
+            keep-color
+            color="primary"
+            v-model="formBody.isNoUseBudget"
+            label="ไม่ใช้งบประมาณ"
+          />
+        </div>
         <div class="col-3">
           <q-input
             dense
diff --git a/src/modules/15_development/interface/request/Other.ts b/src/modules/15_development/interface/request/Other.ts
new file mode 100644
index 000000000..190942bba
--- /dev/null
+++ b/src/modules/15_development/interface/request/Other.ts
@@ -0,0 +1,23 @@
+interface FormData {
+  dateStart: Date | null; //วันที่เริ่มต้น
+  dateEnd: Date | null; //วันที่สิ้นสุด
+  totalDate: number | null; //รวมระยะเวลา (วัน)
+  developmentAddresss: [{ address: string; provinceId: string }]; //ที่อยู่ ,จังหวัด
+  budget: string; //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
+  budgetSub: string;
+  accept: number | string | null; //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
+  receive: number | string | null; //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
+  approved: number | string | null; //จํานวนงบประมาณที่ได้รับอนุมัติ
+  budgetPay: number | string | null; //จํานวนงบประมาณที่จ่ายจริง
+  issues: string; //ประเด็นความเสี่ยง
+  chance: number | null; //โอกาสที่จะเกิด
+  effects: number | null; //ผลกระทบจากการเกิด
+  riskLevel: string; //ระดับความเสี่ยง
+  riskManagement: string; //เเนวทางการบริหารความเสี่ยง
+  expect: string; //ประโยชน์ที่คาดว่าจะได้รับ
+  topicAcademic: string; //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
+  addressAcademic: string; //สถานที่ฝึกอบรม ศึกษาดูงาน
+  provinceActualId: string;
+}
+
+export type { FormData };
diff --git a/src/modules/15_development/interface/request/Scholarship.ts b/src/modules/15_development/interface/request/Scholarship.ts
index 226105b54..df3790cf6 100644
--- a/src/modules/15_development/interface/request/Scholarship.ts
+++ b/src/modules/15_development/interface/request/Scholarship.ts
@@ -49,6 +49,8 @@ interface FormsSholarship {
   studyAbroadStartDate: Date | null; //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
   studyAbroadEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
   totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
+  planType: string; // INPLAN ในแผนฯ, OUTPLAN นอกแผนฯ
+  isNoUseBudget: boolean; //
 }
 
 export type { FormsSholarship };
diff --git a/src/modules/15_development/interface/response/Scholarship.ts b/src/modules/15_development/interface/response/Scholarship.ts
index 7a15508f7..a10895e75 100644
--- a/src/modules/15_development/interface/response/Scholarship.ts
+++ b/src/modules/15_development/interface/response/Scholarship.ts
@@ -63,6 +63,8 @@ interface DataSholarship {
   studyAbroadEndDate: Date | null; //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
   totalPeriod: string; //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
   status: string;
+  planType: string; // INPLAN ในแผนฯ, OUTPLAN นอกแผนฯ
+  isNoUseBudget: boolean; // ไม่ใช้งบประมาณ
 }
 
 export type { DataSholarship, ListSholarship };
diff --git a/src/modules/15_development/store/developmentStore.ts b/src/modules/15_development/store/developmentStore.ts
index 7deb48e07..2629c8ea6 100644
--- a/src/modules/15_development/store/developmentStore.ts
+++ b/src/modules/15_development/store/developmentStore.ts
@@ -40,8 +40,8 @@ export const useDevelopmentDataStore = defineStore(
       approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
       budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
       issues: "", //ประเด็นความเสี่ยง
-      chance: "", //โอกาสที่จะเกิด
-      effects: "", //ผลกระทบจากการเกิด
+      chance: 0, //โอกาสที่จะเกิด
+      effects: 0, //ผลกระทบจากการเกิด
       riskLevel: "", //ระดับความเสี่ยง
       riskManagement: "", //เเนวทางการบริหารความเสี่ยง
       expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
@@ -110,8 +110,8 @@ export const useDevelopmentDataStore = defineStore(
       formAddProject.approved = null;
       formAddProject.budgetPay = null;
       formAddProject.issues = "";
-      formAddProject.chance = "";
-      formAddProject.effects = "";
+      formAddProject.chance = 0;
+      formAddProject.effects = 0;
       formAddProject.riskLevel = "";
       formAddProject.riskManagement = "";
       formAddProject.expect = "";
diff --git a/src/modules/15_development/views/Strategic.vue b/src/modules/15_development/views/Strategic.vue
index 8b92734c9..f2b84560f 100644
--- a/src/modules/15_development/views/Strategic.vue
+++ b/src/modules/15_development/views/Strategic.vue
@@ -1,57 +1,57 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, dialogConfirm, dialogRemove } =
+  useCounterMixin();
+
+const ListMenu = ref<any>([
+  {
+    label: "เพิ่ม",
+    icon: "add",
+    type: "ADD",
+    color: "primary",
+  },
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    type: "EDIT",
+    color: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "DEL",
+    color: "red",
+  },
+]);
 
 const nodes = ref<any>([
   {
     orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
+    level: "0",
     children: [
       {
         orgTreeName: "ยุทธศาสตร์ที่ 1",
+        level: "1",
         children: [
           {
             orgTreeName: "ยุทธศาสตร์ที่ 2",
+            level: "2",
             children: [
               {
                 orgTreeName: "ยุทธศาสตร์ที่ 3",
-                children: [
-                  {
-                    orgTreeName: "ยุทธศาสตร์ที่ 4",
-                    children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
-                  },
-                ],
+                level: "3",
               },
             ],
           },
         ],
       },
-      {
-        orgTreeName: "ยุทธศาสตร์ที่ 1",
-        children: [
-          {
-            orgTreeName: "ยุทธศาสตร์ที่ 2",
-            children: [
-              {
-                orgTreeName: "ยุทธศาสตร์ที่ 3",
-                children: [
-                  {
-                    orgTreeName: "ยุทธศาสตร์ที่ 4",
-                    children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 2",
-    children: [
-      {
-        orgTreeName: "ยุทธศาสตร์ที่ 1",
-        children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
-      },
     ],
   },
 ]);
@@ -62,16 +62,103 @@ const expanded = ref<Array<any>>([]);
 const nodeId = ref<string>("");
 
 function updateSelected(data: any) {
-  console.log(data);
   nodeId.value = data.orgTreeName;
 }
+
+function onClickAction(type: string, data: any = null) {
+  switch (type) {
+    case "ADD":
+      onClickOpenDialog(false, data);
+      break;
+    case "EDIT":
+      onClickOpenDialog(true, data);
+      break;
+    case "DEL":
+      onDelete();
+      break;
+    default:
+      break;
+  }
+}
+
+const modalDialog = ref<boolean>(false);
+const statusEdit = ref<boolean>(false);
+const strategicName = ref<string>("");
+const titleDialog = ref<string>("");
+function onClickOpenDialog(status: boolean = false, data: any = null) {
+  statusEdit.value = status;
+  // if (data) {
+  //   titleDialog.value =
+  //     data.level === "0"
+  //       ? "ยุทธศาสตร์ที่ 1"
+  //       : data.level === "1"
+  //       ? "ยุทธศาสตร์ย่อย"
+  //       : data.level === "2"
+  //       ? ""
+  //       : data.level === "3"
+  //       ? ""
+  //       : "";
+  // } else {
+  //   titleDialog.value = "ยุทธศาสตร์/แผน";
+  // }
+
+  if (status) {
+    strategicName.value = data.orgTreeName;
+    titleDialog.value =
+      data.level === "0"
+        ? "ยุทธศาสตร์"
+        : data.level === "1"
+        ? "ยุทธศาสตร์ที่ 1"
+        : data.level === "2"
+        ? "ยุทธศาสตร์ย่อย"
+        : data.level === "3"
+        ? "กลยุทธ์ที่/เป้าประสงค์ที่"
+        : "";
+  } else {
+    if (data) {
+      titleDialog.value =
+        data.level === "0"
+          ? "ยุทธศาสตร์ 1"
+          : data.level === "1"
+          ? "ยุทธศาสตร์ย่อย"
+          : data.level === "2"
+          ? "กลยุทธ์ที่/เป้าประสงค์ที่"
+          : "";
+    } else {
+      titleDialog.value = "ยุทธศาสตร์";
+    }
+  }
+  modalDialog.value = true;
+}
+
+function closeDialog() {
+  modalDialog.value = false;
+  strategicName.value = "";
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    closeDialog();
+  });
+}
+
+function onDelete() {
+  dialogRemove($q, () => {});
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
   <q-card flat bordered class="q-pa-md">
     <div class="row q-col-gutter-sm q-pl-sm">
       <q-toolbar class="text-primary">
-        <q-btn dense flat round color="primary" icon="add">
+        <q-btn
+          dense
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click.stop="onClickAction('ADD')"
+        >
           <q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
         </q-btn>
 
@@ -102,8 +189,8 @@ function updateSelected(data: any) {
       <template v-slot:default-header="prop">
         <q-item
           clickable
+          @click.stop
           :active="nodeId == prop.node.orgTreeName"
-          @click.stop="updateSelected(prop.node)"
           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"
         >
@@ -112,10 +199,120 @@ function updateSelected(data: any) {
               {{ prop.node.orgTreeName }}
             </div>
           </div>
+          <q-btn
+            flat
+            dense
+            icon="mdi-dots-vertical"
+            class="q-ml-xs"
+            color="grey-13"
+            size="12px"
+            round
+          >
+            <q-menu>
+              <q-list
+                dense
+                v-for="(item, index) in prop.node.level !== '3'
+                  ? ListMenu
+                  : ListMenu.slice(1, 4)"
+                :key="index"
+                style="min-width: 100px"
+              >
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click.stop="onClickAction(item.type, prop.node)"
+                >
+                  <q-item-section avatar style="min-width: 20px">
+                    <q-icon size="17px" :color="item.color" :name="item.icon" />
+                  </q-item-section>
+
+                  <div v-if="item.type === 'ADD'">
+                    <q-item-section v-if="prop.node.level === '0'">
+                      {{ `${item.label}ยุทธศาสตร์ที่ 1` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === '1'">
+                      {{ `${item.label}ยุทธศาสตร์ย่อย` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === '2'">
+                      {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
+                    </q-item-section>
+                  </div>
+
+                  <div v-else-if="item.type === 'EDIT'">
+                    <q-item-section v-if="prop.node.level === '0'">
+                      {{ `${item.label}ยุทธศาสตร์` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === '1'">
+                      {{ `${item.label}ยุทธศาสตร์ที่ 1` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === '2'">
+                      {{ `${item.label}ยุทธศาสตร์ย่อย` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === '3'">
+                      {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
+                    </q-item-section>
+                  </div>
+
+                  <div v-else>
+                    <q-item-section>{{ item.label }}</q-item-section>
+                  </div>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
         </q-item>
       </template>
     </q-tree>
   </q-card>
+
+  <q-dialog v-model="modalDialog" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${
+            statusEdit ? `แก้ไข${titleDialog}` : `เพิ่ม${titleDialog}`
+          }`"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section class="q-pt-none">
+          <div class="row q-pa-md">
+            <div class="col">
+              <q-input
+                dense
+                outlined
+                v-model="strategicName"
+                label="ชื่อยุทธศาสตร์"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณากรอกชื่อยุทธศาสตร์'}`,
+      
+                ]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>