diff --git a/src/api/leave/api.leave.ts b/src/api/leave/api.leave.ts
index 8c2b537..6101b03 100644
--- a/src/api/leave/api.leave.ts
+++ b/src/api/leave/api.leave.ts
@@ -6,16 +6,18 @@ const holiday = `${env.API_URI}/metadata/holiday/`;
 
 export default {
   listUser: () => `${retirementResign}/resign/user`,
-  listUserByType:(type:string) => `${retirementResign}/resign${type}/user`,
+  listUserByType: (type: string) => `${retirementResign}/resign${type}/user`,
   listResign: () => `${retirementResign}/resign`,
-  listResignByType: (type:string) => `${retirementResign}/resign${type}`,
+  listResignByType: (type: string) => `${retirementResign}/resign${type}`,
   resingByid: (id: string) => `${retirementResign}/resign/${id}`,
-  resingByidType: (type:string,id: string) => `${retirementResign}/resign${type}/${id}`,
+  resingByidType: (type: string, id: string) =>
+    `${retirementResign}/resign${type}/user/${id}`,
   questionnaireByid: (id: string) =>
     `${retirementResign}/resign/questionnaire/${id}`,
   listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
   cancelResign: (id: string) => `${retirementResign}/resign/cancel/${id}`,
-  cancelResignByType: (type:string,id: string) => `${retirementResign}/resign${type}/cancel/${id}`,
+  cancelResignByType: (type: string, id: string) =>
+    `${retirementResign}/resign${type}/cancel/${id}`,
 
   // คำถาม
   questionList: () => `${retirementResign}/resign/questionnaire/question`,
diff --git a/src/modules/03_retire/interface/Main.ts b/src/modules/03_retire/interface/Main.ts
index 1bb3486..28b5f01 100644
--- a/src/modules/03_retire/interface/Main.ts
+++ b/src/modules/03_retire/interface/Main.ts
@@ -62,6 +62,8 @@ interface DataOptions {
 interface RowsType {
   commanders: SeqTypeRow[];
   approvers: SeqTypeRow[];
+  cancelCommanders: SeqTypeRow[] | null;
+  cancelApprovers: SeqTypeRow[] | null;
 }
 interface SeqTypeRow {
   seq: number;
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 2e82e3b..c6c3a6c 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -144,19 +144,6 @@ const columnsCommanders = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
- * ฟังก์ชั่นเปลี่ยนเป็น string ของ status
- * @param val value ของ status true/false
- */
-function statusOrder(val: boolean) {
-  switch (val) {
-    case true:
-      return "ยับยั้ง";
-    case false:
-      return "อนุญาต";
-  }
-}
-
 /**
  * บันทึกข้อมูลการลาออก
  */
@@ -233,6 +220,8 @@ async function fectDataresign(id: string) {
       rowsApprover.value = {
         commanders: data.commanders,
         approvers: data.approvers,
+        cancelCommanders: data.cancelCommanders ?? null,
+        cancelApprovers: data.cancelApprovers ?? null,
       };
       files.value = data.docs;
       dataDetail.value = data;
@@ -398,6 +387,7 @@ onMounted(async () => {
                   ? 'col-md-3 col-xs-12'
                   : 'col-md-3 col-xs-12 inputgreen'
               "
+              menu-class-name="modalfix"
               v-model="dateLeave"
               :locale="'th'"
               autoApply
@@ -585,137 +575,308 @@ onMounted(async () => {
               </q-card>
             </div> -->
 
-            <!-- ผลการพิจารณาของผู้บังคับบัญชา -->
-            <div class="col-12 row" v-if="routeName != 'AddRetire'">
-              <q-card bordered class="row col-12 text-dark q-mt-sm">
-                <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>
-                </div>
-                <q-separator />
-                <div class="col-12">
-                  <d-table
-                    ref="table"
-                    :columns="columnsCommanders"
-                    :rows="rowsApprover?.commanders ?? []"
-                    row-key="key"
-                    flat
-                    bordered
-                    :paging="true"
-                    dense
-                    :rows-per-page-options="[1, 25, 50, 100]"
-                  >
-                    <template v-slot:header="props">
-                      <q-tr :props="props">
-                        <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.name"
-                          :props="props"
-                        >
-                          <div v-if="col.name == 'no'">
-                            {{ props.rowIndex + 1 }}
-                          </div>
+            <div class="row col-12" v-if="routeName != 'AddRetire'">
+              <div class="col-12 q-mt-sm text-weight-bold text-primary">
+                ผลการพิจารณาการขอลาออก
+              </div>
 
-                          <div v-else-if="col.name == 'approveStatus'">
+              <div class="col-12 q-mt-md">
+                <!-- ผลการพิจารณาของผู้บังคับบัญชา -->
+                <div class="col-12 row" v-if="routeName != 'AddRetire'">
+                  <q-card bordered class="row col-12 text-dark">
+                    <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>
+                    </div>
+                    <q-separator />
+                    <div class="col-12 q-pa-sm">
+                      <d-table
+                        ref="table"
+                        :columns="columnsCommanders"
+                        :rows="rowsApprover?.commanders ?? []"
+                        row-key="key"
+                        flat
+                        bordered
+                        :paging="true"
+                        dense
+                        :rows-per-page-options="[1, 25, 50, 100]"
+                      >
+                        <template v-slot:header="props">
+                          <q-tr :props="props">
+                            <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.name"
+                              :props="props"
+                            >
+                              <div v-if="col.name == 'no'">
+                                {{ props.rowIndex + 1 }}
+                              </div>
+
+                              <div v-else-if="col.name == 'approveStatus'">
+                                {{
+                                  props.row.approveStatus
+                                    ? convertStatusText(props.row.approveStatus)
+                                    : "-"
+                                }}
+                              </div>
+                              <div v-else>
+                                {{ col.value ? col.value : "-" }}
+                              </div>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </d-table>
+                    </div>
+                  </q-card>
+                </div>
+
+                <!-- ผลการพิจารณาของผู้มีอำนาจ -->
+                <div class="col-12 row" v-if="routeName != 'AddRetire'">
+                  <q-card bordered class="row col-12 text-dark q-mt-sm">
+                    <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>
+                    </div>
+                    <q-separator />
+                    <div class="row col-12 q-pa-md">
+                      <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">
                             {{
-                              props.row.approveStatus
-                                ? convertStatusText(props.row.approveStatus)
+                              rowsApprover &&
+                              rowsApprover.approvers &&
+                              rowsApprover.approvers[0]?.firstName
+                                ? `${rowsApprover?.approvers[0].prefix}${rowsApprover?.approvers[0].firstName} ${rowsApprover?.approvers[0].lastName}`
                                 : "-"
                             }}
                           </div>
-                          <div v-else>
-                            {{ col.value ? col.value : "-" }}
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">สถานะ</div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.approvers &&
+                              rowsApprover.approvers[0]?.approveStatus
+                                ? convertStatusText(
+                                    rowsApprover?.approvers[0].approveStatus
+                                  )
+                                : "-"
+                            }}
                           </div>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </d-table>
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">
+                            วันสุดท้ายที่ยับยั้ง
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.approvers &&
+                              rowsApprover.approvers[0]?.rejectDate
+                                ? date2Thai(
+                                    rowsApprover?.approvers[0].rejectDate
+                                  )
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-12 row items-start">
+                          <div class="col-12 text-top">
+                            ความคิดเห็นและเหตุผล
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.approvers &&
+                              rowsApprover.approvers[0]?.comment
+                                ? rowsApprover?.approvers[0].comment
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
                 </div>
-              </q-card>
+              </div>
             </div>
 
-            <!-- ผลการพิจารณาของผู้มีอำนาจ -->
-            <div class="col-12 row" v-if="routeName != 'AddRetire'">
-              <q-card bordered class="row col-12 text-dark q-mt-sm">
-                <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>
+            <!-- ยกเลิกการลาออก -->
+            <div
+              class="row col-12"
+              v-if="
+                routeName != 'AddRetire' &&
+                rowsApprover &&
+                rowsApprover?.cancelCommanders &&
+                rowsApprover?.cancelCommanders?.length > 0
+              "
+            >
+              <div class="col-12 q-mt-sm text-weight-bold text-red">
+                ผลการพิจารณาการขอยกเลิกลาออก
+              </div>
+
+              <div class="col-12 q-pa-sm">
+                <!-- ผลการพิจารณาของผู้บังคับบัญชา -->
+                <div class="col-12 row" v-if="routeName != 'AddRetire'">
+                  <q-card bordered class="row col-12 text-dark q-mt-sm">
+                    <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>
+                    </div>
+                    <q-separator />
+                    <div class="col-12 q-pa-sm">
+                      <d-table
+                        ref="table"
+                        :columns="columnsCommanders"
+                        :rows="rowsApprover?.cancelCommanders ?? []"
+                        row-key="key"
+                        flat
+                        bordered
+                        :paging="true"
+                        dense
+                        :rows-per-page-options="[1, 25, 50, 100]"
+                      >
+                        <template v-slot:header="props">
+                          <q-tr :props="props">
+                            <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.name"
+                              :props="props"
+                            >
+                              <div v-if="col.name == 'no'">
+                                {{ props.rowIndex + 1 }}
+                              </div>
+
+                              <div v-else-if="col.name == 'approveStatus'">
+                                {{
+                                  props.row.approveStatus
+                                    ? convertStatusText(props.row.approveStatus)
+                                    : "-"
+                                }}
+                              </div>
+                              <div v-else>
+                                {{ col.value ? col.value : "-" }}
+                              </div>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </d-table>
+                    </div>
+                  </q-card>
                 </div>
-                <q-separator />
-                <div class="row col-12 q-pa-md">
-                  <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">
-                        {{
-                          rowsApprover &&
-                          rowsApprover.approvers &&
-                          rowsApprover.approvers[0]?.firstName
-                            ? `${rowsApprover?.approvers[0].prefix}${rowsApprover?.approvers[0].firstName} ${rowsApprover?.approvers[0].lastName}`
-                            : "-"
-                        }}
+
+                <!-- ผลการพิจารณาของผู้มีอำนาจ -->
+                <div class="col-12 row" v-if="routeName != 'AddRetire'">
+                  <q-card bordered class="row col-12 text-dark q-mt-sm">
+                    <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>
                     </div>
-                    <div class="col-xs-6 row items-start">
-                      <div class="col-12 text-top">สถานะ</div>
-                      <div class="col-12 text-detail">
-                        {{
-                          rowsApprover &&
-                          rowsApprover.approvers &&
-                          rowsApprover.approvers[0]?.approveStatus
-                            ? convertStatusText(
-                                rowsApprover?.approvers[0].approveStatus
-                              )
-                            : "-"
-                        }}
+                    <q-separator />
+                    <div class="row col-12 q-pa-md">
+                      <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">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.cancelApprovers &&
+                              rowsApprover.cancelApprovers[0]?.firstName
+                                ? `${rowsApprover?.cancelApprovers[0].prefix}${rowsApprover?.cancelApprovers[0].firstName} ${rowsApprover?.cancelApprovers[0].lastName}`
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">สถานะ</div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.cancelApprovers &&
+                              rowsApprover.cancelApprovers[0]?.approveStatus
+                                ? convertStatusText(
+                                    rowsApprover?.cancelApprovers[0]
+                                      .approveStatus
+                                  )
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-6 row items-start">
+                          <div class="col-12 text-top">
+                            วันสุดท้ายที่ยับยั้ง
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.cancelApprovers &&
+                              rowsApprover.cancelApprovers[0]?.rejectDate
+                                ? date2Thai(
+                                    rowsApprover?.cancelApprovers[0].rejectDate
+                                  )
+                                : "-"
+                            }}
+                          </div>
+                        </div>
+                        <div class="col-xs-12 row items-start">
+                          <div class="col-12 text-top">
+                            ความคิดเห็นและเหตุผล
+                          </div>
+                          <div class="col-12 text-detail">
+                            {{
+                              rowsApprover &&
+                              rowsApprover.cancelApprovers &&
+                              rowsApprover.cancelApprovers[0]?.comment
+                                ? rowsApprover?.cancelApprovers[0].comment
+                                : "-"
+                            }}
+                          </div>
+                        </div>
                       </div>
                     </div>
-                    <div class="col-xs-6 row items-start">
-                      <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-                      <div class="col-12 text-detail">
-                        {{
-                          rowsApprover &&
-                          rowsApprover.approvers &&
-                          rowsApprover.approvers[0]?.rejectDate
-                            ? date2Thai(rowsApprover?.approvers[0].rejectDate)
-                            : "-"
-                        }}
-                      </div>
-                    </div>
-                    <div class="col-xs-12 row items-start">
-                      <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-                      <div class="col-12 text-detail">
-                        {{
-                          rowsApprover &&
-                          rowsApprover.approvers &&
-                          rowsApprover.approvers[0]?.comment
-                            ? rowsApprover?.approvers[0].comment
-                            : "-"
-                        }}
-                      </div>
-                    </div>
-                  </div>
+                  </q-card>
                 </div>
-              </q-card>
+              </div>
             </div>
           </div>