diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index e15ca1ab0..15b380d4e 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -24,6 +24,7 @@ import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 import CardProfile from "@/components/CardProfile.vue";
+import WorkFlow from "@/components/Workflow/Main.vue";
 
 /** Use */
 const $q = useQuasar();
@@ -76,6 +77,7 @@ const dataDetail = ref<any>({
   fullname: "",
 });
 
+const workflowRef = ref<any>(null);
 const organizationPositionOld = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
@@ -527,568 +529,731 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.push('/retirement/resign')"
-    />
-    รายละเอียดการลาออกของ
-    {{ dataDetail.firstName + "  " + dataDetail.lastName }}
-  </div>
-
-  <CardProfile :data="dataProfile as DataProfile" />
-
-  <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>
-      <q-space />
-      <div
-        class="q-gutter-x-sm"
-        v-if="
-          (roleUser === 'officer' && dataDetail.officerReject === null) ||
-          (roleUser === 'commander' &&
-            dataDetail.commanderReject === null &&
-            dataDetail.officerReject !== null) ||
-          (roleUser === 'oligarch' &&
-            dataDetail.oligarchReject === null &&
-            dataDetail.commanderReject !== null &&
-            dataDetail.officerReject !== null)
-        "
-      >
-        <q-btn
-          outline
-          color="primary"
-          dense
-          icon-right="check"
-          class="q-px-sm"
-          label="อนุญาต"
-          @click="popUp('pass')"
-        />
-        <q-btn
-          outline
-          color="red"
-          dense
-          icon-right="close"
-          class="q-px-sm"
-          label="ยับยั้ง"
-          @click="popUp('passNot')"
-        />
-      </div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-md">
-      <div class="col-12 row bg-white q-col-gutter-md">
-        <div class="col-xs-6 col-sm-3 row items-start">
-          <div class="col-12">
-            <div class="col-12 text-top">สถานที่ยื่นขอลาออกจากราชการ</div>
-            <div class="col-12 text-detail">{{ dataDetail.location }}</div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-start">
-          <div class="col-12">
-            <div class="col-12 text-top">วันที่ยื่นขอลาออกจากราชการ</div>
-            <div class="col-12 text-detail">
-              {{ date2Thai(dataDetail.sendDate) }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-start">
-          <div class="col-12">
-            <div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
-            <div class="col-12 text-detail">{{ dataDetail.reason }}</div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-start">
-          <div class="col-12">
-            <div class="col-12 text-top">วันที่ขอลาออกจากราชการ</div>
-            <div
-              :class="
-                diffDate()
-                  ? 'col-12 text-detail text-red text-bold'
-                  : 'col-12 text-detail'
-              "
-            >
-              {{ date2Thai(dataDetail.activeDate) }}
-            </div>
-            <div
-              :class="
-                diffDate()
-                  ? 'col-12 text-detail text-red text-bold'
-                  : 'col-12 text-detail'
-              "
-            >
-              {{ diffDate() ? "(ยื่นขอลาออกน้อยกว่า 30 วัน)" : "" }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <q-card v-if="rows.length > 0" 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-12"><q-separator /></div>
-    <div class="col-12">
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        row-key="fileName"
-        hide-header
-        hide-bottom
-      >
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="fileName" :props="props">
-              {{ 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-tooltip>ไฟล์ PDF</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card>
-
-  <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-12"><q-separator /></div>
-    <div class="col-12">
-      <d-table
-        :rows="rowsFileDownload"
-        :columns="columns"
-        row-key="fileName"
-        hide-header
-        hide-bottom
-      >
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="fileName" :props="props">
-              {{ props.row.fileName }}
-            </q-td>
-            <q-td key="btnMicrosoft" :props="props">
-              <q-btn
-                flat
-                dense
-                round
-                color="red"
-                icon="picture_as_pdf"
-                @click="fileDownload('pdf', props.row.fileName)"
-              >
-                <q-tooltip>ไฟล์ PDF</q-tooltip>
-              </q-btn>
-              <q-btn
-                flat
-                dense
-                round
-                color="blue"
-                icon="mdi-file-word"
-                @click="fileDownload('docx', props.row.fileName)"
-              >
-                <q-tooltip>ไฟล์ WORD</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-  </q-card>
-
-  <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="q-gutter-sm q-pa-sm">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.push('/retirement/resign')"
+      />
+      รายละเอียดการลาออกของ
+      {{ dataDetail.firstName + "  " + dataDetail.lastName }}
     </div>
 
-    <div class="col-12"><q-separator /></div>
-    <div class="row col-12 q-pa-sm q-col-gutter-sm">
-      <div class="col-6">
-        <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>
-            <q-space />
+    <CardProfile :data="dataProfile as DataProfile" />
 
-            <div
-              v-if="
-                dataDetail.status == 'WAITTING' &&
-                roleUser === 'officer' &&
-                !checkRoutePermisson
-              "
-            >
-              <div v-if="!conditions">
-                <q-btn
-                  outline
-                  color="primary"
-                  dense
-                  icon-right="mdi-file-edit-outline"
-                  class="q-px-sm"
-                  label="แก้ไข"
-                  style="width: 80px"
-                  @click="conditions = !conditions"
-                />
-              </div>
-              <div v-else class="q-gutter-x-sm">
-                <q-btn
-                  outline
-                  color="public"
-                  dense
-                  class="q-px-sm"
-                  label="บันทึก"
-                  style="width: 80px"
-                  @click="onSubmitConditions"
-                />
-                <q-btn
-                  outline
-                  color="red"
-                  dense
-                  class="q-px-sm"
-                  label="ยกเลิก"
-                  style="width: 80px"
-                  @click="clickCancelConditions"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="col-12">
-            <q-checkbox
-              v-model="isNoDebt"
-              label="ไม่เป็นหนี้สหกรณ์"
-              color="teal"
-              :disable="!conditions"
-            />
-          </div>
-          <div class="col-12">
-            <q-checkbox
-              v-model="isNoBurden"
-              label="ไม่มีภาระผูกพันค้ำประกันทุนการศึกษา"
-              color="teal"
-              :disable="!conditions"
-            />
-          </div>
-          <div class="col-12">
-            <q-checkbox
-              v-model="isDiscipline"
-              label="ไม่มีพฤติการณ์ทางวินัย"
-              color="teal"
-              :disable="!conditions"
-            />
-          </div>
-          <!-- <q-option-group
-            :options="checkboxOp"
-            type="checkbox"
-            v-model="checkboxGroup"
-            :disable="!conditions"
-          /> -->
-        </q-card>
-      </div>
-      <div class="col-6">
-        <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-12"><q-separator /></div>
-          <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
-            <div class="col-12 row">
-              <q-file
-                v-if="
-                  dataDetail.status == 'WAITTING' &&
-                  roleUser === 'officer' &&
-                  !checkRoutePermisson
-                "
-                class="col-12"
-                for="#evidenceFiles"
-                outlined
-                dense
-                v-model="file"
-                label="อัปโหลดเอกสารหลักฐานต่าง ๆ"
-                hide-bottom-space
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    v-if="file"
-                    size="14px"
-                    flat
-                    round
-                    dense
-                    color="add"
-                    icon="mdi-upload"
-                    @click="uploadFiles"
-                    ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-
-            <div v-if="fileList.length > 0" class="col-xs-12 row">
-              <q-list class="full-width rounded-borders" bordered separator>
-                <q-item
-                  v-for="File in fileList"
-                  :key="File.id"
-                  clickable
-                  v-ripple
-                >
-                  <q-item-section>{{ File.title }}</q-item-section>
-                  <q-item-section avatar>
-                    <div class="row">
-                      <div>
-                        <q-btn
-                          dense
-                          flat
-                          round
-                          size="12px"
-                          color="blue"
-                          icon="mdi-download-outline"
-                          @click="downloadFiles(File.fileName)"
-                        >
-                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                        </q-btn>
-                      </div>
-                      <div>
-                        <q-btn
-                          v-if="
-                            dataDetail.status == 'WAITTING' &&
-                            roleUser === 'officer' &&
-                            !checkRoutePermisson
-                          "
-                          dense
-                          flat
-                          round
-                          size="12px"
-                          color="red"
-                          icon="mdi-delete-outline"
-                          @click="removeFile(File.fileName)"
-                          ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                        >
-                      </div>
-                    </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </div>
-
-            <div class="col-12" v-else>
-              <q-card class="q-pa-sm" bordered> ไม่มีรายการเอกสาร </q-card>
-            </div>
-          </div>
-        </q-card>
-      </div>
-    </div>
-  </q-card>
-
-  <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">
-            {{
-              dataDetail.officerReject !== null
-                ? statusOrder(dataDetail.officerReject)
-                : "-"
-            }}
-          </div>
-        </div>
-        <div class="col-xs-6 row items-start">
-          <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-          <div class="col-12 text-detail">
-            {{
-              dataDetail.officerRejectDate !== null
-                ? date2Thai(dataDetail.officerRejectDate)
-                : "-"
-            }}
-          </div>
-        </div>
-        <div class="col-xs-12 row items-start">
-          <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-
-          <div class="col-12 text-detail">
-            {{
-              dataDetail.officerReject
-                ? dataDetail.officerRejectReason
-                : dataDetail.officerApproveReason
-            }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <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">
-            {{
-              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">
-            {{
-              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">
-            {{
-              dataDetail.commanderReject
-                ? dataDetail.commanderRejectReason
-                : dataDetail.commanderApproveReason
-            }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <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">
-            {{
-              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">
-            {{
-              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">
-            {{
-              dataDetail.oligarchReject
-                ? dataDetail.oligarchRejectReason
-                : dataDetail.oligarchApproveReason
-            }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
-
-  <q-card bordered class="row col-12 text-dark q-mt-sm">
-    <q-form
-      ref="myForm"
-      greedy
-      @submit.prevent
-      @validation-success="onSubmitAttached"
-    >
+    <!-- ข้อมูลการลาออก -->
+    <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="q-pl-sm text-weight-bold text-dark">ข้อมูลการลาออก</div>
         <q-space />
-
-        <div v-if="roleUser === 'officer' && !checkRoutePermisson">
-          <div class="q-gutter-sm" v-if="!edit">
-            <q-btn
-              outline
-              color="primary"
-              dense
-              icon-right="mdi-file-edit-outline"
-              class="q-px-sm"
-              label="แก้ไข"
-              style="width: 80px"
-              @click="edit = !edit"
-              v-if="!(status == 'REPORT' || status == 'DONE')"
-            />
-          </div>
-          <div class="q-gutter-sm" v-else>
-            <q-btn
-              outline
-              color="public"
-              dense
-              class="q-px-sm"
-              label="บันทึก"
-              style="width: 80px"
-              type="submit"
-            />
-            <q-btn
-              outline
-              color="red"
-              dense
-              class="q-px-sm"
-              label="ยกเลิก"
-              style="width: 80px"
-              @click="clickCancel"
-            />
-          </div>
+        <div
+          class="q-gutter-x-sm"
+          v-if="
+            (roleUser === 'officer' && dataDetail.officerReject === null) ||
+            (roleUser === 'commander' &&
+              dataDetail.commanderReject === null &&
+              dataDetail.officerReject !== null) ||
+            (roleUser === 'oligarch' &&
+              dataDetail.oligarchReject === null &&
+              dataDetail.commanderReject !== null &&
+              dataDetail.officerReject !== null)
+          "
+        >
+          <q-btn
+            outline
+            color="primary"
+            dense
+            icon-right="check"
+            class="q-px-sm"
+            label="อนุญาต"
+            @click="popUp('pass')"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            icon-right="close"
+            class="q-px-sm"
+            label="ยับยั้ง"
+            @click="popUp('passNot')"
+          />
         </div>
       </div>
       <div class="col-12"><q-separator /></div>
       <div class="row col-12 q-pa-md">
         <div class="col-12 row bg-white q-col-gutter-md">
-          <div class="col-xs-12 row items-center">
+          <div class="col-xs-6 col-sm-3 row items-start">
+            <div class="col-12">
+              <div class="col-12 text-top">สถานที่ยื่นขอลาออกจากราชการ</div>
+              <div class="col-12 text-detail">{{ dataDetail.location }}</div>
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-start">
+            <div class="col-12">
+              <div class="col-12 text-top">วันที่ยื่นขอลาออกจากราชการ</div>
+              <div class="col-12 text-detail">
+                {{ date2Thai(dataDetail.sendDate) }}
+              </div>
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-start">
+            <div class="col-12">
+              <div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
+              <div class="col-12 text-detail">{{ dataDetail.reason }}</div>
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-start">
+            <div class="col-12">
+              <div class="col-12 text-top">วันที่ขอลาออกจากราชการ</div>
+              <div
+                :class="
+                  diffDate()
+                    ? 'col-12 text-detail text-red text-bold'
+                    : 'col-12 text-detail'
+                "
+              >
+                {{ date2Thai(dataDetail.activeDate) }}
+              </div>
+              <div
+                :class="
+                  diffDate()
+                    ? 'col-12 text-detail text-red text-bold'
+                    : 'col-12 text-detail'
+                "
+              >
+                {{ diffDate() ? "(ยื่นขอลาออกน้อยกว่า 30 วัน)" : "" }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+
+    <!-- เอกสารเพิ่มเติม -->
+    <q-card
+      v-if="rows.length > 0"
+      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-12"><q-separator /></div>
+      <div class="col-12">
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          row-key="fileName"
+          hide-header
+          hide-bottom
+        >
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fileName" :props="props">
+                {{ 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-tooltip>ไฟล์ PDF</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </q-card>
+
+    <!-- เอกสารดาวน์โหลด -->
+    <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-12"><q-separator /></div>
+      <div class="col-12">
+        <d-table
+          :rows="rowsFileDownload"
+          :columns="columns"
+          row-key="fileName"
+          hide-header
+          hide-bottom
+        >
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="fileName" :props="props">
+                {{ props.row.fileName }}
+              </q-td>
+              <q-td key="btnMicrosoft" :props="props">
+                <q-btn
+                  flat
+                  dense
+                  round
+                  color="red"
+                  icon="picture_as_pdf"
+                  @click="fileDownload('pdf', props.row.fileName)"
+                >
+                  <q-tooltip>ไฟล์ PDF</q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  dense
+                  round
+                  color="blue"
+                  icon="mdi-file-word"
+                  @click="fileDownload('docx', props.row.fileName)"
+                >
+                  <q-tooltip>ไฟล์ WORD</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </q-card>
+
+    <!-- รายการตรวจสอบเงื่อนไขต่าง ๆ -->
+    <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-12"><q-separator /></div>
+      <div class="row col-12 q-pa-sm q-col-gutter-sm">
+        <div class="col-6">
+          <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>
+              <q-space />
+
+              <div
+                v-if="
+                  dataDetail.status == 'WAITTING' &&
+                  roleUser === 'officer' &&
+                  !checkRoutePermisson
+                "
+              >
+                <div v-if="!conditions">
+                  <q-btn
+                    outline
+                    color="primary"
+                    dense
+                    icon-right="mdi-file-edit-outline"
+                    class="q-px-sm"
+                    label="แก้ไข"
+                    style="width: 80px"
+                    @click="conditions = !conditions"
+                  />
+                </div>
+                <div v-else class="q-gutter-x-sm">
+                  <q-btn
+                    outline
+                    color="public"
+                    dense
+                    class="q-px-sm"
+                    label="บันทึก"
+                    style="width: 80px"
+                    @click="onSubmitConditions"
+                  />
+                  <q-btn
+                    outline
+                    color="red"
+                    dense
+                    class="q-px-sm"
+                    label="ยกเลิก"
+                    style="width: 80px"
+                    @click="clickCancelConditions"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="col-12">
+              <q-checkbox
+                v-model="isNoDebt"
+                label="ไม่เป็นหนี้สหกรณ์"
+                color="teal"
+                :disable="!conditions"
+              />
+            </div>
+            <div class="col-12">
+              <q-checkbox
+                v-model="isNoBurden"
+                label="ไม่มีภาระผูกพันค้ำประกันทุนการศึกษา"
+                color="teal"
+                :disable="!conditions"
+              />
+            </div>
+            <div class="col-12">
+              <q-checkbox
+                v-model="isDiscipline"
+                label="ไม่มีพฤติการณ์ทางวินัย"
+                color="teal"
+                :disable="!conditions"
+              />
+            </div>
+            <!-- <q-option-group
+            :options="checkboxOp"
+            type="checkbox"
+            v-model="checkboxGroup"
+            :disable="!conditions"
+          /> -->
+          </q-card>
+        </div>
+        <div class="col-6">
+          <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-12"><q-separator /></div>
+            <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+              <div class="col-12 row">
+                <q-file
+                  v-if="
+                    dataDetail.status == 'WAITTING' &&
+                    roleUser === 'officer' &&
+                    !checkRoutePermisson
+                  "
+                  class="col-12"
+                  for="#evidenceFiles"
+                  outlined
+                  dense
+                  v-model="file"
+                  label="อัปโหลดเอกสารหลักฐานต่าง ๆ"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                  <template v-slot:after>
+                    <q-btn
+                      v-if="file"
+                      size="14px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      icon="mdi-upload"
+                      @click="uploadFiles"
+                      ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+                    >
+                  </template>
+                </q-file>
+              </div>
+
+              <div v-if="fileList.length > 0" class="col-xs-12 row">
+                <q-list class="full-width rounded-borders" bordered separator>
+                  <q-item
+                    v-for="File in fileList"
+                    :key="File.id"
+                    clickable
+                    v-ripple
+                  >
+                    <q-item-section>{{ File.title }}</q-item-section>
+                    <q-item-section avatar>
+                      <div class="row">
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="blue"
+                            icon="mdi-download-outline"
+                            @click="downloadFiles(File.fileName)"
+                          >
+                            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <div>
+                          <q-btn
+                            v-if="
+                              dataDetail.status == 'WAITTING' &&
+                              roleUser === 'officer' &&
+                              !checkRoutePermisson
+                            "
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="red"
+                            icon="mdi-delete-outline"
+                            @click="removeFile(File.fileName)"
+                            ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+
+              <div class="col-12" v-else>
+                <q-card class="q-pa-sm" bordered> ไม่มีรายการเอกสาร </q-card>
+              </div>
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <!-- ผลการพิจารณาของการเจ้าหน้าที่ของหน่วยงาน -->
+    <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-12"><q-separator /></div>
+      <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">
+              {{
+                dataDetail.officerReject !== null
+                  ? statusOrder(dataDetail.officerReject)
+                  : "-"
+              }}
+            </div>
+          </div>
+          <div class="col-xs-6 row items-start">
+            <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
+            <div class="col-12 text-detail">
+              {{
+                dataDetail.officerRejectDate !== null
+                  ? date2Thai(dataDetail.officerRejectDate)
+                  : "-"
+              }}
+            </div>
+          </div>
+          <div class="col-xs-12 row items-start">
+            <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
+
+            <div class="col-12 text-detail">
+              {{
+                dataDetail.officerReject
+                  ? dataDetail.officerRejectReason
+                  : dataDetail.officerApproveReason
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+
+    <!-- ผลการพิจารณาของผู้บังคับบัญชา -->
+    <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-12"><q-separator /></div>
+      <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">
+              {{
+                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">
+              {{
+                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">
+              {{
+                dataDetail.commanderReject
+                  ? dataDetail.commanderRejectReason
+                  : dataDetail.commanderApproveReason
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+
+    <!-- ผลการพิจารณาของผู้มีอำนาจ -->
+    <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-12"><q-separator /></div>
+      <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">
+              {{
+                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">
+              {{
+                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">
+              {{
+                dataDetail.oligarchReject
+                  ? dataDetail.oligarchRejectReason
+                  : dataDetail.oligarchApproveReason
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+
+    <!-- แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย -->
+    <q-card bordered class="row col-12 text-dark q-mt-sm">
+      <q-form
+        ref="myForm"
+        greedy
+        @submit.prevent
+        @validation-success="onSubmitAttached"
+      >
+        <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 v-if="roleUser === 'officer' && !checkRoutePermisson">
+            <div class="q-gutter-sm" v-if="!edit">
+              <q-btn
+                outline
+                color="primary"
+                dense
+                icon-right="mdi-file-edit-outline"
+                class="q-px-sm"
+                label="แก้ไข"
+                style="width: 80px"
+                @click="edit = !edit"
+                v-if="!(status == 'REPORT' || status == 'DONE')"
+              />
+            </div>
+            <div class="q-gutter-sm" v-else>
+              <q-btn
+                outline
+                color="public"
+                dense
+                class="q-px-sm"
+                label="บันทึก"
+                style="width: 80px"
+                type="submit"
+              />
+              <q-btn
+                outline
+                color="red"
+                dense
+                class="q-px-sm"
+                label="ยกเลิก"
+                style="width: 80px"
+                @click="clickCancel"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row col-12 q-pa-md">
+          <div class="col-12 row bg-white q-col-gutter-md">
+            <div class="col-xs-12 row items-center">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="organizationPositionOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัดเดิม'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่ง/สังกัดเดิม'}`"
+                  type="textarea"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionTypeOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่งประเภท'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="positionLevelOld"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
+                  hide-bottom-space
+                  :label="`${'ระดับตำแหน่ง'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="posNo"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                  hide-bottom-space
+                  :label="`${'เลขที่'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-6 col-sm-3 row">
+              <div class="col-12">
+                <q-input
+                  v-model="salary"
+                  :outlined="edit"
+                  dense
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  hide-bottom-space
+                  :label="`${'เงินเดือน'}`"
+                  :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  lazy-rules
+                  :class="getClass(edit)"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                />
+              </div>
+            </div>
+            <div class="col-12"><q-separator /></div>
+            <div class="col-xs-4 row">
+              <div class="col-12">
+                <q-input
+                  :class="getClass(edit)"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  v-model="location"
+                  :rules="[
+                  (val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`,
+                ]"
+                  hide-bottom-space
+                  :label="`${'สถานที่ยื่นขอลาออกจากราชการ'}`"
+                />
+              </div>
+            </div>
+            <div class="col-xs-4 row">
+              <div class="col-12">
+                <datepicker
+                  menu-class-name="modalfix"
+                  :readonly="!edit"
+                  v-model="date"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      :readonly="!edit"
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      :borderless="!edit"
+                      :model-value="date !== null ? date2Thai(date) : null"
+                      :rules="[
+                      (val:string) =>
+                        !!val || `${'กรุณาเลือก วันที่ยื่นขอลาออกจากราชการ'}`,
+                    ]"
+                      hide-bottom-space
+                      :label="`${' วันที่ยื่นขอลาออกจากราชการ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          :style="
+                            edit
+                              ? 'color: var(--q-primary)'
+                              : 'color: var(--q-grey)'
+                          "
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -1097,182 +1262,37 @@ onMounted(async () => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="organizationPositionOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัดเดิม'}`]"
+                v-model="reason"
+                :rules="[
+                (val:string) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`,
+              ]"
                 hide-bottom-space
-                :label="`${'ตำแหน่ง/สังกัดเดิม'}`"
+                :label="`${'เหตุผลที่ลาออกจากราชการ (หมายเหตุแนวตั้ง)'}`"
+                type="textarea"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="remarkHorizontal"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกหมายเหตุแนวนอน '}`]"
+                hide-bottom-space
+                :label="`${'หมายเหตุแนวนอน '}`"
                 type="textarea"
               />
             </div>
           </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionTypeOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
-                hide-bottom-space
-                :label="`${'ตำแหน่งประเภท'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="positionLevelOld"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
-                hide-bottom-space
-                :label="`${'ระดับตำแหน่ง'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="posNo"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
-                hide-bottom-space
-                :label="`${'เลขที่'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-6 col-sm-3 row">
-            <div class="col-12">
-              <q-input
-                v-model="salary"
-                :outlined="edit"
-                dense
-                :readonly="!edit"
-                :borderless="!edit"
-                hide-bottom-space
-                :label="`${'เงินเดือน'}`"
-                :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                lazy-rules
-                class="inputgreen"
-                mask="###,###,###,###"
-                reverse-fill-mask
-              />
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="col-xs-4 row">
-            <div class="col-12">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="location"
-                :rules="[
-                  (val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'สถานที่ยื่นขอลาออกจากราชการ'}`"
-              />
-            </div>
-          </div>
-          <div class="col-xs-4 row">
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :readonly="!edit"
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    :borderless="!edit"
-                    :model-value="date !== null ? date2Thai(date) : null"
-                    :rules="[
-                      (val:string) =>
-                        !!val || `${'กรุณาเลือก วันที่ยื่นขอลาออกจากราชการ'}`,
-                    ]"
-                    hide-bottom-space
-                    :label="`${' วันที่ยื่นขอลาออกจากราชการ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-          <div class="col-12">
-            <q-input
-              :class="getClass(edit)"
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="reason"
-              :rules="[
-                (val:string) => !!val || `${'กรุณากรอกเหตุผลที่ลาออกจากราชการ'}`,
-              ]"
-              hide-bottom-space
-              :label="`${'เหตุผลที่ลาออกจากราชการ (หมายเหตุแนวตั้ง)'}`"
-              type="textarea"
-            />
-          </div>
-          <div class="col-12">
-            <q-input
-              :class="getClass(edit)"
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="remarkHorizontal"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกหมายเหตุแนวนอน '}`]"
-              hide-bottom-space
-              :label="`${'หมายเหตุแนวนอน '}`"
-              type="textarea"
-            />
-          </div>
         </div>
-      </div>
-    </q-form>
-  </q-card>
+      </q-form>
+    </q-card>
+
+    <WorkFlow ref="workflowRef" :id="id" sys-name="RETIREMENT_RESIFNATION" />
+  </div>
 
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 800px">
diff --git a/src/modules/09_leave/components/2_Leave/DetailLeave.vue b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
index 2e28bb79b..5b39702a6 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
@@ -28,6 +28,7 @@ import FormLeaveToTraining from "@/modules/09_leave/components/2_Leave/formDetai
 import FormLeaveToWorkInternational from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
 import FormSpouse from "@/modules/09_leave/components/2_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
 import FormVocationalRehabilitation from "@/modules/09_leave/components/2_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
+import WorkFlow from "@/components/Workflow/Main.vue";
 
 /** use */
 const $q = useQuasar();
@@ -131,8 +132,7 @@ async function fetchDetailLeave(paramsId: string) {
   await http
     .get(config.API.leaveListById(paramsId))
     .then(async (res) => {
-      const data = res.data.result;
-
+      const data = await res.data.result;
       formData.id = data.id;
       formData.reasonCommander = data.reasonCommander
         ? data.reasonCommander
@@ -350,16 +350,18 @@ function sendToCommand() {
   dialogConfirm(
     $q,
     async () => {
+      showLoader();
       await http
         .get(config.API.leaveApproveToComander(formData.id))
-        .then(() => {
+        .then(async () => {
+          await fetchDetailLeave(paramsId);
           success($q, "บันทึกข้อมูลสำเร็จ");
         })
         .catch((err) => {
           messageError($q, err);
         })
         .finally(async () => {
-          await fetchDetailLeave(paramsId);
+          hideLoader();
         });
     },
     "ยืนยันการส่งไปผู้บังคับบัญชา",
@@ -377,17 +379,19 @@ function clickSave(reason: string) {
     dialogConfirm(
       $q,
       async () => {
+        showLoader();
         await http
           .put(config.API.leaveApprove(formData.id), body)
-          .then(() => {
+          .then(async () => {
+            await fetchDetailLeave(paramsId);
             success($q, "บันทึกข้อมูลสำเร็จ");
+            modalApprove.value = false;
           })
           .catch((err) => {
             messageError($q, err);
           })
           .finally(async () => {
-            await fetchDetailLeave(paramsId);
-            modalApprove.value = false;
+            hideLoader();
           });
       },
       "ยืนยันอนุมัติ",
@@ -399,17 +403,19 @@ function clickSave(reason: string) {
     dialogConfirm(
       $q,
       async () => {
+        showLoader();
         await http
           .put(config.API.leaveReject(formData.id), body)
-          .then(() => {
+          .then(async () => {
+            await fetchDetailLeave(paramsId);
             success($q, "บันทึกข้อมูลสำเร็จ");
+            modalApprove.value = false;
           })
           .catch((err) => {
             messageError($q, err);
           })
           .finally(async () => {
-            await fetchDetailLeave(paramsId);
-            modalApprove.value = false;
+            hideLoader();
           });
       },
       "ยืนยันไม่อนุมัติ",
@@ -420,17 +426,19 @@ function clickSave(reason: string) {
     dialogConfirm(
       $q,
       async () => {
+        showLoader();
         await http
           .put(config.API.leaveComanderApprove(formData.id), body)
-          .then(() => {
+          .then(async () => {
+            await fetchDetailLeave(paramsId);
             success($q, "บันทึกข้อมูลสำเร็จ");
+            modalApprove.value = false;
           })
           .catch((err) => {
             messageError($q, err);
           })
           .finally(async () => {
-            await fetchDetailLeave(paramsId);
-            modalApprove.value = false;
+            hideLoader();
           });
       },
       "ยืนยันการส่งไปยังผู้มีอำนาจ",
@@ -460,12 +468,12 @@ function formattedNumber(x: number) {
 }
 
 onMounted(async () => {
-  // showLoader();
   if (paramsId) {
     await fetchDetailLeave(paramsId);
   }
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
@@ -480,7 +488,7 @@ onMounted(async () => {
           class="q-mr-sm"
           @click="router.push(`/leave`)"
         />
-        รายละเอียดการลาของ {{ formData.fullName }}
+        รายละเอียดการลาของ{{ formData.fullName }}
       </div>
       <div>
         <q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
@@ -534,269 +542,291 @@ onMounted(async () => {
       <q-space />
     </div>
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <div class="col-12 row q-py-md q-pl-md">
-      <div class="col-12 q-col-gutter-md">
-        <div class="row col-12">
-          <q-card bordered class="bg-grey-1 q-pa-md col-12">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
-                <div class="col-12 row">
-                  <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
-                  <div class="col text-primary">
-                    {{
-                      checkForm !== "FormUpasom" && checkForm !== "FormHajj"
-                        ? formData.leaveTypeName
-                        : formData.hajjDayStatus
-                        ? "ลาประกอบพิธีฮัจญ์"
-                        : "ลาอุปสมบท"
-                    }}
+
+  <div class="q-pa-sm">
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="col-12 row q-py-md q-pl-md">
+        <div class="col-12 q-col-gutter-md">
+          <!-- ประเภทการลา -->
+          <div class="row col-12">
+            <q-card bordered class="bg-grey-1 q-pa-md col-12">
+              <div class="row q-col-gutter-md col-12">
+                <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
+                  <div class="col-12 row">
+                    <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
+                    <div class="col text-primary">
+                      {{
+                        checkForm !== "FormUpasom" && checkForm !== "FormHajj"
+                          ? formData.leaveTypeName
+                          : formData.hajjDayStatus
+                          ? "ลาประกอบพิธีฮัจญ์"
+                          : "ลาอุปสมบท"
+                      }}
+                    </div>
+                  </div>
+                  <div class="col-12 row">
+                    <div class="col-xs-5 col-sm-3 text-grey-8">
+                      ชื่อ - นามสกุล
+                    </div>
+                    <div class="col text-weight-medium">
+                      {{ formData.fullName }}
+                    </div>
                   </div>
                 </div>
-                <div class="col-12 row">
-                  <div class="col-xs-5 col-sm-3 text-grey-8">
-                    ชื่อ - นามสกุล
-                  </div>
-                  <div class="col text-weight-medium">
-                    {{ formData.fullName }}
-                  </div>
-                </div>
-              </div>
-              <div class="col-xs-12 col-sm-7 row">
-                <div class="row col-12 q-gutter-md">
-                  <div
-                    v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                    class="col-3"
-                  >
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-blue-10">
-                        {{ formData.leaveLimit }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">ได้รับ</span>
-                      </div>
-                    </q-card>
-                  </div>
-                  <div class="col-3">
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-light-blue-6">
-                        {{ formData.leaveSummary }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">ใช้ไป</span>
-                      </div>
-                    </q-card>
-                  </div>
-                  <div
-                    v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                    class="col-3"
-                  >
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-indigo-7">
-                        {{ formData.leaveRemain }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">คงเหลือ</span>
-                      </div>
-                    </q-card>
+                <div class="col-xs-12 col-sm-7 row">
+                  <div class="row col-12 q-gutter-md">
+                    <div
+                      v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
+                      class="col-3"
+                    >
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-blue-10">
+                          {{ formData.leaveLimit }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">ได้รับ</span>
+                        </div>
+                      </q-card>
+                    </div>
+                    <div class="col-3">
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-light-blue-6">
+                          {{ formData.leaveSummary }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">ใช้ไป</span>
+                        </div>
+                      </q-card>
+                    </div>
+                    <div
+                      v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
+                      class="col-3"
+                    >
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-indigo-7">
+                          {{ formData.leaveRemain }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">คงเหลือ</span>
+                        </div>
+                      </q-card>
+                    </div>
                   </div>
                 </div>
               </div>
+            </q-card>
+          </div>
+
+          <!-- ข้อมูลการลา -->
+          <div class="row q-col-gutter-md col-12">
+            <!-- ข้อมูลซ้าย -->
+            <div class="col-xs-12 col-sm-5 row">
+              <!-- card ซ้าย -->
+              <q-card flat bordered class="col-12">
+                <FormMain :data="formData" :checkForm="checkForm" />
+              </q-card>
             </div>
-          </q-card>
-        </div>
-        <div class="row q-col-gutter-md col-12">
-          <div class="col-xs-12 col-sm-5 row">
-            <!-- card ซ้าย -->
-            <q-card flat bordered class="col-12">
-              <FormMain :data="formData" :checkForm="checkForm" />
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-7 row">
-            <q-card flat bordered class="col-12">
-              <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
-              <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
+            <!-- ข้อมูลขวา -->
+            <div class="col-xs-12 col-sm-7 row">
+              <q-card flat bordered class="col-12">
+                <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
+                <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
 
-              <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
-              <FormChildbirth
-                v-else-if="checkForm === 'FormChildbirth'"
-                :data="formData"
-              />
+                <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
+                <FormChildbirth
+                  v-else-if="checkForm === 'FormChildbirth'"
+                  :data="formData"
+                />
 
-              <!-- ลาพักผ่อน -->
-              <FormHoliday
-                v-else-if="checkForm === 'FormHoliday'"
-                :data="formData"
-              />
+                <!-- ลาพักผ่อน -->
+                <FormHoliday
+                  v-else-if="checkForm === 'FormHoliday'"
+                  :data="formData"
+                />
 
-              <!-- ลาอุปสมบท -->
-              <FormUpasom
-                v-else-if="checkForm === 'FormUpasom'"
-                :data="formData"
-              />
+                <!-- ลาอุปสมบท -->
+                <FormUpasom
+                  v-else-if="checkForm === 'FormUpasom'"
+                  :data="formData"
+                />
 
-              <!-- ลาประกอบพิธีฮัจญ์ -->
-              <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
+                <!-- ลาประกอบพิธีฮัจญ์ -->
+                <FormHajj
+                  v-else-if="checkForm === 'FormHajj'"
+                  :data="formData"
+                />
 
-              <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
-              <FormCheckSelect
-                v-else-if="checkForm === 'FormCheckSelect'"
-                :data="formData"
-              />
+                <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
+                <FormCheckSelect
+                  v-else-if="checkForm === 'FormCheckSelect'"
+                  :data="formData"
+                />
 
-              <!-- ลาไปศึกษา -->
-              <FormStudy
-                v-else-if="checkForm === 'FormStudy'"
-                :data="formData"
-              />
+                <!-- ลาไปศึกษา -->
+                <FormStudy
+                  v-else-if="checkForm === 'FormStudy'"
+                  :data="formData"
+                />
 
-              <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
-              <FormLeaveToTraining
-                v-else-if="checkForm === 'FormLeaveToTraining'"
-                :data="formData"
-              />
+                <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
+                <FormLeaveToTraining
+                  v-else-if="checkForm === 'FormLeaveToTraining'"
+                  :data="formData"
+                />
 
-              <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
-              <FormLeaveToWorkInternational
-                v-else-if="checkForm === 'FormLeaveToWorkInternational'"
-                :data="formData"
-              />
+                <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
+                <FormLeaveToWorkInternational
+                  v-else-if="checkForm === 'FormLeaveToWorkInternational'"
+                  :data="formData"
+                />
 
-              <!-- ลาติดตามคู่สมรส -->
-              <FormSpouse
-                v-else-if="checkForm === 'FormSpouse'"
-                :data="formData"
-              />
+                <!-- ลาติดตามคู่สมรส -->
+                <FormSpouse
+                  v-else-if="checkForm === 'FormSpouse'"
+                  :data="formData"
+                />
 
-              <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
-              <FormVocationalRehabilitation
-                v-else-if="checkForm === 'FormVocationalRehabilitation'"
-                :data="formData"
-              />
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-12 row">
-            <q-card
-              bordered
-              class="row col-12 text-dark q-mt-sm"
+                <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
+                <FormVocationalRehabilitation
+                  v-else-if="checkForm === 'FormVocationalRehabilitation'"
+                  :data="formData"
+                />
+              </q-card>
+            </div>
+
+            <!-- ความคิดเห็นของผู้บังคับบัญชา -->
+            <div
+              class="col-xs-12 col-sm-12 row"
               v-if="
                 formData.approveStep === 'st3' ||
                 formData.approveStep === 'st4' ||
                 formData.approveStep === 'st5'
               "
             >
-              <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">
-                  ความคิดเห็นของผู้บังคับบัญชา
+              <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>
-              <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-detail">
-                      {{ formData.reasonCommander }}
+                <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-detail">
+                        {{ formData.reasonCommander }}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-12 row">
-            <q-card
-              bordered
-              class="row col-12 text-dark q-mt-sm"
+              </q-card>
+            </div>
+
+            <!-- ความคิดเห็นของผู้มีอำนาจ -->
+            <div
+              class="col-xs-12 col-sm-12 row"
               v-if="
                 formData.approveStep === 'st4' || formData.approveStep === 'st5'
               "
             >
-              <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-weight-bold text-top">
-                      ผลการพิจารณา
-                    </div>
-                    <div class="col-12 text-detail">{{ formData.status }}</div>
+              <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="col-xs-6 row items-start">
-                    <div class="col-12 text-weight-bold text-top">
-                      ความคิดเห็น
+                </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-weight-bold text-top">
+                        ผลการพิจารณา
+                      </div>
+                      <div class="col-12 text-detail">
+                        {{ formData.status }}
+                      </div>
                     </div>
-                    <div class="col-12 text-detail">
-                      {{ formData.reasonOligarch }}
+                    <div class="col-xs-6 row items-start">
+                      <div class="col-12 text-weight-bold text-top">
+                        ความคิดเห็น
+                      </div>
+                      <div class="col-12 text-detail">
+                        {{ formData.reasonOligarch }}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </q-card>
+              </q-card>
+            </div>
+          </div>
+
+          <!-- Workflow -->
+          <div class="col-xs-12 col-sm-12">
+            <WorkFlow ref="workflowRef" :id="paramsId" sys-name="LEAVE_LIST" />
           </div>
         </div>
       </div>
-    </div>
-    <q-separator v-if="checkPermission($route)?.attrIsUpdate" />
-    <div class="row q-pa-md q-gutter-md justify-end">
-      <q-btn
-        v-if="
-          formData.approveStep === 'st1' &&
-          formData.status !== 'ยกเลิก' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="orange-5"
-        label="ส่งไปยังผู้บังคับบัญชา"
-        @click="sendToCommand"
-        ><q-tooltip>ส่งไปยังผู้บังคับบัญชา</q-tooltip>
-      </q-btn>
 
-      <q-btn
-        v-if="
-          formData.approveStep === 'st2' &&
-          formData.status !== 'ยกเลิก' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="orange-5"
-        label="ส่งไปยังผู้มีอำนาจ"
-        @click="openModal('authority')"
-        ><q-tooltip>ส่งไปยังผู้มีอำนาจ</q-tooltip>
-      </q-btn>
+      <q-separator v-if="checkPermission($route)?.attrIsUpdate" />
+      <div class="row q-pa-md q-gutter-md justify-end">
+        <q-btn
+          v-if="
+            formData.approveStep === 'st1' &&
+            formData.status !== 'ยกเลิก' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="orange-5"
+          label="ส่งไปยังผู้บังคับบัญชา"
+          @click="sendToCommand"
+          ><q-tooltip>ส่งไปยังผู้บังคับบัญชา</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          v-if="
+            formData.approveStep === 'st2' &&
+            formData.status !== 'ยกเลิก' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="orange-5"
+          label="ส่งไปยังผู้มีอำนาจ"
+          @click="openModal('authority')"
+          ><q-tooltip>ส่งไปยังผู้มีอำนาจ</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          v-if="
+            formData.approveStep === 'st3' &&
+            formData.status !== 'ยกเลิก' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="orange-5"
+          label="ไม่อนุมัติ"
+          @click="openModal('UnApprove')"
+          ><q-tooltip>ไม่อนุมัติ</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="
+            formData.approveStep === 'st3' &&
+            formData.status !== 'ยกเลิก' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="primary"
+          label="อนุมัติ"
+          @click="openModal('approve')"
+          ><q-tooltip>อนุมัติ</q-tooltip>
+        </q-btn>
+      </div>
+    </q-card>
+  </div>
 
-      <q-btn
-        v-if="
-          formData.approveStep === 'st3' &&
-          formData.status !== 'ยกเลิก' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="orange-5"
-        label="ไม่อนุมัติ"
-        @click="openModal('UnApprove')"
-        ><q-tooltip>ไม่อนุมัติ</q-tooltip>
-      </q-btn>
-      <q-btn
-        v-if="
-          formData.approveStep === 'st3' &&
-          formData.status !== 'ยกเลิก' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="primary"
-        label="อนุมัติ"
-        @click="openModal('approve')"
-        ><q-tooltip>อนุมัติ</q-tooltip>
-      </q-btn>
-    </div>
-  </q-card>
   <DialogReason
     v-model:modal="modalApprove"
     :title="dialogTitle"
diff --git a/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
index 1a67991bd..ded00d4b5 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
@@ -31,6 +31,7 @@ import FormLeaveToTraining from "@/modules/09_leave/components/2_Leave/formDetai
 import FormLeaveToWorkInternational from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
 import FormSpouse from "@/modules/09_leave/components/2_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
 import FormVocationalRehabilitation from "@/modules/09_leave/components/2_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
+import WorkFlow from "@/components/Workflow/Main.vue";
 
 /** use */
 const $q = useQuasar();
@@ -150,8 +151,13 @@ const formData = reactive<FremData>({
 
 onMounted(async () => {
   if (paramsId) {
-    await fetchDetailDeleteLeave(paramsId);
-    await fetchDetailLeave(paramsId);
+    showLoader();
+    Promise.all([
+      fetchDetailDeleteLeave(paramsId),
+      fetchDetailLeave(paramsId),
+    ]).finally(() => {
+      hideLoader();
+    });
   }
 });
 
@@ -160,7 +166,6 @@ onMounted(async () => {
  * @param paramsId รับ ID จาก paramID
  */
 async function fetchDetailDeleteLeave(paramsId: string) {
-  showLoader();
   await http
     .get(config.API.leaveListDeleteByid(paramsId))
     .then((res) => {
@@ -183,18 +188,14 @@ async function fetchDetailDeleteLeave(paramsId: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 async function fetchDetailLeave(paramsId: string) {
-  showLoader();
   await http
     .get(config.API.leaveListById(paramsId))
     .then(async (res) => {
-      const data = res.data.result;
+      const data = await res.data.result;
       formData.id = data.id;
       formData.reasonCommander = data.reasonCommander;
       formData.reasonOligarch = data.reasonOligarch;
@@ -278,9 +279,6 @@ async function fetchDetailLeave(paramsId: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -413,6 +411,7 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
     });
 }
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
@@ -473,257 +472,275 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
       <q-space />
     </div>
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <div class="col-12 row q-py-md q-pl-md">
-      <div class="col-12 q-col-gutter-md">
-        <div class="col-xs-12 col-sm-12 row">
-          <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-3 row items-start">
-                  <div class="col-12 text-weight-bold text-top">เขียนที่</div>
-                  <div class="col-12 text-detail">
-                    {{ formDataReject.leaveWrote }}
-                  </div>
-                </div>
-                <div class="col-xs-3 row items-start">
-                  <div class="col-12 text-weight-bold text-top">วันที่</div>
-                  <div class="col-12 text-detail">
-                    {{ date2Thai(formDataReject.leaveStartDate) }}
-                  </div>
-                </div>
-                <div class="col-xs-3 row items-start">
-                  <div class="col-12 text-weight-bold text-top">เหตุผล</div>
-                  <div class="col-12 text-detail">
-                    {{ formDataReject.leaveReasonDelete }}
-                  </div>
-                </div>
-                <div class="col-xs-3 row items-start">
-                  <div class="col-12 text-weight-bold text-top">
-                    เอกสารประกอบ
-                  </div>
-                  <div class="col-12 text-detail">
-                    <q-btn
-                      v-if="formDataReject.leaveDocDelete"
-                      :href="formDataReject.leaveDocDelete"
-                      target="_blank"
-                      outline
-                      color="blue"
-                      label="ดาวน์โหลด"
-                      size="12px"
-                    >
-                      <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-                    >
-                    <span v-else>-</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </q-card>
-        </div>
-        <div class="row col-12">
-          <q-card bordered class="bg-grey-1 q-pa-md col-12">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
-                <div class="col-12 row">
-                  <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
-                  <div class="col text-primary">
-                    {{ formData.leaveTypeName }}
-                  </div>
-                </div>
-                <div class="col-12 row">
-                  <div class="col-xs-5 col-sm-3 text-grey-8">
-                    ชื่อ - นามสกุล
-                  </div>
-                  <div class="col text-weight-medium">
-                    {{ formData.fullName }}
-                  </div>
-                </div>
-              </div>
-              <div class="col-xs-12 col-sm-7 row">
-                <div class="row col-12 q-gutter-md">
-                  <div
-                    v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                    class="col-3"
-                  >
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-blue-10">
-                        {{ formData.leaveLimit }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">ได้รับ</span>
-                      </div>
-                    </q-card>
-                  </div>
-                  <div class="col-3">
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-light-blue-6">
-                        {{ formData.leaveSummary }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">ใช้ไป</span>
-                      </div>
-                    </q-card>
-                  </div>
-                  <div
-                    v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                    class="col-3"
-                  >
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-indigo-7">
-                        {{ formData.leaveRemain }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">คงเหลือ</span>
-                      </div>
-                    </q-card>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </q-card>
-        </div>
-        <div class="row q-col-gutter-md col-12">
-          <div class="col-xs-12 col-sm-5 row">
-            <!-- card ซ้าย -->
-            <q-card flat bordered class="col-12">
-              <FormMain :data="formData" />
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-7 row">
-            <q-card flat bordered class="col-12">
-              <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
-              <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
 
-              <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
-              <FormChildbirth
-                v-else-if="checkForm === 'FormChildbirth'"
-                :data="formData"
-              />
-
-              <!-- ลาพักผ่อน -->
-              <FormHoliday
-                v-else-if="checkForm === 'FormHoliday'"
-                :data="formData"
-              />
-
-              <!-- ลาอุปสมบท -->
-              <FormUpasom
-                v-else-if="checkForm === 'FormUpasom'"
-                :data="formData"
-              />
-
-              <!-- ลาประกอบพิธีฮัจญ์ -->
-              <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
-
-              <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
-              <FormCheckSelect
-                v-else-if="checkForm === 'FormCheckSelect'"
-                :data="formData"
-              />
-
-              <!-- ลาไปศึกษา -->
-              <FormStudy
-                v-else-if="checkForm === 'FormStudy'"
-                :data="formData"
-              />
-
-              <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
-              <FormLeaveToTraining
-                v-else-if="checkForm === 'FormLeaveToTraining'"
-                :data="formData"
-              />
-
-              <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
-              <FormLeaveToWorkInternational
-                v-else-if="checkForm === 'FormLeaveToWorkInternational'"
-                :data="formData"
-              />
-
-              <!-- ลาติดตามคู่สมรส -->
-              <FormSpouse
-                v-else-if="checkForm === 'FormSpouse'"
-                :data="formData"
-              />
-
-              <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
-              <FormVocationalRehabilitation
-                v-else-if="checkForm === 'FormVocationalRehabilitation'"
-                :data="formData"
-              />
-            </q-card>
-          </div>
+  <div class="q-pa-sm">
+    <q-card flat bordered class="col-12">
+      <div class="col-12 row q-py-md q-pl-md">
+        <div class="col-12 q-col-gutter-md">
           <div class="col-xs-12 col-sm-12 row">
-            <q-card
-              bordered
-              class="row col-12 text-dark q-mt-sm"
-              v-if="formDataReject.status !== 'NEW'"
-            >
+            <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-weight-bold text-top">
-                      ผลการพิจารณา
-                    </div>
+                  <div class="col-xs-3 row items-start">
+                    <div class="col-12 text-weight-bold text-top">เขียนที่</div>
                     <div class="col-12 text-detail">
-                      {{ stores.convertSatatus(formDataReject.status) }}
+                      {{ formDataReject.leaveWrote }}
                     </div>
                   </div>
-                  <div class="col-xs-6 row items-start">
-                    <div class="col-12 text-weight-bold text-top">
-                      ความคิดเห็น
+                  <div class="col-xs-3 row items-start">
+                    <div class="col-12 text-weight-bold text-top">วันที่</div>
+                    <div class="col-12 text-detail">
+                      {{ date2Thai(formDataReject.leaveStartDate) }}
                     </div>
+                  </div>
+                  <div class="col-xs-3 row items-start">
+                    <div class="col-12 text-weight-bold text-top">เหตุผล</div>
                     <div class="col-12 text-detail">
                       {{ formDataReject.leaveReasonDelete }}
                     </div>
                   </div>
+                  <div class="col-xs-3 row items-start">
+                    <div class="col-12 text-weight-bold text-top">
+                      เอกสารประกอบ
+                    </div>
+                    <div class="col-12 text-detail">
+                      <q-btn
+                        v-if="formDataReject.leaveDocDelete"
+                        :href="formDataReject.leaveDocDelete"
+                        target="_blank"
+                        outline
+                        color="blue"
+                        label="ดาวน์โหลด"
+                        size="12px"
+                      >
+                        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                      >
+                      <span v-else>-</span>
+                    </div>
+                  </div>
                 </div>
               </div>
             </q-card>
           </div>
+
+          <div class="row col-12">
+            <q-card bordered class="bg-grey-1 q-pa-md col-12">
+              <div class="row q-col-gutter-md col-12">
+                <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
+                  <div class="col-12 row">
+                    <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
+                    <div class="col text-primary">
+                      {{ formData.leaveTypeName }}
+                    </div>
+                  </div>
+                  <div class="col-12 row">
+                    <div class="col-xs-5 col-sm-3 text-grey-8">
+                      ชื่อ - นามสกุล
+                    </div>
+                    <div class="col text-weight-medium">
+                      {{ formData.fullName }}
+                    </div>
+                  </div>
+                </div>
+                <div class="col-xs-12 col-sm-7 row">
+                  <div class="row col-12 q-gutter-md">
+                    <div
+                      v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
+                      class="col-3"
+                    >
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-blue-10">
+                          {{ formData.leaveLimit }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">ได้รับ</span>
+                        </div>
+                      </q-card>
+                    </div>
+                    <div class="col-3">
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-light-blue-6">
+                          {{ formData.leaveSummary }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">ใช้ไป</span>
+                        </div>
+                      </q-card>
+                    </div>
+                    <div
+                      v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
+                      class="col-3"
+                    >
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-indigo-7">
+                          {{ formData.leaveRemain }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">คงเหลือ</span>
+                        </div>
+                      </q-card>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+
+          <div class="row q-col-gutter-md col-12">
+            <div class="col-xs-12 col-sm-5 row">
+              <!-- card ซ้าย -->
+              <q-card flat bordered class="col-12">
+                <FormMain :data="formData" />
+              </q-card>
+            </div>
+            <!-- ข้อมูลการลา -->
+            <div class="col-xs-12 col-sm-7 row">
+              <q-card flat bordered class="col-12">
+                <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
+                <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
+
+                <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
+                <FormChildbirth
+                  v-else-if="checkForm === 'FormChildbirth'"
+                  :data="formData"
+                />
+
+                <!-- ลาพักผ่อน -->
+                <FormHoliday
+                  v-else-if="checkForm === 'FormHoliday'"
+                  :data="formData"
+                />
+
+                <!-- ลาอุปสมบท -->
+                <FormUpasom
+                  v-else-if="checkForm === 'FormUpasom'"
+                  :data="formData"
+                />
+
+                <!-- ลาประกอบพิธีฮัจญ์ -->
+                <FormHajj
+                  v-else-if="checkForm === 'FormHajj'"
+                  :data="formData"
+                />
+
+                <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
+                <FormCheckSelect
+                  v-else-if="checkForm === 'FormCheckSelect'"
+                  :data="formData"
+                />
+
+                <!-- ลาไปศึกษา -->
+                <FormStudy
+                  v-else-if="checkForm === 'FormStudy'"
+                  :data="formData"
+                />
+
+                <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
+                <FormLeaveToTraining
+                  v-else-if="checkForm === 'FormLeaveToTraining'"
+                  :data="formData"
+                />
+
+                <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
+                <FormLeaveToWorkInternational
+                  v-else-if="checkForm === 'FormLeaveToWorkInternational'"
+                  :data="formData"
+                />
+
+                <!-- ลาติดตามคู่สมรส -->
+                <FormSpouse
+                  v-else-if="checkForm === 'FormSpouse'"
+                  :data="formData"
+                />
+
+                <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
+                <FormVocationalRehabilitation
+                  v-else-if="checkForm === 'FormVocationalRehabilitation'"
+                  :data="formData"
+                />
+              </q-card>
+            </div>
+
+            <!-- ความคิดเห็นของผู้มีอำนาจ -->
+            <div
+              class="col-xs-12 col-sm-12 row"
+              v-if="formDataReject.status !== 'NEW'"
+            >
+              <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-weight-bold text-top">
+                        ผลการพิจารณา
+                      </div>
+                      <div class="col-12 text-detail">
+                        {{ stores.convertSatatus(formDataReject.status) }}
+                      </div>
+                    </div>
+                    <div class="col-xs-6 row items-start">
+                      <div class="col-12 text-weight-bold text-top">
+                        ความคิดเห็น
+                      </div>
+                      <div class="col-12 text-detail">
+                        {{ formDataReject.leaveReasonDelete }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+
+          <!-- Workflow -->
+          <div class="col-xs-12 col-sm-12">
+            <WorkFlow ref="workflowRef" :id="paramsId" sys-name="LEAVE_LIST" />
+          </div>
         </div>
       </div>
-    </div>
-    <q-separator v-if="checkPermission($route)?.attrIsUpdate" />
-    <div class="row q-pa-md q-gutter-md justify-end">
-      <q-btn
-        v-if="
-          formDataReject.status === 'NEW' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="orange-5"
-        label="ไม่อนุมัติการยกเลิก"
-        @click="openModal('UnApprove')"
-        ><q-tooltip>ไม่อนุมัติการยกเลิก</q-tooltip>
-      </q-btn>
-      <q-btn
-        v-if="
-          formDataReject.status === 'NEW' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="primary"
-        label="อนุมัติการยกเลิก"
-        @click="openModal('approve')"
-        ><q-tooltip>อนุมัติการยกเลิก</q-tooltip>
-      </q-btn>
-    </div>
-  </q-card>
+      <q-separator v-if="checkPermission($route)?.attrIsUpdate" />
+      <div class="row q-pa-md q-gutter-md justify-end">
+        <q-btn
+          v-if="
+            formDataReject.status === 'NEW' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="orange-5"
+          label="ไม่อนุมัติการยกเลิก"
+          @click="openModal('UnApprove')"
+          ><q-tooltip>ไม่อนุมัติการยกเลิก</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="
+            formDataReject.status === 'NEW' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="primary"
+          label="อนุมัติการยกเลิก"
+          @click="openModal('approve')"
+          ><q-tooltip>อนุมัติการยกเลิก</q-tooltip>
+        </q-btn>
+      </div>
+    </q-card>
+  </div>
+
   <DialogReason
     v-model:modal="modalApprove"
     :title="dialogTitle"
diff --git a/src/modules/09_leave/components/2_Leave/Tab1.vue b/src/modules/09_leave/components/2_Leave/Tab1.vue
index 278753f33..f9828461e 100644
--- a/src/modules/09_leave/components/2_Leave/Tab1.vue
+++ b/src/modules/09_leave/components/2_Leave/Tab1.vue
@@ -36,6 +36,7 @@ const totalList = ref<number>(0);
 
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {
+  leaveStore.rows = [];
   querySting.status = await (querySting.status == null
     ? "ALL"
     : querySting.status);
diff --git a/src/modules/09_leave/components/2_Leave/Tab2.vue b/src/modules/09_leave/components/2_Leave/Tab2.vue
index 09088baa2..4dd82387d 100644
--- a/src/modules/09_leave/components/2_Leave/Tab2.vue
+++ b/src/modules/09_leave/components/2_Leave/Tab2.vue
@@ -36,6 +36,7 @@ const totalList = ref<number>(0);
 
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {
+  leaveStore.rows = [];
   querySting.status = await (querySting.status == null
     ? "ALL"
     : querySting.status);