diff --git a/src/components/Dialogs/DialogOrgSelect.vue b/src/components/Dialogs/DialogOrgSelect.vue
index e90eb2318..a62570a17 100644
--- a/src/components/Dialogs/DialogOrgSelect.vue
+++ b/src/components/Dialogs/DialogOrgSelect.vue
@@ -538,7 +538,7 @@ function onSubmit() {
         typeCommand: type.value,
       };
       props.onSubmit?.(body);
-      close()
+      close();
     });
   }
 }
@@ -868,7 +868,7 @@ function onSubmit() {
                                   </q-tr>
                                 </template>
                                 <template v-slot:body="props">
-                                  <q-tr :props="props" class="cursor-pointer">
+                                  <q-tr :props="props">
                                     <q-td>
                                       <q-checkbox
                                         keep-color
diff --git a/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue b/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
index 7c1b1847d..63ee5c44f 100644
--- a/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
+++ b/src/modules/05_placement/components/AppointEmployee/Dialogbody.vue
@@ -135,17 +135,17 @@ const createdAppoint = async () => {
   showLoader();
   await http
     .post(config.API.appointEmployeeOrder(Type), data)
-    .then(() => {
-      success($q, "บันทึกสำเร็จ");
+    .then(async () => {
+      await props.fecthlistappointment?.();
+      await props.clickClose?.();
+      await success($q, "บันทึกสำเร็จ");
+      selected.value = [];
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
       hideLoader();
-      props.fecthlistappointment?.();
-      selected.value = [];
-      props.clickClose?.();
     });
 };
 
@@ -162,23 +162,7 @@ watchEffect(() => {
       <q-separator />
       <q-card-section>
         <div class="row justify-between">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <!-- <q-select
-                outlined
-                dense
-                :model-value="type"
-                @update:model-value="updateInputType"
-                :options="optionsType"
-                label="คำสั่งแต่งตั่ง-เลื่อน-ย้าย"
-                style="width: 400px; max-width: auto"
-                emit-value
-                map-options
-                option-label="name"
-                option-value="id"
-              /> -->
-            </q-toolbar>
-          </div>
+          <div class="col-5"></div>
           <div class="col-5">
             <q-toolbar style="padding: 0">
               <q-input
diff --git a/src/modules/05_placement/components/AppointEmployee/Main.vue b/src/modules/05_placement/components/AppointEmployee/Main.vue
index fe33b110e..a3232fac8 100644
--- a/src/modules/05_placement/components/AppointEmployee/Main.vue
+++ b/src/modules/05_placement/components/AppointEmployee/Main.vue
@@ -610,22 +610,22 @@ function onSave(data: any) {
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  auto-width
-                  v-if="
-                    checkPermission($route)?.attrIsUpdate ||
-                    checkPermission($route)?.attrIsDelete
-                  "
-                >
+              <q-tr :props="props">
+                <q-td auto-width>
                   <q-btn
                     v-if="
-                      props.row.status !== 'REPORT' &&
-                      props.row.status !== 'DONE'
+                      (props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE' &&
+                        checkPermission($route)?.attrIsGet) ||
+                      (checkPermission($route)?.attrIsDelete &&
+                        props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE') ||
+                      (checkPermission($route)?.attrIsGet &&
+                        checkPermission($route)?.attrIsDelete) ||
+                      checkPermission($route)?.attrIsGet
                     "
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
+                    icon="mdi-dots-horizontal-circle-outline"
+                    color="secondary"
                     flat
                     round
                     dense
@@ -636,16 +636,17 @@ function onSave(data: any) {
                     >
                       <q-list dense style="min-width: 200px">
                         <q-item
-                          v-if="checkPermission($route)?.attrIsUpdate"
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
                           clickable
                           v-close-popup
                           @click="openModalTree(props.row, 'SLIP')"
                         >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
+                          <q-item-section style="min-width: 0px" avatar>
                             <q-icon
                               color="primary"
                               size="xs"
@@ -657,16 +658,17 @@ function onSave(data: any) {
                           >
                         </q-item>
                         <q-item
-                          v-if="checkPermission($route)?.attrIsUpdate"
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
                           clickable
                           v-close-popup
                           @click="openModalTree(props.row, 'MOVE')"
                         >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
+                          <q-item-section style="min-width: 0px" avatar>
                             <q-icon
                               color="primary"
                               size="xs"
@@ -677,18 +679,29 @@ function onSave(data: any) {
                             >เลือกหน่วยงานที่รับย้าย</q-item-section
                           >
                         </q-item>
+
                         <q-item
-                          v-if="checkPermission($route)?.attrIsDelete"
+                          v-if="checkPermission($route)?.attrIsGet"
+                          clickable
+                          v-close-popup
+                          @click="nextPage(props.row.id)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon color="info" size="xs" name="mdi-eye" />
+                          </q-item-section>
+                          <q-item-section>รายละเอียด</q-item-section>
+                        </q-item>
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
                           clickable
                           v-close-popup
                           @click="clickDelete(props.row.id)"
                         >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                          <q-item-section style="min-width: 0px" avatar>
                             <q-icon color="red" size="xs" name="mdi-delete" />
                           </q-item-section>
                           <q-item-section>ลบ</q-item-section>
diff --git a/src/modules/05_placement/components/AppointMent/Dialogbody.vue b/src/modules/05_placement/components/AppointMent/Dialogbody.vue
index cf53b4c58..31a633bcc 100644
--- a/src/modules/05_placement/components/AppointMent/Dialogbody.vue
+++ b/src/modules/05_placement/components/AppointMent/Dialogbody.vue
@@ -117,8 +117,8 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const pageNext = (item: object) => {
-  props.nextPage?.(item);
+const pageNext = (item: any) => {
+  props.nextPage?.(item?.id);
 };
 const emit = defineEmits([
   "update:filterKeyword2",
@@ -151,17 +151,17 @@ const sendToCommand = () => {
     showLoader();
     await http
       .put(config.API.apppointmentReport(Type), data)
-      .then((res) => {
-        success($q, "บันทึกสำเร็จ");
+      .then(async () => {
+        await props.fecthlistappointment?.();
+        await props.clickClose?.();
+        await success($q, "บันทึกสำเร็จ");
+        selected.value = [];
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
         hideLoader();
-        props.fecthlistappointment?.();
-        selected.value = [];
-        props.clickClose?.();
       });
   });
 };
@@ -179,23 +179,7 @@ watchEffect(() => {
       <q-separator />
       <q-card-section>
         <div class="row justify-between">
-          <div class="col-5">
-            <!-- <q-toolbar style="padding: 0">
-              <q-select
-                outlined
-                dense
-                :model-value="type"
-                @update:model-value="updateInputType"
-                :options="optionsType"
-                label="คำสั่งแต่งตั่ง-เลื่อน-ย้าย"
-                style="width: 400px; max-width: auto"
-                emit-value
-                map-options
-                option-label="name"
-                option-value="id"
-              />
-            </q-toolbar> -->
-          </div>
+          <div class="col-5"></div>
           <div class="col-5">
             <q-toolbar style="padding: 0">
               <q-input
diff --git a/src/modules/05_placement/components/AppointMent/Main.vue b/src/modules/05_placement/components/AppointMent/Main.vue
index b87b65093..899b2ea5e 100644
--- a/src/modules/05_placement/components/AppointMent/Main.vue
+++ b/src/modules/05_placement/components/AppointMent/Main.vue
@@ -181,33 +181,6 @@ const fecthlistappointment = async () => {
       let response = res.data.result;
       listRecevice.value = response;
       rows.value = response;
-      // rows.value = response.map((e: resData) => ({
-      //   personalId: e.id,
-      //   citizenId: e.citizenId,
-      //   fullname: e.prefix + e.firstname + "  " + e.lastname,
-      //   organizationName:
-      //     e.organizationName +
-      //     " " +
-      //     e.organizationShortName +
-      //     " " +
-      //     e.positionNumber +
-      //     " " +
-      //     e.positionPath,
-      //   orgName: e.organizationName,
-      //   organizationShortName: e.organizationShortName,
-      //   positionNumber: e.positionNumber,
-      //   positionPath: e.positionPath,
-      //   status: statusText(e.status),
-      //   createdAt: date2Thai(e.createdAt),
-      //   birthday: e.dateOfBirth == null ? "-" : date2Thai(e.dateOfBirth),
-      //   educationOld: e.educationOld,
-      //   organizationPositionOld: e.organizationPositionOld,
-      //   positionTypeOld: e.positionTypeOld,
-      //   positionLevelOld: e.positionLevelOld,
-      //   positionNumberOld: e.positionNumberOld,
-      //   salary: e.salary,
-      //   positionDate: e.positionDate,
-      // }));
 
       rows2.value = rows.value.filter(
         (e: any) =>
@@ -231,24 +204,6 @@ const fecthlistappointment = async () => {
     });
 };
 
-//ดึงข้อมูลประเภทคำสั่งเเต่งตั้ง
-// const fecthTypeOption = async () => {
-//   type.value = "";
-//   await http
-//     .get(config.API.typeOrder())
-//     .then((res) => {
-//       optionsType.value = res.data.result.filter(
-//         (e: OpType) =>
-//           e.commandCode === "C-PM-05" ||
-//           e.commandCode === "C-PM-06" ||
-//           e.commandCode === "C-PM-07"
-//       );
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     });
-// };
-
 // เปิดโครงสร้าง
 const openModalTree = (data: any, type: string) => {
   personalId.value = data.id;
@@ -403,22 +358,22 @@ onMounted(() => {
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  auto-width
-                  v-if="
-                    checkPermission($route)?.attrIsUpdate ||
-                    checkPermission($route)?.attrIsDelete
-                  "
-                >
+              <q-tr :props="props">
+                <q-td auto-width>
                   <q-btn
                     v-if="
-                      props.row.status !== 'REPORT' &&
-                      props.row.status !== 'DONE'
+                      (props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE' &&
+                        checkPermission($route)?.attrIsGet) ||
+                      (checkPermission($route)?.attrIsDelete &&
+                        props.row.status !== 'REPORT' &&
+                        props.row.status !== 'DONE') ||
+                      (checkPermission($route)?.attrIsGet &&
+                        checkPermission($route)?.attrIsDelete) ||
+                      checkPermission($route)?.attrIsGet
                     "
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
+                    icon="mdi-dots-horizontal-circle-outline"
+                    color="secondary"
                     flat
                     round
                     dense
@@ -429,16 +384,17 @@ onMounted(() => {
                     >
                       <q-list dense style="min-width: 250px">
                         <q-item
-                          v-if="checkPermission($route)?.attrIsUpdate"
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
                           clickable
                           v-close-popup
                           @click="openModalTree(props.row, 'APPOINT')"
                         >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
+                          <q-item-section style="min-width: 0px" avatar>
                             <q-icon
                               color="primary"
                               size="xs"
@@ -449,17 +405,19 @@ onMounted(() => {
                             >เลือกหน่วยงานที่รับแต่งตั้ง</q-item-section
                           >
                         </q-item>
+
                         <q-item
-                          v-if="checkPermission($route)?.attrIsUpdate"
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
                           clickable
                           v-close-popup
                           @click="openModalTree(props.row, 'SLIP')"
                         >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
+                          <q-item-section style="min-width: 0px" avatar>
                             <q-icon
                               color="primary"
                               size="xs"
@@ -470,17 +428,19 @@ onMounted(() => {
                             >เลือกหน่วยงานที่รับเลื่อน</q-item-section
                           >
                         </q-item>
+
                         <q-item
-                          v-if="checkPermission($route)?.attrIsUpdate"
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            checkPermission($route)?.attrIsGet &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
                           clickable
                           v-close-popup
                           @click="openModalTree(props.row, 'MOVE')"
                         >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
+                          <q-item-section style="min-width: 0px" avatar>
                             <q-icon
                               color="primary"
                               size="xs"
@@ -491,18 +451,30 @@ onMounted(() => {
                             >เลือกหน่วยงานที่รับย้าย</q-item-section
                           >
                         </q-item>
+
                         <q-item
-                          v-if="checkPermission($route)?.attrIsDelete"
+                          v-if="checkPermission($route)?.attrIsGet"
+                          clickable
+                          v-close-popup
+                          @click="nextPage(props.row.id)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon color="info" size="xs" name="mdi-eye" />
+                          </q-item-section>
+                          <q-item-section>รายละเอียด</q-item-section>
+                        </q-item>
+
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsDelete &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
                           clickable
                           v-close-popup
                           @click="clickDelete(props.row.id)"
                         >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                          <q-item-section style="min-width: 0px" avatar>
                             <q-icon color="red" size="xs" name="mdi-delete" />
                           </q-item-section>
                           <q-item-section>ลบ</q-item-section>
@@ -511,14 +483,7 @@ onMounted(() => {
                     </q-menu>
                   </q-btn>
                 </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  @click="
-                    checkPermission($route)?.attrIsGet && nextPage(props.row.id)
-                  "
-                >
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
@@ -535,6 +500,7 @@ onMounted(() => {
                   <div v-else-if="col.name == 'status'">
                     {{ props.row.status ? statusText(props.row.status) : "-" }}
                   </div>
+
                   <div v-else-if="col.name == 'dateOfBirth'">
                     {{
                       props.row.dateOfBirth
@@ -542,6 +508,7 @@ onMounted(() => {
                         : "-"
                     }}
                   </div>
+
                   <div v-else-if="col.name == 'organizationName'">
                     <div class="col-4">
                       <div class="text-weight-medium">
@@ -564,11 +531,13 @@ onMounted(() => {
                       </div>
                     </div>
                   </div>
+
                   <div v-else-if="col.name == 'createdAt'">
                     {{
                       props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
                     }}
                   </div>
+
                   <div v-else>
                     {{ col.value ? col.value : "-" }}
                   </div>
@@ -592,13 +561,6 @@ onMounted(() => {
     :fecthlistappointment="fecthlistappointment"
   />
 
-  <!-- <DialogOrgTree
-    v-model:modal="modalTree"
-    :close="closeModalTree"
-    :personal="personal"
-    :personalId="personalId"
-  /> -->
-
   <DialogOrgSelect
     :title="`เลือกหน่วยงานที่แต่งตั้ง - เลื่อน - ย้าย`"
     v-model:modal="modalTree"
diff --git a/src/modules/05_placement/components/Other/Main.vue b/src/modules/05_placement/components/Other/Main.vue
index 74c3484e3..2808af924 100644
--- a/src/modules/05_placement/components/Other/Main.vue
+++ b/src/modules/05_placement/components/Other/Main.vue
@@ -307,30 +307,37 @@ onMounted(() => {
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td auto-width v-if="checkPermission($route)?.attrIsDelete">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    flat
+                    round
+                    dense
+                    icon="mdi-eye"
+                    color="info"
+                    @click.stop.prevent="nextPage(props.row.id)"
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+
                   <q-btn
-                    color=" red-7"
                     v-if="
                       props.row.status !== 'REPORT' &&
-                      props.row.status !== 'DONE'
+                      props.row.status !== 'DONE' &&
+                      checkPermission($route)?.attrIsDelete
                     "
                     flat
                     round
-                    class="text-red-14"
-                    icon="mdi-delete"
                     dense
+                    color="red"
+                    icon="mdi-delete"
                     @click.stop="clickDelete(props.row.id)"
-                    ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
                   >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
                 </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.id"
-                  @click.stop.prevent="
-                    checkPermission($route)?.attrIsGet && nextPage(props.row.id)
-                  "
-                >
+                <q-td v-for="col in props.cols" :key="col.id">
                   <div v-if="col.name === 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index faf1e33b7..0010b4eff 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -194,46 +194,6 @@ const fecthlistRecevice = async () => {
       const response = res.data.result;
 
       listRecevice.value = response;
-
-      // response.map((e: ResponseData) => {
-      //   list.push({
-      //     personalId: e.id ?? "",
-      //     citizenId: e.citizenId ?? "-",
-      //     fullname: e.prefix + e.firstname + "  " + e.lastname,
-      //     organizationName:
-      //       e.organizationName +
-      //       " " +
-      //       e.organizationShortName +
-      //       " " +
-      //       e.positionNumber +
-      //       " " +
-      //       e.positionPath,
-      //     orgName: e.organizationName,
-      //     organizationShortName: e.organizationShortName,
-      //     positionNumber: e.positionNumber,
-      //     positionPath: e.positionPath,
-      //     positionLevelId: e.positionLevelId,
-      //     positionTypeId: e.positionTypeId,
-      //     positionId: e.positionId,
-      //     birthday:
-      //       e.dateOfBirth == null
-      //         ? "-"
-      //         : date2Thai(e.dateOfBirth) &&
-      //           e.dateOfBirth.toString() === "0001-01-01T00:00:00"
-      //         ? "-"
-      //         : date2Thai(e.dateOfBirth),
-      //     status: e.status,
-      //     statusText: statusText(e.status ?? ""),
-      //     createdAt: e.createdAt !== null ? new Date(e.createdAt) : null,
-      //     dateText: e.createdAt !== null ? date2Thai(e.createdAt) : "-",
-      //     educationOld: e.educationOld ?? "",
-      //     organizationPositionOld: e.organizationPositionOld ?? "",
-      //     positionTypeOld: e.positionTypeOld,
-      //     positionLevelOld: e.positionLevelOld,
-      //     positionNumberOld: e.positionNumberOld,
-      //     amountOld: e.amountOld,
-      //   });
-      // });
       rows.value = response;
       filters.value = response;
     })
@@ -441,22 +401,18 @@ onMounted(() => {
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
+              <q-tr :props="props">
                 <q-td
                   auto-width
                   v-if="
                     checkPermission($route)?.attrIsUpdate ||
-                    checkPermission($route)?.attrIsDelete
+                    checkPermission($route)?.attrIsDelete ||
+                    checkPermission($route)?.attrIsGet
                   "
                 >
                   <q-btn
-                    v-if="
-                      props.row.status !== 'REPORT' &&
-                      props.row.status !== 'DONE'
-                    "
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
+                    icon="mdi-dots-horizontal-circle-outline"
+                    color="secondary"
                     flat
                     round
                     dense
@@ -467,85 +423,69 @@ onMounted(() => {
                     >
                       <q-list dense style="min-width: 100px">
                         <q-item
-                          v-if="checkPermission($route)?.attrIsUpdate"
+                          v-if="
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE' &&
+                            checkPermission($route)?.attrIsUpdate
+                          "
                           clickable
                           v-close-popup
                           @click="openModalTree(props.row.id, props.row)"
                         >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
+                          <q-item-section style="min-width: 0px" avatar>
                             <q-icon
-                              :color="
-                                props.row.status == 'REPORT' ||
-                                props.row.status == 'DONE'
-                                  ? 'grey'
-                                  : 'primary'
-                              "
+                              color="primary"
                               size="xs"
                               name="mdi-bookmark-outline"
                             />
                           </q-item-section>
                           <q-item-section
-                            >เลือกหน่วยงานที่รับโอน</q-item-section
-                          >
+                            >เลือกหน่วยงานที่รับโอน
+                          </q-item-section>
                         </q-item>
+
                         <q-item
-                          v-if="checkPermission($route)?.attrIsUpdate"
+                          v-if="
+                            checkPermission($route)?.attrIsUpdate &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
                           clickable
                           v-close-popup
                           @click="openUpload(props.row.id)"
-                          :disable="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                          "
                         >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon
-                              size="xs"
-                              name="attach_file"
-                              :color="
-                                props.row.status == 'REPORT' ||
-                                props.row.status == 'DONE'
-                                  ? 'grey'
-                                  : 'blue'
-                              "
-                            />
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-icon size="xs" name="attach_file" color="blue" />
                           </q-item-section>
                           <q-item-section>อัปโหลดเอกสาร</q-item-section>
                         </q-item>
+
                         <q-item
-                          v-if="checkPermission($route)?.attrIsDelete"
+                          v-if="checkPermission($route)?.attrIsGet"
+                          clickable
+                          v-close-popup
+                          @click="nextPage(props.row.id)"
+                        >
+                          <q-item-section style="min-width: 0px" avatar>
+                            <q-tooltip>รายละเอียด</q-tooltip>
+                            <q-icon color="info" size="xs" name="mdi-eye" />
+                          </q-item-section>
+                          <q-item-section>รายละเอียด</q-item-section>
+                        </q-item>
+
+                        <q-item
+                          v-if="
+                            checkPermission($route)?.attrIsDelete &&
+                            props.row.status !== 'REPORT' &&
+                            props.row.status !== 'DONE'
+                          "
                           clickable
                           v-close-popup
                           @click="openDelete(props.row.id)"
-                          :disable="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                          "
                         >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
+                          <q-item-section style="min-width: 0px" avatar>
                             <q-tooltip>ลบข้อมูล</q-tooltip>
-                            <q-icon
-                              :color="
-                                props.row.status == 'REPORT' ||
-                                props.row.status == 'DONE'
-                                  ? 'grey'
-                                  : 'red'
-                              "
-                              size="xs"
-                              name="mdi-delete"
-                            />
+                            <q-icon color="red" size="xs" name="mdi-delete" />
                           </q-item-section>
                           <q-item-section>ลบ</q-item-section>
                         </q-item>
@@ -553,14 +493,7 @@ onMounted(() => {
                     </q-menu>
                   </q-btn>
                 </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  @click="
-                    checkPermission($route)?.attrIsGet && nextPage(props.row.id)
-                  "
-                >
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
@@ -615,196 +548,6 @@ onMounted(() => {
                   </div>
                 </q-td>
               </q-tr>
-              <!-- <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  key="no"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td
-                  key="citizenId"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.citizenId }}
-                </q-td>
-                <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.fullname }}
-                </q-td>
-                <q-td
-                  key="organizationName"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  <div
-                    v-if="
-                      props.row.orgName !== null ||
-                      props.row.positionPath !== null
-                    "
-                  >
-                    <div class="col-4">
-                      <div class="text-weight-medium">
-                        {{
-                          props.row.orgName !== null ? props.row.orgName : "-"
-                        }}
-                        {{
-                          props.row.organizationShortName !== null
-                            ? `(${props.row.organizationShortName})`
-                            : ""
-                        }}
-                      </div>
-                      <div class="text-weight-light">
-                        {{
-                          props.row.positionPath !== null
-                            ? props.row.positionPath
-                            : "-"
-                        }}
-                        {{
-                          props.row.positionNumber !== null
-                            ? `(${props.row.positionNumber})`
-                            : ""
-                        }}
-                      </div>
-                    </div>
-                  </div>
-                  <div v-else>
-                    <div class="col-4">
-                      <div class="text-weight-medium">-</div>
-                    </div>
-                  </div>
-                </q-td>
-                <q-td
-                  key="birthday"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.birthday }}
-                </q-td>
-                <q-td
-                  key="dateText"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.dateText }}
-                </q-td>
-                <q-td
-                  key="statusText"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
-                  {{ props.row.statusText }}
-                </q-td>
-                <q-td auto-width>
-                  <q-btn
-                    icon="mdi-dots-vertical"
-                    size="12px"
-                    color="grey-7"
-                    flat
-                    round
-                    dense
-                  >
-                    <q-menu
-                      transition-show="jump-down"
-                      transition-hide="jump-up"
-                    >
-                      <q-list dense style="min-width: 100px">
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="
-                            openModalTree(props.row.personalId, props.row)
-                          "
-                          :disable="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                          "
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon
-                              :color="
-                                props.row.status == 'REPORT' ||
-                                props.row.status == 'DONE'
-                                  ? 'grey'
-                                  : 'primary'
-                              "
-                              size="xs"
-                              name="mdi-bookmark-outline"
-                            />
-                          </q-item-section>
-                          <q-item-section
-                            >เลือกหน่วยงานที่รับโอน</q-item-section
-                          >
-                        </q-item>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="openUpload(props.row.personalId)"
-                          :disable="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                          "
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-icon
-                              size="xs"
-                              name="attach_file"
-                              :color="
-                                props.row.status == 'REPORT' ||
-                                props.row.status == 'DONE'
-                                  ? 'grey'
-                                  : 'blue'
-                              "
-                            />
-                          </q-item-section>
-                          <q-item-section>อัปโหลดเอกสาร</q-item-section>
-                        </q-item>
-                        <q-item
-                          clickable
-                          v-close-popup
-                          @click="openDelete(props.row.personalId)"
-                          :disable="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                          "
-                        >
-                          <q-item-section
-                            style="min-width: 0px"
-                            avatar
-                            class="q-py-sm"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                            <q-icon
-                              :color="
-                                props.row.status == 'REPORT' ||
-                                props.row.status == 'DONE'
-                                  ? 'grey'
-                                  : 'red'
-                              "
-                              size="xs"
-                              name="mdi-delete"
-                            />
-                          </q-item-section>
-                          <q-item-section>ลบ</q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </q-btn>
-                </q-td>
-              </q-tr> -->
             </template>
           </d-table>
         </div>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
index f230ca2e8..7b4723af7 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
@@ -293,8 +293,19 @@ onMounted(async () => {
             </template>
 
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
+              <q-tr :props="props">
                 <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    flat
+                    dense
+                    round
+                    color="info"
+                    icon="mdi-eye"
+                    @click.stop.prevent="openDetail(props.row.id)"
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
                   <q-btn
                     v-if="
                       props.row.status !== 'REPORT' &&
@@ -302,24 +313,18 @@ onMounted(async () => {
                       checkPermission($route)?.attrIsDelete
                     "
                     icon="delete"
-                    size="14px"
                     flat
                     round
                     dense
-                    color="red-7"
-                    @click="clickDelete(props.row.fullname, props.row.id)"
+                    color="red"
+                    @click.stop.prevent="
+                      clickDelete(props.row.fullname, props.row.id)
+                    "
                   >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.id"
-                  @click.stop.prevent="
-                    checkPermission($route)?.attrIsGet &&
-                      openDetail(props.row.id)
-                  "
-                >
+                <q-td v-for="col in props.cols" :key="col.id">
                   <div v-if="col.name === 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
diff --git a/src/modules/05_placement/components/Transfer/transferMain.vue b/src/modules/05_placement/components/Transfer/transferMain.vue
index a60f27b96..a2719cf8e 100644
--- a/src/modules/05_placement/components/Transfer/transferMain.vue
+++ b/src/modules/05_placement/components/Transfer/transferMain.vue
@@ -187,7 +187,6 @@ onMounted(async () => {
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             @click="openModalOrder"
-            size="14px"
             flat
             round
             color="add"
@@ -245,22 +244,30 @@ onMounted(async () => {
           >
             <template v-slot:header="props">
               <q-tr :props="props">
+                <q-th auto-width />
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.id"
-                  class="cursor-pointer"
-                  @click="
-                    checkPermission($route)?.attrIsGet &&
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    flat
+                    dense
+                    round
+                    color="info"
+                    icon="mdi-eye"
+                    @click.stop.prevent="
                       router.push(`/placement/transfer/${props.row.id}`)
-                  "
-                >
+                    "
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.id">
                   <div v-if="col.name === 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
diff --git a/src/modules/05_placement/components/helpgovernment/mainHelp.vue b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
index 3862a0316..dd8863c87 100644
--- a/src/modules/05_placement/components/helpgovernment/mainHelp.vue
+++ b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
@@ -315,8 +315,20 @@ onMounted(async () => {
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
+              <q-tr :props="props">
                 <q-td auto-width>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    flat
+                    dense
+                    round
+                    color="info"
+                    icon="mdi-eye"
+                    @click.stop.prevent="openDetail(props.row.id)"
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+
                   <q-btn
                     v-if="
                       props.row.status !== 'REPORT' &&
@@ -324,24 +336,16 @@ onMounted(async () => {
                       checkPermission($route)?.attrIsDelete
                     "
                     icon="delete"
-                    size="14px"
                     flat
                     round
                     dense
-                    color="red-7"
-                    @click="clickDelete(props.row.id)"
+                    color="red"
+                    @click.stop.prevent="clickDelete(props.row.id)"
                   >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
                 </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.id"
-                  @click.stop.prevent="
-                    checkPermission($route)?.attrIsGet &&
-                      openDetail(props.row.id)
-                  "
-                >
+                <q-td v-for="col in props.cols" :key="col.id">
                   <div v-if="col.name === 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 022bade04..1ff2c8a49 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -5,8 +5,8 @@ interface DataOption {
   disable?: boolean;
 }
 interface ListDataText {
-  value:string
-  label:string
+  value: string;
+  label: string;
 }
 
 interface DataOption1 {
@@ -276,6 +276,13 @@ interface tableType {
   salary: string;
   name: string;
 }
+
+interface ListMenu {
+  label: string;
+  icon: string;
+  type: string;
+  color: string;
+}
 export type {
   DataOption,
   DataOptionInsignia,
@@ -298,7 +305,8 @@ export type {
   AddressData,
   DataProfile,
   tableType,
-  ListDataText
+  ListDataText,
+  ListMenu,
 };
 
 export { AddressDataDefualt, FamilyDataDefualt };
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 5a1163aa7..75dd64fec 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -19,6 +19,9 @@ const mixin = useCounterMixin();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
 
 const projectId = ref<string>(route.params.id.toLocaleString());
+const props = defineProps({
+  nextStep: { type: Function, required: true },
+});
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
@@ -75,21 +78,22 @@ function fetchData(id: string) {
 
 /** function บันทึกข้อมูล*/
 function onSubmit() {
-  dialogConfirm($q, () => {
-    showLoader();
-    http
-      .put(config.API.developmentMainTab("tab1", projectId.value), formData)
-      .then(() => {
-        fetchData(projectId.value);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
+  // dialogConfirm($q, () => {
+  showLoader();
+  http
+    .put(config.API.developmentMainTab("tab1", projectId.value), formData)
+    .then(() => {
+      fetchData(projectId.value);
+      // success($q, "บันทึกข้อมูลสำเร็จ");
+      props.nextStep();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  // });
 }
 
 /** function fetch หา Id หน่วยงานที่ Active*/
@@ -149,7 +153,13 @@ onMounted(async () => {
         <div class="col-12 row no-wrap">
           <div class="col-12 q-py-sm q-px-sm q-gutter-sm">
             <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
-            <q-input :readonly="checkRoutePermission" dense outlined v-model="filter" label="ค้นหา">
+            <q-input
+              :readonly="checkRoutePermission"
+              dense
+              outlined
+              v-model="filter"
+              label="ค้นหา"
+            >
               <template v-slot:append>
                 <q-icon
                   v-if="filter !== ''"
@@ -170,7 +180,9 @@ onMounted(async () => {
               :filter="filter"
               no-results-label="ไม่พบข้อมูลที่ค้นหา"
               no-nodes-label="ไม่มีข้อมูล"
-              :style="checkRoutePermission ? 'pointer-events: none !important;':''"
+              :style="
+                checkRoutePermission ? 'pointer-events: none !important;' : ''
+              "
             >
               <template v-slot:default-header="prop">
                 <q-item
@@ -294,17 +306,29 @@ onMounted(async () => {
       </div>
     </q-card>
 
-    <q-separator v-if="!checkRoutePermission"/>
-    <div class="text-right q-pa-sm" v-if="!checkRoutePermission">
+    <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
       <q-btn
-        unelevated
-        label="บันทึก"
+        disabled
+        rounded
+        label="ก่อนหน้า"
+        icon="mdi-chevron-left"
         id="onSubmit"
         type="submit"
         color="public"
-        class="q-px-md"
+        class="q-mr-xs"
+        style="width: 120px"
+      >
+      </q-btn>
+      <q-btn
+        rounded
+        label="ถัดไป"
+        icon-right="mdi-chevron-right"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-ml-xs"
+        style="width: 120px"
       >
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
     </div>
   </q-form>
diff --git a/src/modules/15_development/components/Budget.vue b/src/modules/15_development/components/Budget.vue
new file mode 100644
index 000000000..ba664a8f2
--- /dev/null
+++ b/src/modules/15_development/components/Budget.vue
@@ -0,0 +1,368 @@
+<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";
+
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import type { FormData } from "@/modules/15_development/interface/request/Other";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  showLoader,
+  hideLoader,
+  diffDay,
+  date2Thai,
+  messageError,
+  dialogConfirm,
+  success,
+} = useCounterMixin();
+const route = useRoute();
+const projectId = ref<string>(route.params.id.toLocaleString());
+const status = defineModel<string>("status", { required: true });
+
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+  nextStep: { type: Function, required: true },
+});
+const step = ref<string>("");
+
+const provinceOp = ref<DataOption[]>([]);
+const provinceOpMain = ref<DataOption[]>([]);
+const budgetOp = ref<DataOption[]>([
+  {
+    id: "REGULATIONBUDGET",
+    name: "งบตามข้อบัญญัติ",
+  },
+  {
+    id: "OUTSIDEBUDGET",
+    name: "เงินนอกงบประมาณ",
+  },
+  {
+    id: "BANGKOKBUDGET",
+    name: "ไม่ใช้งบประมาณ",
+  },
+]);
+const budgetSubOp = ref<DataOption[]>([
+  {
+    id: "MAINTENANCE",
+    name: "เงินบำรุง",
+  },
+  {
+    id: "FUND",
+    name: "เงินกองทุน",
+  },
+  {
+    id: "SUBSIDY",
+    name: "เงินอุดหนุน",
+  },
+]);
+
+/** ดึงข้อมูล จังหวัด */
+const getProvince = async () => {
+  showLoader();
+  http
+    .get(config.API.province)
+    .then((res) => {
+      const data = res.data.result;
+
+      provinceOp.value = data.map((item: DataOption) => ({
+        id: item.id,
+        name: item.name,
+      }));
+      provinceOpMain.value = provinceOp.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/** ตัวแปร */
+const formData = reactive<FormData>({
+  dateStart: null, //วันที่เริ่มต้น
+  dateEnd: null, //วันที่สิ้นสุด
+  totalDate: null, //รวมระยะเวลา (วัน)
+  developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
+  budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
+  budgetSub: "",
+  accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
+  receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
+  approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
+  budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
+  issues: "", //ประเด็นความเสี่ยง
+  chance: null, //โอกาสที่จะเกิด
+  effects: null, //ผลกระทบจากการเกิด
+  riskLevel: "", //ระดับความเสี่ยง
+  riskManagement: "", //เเนวทางการบริหารความเสี่ยง
+  expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
+  topicAcademic: "", //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
+  addressAcademic: "", //สถานที่ฝึกอบรม ศึกษาดูงาน
+  provinceActualId: "", //จังหวัด(ข้อมูลวิชาการ)
+});
+
+/** ดึงข้อมูล */
+function fetchData() {
+  http
+    .get(config.API.developmentMainTab("tab5", projectId.value))
+    .then((res) => {
+      const data = res.data.result;
+      formData.dateStart = data.dateStart;
+      formData.dateEnd = data.dateEnd;
+      formData.totalDate = data.totalDate;
+      formData.developmentAddresss = data.developmentAddresss.map((e: any) => ({
+        address: e.address,
+        provinceId: e.provinceId,
+      }));
+      formData.budget = data.budget;
+      formData.budgetSub = data.budgetSub;
+      formData.accept = data.accept;
+      formData.receive = data.receive;
+      formData.approved = data.approved;
+      formData.budgetPay = data.budgetPay;
+      formData.issues = data.issues;
+      formData.chance = Number(data.chance);
+      formData.effects = Number(data.effects);
+      formData.riskLevel = data.riskLevel;
+      formData.riskManagement = data.riskManagement;
+      formData.expect = data.expect;
+      formData.topicAcademic = data.topicAcademic;
+      formData.addressAcademic = data.addressAcademic;
+      formData.provinceActualId = data.provinceActualId;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ฟังชั่นเคลียค่าวันสิ้นสุดเมื่อวันสิ้นสุดมากกว่าวันเริ่ม */
+function changeDateStart() {
+  if (formData.dateStart !== null && formData.dateEnd !== null) {
+    const startDate = new Date(formData.dateStart);
+    const endDate = new Date(formData.dateEnd);
+    if (startDate > endDate) {
+      formData.dateEnd = null;
+      formData.totalDate = null;
+    } else {
+      formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
+    }
+  }
+}
+
+/** ฟังชั่น เก็บค่า ระยะกี่วันจากวันเริ่ม */
+function changeDateEnd() {
+  formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
+}
+
+/**
+ * Fuction Filter จังหวัด
+ * @param val ค่าตัวพิมพ์ค้นหา
+ * @param update ทุกครั้งที่พิมพ์ค่า
+ */
+const filterSelector = (val: string, update: Function) => {
+  update(() => {
+    provinceOp.value = provinceOpMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+};
+
+/** ระดับความเสี่ยงของโครงการ option */
+async function calRiskLevel() {
+  if (formData.chance && formData.effects) {
+    const riskLevel =
+      (await Number(formData.chance)) * Number(formData.effects);
+    formData.riskLevel =
+      riskLevel == 1
+        ? "น้อยมาก"
+        : riskLevel == 2
+        ? "น้อย"
+        : riskLevel == 3 || riskLevel == 4 || riskLevel == 6
+        ? "ปานกลาง"
+        : riskLevel == 5 || riskLevel == 8 || riskLevel == 9 || riskLevel == 10
+        ? "สูง"
+        : riskLevel == 12 ||
+          riskLevel == 15 ||
+          riskLevel == 16 ||
+          riskLevel == 20 ||
+          riskLevel == 25
+        ? "สูงมาก"
+        : "";
+  }
+}
+
+/** บันทึกข้อมูล */
+function onSubmit() {
+  // dialogConfirm($q, async () => {
+  showLoader();
+  formData.totalDate = Number(formData.totalDate);
+  formData.accept =
+    typeof formData.accept === "string"
+      ? Number(formData.accept.replace(/,/g, ""))
+      : formData.accept;
+  formData.receive =
+    typeof formData.receive === "string"
+      ? Number(formData.receive.replace(/,/g, ""))
+      : formData.receive;
+  formData.approved =
+    typeof formData.approved === "string"
+      ? Number(formData.approved.replace(/,/g, ""))
+      : formData.approved;
+  formData.budgetPay =
+    typeof formData.budgetPay === "string"
+      ? Number(formData.budgetPay.replace(/,/g, ""))
+      : formData.budgetPay;
+
+  http
+    .put(config.API.developmentMainTab("tab5", projectId.value), formData)
+    .then(() => {
+      // fetchData();
+      // success($q, "บันทึกข้อมูลสำเร็จ");
+      step.value == "next" ? props.nextStep() : props.prevStep();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  // });
+}
+
+/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
+onMounted(() => {
+  fetchData();
+  getProvince();
+});
+</script>
+
+<template>
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <div class="row q-pa-md q-col-gutter-sm">
+      <div class="col-3">
+        <q-select
+          :readonly="checkRoutePermission"
+          outlined
+          dense
+          v-model="formData.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="formData.budget === 'OUTSIDEBUDGET'"
+          outlined
+          dense
+          :readonly="checkRoutePermission"
+          v-model="formData.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
+              :readonly="checkRoutePermission"
+              dense
+              class="inputgreen"
+              v-model="formData.accept"
+              label="จํานวนงบประมาณที่ขอรับการจัดสรร ฯ"
+              mask="###,###,###,###,###"
+              reverse-fill-mask
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              outlined
+              :readonly="checkRoutePermission"
+              dense
+              class="inputgreen"
+              v-model="formData.receive"
+              mask="###,###,###,###,###"
+              reverse-fill-mask
+              label="จํานวนงบประมาณที่ได้รับการจัดสรร ฯ"
+            />
+          </div>
+          <div v-if="status == 'FINISH'" class="col-3">
+            <q-input
+              outlined
+              :readonly="checkRoutePermission"
+              dense
+              class="inputgreen"
+              v-model="formData.approved"
+              hide-bottom-space
+              mask="###,###,###,###,###"
+              label="จํานวนงบประมาณที่ได้รับอนุมัติ"
+              reverse-fill-mask
+            />
+          </div>
+          <div v-if="status == 'FINISH'" class="col-3">
+            <q-input
+              outlined
+              :readonly="checkRoutePermission"
+              dense
+              class="inputgreen"
+              v-model="formData.budgetPay"
+              mask="###,###,###,###,###"
+              reverse-fill-mask
+              label="จํานวนงบประมาณที่จ่ายจริง"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <q-separator />
+    <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
+      <q-btn
+        rounded
+        label="ก่อนหน้า"
+        icon="mdi-chevron-left"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-mr-xs"
+        style="width: 120px"
+        @click="step = 'prev'"
+      >
+      </q-btn>
+      <q-btn
+        rounded
+        label="ถัดไป"
+        icon-right="mdi-chevron-right"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-ml-xs"
+        style="width: 120px"
+        @click="step = 'next'"
+      >
+      </q-btn>
+    </div>
+  </q-form>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/15_development/components/DialogRecordPerson.vue b/src/modules/15_development/components/DialogRecordPerson.vue
index 290aa1f9a..06ea8b5a4 100644
--- a/src/modules/15_development/components/DialogRecordPerson.vue
+++ b/src/modules/15_development/components/DialogRecordPerson.vue
@@ -197,7 +197,10 @@ watch(
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader :tittle="'เพิ่มรายชื่อ'" :close="onCloseDialog" />
+        <DialogHeader
+          :tittle="'เพิ่มรายชื่อผู้ผ่านการอบรม'"
+          :close="onCloseDialog"
+        />
         <q-separator />
         <q-card-section>
           <div class="row q-col-gutter-md">
diff --git a/src/modules/15_development/components/FollowResult.vue b/src/modules/15_development/components/FollowResult.vue
index 393f05c2c..c6f69eebb 100644
--- a/src/modules/15_development/components/FollowResult.vue
+++ b/src/modules/15_development/components/FollowResult.vue
@@ -54,6 +54,12 @@ const projectId = ref<string>(route.params.id.toLocaleString());
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
+const status = defineModel<string>("status", { required: true });
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+  nextStep: { type: Function, required: true },
+});
+const step = ref<string>("");
 /** หัวตาราง */
 const rows = ref<DevelopmentEvaluations[]>([]); // ข้อมูลรายการ
 const columns = ref<QTableProps["columns"]>([
@@ -248,29 +254,30 @@ function onClickDeleteIndicator(id: string) {
 
 /** save Main data */
 function onSubmit() {
-  dialogConfirm($q, () => {
-    if (formProject.project === "NOOFFER") {
-      formProject.isNoPass = false;
-      formProject.isPassAllocate = false;
-      formProject.isPassNoAllocate = false;
-    } else {
-      formProject.isBudget = false;
-      formProject.isOutBudget = false;
-    }
-    showLoader();
-    http
-      .put(config.API.developmentMainTab("tab4", projectId.value), formProject)
-      .then(() => {
-        fetchData();
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
+  // dialogConfirm($q, () => {
+  if (formProject.project === "NOOFFER") {
+    formProject.isNoPass = false;
+    formProject.isPassAllocate = false;
+    formProject.isPassNoAllocate = false;
+  } else {
+    formProject.isBudget = false;
+    formProject.isOutBudget = false;
+  }
+  showLoader();
+  http
+    .put(config.API.developmentMainTab("tab4", projectId.value), formProject)
+    .then(() => {
+      // fetchData();
+      // success($q, "บันทึกข้อมูลสำเร็จ");
+      step.value == "next" ? props.nextStep() : props.prevStep();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  // });
 }
 
 /** fetchData in page  */
@@ -424,19 +431,34 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <q-separator v-if="!checkRoutePermission" />
-      <q-card-actions align="right">
-        <q-btn
-          v-if="!checkRoutePermission"
-          unelevated
-          label="บันทึก"
-          id="onSubmit"
-          type="submit"
-          color="public"
-          class="q-px-md"
-        >
-          <q-tooltip>บันทึกข้อมูล</q-tooltip>
-        </q-btn>
+      <q-separator />
+      <q-card-actions align="center">
+        <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
+          <q-btn
+            rounded
+            label="ก่อนหน้า"
+            icon="mdi-chevron-left"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-mr-xs"
+            style="width: 120px"
+            @click="step = 'prev'"
+          >
+          </q-btn>
+          <q-btn
+            rounded
+            label="ถัดไป"
+            icon-right="mdi-chevron-right"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-ml-xs"
+            style="width: 120px"
+            @click="step = 'next'"
+          >
+          </q-btn>
+        </div>
       </q-card-actions>
     </q-form>
   </q-card>
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index a6e57a062..24b854252 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -16,6 +16,8 @@ import Other from "@/modules/15_development/components/Other.vue"; // อื่
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import Budget from "@/modules/15_development/components/Budget.vue";
+import Risk from "@/modules/15_development/components/Risk.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -25,12 +27,36 @@ const store = useDevelopmentDataStore();
 const { success, showLoader, hideLoader, messageError, dialogConfirm } =
   useCounterMixin();
 
-const checkRoutePermission = ref<boolean>(route.name == 'developmentDetailPage')
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 const projectId = ref<string>(route.params.id.toLocaleString());
 const tab = ref<string>("BasicInfo");
 const status = ref<string>("ONGOING");
+const step = ref<string[]>([
+  "BasicInfo",
+  "Target",
+  "ProjectDetail",
+  "Budget",
+  "Risk",
+  "FollowResult",
+  "Other",
+  "Result",
+]);
 
+function prevStep() {
+  const index = step.value.indexOf(tab.value);
+  if (index > 0) {
+    tab.value = step.value[index - 1];
+  }
+}
+function nextStep() {
+  const index = step.value.indexOf(tab.value);
+  if (index < step.value.length - 1) {
+    tab.value = step.value[index + 1];
+  }
+}
 /**
  * function fetch สถานะ Project
  * @param id projectId
@@ -91,7 +117,11 @@ onMounted(() => {
       color="primary"
       @click="router.push('/development')"
     />
-    {{ checkRoutePermission ? 'รายละเอียดโครงการ/หลักสูตรการฝึกอบรม':`${title}โครงการ/หลักสูตรการฝึกอบรม` }}
+    {{
+      checkRoutePermission
+        ? "รายละเอียดโครงการ/หลักสูตรการฝึกอบรม"
+        : `${title}โครงการ/หลักสูตรการฝึกอบรม`
+    }}
     <q-space />
     <div v-if="!checkRoutePermission"></div>
     <q-btn
@@ -103,7 +133,11 @@ onMounted(() => {
     >
       <q-tooltip>เสร็จสิ้นโครงการ</q-tooltip>
     </q-btn>
-    <q-badge v-else-if="status !== 'ONGOING' || !checkRoutePermission" outline color="primary" class="q-px-sm q-py-xs"
+    <q-badge
+      v-else-if="status !== 'ONGOING' || !checkRoutePermission"
+      outline
+      color="primary"
+      class="q-px-sm q-py-xs"
       >เสร็จสิ้นโครงการ</q-badge
     >
   </div>
@@ -122,23 +156,44 @@ onMounted(() => {
       <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
       <q-tab name="Target" label="เป้าหมาย" />
       <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
+      <q-tab name="Budget" label="งบประมาณ" />
+      <q-tab name="Risk" label="ความเสี่ยงและประโยชน์ที่จะได้รับ" />
       <q-tab name="FollowResult" label="การติดตามประเมินผล" />
       <q-tab name="Other" label="อื่นๆ" />
+      <!-- v-if="status !== 'ONGOING'" -->
       <!-- <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 />
+          <BasicInfo :next-step="nextStep" />
         </q-tab-panel>
-        <q-tab-panel name="Target"> <Target /></q-tab-panel>
+        <q-tab-panel name="Target">
+          <Target :prev-step="prevStep" :next-step="nextStep"
+        /></q-tab-panel>
         <q-tab-panel name="ProjectDetail" style="padding: 0px">
-          <ProjectDetail />
+          <ProjectDetail :prev-step="prevStep" :next-step="nextStep" />
+        </q-tab-panel>
+        <q-tab-panel name="Budget" style="padding: 0px">
+          <Budget
+            :status="status"
+            :prev-step="prevStep"
+            :next-step="nextStep"
+          />
+        </q-tab-panel>
+        <q-tab-panel name="Risk" style="padding: 0px">
+          <Risk :status="status" :prev-step="prevStep" :next-step="nextStep" />
+        </q-tab-panel>
+        <q-tab-panel name="FollowResult">
+          <FollowResult
+            :status="status"
+            :prev-step="prevStep"
+            :next-step="nextStep"
+          />
         </q-tab-panel>
-        <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
         <q-tab-panel name="Other" style="padding: 0px">
-          <Other :status="status" />
+          <Other :status="status" :prev-step="prevStep" />
         </q-tab-panel>
         <!-- <q-tab-panel name="Record"> <Record /> </q-tab-panel> -->
       </q-tab-panels>
diff --git a/src/modules/15_development/components/Other.vue b/src/modules/15_development/components/Other.vue
index 349b67bb0..50b3e11ae 100644
--- a/src/modules/15_development/components/Other.vue
+++ b/src/modules/15_development/components/Other.vue
@@ -25,6 +25,10 @@ const projectId = ref<string>(route.params.id.toLocaleString());
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+});
+
 const status = defineModel<string>("status", { required: true });
 const provinceOp = ref<DataOption[]>([]);
 const provinceOpMain = ref<DataOption[]>([]);
@@ -211,39 +215,40 @@ function onClickDeleteLocation(index: number) {
 
 /** บันทึกข้อมูล */
 function onSubmit() {
-  dialogConfirm($q, async () => {
-    showLoader();
-    formData.totalDate = Number(formData.totalDate);
-    formData.accept =
-      typeof formData.accept === "string"
-        ? Number(formData.accept.replace(/,/g, ""))
-        : formData.accept;
-    formData.receive =
-      typeof formData.receive === "string"
-        ? Number(formData.receive.replace(/,/g, ""))
-        : formData.receive;
-    formData.approved =
-      typeof formData.approved === "string"
-        ? Number(formData.approved.replace(/,/g, ""))
-        : formData.approved;
-    formData.budgetPay =
-      typeof formData.budgetPay === "string"
-        ? Number(formData.budgetPay.replace(/,/g, ""))
-        : formData.budgetPay;
+  // dialogConfirm($q, async () => {
+  showLoader();
+  formData.totalDate = Number(formData.totalDate);
+  formData.accept =
+    typeof formData.accept === "string"
+      ? Number(formData.accept.replace(/,/g, ""))
+      : formData.accept;
+  formData.receive =
+    typeof formData.receive === "string"
+      ? Number(formData.receive.replace(/,/g, ""))
+      : formData.receive;
+  formData.approved =
+    typeof formData.approved === "string"
+      ? Number(formData.approved.replace(/,/g, ""))
+      : formData.approved;
+  formData.budgetPay =
+    typeof formData.budgetPay === "string"
+      ? Number(formData.budgetPay.replace(/,/g, ""))
+      : formData.budgetPay;
 
-    http
-      .put(config.API.developmentMainTab("tab5", projectId.value), formData)
-      .then(() => {
-        fetchData();
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
+  http
+    .put(config.API.developmentMainTab("tab5", projectId.value), formData)
+    .then(() => {
+      // fetchData();
+      // success($q, "บันทึกข้อมูลสำเร็จ");
+      props.prevStep();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  // });
 }
 
 /** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
@@ -423,7 +428,7 @@ onMounted(() => {
       </div>
       <div class="col-4">
         <q-select
-        :readonly="checkRoutePermission"
+          :readonly="checkRoutePermission"
           outlined
           dense
           v-model="formData.budget"
@@ -534,7 +539,7 @@ onMounted(() => {
       </div>
       <div class="col-3">
         <q-select
-        :readonly="checkRoutePermission"
+          :readonly="checkRoutePermission"
           outlined
           dense
           class="inputgreen"
@@ -631,17 +636,30 @@ onMounted(() => {
         >
       </div>
     </div>
-    <q-separator v-if="!checkRoutePermission"/>
-    <div class="text-right q-pa-sm" v-if="!checkRoutePermission">
+    <q-separator />
+    <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
       <q-btn
-        unelevated
-        label="บันทึก"
+        rounded
+        label="ก่อนหน้า"
+        icon="mdi-chevron-left"
         id="onSubmit"
         type="submit"
         color="public"
-        class="q-px-md"
+        class="q-mr-xs"
+        style="width: 120px"
+      >
+      </q-btn>
+      <q-btn
+        disabled
+        rounded
+        label="ถัดไป"
+        icon-right="mdi-chevron-right"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-ml-xs"
+        style="width: 120px"
       >
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
     </div>
   </q-form>
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index d0de113da..3c4973d01 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -16,6 +16,11 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+  nextStep: { type: Function, required: true },
+});
+const step = ref<string>("");
 const reasonPlanned70 = ref<string>("");
 const reasonPlanned20 = ref<string>("");
 const reasonPlanned10 = ref<string>("");
@@ -267,50 +272,51 @@ function fetchTree() {
 
 /** Main save */
 async function onSubmit() {
-  dialogConfirm($q, async () => {
-    showLoader();
-    await http
-      .put(config.API.developmentMainTab("tab3", projectId.value), {
-        developmentProjectTypes: formData.developmentProjectTypes,
-        projectModal: formData.projectModal,
-        isBackPlanned: formData.isBackPlanned,
-        isHoldPlanned: formData.isHoldPlanned,
-        projectDayBackPlanned: formData.isBackPlanned
-          ? formData.projectDayBackPlanned
-          : null,
-        projectDayHoldPlanned: formData.projectDayHoldPlanned,
-        projectNigthHoldPlanned: formData.projectNigthHoldPlanned,
-        developmentProjectTechniquePlanneds:
-          formData.developmentProjectTechniquePlanneds,
-        isBackActual: formData.isBackActual,
-        isHoldActual: formData.isHoldActual,
-        projectDayBackActual: formData.projectDayBackActual,
-        projectDayHoldActual: formData.projectDayHoldActual,
-        projectNigthHoldActual: formData.projectNigthHoldActual,
-        developmentProjectTechniqueActuals:
-          formData.developmentProjectTechniqueActuals,
-        projectModalActual: formData.projectModalActual,
-        projectModalPlanned: formData.projectModalPlanned,
-        strategyChildPlannedId: formData.strategyChildPlannedId,
-        strategyChildPlannedNode: formData.strategyChildPlannedNode,
-        strategyChildActualId: formData.strategyChildActualId,
-        strategyChildActualNode: formData.strategyChildActualNode,
-        reasonPlanned70: reasonPlanned70.value,
-        reasonPlanned20: reasonPlanned20.value,
-        reasonPlanned10: reasonPlanned10.value,
-        reasonActual70: reasonActual70.value,
-        reasonActual20: reasonActual20.value,
-        reasonActual10: reasonActual10.value,
-      })
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        fetchData();
-      })
-      .catch((err) => {
-        messageError($q, err);
-        hideLoader();
-      });
-  });
+  // dialogConfirm($q, async () => {
+  showLoader();
+  await http
+    .put(config.API.developmentMainTab("tab3", projectId.value), {
+      developmentProjectTypes: formData.developmentProjectTypes,
+      projectModal: formData.projectModal,
+      isBackPlanned: formData.isBackPlanned,
+      isHoldPlanned: formData.isHoldPlanned,
+      projectDayBackPlanned: formData.isBackPlanned
+        ? formData.projectDayBackPlanned
+        : null,
+      projectDayHoldPlanned: formData.projectDayHoldPlanned,
+      projectNigthHoldPlanned: formData.projectNigthHoldPlanned,
+      developmentProjectTechniquePlanneds:
+        formData.developmentProjectTechniquePlanneds,
+      isBackActual: formData.isBackActual,
+      isHoldActual: formData.isHoldActual,
+      projectDayBackActual: formData.projectDayBackActual,
+      projectDayHoldActual: formData.projectDayHoldActual,
+      projectNigthHoldActual: formData.projectNigthHoldActual,
+      developmentProjectTechniqueActuals:
+        formData.developmentProjectTechniqueActuals,
+      projectModalActual: formData.projectModalActual,
+      projectModalPlanned: formData.projectModalPlanned,
+      strategyChildPlannedId: formData.strategyChildPlannedId,
+      strategyChildPlannedNode: formData.strategyChildPlannedNode,
+      strategyChildActualId: formData.strategyChildActualId,
+      strategyChildActualNode: formData.strategyChildActualNode,
+      reasonPlanned70: reasonPlanned70.value,
+      reasonPlanned20: reasonPlanned20.value,
+      reasonPlanned10: reasonPlanned10.value,
+      reasonActual70: reasonActual70.value,
+      reasonActual20: reasonActual20.value,
+      reasonActual10: reasonActual10.value,
+    })
+    .then(() => {
+      // success($q, "บันทึกข้อมูลสำเร็จ");
+      // fetchData();
+      step.value == "next" ? props.nextStep() : props.prevStep();
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+  // });
 }
 
 /**
@@ -874,7 +880,35 @@ onMounted(() => {
         </q-card-section>
       </q-card>
     </div>
-    <q-separator v-if="!checkRoutePermission" />
+
+    <q-separator />
+    <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
+      <q-btn
+        rounded
+        label="ก่อนหน้า"
+        icon="mdi-chevron-left"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-mr-xs"
+        style="width: 120px"
+        @click="step = 'prev'"
+      >
+      </q-btn>
+      <q-btn
+        rounded
+        label="ถัดไป"
+        icon-right="mdi-chevron-right"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-ml-xs"
+        style="width: 120px"
+        @click="step = 'next'"
+      >
+      </q-btn>
+    </div>
+    <!-- <q-separator v-if="!checkRoutePermission" />
 
     <div class="text-right q-pa-sm" v-if="!checkRoutePermission">
       <q-btn
@@ -887,7 +921,7 @@ onMounted(() => {
       >
         <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
-    </div>
+    </div> -->
   </q-form>
 </template>
 
diff --git a/src/modules/15_development/components/Risk.vue b/src/modules/15_development/components/Risk.vue
new file mode 100644
index 000000000..e71892a43
--- /dev/null
+++ b/src/modules/15_development/components/Risk.vue
@@ -0,0 +1,374 @@
+<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";
+
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import type { FormData } from "@/modules/15_development/interface/request/Other";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const {
+  showLoader,
+  hideLoader,
+  diffDay,
+  date2Thai,
+  messageError,
+  dialogConfirm,
+  success,
+} = useCounterMixin();
+const route = useRoute();
+const projectId = ref<string>(route.params.id.toLocaleString());
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
+const status = defineModel<string>("status", { required: true });
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+  nextStep: { type: Function, required: true },
+});
+const step = ref<string>("");
+
+const provinceOp = ref<DataOption[]>([]);
+const provinceOpMain = ref<DataOption[]>([]);
+const budgetOp = ref<DataOption[]>([
+  {
+    id: "REGULATIONBUDGET",
+    name: "งบตามข้อบัญญัติ",
+  },
+  {
+    id: "OUTSIDEBUDGET",
+    name: "เงินนอกงบประมาณ",
+  },
+  {
+    id: "BANGKOKBUDGET",
+    name: "ไม่ใช้งบประมาณ",
+  },
+]);
+const budgetSubOp = ref<DataOption[]>([
+  {
+    id: "MAINTENANCE",
+    name: "เงินบำรุง",
+  },
+  {
+    id: "FUND",
+    name: "เงินกองทุน",
+  },
+  {
+    id: "SUBSIDY",
+    name: "เงินอุดหนุน",
+  },
+]);
+
+/** ดึงข้อมูล จังหวัด */
+const getProvince = async () => {
+  showLoader();
+  http
+    .get(config.API.province)
+    .then((res) => {
+      const data = res.data.result;
+
+      provinceOp.value = data.map((item: DataOption) => ({
+        id: item.id,
+        name: item.name,
+      }));
+      provinceOpMain.value = provinceOp.value;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/** ตัวแปร */
+const formData = reactive<FormData>({
+  dateStart: null, //วันที่เริ่มต้น
+  dateEnd: null, //วันที่สิ้นสุด
+  totalDate: null, //รวมระยะเวลา (วัน)
+  developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
+  budget: "", //ประเภทงบประมาณ(งบตามข้อบัญญัติ->REGULATIONBUDGET, งบประมาณกรุงเทพมหานคร->BANGKOKBUDGET, เงินนอกงบประมาณ->OUTSIDEBUDGET)
+  budgetSub: "",
+  accept: null, //จํานวนงบประมาณที่ขอรับการจัดสรรฯ
+  receive: null, //จํานวนงบประมาณที่ได้รับการจัดสรรฯ
+  approved: null, //จํานวนงบประมาณที่ได้รับอนุมัติ
+  budgetPay: null, //จํานวนงบประมาณที่จ่ายจริง
+  issues: "", //ประเด็นความเสี่ยง
+  chance: null, //โอกาสที่จะเกิด
+  effects: null, //ผลกระทบจากการเกิด
+  riskLevel: "", //ระดับความเสี่ยง
+  riskManagement: "", //เเนวทางการบริหารความเสี่ยง
+  expect: "", //ประโยชน์ที่คาดว่าจะได้รับ
+  topicAcademic: "", //หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน
+  addressAcademic: "", //สถานที่ฝึกอบรม ศึกษาดูงาน
+  provinceActualId: "", //จังหวัด(ข้อมูลวิชาการ)
+});
+
+/** ดึงข้อมูล */
+function fetchData() {
+  http
+    .get(config.API.developmentMainTab("tab5", projectId.value))
+    .then((res) => {
+      const data = res.data.result;
+      formData.dateStart = data.dateStart;
+      formData.dateEnd = data.dateEnd;
+      formData.totalDate = data.totalDate;
+      formData.developmentAddresss = data.developmentAddresss.map((e: any) => ({
+        address: e.address,
+        provinceId: e.provinceId,
+      }));
+      formData.budget = data.budget;
+      formData.budgetSub = data.budgetSub;
+      formData.accept = data.accept;
+      formData.receive = data.receive;
+      formData.approved = data.approved;
+      formData.budgetPay = data.budgetPay;
+      formData.issues = data.issues;
+      formData.chance = Number(data.chance);
+      formData.effects = Number(data.effects);
+      formData.riskLevel = data.riskLevel;
+      formData.riskManagement = data.riskManagement;
+      formData.expect = data.expect;
+      formData.topicAcademic = data.topicAcademic;
+      formData.addressAcademic = data.addressAcademic;
+      formData.provinceActualId = data.provinceActualId;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ฟังชั่นเคลียค่าวันสิ้นสุดเมื่อวันสิ้นสุดมากกว่าวันเริ่ม */
+function changeDateStart() {
+  if (formData.dateStart !== null && formData.dateEnd !== null) {
+    const startDate = new Date(formData.dateStart);
+    const endDate = new Date(formData.dateEnd);
+    if (startDate > endDate) {
+      formData.dateEnd = null;
+      formData.totalDate = null;
+    } else {
+      formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
+    }
+  }
+}
+
+/** ฟังชั่น เก็บค่า ระยะกี่วันจากวันเริ่ม */
+function changeDateEnd() {
+  formData.totalDate = diffDay(formData.dateStart, formData.dateEnd);
+}
+
+/**
+ * Fuction Filter จังหวัด
+ * @param val ค่าตัวพิมพ์ค้นหา
+ * @param update ทุกครั้งที่พิมพ์ค่า
+ */
+const filterSelector = (val: string, update: Function) => {
+  update(() => {
+    provinceOp.value = provinceOpMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+};
+
+/** ระดับความเสี่ยงของโครงการ option */
+async function calRiskLevel() {
+  if (formData.chance && formData.effects) {
+    const riskLevel =
+      (await Number(formData.chance)) * Number(formData.effects);
+    formData.riskLevel =
+      riskLevel == 1
+        ? "น้อยมาก"
+        : riskLevel == 2
+        ? "น้อย"
+        : riskLevel == 3 || riskLevel == 4 || riskLevel == 6
+        ? "ปานกลาง"
+        : riskLevel == 5 || riskLevel == 8 || riskLevel == 9 || riskLevel == 10
+        ? "สูง"
+        : riskLevel == 12 ||
+          riskLevel == 15 ||
+          riskLevel == 16 ||
+          riskLevel == 20 ||
+          riskLevel == 25
+        ? "สูงมาก"
+        : "";
+  }
+}
+
+/** เพิ่มข้อมูล */
+function onClickAddLocation() {
+  const data = {
+    address: "",
+    provinceId: "",
+  };
+  formData.developmentAddresss.push(data);
+}
+
+/** ลบข้อมูล */
+function onClickDeleteLocation(index: number) {
+  formData.developmentAddresss.splice(index, 1);
+}
+
+/** บันทึกข้อมูล */
+function onSubmit() {
+  // dialogConfirm($q, async () => {
+  showLoader();
+  formData.totalDate = Number(formData.totalDate);
+  formData.accept =
+    typeof formData.accept === "string"
+      ? Number(formData.accept.replace(/,/g, ""))
+      : formData.accept;
+  formData.receive =
+    typeof formData.receive === "string"
+      ? Number(formData.receive.replace(/,/g, ""))
+      : formData.receive;
+  formData.approved =
+    typeof formData.approved === "string"
+      ? Number(formData.approved.replace(/,/g, ""))
+      : formData.approved;
+  formData.budgetPay =
+    typeof formData.budgetPay === "string"
+      ? Number(formData.budgetPay.replace(/,/g, ""))
+      : formData.budgetPay;
+
+  http
+    .put(config.API.developmentMainTab("tab5", projectId.value), formData)
+    .then(() => {
+      // fetchData();
+      // success($q, "บันทึกข้อมูลสำเร็จ");
+      step.value == "next" ? props.nextStep() : props.prevStep();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  // });
+}
+
+/** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
+onMounted(() => {
+  fetchData();
+  getProvince();
+});
+</script>
+
+<template>
+  <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">
+        <q-input
+          outlined
+          :readonly="checkRoutePermission"
+          dense
+          class="inputgreen"
+          v-model="formData.issues"
+          label="ประเด็นความเสี่ยง"
+          type="textarea"
+        />
+      </div>
+      <div class="col-3">
+        <q-select
+          outlined
+          dense
+          class="inputgreen"
+          :readonly="checkRoutePermission"
+          v-model="formData.chance"
+          label="โอกาสที่จะเกิด"
+          :options="[1, 2, 3, 4]"
+          @update:model-value="calRiskLevel"
+        ></q-select>
+      </div>
+      <div class="col-3">
+        <q-select
+          :readonly="checkRoutePermission"
+          outlined
+          dense
+          class="inputgreen"
+          v-model="formData.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="formData.riskLevel"
+          label="ระดับความเสี่ยง"
+        />
+      </div>
+      <div class="col-12">
+        <q-input
+          outlined
+          :readonly="checkRoutePermission"
+          dense
+          class="inputgreen"
+          v-model="formData.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
+          :readonly="checkRoutePermission"
+          dense
+          class="inputgreen"
+          v-model="formData.expect"
+          label="ประโยชน์ที่คาดว่าจะได้รับ"
+          type="textarea"
+        />
+      </div>
+    </div>
+    <q-separator />
+    <div class="text-center q-pa-sm" v-if="!checkRoutePermission">
+      <q-btn
+        rounded
+        label="ก่อนหน้า"
+        icon="mdi-chevron-left"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-mr-xs"
+        style="width: 120px"
+        @click="step = 'prev'"
+      >
+      </q-btn>
+      <q-btn
+        rounded
+        label="ถัดไป"
+        icon-right="mdi-chevron-right"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-ml-xs"
+        style="width: 120px"
+        @click="step = 'next'"
+      >
+      </q-btn>
+    </div>
+  </q-form>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index 9f133d3f3..c0c6c8088 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -30,6 +30,10 @@ const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
+const props = defineProps({
+  prevStep: { type: Function, required: true },
+  nextStep: { type: Function, required: true },
+});
 const plannedGoals = ref<ResPlannedGoals[]>([]);
 const plannedPeoples = ref<ResPeople[]>([]);
 const actualGoals = ref<ResActualGoals[]>([]);
@@ -802,7 +806,7 @@ onMounted(() => {
             <q-tr :props="props">
               <q-td>
                 <q-btn
-                v-if="!checkRoutePermission"
+                  v-if="!checkRoutePermission"
                   round
                   flat
                   color="primary"
@@ -834,6 +838,33 @@ onMounted(() => {
     </div>
   </q-card>
 
+  <q-card v-if="!checkRoutePermission" bordered>
+    <div class="text-center q-pa-sm">
+      <q-btn
+        rounded
+        label="ก่อนหน้า"
+        icon="mdi-chevron-left"
+        id="onSubmit"
+        color="public"
+        class="q-mr-xs"
+        style="width: 120px"
+        @click="props.prevStep()"
+      >
+      </q-btn>
+      <q-btn
+        rounded
+        label="ถัดไป"
+        icon-right="mdi-chevron-right"
+        id="onSubmit"
+        color="public"
+        class="q-ml-xs"
+        style="width: 120px"
+        @click="props.nextStep()"
+      >
+      </q-btn>
+    </div>
+  </q-card>
+
   <q-dialog v-model="modalGroupTarget" persistent>
     <q-card style="width: 700px">
       <q-form greedy @submit.prevent @validation-success="onSubmitGroup">
@@ -876,7 +907,12 @@ onMounted(() => {
                 v-model="formGroupTarget.groupTargetSub"
                 :options="
                   formGroupTarget.groupTarget === 'OFFICER'
-                    ? groupSubOp.slice(0, 2)
+                    ? groupSubOp.filter(
+                        (v) =>
+                          v.id === 'OFFICER' ||
+                          v.id === 'TEACHER' ||
+                          v.id === 'EDUCATIONAL'
+                      )
                     : groupSubOp.slice(2, 5)
                 "
                 label="กลุ่มเป้าหมายย่อย"
@@ -1051,7 +1087,12 @@ onMounted(() => {
                 v-model="formGroupTarget.groupTargetSub"
                 :options="
                   formGroupTarget.groupTarget === 'OFFICER'
-                    ? groupSubOp.slice(0, 2)
+                    ? groupSubOp.filter(
+                        (v) =>
+                          v.id === 'OFFICER' ||
+                          v.id === 'TEACHER' ||
+                          v.id === 'EDUCATIONAL'
+                      )
                     : groupSubOp.slice(2, 5)
                 "
                 label="กลุ่มเป้าหมายย่อย"
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 2b520e005..192629e55 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -572,7 +572,7 @@ onMounted(() => {
                     icon="mdi-content-save-edit-outline"
                     @click.pervent="onRedirectToRecordPage(props.row.id)"
                   >
-                    <q-tooltip>บันทึกผล</q-tooltip></q-btn
+                    <q-tooltip>บันทึกผู้ผ่านการอบรม</q-tooltip></q-btn
                   >
                 </q-td>
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
diff --git a/src/modules/15_development/views/RecordPage.vue b/src/modules/15_development/views/RecordPage.vue
index 5b374177d..f779a45ab 100644
--- a/src/modules/15_development/views/RecordPage.vue
+++ b/src/modules/15_development/views/RecordPage.vue
@@ -161,7 +161,7 @@ onMounted(() => {
       color="primary"
       @click="router.go(-1)"
     />
-    {{ `บันทึกผล${title}` }}
+    {{ `บันทึกผู้ผ่านการอบรม ${title}` }}
   </div>
   <q-card flat bordered>
     <q-toolbar class="q-pa-md">
@@ -220,7 +220,7 @@ onMounted(() => {
         color="primary"
         @click="modalAddPerson = true"
       >
-        <q-tooltip>เพิ่ม</q-tooltip>
+        <q-tooltip>เพิ่มรายชื่อผู้ผ่านการอบรม</q-tooltip>
       </q-btn>
     </q-toolbar>
   </q-card>