diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index f5f84c34a..ad704fa4f 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -49,4 +49,10 @@ export default {
   insigniaManageOrg: (insigniaManageId: string) => `${insignia}/manage/org/${insigniaManageId}`,
   insigniaManageOrgAdd: () => `${insignia}/manage/org`,
   insigniaManageOrgDashboard: (insigniaManageId: string) => `${insignia}/manage/org/dashboard/${insigniaManageId}`,
+
+  // ยืม-คืนเครื่องราชฯ
+  insigniaManageBorrow: () => `${insignia}/manage/borrow`,
+  insigniaManageBorrowReturn: (insigniaManageProfileId: string) => `${insignia}/manage/return/${insigniaManageProfileId}`,
+  insigniaManageBorrowList: (year: number, insigniaTypeId: string) => `${insignia}/borrow/${year}/${insigniaTypeId}`,
+  insigniaManageBorrowById: (insigniaManageProfileId: string) => `${insignia}/manage/borrow/${insigniaManageProfileId}`,
 };
\ No newline at end of file
diff --git a/src/api/reports/api.report.ts b/src/api/reports/api.report.ts
index 41314672f..6b00ebe13 100644
--- a/src/api/reports/api.report.ts
+++ b/src/api/reports/api.report.ts
@@ -6,10 +6,10 @@ const reportOrder = `${env.API_REPORT2_URI}/report/order`;
 const reportRetire = `${env.API_REPORT2_URI}/report/retire`;
 
 export default {
-  reportOrderCover: (fileType: string, id: string) =>
-    `${reportOrder}/cover/${fileType}/${id}`,
-  reportOrderAttachment: (fileType: string, id: string) =>
-    `${reportOrder}/attachment/${fileType}/${id}`,
+  reportOrderCover: (fileType: string, id: string, commandCode: string) =>
+    `${reportOrder}/${commandCode}/cover/${fileType}/${id}`,
+  reportOrderAttachment: (fileType: string, id: string, commandCode: string) =>
+    `${reportOrder}/${commandCode}/attachment/${fileType}/${id}`,
   reportRetireList: (fileType: string, id: string) =>
     `${reportRetire}/${fileType}/${id}`,
 
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index 809d47e18..198a107aa 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -222,20 +222,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "",
   },
 ]);
-const rows = ref<any>([
-  // {
-  //   no: "1",
-  //   status: "รอบันทึกข้อมูล",
-  //   name: "นางสาวรัชภรณ์ ภักดี",
-  //   type: "ทั้งหมด",
-  //   page: "8",
-  //   number: "11",
-  //   vatnumber: "5647833",
-  //   datepay: null,
-  //   typepay: null,
-  //   address: "เลขที่ 2/3 หมู่ที่ 14 ถนนบ...",
-  // },
-]);
+
+const rows = ref<any>([]);
 watch(tab, () => {
   if (tab.value !== "doc") {
     fecthlistInsignia();
diff --git a/src/modules/10_order/components/Add.vue b/src/modules/10_order/components/Add.vue
deleted file mode 100644
index 5ba8d1721..000000000
--- a/src/modules/10_order/components/Add.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<!-- page:detail page รายการสอบทั้งหมด -->
-<template>
-  <q-toolbar class="q-pa-sm text-center">
-    <q-toolbar-title class="text-dark">
-      {{ tittle }}
-      {{ `ครั้งที่${round}/${yearly == null ? "" : yearly + 543}` }}
-    </q-toolbar-title>
-  </q-toolbar>
-  <q-stepper
-    v-model="step"
-    ref="stepper"
-    alternative-labels
-    header-nav
-    animated
-    done-icon="check"
-    :active-icon="stepRaw === step && stepRaw != 4 ? 'mdi-pencil' : 'mdi-eye'"
-  >
-    <q-step
-      :done="step > 2"
-      :disable="stepRaw < 2"
-      :name="2"
-      title="รายละเอียดการออกคำสั่ง"
-      :icon="
-        stepRaw >= 2
-          ? stepRaw == 2
-            ? 'mdi-pencil'
-            : 'mdi-check-bold'
-          : 'mdi-account'
-      "
-    >
-      <q-card bordered class="q-pa-lg">
-        <q-card-actions
-          v-if="status === 'rejectRegister'"
-          class="q-pa-md q-mb-md text-left row bg-red-2"
-        >
-          <div class="col-12 text-red-12">
-            <li>{{ rejectMessage }}</li>
-          </div>
-        </q-card-actions>
-      </q-card>
-    </q-step>
-    <q-step
-      :done="step > 3"
-      :disable="stepRaw < 3"
-      :name="3"
-      title="เลือกรายชื่อ"
-      :icon="
-        stepRaw >= 3
-          ? stepRaw == 3
-            ? 'mdi-pencil'
-            : 'mdi-check-bold'
-          : 'mdi-receipt'
-      "
-      v-if="stepPayment"
-    >
-      <q-card bordered class="q-pa-lg"> </q-card>
-    </q-step>
-    <q-step
-      :done="step > 4"
-      :disable="stepRaw < 4"
-      :name="4"
-      title="เลือก"
-      :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
-    >
-      <q-card bordered class="q-pa-lg"> </q-card>
-    </q-step>
-    <q-step
-      :done="step > 5"
-      :disable="stepRaw < 5"
-      :name="5"
-      title="รายละเอียดคำสั่งและแนบท้าย"
-      :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-flag-variant'"
-    >
-      <q-card bordered class="q-pa-lg"> </q-card>
-    </q-step>
-  </q-stepper>
-  <q-dialog :model-value="modalConsend" persistent>
-    <q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
-      <Consendform :ok="consendOk" />
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { modalError, messageError, showLoader, hideLoader } = mixin;
-
-const step = ref<number>(1);
-const stepRaw = ref<number>(1);
-const tittle = ref<string>("");
-const route = useRoute();
-const status = ref<string>("register");
-const modalConsend = ref<boolean>(false);
-const stepPayment = ref<boolean>(true);
-const rejectMessage = ref<string>("");
-const round = ref<number | null>(null);
-const yearly = ref<number | null>(null);
-
-onMounted(async () => {});
-
-const consenClose = () => {
-  modalConsend.value = false;
-};
-
-const consendOk = () => {
-  modalConsend.value = false;
-};
-</script>
-<style>
-.q-stepper {
-  box-shadow: none;
-  background: transparent !important;
-}
-.q-stepper--horizontal .q-stepper__step-inner {
-  padding: 0px;
-}
-.q-stepper__header--alternative-labels .q-stepper__tab {
-  min-height: 0px;
-  padding: 1.5% 0% 1.5% 0%;
-}
-.q-stepper__header--border {
-  border-bottom: none;
-}
-.q-stepper__dot {
-  min-width: 35px;
-  height: 35px;
-  width: 35px;
-  font-size: 20px;
-}
-.q-stepper__title {
-  width: 100px;
-}
-.q-stepper__tab--done .q-stepper__title {
-  color: #62a00b;
-}
-.q-stepper__tab--done .q-stepper__dot {
-  color: #95d710;
-  border: 1px solid #62a00b;
-}
-
-.q-stepper__tab--active .q-stepper__title {
-  color: #318bae;
-}
-.q-stepper__tab--active .q-stepper__dot {
-  color: #1cb4ea;
-  border: 1px solid #218ab393;
-}
-
-.q-stepper__tab--disabled .q-stepper__title {
-  color: #92b4c8;
-}
-.q-stepper__tab--disabled .q-stepper__dot {
-  background: #def2fc !important;
-  border: 1px solid #92b4c876;
-}
-
-.q-stepper__tab--disabled .q-stepper__dot .q-icon {
-  color: #7692a3d0;
-}
-.q-stepper--horizontal .q-stepper__line:before,
-.q-stepper--horizontal .q-stepper__line:after {
-  background: #92b4c847;
-}
-</style>
diff --git a/src/modules/10_order/components/Detail.vue b/src/modules/10_order/components/Detail.vue
index 24d78b017..603bdfbe2 100644
--- a/src/modules/10_order/components/Detail.vue
+++ b/src/modules/10_order/components/Detail.vue
@@ -1,24 +1,3 @@
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
-      @click="router.go(-1), destroyLocalStorage()" />
-    ออกคำสั่ง
-  </div>
-  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
-    <q-stepper v-model="step" ref="stepper" color="primary" animated class="step" header-class="bg-grey-1">
-      <q-step :name="1" title="รายละเอียดการออกคำสั่ง" prefix="1" :done="step > 1" :header-nav="step > 1" />
-      <q-step :name="2" title="เลือกรายชื่อ" prefix="2" :done="step > 2" :header-nav="step > 2" />
-      <q-step :name="3" title="เลือกรายชื่อส่งสำเนาคำสั่ง" prefix="3" :done="step > 3" :header-nav="step > 3" />
-      <q-step :name="4" title="รายละเอียดคำสั่งและแนบท้าย" prefix="4" :done="step > 4" :header-nav="step > 4" />
-      <template v-slot:message>
-        <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
-        <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
-        <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
-        <step04 v-if="step === 4" :next="nextStep" :previous="previousStep" />
-      </template>
-    </q-stepper>
-  </q-card>
-</template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 import { ref, defineAsyncComponent, onMounted, onUnmounted } from "vue";
@@ -28,7 +7,6 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 const route = useRoute();
 
-
 const orderId_params = route.params.orderid;
 
 const step01 = defineAsyncComponent(
@@ -109,6 +87,29 @@ onMounted(() => {
   }
 });
 </script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
+      @click="router.push('/order'), destroyLocalStorage()" />
+    ออกคำสั่ง
+  </div>
+  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
+    <q-stepper v-model="step" ref="stepper" color="primary" animated class="step" header-class="bg-grey-1">
+      <q-step :name="1" title="รายละเอียดการออกคำสั่ง" prefix="1" :done="step > 1" :header-nav="step > 1" />
+      <q-step :name="2" title="เลือกรายชื่อ" prefix="2" :done="step > 2" :header-nav="step > 2" />
+      <q-step :name="3" title="เลือกรายชื่อส่งสำเนาคำสั่ง" prefix="3" :done="step > 3" :header-nav="step > 3" />
+      <q-step :name="4" title="รายละเอียดคำสั่งและแนบท้าย" prefix="4" :done="step > 4" :header-nav="step > 4" />
+      <template v-slot:message>
+        <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
+        <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
+        <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
+        <step04 v-if="step === 4" :next="nextStep" :previous="previousStep" />
+      </template>
+    </q-stepper>
+  </q-card>
+</template>
+
 <style>
 .q-stepper--horizontal .q-stepper__step-inner {
   padding: 0px;
diff --git a/src/modules/10_order/components/Main.vue b/src/modules/10_order/components/Main.vue
index 75f1ad406..94d6d2fa9 100644
--- a/src/modules/10_order/components/Main.vue
+++ b/src/modules/10_order/components/Main.vue
@@ -1,113 +1,3 @@
-<template>
-  <div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
-  <div>
-    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-      <div class="row q-col-gutter-sm">
-        <div class="row col-12 q-col-gutter-sm">
-          <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense emit-value
-            map-options :options="fiscalyearOP" option-value="id" option-label="name" lazy-rules hide-bottom-space
-            :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
-            @update:model-value="searchFilterTable" />
-          <div>
-            <q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd">
-              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-              <!-- <q-menu>
-                <q-list style="min-width: 100px">
-                  <q-item clickable @click="clickAdd">
-                    <q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
-                  </q-item>
-                  <q-item clickable v-close-popup disable>
-                    <q-item-section
-                      >ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
-                    >
-                  </q-item>
-                </q-list>
-              </q-menu> -->
-            </q-btn>
-          </div>
-          <q-space />
-
-          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-            debounce="300" placeholder="ค้นหา">
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-            </template>
-          </q-input>
-
-          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2" />
-        </div>
-        <div class="col-12">
-          <q-card bordered class="col-12 filter-card q-pa-sm">
-            <div class="row col-12 q-col-gutter-sm">
-              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderType" label="ประเภท" dense emit-value
-                map-options option-label="name" :options="OrderTypeOption" option-value="name" lazy-rules
-                hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable" />
-              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderStatus" label="สถานะ" dense emit-value
-                map-options option-label="name" :options="OrderStatusOption" option-value="name" lazy-rules
-                hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable" />
-            </div>
-          </q-card>
-        </div>
-        <div class="col-12">
-          <q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="Order" flat bordered
-            :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel" v-model:pagination="pagination">
-            <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-th auto-width />
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer"
-                @click="redirectToPage(props.row.orderId, props.row.OrderStatus)">
-                <q-td key="Order" :props="props">
-                  {{ props.row.Order }}
-                </q-td>
-                <q-td key="OrderNum" :props="props">
-                  {{ props.row.OrderNum }}
-                </q-td>
-                <q-td key="OrderType" :props="props">
-                  {{ props.row.OrderType }}
-                </q-td>
-                <q-td key="OrderDate" :props="props">
-                  {{ props.row.OrderDate }}
-                </q-td>
-                <q-td key="OrderBy" :props="props">
-                  {{ props.row.OrderBy }}
-                </q-td>
-                <q-td key="Signer" :props="props">
-                  {{ props.row.Signer }}
-                </q-td>
-                <q-td key="OrderStatus" :props="props">
-                  {{ props.row.OrderStatus }}
-                </q-td>
-                <q-td auto-width>
-                  <q-btn dense size="12px" flat round color="red" @click.stop="clickDelete(props.row.orderId)"
-                    icon="mdi-delete">
-                    <q-tooltip>ลบข้อมูล</q-tooltip>
-                  </q-btn>
-                </q-td>
-              </q-tr>
-            </template>
-            <template v-slot:pagination="scope">
-              <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
-                :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
-            </template>
-          </q-table>
-        </div>
-      </div>
-    </q-card>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { onMounted, reactive, ref, useAttrs, computed } from "vue";
 import type { QTableProps } from "quasar";
@@ -240,18 +130,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<FormOrderPlacementMainData[]>([
-  // {
-  // Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-  // OrderNum: "1/2565",
-  // fiscalYear: 2565,
-  // OrderDate: "30 พ.ค. 2565",
-  // OrderBy: "สำนักงาน กทม.",
-  // Signer: "นาม สมคิด ยอดใจ ",
-  // OrderStatus: "จัดทำร่างคำสั่ง",
-  // OrderType: "คำสั่งย้าย",
-  // },
-]);
+const rows = ref<FormOrderPlacementMainData[]>([]);
 
 let OriginalData = ref<FormOrderPlacementMainData[]>([]);
 let UpdataData = ref<FormOrderPlacementMainData[]>([]);
@@ -272,7 +151,7 @@ const OriginalDataFetch = async () => {
       rows.value = res.data.result.map((e: any) => ({
         orderId: e.orderId,
         Order: e.orderName,
-        OrderNum: e.orderNo,
+        OrderNum: `${e.orderNo}/${Number(e.fiscalYear) + 543}`,
         fiscalYear: Number(e.fiscalYear),
         OrderDate: date2Thai(e.orderDate),
         OrderBy: e.orderBy,
@@ -334,6 +213,10 @@ const deleteData = async (id: string) => {
     .finally(async () => {
       hideLoader();
       await OriginalDataFetch();
+      fiscalYearFilter();
+      searchFilterTable();
+      OrderStatusFilter();
+      OrderTypeFilter();
     });
 };
 
@@ -358,38 +241,7 @@ const fiscalYearFilter = async () => {
     // console.log(res);
     const response = res.data.result;
     fiscalyearOP.push(...response);
-    // const maxNumber = fiscalyearOP.reduce((max: any, e: any) => {
-    //   return e.id > max ? e.id : max;
-    // }, "");
-    // fiscalyear.value = maxNumber;
   });
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //    DataStore.DataMainYearSet(rows.value);
-  //    fiscalyearOP.value = DataStore.DataMainYearGet;
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  // for (let data of OriginalData.value) {
-  //   console.log(OriginalData.value);
-
-  //   const year = data.fiscalYear;
-  //   console.log(year);
-
-  //   if (fiscalyear.value === null || year > fiscalyear.value) {
-  //     fiscalyear.value = year;
-  //   }
-
-  //   if (!addedfiscalYearValues.includes(year)) {
-  //     fiscalyearOP.push({ id: year, name: year.toString() });
-  //     addedfiscalYearValues.push(year);
-  //   }
-  // }
 };
 
 const OrderType = ref<string>("");
@@ -406,41 +258,6 @@ const OrderTypeFilter = async () => {
     .catch((e) => {
       messageError($q, e);
     });
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //    DataStore.DataMainYearSet(rows.value);
-  //    fiscalyearOP.value = DataStore.DataMainYearGet;
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  // for (let data of OriginalData.value) {
-  //   const OrderTypeValue = data.OrderType;
-  //   console.log(OrderTypeValue);
-
-  // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
-  //   OrderTypeValue = OrderType;
-  // }
-  // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
-  //   OrderTypeOption.push({
-  //     // id: OrderTypeValue ?? 0,
-  //     id: OrderTypeOption.length,
-  //     name: OrderTypeValue,
-  //   });
-  //   addedOrderTypeValues.push(OrderTypeValue);
-  // }
-  // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
-  //   OrderTypeOption.push({
-  //     id: OrderTypeValue,
-  //     name: OrderTypeValue.toString(),
-  //   });
-  //   addedOrderTypeValues.push(OrderTypeValue);
-  // }
-  // }
 };
 const OrderStatus = ref<string>("");
 const OrderStatusText = ref<FormOrderPlacementMainData[]>(
@@ -451,18 +268,6 @@ const OrderStatusOption = reactive<DataOption1[]>([
 ]);
 const addedOrderStatusValues: string[] = [];
 const OrderStatusFilter = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //    DataStore.DataMainYearSet(rows.value);
-  //    fiscalyearOP.value = DataStore.DataMainYearGet;
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
   for (let data of OriginalData.value) {
     const OrderStatusValue = data.OrderStatus;
 
@@ -525,6 +330,104 @@ const paginationLabel = (start: string, end: string, total: string) => {
 };
 </script>
 
+<template>
+  <div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <div class="row q-col-gutter-sm">
+        <div class="row col-12 q-col-gutter-sm">
+          <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense emit-value
+            map-options :options="fiscalyearOP" option-value="id" option-label="name" lazy-rules hide-bottom-space
+            :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
+            @update:model-value="searchFilterTable" />
+          <div>
+            <q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd">
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+          <q-space />
+
+          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+            debounce="300" placeholder="ค้นหา">
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            </template>
+          </q-input>
+
+          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2" />
+        </div>
+        <div class="col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderType" label="ประเภท" dense emit-value
+                map-options option-label="name" :options="OrderTypeOption" option-value="name" lazy-rules
+                hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable" />
+              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderStatus" label="สถานะ" dense emit-value
+                map-options option-label="name" :options="OrderStatusOption" option-value="name" lazy-rules
+                hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable" />
+            </div>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="Order" flat bordered
+            :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel" v-model:pagination="pagination">
+            <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-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer"
+                @click="redirectToPage(props.row.orderId, props.row.OrderStatus)">
+                <q-td key="Order" :props="props">
+                  {{ props.row.Order }}
+                </q-td>
+                <q-td key="OrderNum" :props="props">
+                  {{ props.row.OrderNum }}
+                </q-td>
+                <q-td key="OrderType" :props="props">
+                  {{ props.row.OrderType }}
+                </q-td>
+                <q-td key="OrderDate" :props="props">
+                  {{ props.row.OrderDate }}
+                </q-td>
+                <q-td key="OrderBy" :props="props">
+                  {{ props.row.OrderBy }}
+                </q-td>
+                <q-td key="Signer" :props="props">
+                  {{ props.row.Signer }}
+                </q-td>
+                <q-td key="OrderStatus" :props="props">
+                  {{ props.row.OrderStatus }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn dense size="12px" flat round color="red" @click.stop="clickDelete(props.row.orderId)"
+                    icon="mdi-delete">
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+                :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+            </template>
+          </q-table>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
 <style lang="scss" scope>
 .filter-card {
   background-color: #f1f1f1b0;
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index fef6c9ec3..c5a7b13ac 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -38,19 +38,14 @@ const OrderPDFUpload = ref<string>("");
 const TailerPDFUpload = ref<string>("");
 
 const orderCoverPdf = ref<string>("");
-const orderCoverDocs = ref<string>("");
 const orderAttachmentPdf = ref<string>("");
-const orderAttachmentXlsx = ref<string>("");
 
 const statusOrder = ref<string>();
+const orderName = ref<string>("")
 
 const orderId = ref<string>(orderId_params.toString());
 onMounted(async () => {
   if (orderId.value) {
-    fetchReportCover("pdf", orderId.value);
-    fetchReportCover("docx", orderId.value);
-    fetchReportAttachment("pdf", orderId.value);
-    fetchReportAttachment("xlsx", orderId.value);
     fetchAttachment(orderId.value);
     fecthstatusOrder(orderId.value);
     getType();
@@ -65,6 +60,11 @@ const getType = async () => {
       const data = res.data.result;
       const orderTypeCode = data.orderTypeCode;
       code.value = orderTypeCode ?? "";
+      orderName.value = res.data.result.orderTitle
+
+      fetchReportCover("pdf", orderId.value);
+      fetchReportAttachment("pdf", orderId.value);
+
     })
     .catch((e) => {
       messageError($q, e);
@@ -77,9 +77,11 @@ const getType = async () => {
 const downloadCover = async (type: string) => {
   showLoader();
   await http
-    .get(config.API.fileCover(code.value, type, orderId.value))
+    .get(config.API.fileCover(code.value, type, orderId.value), {
+      responseType: "blob",
+    })
     .then(async (res) => {
-      downloadFile(res, `คำสั่ง.${type}`);
+      downloadFile(res, `คำสั่ง ${orderName.value}.${type}`);
     })
     .catch((e) => {
       messageError($q, e);
@@ -92,9 +94,11 @@ const downloadCover = async (type: string) => {
 const downloadAttachment = async (type: string) => {
   showLoader();
   await http
-    .get(config.API.fileCover(code.value, type, orderId.value))
+    .get(config.API.fileAttachment(code.value, type, orderId.value), {
+      responseType: "blob",
+    })
     .then(async (res) => {
-      downloadFile(res, `เอกสารแนบท้าย.${type}`);
+      downloadFile(res, `เอกสารแนบท้าย ${orderName.value}.${type}`);
     })
     .catch((e) => {
       messageError($q, e);
@@ -107,14 +111,14 @@ const downloadAttachment = async (type: string) => {
 const fetchReportCover = async (type: string, orderId: string) => {
   showLoader();
   await http
-    .get(config.API.reportOrderCover(type, orderId))
+    .get(config.API.reportOrderCover(type, orderId, code.value), {
+      responseType: "blob",
+    })
     .then(async (res) => {
-      if (type == "pdf") {
-        orderCoverPdf.value = res.data.result;
-        viewPDF(orderCoverPdf.value);
-      } else {
-        orderCoverDocs.value = res.data.result;
-      }
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      orderCoverPdf.value = objectUrl;
+      viewPDF(orderCoverPdf.value);
     })
     .catch((e) => {
       // messageError($q, e);
@@ -127,13 +131,13 @@ const fetchReportCover = async (type: string, orderId: string) => {
 const fetchReportAttachment = async (type: string, orderId: string) => {
   showLoader();
   await http
-    .get(config.API.reportOrderAttachment(type, orderId))
+    .get(config.API.reportOrderAttachment(type, orderId, code.value), {
+      responseType: "blob",
+    })
     .then(async (res) => {
-      if (type == "pdf") {
-        orderAttachmentPdf.value = res.data.result;
-      } else {
-        orderAttachmentXlsx.value = res.data.result;
-      }
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      orderAttachmentPdf.value = objectUrl;
     })
     .catch((e) => {
       // messageError($q, e);
@@ -347,50 +351,28 @@ const viewFileUpload = async (url: string) => {
 <template>
   <div>
     <div style="min-height: 70vh">
-      <q-splitter
-        v-model="splitterModel"
-        style="height: 70vh"
-        @update:model-value="onchangePage"
-      >
+      <q-splitter v-model="splitterModel" style="height: 70vh" @update:model-value="onchangePage">
         <template v-slot:before>
           <div class="space">
             <div @click="setTab('main')" :class="getClass(tab == 'main')">
               <div class="q-pr-sm">คำสั่ง</div>
-              <q-btn
-                size="12px"
-                flat
-                dense
-                icon="mdi-download"
-                :disable="tab !== 'main'"
-                :color="tab !== 'main' ? 'grey' : 'add'"
-              >
+              <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'main'"
+                :color="tab !== 'main' ? 'grey' : 'add'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadCover('pdf')"
-                    >
+                    <q-item clickable v-close-popup @click="downloadCover('pdf')">
                       <!-- type="a"
                       :href="orderCoverPdf"
                       target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadCover('docx')"
-                    >
+                    <q-item clickable v-close-popup @click="downloadCover('docx')">
                       <!-- type="a"
                       :href="orderCoverDocs"
                       target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="blue" name="mdi-file-word"
-                      /></q-item-section>
+                      <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
                       <q-item-section>ไฟล์ .docx</q-item-section>
                     </q-item>
                   </q-list>
@@ -399,41 +381,23 @@ const viewFileUpload = async (url: string) => {
             </div>
             <div @click="setTab('second')" :class="getClass(tab == 'second')">
               <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn
-                size="12px"
-                flat
-                dense
-                :color="tab !== 'second' ? 'grey' : 'add'"
-                icon="mdi-download"
-                :disable="tab !== 'second'"
-              >
+              <q-btn size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download"
+                :disable="tab !== 'second'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadAttachment('pdf')"
-                    >
+                    <q-item clickable v-close-popup @click="downloadAttachment('pdf')">
                       <!-- type="a"
                       :href="orderAttachmentPdf"
                       target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadAttachment('xlsx')"
-                    >
+                    <q-item clickable v-close-popup @click="downloadAttachment('xlsx')">
                       <!-- type="a"
                       :href="orderAttachmentXlsx"
                       target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
+                      <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
                       <q-item-section>ไฟล์ .xls</q-item-section>
                     </q-item>
                   </q-list>
@@ -441,24 +405,12 @@ const viewFileUpload = async (url: string) => {
               </q-btn>
             </div>
             <q-space />
-            <q-btn
-              class="text-dark"
-              flat
-              dense
-              icon="mdi-fullscreen"
-              color="add"
-              @click="dialog = true"
-            />
+            <q-btn class="text-dark" flat dense icon="mdi-fullscreen" color="add" @click="dialog = true" />
           </div>
           <q-separator style="margin-top: -1px; z-index: 1" />
           <q-card bordered class="card-pdf q-ma-md q-pa-md">
             <div class="justify-between items-center align-center q-pb-sm row">
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
                 <q-icon name="mdi-chevron-left" />
               </q-btn>
 
@@ -466,12 +418,7 @@ const viewFileUpload = async (url: string) => {
                 หน้าที่ {{ page }} จาก {{ numOfPages }}
               </span>
 
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
                 <q-icon name="mdi-chevron-right" />
               </q-btn>
             </div>
@@ -480,12 +427,7 @@ const viewFileUpload = async (url: string) => {
               <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
             </div>
             <div class="justify-between items-center align-center q-pt-sm row">
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
                 <q-icon name="mdi-chevron-left" />
               </q-btn>
 
@@ -493,12 +435,7 @@ const viewFileUpload = async (url: string) => {
                 หน้าที่ {{ page }} จาก {{ numOfPages }}
               </span>
 
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
+              <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
                 <q-icon name="mdi-chevron-right" />
               </q-btn>
             </div>
@@ -506,12 +443,7 @@ const viewFileUpload = async (url: string) => {
         </template>
 
         <template v-slot:separator>
-          <q-avatar
-            color="primary"
-            text-color="white"
-            size="30px"
-            icon="drag_indicator"
-          />
+          <q-avatar color="primary" text-color="white" size="30px" icon="drag_indicator" />
         </template>
 
         <template v-slot:after>
@@ -523,39 +455,17 @@ const viewFileUpload = async (url: string) => {
                   <div>
                     <label class="text-file">คำสั่ง</label>
                     <div class="text-right">
-                      <q-btn
-                        size="12px"
-                        flat
-                        dense
-                        color="primary"
-                        icon="mdi-eye"
-                        @click="viewFileUpload(OrderPDFUpload)"
-                      >
+                      <q-btn size="12px" flat dense color="primary" icon="mdi-eye"
+                        @click="viewFileUpload(OrderPDFUpload)">
                         <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
                       </q-btn>
-                      <q-btn
-                        type="a"
-                        :href="OrderPDFUpload"
-                        size="12px"
-                        flat
-                        dense
-                        color="red"
-                        icon="mdi-download"
-                        target="_blank"
-                      >
+                      <q-btn type="a" :href="OrderPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
+                        target="_blank">
                         <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
                       </q-btn>
                     </div>
-                    <q-file
-                      outlined
-                      dense
-                      v-model="fileOrder"
-                      label="เลือกไฟล์คำสั่ง"
-                      hide-bottom-space
-                      lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                      accept=".pdf"
-                    >
+                    <q-file outlined dense v-model="fileOrder" label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
                       <template v-slot:prepend>
                         <q-icon name="attach_file" />
                       </template>
@@ -564,40 +474,18 @@ const viewFileUpload = async (url: string) => {
                   <div>
                     <label class="text-file">เอกสารแนบท้าย</label>
                     <div class="text-right">
-                      <q-btn
-                        size="12px"
-                        flat
-                        dense
-                        color="primary"
-                        icon="mdi-eye"
-                        @click="viewFileUpload(TailerPDFUpload)"
-                      >
+                      <q-btn size="12px" flat dense color="primary" icon="mdi-eye"
+                        @click="viewFileUpload(TailerPDFUpload)">
                         <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
                       </q-btn>
-                      <q-btn
-                        type="a"
-                        :href="TailerPDFUpload"
-                        size="12px"
-                        flat
-                        dense
-                        color="red"
-                        icon="mdi-download"
-                        target="_blank"
-                      >
+                      <q-btn type="a" :href="TailerPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
+                        target="_blank">
                         <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
                       </q-btn>
                     </div>
 
-                    <q-file
-                      outlined
-                      dense
-                      v-model="fileTailer"
-                      label="เลือกไฟล์เอกสารแนบท้าย"
-                      hide-bottom-space
-                      lazy-rules
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                      accept=".pdf"
-                    >
+                    <q-file outlined dense v-model="fileTailer" label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space
+                      lazy-rules :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
                       <template v-slot:prepend>
                         <q-icon name="attach_file" />
                       </template>
@@ -611,51 +499,24 @@ const viewFileUpload = async (url: string) => {
                 <div class="q-gutter-y-md q-mb-md">
                   <div>
                     <label class="text-file">เลขที่คำสั่ง</label>
-                    <q-input
-                      :outlined="true"
-                      dense
-                      lazy-rules
-                      :readonly="!true"
-                      :borderless="!true"
-                      v-model="order"
-                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                      hide-bottom-space
-                      :label="`${'เลขที่คำสั่ง'}`"
-                    />
+                    <q-input :outlined="true" dense lazy-rules :readonly="!true" :borderless="!true" v-model="order"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`" />
                   </div>
                   <div>
                     <label class="text-file">ปีที่ออกคำสั่ง</label>
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="years"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
+                    <datepicker menu-class-name="modalfix" v-model="years" :locale="'th'" autoApply year-picker
+                      :enableTimePicker="false" week-start="0">
                       <template #year="{ year }">{{ year + 543 }}</template>
                       <template #year-overlay-value="{ value }">{{
                         parseInt(value + 543)
                       }}</template>
                       <template #trigger>
-                        <q-input
-                          outlined
-                          dense
-                          lazy-rules
-                          :model-value="years + 543"
-                          :rules="[
-                            (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
-                          ]"
-                          hide-bottom-space
-                          :label="`${'ปีที่ออกคำสั่ง'}`"
-                        >
+                        <q-input outlined dense lazy-rules :model-value="years + 543" :rules="[
+                          (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
+                        ]" hide-bottom-space :label="`${'ปีที่ออกคำสั่ง'}`">
                           <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-grey)"
-                            >
+                            <q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
                             </q-icon>
                           </template>
                         </q-input>
@@ -664,15 +525,8 @@ const viewFileUpload = async (url: string) => {
                   </div>
                   <div>
                     <label class="text-file">วันที่ลงนาม</label>
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="date"
-                      :locale="'th'"
-                      autoApply
-                      borderless
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
+                    <datepicker menu-class-name="modalfix" v-model="date" :locale="'th'" autoApply borderless
+                      :enableTimePicker="false" week-start="0">
                       <template #year="{ year }">
                         {{ year + 543 }}
                       </template>
@@ -680,23 +534,12 @@ const viewFileUpload = async (url: string) => {
                         {{ parseInt(value + 543) }}
                       </template>
                       <template #trigger>
-                        <q-input
-                          outlined
-                          dense
-                          class="full-width datepicker"
-                          hide-bottom-space
-                          :model-value="date != null ? date2Thai(date) : null"
-                          :label="`${'วันที่ลงนาม'}`"
-                          :rules="[
+                        <q-input outlined dense class="full-width datepicker" hide-bottom-space
+                          :model-value="date != null ? date2Thai(date) : null" :label="`${'วันที่ลงนาม'}`" :rules="[
                             (val) => !!val || `${'กรุณาเลือกวันที่ลงนาม'}`,
-                          ]"
-                        >
+                          ]">
                           <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-grey)"
-                            >
+                            <q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
                             </q-icon>
                           </template>
                         </q-input>
@@ -706,20 +549,9 @@ const viewFileUpload = async (url: string) => {
                 </div>
               </fieldset>
               <div class="flex justify-around">
-                <q-btn
-                  unelevated
-                  label="ออกคำสั่ง"
-                  :color="validateForm() ? 'public' : 'grey'"
-                  :disable="statusOrder == 'N'"
-                  @click="clickExecute(orderId)"
-                />
-                <q-btn
-                  class="text-dark"
-                  unelevated
-                  label="ส่งไปลงนาม"
-                  color="grey"
-                  :disable="statusOrder == 'N'"
-                />
+                <q-btn unelevated label="ออกคำสั่ง" :color="validateForm() ? 'public' : 'grey'"
+                  :disable="statusOrder == 'N'" @click="clickExecute(orderId)" />
+                <q-btn class="text-dark" unelevated label="ส่งไปลงนาม" color="grey" :disable="statusOrder == 'N'" />
               </div>
             </div>
           </q-form>
@@ -728,53 +560,23 @@ const viewFileUpload = async (url: string) => {
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="เลือกรายชื่อส่งสำเนา"
-      >
+      <q-btn dense outline color="primary" icon="chevron_left" @click="previous" class="q-pr-md"
+        label="เลือกรายชื่อส่งสำเนา">
       </q-btn>
-      <q-btn
-        unelevated
-        label="บันทึก"
-        :color="validateForm() ? 'public' : 'grey'"
-        :disable="!validateForm()"
-        @click="save"
-      >
+      <q-btn unelevated label="บันทึก" :color="validateForm() ? 'public' : 'grey'" :disable="!validateForm()"
+        @click="save">
       </q-btn>
     </div>
 
-    <q-dialog
-      v-model="dialog"
-      persistent
-      :maximized="true"
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
+    <q-dialog v-model="dialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
       <q-card class="bg-white text-white">
         <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            style="color: #ff8080; background-color: #ffdede"
-            size="12px"
-            v-close-popup
-          />
+          <q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
+            v-close-popup />
         </div>
         <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
           <div class="justify-between items-center align-center q-pb-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -782,32 +584,16 @@ const viewFileUpload = async (url: string) => {
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
               <q-icon name="mdi-chevron-right" />
             </q-btn>
           </div>
           <div class="pdfWidth">
-            <VuePDF
-              ref="vuePDFRef"
-              :pdf="pdfSrc"
-              :page="page"
-              fit-parent
-              :scale="0.1"
-            />
+            <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent :scale="0.1" />
             <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
           </div>
           <div class="justify-between items-center align-center q-pt-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -815,12 +601,7 @@ const viewFileUpload = async (url: string) => {
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
               <q-icon name="mdi-chevron-right" />
             </q-btn>
           </div>
@@ -828,33 +609,16 @@ const viewFileUpload = async (url: string) => {
       </q-card>
     </q-dialog>
 
-    <q-dialog
-      v-model="dialogFileUpload"
-      persistent
-      :maximized="true"
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
+    <q-dialog v-model="dialogFileUpload" persistent :maximized="true" transition-show="slide-up"
+      transition-hide="slide-down">
       <q-card class="bg-white text-white">
         <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            style="color: #ff8080; background-color: #ffdede"
-            size="12px"
-            v-close-popup
-          />
+          <q-btn icon="close" unelevated round dense style="color: #ff8080; background-color: #ffdede" size="12px"
+            v-close-popup />
         </div>
         <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
           <div class="justify-between items-center align-center q-pb-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -862,32 +626,16 @@ const viewFileUpload = async (url: string) => {
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
               <q-icon name="mdi-chevron-right" />
             </q-btn>
           </div>
           <div class="pdfWidth">
-            <VuePDF
-              ref="vuePDFRef"
-              :pdf="pdfFileUploadSrc"
-              :page="page"
-              fit-parent
-              :scale="0.1"
-            />
+            <VuePDF ref="vuePDFRef" :pdf="pdfFileUploadSrc" :page="page" fit-parent :scale="0.1" />
             <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
           </div>
           <div class="justify-between items-center align-center q-pt-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page > 1 ? page - 1 : page">
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
@@ -895,12 +643,7 @@ const viewFileUpload = async (url: string) => {
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
+            <q-btn class="text-dark bg-grey-4" flat dense @click="page = page < numOfPages ? page + 1 : page">
               <q-icon name="mdi-chevron-right" />
             </q-btn>
           </div>
diff --git a/src/modules/10_order/router.ts b/src/modules/10_order/router.ts
index b42e3161d..b037ac2af 100644
--- a/src/modules/10_order/router.ts
+++ b/src/modules/10_order/router.ts
@@ -1,4 +1,3 @@
-// const AddPage = () => import("@/modules/10_order/components/Add.vue");
 const MainOrder = () => import("@/modules/10_order/components/Main.vue");
 const DetailPage = () => import("@/modules/10_order/components/Detail.vue");