diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 887140412..9487fedff 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -1384,7 +1384,7 @@ onMounted(async () => {
                         :outlined="true"
                         :hide-dropdown-icon="false"
                         :rules="[
-                          (val) => !!val || `กรุณาเลือกประเภทเครื่องราช`,
+                          (val:string) => !!val || `กรุณาเลือกประเภทเครื่องราช`,
                         ]"
                       />
                     </div>
@@ -1396,7 +1396,7 @@ onMounted(async () => {
                         outlined
                         dense
                         lazy-rules
-                        :rules="[(val) => !!val || `กรุณากรอกหมายเหตุ`]"
+                        :rules="[(val:string) => !!val || `กรุณากรอกหมายเหตุ`]"
                         v-model="reason"
                         :label="`หมายเหตุ`"
                       />
diff --git a/src/modules/07_insignia/components/report/ReportDetail.vue b/src/modules/07_insignia/components/report/ReportDetail.vue
index 64a6f997c..dede5695c 100644
--- a/src/modules/07_insignia/components/report/ReportDetail.vue
+++ b/src/modules/07_insignia/components/report/ReportDetail.vue
@@ -70,7 +70,7 @@ function backHistory() {
 async function fecthlistRound() {
   showLoader();
   await http
-    .get(config.API.listRoundInsignia())
+    .get(config.API.listRoundInsignia(), { params: { path: "REPORT" } })
     .then((res: any) => {
       optionsList.value = res.data.result.map((e: ResponsePeriod) => ({
         id: e.period_id,
diff --git a/src/modules/07_insignia/views/01_RoundMain.vue b/src/modules/07_insignia/views/01_RoundMain.vue
index 2feb72ac9..f4453e7f1 100644
--- a/src/modules/07_insignia/views/01_RoundMain.vue
+++ b/src/modules/07_insignia/views/01_RoundMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import { checkPermission } from "@/utils/permissions";
@@ -14,8 +14,6 @@ import type { FormProprsalsRound2 } from "@/modules/07_insignia/interface/reques
 
 import DialogDetail from "@/modules/07_insignia/components/1_Round/DialogDetail.vue";
 
-/** import Store*/
-
 /** use */
 const $q = useQuasar(); //ใช้ noti quasar
 const storeInsignia = useInsigniaDataStore();
@@ -109,7 +107,7 @@ const roundId = ref<string>(""); //id ที่ต้องการ ดูร
 async function fetchData() {
   showLoader();
   await http
-    .get(config.API.listRoundInsignia())
+    .get(config.API.listRoundInsignia(), { params: { path: "ROUND" } })
     .then(async (res) => {
       const data = res.data.result;
       rows.value = await data.map((e: FormProprsalsRound2) => ({
diff --git a/src/modules/07_insignia/views/02_ManageMain.vue b/src/modules/07_insignia/views/02_ManageMain.vue
index f1e44b29d..0ecca978e 100644
--- a/src/modules/07_insignia/views/02_ManageMain.vue
+++ b/src/modules/07_insignia/views/02_ManageMain.vue
@@ -37,7 +37,6 @@ const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
 /**
  * ตัวแปร
  */
-const loading = ref<boolean>(false); //การโหลด
 const loadview = ref<boolean>(false); //แสดง View
 const hideBottom = ref<boolean>(false);
 const round = ref<string>(""); //รอยการเสนอขอ
@@ -64,10 +63,12 @@ const modalbackInsignia2Role = ref<boolean>(false); // popup หมายเห
  * function เรียกรอบการเสนอขอพระราชทานเครื่อง
  */
 async function fecthlistRound() {
+  showLoader();
+  loadview.value = false;
   await http
-    .get(config.API.listRoundInsignia())
+    .get(config.API.listRoundInsignia(), { params: { path: "MANAGE" } })
     .then(async (res) => {
-      optionRound.value = res.data.result.map((e: ResponsePeriod) => ({
+      optionRound.value = await res.data.result.map((e: ResponsePeriod) => ({
         id: e.period_id,
         year: e.period_year,
         name: e.period_name,
@@ -84,14 +85,15 @@ async function fecthlistRound() {
         }
         DataStore.roundId = round.value;
         roundName.value = lastValue.name;
+        loadview.value = true;
         await fecthStat(round.value);
       } else {
-        loadview.value = false;
-        loading.value = false;
+        hideLoader();
       }
     })
     .catch((err) => {
       messageError($q, err);
+      hideLoader();
     });
 }
 
@@ -109,23 +111,6 @@ async function fecthStat(id: string) {
     });
 }
 
-/**
- * funcion เช็คหน่วยงาน
- */
-async function fecthAgency() {
-  await http
-    .get(config.API.keycloakPosition())
-    .then((res) => {
-      loadview.value = true;
-      DataStore.agency = res.data.result.rootId;
-      DataStore.typeOc = DataStore.agency;
-      loading.value = true;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
 /**
  * function fetch โครองสร้างปัจจุบัน
  */
@@ -145,9 +130,8 @@ function fetchActiveId() {
  * function fetch ข้อมูลโครองสร้างปัจจุบัน
  * @param id โครงสร้างปัจจุบัน
  */
-function fetchListOrg(id: string) {
-  showLoader();
-  http
+async function fetchListOrg(id: string) {
+  await http
     .get(config.API.orgByIdSystem(id, route.meta.Key as string))
     .then(async (res) => {
       const data = await res.data.result.map((item: DataStructureTree) => ({
@@ -156,11 +140,24 @@ function fetchListOrg(id: string) {
       }));
       optiontypeOc.value = data;
       DataStore.fetchOption(optiontypeOc.value); //ค่าของหน่วยงานทั้งหมดไว้ที่  DataStore
-      await fecthAgency();
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
+    });
+}
+
+/**
+ * funcion เช็คหน่วยงาน
+ */
+async function fecthAgency() {
+  await http
+    .get(config.API.keycloakPosition())
+    .then((res) => {
+      DataStore.agency = res.data.result.rootId;
+      DataStore.typeOc = DataStore.agency;
+    })
+    .catch((err) => {
+      messageError($q, err);
     });
 }
 
@@ -191,7 +188,7 @@ async function changround() {
     DataStore.agency != null //ถ้ามี agency เรียกข้อมูลตาม agency  ถ้าไม่มีเรียนตาม Oc ที่เลือก
       ? DataStore.agency
       : DataStore.typeOc;
-  fecthInsigniaByOc(round.value, organization, "officer", tab.value); // เรียกข้อมูลรายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
+  await fecthInsigniaByOc(round.value, organization, "officer", tab.value); // เรียกข้อมูลรายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
   // get round name
   const roundFilter = optionRound.value.find((x: any) => round.value === x.id);
   if (roundFilter) {
@@ -214,6 +211,7 @@ async function fecthInsigniaByOc(
   role: string,
   status: string
 ) {
+  DataStore.rows = [];
   if (roundId && ocId && role && status) {
     showLoader();
     await http
@@ -225,7 +223,6 @@ async function fecthInsigniaByOc(
         document.value = res.data.result.document;
         await DataStore.fetchData(res.data.result.items); // ส่งรายชื่อข้าราชการสามัญฯ
         await DataStore.fetchDataInsignia(res.data.result); // ส่งข้อมูลรอบบการแสดง
-        loading.value = true;
         // แสดงปุมล็อกข้อมูล
         if (res.data.result.items !== null) {
           if (res.data.result.items.length !== 0) {
@@ -434,7 +431,13 @@ async function uploadFile(event: any) {
  */
 onMounted(async () => {
   tab.value = DataStore.mainTab ?? "";
-  Promise.all([fecthInsignia(), fecthlistRound(), fetchActiveId()]);
+  await Promise.all([
+    fecthlistRound(),
+    fecthInsignia(),
+    fecthInsignia(),
+    fetchActiveId(),
+    fecthAgency(),
+  ]);
 });
 </script>
 
@@ -506,6 +509,7 @@ onMounted(async () => {
       </div>
     </div>
   </q-card>
+
   <q-card v-else>
     <div class="q-pa-md q-gutter-sm">
       <q-banner inline-actions rounded class="bg-grey-1 text-center">
@@ -514,7 +518,7 @@ onMounted(async () => {
     </div>
   </q-card>
 
-  <q-card flat bordered class="col-12 q-mt-sm" v-if="loading">
+  <q-card flat bordered class="col-12 q-mt-sm" v-if="loadview">
     <div
       v-if="
         (roleDataStore.insignia1Role && requestStatus == 'st4') ||
@@ -531,6 +535,7 @@ onMounted(async () => {
         {{ requestNote }}
       </q-banner>
     </div>
+
     <div class="row col-12">
       <q-tabs
         v-model="tab"
@@ -550,48 +555,49 @@ onMounted(async () => {
           label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
         />
       </q-tabs>
+
+      <div class="col-12"><q-separator /></div>
+      <q-tab-panels v-model="tab" animated>
+        <!-- แทบคนที่ยื่นขอ -->
+        <q-tab-panel name="pending" class="q-pa-none">
+          <tab1
+            :tab="tab"
+            :round-id="round"
+            :round-name="roundName"
+            :fecth-insignia-by-oc="fecthInsigniaByOc"
+            :request-status="requestStatus"
+            :fecth-stat="fecthStat"
+          />
+        </q-tab-panel>
+
+        <!-- แทบคนที่ไม่ยื่นขอ -->
+        <q-tab-panel name="reject" class="q-pa-none">
+          <tab2
+            :tab="tab"
+            :round-id="round"
+            :fecth-insignia-by-oc="fecthInsigniaByOc"
+          />
+        </q-tab-panel>
+
+        <!-- แทบคนที่ถูกลบออก -->
+        <q-tab-panel name="delete" class="q-pa-none">
+          <tab3
+            :tab="tab"
+            :round-id="round"
+            :fecth-insignia-by-oc="fecthInsigniaByOc"
+          />
+        </q-tab-panel>
+
+        <!-- แทบหน่วยงานที่ยังไม่ได้ส่งรายชื่อ -->
+        <q-tab-panel
+          v-if="roleDataStore.adminRole"
+          name="organization"
+          class="q-pa-none"
+        >
+          <tab4 :tab="tab" :round-id="round" />
+        </q-tab-panel>
+      </q-tab-panels>
     </div>
-    <q-separator />
-    <q-tab-panels v-model="tab" animated>
-      <!-- แทบคนที่ยื่นขอ -->
-      <q-tab-panel name="pending" class="q-pa-none">
-        <tab1
-          :tab="tab"
-          :round-id="round"
-          :round-name="roundName"
-          :fecth-insignia-by-oc="fecthInsigniaByOc"
-          :request-status="requestStatus"
-          :fecth-stat="fecthStat"
-        />
-      </q-tab-panel>
-
-      <!-- แทบคนที่ไม่ยื่นขอ -->
-      <q-tab-panel name="reject" class="q-pa-none">
-        <tab2
-          :tab="tab"
-          :round-id="round"
-          :fecth-insignia-by-oc="fecthInsigniaByOc"
-        />
-      </q-tab-panel>
-
-      <!-- แทบคนที่ถูกลบออก -->
-      <q-tab-panel name="delete" class="q-pa-none">
-        <tab3
-          :tab="tab"
-          :round-id="round"
-          :fecth-insignia-by-oc="fecthInsigniaByOc"
-        />
-      </q-tab-panel>
-
-      <!-- แทบหน่วยงานที่ยังไม่ได้ส่งรายชื่อ -->
-      <q-tab-panel
-        v-if="roleDataStore.adminRole"
-        name="organization"
-        class="q-pa-none"
-      >
-        <tab4 :tab="tab" :round-id="round" />
-      </q-tab-panel>
-    </q-tab-panels>
 
     <q-toolbar class="q-py-md text-right">
       <q-file
@@ -703,21 +709,21 @@ onMounted(async () => {
         @click="popupBackToInsignia2Role"
       />
     </q-toolbar>
-
-    <!-- popup หมายเหตุ -->
-    <DialogPopupReason
-      v-model:modal="modalPopupBackToEdit"
-      title="หมายเหตุการตีกลับ"
-      label="หมายเหตุ"
-      :savaForm="backToEdit"
-    />
-    <DialogPopupReason
-      v-model:modal="modalbackInsignia2Role"
-      title="หมายเหตุการตีกลับ"
-      label="หมายเหตุ"
-      :savaForm="backToEditinsignia2Role"
-    />
   </q-card>
+
+  <!-- popup หมายเหตุ -->
+  <DialogPopupReason
+    v-model:modal="modalPopupBackToEdit"
+    title="หมายเหตุการตีกลับ"
+    label="หมายเหตุ"
+    :savaForm="backToEdit"
+  />
+  <DialogPopupReason
+    v-model:modal="modalbackInsignia2Role"
+    title="หมายเหตุการตีกลับ"
+    label="หมายเหตุ"
+    :savaForm="backToEditinsignia2Role"
+  />
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/07_insignia/views/03_ResultMain.vue b/src/modules/07_insignia/views/03_ResultMain.vue
index 6fb16cd52..cbcc9c81e 100644
--- a/src/modules/07_insignia/views/03_ResultMain.vue
+++ b/src/modules/07_insignia/views/03_ResultMain.vue
@@ -245,7 +245,7 @@ const visibleColumns = ref<String[]>([
 async function fecthRound() {
   showLoader();
   await http
-    .get(config.API.noteround())
+    .get(config.API.noteround(), { params: { path: "RECORD" } })
     .then(async (res) => {
       let data = res.data.result;
       if (data.length !== 0) {
@@ -254,7 +254,6 @@ async function fecthRound() {
           id: e.id,
         }));
         selectRound.value = data[0].id;
-
         await Promise.all([fecthInsignia(), fecthInsigniaType()]);
       } else {
         hideLoader();
@@ -436,6 +435,9 @@ function perviewfile(event: any, actionType: string) {
           type: e.requestInsignia,
           employeeType: DataStore.profileType(e.profileType),
           profileType: e.profileType,
+          date: date2Thai(e.date),
+          volumeNo: e.volumeNo,
+          section: e.section,
           page: e.page,
           number: e.no,
           vatnumber: e.number,
diff --git a/src/modules/07_insignia/views/04_AllocateMain.vue b/src/modules/07_insignia/views/04_AllocateMain.vue
index 7a439a904..7c42beded 100644
--- a/src/modules/07_insignia/views/04_AllocateMain.vue
+++ b/src/modules/07_insignia/views/04_AllocateMain.vue
@@ -111,7 +111,7 @@ const pagination = ref({
 async function fecthRound() {
   showLoader();
   await http
-    .get(config.API.noteround())
+    .get(config.API.noteround(), { params: { path: "ALLOCATE" } })
     .then(async (res) => {
       let data = res.data.result;
       if (data.length !== 0) {
@@ -135,6 +135,8 @@ async function fecthRound() {
         } else {
           hideLoader();
         }
+      } else {
+        hideLoader();
       }
     })
     .catch((err) => {
diff --git a/src/modules/07_insignia/views/05_BorrowMain.vue b/src/modules/07_insignia/views/05_BorrowMain.vue
index 5c193de35..1e0906c06 100644
--- a/src/modules/07_insignia/views/05_BorrowMain.vue
+++ b/src/modules/07_insignia/views/05_BorrowMain.vue
@@ -267,7 +267,7 @@ const employeeClassOps = ref<any>(DataStore.employeeClassOps);
 async function fecthRound() {
   showLoader();
   await http
-    .get(config.API.noteround())
+    .get(config.API.noteround(), { params: { path: "BORROW" } })
     .then(async (res) => {
       let data = res.data.result;
       if (data.length !== 0) {
@@ -295,11 +295,14 @@ async function fecthRound() {
         filterSelectRoundOption.value = selectRoundOption.value;
         yearRound.value = data[0].year;
         roundYear.value = data[0].year;
+
         if (roundYear.value) {
           await fecthInsigniaType();
         } else {
           hideLoader();
         }
+      } else {
+        hideLoader();
       }
     })
     .catch((err) => {
diff --git a/src/modules/18_command/components/Step/1_Detail.vue b/src/modules/18_command/components/Step/1_Detail.vue
index 31739f855..4e9391148 100644
--- a/src/modules/18_command/components/Step/1_Detail.vue
+++ b/src/modules/18_command/components/Step/1_Detail.vue
@@ -39,8 +39,7 @@ let formData = reactive<FormDataDetail>({
   commandAffectDate: null, //วันที่ลงนาม
   commandExcecuteDate: null, //วันที่คำสั่งมีผล
   isBangkok: false,
-  isAttachment:true
-  
+  isAttachment: true,
 });
 const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
 
@@ -88,68 +87,117 @@ defineExpose({
 </script>
 
 <template>
-  <q-card-section>
-    <div class="row q-col-gutter-sm">
-      <!-- คำสั่งเลขที่ -->
-      <!-- คำสั่งเรื่อง -->
-      <div class="col-12">
-        <q-input
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          outlined
-          dense
-          v-model="formData.issue"
-          hide-bottom-space
-          :label="`${'คำสั่งเรื่อง'}`"
-          @update:model-value="onCheckChangeData()"
-        />
-      </div>
-
-      <div class="col-4 row">
-        <div class="col-6">
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <q-card-section>
+      <div class="row q-col-gutter-sm">
+        <!-- คำสั่งเลขที่ -->
+        <!-- คำสั่งเรื่อง -->
+        <div class="col-12">
           <q-input
             :class="store.classInput(!store.readonly)"
             :readonly="store.readonly"
             outlined
             dense
-            v-model="formData.commandNo"
+            v-model="formData.issue"
             hide-bottom-space
-            :label="`${'คำสั่งเลขที่'}`"
+            :label="`${'คำสั่งเรื่อง'}`"
             @update:model-value="onCheckChangeData()"
           />
         </div>
-        <label class="col-1 flex justify-center items-center text-bold">
-          /
-        </label>
-        <div class="col-5">
+
+        <div class="col-4 row">
+          <div class="col-6">
+            <q-input
+              :class="store.classInput(!store.readonly)"
+              :readonly="store.readonly"
+              outlined
+              dense
+              v-model="formData.commandNo"
+              hide-bottom-space
+              :label="`${'คำสั่งเลขที่'}`"
+              @update:model-value="onCheckChangeData()"
+            />
+          </div>
+          <label class="col-1 flex justify-center items-center text-bold">
+            /
+          </label>
+          <div class="col-5">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="formData.commandYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              :class="store.classInput(!store.readonly)"
+              :readonly="store.readonly"
+              @update:model-value="onCheckChangeData()"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  outlined
+                  hide-bottom-space
+                  :class="store.classInput(!store.readonly)"
+                  :readonly="store.readonly"
+                  :model-value="
+                    formData.commandYear == null
+                      ? null
+                      : formData.commandYear + 543
+                  "
+                  :label="`${'พ.ศ.'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+
+        <div class="col-4">
           <datepicker
+            clearable
             menu-class-name="modalfix"
-            v-model="formData.commandYear"
+            v-model="formData.commandAffectDate"
             :locale="'th'"
             autoApply
-            year-picker
             :enableTimePicker="false"
             :class="store.classInput(!store.readonly)"
             :readonly="store.readonly"
             @update:model-value="onCheckChangeData()"
           >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
             <template #trigger>
               <q-input
+                clearable
                 dense
                 outlined
                 hide-bottom-space
                 :class="store.classInput(!store.readonly)"
                 :readonly="store.readonly"
                 :model-value="
-                  formData.commandYear == null
+                  formData.commandAffectDate == null
                     ? null
-                    : formData.commandYear + 543
+                    : date2Thai(formData.commandAffectDate)
                 "
-                :label="`${'พ.ศ.'}`"
+                :label="`${'วันที่ลงนาม'}`"
+                @clear="() => (formData.commandAffectDate = null)"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -163,114 +211,68 @@ defineExpose({
             </template>
           </datepicker>
         </div>
-      </div>
 
-      <div class="col-4">
-        <datepicker
-          clearable
-          menu-class-name="modalfix"
-          v-model="formData.commandAffectDate"
-          :locale="'th'"
-          autoApply
-          :enableTimePicker="false"
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          @update:model-value="onCheckChangeData()"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              clearable
-              dense
-              outlined
-              hide-bottom-space
-              :class="store.classInput(!store.readonly)"
-              :readonly="store.readonly"
-              :model-value="
-                formData.commandAffectDate == null
-                  ? null
-                  : date2Thai(formData.commandAffectDate)
-              "
-              :label="`${'วันที่ลงนาม'}`"
-              @clear="() => (formData.commandAffectDate = null)"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-      </div>
-      <div class="col-4">
-        <datepicker
-          clearable
-          menu-class-name="modalfix"
-          v-model="formData.commandExcecuteDate"
-          :locale="'th'"
-          autoApply
-          :enableTimePicker="false"
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          @update:model-value="onCheckChangeData()"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              clearable
-              dense
-              outlined
-              hide-bottom-space
-              :class="store.classInput(!store.readonly)"
-              :readonly="store.readonly"
-              :model-value="
-                formData.commandExcecuteDate == null
-                  ? null
-                  : date2Thai(formData.commandExcecuteDate)
-              "
-              :label="`${'วันที่คำสั่งมีผล'}`"
-              @clear="() => (formData.commandExcecuteDate = null)"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-      </div>
-      <!-- เนื้อหาคำสั่งส่วนต้น -->
-      <div class="col-12">
-        <q-input
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          outlined
-          dense
-          v-model="formData.detailHeader"
-          hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งขึ้นต้น (optional)'}`"
-          @update:model-value="onCheckChangeData()"
-          type="textarea"
-        />
-        <!-- <q-card bordered flat>
+        <div class="col-4">
+          <datepicker
+            clearable
+            menu-class-name="modalfix"
+            v-model="formData.commandExcecuteDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            :class="store.classInput(!store.readonly)"
+            :readonly="store.readonly"
+            @update:model-value="onCheckChangeData()"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                clearable
+                dense
+                outlined
+                hide-bottom-space
+                :class="store.classInput(!store.readonly)"
+                :readonly="store.readonly"
+                :model-value="
+                  formData.commandExcecuteDate == null
+                    ? null
+                    : date2Thai(formData.commandExcecuteDate)
+                "
+                :label="`${'วันที่คำสั่งมีผล'}`"
+                @clear="() => (formData.commandExcecuteDate = null)"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+
+        <!-- เนื้อหาคำสั่งส่วนต้น -->
+        <div class="col-12">
+          <q-input
+            :class="store.classInput(!store.readonly)"
+            :readonly="store.readonly"
+            outlined
+            dense
+            v-model="formData.detailHeader"
+            hide-bottom-space
+            :label="`${'เนื้อหาคำสั่งขึ้นต้น (optional)'}`"
+            @update:model-value="onCheckChangeData()"
+            type="textarea"
+          />
+          <!-- <q-card bordered flat>
           <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
             เนื้อหาคำสั่งส่วนต้น
           </div>
@@ -307,23 +309,24 @@ defineExpose({
             </q-field>
           </q-card-section>
         </q-card> -->
-      </div>
+        </div>
 
-      <!-- เนื้อหาคำสั่งส่วนกลาง -->
-      <div class="col-12">
-        <q-input
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          outlined
-          dense
-          v-model="formData.detailBody"
-          hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งหลัก'}`"
-          @update:model-value="onCheckChangeData()"
-          type="textarea"
-          :rules="[(val: string) => !!val || `${'กรุณากรอกเนื้อหาคำสั่งหลัก'}`]"
-        />
-        <!-- <q-card bordered flat>
+        <!-- เนื้อหาคำสั่งส่วนกลาง -->
+        <div class="col-12">
+          <q-input
+            :class="store.classInput(!store.readonly)"
+            :readonly="store.readonly"
+            outlined
+            dense
+            v-model="formData.detailBody"
+            hide-bottom-space
+            :label="`${'เนื้อหาคำสั่งหลัก'}`"
+            @update:model-value="onCheckChangeData()"
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกเนื้อหาคำสั่งหลัก'}`]"
+            lazy-rules
+          />
+          <!-- <q-card bordered flat>
           <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
             เนื้อหาคำสั่งส่วนกลาง
           </div>
@@ -360,22 +363,22 @@ defineExpose({
             </q-field>
           </q-card-section>
         </q-card> -->
-      </div>
+        </div>
 
-      <!-- เนื้อหาคำสั่งส่วนท้าย -->
-      <div class="col-12">
-        <q-input
-          :class="store.classInput(!store.readonly)"
-          :readonly="store.readonly"
-          outlined
-          dense
-          v-model="formData.detailFooter"
-          hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งลงท้าย (optional)'}`"
-          @update:model-value="onCheckChangeData()"
-          type="textarea"
-        />
-        <!-- <q-card bordered flat>
+        <!-- เนื้อหาคำสั่งส่วนท้าย -->
+        <div class="col-12">
+          <q-input
+            :class="store.classInput(!store.readonly)"
+            :readonly="store.readonly"
+            outlined
+            dense
+            v-model="formData.detailFooter"
+            hide-bottom-space
+            :label="`${'เนื้อหาคำสั่งลงท้าย (optional)'}`"
+            @update:model-value="onCheckChangeData()"
+            type="textarea"
+          />
+          <!-- <q-card bordered flat>
           <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
             เนื้อหาคำสั่งส่วนท้าย
           </div>
@@ -412,25 +415,26 @@ defineExpose({
             </q-field>
           </q-card-section>
         </q-card> -->
+        </div>
+
+        <div class="col-12">
+          <q-checkbox
+            keep-color
+            color="primary"
+            dense
+            v-model="formData.isBangkok"
+            label="นี่คือคำสั่งกรุงเทพมหานคร"
+          />
+        </div>
       </div>
+    </q-card-section>
 
-      <div class="col-12">
-        <q-checkbox
-          keep-color
-          color="primary"
-          dense
-          v-model="formData.isBangkok"
-          label="นี่คือคำสั่งกรุงเทพมหานคร"
-        />
-      </div>
-    </div>
-  </q-card-section>
+    <q-separator />
 
-  <q-separator />
-
-  <q-card-actions align="right" v-if="!store.readonly">
-    <q-btn label="บันทึก" color="public" @click="onSubmit" />
-  </q-card-actions>
+    <q-card-actions align="right" v-if="!store.readonly">
+      <q-btn label="บันทึก" color="public" type="submit" />
+    </q-card-actions>
+  </q-form>
 
   <DialogPerview
     v-model:modal="modalPreview"
diff --git a/src/modules/18_command/components/Step/3_ReceivedCopy.vue b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
index 5825b94ed..ba43820a6 100644
--- a/src/modules/18_command/components/Step/3_ReceivedCopy.vue
+++ b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
@@ -302,8 +302,8 @@ defineExpose({
                       dense
                       v-model="props.row.sendCC"
                       :rules="[
-                        (val) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
-                        (val) =>
+                        (val:string) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
+                        (val:string) =>
                           val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
                       ]"
                       :label="`${'เลือกช่องทางการส่งสำเนา'}`"
diff --git a/src/modules/18_command/components/Step/4_Attached.vue b/src/modules/18_command/components/Step/4_Attached.vue
index e8df6a0b3..36fc7af0f 100644
--- a/src/modules/18_command/components/Step/4_Attached.vue
+++ b/src/modules/18_command/components/Step/4_Attached.vue
@@ -1,33 +1,28 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import axios from "axios";
 import { useQuasar } from "quasar";
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+import axios from "axios";
 
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
+import genReportXLSX from "@/plugins/genreportxlsx";
 
-import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+import type { DataFileOrder } from "@/modules/18_command/interface/response/Main";
 
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
+const route = useRoute();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  success,
-} = mixin;
+const { messageError, showLoader, hideLoader } = mixin;
+
+const commandId = ref<string>(route.params.id.toString());
 
-const isChangeData = defineModel<boolean>("isChangeData", { required: true });
 const isAttachment = defineModel<boolean>("isAttachment", { required: true });
-const { onCheckChangeData } = defineProps({
-  onCheckChangeData: { type: Function, required: true },
-});
 
 const tab = ref<string>("main"); //tab
 const page = ref<number>(1);
@@ -35,28 +30,37 @@ const numOfPages = ref<number>(0); //จำนวนหน้า pdf
 const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf
 
 const dialog = ref<boolean>(false); // เปิด dialog
+const isLoadView = ref<boolean>(false);
+const dataCover = ref<DataFileOrder>(); //ข้อมูลไฟล์คำสั่ง
+const dataAttachment = ref<DataFileOrder>(); //ข้อมูลไฟล์แบนท้าย
 
 /**
- * เปลี่ยน tab
- * @param val ชื่อ tab
+ * ฟังก์ชันดึงข้อมูลโหลดไฟล์คำสั่ง
+ * @param type ประเภท cover เป็นคำสั่ง attachment เป็น แบนท้าย
  */
-function setTab(val: string) {
-  tab.value = val;
-  page.value = 1;
+async function fetchDataCommand(type: string) {
+  await http
+    .get(config.API.commandAction(commandId.value, `tab4/${type}`))
+    .then(async (res) => {
+      const dataMain = await res.data.result;
+      if (type === "cover") {
+        dataCover.value = dataMain;
+        await fetchPDF(dataCover.value);
+      } else {
+        dataAttachment.value = dataMain;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
-/** ดึง class ตามที่ set ไว้ */
-function getClass(val: boolean) {
-  return {
-    "card-header-active q-px-lg q-py-md cursor-pointer": val,
-    "card-header q-px-lg q-py-md cursor-pointer": !val,
-  };
-}
-function onSubmit() {}
-
-/** ฟังชั่นจองลอง แสดง pdf */
-async function genPDf(data: any, type: string = "docx") {
-  showLoader();
+/**
+ * ฟังชั่นกำหนดค่าของ PDF
+ *
+ */
+async function fetchPDF(data: any, type: string = "docx?folder=command") {
+  isLoadView.value = false;
   await axios
     .post(config.API.reportTemplate + `/${type}`, data, {
       headers: {
@@ -68,17 +72,16 @@ async function genPDf(data: any, type: string = "docx") {
     .then(async (res) => {
       const blob = new Blob([res.data]);
       const objectUrl = URL.createObjectURL(blob);
-
       const pdfData = usePDF(`${objectUrl}`);
       setTimeout(() => {
         pdfSrc.value = pdfData.pdf.value;
         numOfPages.value = pdfData.pages.value;
-        hideLoader();
+        isLoadView.value = true;
       }, 1500);
     })
     .catch(async (e) => {
       messageError($q, e);
-      hideLoader();
+      isLoadView.value = true;
     });
 }
 
@@ -87,88 +90,62 @@ async function genPDf(data: any, type: string = "docx") {
  * @param type pdf/docx
  */
 async function downloadCover(type: string) {
-  genReport(
-    tab.value == "main" ? data1 : data2,
-    `${
-      tab.value == "main"
-        ? "คำสั่ง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้"
-        : "เอกสารแนบท้าย คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้"
-    }`,
-    type
-  );
+  if (tab.value === "main") {
+    genReport(
+      dataCover.value,
+      "คำสั่ง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้",
+      type
+    );
+  } else {
+    genReportXLSX(
+      dataAttachment.value,
+      "เอกสารแนบท้าย คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้",
+      type
+    );
+  }
 }
 
-/** ข้อมูลจำลอง */
-const data1 = {
-  template: "C-PM-01",
-  reportName: "docx-report",
-  data: {
-    commandNo: "",
-    commandYear: "๒๕๖๗",
-    issuerOrganizationName: "",
-    conclusionRegisterNo: "test",
-    conclusionRegisterDate: "๒ สิงหาคม ๒๕๖๗",
-    conclusionResultNo: "test",
-    conclusionResultDate: "๓ สิงหาคม ๒๕๖๗",
-    positionList: "",
-    count: "๑",
-    commandAffectDate: "๑ สิงหาคม ๒๕๖๗",
-    authorizedUserFullName: "นายวิษณุ สุวรรณรัตน์",
-    authorizedPosition: "ผู้อำนวยการ",
-    subject: "เรื่อง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้",
-  },
-};
-const data2 = {
-  template: "C-PM-01-attachment",
-  reportName: "docx-report",
-  data: {
-    commandNo: "",
-    commandYear: "๒๕๖๗",
-    issuerOrganizationName: "",
-    commandExcecuteDate: "-",
-    data: [
-      {
-        citizenId: "๒๔๕๙๙๐๐๐๑๙๖๘๐",
-        fullName: "นางสาวบุปผารัตน์ สีลาเหลี่ยม",
-        oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-        positionName: "นักบริหาร",
-        positionLevel: "ต้น",
-        positionType: "บริหาร",
-        positionNumber: "สกก.๒",
-        salary: "๑๒,๐๐๐",
-        appointDate: "๒๓ ส.ค. ๖๗",
-        examNumber: "๑",
-        placementName: "สอบแข่งขันนักคอมพิวเตอร์ ครั้งที่ ๑/๒๕๖๗",
-        seq: "๑",
-        education: "การศึกษาบัณฑิต",
-        remarkHorizontal:
-          "โดยมีเงื่อนไขว่าต้องปฏิบัติงานให้กรุงเทพมหานครเป็นระยะเวลาไม่น้อยกว่า ๕ ปี นับแต่วันที่ได้รับการบรรจุและแต่งตั้ง โดยห้ามโอนไปหน่วยงานหรือส่วนราชการอื่น เว้นเเต่ลาออกจากราชการ",
-        remarkVertical: null,
-      },
-    ],
-  },
-};
+/**
+ * เปลี่ยน tab
+ * @param val ชื่อ tab
+ */
+function setTab(val: string) {
+  tab.value = val;
+  page.value = 1;
+}
 
 /**
- * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
+ * ดึง class ตามที่ set ไว้
  */
-defineExpose({
-  onSubmit,
-});
+function getClass(val: boolean) {
+  return {
+    "card-header-active q-px-lg q-py-md cursor-pointer": val,
+    "card-header q-px-lg q-py-md cursor-pointer": !val,
+  };
+}
 
-/** check tab เมื่อมีการเปลี่ยน tab */
+/**
+ * check tab เมื่อมีการเปลี่ยน tab
+ */
 watch(tab, () => {
   if (tab.value === "main") {
-    genPDf(data1);
+    fetchPDF(dataCover.value);
   }
   if (tab.value === "second") {
-    genPDf(data2);
+    fetchPDF(dataAttachment.value, "xlsx?folder=command");
   }
 });
 
 /** hook */
 onMounted(async () => {
-  await genPDf(data1);
+  showLoader();
+  const promises = [fetchDataCommand("cover")];
+  if (isAttachment.value) {
+    promises.push(fetchDataCommand("attachment"));
+  }
+  await Promise.all(promises).finally(() => {
+    hideLoader();
+  });
 });
 </script>
 
@@ -209,14 +186,24 @@ onMounted(async () => {
       </q-btn>
 
       <q-btn
+        v-if="tab === 'main'"
         outline
         class="q-px-sm"
         color="blue"
         icon="mdi-file-word"
         label="ดาวน์โหลดไฟล์ docx"
         @click="downloadCover('docx')"
-      >
-      </q-btn>
+      />
+
+      <q-btn
+        v-else
+        outline
+        class="q-px-sm"
+        color="green"
+        icon="mdi-file-excel"
+        label="ดาวน์โหลดไฟล์ xlsx"
+        @click="downloadCover('xlsx')"
+      />
     </div>
     <q-card bordered class="card-pdf q-mx-sm q-pa-md">
       <div class="justify-between items-center align-center q-pb-sm row">
@@ -242,9 +229,25 @@ onMounted(async () => {
           <q-icon name="mdi-chevron-right" />
         </q-btn>
       </div>
-      <div class="pdfWidth">
+      <div class="pdfWidth" v-if="isLoadView">
         <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
       </div>
+      <div class="full-width row flex-center text-accent q-gutter-sm" v-else>
+        <span
+          ><div
+            style="
+              height: 60vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-spinner color="primary" size="3em" :thickness="10" />
+          </div>
+        </span>
+      </div>
     </q-card>
   </div>
 
diff --git a/src/modules/18_command/interface/response/Main.ts b/src/modules/18_command/interface/response/Main.ts
index 2e743f79c..40c60bc25 100644
--- a/src/modules/18_command/interface/response/Main.ts
+++ b/src/modules/18_command/interface/response/Main.ts
@@ -53,9 +53,27 @@ interface DataFileDownload {
   upload: boolean;
 }
 
+interface DataFileOrder {
+  reportName: string;
+  template: string;
+  data: {
+    commandDate: string;
+    commandExcecuteDate: string;
+    commandNo: string;
+    commandTitle: string;
+    commandYear: 2024;
+    detailBody: string;
+    detailFooter: string;
+    detailHeader: string;
+    name: string;
+    position: string;
+  };
+}
+
 export type {
   ResListCommand,
   DataListCommand,
   DataCommandType,
   DataFileDownload,
+  DataFileOrder,
 };