diff --git a/src/modules/18_command/components/Step/0_Main.vue b/src/modules/18_command/components/Step/0_Main.vue
index bdc849fb0..f45c19ae3 100644
--- a/src/modules/18_command/components/Step/0_Main.vue
+++ b/src/modules/18_command/components/Step/0_Main.vue
@@ -1,31 +1,87 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 
+import { useRoute } 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 LiveView from "@/modules/18_command/components/Step/View0_Live.vue";
 import DigitalView from "@/modules/18_command/components/Step/View0_Digital.vue";
 
 const $q = useQuasar();
+const route = useRoute();
+const store = useCommandDetail();
+const { checkStep } = store;
 const { showLoader, hideLoader, messageError, dialogConfirm } =
   useCounterMixin();
 
-const step = ref<number>(2);
-const isStatus = ref<boolean>(false); //สถานะของคำสั่ง
-const signature = ref<string>(""); //วิธีการลงนาม
-const isSignature = ref<boolean>(false); //การลงนาม
+const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
+const step = ref<number>(1);
+const isStatus = ref<string>(""); //สถานะของคำสั่ง
+const signaturetype = ref<string>(""); //วิธีการลงนาม
+const isSignature = ref<boolean | null>(null);
+
+const isDraft = ref<boolean>(false); //ทำแบบร่าง
+const isSign = ref<boolean>(false); //การลงนาม
+const isAttachment = ref<boolean>(false); //เอกสารแนบท้าย
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.commandAction(commandId.value, "tab0"))
+    .then(async (res) => {
+      const data = res.data.result;
+      step.value = data.status && checkStep(data.status);
+      isSignature.value = data.isSignature;
+      signaturetype.value =
+        data.isSignature === true
+          ? "Live"
+          : data.isSignature === false
+          ? "Digital"
+          : "";
+      isStatus.value = data.status;
+      isDraft.value = data.isDraft;
+      isSign.value = data.isSign;
+      isAttachment.value = data.isAttachment;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 function onConfirmSignature() {
   dialogConfirm(
     $q,
-    () => {
-      isSignature.value = true;
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.command + `/sign/${commandId.value}`, {
+          sign: signaturetype.value === "Live" ? true : false,
+        })
+        .then(async (res) => {
+          fetchData();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันวิธีลงนาม",
     "เมื่อยืนยันวิธีลงนามแล้วจะไม่สามารถเปลี่ยนวิธีการได้ คุณต้องการยืนยันใช่หรือไม่?"
   );
 }
+
+onMounted(async () => {
+  await fetchData();
+});
 </script>
 
 <template>
@@ -35,7 +91,8 @@ function onConfirmSignature() {
       <div class="col-12">
         <q-card bordered>
           <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
-            สถานะของคำสั่ง <spen v-if="isStatus" class="text-red"> (ลบ) </spen>
+            สถานะของคำสั่ง
+            <spen v-if="isStatus === 'CANCEL'" class="text-red"> (ลบ) </spen>
           </div>
           <q-separator />
 
@@ -47,8 +104,8 @@ function onConfirmSignature() {
               header-class="bg-grey-1"
               class="step"
               bordered
-              :active-color="isStatus ? 'grey-6' : 'primary'"
-              :done-color="isStatus ? 'grey-6' : 'primary'"
+              :active-color="isStatus === 'CANCEL' ? 'grey-6' : 'primary'"
+              :done-color="isStatus === 'CANCEL' ? 'grey-6' : 'primary'"
             >
               <q-step
                 :name="1"
@@ -94,10 +151,10 @@ function onConfirmSignature() {
             <q-item tag="label" v-ripple>
               <q-item-section avatar>
                 <q-radio
-                  v-model="signature"
+                  v-model="signaturetype"
                   val="Live"
                   color="primary"
-                  :disable="isSignature || isStatus"
+                  :disable="isSignature !== null || store.readonly"
                 />
               </q-item-section>
               <q-item-section>
@@ -113,10 +170,10 @@ function onConfirmSignature() {
             <q-item tag="label" v-ripple>
               <q-item-section avatar>
                 <q-radio
-                  v-model="signature"
+                  v-model="signaturetype"
                   val="Digital"
                   color="primary"
-                  :disable="isSignature || isStatus"
+                  :disable="isSignature !== null || store.readonly"
                 />
               </q-item-section>
               <q-item-section>
@@ -128,12 +185,12 @@ function onConfirmSignature() {
             </q-item>
           </q-list>
 
-          <div class="row q-pa-sm" v-if="!isSignature">
+          <div class="row q-pa-sm" v-if="isSignature === null">
             <q-btn
               label="ยืนยันวิธีการลงนาม"
               type="submit"
-              :color="signature === '' ? 'grey-5' : 'primary'"
-              :disable="signature === ''"
+              :color="!signaturetype ? 'grey-5' : 'primary'"
+              :disable="!signaturetype"
               @click.prevent="onConfirmSignature"
             />
 
@@ -143,16 +200,30 @@ function onConfirmSignature() {
           </div>
 
           <!-- กรณีลงนามเลือกเซ็นสด -->
-          <div class="col-12" v-if="signature === 'Live' && isSignature">
-            <LiveView />
+          <div
+            class="col-12"
+            v-if="signaturetype === 'Live' && isSignature !== null"
+          >
+            <LiveView
+              v-model:step="step"
+              v-model:is-draft="isDraft"
+              v-model:is-authority="isSign"
+              v-model:is-attachment="isAttachment"
+              :fetch-data="fetchData"
+            />
           </div>
 
           <!-- กรณี Digital Signature -->
           <div
             class="col-12"
-            v-else-if="signature === 'Digital' && isSignature"
+            v-else-if="signaturetype === 'Digital' && isSignature !== null"
           >
-            <DigitalView />
+            <DigitalView
+              v-model:step="step"
+              v-model:is-draft="isDraft"
+              v-model:is-attachment="isAttachment"
+              :fetch-data="fetchData"
+            />
           </div>
         </q-card>
       </div>
diff --git a/src/modules/18_command/components/Step/View0_Digital.vue b/src/modules/18_command/components/Step/View0_Digital.vue
index 94cb5a1c1..e99b61200 100644
--- a/src/modules/18_command/components/Step/View0_Digital.vue
+++ b/src/modules/18_command/components/Step/View0_Digital.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 
+import { useRoute } 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";
@@ -10,23 +14,33 @@ import type { DataOption } from "@/modules/18_command/interface/index/Main";
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
-const { dialogConfirm, dialogMessageNotify } = useCounterMixin();
+const route = useRoute();
+const store = useCommandDetail();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+} = useCounterMixin();
 
-const step = ref<number>(4); //ขั้นตอนการลงนาม
+const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
+
+const { fetchData } = defineProps({
+  fetchData: { type: Function, require: true },
+});
+const step = defineModel<number>("step", { required: true }); //ขั้นตอนการลงนาม
 
 //แบบร่าง
-const isDraft = ref<boolean>(false); //ทำแบบร่างเสร็จสิ้น
+const isCheckDraft = defineModel<boolean>("isDraft", { required: true });
 
 // แบบร่าง
-const isCheckDraft = ref<boolean>(true); //เช็คทำแบบร่างเสร็จสิ้น
-const isAttachment = ref<boolean>(true); //เช็คบัญชีแนบท้าย
+const isAttachment = defineModel<boolean>("isAttachment", { required: true }); //เช็คบัญชีแนบท้าย
 const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
 const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
-const orderNo = ref<string>(""); //เลขที่คำสั่ง
-const affectDate = ref<Date | null>(null); //วันที่ลงนาม
-const excecuteDate = ref<Date | null>(null); //วันที่คำสั่งมีผล
+
 const modalSelect = ref<boolean>(false); //popup เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
 const typeFilter = ref<string>("firstname");
 const search = ref<string>("");
@@ -98,10 +112,11 @@ const isCheckOrder = ref<boolean>(true); //เช็ครอออกคำส
  */
 function onConfirmDraft() {
   if (
-    orderNo.value !== "" ||
-    affectDate.value !== null ||
-    excecuteDate.value !== null
+    store?.dataCommand?.commandNo !== "" &&
+    store?.dataCommand?.commandAffectDate !== null &&
+    store?.dataCommand?.commandExcecuteDate !== null
   ) {
+    modalSelect.value = true;
   } else {
     dialogMessageNotify(
       $q,
@@ -115,10 +130,23 @@ function onSearchData() {}
 function onConfirmSendToCommander() {
   dialogConfirm(
     $q,
-    () => {
-      step.value++;
-      isCheckDraft.value = true;
-      onCloseDialog();
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.command + `/draft/${commandId.value}`, {
+          sign: true,
+        })
+        .then(async () => {
+          await fetchData?.();
+          isCheckDraft.value = true;
+          onCloseDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ",
     "คุณต้องการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจใช่หรือไม่?"
@@ -144,15 +172,17 @@ function onCloseDialog() {
   modalSelect.value = false;
   modalComment.value = false;
 }
+
+onMounted(() => {});
 </script>
 
 <template>
   <div class="q-px-lg q-py-md">
-    <q-timeline color="blue-5">
+    <q-timeline :color="store.status === 'CANCEL' ? 'grey-4' : 'blue-5'">
       <!-- แบบร่าง -->
       <q-timeline-entry
         title="แบบร่าง"
-        :icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : ''"
+        :icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : 'mdi-numeric-1'"
       >
         <div class="row q-col-gutter-sm">
           <div :class="isAttachment ? 'col-12' : 'col-6'">
@@ -182,6 +212,7 @@ function onCloseDialog() {
                     </q-btn>
                   </div>
                   <q-file
+                    v-if="step === 1"
                     outlined
                     dense
                     v-model="fileUploadOrder"
@@ -189,6 +220,7 @@ function onCloseDialog() {
                     hide-bottom-space
                     :rules="[(val:string) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
                     accept=".pdf"
+                    :readonly="store.readonly"
                   >
                     <template v-slot:prepend>
                       <q-icon name="attach_file" />
@@ -218,6 +250,7 @@ function onCloseDialog() {
                   </div>
 
                   <q-file
+                    v-if="step === 1"
                     outlined
                     dense
                     v-model="fileUploadTailer"
@@ -225,22 +258,52 @@ function onCloseDialog() {
                     hide-bottom-space
                     :rules="[(val:string) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
                     accept=".pdf"
+                    :readonly="store.readonly"
                   >
                     <template v-slot:prepend>
                       <q-icon name="attach_file" />
                     </template>
                   </q-file>
                 </div>
+
+                <div class="row col-12" v-if="!store.readonly">
+                  <q-space />
+                  <q-btn
+                    icon="mdi-upload"
+                    label="อัปโหลดเอกสารส"
+                    :color="
+                      fileUploadOrder == null ||
+                      (isAttachment && fileUploadTailer === null)
+                        ? 'grey-5'
+                        : 'blue-5'
+                    "
+                    :disable="
+                      fileUploadOrder == null ||
+                      (isAttachment && fileUploadTailer === null)
+                    "
+                  >
+                  </q-btn>
+                </div>
               </div>
             </fieldset>
           </div>
 
-          <div class="col-12" v-if="!isCheckDraft">
+          <div
+            class="col-12"
+            v-if="!isCheckDraft && fileOrder && (isAttachment || fileTailer)"
+          >
             <q-btn
+              v-if="!store.readonly"
               @click.prevent="onConfirmDraft"
               label="เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง"
-              color="public"
-              :disable="fileOrder === null || fileTailer === null"
+              :color="
+                fileOrder === null || (isAttachment && fileTailer === null)
+                  ? 'grey-5'
+                  : 'public'
+              "
+              :disable="
+                fileOrder === null || (isAttachment && fileTailer === null)
+              "
             />
           </div>
         </div>
@@ -249,7 +312,7 @@ function onCloseDialog() {
       <!-- รอผู้มีอำนาจลงนามอนุมัติ -->
       <q-timeline-entry
         title="รอผู้มีอำนาจลงนามอนุมัติ"
-        :icon="step === 2 ? 'mdi-pencil' : step > 2 ? 'done' : ''"
+        :icon="step === 2 ? 'mdi-pencil' : step > 2 ? 'done' : 'mdi-numeric-2'"
         :color="step < 2 ? 'grey-4' : ''"
       >
         <div class="row q-col-gutter-sm" v-if="isCheckDraft">
@@ -273,7 +336,7 @@ function onCloseDialog() {
                     index === rowsAuthority.length - 1 && item.comment === ''
                   "
                 >
-                  <q-item-label caption>
+                  <q-item-label caption v-if="!store.readonly">
                     <q-btn
                       flat
                       dense
@@ -306,7 +369,7 @@ function onCloseDialog() {
       <!-- รอออกคำสั่ง -->
       <q-timeline-entry
         title="รอออกคำสั่ง"
-        :icon="step === 3 ? 'mdi-pencil' : step > 3 ? 'done' : ''"
+        :icon="step === 3 ? 'mdi-pencil' : step > 3 ? 'done' : 'mdi-numeric-3'"
         :color="step < 3 ? 'grey-4' : ''"
       >
         <!-- <div class="row q-col-gutter-sm" v-if="isCheckAuthority">
@@ -317,10 +380,10 @@ function onCloseDialog() {
       <!-- รอออกคำสั่ง -->
       <q-timeline-entry
         title="ออกคำสั่งเสร็จสิ้น"
-        :icon="step === 4 ? 'mdi-pencil' : step > 4 ? 'done' : ''"
+        :icon="step === 4 ? 'mdi-pencil' : step > 4 ? 'done' : 'mdi-numeric-4'"
         :color="step < 4 ? 'grey-4' : ''"
       >
-        <div class="row q-col-gutter-sm" v-if="isCheckOrder">
+        <div class="row q-col-gutter-sm" v-if="step === 4">
           <div class="q-pa-md q-gutter-sm">
             <q-btn
               color="blue-5"
diff --git a/src/modules/18_command/components/Step/View0_Live.vue b/src/modules/18_command/components/Step/View0_Live.vue
index 949b66e0f..f6bb0d648 100644
--- a/src/modules/18_command/components/Step/View0_Live.vue
+++ b/src/modules/18_command/components/Step/View0_Live.vue
@@ -1,29 +1,44 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onBeforeMount, onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 
+import { useRoute } 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";
 
 const $q = useQuasar();
-const { dialogConfirm, dialogMessageNotify } = useCounterMixin();
+const route = useRoute();
+const store = useCommandDetail();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogMessageNotify,
+  messageError,
+} = useCounterMixin();
 
-const step = ref<number>(1); //ขั้นตอนการลงนาม
+const step = defineModel<number>("step", { required: true }); //ขั้นตอนการลงนาม
+const { fetchData } = defineProps({
+  fetchData: { type: Function, require: true },
+});
+
+const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
 
 //แบบร่าง
-const isDraft = ref<boolean>(false); //ทำแบบร่างเสร็จสิ้น
+const isDraft = defineModel<boolean>("isDraft", { required: true });
 const isCheckDraft = ref<boolean>(false); //เช็คทำแบบร่างเสร็จสิ้น
 
 // รอผู้มีอำนาจลงนามอนุมัติ
-const isAuthority = ref<boolean>(false); //ผู้มีอำนาจลงนามอนุมัติแล้ว
+const isAuthority = defineModel<boolean>("isAuthority", { required: true }); //ผู้มีอำนาจลงนามอนุมัติแล้ว
+
 const isCheckAuthority = ref<boolean>(false); //เช็ครอผู้มีอำนาจลงนามอนุมัติ
-const isAttachment = ref<boolean>(true); //เช็คบัญชีแนบท้าย
+const isAttachment = defineModel<boolean>("isAttachment", { required: true }); //เช็คบัญชีแนบท้าย
 const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
 const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
-const orderNo = ref<string>(""); //เลขที่คำสั่ง
-const affectDate = ref<Date | null>(null); //วันที่ลงนาม
-const excecuteDate = ref<Date | null>(null); //วันที่คำสั่งมีผล
 
 //รอออกคำสั่ง
 const isCheckOrder = ref<boolean>(false); //เช็ครอออกคำสั่ง
@@ -34,29 +49,70 @@ const isCheckOrder = ref<boolean>(false); //เช็ครอออกคำส
 function onConfirmDraft() {
   dialogConfirm(
     $q,
-    () => {
-      isCheckDraft.value = true;
-      step.value++;
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.command + `/draft/${commandId.value}`, {
+          sign: isDraft.value,
+        })
+        .then(async () => {
+          fetchData?.();
+          isCheckDraft.value = true;
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ",
     "คุณต้องการยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติใช่หรือไม่?"
   );
 }
 
+async function updateCheckboxAuthority(val: boolean) {
+  showLoader();
+  await http
+    .put(config.API.command + `/pending-check/${commandId.value}`, {
+      sign: val,
+    })
+    .then(() => {})
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * ฟังก์ชันยืนยันการส่งออกคำสั่ง
  */
 function onConfirmOrder() {
   if (
-    orderNo.value !== "" ||
-    affectDate.value !== null ||
-    excecuteDate.value !== null
+    store?.dataCommand?.commandNo !== "" &&
+    store?.dataCommand?.commandAffectDate !== null &&
+    store?.dataCommand?.commandExcecuteDate !== null
   ) {
     dialogConfirm(
       $q,
-      () => {
-        isCheckAuthority.value = true;
-        step.value++;
+      async () => {
+        showLoader();
+        await http
+          .put(config.API.command + `/pending/${commandId.value}`, {
+            sign: isAuthority.value,
+          })
+          .then(async () => {
+            fetchData?.();
+            isCheckAuthority.value = true;
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
       },
       "ยืนยันการส่งออกคำสั่ง",
       "คุณต้องการยืนยันการส่งออกคำสั่งใช่หรือไม่?"
@@ -68,30 +124,36 @@ function onConfirmOrder() {
     );
   }
 }
+
+onMounted(() => {
+  isCheckDraft.value = isDraft.value;
+  isCheckAuthority.value = isAuthority.value;
+});
 </script>
 
 <template>
   <div class="q-px-lg q-py-md">
-    <q-timeline color="blue-5">
+    <q-timeline :color="store.status === 'CANCEL' ? 'grey-4' : 'blue-5'">
       <!-- แบบร่าง -->
       <q-timeline-entry
         title="แบบร่าง"
-        :icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : ''"
+        :icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : 'mdi-numeric-1'"
       >
         <div class="row q-col-gutter-sm">
           <div class="col-12">
             <q-checkbox
               v-model="isDraft"
               label="ทำแบบร่างเสร็จสิ้น: Print เอกสารเพื่อส่งเสนอผู้มีอำนาจลงนาม"
-              :disable="isCheckDraft"
+              :disable="isCheckDraft || store.readonly"
             />
           </div>
 
           <div class="col-12" v-if="!isCheckDraft">
             <q-btn
+              v-if="!store.readonly"
               @click.prevent="onConfirmDraft"
               label="ส่งให้ผู้มีอำนาจลงนามอนุมัติ"
-              color="public"
+              :color="!isDraft ? 'grey-5' : 'public'"
               :disable="!isDraft"
             />
           </div>
@@ -101,15 +163,16 @@ function onConfirmOrder() {
       <!-- รอผู้มีอำนาจลงนามอนุมัติ -->
       <q-timeline-entry
         title="รอผู้มีอำนาจลงนามอนุมัติ"
-        :icon="step === 2 ? 'mdi-pencil' : step > 2 ? 'done' : ''"
+        :icon="step === 2 ? 'mdi-pencil' : step > 2 ? 'done' : 'mdi-numeric-2'"
         :color="step < 2 ? 'grey-4' : ''"
       >
         <div class="row q-col-gutter-sm" v-if="isCheckDraft">
           <div class="col-12">
             <q-checkbox
+              @update:model-value="updateCheckboxAuthority"
               v-model="isAuthority"
               label="ผู้มีอำนาจลงนามอนุมัติแล้ว"
-              :disable="step > 2"
+              :disable="step > 2 || isAuthority || store.readonly"
             />
           </div>
 
@@ -144,13 +207,15 @@ function onConfirmOrder() {
                     </q-btn>
                   </div>
                   <q-file
+                    v-if="step === 2"
                     outlined
                     dense
                     v-model="fileUploadOrder"
                     label="เลือกไฟล์คำสั่ง"
                     hide-bottom-space
-                    :rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
+                    :rules="[(val:string) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
                     accept=".pdf"
+                    :readonly="store.readonly"
                   >
                     <template v-slot:prepend>
                       <q-icon name="attach_file" />
@@ -180,30 +245,68 @@ function onConfirmOrder() {
                   </div>
 
                   <q-file
+                    v-if="step === 2"
                     outlined
                     dense
                     v-model="fileUploadTailer"
                     label="เลือกไฟล์เอกสารแนบท้าย"
                     hide-bottom-space
-                    :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
+                    :rules="[(val:string) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
                     accept=".pdf"
+                    :readonly="store.readonly"
                   >
                     <template v-slot:prepend>
                       <q-icon name="attach_file" />
                     </template>
                   </q-file>
                 </div>
+
+                <div class="row col-12" v-if="!store.readonly">
+                  <q-space />
+                  <q-btn
+                    icon="mdi-upload"
+                    label="อัปโหลดเอกสารส"
+                    :color="
+                      fileUploadOrder == null ||
+                      (isAttachment && fileUploadTailer === null)
+                        ? 'grey-5'
+                        : 'blue-5'
+                    "
+                    :disable="
+                      fileUploadOrder == null ||
+                      (isAttachment && fileUploadTailer === null)
+                    "
+                  >
+                  </q-btn>
+                </div>
               </div>
             </fieldset>
           </div>
 
-          <div class="col-12" v-if="!isCheckAuthority">
+          <div
+            class="col-12"
+            v-if="
+              step === 2 &&
+              isAuthority &&
+              fileOrder &&
+              (isAttachment || fileTailer)
+            "
+          >
             <q-btn
+              v-if="!store.readonly"
               @click.prevent="onConfirmOrder"
               label="ยืนยันออกคำสั่ง"
-              color="public"
+              :color="
+                !isAuthority ||
+                fileOrder === null ||
+                (fileTailer === null && isAttachment)
+                  ? 'grey-5'
+                  : 'public'
+              "
               :disable="
-                !isAuthority || fileOrder === null || fileTailer === null
+                !isAuthority ||
+                fileOrder === null ||
+                (fileTailer === null && isAttachment)
               "
             />
           </div>
@@ -213,22 +316,22 @@ function onConfirmOrder() {
       <!-- รอออกคำสั่ง -->
       <q-timeline-entry
         title="รอออกคำสั่ง"
-        :icon="step === 3 ? 'mdi-pencil' : step > 3 ? 'done' : ''"
+        :icon="step === 3 ? 'mdi-pencil' : step > 3 ? 'done' : 'mdi-numeric-3'"
         :color="step < 3 ? 'grey-4' : ''"
       >
         <div class="row q-col-gutter-sm" v-if="isCheckAuthority">
-          <div class="col-12">รอออกคำสั่ง</div>
+          <!-- <div class="col-12">รอออกคำสั่ง</div> -->
         </div>
       </q-timeline-entry>
 
       <!-- รอออกคำสั่ง -->
       <q-timeline-entry
         title="ออกคำสั่งเสร็จสิ้น"
-        :icon="step === 4 ? 'mdi-pencil' : step > 4 ? 'done' : ''"
+        :icon="step === 4 ? 'mdi-pencil' : step > 4 ? 'done' : 'mdi-numeric-4'"
         :color="step < 4 ? 'grey-4' : ''"
       >
-        <div class="row q-col-gutter-sm" v-if="isCheckOrder">
-          <div class="col-12">รอออกคำสั่ง</div>
+        <div class="row q-col-gutter-sm">
+          <!-- <div class="col-12">รอออกคำสั่ง</div> -->
         </div>
       </q-timeline-entry>
     </q-timeline>
diff --git a/src/modules/18_command/store/DetailStore.ts b/src/modules/18_command/store/DetailStore.ts
index 9de22776a..b33753325 100644
--- a/src/modules/18_command/store/DetailStore.ts
+++ b/src/modules/18_command/store/DetailStore.ts
@@ -1,9 +1,28 @@
 import { ref } from "vue";
 import { defineStore } from "pinia";
 
+import type { FormDataDetail } from "@/modules/18_command/interface/request/Main";
+
 export const useCommandDetail = defineStore("commandDetailStore", () => {
   const readonly = ref<boolean>(false);
-  const isChangeData = ref<boolean>(false);
+  const dataCommand = ref<FormDataDetail>();
+  const status = ref<string>("");
+
+  function checkStep(val: string) {
+    status.value = val;
+    switch (val) {
+      case "DRAFT":
+        return 1;
+      case "PENDING":
+        return 2;
+      case "WAITING":
+        return 3;
+      case "REPORTED":
+        return 4;
+      default:
+        return 0;
+    }
+  }
 
   const classInput = (val: boolean) => {
     return {
@@ -13,8 +32,10 @@ export const useCommandDetail = defineStore("commandDetailStore", () => {
   };
 
   return {
+    checkStep,
     classInput,
     readonly,
-   
+    status,
+    dataCommand,
   };
 });
diff --git a/src/modules/18_command/views/detail.vue b/src/modules/18_command/views/detail.vue
index e6229b049..e5d445fea 100644
--- a/src/modules/18_command/views/detail.vue
+++ b/src/modules/18_command/views/detail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, reactive } from "vue";
+import { onMounted, ref, watch, reactive, onBeforeMount } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -86,6 +86,7 @@ async function fetchDataCommandList() {
     .then(async (res) => {
       const data = await res.data.result;
       formCommandList = data;
+      store.dataCommand = data;
       //รอ API ส่งมา  isAttachment.value = data.isAttachment ;
       isAttachment.value = true; // จำลอง
       isChangeData.value = false; //จำลอง