diff --git a/src/api/18_command/api.command.ts b/src/api/18_command/api.command.ts
index 58c7b946f..9bf159f39 100644
--- a/src/api/18_command/api.command.ts
+++ b/src/api/18_command/api.command.ts
@@ -19,6 +19,10 @@ export default {
 
   checkIdofficer: `${env.API_URI}/org/profile/keycloak/idofficer`,
 
-  commandRegister:(id:string)=>`${command}/register-tab0/${id}`,
-  commandRegisterByType:(id:string,type:string)=>`${command}/register-tab4/${type}/${id}`
+  commandRegister: (id: string) => `${command}/register-tab0/${id}`,
+  commandRegisterByType: (id: string, type: string) =>
+    `${command}/register-tab4/${type}/${id}`,
+
+  //Digital Signature
+  commandDirector: `${env.API_URI}/org/profile/commander-director`,
 };
diff --git a/src/modules/18_command/components/Step/View0_Digital.vue b/src/modules/18_command/components/Step/View0_Digital.vue
index ed6bb6b6c..86ca888d6 100644
--- a/src/modules/18_command/components/Step/View0_Digital.vue
+++ b/src/modules/18_command/components/Step/View0_Digital.vue
@@ -1,23 +1,28 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
-import type { DataOption } from "@/modules/18_command/interface/index/Main";
-import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";
+import type { Pagination } from "@/modules/18_command/interface/index/Main";
+import type {
+  DataFileDownload,
+  DataDirector,
+  DataAuthority,
+} from "@/modules/18_command/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import PerviewPDF from "@/modules/18_command/components/Step/PerviewPDF.vue";
 
 const $q = useQuasar();
 const route = useRoute();
+const router = useRouter();
 const store = useCommandDetail();
 const {
   showLoader,
@@ -45,20 +50,13 @@ const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
 
 const modalSelect = ref<boolean>(false); //popup เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
-const typeFilter = ref<string>("firstname");
 const search = ref<string>("");
-const typeFilterOp = ref<DataOption[]>([
-  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-  { id: "firstname", name: "ชื่อ" },
-  { id: "lastname", name: "นามสกุล" },
-]);
-const rows = ref<any[]>([
-  {
-    citizenId: "6796519798790",
-    firstName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
-  },
-]); //รายชื่อผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
-const selected = ref<any[]>([]); //เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
+const rows = ref<DataDirector[]>([]); //รายชื่อผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
+const maxPaeg = ref<number>(1);
+const total = ref<number>(0);
+const selected = ref<DataDirector[]>([]); //เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "citizenId",
@@ -76,6 +74,9 @@ const columns = ref<QTableProps["columns"]>([
     label: "ชื่อ-นามสกุล",
     sortable: true,
     field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -89,31 +90,31 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posType",
+    format(val, row) {
+      return `${row.posType} ${row.posLevel ? `(${row.posLevel})` : ""}   `;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
 //รอผู้มีอำนาจลงนามอนุมัติ
-const rowsAuthority = ref<any[]>([
-  {
-    fullName: "ว่าที่ร้อยตรีวรรนิมมามานา วงศ์วโรทัย",
-    comment: "ความคิดเห็น",
-    position: "หัวหน้าสำนัก",
-  },
-  {
-    fullName: "นายศรัณย์ ศิลาดี",
-    comment: "",
-    position: "ผู้อำนวนการ",
-  },
-]); //รายชื่อผู้อำนาจลงนามอนุมัติ
+const commandSignId = ref<string>("");
+const isSignatory = ref<boolean>(false);
+const rowsAuthority = ref<DataAuthority[]>([]); //รายชื่อผู้อำนาจลงนามอนุมัติ
 const modalComment = ref<boolean>(false); //popup แสดงความเห็น
 const reason = ref<string>("");
 
 //รอออกคำสั่ง
 const isCheckOrder = ref<boolean>(true); //เช็ครอออกคำสั่ง
-
 const isLoad = ref<boolean>(false); //แสดงโหลด
-
 const isPersonSign = ref<boolean>(false); //ผู้มีอำนาจลงนาม
-
 const modalPerView = ref<boolean>(false);
 
 /**
@@ -125,6 +126,7 @@ function onConfirmDraft() {
     store?.dataCommand?.commandExcecuteDate !== null
   ) {
     modalSelect.value = true;
+    fetchListDirector();
   } else {
     dialogMessageNotify(
       $q,
@@ -133,7 +135,33 @@ function onConfirmDraft() {
   }
 }
 
-function onSearchData() {}
+function fetchListDirector() {
+  showLoader();
+  http
+    .post(config.API.commandDirector, {
+      isDirector: true, // fix ค่านี้เป็น true
+      keyword: search.value,
+      page: page.value,
+      pageSize: pageSize.value,
+    })
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data.data;
+      maxPaeg.value = Math.ceil(data.total / pageSize.value);
+      total.value = data.total;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSearchData() {
+  page.value = 1;
+  fetchListDirector();
+}
 
 function onConfirmSendToCommander() {
   dialogConfirm(
@@ -141,13 +169,14 @@ function onConfirmSendToCommander() {
     async () => {
       showLoader();
       await http
-        .put(config.API.command + `/draft/${commandId.value}`, {
-          sign: true,
+        .put(config.API.command + `/step-add/${commandId.value}`, {
+          profileId: selected.value[0].id,
+          isSignatory: isPersonSign.value, // เป็นผู้มีอำนาจลงนามไหม
         })
         .then(async () => {
-          await fetchData?.();
-          isCheckDraft.value = true;
+          await Promise.all([fetchData?.(), fetchListAuthority()]);
           onCloseDialog();
+          isCheckDraft.value = true;
         })
         .catch((err) => {
           messageError($q, err);
@@ -161,18 +190,34 @@ function onConfirmSendToCommander() {
   );
 }
 
-function updateSelect() {
-  search.value = "";
-}
-
-function onComment() {
+function onComment(id: string, isStatus: boolean) {
   modalComment.value = true;
+  commandSignId.value = id;
+  isSignatory.value = isStatus;
 }
 
 function onSubmitComment() {
-  dialogConfirm($q, () => {
-    rowsAuthority.value[1].comment = reason.value;
-    onCloseDialog();
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.command + `/step-comment/${commandSignId.value}`, {
+        comment: reason.value,
+      })
+      .then(async () => {
+        if (isSignatory.value) {
+          onCloseDialog();
+          await router.push(`/command/view/${commandId.value}`);
+        } else {
+          await Promise.all([fetchData?.(), fetchListAuthority()]);
+        }
+        onCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -180,6 +225,18 @@ function onCloseDialog() {
   modalSelect.value = false;
   modalComment.value = false;
   isPersonSign.value = false;
+  rows.value = [];
+  selected.value = [];
+  search.value = "";
+  page.value = 1;
+  pageSize.value = 10;
+  maxPaeg.value = 1;
+  total.value = 0;
+  reason.value = "";
+}
+
+function updatePagination(newPagination: Pagination) {
+  pageSize.value = newPagination.rowsPerPage;
 }
 
 async function fetchDoc(group: string) {
@@ -294,12 +351,35 @@ function downloadFile(file: any, group: string, isView: boolean = false) {
     });
 }
 
+async function fetchListAuthority() {
+  await http
+    .get(config.API.command + `/step/${commandId.value}`)
+    .then(async (res) => {
+      const data = res.data.result;
+      rowsAuthority.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+watch(
+  () => pageSize.value,
+  () => {
+    onSearchData();
+  }
+);
+
 onMounted(async () => {
   isLoad.value = false;
   let promises = [fetchDoc("order")];
   if (isAttachment.value) {
     promises.push(fetchDoc("tailer"));
   }
+  if (step.value > 1) {
+    promises.push(fetchListAuthority());
+  }
+
   await Promise.all(promises).finally(() => {
     isLoad.value = true;
   });
@@ -482,7 +562,7 @@ onMounted(async () => {
               <q-item v-for="(item, index) in rowsAuthority" :key="index">
                 <q-item-section>
                   <q-item-label
-                    >{{ item.fullName }}
+                    >{{ `${item.prefix}${item.firstName} ${item.lastName}` }}
                     {{ `(${item.position})` }}</q-item-label
                   >
                   <q-item-label caption lines="2">{{
@@ -494,20 +574,17 @@ onMounted(async () => {
                   side
                   top
                   v-if="
-                    index === rowsAuthority.length - 1 && item.comment === ''
+                    index === rowsAuthority.length - 1 && item.comment === null
                   "
                 >
                   <q-item-label caption v-if="!store.readonly">
                     <q-btn
-                      flat
-                      dense
-                      color="info"
-                      icon="info"
-                      round
-                      @click.prevent="onComment"
-                    >
-                      <q-tooltip>แสดงความเห็น </q-tooltip>
-                    </q-btn>
+                      unelevated
+                      rounded
+                      @click.prevent="onComment(item.id, item.isSignatory)"
+                      label="แสดงความเห็น"
+                      color="blue"
+                    />
                   </q-item-label>
                 </q-item-section>
               </q-item>
@@ -516,7 +593,10 @@ onMounted(async () => {
 
           <div
             class="col-12"
-            v-if="rowsAuthority[rowsAuthority.length - 1].comment !== ''"
+            v-if="
+              rowsAuthority[rowsAuthority.length - 1].comment !== null &&
+              step === 2 && !store.readonly
+            "
           >
             <q-btn
               @click.prevent="onConfirmDraft"
@@ -591,20 +671,7 @@ onMounted(async () => {
       <q-card-section>
         <div class="col-12 q-col-gutter-sm">
           <div class="col-12 row q-col-gutter-md items-start">
-            <div class="col-12 col-sm-6 col-md-3">
-              <q-select
-                label="ค้นหาจาก"
-                v-model="typeFilter"
-                :options="typeFilterOp"
-                emit-value
-                dense
-                @update:model-value="updateSelect"
-                map-options
-                outlined
-                option-label="name"
-                option-value="id"
-              />
-            </div>
+            <q-space />
 
             <div class="col-12 col-sm-6 col-md-6">
               <q-input
@@ -639,6 +706,8 @@ onMounted(async () => {
               dense
               selection="single"
               v-model:selected="selected"
+              :rows-per-page-options="[10, 25, 50, 100]"
+              @update:pagination="updatePagination"
             >
               <template v-slot:header-selection="scope">
                 <q-checkbox
@@ -683,6 +752,20 @@ onMounted(async () => {
                   </q-td>
                 </q-tr>
               </template>
+              <template v-slot:pagination="scope">
+                ทั้งหมด {{ total }} รายการ
+                <q-pagination
+                  v-model="page"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(maxPaeg)"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  :max-pages="5"
+                  @update:model-value="fetchListDirector"
+                ></q-pagination>
+              </template>
             </d-table>
           </div>
 
diff --git a/src/modules/18_command/interface/response/Main.ts b/src/modules/18_command/interface/response/Main.ts
index 87f915311..ccb014334 100644
--- a/src/modules/18_command/interface/response/Main.ts
+++ b/src/modules/18_command/interface/response/Main.ts
@@ -71,10 +71,37 @@ interface DataFileOrder {
   };
 }
 
+interface DataDirector {
+  actFullName: string;
+  citizenId: string;
+  firstName: string;
+  id: string;
+  isDirector: number;
+  lastName: string;
+  orgRootId: string;
+  posLevel: string;
+  posType: string;
+  position: string;
+  prefix: string;
+}
+
+interface DataAuthority {
+  id: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  position: string;
+  profileId: string;
+  comment: string;
+  isSignatory: boolean;
+}
+
 export type {
   ResListCommand,
   DataListCommand,
   DataCommandType,
   DataFileDownload,
   DataFileOrder,
+  DataDirector,
+  DataAuthority,
 };