diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index f5a2b8efd..69a0867a6 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -13,4 +13,5 @@ export default {
   
   /** รายการโครงการ*/
   developmentMain: `${development}/main`,
+  developmentMainById: (id: string) => `${development}/main/${id}`,
 };
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 7437487af..f998559b7 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -678,7 +678,39 @@ const menuList = readonly<any[]>([
     activeIcon: "mdi-account-star",
     label: "ประเมินผลการปฏิบัติราชการระดับบุคคล",
     role: "evaluateKPI",
-    path: "KPIMain",
+    children: [
+      {
+        key: 13.1,
+        label: "รอบการประเมิน",
+        path: "KPIRound",
+        role: "evaluateKPI",
+      },
+      {
+        key: 13.2,
+        label: "ตัวชี้วัด",
+        role: "evaluateKPI",
+        children: [
+          {
+            key: 13.21,
+            label: "ตามแผนปฏิบัติราชการประจำปี",
+            path: "KPIIndicatorByPlan",
+            role: "evaluateKPI",
+          },
+          {
+            key: 13.22,
+            label: "ตามหน้าที่ความรับผิดชอบ",
+            path: "KPIIndicatorByRole",
+            role: "evaluateKPI",
+          },
+        ]    
+      },
+      {
+        key: 13.3,
+        label: "สมรรถนะ",
+        path: "KPICompetency",
+        role: "evaluateKPI",
+      },
+    ]
   },
   {
     key: 14,
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
index c8dac4995..202945bb8 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue
@@ -383,7 +383,9 @@ watch(
           <div v-else-if="col.name === 'amountUse'">
             {{
               props.row.amountUse !== null
-                ? props.row.amountUse.toLocaleString()
+                ? props.row.amountUse > 0
+                  ? props.row.amountUse.toLocaleString()
+                  : 0
                 : ""
             }}
             {{
diff --git a/src/modules/14_KPI/router.ts b/src/modules/14_KPI/router.ts
index e59a16a16..5340ce8e3 100644
--- a/src/modules/14_KPI/router.ts
+++ b/src/modules/14_KPI/router.ts
@@ -1,10 +1,43 @@
-const mainPage = () => import("@/modules/14_KPI/views/MainPage.vue");
+const roundPage = () => import("@/modules/14_KPI/views/round.vue");
+const IndicatorByPlan = () => import("@/modules/14_KPI/views/indicatorByPlan.vue");
+const IndicatorByRole = () => import("@/modules/14_KPI/views/indicatorByRole.vue");
+const competencyPage = () => import("@/modules/14_KPI/views/competency.vue");
 
 export default [
   {
     path: "/KPI",
-    name: "KPIMain",
-    component: mainPage,
+    name: "KPIRound",
+    component: roundPage,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
+  {
+    path: "/KPI",
+    name: "KPIIndicatorByPlan",
+    component: IndicatorByPlan,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
+  {
+    path: "/KPI",
+    name: "KPIIndicatorByRole",
+    component: IndicatorByRole,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
+  {
+    path: "/KPI",
+    name: "KPICompetency",
+    component: competencyPage,
     meta: {
       Auth: true,
       Key: [1.1],
diff --git a/src/modules/14_KPI/views/competency.vue b/src/modules/14_KPI/views/competency.vue
new file mode 100644
index 000000000..ddec68619
--- /dev/null
+++ b/src/modules/14_KPI/views/competency.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        สมรรถนะ
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/14_KPI/views/indicatorByPlan.vue b/src/modules/14_KPI/views/indicatorByPlan.vue
new file mode 100644
index 000000000..bc091d4a3
--- /dev/null
+++ b/src/modules/14_KPI/views/indicatorByPlan.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        ตามแผนปฏิบัติราชการประจำปี
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/14_KPI/views/indicatorByRole.vue b/src/modules/14_KPI/views/indicatorByRole.vue
new file mode 100644
index 000000000..ba4eeccc6
--- /dev/null
+++ b/src/modules/14_KPI/views/indicatorByRole.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        ตามหน้าที่ความรับผิดชอบ
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/14_KPI/views/MainPage.vue b/src/modules/14_KPI/views/round.vue
similarity index 98%
rename from src/modules/14_KPI/views/MainPage.vue
rename to src/modules/14_KPI/views/round.vue
index 61f395a65..2aacf2c8f 100644
--- a/src/modules/14_KPI/views/MainPage.vue
+++ b/src/modules/14_KPI/views/round.vue
@@ -79,10 +79,10 @@ const itemMenu = ref<any>([
 ]);
 
 const roundOp = ref<any>([
-  { id: "1", label: "รอบเมษา" },
+  { id: "1", label: "รอบเมษายน" },
   {
     id: "2",
-    label: "รอบตุลา",
+    label: "รอบตุลาคม",
   },
 ]);
 
@@ -364,7 +364,7 @@ onMounted(() => {
     <q-card style="width: 350px">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
-          :tittle="'เพิ่มรอบการประเมินผลกานปฏิบัติหน้าที่ราชการ'"
+          :tittle="'เพิ่มรอบการประเมินผลการปฏิบัติหน้าที่ราชการ'"
           :close="closeDialog"
         />
         <q-separator />
@@ -385,6 +385,7 @@ onMounted(() => {
                 map-options
                 input-class="text-red"
                 label="รอบการประเมิน"
+                class="inputgreen"
                 :rules="[
           (val:string) =>
             !!val || `${'กรุณาเลือกรอบการประเมิน'}`,
@@ -414,6 +415,7 @@ onMounted(() => {
                     "
                     :label="`${'วันเริ่มต้น'}`"
                     hide-bottom-space
+                    class="inputgreen"
                     :rules="[
       (val:string) =>
         !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`,
@@ -453,6 +455,7 @@ onMounted(() => {
                       formData.dateEnd ? date2Thai(formData.dateEnd) : null
                     "
                     :label="`${'วันสิ้นสุด'}`"
+                    class="inputgreen"
                     hide-bottom-space
                     :rules="[
       (val:string) =>
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 90d4dceeb..1da06b539 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -7,8 +7,10 @@ import type { FormBasicinfo } from "@/modules/15_development/interface/request/M
 import DialogSelectAgency from "@/modules/15_development/components/DialogSelectAgency.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 const $q = useQuasar();
+const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
 const formData = reactive<FormBasicinfo>({
@@ -19,14 +21,6 @@ const formData = reactive<FormBasicinfo>({
   objective: "",
 });
 
-const options = ref<any>([
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-]);
-function onSubmit() {
-  dialogConfirm($q, () => {});
-}
-
 const modalDialogSelect = ref<boolean>(false);
 function selectAgency() {
   modalDialogSelect.value = true;
@@ -34,111 +28,99 @@ function selectAgency() {
 function updateAgency(name: string) {
   formData.org = name;
 }
-
-onMounted(() => {
-  console.log("ข้อมูลเบื้องต้น");
-});
 </script>
 <template>
   <!-- <q-form greedy @submit.prevent @validation-success="onSubmit"> -->
-    <div class="row col-12 q-col-gutter-md q-pa-md">
-      <div class="col-xs-6 col-sm-2 col-md-2">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formData.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
-              lazy-rules
-              outlined
-              :model-value="Number(formData.year) + 543"
-              :label="`${'ปีงบประมาณ'}`"
-            >
-              <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-xs-10 col-sm-10 col-md-10">
-        <q-input
-          dense
-          outlined
-          v-model="formData.org"
-          label="ชื่อหน่วยงานที่รับผิดชอบ"
-          hide-bottom-space
-          lazy-rules
-          @click="selectAgency"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
-          ]"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.projectName"
-          label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
-          rows="6"
-          type="textarea"
-          hide-bottom-space
-          :rules="[
+  <div class="row col-12 q-col-gutter-md q-pa-md">
+    <div class="col-xs-6 col-sm-2 col-md-2">
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="store.formAddProject.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
+            lazy-rules
+            outlined
+            :model-value="Number(store.formAddProject.year) + 543"
+            :label="`${'ปีงบประมาณ'}`"
+          >
+            <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-xs-10 col-sm-10 col-md-10">
+      <q-input
+        dense
+        outlined
+        v-model="formData.org"
+        label="ชื่อหน่วยงานที่รับผิดชอบ"
+        hide-bottom-space
+        lazy-rules
+        @click="selectAgency"
+      />
+      <!-- :rules="[
+        (val:string) =>
+          !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
+      ]" -->
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.projectName"
+        label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
+        rows="6"
+        type="textarea"
+        hide-bottom-space
+        :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
 
           ]"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.reason"
-          label="หลักการและเหตุผล"
-          rows="6"
-          hide-bottom-space
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกหลักการและเหตุผล'}`,
-          ]"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-12 col-md-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.objective"
-          label="วัตถุประสงค์"
-          rows="6"
-          hide-bottom-space
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกวัตถุประสงค์'}`,
-          ]"
-        />
-      </div>
+      />
     </div>
+    <div class="col-xs-12 col-sm-12 col-md-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.reason"
+        label="หลักการและเหตุผล"
+        rows="6"
+        hide-bottom-space
+        type="textarea"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.objective"
+        label="วัตถุประสงค์"
+        rows="6"
+        hide-bottom-space
+        type="textarea"
+      />
+    </div>
+  </div>
 
-    <!-- <q-separator />
+  <!-- <q-separator />
     <div class="text-right q-pa-sm">
       <q-btn
         dense
diff --git a/src/modules/15_development/components/FollowResult.vue b/src/modules/15_development/components/FollowResult.vue
index a4df9db51..4ece0fca5 100644
--- a/src/modules/15_development/components/FollowResult.vue
+++ b/src/modules/15_development/components/FollowResult.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watchEffect } from "vue";
 import { useQuasar } from "quasar";
 
 import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
@@ -8,9 +8,11 @@ import type {
   DataOptionCheckBox,
 } from "@/modules/15_development/interface/index/Main";
 
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
+const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
 const formData = reactive<FormFollowResult>({
@@ -22,7 +24,7 @@ const formData = reactive<FormFollowResult>({
   results: "",
   obstacles: "",
   suggestions: "",
-  project: '',
+  project: "",
 });
 
 const group = ref<any[]>([]);
@@ -42,11 +44,11 @@ const metricTypeOp = ref<DataOption[]>([
 ]);
 const projectOp = ref<DataOption[]>([
   {
-    id: "true",
+    id: "OFFER",
     name: "โครงการที่ เสนอขอ TN",
   },
   {
-    id: "false",
+    id: "NOOFFER",
     name: "โครงการที่ ไม่ เสนอขอ TN",
   },
 ]);
@@ -54,193 +56,188 @@ const projectOp = ref<DataOption[]>([
 const optionsTNFirst = ref<DataOptionCheckBox[]>([
   {
     label: "ผ่านการพิจารณา ได้รับการจัดงบประมาณตามข้อบัญญัติ",
-    value: "id1",
+    value: store.formAddProject.isPassAllocate,
   },
   {
     label:
       "ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: "id2",
+    value: store.formAddProject.isPassNoAllocate,
   },
   {
     label: "ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: "id3",
+    value: store.formAddProject.isNoPass,
   },
 ]);
 const optionsTNSecon = ref<DataOptionCheckBox[]>([
   {
     label: "แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ",
-    value: "id1",
+    value: store.formAddProject.isBudget,
   },
   {
     label: "แต่ได้รับการจัดสรรเงินนอกงบประมาณ",
-    value: "id2",
+    value: store.formAddProject.isOutBudget,
   },
 ]);
 
-const options = ref<any>([
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
-  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-]);
-function onSubmit() {
-  dialogConfirm($q, () => {});
-}
+watchEffect(() => {});
 
 onMounted(() => {
-  console.log("ข้อมูลเบื้องต้น");
+  optionsTNFirst.value.forEach((checkbox, index) => {
+    if (index === 0) checkbox.value = store.formAddProject.isPassAllocate;
+    else if (index === 1)
+      checkbox.value = store.formAddProject.isPassNoAllocate;
+    else if (index === 2) checkbox.value = store.formAddProject.isNoPass;
+  });
 });
 </script>
 <template>
+  <div class="row q-pa-md q-col-gutter-sm">
+    <div class="col-12">
+      <span class="text-weight-medium text-body1">ตัวชี้วัดความสำเร็จ</span>
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <!-- <q-select
+        dense
+        outlined
+        label="ประเภทตัวชี้วัด"
+        v-model="store.formAddProject.metricType"
+        :options="metricTypeOp"
+        option-label="name"
+        option-value="id"
+        hide-bottom-space
+      /> -->
+      <q-input
+        dense
+        outlined
+        label="ประเภทตัวชี้วัด"
+        v-model="store.formAddProject.metricType"
+        hide-bottom-space
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <q-input
+        dense
+        outlined
+        label="ตัวชี้วัด"
+        v-model="store.formAddProject.indicators"
+        hide-bottom-space
+      />
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <q-input
+        dense
+        outlined
+        label="เป้าหมาย"
+        v-model="store.formAddProject.target"
+        hide-bottom-space
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.calculation"
+        hide-bottom-space
+        label="วิธีการคำนวณ/เครื่องมือ"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.measuRement"
+        hide-bottom-space
+        label="ระยะเวลาวัดผล"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.results"
+        hide-bottom-space
+        label="ผลการดำเนิน"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.obstacles"
+        hide-bottom-space
+        label="ปัญหาอุปสรรค"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.suggestions"
+        hide-bottom-space
+        label="ข้อเสนอเเนะ"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <span class="text-weight-medium text-body1"
+        >ประเภทของผลการพิจารณาความเหมาะสมโครงการ</span
+      >
+    </div>
+    <div class="col-12 col-sm-6 col-md-4">
+      <q-select
+        dense
+        outlined
+        label="ประเภทโครงการ"
+        v-model="store.formAddProject.project"
+        :options="projectOp"
+        option-label="name"
+        option-value="id"
+        hide-bottom-space
+        map-options
+        emit-value
+      />
+    </div>
+    <div v-if="store.formAddProject.project !== ''" class="col-12">
+      <div class="row" v-if="store.formAddProject.project == 'OFFER'">
+        <div class="col-12">
+          <q-checkbox
+            v-model="store.formAddProject.isPassAllocate"
+            label="ผ่านการพิจารณา ได้รับการจัดงบประมาณตามข้อบัญญัติ"
+          />
+        </div>
+        <div class="col-12">
+          <q-checkbox
+            v-model="store.formAddProject.isPassNoAllocate"
+            label="ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
+          />
+        </div>
 
-    <div class="row q-pa-md q-col-gutter-sm">
-      <div class="col-12">
-        <span class="text-weight-medium text-body1">ตัวชี้วัดความสำเร็จ</span>
+        <div class="col-12">
+          <q-checkbox
+            v-model="store.formAddProject.isNoPass"
+            label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
+          />
+        </div>
       </div>
-      <div class="col-12 col-sm-6 col-md-4">
-        <q-select
-          dense
-          outlined
-          label="ประเภทตัวชี้วัด"
-          v-model="formData.metricType"
-          :options="metricTypeOp"
-          option-label="name"
-          option-value="id"
-          hide-bottom-space
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกประเภทตัวชี้วัด'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12 col-sm-6 col-md-4">
-        <q-input
-          dense
-          outlined
-          label="ตัวชี้วัด"
-          v-model="formData.indicators"
-          hide-bottom-space
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกตัวชี้วัด'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12 col-sm-6 col-md-4">
-        <q-input
-          dense
-          outlined
-          label="เป้าหมาย"
-          v-model="formData.target"
-          hide-bottom-space
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกเป้าหมาย'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.calculation"
-          hide-bottom-space
-          label="วิธีการคำนวณ/เครื่องมือ"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกวิธีการคำนวณ/เครื่องมือ'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.measuRement"
-          hide-bottom-space
-          label="ระยะเวลาวัดผล"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกระยะเวลาวัดผล'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.results"
-          hide-bottom-space
-          label="ผลการดำเนิน"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกผลการดำเนิน'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.obstacles"
-          hide-bottom-space
-          label="ปัญหาอุปสรรค"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกปัญหาอุปสรรค'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.suggestions"
-          hide-bottom-space
-          label="ข้อเสนอเเนะ"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกข้อเสนอเเนะ'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <span class="text-weight-medium text-body1"
-          >ประเภทของผลการพิจารณาความเหมาะสมโครงการ</span
-        >
-      </div>
-      <div class="col-12 col-sm-6 col-md-4">
-        <q-select
-          dense
-          outlined
-          label="ประเภทโครงการ"
-          v-model="formData.project"
-          :options="projectOp"
-          option-label="name"
-          option-value="id"
-          hide-bottom-space
-          map-options
-          emit-value
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณาเลือกประเภทโครงการ'}`,
-          ]"
-        />
-      </div>
-      <div v-if="formData.project !== ''" class="col-12">
-        <q-option-group
-          :options="
-            formData.project !== 'false' ? optionsTNFirst : optionsTNSecon
-          "
-          type="checkbox"
-          v-model="group"
-        />
+      <div class="row" v-else>
+        <div class="col-12">
+          <q-checkbox
+            v-model="store.formAddProject.isBudget"
+            label="แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
+          />
+        </div>
+        <div class="col-12">
+          <q-checkbox
+            v-model="store.formAddProject.isOutBudget"
+            label="แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
+          />
+        </div>
       </div>
     </div>
-
-
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index caa909f52..77ed8de39 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
 import Target from "@/modules/15_development/components/Target.vue";
@@ -10,18 +12,181 @@ import FollowResult from "@/modules/15_development/components/FollowResult.vue";
 import Other from "@/modules/15_development/components/Other.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
+const store = useDevelopmentDataStore();
+const {
+  success,
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+} = useCounterMixin();
 
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
+const projectId = ref<string | null>(
+  route.params.id ? route.params.id.toLocaleString() : null
+);
 const tab = ref<string>("BasicInfo");
 
-function onSubmit() {
-  dialogConfirm($q, () => {});
+function fetchDataProject(id: string) {
+  showLoader();
+  http
+    .get(config.API.developmentMainById(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      /** ข้อมูลเบื้องต้น*/
+      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,
+        position: e.position,
+        posTypePlannedId: e.posTypePlannedId,
+        posLevelPlannedId: e.posLevelPlannedId,
+        type: e.type,
+        amount: e.amount,
+      }));
+      const plannedPeoples = data.plannedPeoples.map((e: any) => ({
+        groupTarget: e.groupTarget,
+        amount: e.amount,
+      }));
+      store.formAddProject.plannedGoals = plannedGoals;
+      store.formAddProject.plannedPeoples = plannedPeoples;
+
+      const actualGoals = data.actualGoals.map((e: any) => ({
+        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: any) => ({
+        groupTarget: e.groupTarget,
+        amount: e.amount,
+      }));
+      store.formAddProject.actualGoals = actualGoals;
+      store.formAddProject.actualPeoples = actualPeoples;
+
+      /** การติดตามผลดารประเมิน*/
+      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;
+      store.formAddProject.provinceId = data.provinceId;
+      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 = data.chance;
+      store.formAddProject.effects = 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.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();
+      }
+    });
+  }
+}
+
+onMounted(() => {
+  projectId.value && fetchDataProject(projectId.value);
+});
+
+onUnmounted(() => {
+  store.clearFormAddProject();
+});
 </script>
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
@@ -33,7 +198,7 @@ function onSubmit() {
         class="q-mr-sm"
         icon="mdi-arrow-left"
         color="primary"
-        @click="router.go(-1)"
+        @click="router.push('/development')"
       />
       {{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }}
       <q-space />
diff --git a/src/modules/15_development/components/Other.vue b/src/modules/15_development/components/Other.vue
index 47f43b272..12daf60f0 100644
--- a/src/modules/15_development/components/Other.vue
+++ b/src/modules/15_development/components/Other.vue
@@ -2,14 +2,17 @@
 import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { FormFollowOther } from "@/modules/15_development/interface/request/Main";
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
 
 import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 const $q = useQuasar();
+const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm, date2Thai, messageError } =
   useCounterMixin();
 
@@ -24,29 +27,29 @@ const formData = reactive<FormFollowOther>({
   receive: null,
   approved: null,
   budgetPay: null,
-  issues:'',
-  chance:'',
-  effects:'',
-  riskLevel:'',
-  riskManagement:'',
-  benefits:'',
-  topicsIssues:'',
-  trainingStudy:'',
+  issues: "",
+  chance: "",
+  effects: "",
+  riskLevel: "",
+  riskManagement: "",
+  benefits: "",
+  topicsIssues: "",
+  trainingStudy: "",
 });
 
 const provinceOp = ref<DataOption[]>([]);
 const budgetOp = ref<DataOption[]>([
   {
-    id: "id1",
-    name: "งบ1",
+    id: "REGULATIONBUDGET",
+    name: "งบตามข้อบัญญัติ",
   },
   {
-    id: "id2",
-    name: "งบ2",
+    id: "BANGKOKBUDGET",
+    name: "งบประมาณกรุงเทพมหานคร",
   },
   {
-    id: "id3",
-    name: "งบ3",
+    id: "OUTSIDEBUDGET",
+    name: "เงินนอกงบประมาณ",
   },
 ]);
 
@@ -82,338 +85,272 @@ onMounted(() => {
 });
 </script>
 <template>
+  <div class="row q-pa-md q-col-gutter-sm">
+    <div class="col-12">
+      <span class="text-weight-medium text-body1">ระยะเวลาดำเนินการ</span>
+    </div>
+    <div class="col-12 col-sm-6 col-md-3">
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="store.formAddProject.dateStart"
+        :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
+            :model-value="
+              store.formAddProject.dateStart
+                ? date2Thai(store.formAddProject.dateStart)
+                : null
+            "
+            :label="`${'วันที่เริ่มต้น'}`"
+          >
+            <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-12 col-sm-6 col-md-3">
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="store.formAddProject.dateEnd"
+        :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
+            :model-value="
+              store.formAddProject.dateEnd
+                ? date2Thai(store.formAddProject.dateEnd)
+                : null
+            "
+            :label="`${'วันที่สิ้นสุด'}`"
+          >
+            <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-12 col-sm-6 col-md-3">
+      <q-input
+        dense
+        outlined
+        label="รวมระยะเวลา (วัน)"
+        v-model="store.formAddProject.totalDate"
+        mask="#"
+        reverse-fill-mask
+      />
+    </div>
 
-    <div class="row q-pa-md q-col-gutter-sm">
-      <div class="col-12">
-        <span class="text-weight-medium text-body1">ระยะเวลาดำเนินการ</span>
-      </div>
-      <div class="col-12 col-sm-6 col-md-3">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formData.dateStart"
-          :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
-              :model-value="
-                formData.dateStart ? date2Thai(formData.dateStart) : 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-12 col-sm-6 col-md-3">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formData.dateEnd"
-          :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
-              :model-value="
-                formData.dateEnd ? date2Thai(formData.dateEnd) : 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-12 col-sm-6 col-md-3">
-        <q-input
-          dense
-          outlined
-          label="รวมระยะเวลา (วัน)"
-          v-model="formData.totalDate"
-        />
-      </div>
-
-      
-      <div class="col-12 q-mt-md">
-        <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
-      </div>
-      <div class="col-8">
-        <q-input
-          outlined
-          dense
-          v-model="formData.address"
-          hide-bottom-space
-          label="ที่อยู่"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกที่อยู่'}`,
-          ]"
-        />
-      </div>
-      <div class="col-4">
-        <q-select
-          outlined
-          dense
-          v-model="formData.province"
-          hide-bottom-space
-          label="จังหวัด"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณาเลือกจังหวัด'}`,
-          ]"
-          :options="provinceOp"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-        />
-      </div>
-      <div class="col-12 q-mt-md">
-        <span class="text-weight-medium text-body1">งบประมาณ</span>
-      </div>
-      <div class="col-4">
-        <q-select
-          outlined
-          dense
-          v-model="formData.budget"
-          hide-bottom-space
-          label="ประเภทงบประมาณ"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณาเลือกประเภทงบประมาณ'}`,
-          ]"
-          :options="budgetOp"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-        />
-      </div>
-      <div class="col-12">
-        <div class="row q-col-gutter-x-sm">
-          <div class="col-3">
-            <q-input
-              outlined
-              dense
-              v-model="formData.accept"
-              hide-bottom-space
-              label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
-              mask="###,###,###,###"
-                reverse-fill-mask
-              :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ขอรับการจัดสรรฯ'}`,
-          ]"
-            />
-          </div>
-          <div class="col-3">
-            <q-input
-              outlined
-              dense
-              v-model="formData.receive"
-              hide-bottom-space
-              mask="###,###,###,###"
-                reverse-fill-mask
-              label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
-              :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ได้รับการจัดสรรฯ'}`,
-          ]"
-            />
-          </div>
-          <div class="col-3">
-            <q-input
-              outlined
-              dense
-              v-model="formData.approved"
-              hide-bottom-space
-              mask="###,###,###,###"
-                reverse-fill-mask
-              label="จํานวนงบประมาณที่ได้รับอนุมัติ"
-              :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกจํานวนงบประมาณที่ได้รับอนุมัติ'}`,
-          ]"
-            />
-          </div>
-          <div class="col-3">
-            <q-input
-              outlined
-              dense
-              v-model="formData.budgetPay"
-              hide-bottom-space
-              mask="###,###,###,###"
-                reverse-fill-mask
-              label="จํานวนงบประมาณที่จ่ายจริง"
-              :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกจํานวนงบประมาณที่จ่ายจริง'}`,
-          ]"
-            />
-          </div>
+    <div class="col-12 q-mt-md">
+      <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
+    </div>
+    <div class="col-8">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.address"
+        label="ที่อยู่"
+      />
+    </div>
+    <div class="col-4">
+      <q-select
+        outlined
+        dense
+        v-model="store.formAddProject.provinceId"
+        label="จังหวัด"
+        :options="provinceOp"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+    <div class="col-12 q-mt-md">
+      <span class="text-weight-medium text-body1">งบประมาณ</span>
+    </div>
+    <div class="col-4">
+      <q-select
+        outlined
+        dense
+        v-model="store.formAddProject.budget"
+        label="ประเภทงบประมาณ"
+        :options="budgetOp"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+    <div class="col-12">
+      <div class="row q-col-gutter-x-sm">
+        <div class="col-3">
+          <q-input
+            outlined
+            dense
+            v-model="store.formAddProject.accept"
+            label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
+            mask="###,###,###,###,###"
+            reverse-fill-mask
+          />
+        </div>
+        <div class="col-3">
+          <q-input
+            outlined
+            dense
+            v-model="store.formAddProject.receive"
+            mask="###,###,###,###,###"
+            reverse-fill-mask
+            label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
+          />
+        </div>
+        <div class="col-3">
+          <q-input
+            outlined
+            dense
+            v-model="store.formAddProject.approved"
+            hide-bottom-space
+            mask="###,###,###,###,###"
+            label="จํานวนงบประมาณที่ได้รับอนุมัติ"
+            reverse-fill-mask
+          />
+        </div>
+        <div class="col-3">
+          <q-input
+            outlined
+            dense
+            v-model="store.formAddProject.budgetPay"
+            mask="###,###,###,###,###"
+            reverse-fill-mask
+            label="จํานวนงบประมาณที่จ่ายจริง"
+          />
         </div>
-      </div>
-
-      <div class="col-12 q-mt-md">
-        <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
-      </div>
-
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.issues"
-          hide-bottom-space
-          label="ประเด็นความเสี่ยง"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกประเด็นความเสี่ยง'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.chance"
-          hide-bottom-space
-          label="โอกาศที่จะเกิด"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกโอกาศที่จะเกิด'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.effects"
-          hide-bottom-space
-          label="ผลกระทบจากการเกิด"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกผลกระทบจากการเกิด'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.riskLevel"
-          hide-bottom-space
-          label="ระดับความเสี่ยง"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกระดับความเสี่ยง'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.riskManagement"
-          hide-bottom-space
-          label="เเนวทางการบริหารความเสี่ยง"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกเเนวทางการบริหารความเสี่ยง'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12 q-mt-md">
-        <span class="text-weight-medium text-body1">ประโยชน์ที่คาดว่าจะได้รับ</span>
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.riskManagement"
-          hide-bottom-space
-          label="ประโยชน์ที่คาดว่าจะได้รับ"
-          type="textarea"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกประโยชน์ที่คาดว่าจะได้รับ'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12 q-mt-md">
-        <span class="text-weight-medium text-body1">ข้อมูลด้านวิชาการ</span>
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.riskManagement"
-          hide-bottom-space
-          label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกหัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน'}`,
-          ]"
-        />
-      </div>
-      <div class="col-12">
-        <q-input
-          outlined
-          dense
-          v-model="formData.riskManagement"
-          hide-bottom-space
-          label="สถานที่ฝึกอบรม ศึกษาดูงาน"
-          :rules="[
-            (val:string) =>
-              !!val || `${'กรุณากรอกสถานที่ฝึกอบรม ศึกษาดูงาน'}`,
-          ]"
-        />
       </div>
     </div>
 
+    <div class="col-12 q-mt-md">
+      <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
+    </div>
+
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.issues"
+        label="ประเด็นความเสี่ยง"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.chance"
+        label="โอกาสที่จะเกิด"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.effects"
+        label="ผลกระทบจากการเกิด"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.riskLevel"
+        label="ระดับความเสี่ยง"
+      />
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.riskManagement"
+        label="เเนวทางการบริหารความเสี่ยง"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12 q-mt-md">
+      <span class="text-weight-medium text-body1"
+        >ประโยชน์ที่คาดว่าจะได้รับ</span
+      >
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.expect"
+        label="ประโยชน์ที่คาดว่าจะได้รับ"
+        type="textarea"
+      />
+    </div>
+    <div class="col-12 q-mt-md">
+      <span class="text-weight-medium text-body1">ข้อมูลด้านวิชาการ</span>
+    </div>
+    <div class="col-12">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.topicAcademic"
+        label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
+      />
+    </div>
+    <div class="col-9">
+      <q-input
+        outlined
+        dense
+        v-model="store.formAddProject.addressAcademic"
+        label="สถานที่ฝึกอบรม ศึกษาดูงาน"
+      />
+    </div>
+    <div class="col-3">
+      <q-select
+        outlined
+        dense
+        v-model="store.formAddProject.provinceActualId"
+        label="จังหวัด(ข้อมูลวิชาการ)"
+        :options="provinceOp"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index ffa32f7f0..9d77d1126 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -17,9 +17,11 @@ import type {
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
+const store = useDevelopmentDataStore();
 const {
   showLoader,
   hideLoader,
@@ -29,7 +31,7 @@ const {
   messageError,
 } = useCounterMixin();
 
-const columnsGroup = ref<QTableProps["columns"]>([
+const columnsPlannedGoals = ref<QTableProps["columns"]>([
   {
     name: "groupTarget",
     align: "left",
@@ -38,15 +40,17 @@ const columnsGroup = ref<QTableProps["columns"]>([
     field: "groupTarget",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => convertNameGoals(val),
   },
   {
-    name: "type",
+    name: "posTypePlannedId",
     align: "left",
     label: "ประเภท",
     sortable: true,
-    field: "type",
+    field: "posTypePlannedId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => convertTypeGoals(val),
   },
 
   {
@@ -59,15 +63,50 @@ const columnsGroup = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
+const columnsActualGoals = ref<QTableProps["columns"]>([
+  {
+    name: "groupTarget",
+    align: "left",
+    label: "กลุ่มเป้าหมาย ",
+    sortable: true,
+    field: "groupTarget",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => convertNameGoals(val),
+  },
+  {
+    name: "posTypeActualId",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "posTypeActualId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => convertTypeGoals(val),
+  },
+
+  {
+    name: "amount",
+    align: "left",
+    label: "จำนวน(คน)",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
 const columnsRelated = ref<QTableProps["columns"]>([
   {
-    name: "related",
+    name: "groupTarget",
     align: "left",
     label: "ผู้เกี่ยวข้อง ",
     sortable: true,
-    field: "related",
+    field: "groupTarget",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => convertNamePeoples(val),
   },
 
   {
@@ -81,40 +120,32 @@ const columnsRelated = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows1 = ref<any>([
-  {
-    groupTarget: "ข้าราชการ",
-    type: "บริหาร",
-    amount: 20,
-  },
-]);
-const rows2 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
-const rows3 = ref<any>([
-  {
-    groupTarget: "ข้าราชการ",
-    type: "บริหาร",
-    amount: 20,
-  },
-]);
-const rows4 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
-const options = ref<any>([
-  // "ข้าราชการกรุงเทพมหานคร",
-  // "ข้าราชการกรุงเทพมหานครสามัญ",
-  // "เจ้าหน้าที่ดำเนิดการ",
+const plannedGoals = ref<any>([]);
+const plannedPeoples = ref<any>([]);
+const actualGoals = ref<any>([]);
+const actualPeoples = ref<any>([]);
+
+const peoplesOp = ref<DataOption[]>([
+  { id: "OPERATOR", name: "เจ้าหน้าที่ดําเนินการ" },
+  { id: "LECTURER", name: "วิทยากร" },
+  { id: "OBSERVER", name: "ผู้สังเกตการณ์" },
 ]);
 
 const groupOp = ref<DataOption[]>([
-  { id: "1", name: "ข้าราชการกรุงเทพมหานคร" },
-  { id: "2", name: "บุคลากรกรุงเทพมหานคร" },
-  { id: "3", name: "บุคคลภายนอก" },
+  { id: "OFFICER", name: "ข้าราชการกรุงเทพมหานคร" },
+  { id: "PERSONNEL", name: "บุคลากรกรุงเทพมหานคร" },
+  { id: "OUTSIDERS", name: "บุคคลภายนอก" },
 ]);
 const groupSubOp = ref<DataOption[]>([
-  { id: "1", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
-  { id: "2", name: "ข้าราชการครู" },
+  { id: "OFFICER", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
+  { id: "TEACHER", name: "ข้าราชการครู" },
+  { id: "EMPLOYEE", name: "กรุงเทพมหานคร(ลูกจ้างประจำ ลูกจ้างชั่วคราว)" },
+  { id: "EDUCATIONAL", name: "บุคลากรทางการศึกษากรุงเทพมหานคร" },
 ]);
 
 const modalGroupTarget = ref<boolean>(false);
 const modalRelate = ref<boolean>(false);
+const isTarget = ref<string>("");
 
 const formGroupTarget = reactive<FormGroupTarget>({
   groupTarget: "",
@@ -154,10 +185,10 @@ function fetchType() {
   }
 }
 
-function onClickOpenDialog(type: string) {
+function onClickOpenDialog(type: string, target: string) {
+  isTarget.value = target;
   if (type === "group") {
     modalGroupTarget.value = true;
-    fetchType();
   } else {
     modalRelate.value = true;
   }
@@ -165,20 +196,88 @@ function onClickOpenDialog(type: string) {
 
 function onSubmitGroup() {
   dialogConfirm($q, () => {
-    success($q, "บันทึกข้อมูลสำเร็จ");
-    onClickCloseDialog();
+    if (isTarget.value === "planned") {
+      const data = [];
+      data.push(formGroupTarget);
+      const list = data.map((e) => ({
+        groupTarget: e.groupTarget,
+        groupTargetSub: e.groupTargetSub,
+        position: e.position,
+        posTypePlannedId: e.posType,
+        posLevelPlannedId: e.level,
+        type: e.type,
+        amount: Number(e.amount),
+      }));
+      plannedGoals.value.push(...list);
+      store.formAddProject.plannedGoals = plannedGoals.value;
+    } else {
+      const data = [];
+      data.push(formGroupTarget);
+      const list = data.map((e) => ({
+        groupTarget: e.groupTarget,
+        groupTargetSub: e.groupTargetSub,
+        position: e.position,
+        posTypeActualId: e.posType,
+        posLevelActualId: e.level,
+        type: e.type,
+        amount: Number(e.amount),
+      }));
+      actualGoals.value.push(...list);
+      store.formAddProject.actualGoals = actualGoals.value;
+    }
+    setTimeout(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      onClickCloseDialog();
+    }, 500);
   });
 }
 
 function onSubmitRelate() {
   dialogConfirm($q, () => {
     success($q, "บันทึกข้อมูลสำเร็จ");
+    if (isTarget.value === "planned") {
+      const data = [];
+      data.push(formGroupRelate);
+      const list = data.map((e) => ({
+        groupTarget: e.relate,
+        amount: Number(e.amount),
+      }));
+      plannedPeoples.value.push(...list);
+      store.formAddProject.plannedPeoples = plannedPeoples.value;
+    } else {
+      const data = [];
+      data.push(formGroupRelate);
+      const list = data.map((e) => ({
+        groupTarget: e.relate,
+        amount: Number(e.amount),
+      }));
+      actualPeoples.value.push(...list);
+      store.formAddProject.actualPeoples = actualPeoples.value;
+    }
     onClickCloseDialog();
   });
 }
 
-function onclickDelete() {
+function onclickDelete(index: number, type: string) {
   dialogRemove($q, () => {
+    switch (type) {
+      case "plannedGoals":
+        plannedGoals.value.splice(index, 1);
+        break;
+      case "plannedPeoples":
+        plannedPeoples.value.splice(index, 1);
+        break;
+      case "actualGoals":
+        actualGoals.value.splice(index, 1);
+        break;
+      case "actualPeoples":
+        actualPeoples.value.splice(index, 1);
+        break;
+
+      default:
+        break;
+    }
+
     success($q, "ลบข้อมูลสำเร็จ");
   });
 }
@@ -211,8 +310,47 @@ function updatePosTypeName(id: string) {
   formGroupTarget.level = "";
 }
 
+function updateGroupTarget(val: string) {
+  if (val === "OUTSIDERS") {
+    formGroupTarget.groupTargetSub = "NONE";
+    formGroupTarget.position = "";
+    formGroupTarget.posType = null;
+    formGroupTarget.level = null;
+  } else formGroupTarget.groupTargetSub = "";
+}
+
+function convertNameGoals(id: string) {
+  const data = groupOp.value.find((e: DataOption) => e.id === id);
+  return data && data?.name;
+}
+
+function convertNamePeoples(id: string) {
+  const data = peoplesOp.value.find((e: DataOption) => e.id === id);
+  return data && data?.name;
+}
+
+function convertTypeGoals(id: string) {
+  const data = posTypeMain.value.find((e: ResGroup) => e.id === id);
+  return data && data?.posTypeName;
+}
+
 onMounted(() => {
-  console.log("เป้าหมาย");
+  fetchType();
+  plannedGoals.value = store.formAddProject.plannedGoals
+    ? store.formAddProject.plannedGoals
+    : [];
+
+  plannedPeoples.value = store.formAddProject.plannedPeoples
+    ? store.formAddProject.plannedPeoples
+    : [];
+
+  actualGoals.value = store.formAddProject.actualGoals
+    ? store.formAddProject.actualGoals
+    : [];
+
+  actualPeoples.value = store.formAddProject.actualPeoples
+    ? store.formAddProject.actualPeoples
+    : [];
 });
 </script>
 <template>
@@ -223,13 +361,17 @@ onMounted(() => {
       <q-btn flat round dense icon="add" color="primary">
         <q-menu>
           <q-list style="min-width: 100px">
-            <q-item clickable v-close-popup @click="onClickOpenDialog('group')">
+            <q-item
+              clickable
+              v-close-popup
+              @click="onClickOpenDialog('group', 'planned')"
+            >
               <q-item-section>กลุ่มเป้าหมาย</q-item-section>
             </q-item>
             <q-item
               clickable
               v-close-popup
-              @click="onClickOpenDialog('relate')"
+              @click="onClickOpenDialog('relate', 'planned')"
             >
               <q-item-section>ผู้เกี่ยวข้อง</q-item-section>
             </q-item>
@@ -245,8 +387,8 @@ onMounted(() => {
         <d-table
           for="table"
           ref="table"
-          :columns="columnsGroup"
-          :rows="rows1"
+          :columns="columnsPlannedGoals"
+          :rows="plannedGoals"
           row-key="id"
           flat
           bordered
@@ -276,7 +418,7 @@ onMounted(() => {
                   dense
                   icon="delete"
                   color="red"
-                  @click="onclickDelete"
+                  @click="onclickDelete(props.rowIndex, 'plannedGoals')"
                 >
                   <q-tooltip>ลบข้อมูล</q-tooltip>
                 </q-btn>
@@ -291,7 +433,7 @@ onMounted(() => {
           for="table"
           ref="table"
           :columns="columnsRelated"
-          :rows="rows2"
+          :rows="plannedPeoples"
           row-key="id"
           flat
           bordered
@@ -321,7 +463,7 @@ onMounted(() => {
                   dense
                   icon="delete"
                   color="red"
-                  @click="onclickDelete"
+                  @click="onclickDelete(props.rowIndex, 'plannedPeoples')"
                 >
                   <q-tooltip>ลบข้อมูล</q-tooltip>
                 </q-btn>
@@ -340,13 +482,17 @@ onMounted(() => {
       <q-btn flat round dense icon="add" color="primary">
         <q-menu>
           <q-list style="min-width: 100px">
-            <q-item clickable v-close-popup @click="onClickOpenDialog('group')">
+            <q-item
+              clickable
+              v-close-popup
+              @click="onClickOpenDialog('group', 'actual')"
+            >
               <q-item-section>กลุ่มเป้าหมาย</q-item-section>
             </q-item>
             <q-item
               clickable
               v-close-popup
-              @click="onClickOpenDialog('relate')"
+              @click="onClickOpenDialog('relate', 'actual')"
             >
               <q-item-section>ผู้เกี่ยวข้อง</q-item-section>
             </q-item>
@@ -362,8 +508,8 @@ onMounted(() => {
         <d-table
           for="table"
           ref="table"
-          :columns="columnsGroup"
-          :rows="rows3"
+          :columns="columnsActualGoals"
+          :rows="actualGoals"
           row-key="id"
           flat
           bordered
@@ -393,7 +539,7 @@ onMounted(() => {
                   dense
                   icon="delete"
                   color="red"
-                  @click="onclickDelete"
+                  @click="onclickDelete(props.rowIndex, 'actualGoals')"
                 >
                   <q-tooltip>ลบข้อมูล</q-tooltip>
                 </q-btn>
@@ -408,7 +554,7 @@ onMounted(() => {
           for="table"
           ref="table"
           :columns="columnsRelated"
-          :rows="rows4"
+          :rows="actualPeoples"
           row-key="id"
           flat
           bordered
@@ -438,7 +584,7 @@ onMounted(() => {
                   dense
                   icon="delete"
                   color="red"
-                  @click="onclickDelete"
+                  @click="onclickDelete(props.rowIndex, 'actualPeoples')"
                 >
                   <q-tooltip>ลบข้อมูล</q-tooltip>
                 </q-btn>
@@ -470,18 +616,26 @@ onMounted(() => {
                 map-options
                 emit-value
                 lazy-rules
+                @update:model-value="updateGroupTarget"
                 :rules="[
                 (val:string) =>
                   !!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
               ]"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div
+              class="col-xs-6 col-sm-6 col-md-6"
+              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+            >
               <q-select
                 dense
                 outlined
                 v-model="formGroupTarget.groupTargetSub"
-                :options="groupSubOp"
+                :options="
+                  formGroupTarget.groupTarget === 'OFFICER'
+                    ? groupSubOp.slice(0, 2)
+                    : groupSubOp.slice(2, 4)
+                "
                 label="กลุ่มเป้าหมายย่อย"
                 hide-bottom-space
                 lazy-rules
@@ -495,7 +649,11 @@ onMounted(() => {
               ]"
               />
             </div>
-            <div class="col-xs-6 col-sm-4 col-md-4">
+
+            <div
+              class="col-xs-6 col-sm-4 col-md-4"
+              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+            >
               <q-input
                 outlined
                 dense
@@ -508,7 +666,10 @@ onMounted(() => {
               ]"
               />
             </div>
-            <div class="col-xs-6 col-sm-4 col-md-4">
+            <div
+              class="col-xs-6 col-sm-4 col-md-4"
+              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+            >
               <q-select
                 dense
                 outlined
@@ -529,7 +690,10 @@ onMounted(() => {
         ]"
               />
             </div>
-            <div class="col-xs-6 col-sm-4 col-md-4">
+            <div
+              class="col-xs-6 col-sm-4 col-md-4"
+              v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
+            >
               <q-select
                 dense
                 outlined
@@ -549,7 +713,10 @@ onMounted(() => {
       ]"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-8">
+            <div
+              class="col-xs-6 col-sm-6 col-md-8"
+              v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
+            >
               <q-input
                 outlined
                 dense
@@ -609,10 +776,14 @@ onMounted(() => {
                 dense
                 outlined
                 v-model="formGroupRelate.relate"
-                :options="options"
+                :options="peoplesOp"
                 label="ผู้เกี่ยวข้อง"
                 hide-bottom-space
                 lazy-rules
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
                 :rules="[
                 (val:string) =>
                   !!val || `${'กรุณาเลือกผู้เกี่ยวข้อง'}`,
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index 6d7108e76..a2e1cae1b 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -5,7 +5,7 @@ interface DataOption {
 
 interface DataOptionCheckBox {
   label: string;
-  value: string;
+  value: boolean;
 }
 
 interface FormFilter {
@@ -13,7 +13,7 @@ interface FormFilter {
   pageSize: number;
   keyword: string;
   type: string;
-  year:number
+  year: number;
   posType: string;
   posLevel: string;
   retireYear: string | null;
@@ -36,4 +36,10 @@ interface NewPagination {
   sortBy: string;
 }
 
-export type { DataOption, DataOptionCheckBox, ItemsMenu, NewPagination ,FormFilter};
+export type {
+  DataOption,
+  DataOptionCheckBox,
+  ItemsMenu,
+  NewPagination,
+  FormFilter,
+};
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index b48ed3463..7d5db29f7 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -17,8 +17,8 @@ interface FormGroupTarget {
   groupTarget: string;
   groupTargetSub: string;
   position: string;
-  posType: string;
-  level: string;
+  posType: string | null;
+  level: string | null;
   type: string;
   amount: number | null;
 }
@@ -100,7 +100,7 @@ interface FormAddHistoryEmployee {
 }
 
 interface FormAddHistoryProject {
-  id:string
+  id: string;
   project: string;
   year: string;
   trainingStart: string;
@@ -114,8 +114,79 @@ interface FormAddHistoryProject {
   [key: string]: any;
 }
 
+/** form เพิ่มรายการโครงการ/หลักสูตรการฝึกอบรม*/
+interface FormAddProject {
+  year: number;
+  projectName: string;
+  reason: string;
+  objective: string;
+  metricType: string;
+  indicators: string;
+  target: string;
+  calculation: string;
+  measuRement: string;
+  results: string;
+  obstacles: string;
+  suggestions: string;
+  project: string;
+  isPassAllocate: boolean;
+  isPassNoAllocate: boolean;
+  isNoPass: boolean;
+  isBudget: boolean;
+  isOutBudget: boolean;
+  dateStart: Date | null;
+  dateEnd: Date | null;
+  totalDate: number | null;
+  address: string;
+  provinceId: string | null;
+  budget: string;
+  accept: number | string | null;
+  receive: number | string | null;
+  approved: number | string | null;
+  budgetPay: number | string | null;
+  issues: string;
+  chance: string;
+  effects: string;
+  riskLevel: string;
+  riskManagement: string;
+  expect: string;
+  topicAcademic: string;
+  addressAcademic: string;
+  provinceActualId: string | null;
+  actualPeoples: People[];
+  plannedPeoples: People[];
+  actualGoals: actualGoals[];
+  plannedGoals: PlannedGoals[];
+}
+
+interface People {
+  groupTarget: string;
+  amount: number | null;
+}
+
+interface actualGoals {
+  groupTarget: string;
+  groupTargetSub: string;
+  position: string;
+  posTypeActualId: string | null;
+  posLevelActualId: string | null;
+  type: string;
+  amount: number | null;
+}
+
+interface PlannedGoals {
+  groupTarget: string;
+  groupTargetSub: string;
+  position: string;
+  posTypePlannedId: string | null;
+  posLevelPlannedId: string | null;
+  type: string;
+  amount: number | null;
+}
+
 export type {
   FormQueryListProject,
+  FormAddProject,
   FormBasicinfo,
   FormGroupTarget,
   FormGroupRelate,
diff --git a/src/modules/15_development/store/developmentStore.ts b/src/modules/15_development/store/developmentStore.ts
index 406547c37..3db675066 100644
--- a/src/modules/15_development/store/developmentStore.ts
+++ b/src/modules/15_development/store/developmentStore.ts
@@ -1,16 +1,144 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { reactive, ref } from "vue";
 
 import type { QTableProps } from "quasar";
+import type { FormAddProject } from "@/modules/15_development/interface/request/Main";
 
 // store
 export const useDevelopmentDataStore = defineStore(
   "developmentDataStore",
   () => {
+    const formAddProject = reactive<FormAddProject>({
+      year: new Date().getFullYear(), //ปีงบประมาณ*
+      projectName: "", //ชื่อโครงการ/กิจกรรม/หลักสูตร*
+      reason: "", //หลักการและเหตุผล
+      objective: "", //วัตถุประสงค์
+      metricType: "", //ประเภทตัวชี้วัด
+      indicators: "", //ตัวชี้วัด
+      target: "", //เป้าหมาย
+      calculation: "", //วิธีการคำนวณ/เครื่องมือ
+      measuRement: "", //ระยะเวลาวัดผล
+      results: "", //ผลการดำเนิน
+      obstacles: "", //ปัญหาอุปสรรค
+      suggestions: "", //ข้อเสนอเเนะfalse
+      project: "", //ประเภทโครงการ(โครงการที่เสนอขอ TN->OFFER ,โครงการที่ไม่เสนอขอ TN->NOOFFER)
+      isPassAllocate: false, //ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ
+      isPassNoAllocate: false, //ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ
+      isNoPass: false, //ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ
+      isBudget: false, //แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ
+      isOutBudget: false, //แต่ได้รับการจัดสรรเงินนอกงบประมาณ
+      dateStart: null, //วันที่เริ่มต้น
+      dateEnd: null, //วันที่สิ้นสุด
+      totalDate: null, //รวมระยะเวลา (วัน)
+      address: "", //ที่อยู่
+      provinceId: null, //จังหวัด
+      budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
+      accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
+      receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
+      approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
+      budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
+      issues: "", //ประเด็นความเสี่ยง
+      chance: "", //โอกาสที่จะเกิด
+      effects: "", //ผลกระทบจากการเกิด
+      riskLevel: "", //ระดับความเสี่ยง
+      riskManagement: "", //เเนวทางการบริหารความเสี่ยง
+      expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
+      topicAcademic: "", //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
+      addressAcademic: "", //สถานที่ฝึกอบรม ศึกษาดูงาน
+      provinceActualId: null, //จังหวัด(ข้อมูลวิชาการ)
+      actualPeoples: [
+        // {
+        //   groupTarget: "", //ผู้เกี่ยวข้อง(เจ้าหน้าที่ดําเนินการ->OPERATOR, วิทยากร->LECTURER, ผู้สังเกตการณ์->OBSERVER)
+        //   amount: null, //จำนวน(คน)
+        // },
+      ], //เป้าหมายตามจริง ผู้เกี่ยวข้อง
+      plannedPeoples: [
+        // {
+        //   groupTarget: "", //ผู้เกี่ยวข้อง(เจ้าหน้าที่ดําเนินการ->OPERATOR, วิทยากร->LECTURER, ผู้สังเกตการณ์->OBSERVER)
+        //   amount: null, //จำนวน(คน)
+        // },
+      ], //เป้าหมายตามแผน ผู้เกี่ยวข้อง
+      actualGoals: [
+        // {
+        //   groupTarget: "", //กลุ่มเป้าหมาย(ข้าราชการกรุงเทพมหานคร->OFFICER, บุคลากรกรุงเทพมหานคร->PERSONNEL, บุคคลภายนอก->OUTSIDERS)
+        //   groupTargetSub: "", //กลุ่มเป้าหมายย่อย(ข้าราชการกรุงเทพมหานครสามัญ->OFFICER, ข้าราชการครู->TEACHER, กรุงเทพมหานคร(ลูกจ้างประจํา,ลูกจ้างชวคราว)->EMPLOYEE, บุคลากรทางการศึกษากรุงเทพมหานคร->EDUCATIONAL, ไม่มีกลุ่มเป้าหมายย่อย->NONE)
+        //   position: "", //ตำแหน่ง
+        //   posTypeActualId: null, //ประเภทตำแหน่ง
+        //   posLevelActualId: null, //ระดับ
+        //   type: "", //ประเภท(กลุ่มอาชีพ คุณสมบัติ)
+        //   amount: null, //จำนวน(คน)
+        // },
+      ], //เป้าหมายตามจริง กลุ่มเป้าหมาย
+      plannedGoals: [
+        // {
+        //   groupTarget: "", //กลุ่มเป้าหมาย(ข้าราชการกรุงเทพมหานคร->OFFICER, บุคลากรกรุงเทพมหานคร->PERSONNEL, บุคคลภายนอก->OUTSIDERS)
+        //   groupTargetSub: "", //กลุ่มเป้าหมายย่อย(ข้าราชการกรุงเทพมหานครสามัญ->OFFICER, ข้าราชการครู->TEACHER, กรุงเทพมหานคร(ลูกจ้างประจํา,ลูกจ้างชวคราว)->EMPLOYEE, บุคลากรทางการศึกษากรุงเทพมหานคร->EDUCATIONAL, ไม่มีกลุ่มเป้าหมายย่อย->NONE)
+        //   position: "", //ตำแหน่ง
+        //   posTypePlannedId: null, //ประเภทตำแหน่ง
+        //   posLevelPlannedId: null, //ระดับ
+        //   type: "", //ประเภท(กลุ่มอาชีพ คุณสมบัติ)
+        //   amount: null, //จำนวน(คน)
+        // },
+      ], //เป้าหมายตามแผน กลุ่มเป้าหมาย
+    });
+
+    function clearFormAddProject() {
+      /** ข้อมูลเบื้องต้น*/
+      formAddProject.year = new Date().getFullYear();
+      formAddProject.projectName = "";
+      formAddProject.reason = " ";
+      formAddProject.objective = "";
+
+      /**เป้าหมาย*/
+      formAddProject.plannedGoals = [];
+      formAddProject.plannedPeoples = [];
+      formAddProject.actualGoals = [];
+      formAddProject.actualPeoples = [];
+
+      /** การติดตามผลดารประเมิน*/
+      formAddProject.metricType = "";
+      formAddProject.indicators = "";
+      formAddProject.target = "";
+      formAddProject.calculation = "";
+      formAddProject.measuRement = "";
+      formAddProject.results = "";
+      formAddProject.obstacles = "";
+      formAddProject.suggestions = "";
+      formAddProject.project = "";
+      formAddProject.isPassAllocate = false;
+      formAddProject.isPassNoAllocate = false;
+      formAddProject.isNoPass = false;
+      formAddProject.isBudget = false;
+      formAddProject.isOutBudget = false;
+
+      /** อื่นๆ*/
+      formAddProject.dateStart = null;
+      formAddProject.dateEnd = null;
+      formAddProject.totalDate = null;
+      formAddProject.address = "";
+      formAddProject.provinceId = null;
+      formAddProject.budget = "";
+      formAddProject.accept = null;
+      formAddProject.receive = null;
+      formAddProject.approved = null;
+      formAddProject.budgetPay = null;
+      formAddProject.issues = "";
+      formAddProject.chance = "";
+      formAddProject.effects = "";
+      formAddProject.riskLevel = "";
+      formAddProject.riskManagement = "";
+      formAddProject.expect = "";
+      formAddProject.topicAcademic = "";
+      formAddProject.addressAcademic = "";
+      formAddProject.provinceActualId = null;
+    }
+
     const visibleColumns = ref<string[]>([]);
     const columns = ref<QTableProps["columns"]>([]);
     const rows = ref<any[]>([]);
     return {
+      formAddProject,
+      clearFormAddProject,
       visibleColumns,
       columns,
       rows,
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 202f43027..1c39bc2d8 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -30,7 +30,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "year",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px ;width: 10%",
+    style: "font-size: 14px ; width:10%",
     format: (val) => val + 543,
   },
   {
@@ -40,7 +40,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "projectName",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px;width: 45%",
+    style: "font-size: 14px;width:45% ",
   },
 
   {
@@ -50,7 +50,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "org",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px ;width: 45%",
+    style: "font-size: 14px ; width:45% ",
   },
 ]);
 const visibleColumns = ref<string[]>(["year", "projectName", "org"]);
@@ -114,7 +114,7 @@ function fetchListProject() {
  * @param id รายการโครงการ
  */
 function onClickAddOrView(status: boolean = false, id: string = "") {
-  status ? router.push(`development/${id}`) : router.push("development/add");
+  status ? router.push(`/development/${id}`) : router.push("/development/add");
 }
 
 /**
@@ -301,4 +301,11 @@ onMounted(() => {
   </q-card>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.table_ellipsis {
+  max-width: 400px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index 96b740623..5a1c9e11e 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -4,11 +4,9 @@ import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
 /** importStore*/
-
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-
 const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader } = useCounterMixin();
@@ -47,7 +45,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "type",
     align: "left",
-    label: "ประเภท",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "type",
     headerStyle: "font-size: 14px",
@@ -56,7 +54,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "level",
     align: "left",
-    label: "ระดับ",
+    label: "ระดับตำแหน่ง",
     sortable: true,
     field: "level",
     headerStyle: "font-size: 14px",
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 933f895b2..c7a2c685a 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -741,6 +741,7 @@ watch(
                     menuItem.key == 9 ||
                     menuItem.key == 11 ||
                     menuItem.key == 12 ||
+                    menuItem.key == 13 ||
                     menuItem.key == 14
                   "
                 >
@@ -906,6 +907,7 @@ watch(
                   menuItem.key == 9 ||
                   menuItem.key == 11 ||
                   menuItem.key == 12 ||
+                  menuItem.key == 13 ||
                   menuItem.key == 14
                 "
               >
@@ -921,7 +923,7 @@ watch(
                 </template>
 
                 <!-- เมนูย่อย 2 ชั้น (สรรหา) -->
-                <div v-if="menuItem.key == 5 || menuItem.key == 11">
+                <div v-if="menuItem.key == 5 || menuItem.key == 11 || menuItem.key == 13">
                   <div v-for="(subMenu, i) in menuItem.children" :key="i">
                     <q-expansion-item
                       switch-toggle-side
@@ -933,7 +935,9 @@ watch(
                         subMenu.key !== 11.2 &&
                         subMenu.key !== 11.3 &&
                         subMenu.key !== 11.4 &&
-                        subMenu.key !== 11.5
+                        subMenu.key !== 11.5 &&
+                        subMenu.key !== 13.1 &&
+                        subMenu.key !== 13.3
                       "
                       class="expan2"
                       dense