diff --git a/src/api/leave/api.leave.ts b/src/api/leave/api.leave.ts
index dbbf8be..24f1cb7 100644
--- a/src/api/leave/api.leave.ts
+++ b/src/api/leave/api.leave.ts
@@ -5,31 +5,33 @@ const leave = `${env.API_URI}/leave`;
 const holiday = `${env.API_URI}/metadata/holiday/`;
 
 export default {
-	listUser: () => `${retirementResign}/resign/user`,
-	listResign: () => `${retirementResign}/resign`,
-	resingByid: (id: string) => `${retirementResign}/resign/${id}`,
-	questionnaireByid: (id: string) =>
-		`${retirementResign}/resign/questionnaire/${id}`,
-	listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
-	// คำถาม
-	questionList: () => `${retirementResign}/resign/questionnaire/question`,
+  listUser: () => `${retirementResign}/resign/user`,
+  listResign: () => `${retirementResign}/resign`,
+  resingByid: (id: string) => `${retirementResign}/resign/${id}`,
+  questionnaireByid: (id: string) =>
+    `${retirementResign}/resign/questionnaire/${id}`,
+  listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
+  cancelResign: (id: string) => `${retirementResign}/resign/cancel/${id}`,
 
-	/**รายการลา */
-	leaveType: () => `${leave}/type`,
-	leaveCalendar: () => `${leave}/user/calendar`,
-	leaveTableList: () => `${leave}/user/table`,
-	leaveCancelById: (id: string) => `${leave}/user/delete/${id}`,
-	leaveStats: () => `${leave}/user/summary`,
-	leaveUser: () => `${leave}/user`,
-	leaveUserId: (id: string) => `${leave}/user/${id}`,
-	leaveUserSendId: (id: string) => `${leave}/user/send/${id}`,
-	leaveProfile: () => `${leave}/user/profile`,
-	leaveCheck: () => `${leave}/user/check`,
-	leaveReport: (id: string) => `${leave}/report/${id}`,
-	leaveSendReport: () => `${leave}/report-template/docx`,
-	leaveDocumentId: (id: string, docId: string) =>
-		`${leave}/user/file/document/${id}/${docId}`,
+  // คำถาม
+  questionList: () => `${retirementResign}/resign/questionnaire/question`,
 
-	listHolidayHistoryYearMonth: (year: number, month: number) =>
-		`${holiday}${year}/${month}`,
+  /**รายการลา */
+  leaveType: () => `${leave}/type`,
+  leaveCalendar: () => `${leave}/user/calendar`,
+  leaveTableList: () => `${leave}/user/table`,
+  leaveCancelById: (id: string) => `${leave}/user/delete/${id}`,
+  leaveStats: () => `${leave}/user/summary`,
+  leaveUser: () => `${leave}/user`,
+  leaveUserId: (id: string) => `${leave}/user/${id}`,
+  leaveUserSendId: (id: string) => `${leave}/user/send/${id}`,
+  leaveProfile: () => `${leave}/user/profile`,
+  leaveCheck: () => `${leave}/user/check`,
+  leaveReport: (id: string) => `${leave}/report/${id}`,
+  leaveSendReport: () => `${leave}/report-template/docx`,
+  leaveDocumentId: (id: string, docId: string) =>
+    `${leave}/user/file/document/${id}/${docId}`,
+
+  listHolidayHistoryYearMonth: (year: number, month: number) =>
+    `${holiday}${year}/${month}`,
 };
diff --git a/src/modules/03_retire/store.ts b/src/modules/03_retire/store.ts
index ca729ff..99e9a0b 100644
--- a/src/modules/03_retire/store.ts
+++ b/src/modules/03_retire/store.ts
@@ -17,7 +17,8 @@ export const useRestDataStore = defineStore("Rest", () => {
         return "ส่งรายชื่อไปออกคำสั่ง";
       case "DONE":
         return "ออกคำสั่งเสร็จแล้ว";
-
+      case "CANCEL":
+        return "ยกเลิกการลาออก";
       default:
         return "-";
     }
diff --git a/src/modules/03_retire/views/DialogRetire.vue b/src/modules/03_retire/views/DialogRetire.vue
index 427a4ee..9f48e7d 100644
--- a/src/modules/03_retire/views/DialogRetire.vue
+++ b/src/modules/03_retire/views/DialogRetire.vue
@@ -1,18 +1,29 @@
 <script setup lang="ts">
 import { ref, defineModel } from "vue";
-import Header from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
-
 import config from "@/app.config";
 
+/** importCompouents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
 const $q = useQuasar();
+const route = useRoute();
+
 const modal = defineModel<boolean>("modal", { required: true });
-const type = ref<string>("");
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const props = defineProps({
+  fectData: { type: Function, require: true },
+});
+
+const id = ref<string>(route.params.id.toString());
+
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai, messageError } = mixin;
+const { dialogConfirm, messageError, showLoader, hideLoader, success } = mixin;
 const reason = ref<string>("");
 
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
@@ -29,6 +40,21 @@ function onSubmit() {
   dialogConfirm(
     $q,
     () => {
+      showLoader();
+      http
+        .put(config.API.cancelResign(id.value), {
+          reason: reason.value,
+        })
+        .then(() => {
+          props.fectData?.(id.value);
+          success($q, "ยกเลิกการลาออกสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
       modal.value = false;
       reason.value = "";
     },
@@ -41,22 +67,27 @@ function onSubmit() {
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 30%">
-      <Header :tittle="`ยื่นขอยกเลิกการลาออก`" :close="close" />
-      <q-separator />
+      <q-form @submit.prevent @validation-success="validateForm">
+        <Header :tittle="`ยื่นขอยกเลิกการลาออก`" :close="close" />
+        <q-separator />
+
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="q-gutter-y-sm">
+            <q-input
+              label="เหตุผลที่ขอยกเลิกการลาออก"
+              v-model="reason"
+              outlined
+              dense
+              hide-bottom-space
+              type="textarea"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกเหตุผลที่ขอยกเลิกการลาออก'}`,
+              ]"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm">
-          <q-input
-            label="เหตุผลที่ขอยกเลิกการลาออก"
-            v-model="reason"
-            outlined
-            dense
-            type="textarea"
-          />
-        </div>
-      </q-card-section>
-      <q-separator />
-      <form @submit.prevent="validateForm">
         <q-card-actions align="right" class="bg-white text-teal">
           <!-- <q-btn flat label="OK" v-close-popup /> -->
           <q-btn
@@ -69,7 +100,7 @@ function onSubmit() {
             label="ยืนยัน"
           />
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 8876715..b3da355 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -511,7 +511,9 @@ function downloadFile(data: string) {
               <q-space />
               <q-btn
                 v-if="
-                  dataDetail.status !== 'DELETE' && dataDetail.status !== 'DONE'
+                  dataDetail.status !== 'DELETE' &&
+                  dataDetail.status !== 'DONE' &&
+                  dataDetail.status !== 'CANCEL'
                 "
                 unelevated
                 dense
@@ -540,5 +542,5 @@ function downloadFile(data: string) {
     </div>
   </div>
 
-  <Dialog v-model:modal="modal" />
+  <Dialog v-model:modal="modal" :fectData="fectDataresign" />
 </template>