diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 06a549647..9c5bb34ad 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -1,3 +1,4 @@
+import type { StringDictionary } from "quasar";
 import env from "../index";
 const retirement = `${env.API_URI}/retirement`;
 const retirementDischarge = `${retirement}/discharge`;
@@ -24,8 +25,8 @@ export default {
   listResign: () => `${retirement}/resign`,
   resignReport: `${retirement}/resign/report`,
   resingByid: (id: string) => `${retirement}/resign/${id}`,
-  resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
-  resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
+  resignConfirm: (role: String, id: string) => `${retirement}/resign/${role}/confirm/${id}`,
+  resignReject: (role: String, id: string) => `${retirement}/resign/${role}/reject/${id}`,
   listExitInterview: () => `${retirement}/resign/questionnaire`,
   ExitInterviewByid: (id: string) => `${retirement}/resign/questionnaire/${id}`,
   ExitInterviewReport: `${retirement}/resign/questionnaire/report`,
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index ea0655496..6589aa4cc 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -1,3 +1,331 @@
+<script setup lang="ts">
+import { useRouter, useRoute } from "vue-router";
+import { useQuasar, QForm } from "quasar";
+import { ref, onMounted } from "vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRetirementDataStore } from "@/modules/06_retirement/store";
+
+import CurrencyInput from "@/components/CurruncyInput.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+import type {
+  ResponseItems,
+  TypeFile,
+} from "@/modules/06_retirement/interface/response/Main";
+
+import type { QTableProps } from "quasar";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const RetirementData = useRetirementDataStore();
+
+const {
+  messageError,
+  date2Thai,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+  dialogConfirm,
+} = mixin;
+const { statusText } = RetirementData;
+
+const roleUser = ref<string>("");
+const id = ref<string>(route.params.id.toString());
+const myForm = ref<QForm | null>(null);
+const myFormConfirm = ref<QForm | null>(null);
+const edit = ref<boolean>(false);
+const dataDetail = ref<any>({
+  datetext: "",
+  activeDate: new Date(),
+  createdAt: new Date(),
+  firstName: "",
+  id: "",
+  isActive: true,
+  lastName: "",
+  location: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  prefix: "",
+  profileId: "",
+  reason: "",
+  salary: 0,
+  sendDate: new Date(),
+  status: "",
+  statustext: "",
+  fullname: "",
+});
+
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const date = ref<Date | null>(null);
+const dateLeave = ref<Date | null>(null);
+const reason = ref<string>("");
+const location = ref<string>("");
+const status = ref<string>("");
+
+const modal = ref<boolean>(false);
+const actionPass = ref<boolean>(false);
+const reasonReign = ref<string>("");
+const dateBreak = ref<Date | null>(null);
+
+const rows = ref<TypeFile[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fileName",
+    align: "left",
+    label: "ชื่อไฟล์",
+    sortable: true,
+    field: "fileName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btnMicrosoft",
+    align: "right",
+    label: "ปุ่ม",
+    sortable: true,
+    field: "btnMicrosoft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const closeModal = () => (modal.value = false);
+const openModal = () => (modal.value = true);
+
+onMounted(async () => {
+  fetchData(id.value);
+  if (keycloak.tokenParsed !== undefined) {
+    const commander = await keycloak.tokenParsed.role.includes("commander");
+    const oligarch = await keycloak.tokenParsed.role.includes("oligarch");
+    if (commander) {
+      roleUser.value = "commander";
+    } else if (oligarch) {
+      roleUser.value = "oligarch";
+    } else {
+      roleUser.value = "admin";
+    }
+    console.log(roleUser.value);
+  }
+});
+
+const diffDate = () => {
+  if (date.value !== null && dateLeave.value !== null) {
+    const time = dateLeave.value.getTime() - date.value.getTime();
+    //วันที่ขอลาออกจากราชการ - วันที่ยื่นขอลาออกจากราชการ
+    const day = time / (1000 * 3600 * 24);
+
+    if (day < 30) {
+      return true;
+    }
+    return false;
+  }
+  return false;
+};
+
+const fetchData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.resingByid(id))
+    .then((res: any) => {
+      const data = res.data.result;
+      console.log(data);
+      let list: TypeFile[] = [];
+      if (data.docs.length > 0) {
+        data.docs.map((doc: TypeFile) => {
+          list.push({
+            pathName: doc.pathName ?? "",
+            fileName: doc.fileName ?? "",
+          });
+        });
+      }
+      rows.value = list;
+      dataDetail.value = data;
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.salary ? data.salary : 0;
+      date.value = data.sendDate ? new Date(data.sendDate) : null;
+      dateLeave.value = data.activeDate ? new Date(data.activeDate) : null;
+      reason.value = data.reason ?? "";
+      location.value = data.location ?? "";
+      status.value = data.status ?? "";
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const popUp = (action: "pass" | "passNot") => {
+  reasonReign.value = "";
+  dateBreak.value = null;
+  actionPass.value = action === "pass";
+  openModal();
+};
+
+const conditionPopup = () => {
+  if (myFormConfirm.value !== null) {
+    myFormConfirm.value.validate().then(async (check) => {
+      if (check) {
+        if (actionPass.value) {
+          await confirmpopUp();
+        } else {
+          await rejectpopUp();
+        }
+      }
+    });
+  }
+};
+
+const confirmpopUp = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const body = {
+        reason: reasonReign.value,
+      };
+      await http
+        .put(config.API.resignConfirm(roleUser.value, id.value), body)
+        .then(() => {
+          console.log("ยืนยัน");
+          success($q, "การอนุมัติสำเร็จ");
+          closeModal();
+        })
+        .catch((e) => {
+          console.log(e);
+          messageError($q, e);
+        })
+        .finally(() => {
+          fetchData(id.value);
+        });
+    },
+    "ยืนยันการอนุมัติ",
+    "ต้องการยืนยันการอนุมัติการลานี้หรือไม่ ?"
+  );
+};
+
+const rejectpopUp = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      const body = {
+        reason: reasonReign.value,
+        date: dateBreak.value,
+      };
+      await http
+        .put(config.API.resignReject(roleUser.value, id.value), body)
+        .then(() => {
+          success($q, "การยับยั้งสำเร็จ");
+          closeModal();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          fetchData(id.value);
+        });
+    },
+    "ยืนยันการยับยั้ง",
+    "ต้องการยืนยันการยับยั้งนี้หรือไม่ ?"
+  );
+};
+const redirectToRegistry = (id: string) => {
+  router.push(`/registry/${id}`);
+};
+
+const conditionSave = () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลรายละเอียดการลาออก",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+
+const saveData = async () => {
+  const formData = new FormData();
+  const send = date.value !== null ? new Date(date.value).toUTCString() : "";
+  const activeDate =
+    dateLeave.value !== null ? new Date(dateLeave.value).toUTCString() : "";
+  formData.append("Location", location.value);
+  formData.append("SendDate", send);
+  formData.append("ActiveDate", activeDate);
+  formData.append("Reason", reason.value);
+  formData.append("OrganizationPositionOld", organizationPositionOld.value);
+  formData.append("PositionTypeOld", positionTypeOld.value);
+  formData.append("PositionLevelOld", positionLevelOld.value);
+  formData.append("PositionNumberOld", posNo.value);
+  formData.append("AmountOld", salary.value.toString());
+  salary;
+  showLoader();
+  await http
+    .put(config.API.resingByid(id.value), formData)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData(id.value);
+      hideLoader();
+    });
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+const statusOrder = (val: boolean) => {
+  switch (val) {
+    case true:
+      return "ยับยั้งการลาออก";
+    case false:
+      return "อนุมัติการลาออก";
+  }
+};
+</script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -75,7 +403,13 @@
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลาออก</div>
       <q-space />
-      <div class="q-gutter-x-sm" v-if="dataDetail.status === 'WAITTING'">
+      <div
+        class="q-gutter-x-sm"
+        v-if="
+          (roleUser === 'commander' && dataDetail.commanderReject === null) ||
+          (roleUser === 'oligarch' && dataDetail.oligarchReject === null)
+        "
+      >
         <q-btn
           outline
           color="primary"
@@ -167,7 +501,16 @@
               {{ props.row.fileName }}
             </q-td>
             <q-td key="btnMicrosoft" :props="props">
-              <q-btn type="a" target="_blank" :href="props.row.pathName" flat dense round color="red" icon="picture_as_pdf" >
+              <q-btn
+                type="a"
+                target="_blank"
+                :href="props.row.pathName"
+                flat
+                dense
+                round
+                color="red"
+                icon="picture_as_pdf"
+              >
                 <q-tooltip>ไฟล์ PDF</q-tooltip>
               </q-btn>
             </q-td>
@@ -222,15 +565,46 @@
       <div class="col-12 row bg-white q-col-gutter-md">
         <div class="col-xs-6 row items-start">
           <div class="col-12 text-top">สถานะ</div>
-          <div class="col-12 text-detail">{{ "อนุมัติ/ยับยั้ง" }}</div>
+          <div class="col-12 text-detail">
+            {{
+              dataDetail.commanderReject !== null
+                ? statusOrder(dataDetail.commanderReject)
+                : "-"
+            }}
+          </div>
         </div>
         <div class="col-xs-6 row items-start">
           <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-          <div class="col-12 text-detail">{{ date2Thai(new Date()) }}</div>
+          <div class="col-12 text-detail">
+            {{
+              dataDetail.commanderRejectDate !== null
+                ? date2Thai(dataDetail.commanderRejectDate)
+                : "-"
+            }}
+          </div>
         </div>
         <div class="col-xs-12 row items-start">
           <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-          <div class="col-12 text-detail">{{ "ความคิดเห็นและเหตุผล" }}</div>
+          <div
+            class="col-12 text-detail"
+            v-if="dataDetail.commanderReject === false"
+          >
+            {{
+              dataDetail.commanderApproveReason !== null
+                ? dataDetail.commanderApproveReason
+                : "-"
+            }}
+          </div>
+          <div
+            class="col-12 text-detail"
+            v-if="dataDetail.commanderReject === true"
+          >
+            {{
+              dataDetail.commanderRejectReason !== null
+                ? dataDetail.commanderRejectReason
+                : "-"
+            }}
+          </div>
         </div>
       </div>
     </div>
@@ -246,15 +620,46 @@
       <div class="col-12 row bg-white q-col-gutter-md">
         <div class="col-xs-6 row items-start">
           <div class="col-12 text-top">สถานะ</div>
-          <div class="col-12 text-detail">{{ "อนุมัติ/ยับยั้ง" }}</div>
+          <div class="col-12 text-detail">
+            {{
+              dataDetail.oligarchReject !== null
+                ? statusOrder(dataDetail.oligarchReject)
+                : "-"
+            }}
+          </div>
         </div>
         <div class="col-xs-6 row items-start">
           <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-          <div class="col-12 text-detail">{{ date2Thai(new Date()) }}</div>
+          <div class="col-12 text-detail">
+            {{
+              dataDetail.oligarchRejectDate !== null
+                ? date2Thai(dataDetail.oligarchRejectDate)
+                : "-"
+            }}
+          </div>
         </div>
         <div class="col-xs-12 row items-start">
           <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-          <div class="col-12 text-detail">{{ "ความคิดเห็นและเหตุผล" }}</div>
+          <div
+            class="col-12 text-detail"
+            v-if="dataDetail.oligarchReject == false"
+          >
+            {{
+              dataDetail.oligarchApproveReason !== null
+                ? dataDetail.oligarchApproveReason
+                : "-"
+            }}
+          </div>
+          <div
+            class="col-12 text-detail"
+            v-else-if="dataDetail.oligarchReject == true"
+          >
+            {{
+              dataDetail.oligarchRejectReason !== null
+                ? dataDetail.oligarchRejectReason
+                : "-"
+            }}
+          </div>
         </div>
       </div>
     </div>
@@ -663,14 +1068,6 @@
     </q-card>
   </q-dialog>
 </template>
-<script setup lang="ts">
-import { useRouter, useRoute } from "vue-router";
-import { useQuasar, QForm } from "quasar";
-import { ref, onMounted } from "vue";
-import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
-import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRetirementDataStore } from "@/modules/06_retirement/store";
 
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index 7e94053a7..d8ea5e799 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@@ -43,7 +43,7 @@ const $q = useQuasar();
 const modalData = ref<any>({
   salaryAmount: null,
   positionSalaryAmount: null,
-  mouthSalaryAmount: null,
+  monthSalaryAmount: null,
 });
 const myForm = ref<QForm | null>(null);
 const myFormAdd = ref<QForm | null>(null);
@@ -247,9 +247,9 @@ const fetchSalary = async (personalId: string) => {
       modalData.value = {
         salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount : null,
         positionSalaryAmount:
-          data.positionSalaryAmount !== 0 ? data.salaryAmount : null,
-        mouthSalaryAmount:
-          data.monthSalaryAmount !== 0 ? data.salaryAmount : null,
+          data.positionSalaryAmount !== 0 ? data.positionSalaryAmount : null,
+        monthSalaryAmount:
+          data.monthSalaryAmount !== 0 ? data.monthSalaryAmount : null,
       };
       //   console.log("data", modalData.value);
     })
@@ -266,7 +266,7 @@ const putSalary = async (salary: any) => {
   //   modalData.value = {
   //     salaryAmount: Number(salary.salaryAmount),
   //     positionSalaryAmount: Number(salary.positionSalaryAmount),
-  //     monthSalaryAmount: Number(salary.mouthSalaryAmount),
+  //     monthSalaryAmount: Number(salary.monthSalaryAmount),
   //   };
 
   dialogConfirm($q, async () => {
@@ -610,7 +610,7 @@ const getClass = (val: boolean) => {
                   <CurruncyInput
                     :edit="true"
                     :dense="true"
-                    v-model="modalData.mouthSalaryAmount"
+                    v-model="modalData.monthSalaryAmount"
                     :label="`${'เงินค่าตอบแทนรายเดือน'}`"
                     hide-bottom-space
                   />