diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 6405e8fb5..15007200c 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -184,4 +184,8 @@ export default {
   profilePermission: `${orgProfile}/keycloak/permissionProfile`,
   profileidPosition: (type: string) =>
     `${orgProfile}${type}/profileid/position`,
+
+  workflowCommanderOperate:`${workflow}/commander/operate`,
+  workflowCommanderSign:`${workflow}/commander/sign`,
+  
 };
diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index e290a261b..f07fdd30c 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -49,4 +49,8 @@ export default {
   leaveReportLeavedayRetire: () => `${leaveReport}/leavedayRetire`,
 
   leaveReportLeave2: (type: string) => `${leaveReport}/leave2/${type}`,
+
+  addApproverByType:(type:string,profileType:string,id:string)=>`${leave}/${profileType}/add-approver/${type}/${id}`,
+  sendApprove:(id:string)=>`${leave}/admin/approve/officer/${id}`
+
 };
diff --git a/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue b/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
index 667fe49ea..78dbd26fa 100644
--- a/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
+++ b/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { useQuasar } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -12,7 +12,11 @@ import { checkPermission } from "@/utils/permissions";
 
 /** importType */
 import type { FremData } from "@/modules/09_leave/interface/request/leave";
-import type { LeaveType } from "@/modules/09_leave/interface/response/leave";
+import type {
+  LeaveType,
+  SeqTypeRow,
+  RowsType,
+} from "@/modules/09_leave/interface/response/leave";
 
 /** importForm*/
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
@@ -29,6 +33,7 @@ import FormLeaveToWorkInternational from "@/modules/09_leave/components/05_Leave
 import FormSpouse from "@/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
 import FormVocationalRehabilitation from "@/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
 import WorkFlow from "@/components/Workflow/Main.vue";
+import DialogAddCommander from "@/modules/09_leave/components/05_Leave/Dialog/DialogAddCommander.vue";
 
 /** use */
 const $q = useQuasar();
@@ -45,13 +50,17 @@ const stores = useLeavelistDataStore();
 const router = useRouter();
 const route = useRoute();
 const paramsId = route.params.id.toString();
+const keycloakId = ref<string>("");
+
 const workflowRef = ref<any>(null);
 const modalApprove = ref(false);
+const statusCheck = ref<string>("");
 const typeDocx = ref<string>("docx");
 const typePdf = ref<string>("pdf");
 const dialogTitle = ref<string>("อนุมัติ");
 const dialogLabel = ref<string>("เหตุผล");
-
+const modalAdd = ref<boolean>(false);
+const typeAdd = ref<string>("");
 /** Form รายละเอียดข้อมูล*/
 const formData = reactive<FremData>({
   id: "", //Id การยื่นขอลา
@@ -126,8 +135,91 @@ const formData = reactive<FremData>({
   leaveRangeEnd: "",
 });
 
+const isOfficer = ref<boolean>(false);
+const isStaff = ref<boolean>(false);
 const isLoadData = ref<boolean>(false);
+const rows = ref<RowsType>();
+const idCheck = computed(() => {
+  if (typeAdd.value == "COMMANDER") {
+    return rows.value?.commanders.map((items: SeqTypeRow) => items.profileId);
+  } else if (typeAdd.value == "APPROVER") {
+    return rows.value?.approvers.map((items: SeqTypeRow) => items.profileId);
+  }
+});
 
+const approveCheck = computed(() => {
+  return (
+    rows.value?.commanders?.every(
+      (commander) => commander.approveStatus === "APPROVE"
+    ) ?? false
+  );
+});
+
+const approvePendingCheck = computed(() => {
+  const commanders = rows.value?.commanders || [];
+  const index = commanders.findIndex((c) => c.profileId === keycloakId.value);
+
+  if (index === -1) {
+    return false;
+  }
+
+  const currentCommander = commanders[index];
+
+  if (currentCommander.approveStatus !== "PENDING") {
+    return false;
+  }
+
+  if (index === 0) {
+    return true;
+  }
+
+  const previousApproved = commanders
+    .slice(0, index)
+    .every((c) => c.approveStatus === "APPROVE");
+  return previousApproved;
+});
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "comment",
+    align: "left",
+    label: "ความคิดเห็น",
+    field: "comment",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
 /**
  * Function fetch รายละเอียดของข้อมูล
  * @param paramsId รับ ID จาก paramID
@@ -161,6 +253,7 @@ async function fetchDetailLeave(paramsId: string) {
       formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
       formData.leaveCount = data.leaveCount ? data.leaveCount : "0";
       formData.status = data.status && stores.convertSatatus(data.status);
+      statusCheck.value = data.status;
       formData.leaveLimit = data.leaveLimit ? data.leaveLimit : "0";
       formData.leaveSummary = data.leaveSummary ? data.leaveSummary : "0";
       formData.leaveRemain = data.leaveRemain ? data.leaveRemain : "0";
@@ -275,10 +368,12 @@ async function fetchDetailLeave(paramsId: string) {
       formData.leaveSubTypeName = data.leaveSubTypeName;
       formData.leaveRange = data.leaveRange;
       formData.leaveRangeEnd = data.leaveRangeEnd;
+      rows.value = {
+        commanders: data.commanders,
+        approvers: data.approvers,
+      };
 
       isLoadData.value = true;
-
-      /** ส่งประเภทของการลาไป Function เช็คประเภทการลา*/
       await fectOptionType();
     })
     .catch((err) => {
@@ -290,7 +385,6 @@ async function fetchDetailLeave(paramsId: string) {
 }
 
 const leaveType = ref<LeaveType[]>();
-/** function เรียกประเภทการลา */
 async function fectOptionType() {
   await http
     .get(config.API.leaveType())
@@ -490,9 +584,71 @@ const isCheckData = computed(() => {
   } else return false;
 });
 
+function onAddPerson(type: string) {
+  modalAdd.value = true;
+  typeAdd.value = type;
+}
+
+function onSend() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .get(config.API.sendApprove(paramsId))
+        .then((res) => {
+          fetchDetailLeave(paramsId);
+          success($q, "ส่งไปอนุมัติสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {});
+    },
+    "ยืนยันส่งไปอนุมัติ",
+    "ต้องการยืนยันส่งไปอนุมัติข้อมูลนี้ใช่หรือไม่"
+  );
+}
+
+async function checkOfficer() {
+  http
+    .get(
+      config.API.checkIsofficer +
+        `${
+          formData.profileType == "OFFICER"
+            ? "SYS_LEAVE_LIST"
+            : "SYS_LEAVE_LIST_EMP"
+        }`
+    )
+    .then(async (res) => {
+      isOfficer.value = await res.data.result.isOfficer;
+      isStaff.value = await res.data.result.isStaff;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+async function fetchKeycloakPosition() {
+  if (keycloakId.value == "") {
+    await http
+      .get(config.API.keycloakPosition())
+      .then(async (res) => {
+        const data = await res.data.result;
+        keycloakId.value = data.profileId;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  }
+}
+
 onMounted(async () => {
   if (paramsId) {
+    await fetchKeycloakPosition();
     await fetchDetailLeave(paramsId);
+    await checkOfficer();
   }
 });
 </script>
@@ -762,31 +918,113 @@ onMounted(async () => {
                   <div class="q-pl-sm text-weight-bold text-dark">
                     ความคิดเห็นของผู้บังคับบัญชา
                   </div>
+                  <q-btn
+                    v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+                    flat
+                    round
+                    icon="add"
+                    color="primary"
+                    dense
+                    class="q-ml-xs"
+                    @click="onAddPerson('COMMANDER')"
+                  >
+                    <q-tooltip>เพิ่มรายชื่อผู้บังคับบัญชา</q-tooltip>
+                  </q-btn>
                   <q-space />
 
                   <!-- workflowRef?.permission.isUpdate && -->
-                  <q-btn
-                    v-if="
-                      checkPermission($route)?.attrIsUpdate &&
-                      formData.reasonCommander === '-'
-                    "
-                    unelevated
-                    color="orange-5"
-                    label="ความคิดเห็นของผู้บังคับบัญชา"
-                    @click="openModal('authority')"
-                    ><q-tooltip>ความคิดเห็นของผู้บังคับบัญชา</q-tooltip>
-                  </q-btn>
                 </div>
                 <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-sm">
+                  <d-table
+                    ref="table"
+                    :columns="columns"
+                    :rows="rows?.commanders ?? []"
+                    row-key="key"
+                    flat
+                    bordered
+                    :paging="true"
+                    dense
+                    :rows-per-page-options="[1, 25, 50, 100]"
+                  >
+                    <!-- @update:pagination="updatePagination" -->
+                    <!-- <template v-slot:pagination="scope">
+      ทั้งหมด {{ total }} รายการ
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="Number(totalList)"
+        size="sm"
+        boundary-links
+        direction-links
+        :max-pages="5"
+        @update:model-value="getData"
+      ></q-pagination>
+    </template> -->
 
-                <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>
+                    <template v-slot:header="props">
+                      <q-tr :props="props">
+                        <q-th
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <span class="text-weight-medium">{{
+                            col.label
+                          }}</span>
+                        </q-th>
+                      </q-tr>
+                    </template>
+                    <template v-slot:body="props">
+                      <q-tr :props="props" class="cursor-pointer">
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div v-if="col.name == 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </div>
+                          <div v-else-if="col.name == 'comment'">
+                            <div
+                              v-if="
+                                props.row.approveStatus == 'PENDING' &&
+                                props.row.comment == ''
+                              "
+                            >
+                              <q-btn
+                                :disable="
+                                  statusCheck == 'NEW' ||
+                                  !approvePendingCheck ||
+                                  (props.row.profileId !== keycloakId &&
+                                    checkPermission($route)?.attrIsUpdate &&
+                                    formData.reasonCommander === '-')
+                                "
+                                label="แสดงความคิดเห็น"
+                                unelevated
+                                :color="
+                                  props.row.profileId !== keycloakId ||
+                                  statusCheck == 'NEW' ||
+                                  !approvePendingCheck
+                                    ? 'orange-3'
+                                    : 'orange-5'
+                                "
+                                @click="openModal('authority')"
+                                ><q-tooltip>แสดงความคิดเห็น</q-tooltip></q-btn
+                              >
+                            </div>
+                            <div v-else>
+                              {{ props.row.comment ? props.row.comment : "-" }}
+                            </div>
+                          </div>
+                          <div v-else>
+                            {{ col.value ? col.value : "-" }}
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </d-table>
                 </div>
               </q-card>
             </div>
@@ -800,6 +1038,18 @@ onMounted(async () => {
                   <div class="q-pl-sm text-weight-bold text-dark">
                     ความคิดเห็นของผู้มีอำนาจ
                   </div>
+                  <q-btn
+                    v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+                    flat
+                    round
+                    icon="add"
+                    color="primary"
+                    dense
+                    class="q-ml-xs"
+                    @click="onAddPerson('APPROVER')"
+                  >
+                    <q-tooltip>เพิ่มรายชื่อผู้มีอำนาจ</q-tooltip>
+                  </q-btn>
                   <q-space />
 
                   <!-- workflowRef?.permission.isUpdate && -->
@@ -807,7 +1057,10 @@ onMounted(async () => {
                     class="row q-gutter-sm"
                     v-if="
                       checkPermission($route)?.attrIsUpdate &&
-                      formData.reasonOligarch === '-'
+                      formData.reasonOligarch === '-' &&
+                      rows &&
+                      rows.approvers[0]?.profileId == keycloakId &&
+                      approveCheck
                     "
                   >
                     <q-btn
@@ -834,6 +1087,31 @@ onMounted(async () => {
                 <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-weight-bold text-top">
+                        ชื่อ - นามสกุล
+                      </div>
+                      <div class="col-12 text-detail">
+                        {{
+                          rows && rows.approvers[0]?.firstName
+                            ? `${rows?.approvers[0].prefix}${rows?.approvers[0].firstName} ${rows?.approvers[0].lastName}`
+                            : "-"
+                        }}
+                      </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">
+                        {{
+                          rows && rows.approvers[0]?.positionName
+                            ? rows?.approvers[0].positionName
+                            : "-"
+                        }}
+                      </div>
+                    </div>
                     <div class="col-xs-6 row items-start">
                       <div class="col-12 text-weight-bold text-top">
                         ผลการพิจารณา
@@ -930,6 +1208,16 @@ onMounted(async () => {
           ><q-tooltip>อนุมัติ</q-tooltip>
         </q-btn>
       </div> -->
+
+      <q-separator v-if="statusCheck == 'NEW' && (isOfficer || isStaff)" />
+      <q-card-actions
+        align="right"
+        v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+      >
+        <q-btn label="ส่งไปอนุมัติ" color="secondary" @click="onSend"
+          ><q-tooltip>ส่งไปอนุมัติ</q-tooltip></q-btn
+        >
+      </q-card-actions>
     </q-card>
   </div>
 
@@ -939,4 +1227,12 @@ onMounted(async () => {
     :label="dialogLabel"
     :savaForm="clickSave"
   />
+
+  <DialogAddCommander
+    v-model:modal="modalAdd"
+    :type="typeAdd"
+    :profileType="formData.profileType"
+    :fetchDetailLeave="fetchDetailLeave"
+    :id-check="idCheck"
+  />
 </template>
diff --git a/src/modules/09_leave/components/05_Leave/Dialog/DialogAddCommander.vue b/src/modules/09_leave/components/05_Leave/Dialog/DialogAddCommander.vue
new file mode 100644
index 000000000..95b7775eb
--- /dev/null
+++ b/src/modules/09_leave/components/05_Leave/Dialog/DialogAddCommander.vue
@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useRoute } from "vue-router";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  type: String,
+  profileType: String,
+  fetchDetailLeave: Function,
+  idCheck: Array,
+});
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const route = useRoute();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogConfirm,
+  dialogMessageNotify,
+} = mixin;
+
+const pageId = ref<string>(route.params.id as string);
+const keyword = ref<string>("");
+const isAct = ref<boolean>(false);
+
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const selected = ref<any[]>([]);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const rows = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "actFullName",
+    align: "left",
+    label: "รักษาการแทน",
+    field: "actFullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function onSearchData() {
+  getSearch();
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function getSearch() {
+  pagination.value.page = 1;
+  getData();
+}
+
+async function getData() {
+  console.log(props.idCheck);
+  const url =
+    props.type == "COMMANDER"
+      ? config.API.workflowCommanderOperate
+      : config.API.workflowCommanderSign;
+  showLoader();
+  await http
+    .put(url, {
+      pageSize: pagination.value.rowsPerPage,
+      page: pagination.value.page,
+      keyword: keyword.value,
+      isAct: isAct.value,
+    })
+    .then(async (res) => {
+      const data = res.data.result;
+      totalList.value = Math.ceil(data.total / pagination.value.rowsPerPage);
+      total.value = data.total;
+      rows.value = data.data;
+      selected.value = data.data.filter((items: any) => {
+        return props.idCheck?.some((i: any) => i === items.id);
+      });
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmit() {
+  if (selected.value.length !== 0) {
+    dialogConfirm($q, () => {
+      const body = selected.value.map((items: any, index: any) => ({
+        seq: index,
+        prefix: items.prefix,
+        firstName: items.firstName,
+        lastName: items.lastName,
+        positionName: items.position,
+        profileId: items.id,
+        keycloakId: items.keycloakId,
+      }));
+      showLoader();
+      http
+        .post(
+          config.API.addApproverByType(
+            props.type?.toLocaleLowerCase() as string,
+            props.profileType?.toLocaleLowerCase() as string,
+            pageId.value
+          ),
+          body
+        )
+        .then((res) => {
+          closeDialog();
+          success($q, "บันทึกสำเร็จ");
+          props.fetchDetailLeave?.(pageId.value);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {});
+    });
+  } else {
+    dialogMessageNotify($q, "กรุณาเลือกอย่างน้อย 1 คน");
+  }
+}
+
+function closeDialog() {
+  modal.value = false;
+  rows.value = [];
+  selected.value = [];
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="
+            props.type == 'APPROVER' ? 'เลือกผู้มีอำนาจ' : 'เลือกผู้บังคับบัญชา'
+          "
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <div class="row q-gutter-x-xs">
+                <q-input
+                  dense
+                  outlined
+                  label="ค้นหา"
+                  v-model="keyword"
+                  style="width: 300px"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search"></q-icon>
+                  </template>
+                </q-input>
+                <q-checkbox
+                  keep-color
+                  v-model="isAct"
+                  label="แสดงเฉพาะรักษาการแทน"
+                  color="primary"
+                >
+                  <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
+                </q-checkbox>
+                <q-space />
+                <q-btn
+                  color="primary"
+                  icon="search"
+                  label="ค้นหา"
+                  class="q-pa-sm"
+                  @click.prevent="onSearchData"
+                  style="width: 200px"
+                >
+                </q-btn>
+              </div>
+            </div>
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                row-key="key"
+                flat
+                bordered
+                :paging="true"
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                :selection="props.type == 'COMMANDER' ? `multiple` : `single`"
+                v-model:selected="selected"
+                @update:pagination="updatePagination"
+              >
+                <template v-slot:pagination="scope">
+                  ทั้งหมด {{ total }} รายการ
+                  <q-pagination
+                    v-model="pagination.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="Number(totalList)"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    :max-pages="5"
+                    @update:model-value="getData"
+                  ></q-pagination>
+                </template>
+
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.checkBox"
+                  />
+                </template>
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width />
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td>
+                      <q-checkbox
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="props.selected"
+                      />
+                    </q-td>
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'">
+                        {{
+                          (pagination.page - 1) * pagination.rowsPerPage +
+                          props.rowIndex +
+                          1
+                        }}
+                      </div>
+                      <div v-else>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/09_leave/interface/response/leave.ts b/src/modules/09_leave/interface/response/leave.ts
index bc8a54ed2..ee2a84858 100644
--- a/src/modules/09_leave/interface/response/leave.ts
+++ b/src/modules/09_leave/interface/response/leave.ts
@@ -34,6 +34,21 @@ interface FormData {
   status: string;
 }
 
+interface RowsType{
+  commanders:SeqTypeRow[]
+  approvers:SeqTypeRow[]
+}
+interface SeqTypeRow {
+  seq: number;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  positionName: string;
+  profileId: string;
+  keycloakId: string;
+  approveStatus: string;
+  comment: string;
+}
 interface DataDateMonthObject {
   month: number;
   year: number;
@@ -87,4 +102,6 @@ export type {
   LeaveType,
   FormReject,
   ResCalendar,
+  SeqTypeRow,
+  RowsType
 };