From c4c8f45d840aa53380f468fc1b323d127dcd19f1 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 11 Apr 2024 08:33:35 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=9A=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B6=E0=B8=81=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=95=E0=B8=B2=E0=B8=A1=20=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/components/BasicInfo.vue   | 194 ++---
 .../components/FollowResult.vue               | 320 +++++----
 .../15_development/components/MainTab.vue     | 164 +++--
 .../15_development/components/Other.vue       | 677 +++++++++---------
 .../components/ProjectDetail.vue              | 173 +++--
 .../15_development/components/Record.vue      |  29 +-
 .../15_development/interface/request/Main.ts  |   1 +
 .../15_development/interface/response/Main.ts |   1 +
 src/modules/15_development/views/MainPage.vue |  20 +-
 9 files changed, 882 insertions(+), 697 deletions(-)

diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 4d6b6b426..1d51a6f9f 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref } from "vue";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 
 import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
 
@@ -13,6 +14,9 @@ const $q = useQuasar();
 const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
+const route = useRoute();
+const projectId = ref<string>(route.params.id.toLocaleString());
+
 const formData = reactive<FormBasicinfo>({
   year: new Date().getFullYear(),
   org: "",
@@ -28,105 +32,115 @@ function selectAgency() {
 function updateAgency(name: string) {
   formData.org = name;
 }
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    // post
+    console.log("projectId===>", projectId.value);
+    hideLoader();
+  });
+}
 </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="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
-            class="inputgreen"
-            :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
-        class="inputgreen"
-        v-model="formData.org"
-        inputgreen
-        label="ชื่อหน่วยงานที่รับผิดชอบ"
-        hide-bottom-space
-        lazy-rules
-        @click="selectAgency"
-      />
-      <!-- :rules="[
+  <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="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
+              class="inputgreen"
+              :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
+          class="inputgreen"
+          v-model="formData.org"
+          inputgreen
+          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
-        class="inputgreen"
-        dense
-        v-model="store.formAddProject.projectName"
-        label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
-        rows="6"
-        type="textarea"
-        hide-bottom-space
-        :rules="[
+      </div>
+      <div class="col-xs-12 col-sm-12 col-md-12">
+        <q-input
+          outlined
+          class="inputgreen"
+          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
+          class="inputgreen"
+          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
+          class="inputgreen"
+          dense
+          v-model="store.formAddProject.objective"
+          label="วัตถุประสงค์"
+          rows="6"
+          hide-bottom-space
+          type="textarea"
+        />
+      </div>
     </div>
-    <div class="col-xs-12 col-sm-12 col-md-12">
-      <q-input
-        outlined
-        class="inputgreen"
-        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
-        class="inputgreen"
-        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
@@ -139,8 +153,8 @@ function updateAgency(name: string) {
       >
         <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
-    </div> -->
-  <!-- </q-form> -->
+    </div>
+  </q-form>
 
   <DialogSelectAgency
     v-model:modal="modalDialogSelect"
diff --git a/src/modules/15_development/components/FollowResult.vue b/src/modules/15_development/components/FollowResult.vue
index 33142ff80..bbf6497b0 100644
--- a/src/modules/15_development/components/FollowResult.vue
+++ b/src/modules/15_development/components/FollowResult.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { ref } from "vue";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 
 import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
-import type {
-  DataOption,
-  DataOptionCheckBox,
-} from "@/modules/15_development/interface/index/Main";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
 
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
@@ -14,6 +12,8 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
+const route = useRoute();
+const projectId = ref<string>(route.params.id.toLocaleString());
 
 const projectOp = ref<DataOption[]>([
   {
@@ -25,14 +25,25 @@ const projectOp = ref<DataOption[]>([
     name: "โครงการที่ไม่เสนอขอ TN",
   },
 ]);
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    // post
+    console.log("projectId===>", projectId.value);
+    hideLoader();
+  });
+}
 </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
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <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="ประเภทตัวชี้วัด"
@@ -42,147 +53,162 @@ const projectOp = ref<DataOption[]>([
         option-value="id"
         hide-bottom-space
       /> -->
-      <q-input
-        dense
-        outlined
-        class="inputgreen"
-        label="ประเภทตัวชี้วัด"
-        v-model="store.formAddProject.metricType"
-        hide-bottom-space
-      />
-    </div>
-    <div class="col-12 col-sm-6 col-md-4">
-      <q-input
-        dense
-        outlined
-        class="inputgreen"
-        label="ตัวชี้วัด"
-        v-model="store.formAddProject.indicators"
-        hide-bottom-space
-      />
-    </div>
-    <div class="col-12 col-sm-6 col-md-4">
-      <q-input
-        dense
-        outlined
-        class="inputgreen"
-        label="เป้าหมาย"
-        v-model="store.formAddProject.target"
-        hide-bottom-space
-      />
-    </div>
-    <div class="col-12">
-      <q-input
-        outlined
-        dense
-        class="inputgreen"
-        v-model="store.formAddProject.calculation"
-        hide-bottom-space
-        label="วิธีการคำนวณ/เครื่องมือ"
-        type="textarea"
-      />
-    </div>
-    <div class="col-12">
-      <q-input
-        outlined
-        dense
-        class="inputgreen"
-        v-model="store.formAddProject.measuRement"
-        hide-bottom-space
-        label="ระยะเวลาวัดผล"
-      />
-    </div>
-    <div class="col-12">
-      <q-input
-        outlined
-        dense
-        class="inputgreen"
-        v-model="store.formAddProject.results"
-        hide-bottom-space
-        label="ผลการดำเนินการ"
-        type="textarea"
-      />
-    </div>
-    <div class="col-12">
-      <q-input
-        outlined
-        dense
-        class="inputgreen"
-        v-model="store.formAddProject.obstacles"
-        hide-bottom-space
-        label="ปัญหาอุปสรรค"
-        type="textarea"
-      />
-    </div>
-    <div class="col-12">
-      <q-input
-        outlined
-        dense
-        class="inputgreen"
-        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
-        class="inputgreen"
-      />
-    </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>
+        <q-input
+          dense
+          outlined
+          class="inputgreen"
+          label="ประเภทตัวชี้วัด"
+          v-model="store.formAddProject.metricType"
+          hide-bottom-space
+        />
+      </div>
+      <div class="col-12 col-sm-6 col-md-4">
+        <q-input
+          dense
+          outlined
+          class="inputgreen"
+          label="ตัวชี้วัด"
+          v-model="store.formAddProject.indicators"
+          hide-bottom-space
+        />
+      </div>
+      <div class="col-12 col-sm-6 col-md-4">
+        <q-input
+          dense
+          outlined
+          class="inputgreen"
+          label="เป้าหมาย"
+          v-model="store.formAddProject.target"
+          hide-bottom-space
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          class="inputgreen"
+          v-model="store.formAddProject.calculation"
+          hide-bottom-space
+          label="วิธีการคำนวณ/เครื่องมือ"
+          type="textarea"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          class="inputgreen"
+          v-model="store.formAddProject.measuRement"
+          hide-bottom-space
+          label="ระยะเวลาวัดผล"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          class="inputgreen"
+          v-model="store.formAddProject.results"
+          hide-bottom-space
+          label="ผลการดำเนินการ"
+          type="textarea"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          class="inputgreen"
+          v-model="store.formAddProject.obstacles"
+          hide-bottom-space
+          label="ปัญหาอุปสรรค"
+          type="textarea"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          class="inputgreen"
+          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
+          class="inputgreen"
+        />
+      </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="col-12">
-          <q-checkbox
-            v-model="store.formAddProject.isNoPass"
-            label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
-          />
+          <div class="col-12">
+            <q-checkbox
+              v-model="store.formAddProject.isNoPass"
+              label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
+            />
+          </div>
         </div>
-      </div>
-      <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 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>
-  </div>
+    <q-separator />
+    <div class="text-right q-pa-sm">
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-px-md"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+  </q-form>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index 7d4c29b18..558a8a5c2 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -36,19 +36,18 @@ const {
 } = useCounterMixin();
 
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
-const projectId = ref<string | null>(
-  route.params.id ? route.params.id.toLocaleString() : null
-);
+const projectId = ref<string>(route.params.id.toLocaleString());
 const tab = ref<string>("BasicInfo");
 
+const status = ref<string>("ONGOING");
 function fetchDataProject(id: string) {
   showLoader();
   http
     .get(config.API.developmentMainById(id))
     .then((res) => {
       const data: ResDataProject = res.data.result;
-      console.log(data);
       /** ข้อมูลเบื้องต้น*/
+      status.value = data.status ? data.status : "ONGOING";
       store.formAddProject.year = data.year;
       store.formAddProject.projectName = data.projectName;
       store.formAddProject.reason = data.reason;
@@ -128,8 +127,8 @@ function fetchDataProject(id: string) {
       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.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;
@@ -212,6 +211,28 @@ function onSubmit() {
   }
 }
 
+function onFinish(id: string) {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      http
+        .get(config.API.developmentMainById(id)) // change path
+        .then((res) => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเสร็จสิ้นโครงการ",
+    "ต้องการยืนยันการเสร็จสิ้นโครงการนี้ใช่หรือไม่?"
+  );
+}
+
 onMounted(() => {
   projectId.value && fetchDataProject(projectId.value);
 });
@@ -221,68 +242,77 @@ onUnmounted(() => {
 });
 </script>
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
-    <div class="toptitle text-dark col-12 row items-center">
-      <q-btn
-        flat
-        round
-        dense
-        class="q-mr-sm"
-        icon="mdi-arrow-left"
-        color="primary"
-        @click="router.push('/development')"
-      />
-      {{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }}
-      <q-space />
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        id="onSubmit"
-        type="submit"
-        color="public"
-        class="q-px-md"
-      >
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
-      </q-btn>
-      <!-- <q-btn unelevated label="บันทึก" color="public" @click="onSubmit">
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
-      </q-btn> -->
-    </div>
+  <!-- <q-form greedy @submit.prevent @validation-success="onSubmit"> -->
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      flat
+      round
+      dense
+      class="q-mr-sm"
+      icon="mdi-arrow-left"
+      color="primary"
+      @click="router.push('/development')"
+    />
+    {{ `${title}โครงการ/หลักสูตรการฝึกอบรม` }}
+    <q-space />
+    <!-- <q-btn
+      dense
+      unelevated
+      label="บันทึก"
+      id="onSubmit"
+      type="submit"
+      color="public"
+      class="q-px-md"
+    >
+      <q-tooltip>บันทึกข้อมูล</q-tooltip>
+    </q-btn> -->
+    <q-btn
+      v-if="status === 'FINISH'"
+      unelevated
+      label="เสร็จสิ้นโครงการ"
+      color="green"
+      @click="onFinish(projectId)"
+    >
+      <q-tooltip>เสร็จสิ้นโครงการ</q-tooltip>
+    </q-btn>
+    <q-badge v-else outline color="primary" class="q-px-sm q-py-xs"
+      >เสร็จสิ้นโครงการ</q-badge
+    >
+  </div>
 
-    <q-card flat bordered class="col-12">
-      <q-tabs
-        v-model="tab"
-        dense
-        align="left"
-        inline-label
-        class="rounded-borders"
-        indicator-color="primary"
-        active-bg-color="teal-1"
-        active-class="text-primary"
-      >
-        <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
-        <q-tab name="Target" label="เป้าหมาย" />
-        <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
-        <q-tab name="FollowResult" label="การติดตามการประเมินผล" />
-        <q-tab name="Other" label="อื่นๆ" />
-        <q-tab name="Record" label="บันทึกผล" />
-      </q-tabs>
-      <q-separator />
-      <div class="q-pa-sm" style="padding: 0px">
-        <q-tab-panels v-model="tab" animated>
-          <q-tab-panel style="padding: 0px" name="BasicInfo">
-            <BasicInfo />
-          </q-tab-panel>
-          <q-tab-panel name="Target"> <Target /></q-tab-panel>
-          <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
-          <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
-          <q-tab-panel name="Other"> <Other /> </q-tab-panel>
-          <q-tab-panel name="Record"> <Record /> </q-tab-panel>
-        </q-tab-panels>
-      </div>
-    </q-card>
-  </q-form>
+  <q-card flat bordered class="col-12">
+    <q-tabs
+      v-model="tab"
+      dense
+      align="left"
+      inline-label
+      class="rounded-borders"
+      indicator-color="primary"
+      active-bg-color="teal-1"
+      active-class="text-primary"
+    >
+      <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
+      <q-tab name="Target" label="เป้าหมาย" />
+      <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
+      <q-tab name="FollowResult" label="การติดตามการประเมินผล" />
+      <q-tab name="Other" label="อื่นๆ" />
+      <q-tab name="Record" label="บันทึกผล" />
+    </q-tabs>
+    <q-separator />
+    <div class="q-pa-sm" style="padding: 0px">
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel style="padding: 0px" name="BasicInfo">
+          <BasicInfo />
+        </q-tab-panel>
+        <q-tab-panel name="Target"> <Target /></q-tab-panel>
+        <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
+        <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
+        <q-tab-panel name="Other"> <Other /> </q-tab-panel>
+        <q-tab-panel name="Record"> <Record /> </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </q-card>
+  <!-- </q-form> -->
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/components/Other.vue b/src/modules/15_development/components/Other.vue
index 348ca9ad8..5382b4c08 100644
--- a/src/modules/15_development/components/Other.vue
+++ b/src/modules/15_development/components/Other.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -12,8 +13,17 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
 
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
-const { showLoader, hideLoader, diffDay, date2Thai, messageError } =
-  useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  diffDay,
+  date2Thai,
+  messageError,
+  dialogConfirm,
+} = useCounterMixin();
+
+const route = useRoute();
+const projectId = ref<string>(route.params.id.toLocaleString());
 
 const provinceOp = ref<DataOption[]>([]);
 const provinceOpMain = ref<DataOption[]>([]);
@@ -130,342 +140,367 @@ async function calRiskLevel() {
   }
 }
 
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    // post
+    console.log("projectId===>", projectId.value);
+    hideLoader();
+  });
+}
+
 onMounted(() => {
   getProvince();
 });
 </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"
-        week-start="0"
-        @update:model-value="changeDateStart()"
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            class="inputgreen"
-            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"
-        week-start="0"
-        :min-date="store.formAddProject.dateStart"
-        @update:model-value="changeDateEnd()"
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            dense
-            outlined
-            class="inputgreen"
-            :model-value="
-              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
-        class="inputgreen"
-        label="รวมระยะเวลา (วัน)"
-        v-model="store.formAddProject.totalDate"
-        mask="#"
-        reverse-fill-mask
-      />
-    </div>
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <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"
+          week-start="0"
+          @update:model-value="changeDateStart()"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              class="inputgreen"
+              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"
+          week-start="0"
+          :min-date="store.formAddProject.dateStart"
+          @update:model-value="changeDateEnd()"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              class="inputgreen"
+              :model-value="
+                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
+          class="inputgreen"
+          label="รวมระยะเวลา (วัน)"
+          v-model="store.formAddProject.totalDate"
+          mask="#"
+          reverse-fill-mask
+        />
+      </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
-        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="
+      <div class="col-12 q-mt-md">
+        <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
+      </div>
+      <div class="col-8">
+        <q-input
+          outlined
+          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, )
       "
-      >
-        <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-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
-        class="inputgreen"
-      />
-    </div>
-    <div class="col-2">
-      <q-select
-        v-if="store.formAddProject.budget === 'OUTSIDEBUDGET'"
-        outlined
-        dense
-        v-model="store.formAddProject.budgetSub"
-        label="ประเภทย่อย"
-        :options="budgetSubOp"
-        option-label="name"
-        option-value="id"
-        emit-value
-        map-options
-        class="inputgreen"
-      />
-    </div>
-    <div class="col-12">
-      <div class="row q-col-gutter-x-sm">
-        <div class="col-3">
-          <q-input
-            outlined
-            dense
-            class="inputgreen"
-            v-model="store.formAddProject.accept"
-            label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
-            mask="###,###,###,###,###"
-            reverse-fill-mask
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            outlined
-            dense
-            class="inputgreen"
-            v-model="store.formAddProject.receive"
-            mask="###,###,###,###,###"
-            reverse-fill-mask
-            label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            outlined
-            dense
-            class="inputgreen"
-            v-model="store.formAddProject.approved"
-            hide-bottom-space
-            mask="###,###,###,###,###"
-            label="จํานวนงบประมาณที่ได้รับอนุมัติ"
-            reverse-fill-mask
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            outlined
-            dense
-            class="inputgreen"
-            v-model="store.formAddProject.budgetPay"
-            mask="###,###,###,###,###"
-            reverse-fill-mask
-            label="จํานวนงบประมาณที่จ่ายจริง"
-          />
+        >
+          <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-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
+          class="inputgreen"
+        />
+      </div>
+      <div class="col-2">
+        <q-select
+          v-if="store.formAddProject.budget === 'OUTSIDEBUDGET'"
+          outlined
+          dense
+          v-model="store.formAddProject.budgetSub"
+          label="ประเภทย่อย"
+          :options="budgetSubOp"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          class="inputgreen"
+        />
+      </div>
+      <div class="col-12">
+        <div class="row q-col-gutter-x-sm">
+          <div class="col-3">
+            <q-input
+              outlined
+              dense
+              class="inputgreen"
+              v-model="store.formAddProject.accept"
+              label="จํานวนงบประมาณที่ขอรับการจัดสรรฯ"
+              mask="###,###,###,###,###"
+              reverse-fill-mask
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              outlined
+              dense
+              class="inputgreen"
+              v-model="store.formAddProject.receive"
+              mask="###,###,###,###,###"
+              reverse-fill-mask
+              label="จํานวนงบประมาณที่ได้รับการจัดสรรฯ"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              outlined
+              dense
+              class="inputgreen"
+              v-model="store.formAddProject.approved"
+              hide-bottom-space
+              mask="###,###,###,###,###"
+              label="จํานวนงบประมาณที่ได้รับอนุมัติ"
+              reverse-fill-mask
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              outlined
+              dense
+              class="inputgreen"
+              v-model="store.formAddProject.budgetPay"
+              mask="###,###,###,###,###"
+              reverse-fill-mask
+              label="จํานวนงบประมาณที่จ่ายจริง"
+            />
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="col-12 q-mt-md">
-      <span class="text-weight-medium text-body1">ความเสี่ยงของโครงการ</span>
-    </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
-        class="inputgreen"
-        v-model="store.formAddProject.issues"
-        label="ประเด็นความเสี่ยง"
-        type="textarea"
-      />
-    </div>
-    <div class="col-3">
-      <q-select
-        outlined
-        dense
-        class="inputgreen"
-        v-model="store.formAddProject.chance"
-        label="โอกาสที่จะเกิด"
-        :options="[1, 2, 3, 4]"
-        @update:model-value="calRiskLevel"
-      ></q-select>
-    </div>
-    <div class="col-3">
-      <q-select
-        outlined
-        dense
-        class="inputgreen"
-        v-model="store.formAddProject.effects"
-        label="ผลกระทบจากการเกิด"
-        :options="[1, 2, 3, 4]"
-        @update:model-value="calRiskLevel"
-      >
-      </q-select>
-    </div>
-    <div class="col-6">
-      <q-input
-        readonly
-        outlined
-        dense
-        class="inputgreen"
-        v-model="store.formAddProject.riskLevel"
-        label="ระดับความเสี่ยง"
-      />
-    </div>
-    <div class="col-12">
-      <q-input
-        outlined
-        dense
-        class="inputgreen"
-        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
-        class="inputgreen"
-        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
-        class="inputgreen"
-        v-model="store.formAddProject.topicAcademic"
-        label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
-      />
-    </div>
-    <div class="col-9">
-      <q-input
-        outlined
-        dense
-        class="inputgreen"
-        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
-        class="inputgreen"
-        use-input
-        @filter="
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          class="inputgreen"
+          v-model="store.formAddProject.issues"
+          label="ประเด็นความเสี่ยง"
+          type="textarea"
+        />
+      </div>
+      <div class="col-3">
+        <q-select
+          outlined
+          dense
+          class="inputgreen"
+          v-model="store.formAddProject.chance"
+          label="โอกาสที่จะเกิด"
+          :options="[1, 2, 3, 4]"
+          @update:model-value="calRiskLevel"
+        ></q-select>
+      </div>
+      <div class="col-3">
+        <q-select
+          outlined
+          dense
+          class="inputgreen"
+          v-model="store.formAddProject.effects"
+          label="ผลกระทบจากการเกิด"
+          :options="[1, 2, 3, 4]"
+          @update:model-value="calRiskLevel"
+        >
+        </q-select>
+      </div>
+      <div class="col-6">
+        <q-input
+          readonly
+          outlined
+          dense
+          class="inputgreen"
+          v-model="store.formAddProject.riskLevel"
+          label="ระดับความเสี่ยง"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          dense
+          class="inputgreen"
+          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
+          class="inputgreen"
+          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
+          class="inputgreen"
+          v-model="store.formAddProject.topicAcademic"
+          label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
+        />
+      </div>
+      <div class="col-9">
+        <q-input
+          outlined
+          dense
+          class="inputgreen"
+          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
+          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
-      >
+          ><template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่พบข้อมูล </q-item-section>
+            </q-item>
+          </template></q-select
+        >
+      </div>
     </div>
-  </div>
+    <q-separator />
+    <div class="text-right q-pa-sm">
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-px-md"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+  </q-form>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index d3f44a818..3dbd08e9f 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**importType*/
 import type { DataOption } from "@/modules/15_development/interface/index/Main";
 
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
+const $q = useQuasar();
 const store = useDevelopmentDataStore();
+const route = useRoute();
+const projectId = ref<string>(route.params.id.toLocaleString());
+const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
 const projectTypeOp = ref<DataOption[]>([
   { id: "STRATEGIC_PROJECT", name: "โครงการตามยุทธศาสตร์" },
@@ -29,80 +36,106 @@ const projectTechniquesOp = ref<DataOption[]>([
   { id: "SPECIAL_LECTURE", name: "การบรรยายพิเศษ" },
   { id: "STUDY_TRAINING", name: "การฝึกศึกษา" },
 ]);
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    // post
+    console.log("projectId===>", projectId.value);
+    hideLoader();
+  });
+}
 </script>
+
 <template>
-  <div class="row q-pa-md q-col-gutter-sm">
-    <div class="col-12 col-sm-12 col-md-4">
-      <q-select
-        dense
-        outlined
-        v-model="store.formAddProject.projectType"
-        :options="projectTypeOp"
-        label="ประเภทโครงการ"
-        option-label="name"
-        option-value="id"
-        emit-value
-        map-options
-      />
+  <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">
+        <q-select
+          dense
+          outlined
+          v-model="store.formAddProject.projectType"
+          :options="projectTypeOp"
+          label="ประเภทโครงการ"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+        />
+      </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
+          v-model="store.formAddProject.projectModal"
+          label="จำนวน (รุ่น)"
+          mask="#"
+          reverse-fill-mask
+        />
+      </div>
     </div>
-    <div class="col-12 col-sm-6 col-md-4">
-      <q-select
+    <q-separator />
+    <div class="text-right q-pa-sm">
+      <q-btn
         dense
-        outlined
-        v-model="store.formAddProject.projectCharacteristics"
-        :options="projectCharacteristicsOp"
-        label="ลักษณะ"
-        option-label="name"
-        option-value="id"
-        emit-value
-        map-options
-      />
+        unelevated
+        label="บันทึก"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-px-md"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
     </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
-        v-model="store.formAddProject.projectModal"
-        label="จำนวน (รุ่น)"
-        mask="#"
-        reverse-fill-mask
-      />
-    </div>
-  </div>
+  </q-form>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/components/Record.vue b/src/modules/15_development/components/Record.vue
index fd41c5a14..24ab0c1ba 100644
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@@ -10,7 +10,7 @@ import { useQuasar } from "quasar";
 const mixin = useCounterMixin();
 const route = useRoute();
 const $q = useQuasar();
-const id = ref<string>(route.params.id ? route.params.id.toString() : "");
+const id = ref<string>(route.params.id.toString());
 const {
   success,
   messageError,
@@ -239,6 +239,21 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
     });
 }
 
+function sendRecordRegistry() {
+  // ส่งไปบันทึกที่ทะเบียนประวัติ
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      // post
+      console.log("projectId===>", id.value);
+      hideLoader();
+    },
+    "ยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติ",
+    "ต้องการยืนยันการส่งข้อมูลไปบันทึกยังทะเบียนประวัติหรือไม่"
+  );
+}
+
 onMounted(() => {
   // getData();
 });
@@ -271,6 +286,18 @@ onMounted(() => {
     >
       <q-tooltip>อัปโหลดไฟล์</q-tooltip>
     </q-btn>
+    <q-btn
+      v-if="row.length > 0"
+      size="md"
+      icon="mdi-clipboard-account-outline"
+      round
+      flat
+      color="public"
+      @click="sendRecordRegistry()"
+    >
+      <q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติ</q-tooltip>
+    </q-btn>
+
     <q-space />
     <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
       <template v-slot:append>
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index f0af0d2e1..91934dd33 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -4,6 +4,7 @@ interface FormQueryListProject {
   pageSize: number;
   org: string;
   keyword: string;
+  status: string;
 }
 
 interface FormBasicinfo {
diff --git a/src/modules/15_development/interface/response/Main.ts b/src/modules/15_development/interface/response/Main.ts
index 66346ba53..0e5e2fabe 100644
--- a/src/modules/15_development/interface/response/Main.ts
+++ b/src/modules/15_development/interface/response/Main.ts
@@ -68,6 +68,7 @@ interface ResDataProject {
   projectNigth: number | null;
   projectTechniques: string;
   projectModal: number | null;
+  status?: string;
 }
 
 interface ResPeople {
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 60d658f35..0746cedc8 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -81,6 +81,10 @@ const itemDownload = ref<ItemsMenu[]>([
   },
 ]);
 
+const statusOpt = ref<DataOption[]>([
+  { id: "ONGOING", name: "กำลังดำเนินการ" },
+  { id: "FINISH", name: "เสร็จสิ้นโครงการ" },
+]);
 /** formQuery*/
 const formQuery = reactive<FormQueryListProject>({
   year: new Date().getFullYear(),
@@ -88,6 +92,7 @@ const formQuery = reactive<FormQueryListProject>({
   pageSize: 10,
   org: "1",
   keyword: "",
+  status: "ONGOING",
 });
 const orgOp = ref<DataOption[]>([{ id: "1", name: "หน่วยงาน 1" }]);
 
@@ -99,7 +104,7 @@ function fetchListProject() {
   http
     .get(
       config.API.developmentMain +
-        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}`
+        `?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&status=${formQuery.status}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -183,6 +188,7 @@ onMounted(() => {
           autoApply
           year-picker
           :enableTimePicker="false"
+          style="width: 150px"
           @update:model-value="fetchListProjectNew"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
@@ -219,6 +225,18 @@ onMounted(() => {
             </q-input>
           </template>
         </datepicker>
+        <q-select
+          dense
+          outlined
+          v-model="formQuery.status"
+          :options="statusOpt"
+          label="สถานะโครงการ"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          @update:model-value="fetchListProjectNew"
+        />
         <q-select
           dense
           outlined