diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index fb9e170f3..61bc272cc 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -70,6 +70,8 @@ const dataDetail = ref<any>({
   status: "",
   statustext: "",
   fullname: "",
+  statusMain: "",
+  cancelReason: "",
 });
 
 const workflowRef = ref<any>(null);
@@ -628,6 +630,18 @@ onMounted(async () => {
               </div>
             </div>
           </div>
+
+          <div
+            class="col-xs-12 col-sm-12 row items-start"
+            v-if="dataDetail.statusMain === 'CANCEL'"
+          >
+            <div class="col-12">
+              <div class="col-12 text-top">เหตุผลการขอยกเลิก</div>
+              <div class="col-12 text-detail text-red">
+                {{ dataDetail.cancelReason }}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </q-card>
@@ -744,7 +758,11 @@ onMounted(async () => {
               <q-space />
 
               <div
-                v-if="!checkRoutePermisson && workflowRef?.permission.isUpdate"
+                v-if="
+                  !checkRoutePermisson &&
+                  workflowRef?.permission.isUpdate &&
+                  dataDetail.statusMain !== 'CANCEL'
+                "
               >
                 <div v-if="!conditions">
                   <q-btn
@@ -819,7 +837,9 @@ onMounted(async () => {
               <div class="col-12 row">
                 <q-file
                   v-if="
-                    !checkRoutePermisson && workflowRef?.permission.isUpdate
+                    !checkRoutePermisson &&
+                    workflowRef?.permission.isUpdate &&
+                    dataDetail.statusMain !== 'CANCEL'
                   "
                   class="col-12"
                   for="#evidenceFiles"
@@ -876,7 +896,8 @@ onMounted(async () => {
                           <q-btn
                             v-if="
                               dataDetail.status == 'WAITTING' &&
-                              !checkRoutePermisson
+                              !checkRoutePermisson &&
+                              dataDetail.statusMain !== 'CANCEL'
                             "
                             dense
                             flat
@@ -959,7 +980,8 @@ onMounted(async () => {
           class="q-gutter-x-sm"
           v-if="
             workflowRef?.permission.isUpdate &&
-            dataDetail.commanderReject === null
+            dataDetail.commanderReject === null &&
+            dataDetail.statusMain !== 'CANCEL'
           "
         >
           <q-btn
@@ -1031,7 +1053,8 @@ onMounted(async () => {
           class="q-gutter-x-sm"
           v-if="
             workflowRef?.permission.isUpdate &&
-            dataDetail.oligarchReject === null
+            dataDetail.oligarchReject === null &&
+            dataDetail.statusMain !== 'CANCEL'
           "
         >
           <q-btn
@@ -1106,7 +1129,13 @@ onMounted(async () => {
           </div>
           <q-space />
 
-          <div v-if="!checkRoutePermisson && workflowRef?.permission.isUpdate">
+          <div
+            v-if="
+              !checkRoutePermisson &&
+              workflowRef?.permission.isUpdate &&
+              dataDetail.statusMain !== 'CANCEL'
+            "
+          >
             <div class="q-gutter-sm" v-if="!edit">
               <q-btn
                 outline
diff --git a/src/modules/06_retirement/components/resignEMP/ResignByid.vue b/src/modules/06_retirement/components/resignEMP/ResignByid.vue
index 6df24ab1a..2694f06a1 100644
--- a/src/modules/06_retirement/components/resignEMP/ResignByid.vue
+++ b/src/modules/06_retirement/components/resignEMP/ResignByid.vue
@@ -70,6 +70,8 @@ const dataDetail = ref<any>({
   status: "",
   statustext: "",
   fullname: "",
+  statusMain: "",
+  cancelReason: "",
 });
 
 const workflowRef = ref<any>(null);
@@ -516,10 +518,29 @@ function removeFile(fileName: string) {
   });
 }
 
+const isDirector = ref<boolean>(false);
+const isStaff = ref<boolean>(false);
+
+function fetchCheckIsofficer() {
+  http
+    .get(config.API.workflowKeycloakSystem("SYS_RESIGN_EMP"))
+    .then((res) => {
+      isStaff.value = res.data.result.isStaff;
+      isDirector.value = res.data.result.isDirector;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
 /** Hook */
 onMounted(async () => {
   showLoader();
-  await Promise.all([fetchData(id.value), fetchFile()]).finally(() => {
+  await Promise.all([
+    fetchData(id.value),
+    fetchFile(),
+    fetchCheckIsofficer(),
+  ]).finally(() => {
     hideLoader();
   });
 });
@@ -628,6 +649,18 @@ onMounted(async () => {
               </div>
             </div>
           </div>
+
+          <div
+            class="col-xs-12 col-sm-12 row items-start"
+            v-if="dataDetail.statusMain === 'CANCEL'"
+          >
+            <div class="col-12">
+              <div class="col-12 text-top">เหตุผลการขอยกเลิก</div>
+              <div class="col-12 text-detail text-red">
+                {{ dataDetail.cancelReason }}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </q-card>
@@ -742,8 +775,14 @@ onMounted(async () => {
                 เงื่อนไขต่าง ๆ
               </div>
               <q-space />
-              <!-- && workflowRef?.permission.isUpdate -->
-              <div v-if="!checkRoutePermisson">
+
+              <div
+                v-if="
+                  !checkRoutePermisson &&
+                  isStaff &&
+                  dataDetail.statusMain !== 'CANCEL'
+                "
+              >
                 <div v-if="!conditions">
                   <q-btn
                     outline
@@ -815,9 +854,12 @@ onMounted(async () => {
             <div class="col-12"><q-separator /></div>
             <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
               <div class="col-12 row">
-                <!-- && workflowRef?.permission.isUpdate -->
                 <q-file
-                  v-if="!checkRoutePermisson"
+                  v-if="
+                    !checkRoutePermisson &&
+                    isStaff &&
+                    dataDetail.statusMain !== 'CANCEL'
+                  "
                   class="col-12"
                   for="#evidenceFiles"
                   outlined
@@ -873,7 +915,9 @@ onMounted(async () => {
                           <q-btn
                             v-if="
                               dataDetail.status == 'WAITTING' &&
-                              !checkRoutePermisson
+                              !checkRoutePermisson &&
+                              isStaff &&
+                              dataDetail.statusMain !== 'CANCEL'
                             "
                             dense
                             flat
@@ -954,10 +998,7 @@ onMounted(async () => {
         <q-space />
         <div
           class="q-gutter-x-sm"
-          v-if="
-            workflowRef?.permission.isUpdate &&
-            dataDetail.commanderReject === null
-          "
+          v-if="isDirector && dataDetail.commanderReject === null  && dataDetail.statusMain !== 'CANCEL'"
         >
           <q-btn
             outline
@@ -1026,10 +1067,7 @@ onMounted(async () => {
         <q-space />
         <div
           class="q-gutter-x-sm"
-          v-if="
-            workflowRef?.permission.isUpdate &&
-            dataDetail.oligarchReject === null
-          "
+          v-if="isDirector && dataDetail.oligarchReject === null  && dataDetail.statusMain !== 'CANCEL'"
         >
           <q-btn
             outline
@@ -1102,8 +1140,7 @@ onMounted(async () => {
             แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
           </div>
           <q-space />
-          <!-- && workflowRef?.permission.isUpdate -->
-          <div v-if="!checkRoutePermisson">
+          <div v-if="!checkRoutePermisson && isStaff  && dataDetail.statusMain !== 'CANCEL'">
             <div class="q-gutter-sm" v-if="!edit">
               <q-btn
                 outline
diff --git a/src/modules/06_retirement/components/resignEMP/ResignReject.vue b/src/modules/06_retirement/components/resignEMP/ResignReject.vue
index f59ab94a8..b801948af 100644
--- a/src/modules/06_retirement/components/resignEMP/ResignReject.vue
+++ b/src/modules/06_retirement/components/resignEMP/ResignReject.vue
@@ -176,7 +176,10 @@ function onSubmit() {
       reject: !actionPass.value,
     };
     await http
-      .put(config.API.resignRejectEMP(`${roleUser.value}-cancel`, id.value), body)
+      .put(
+        config.API.resignRejectEMP(`${roleUser.value}-cancel`, id.value),
+        body
+      )
       .then(async () => {
         await fetchData(id.value);
         closeModal();
@@ -255,9 +258,24 @@ function statusOrder(val: boolean) {
   }
 }
 
+const isDirector = ref<boolean>(false);
+const isStaff = ref<boolean>(false);
+
+function fetchCheckIsofficer() {
+  http
+    .get(config.API.workflowKeycloakSystem("RETIREMENT_CANCEL_EMP"))
+    .then((res) => {
+      isStaff.value = res.data.result.isStaff;
+      isDirector.value = res.data.result.isDirector;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
 /** Hook */
 onMounted(async () => {
-  await fetchData(id.value);
+  await Promise.all([fetchData(id.value), fetchCheckIsofficer()]);
 });
 </script>
 
@@ -378,10 +396,7 @@ onMounted(async () => {
         <q-space />
         <div
           class="q-gutter-x-sm"
-          v-if="
-            workflowRef?.permission.isUpdate &&
-            dataDetail.commanderReject === null
-          "
+          v-if="isDirector && dataDetail.commanderReject === null"
         >
           <q-btn
             outline
@@ -451,10 +466,7 @@ onMounted(async () => {
 
         <div
           class="q-gutter-x-sm"
-          v-if="
-            workflowRef?.permission.isUpdate &&
-            dataDetail.oligarchReject === null
-          "
+          v-if="isDirector && dataDetail.oligarchReject === null"
         >
           <q-btn
             outline
@@ -528,7 +540,7 @@ onMounted(async () => {
           </div>
           <q-space />
           <!-- && workflowRef?.permission.isUpdate -->
-          <div v-if="!checkRoutePermisson">
+          <div v-if="!checkRoutePermisson && isStaff">
             <div class="q-gutter-sm" v-if="!edit">
               <q-btn
                 outline