diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Document.vue b/src/modules/05_placement/components/PersonalDetail/Information/Document.vue
index 9cd6b4dbc..222dc9ef3 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Document.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Document.vue
@@ -257,6 +257,7 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md no-border">
     <HeaderTop
@@ -348,3 +349,5 @@ onMounted(async () => {
     </q-card>
   </q-card>
 </template>
+
+<style lang="css"></style>
diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
deleted file mode 100644
index 4ef569328..000000000
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ /dev/null
@@ -1,395 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar, QForm } from "quasar";
-import { useRouter, useRoute } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** import Store*/
-import { useCounterMixin } from "@/stores/mixin";
-/** useStore*/
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dateToISO,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  success,
-  dialogMessageNotify,
-} = mixin;
-
-/** use */
-const router = useRouter();
-const route = useRoute();
-const $q = useQuasar();
-
-const id = ref<string>(route.params.id as string);
-const myForm = ref<QForm | null>(null); //form data input
-const edit = ref<boolean>(false);
-const dateStart = ref<Date>(new Date());
-const dateEnd = ref<Date>(new Date());
-const yearly = ref<number>(new Date().getFullYear());
-const files = ref<any>();
-const fileDocDataUpload = ref<File[]>([]);
-const roundInsig = ref<any>();
-const datelast = ref<number>(1);
-const options = ref([
-  { label: "รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ 1", value: 1 },
-  { label: "รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ 2", value: 2 },
-]);
-
-/** Function เรียกข้อมูลของรอบการเสนอขอ */
-async function fetchData() {
-  edit.value = true;
-  showLoader();
-  await http
-    .get(config.API.getRoundInsignia(id.value))
-    .then((res) => {
-      const data = res.data.result;
-      id.value = data.period_id;
-      roundInsig.value =
-        options.value.filter((r: any) => r.value == data.period_round).length >
-        0
-          ? options.value.filter((r: any) => r.value == data.period_round)[0]
-          : null;
-      yearly.value = data.period_year;
-      datelast.value = data.period_amount;
-      dateStart.value = new Date(data.period_start);
-      dateEnd.value = new Date(data.period_end);
-      // files.value = data.period_doc;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * Function อัพโหลดไฟล์
- * @param files ไฟล์
- */
-function fileUploadDoc(files: any) {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-}
-
-/**
- * Function อัพเดทปี
- * @param year รับค่าปี คศ
- */
-async function updateYear(year: number) {
-  yearly.value = year;
-  await updateDateRange();
-}
-
-/**  Function ตรวจสอบค่าว่างของ Input  */
-function checkSave() {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (success) => {
-      if (success) {
-        dialogConfirm($q, () => SaveData());
-      } else if (Number(datelast.value) !== 0) {
-        dialogMessageNotify($q, "กรุณาเลือกรอบการเสนอขอพระราชทานเครื่องราชฯ");
-      }
-    });
-  }
-}
-
-/**  Function บันทึกข้อมูล */
-async function SaveData() {
-  if (edit.value) {
-    await editData(id.value);
-  } else {
-    await addData();
-    clickBack();
-  }
-}
-
-/**  Function อัพเดทวันที่เริ่มต้น และ สิ้นสุด */
-function updateDateRange() {
-  if (roundInsig.value.value == 1) {
-    dateStart.value = new Date(yearly.value, 9, 1);
-    dateEnd.value = new Date(yearly.value + 1, 3, 29);
-  } else if (roundInsig.value.value == 2) {
-    dateStart.value = new Date(yearly.value + 1, 3, 29);
-    dateEnd.value = new Date(yearly.value + 1, 4, 29);
-  }
-}
-
-/**  Function เพิ่มข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ */
-async function addData() {
-  const formData = new FormData();
-  const name = `รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ ${
-    roundInsig.value.value
-  }  ปี ${yearly.value + 543} `;
-  formData.append("name", name);
-  formData.append("year", yearly.value.toString());
-  formData.append("amount", datelast.value.toString());
-  formData.append("round", roundInsig.value.value);
-  if (dateStart.value !== null) {
-    formData.append("startDate", dateToISO(dateStart.value));
-  }
-  if (dateEnd.value !== null) {
-    formData.append("endDate", dateToISO(dateEnd.value));
-  }
-  formData.append("file", files.value);
-  showLoader();
-  await http
-    .post(config.API.listRoundInsignia(), formData)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-}
-
-/**  Function แก้ไขข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ */
-async function editData(id: string) {
-  const formData = new FormData();
-  const name = `รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ ${
-    roundInsig.value.value
-  } ปี ${yearly.value + 543}`;
-  formData.append("name", name);
-  formData.append("year", yearly.value.toString());
-  formData.append("amount", datelast.value.toString());
-  formData.append("round", roundInsig.value.value);
-  if (dateStart.value !== null) {
-    formData.append("startDate", dateToISO(dateStart.value));
-  }
-  if (dateEnd.value !== null) {
-    formData.append("endDate", dateToISO(dateEnd.value));
-  }
-  formData.append("file", files.value);
-  showLoader();
-  await http
-    .put(config.API.editRoundInsignia(id), formData)
-    .then(() => {
-      success($q, "แก้ไขข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      clickBack();
-    });
-}
-
-/** Function ย้อนกลับหน้า รอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์ */
-function clickBack() {
-  router.push({ name: "insigniaProposals" });
-}
-
-/** Hook */
-onMounted(async () => {
-  // มี params id ให้ เรียกข้อมูลของรอบการเสนอขอ
-  (await route.params?.id) && fetchData();
-});
-</script>
-<template>
-  <div class="col-xs-12 col-sm-12 col-md-11">
-    <div class="toptitle col-12 row items-center">
-      <q-btn
-        icon="mdi-arrow-left"
-        unelevated
-        round
-        dense
-        flat
-        color="primary"
-        class="q-mr-sm"
-        @click="clickBack"
-      />
-      {{
-        edit
-          ? "รอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
-          : "เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
-      }}
-    </div>
-    <q-form ref="myForm">
-      <div class="col-12">
-        <q-card bordered>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12 row">
-              <q-separator />
-              <div class="col-12 row q-pa-sm q-col-gutter-sm">
-                <q-select
-                  class="col-10 inputgreen"
-                  dense
-                  outlined
-                  v-model="roundInsig"
-                  :options="options"
-                  option-value="value"
-                  option-label="label"
-                  label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
-                  @update:model-value="updateDateRange"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกรอบที่'}`]"
-                />
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="yearly"
-                  class="col-2 inputgreen"
-                  :locale="'th'"
-                  autoApply
-                  year-picker
-                  :enableTimePicker="false"
-                  @update:modelValue="updateYear"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      :model-value="yearly + 543"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"
-                      :label="`${'ปีที่เสนอ'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="dateStart"
-                  :locale="'th'"
-                  autoApply
-                  class="col-xs-12 col-sm-5 inputgreen"
-                  borderless
-                  :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
-                      class="full-width datepicker"
-                      :model-value="
-                        dateStart != null ? date2Thai(dateStart) : null
-                      "
-                      :label="`${'วันเริ่มต้น'}`"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="dateEnd"
-                  class="col-xs-12 col-sm-5 inputgreen"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :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
-                      class="col-xs-12 col-sm-4"
-                      :model-value="dateEnd != null ? date2Thai(dateEnd) : null"
-                      :label="`${'วันสิ้นสุด'}`"
-                      :rules="[
-                        (val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
-                      ]"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-
-                <q-input
-                  class="col-xs-12 col-sm-2 inputgreen"
-                  dense
-                  outlined
-                  v-model="datelast"
-                  label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
-                  mask="###"
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณากรอกจำนวนวันแจ้งเตือนก่อนวันสิ้นสุด'}`,
-                  ]"
-                  lazy-rules
-                />
-
-                <q-file
-                  class="col-xs-12 col-sm-10 inputgreen"
-                  outlined
-                  dense
-                  v-model="files"
-                  @added="fileUploadDoc"
-                  label="อัปโหลดเอกสารประกอบ"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-              </div>
-            </div>
-          </div>
-          <q-separator />
-          <q-separator />
-          <div class="row col-12 q-pa-sm">
-            <q-space />
-            <q-btn
-              unelevated
-              dense
-              class="q-px-md items-center"
-              color="light-blue-10"
-              label="บันทึก"
-              @click="checkSave"
-            />
-          </div>
-        </q-card>
-      </div>
-    </q-form>
-  </div>
-</template>
diff --git a/src/modules/07_insignia/components/1_Proposals/DialogDetail.vue b/src/modules/07_insignia/components/1_Round/DialogDetail.vue
similarity index 86%
rename from src/modules/07_insignia/components/1_Proposals/DialogDetail.vue
rename to src/modules/07_insignia/components/1_Round/DialogDetail.vue
index 13ac2394c..10756b82f 100644
--- a/src/modules/07_insignia/components/1_Proposals/DialogDetail.vue
+++ b/src/modules/07_insignia/components/1_Round/DialogDetail.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import DialogHeader from "@/components/DialogHeader.vue";
+import type { OptionPeriod } from "@/modules/07_insignia/interface/index/Main";
 
-/** import Store*/
-import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -31,6 +32,7 @@ const props = defineProps({
   fetchList: { type: Function, required: true },
 });
 
+//ชื่อ popup
 const title = computed(() => {
   return actionType.value === "view"
     ? "รายละเอียดรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
@@ -38,24 +40,25 @@ const title = computed(() => {
     ? "แก้ไขข้อมูล"
     : "เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์";
 });
-
+//อ่านอย่างเดียว
 const readonly = computed(() => {
   return actionType.value === "view" ? true : false;
 });
 
-const options = ref([
+const roundInsig = ref<any>(); //รอบการเสนอขอพระราชทานเครื่องราชฯ
+const yearly = ref<number>(new Date().getFullYear()); //ปีที่เสนอ
+const dateStart = ref<Date | null>(null); //วันเริ่มต้น
+const dateEnd = ref<Date | null>(null); //วันสิ้นสุด
+const datelast = ref<number | null>(null); //จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด
+const files = ref<any>(); //เอกสารประกอบ
+const fileDocDataUpload = ref<File[]>([]); //รายการเอกสารประกอบ
+
+//ตัวเลือกรอบการเสนอขอพระราชทานเครื่องราชฯ
+const options = ref<OptionPeriod[]>([
   { label: "รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ 1", value: 1 },
   { label: "รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ 2", value: 2 },
 ]);
 
-const roundInsig = ref<any>();
-const yearly = ref<number>(new Date().getFullYear());
-const dateStart = ref<Date | null>(null);
-const dateEnd = ref<Date | null>(null);
-const datelast = ref<number | null>(null);
-const files = ref<any>();
-const fileDocDataUpload = ref<File[]>([]);
-
 /**
  * Function เรียกข้อมูลของรอบการเสนอขอ
  */
@@ -63,12 +66,14 @@ function fetchData() {
   showLoader();
   http
     .get(config.API.getRoundInsignia(roundId.value))
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       roundInsig.value =
-        options.value.filter((r: any) => r.value == data.period_round).length >
-        0
-          ? options.value.filter((r: any) => r.value == data.period_round)[0]
+        options.value.filter((r: OptionPeriod) => r.value == data.period_round)
+          .length > 0
+          ? options.value.filter(
+              (r: OptionPeriod) => r.value == data.period_round
+            )[0]
           : null;
       yearly.value = data.period_year;
       datelast.value = data.period_amount;
@@ -83,7 +88,9 @@ function fetchData() {
     });
 }
 
-/**  Function อัพเดทวันที่เริ่มต้น และ สิ้นสุด */
+/**
+ * Function อัพเดทวันที่เริ่มต้น และ สิ้นสุด
+ */
 function updateDateRange() {
   if (roundInsig.value.value == 1) {
     dateStart.value = new Date(yearly.value, 9, 1);
@@ -117,7 +124,7 @@ function fileUploadDoc(files: any) {
  * Function บันทึกข้อมูล
  */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
     const formData = new FormData();
     const name = `รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ ${
@@ -156,6 +163,11 @@ function onSubmit() {
   });
 }
 
+/**
+ * function ปิด popup รอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
+ *
+ * และกำหนดตัวแปรเป็นค่า Defult
+ */
 function onCloseDialog() {
   modal.value = false;
   roundInsig.value = "";
@@ -167,6 +179,23 @@ function onCloseDialog() {
   fileDocDataUpload.value = [];
 }
 
+/**
+ *  function คืนค่าชื่อคลาสตามค่าที่กำหนด
+ * @param val ค่ากำหนดว่าจะแสดงคลาสไหน
+ * @returns ชื่อคลาส
+ */
+function classInput(val: boolean) {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+}
+
+/**
+ * ทำงานเมื่อ modal เป็น true  actionType เป็น view
+ *
+ *
+ */
 watch(
   () => modal.value,
   () => {
@@ -177,13 +206,6 @@ watch(
     }
   }
 );
-
-const classInput = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
 </script>
 
 <template>
diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 72fbeb429..887140412 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import { onMounted, ref, computed, reactive, watch } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar, QForm } from "quasar";
+
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+import { useroleUserDataStore } from "@/stores/roleUser";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
 
 /** import Type*/
 import type { QTableProps } from "quasar";
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
+import type { CheckboxData } from "@/modules/07_insignia/interface/request/Main";
 
 /** import components*/
 import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
@@ -16,11 +21,9 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import btnDownloadFile from "@/modules/07_insignia/components/2_Manage/downloadFile.vue";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
-/** import Stores*/
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
-import { useroleUserDataStore } from "@/stores/roleUser";
-import { useCounterMixin } from "@/stores/mixin";
-/**user stores*/
+/**use*/
+const myForm = ref<QForm>();
+const $q = useQuasar();
 const DataStore = useInsigniaDataStore();
 const roleDataStore = useroleUserDataStore();
 const mixin = useCounterMixin();
@@ -33,31 +36,54 @@ const {
   dialogMessageNotify,
 } = mixin;
 
-const myForm = ref<QForm>();
-const router = useRouter();
-const $q = useQuasar();
+/**
+ * props
+ */
+const props = defineProps({
+  tab: {
+    type: String,
+  },
+  roundId: {
+    type: String,
+  },
+  fecthInsigniaAll: {
+    type: Function,
+  },
+  fecthInsigniaByOc: {
+    type: Function,
+  },
+  roundName: {
+    type: String,
+  },
+  requestStatus: {
+    type: String,
+  },
+  fecthStat: {
+    type: Function,
+  },
+});
 
-const modelPopupReject = ref<boolean>(false);
-const modelPopupDelete = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
-const modalEdit = ref<boolean>(false);
-const rowid = ref<string>("");
-const organization = ref<string>("");
+const modelPopupReject = ref<boolean>(false); //popup เหตุผลไม่ยื่นขอ
+const modelPopupDelete = ref<boolean>(false); // popup เหตุผลที่ลบออก
+const modalAdd = ref<boolean>(false); //popup เพิ่มรายชื่อ
+const modalEdit = ref<boolean>(false); //popup แก้ไขเครื่องราชฯ ที่ยื่นขอ
+const modalPersonal = ref<boolean>(false); //popup ข้อมูลราชการ
+const rowid = ref<string>(""); // id ที่ต้องการ
+const organization = ref<string>(""); //หน่วยงาน
 
 /** หมายเหตุ*/
-const dialogNote = ref<boolean>(false);
-const dialogTitle = ref<string>("");
-const dialogDesc = ref<string>("");
-const typeinsigniaOptions = ref<any>(DataStore.typeinsigniaOptions);
-const employeeClassOps = ref<any>(DataStore.employeeClassOps);
-const modalPersonal = ref<boolean>(false);
+const dialogNote = ref<boolean>(false); //หมายเหตุ
+const dialogTitle = ref<string>(""); //ชื่อ popup
+const dialogDesc = ref<string>(""); //
+const typeinsigniaOptions = ref<OptionData[]>(DataStore.typeinsigniaOptions); //ประเภทเครื่องราย
+const employeeClassOps = ref<OptionData[]>(DataStore.employeeClassOps); //ประเภทข้ารายกาช
 
 /**แจ้งเตือน*/
 const dialogWarn = ref<boolean>(false);
-const checkboxData = ref<any>([]);
+const checkboxData = ref<CheckboxData[]>([]);
 
-const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
-const filterOrganizationOP = ref<any>([]);
+const organizationOptions = ref<OptionData[]>([{ id: "1", name: "ทั้งหมด" }]);
+const filterOrganizationOP = ref<OptionData[]>([]);
 
 /** หัวตาราง*/
 const visibleColumns = ref<string[]>([
@@ -224,33 +250,9 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows2 = ref<any[]>([]);
+const rows2 = ref<any[]>([]); //รายชื่อข้าราชการตามหน่วยงานที่จะเพิ่ม
 const person = ref<any>([]);
 
-const props = defineProps({
-  tab: {
-    type: String,
-  },
-  roundId: {
-    type: String,
-  },
-  fecthInsigniaAll: {
-    type: Function,
-  },
-  fecthInsigniaByOc: {
-    type: Function,
-  },
-  roundName: {
-    type: String,
-  },
-  requestStatus: {
-    type: String,
-  },
-  fecthStat: {
-    type: Function,
-  },
-});
-
 /** เช็คสถานนะแสดงปุ่มเพิ่ม*/
 const checkStatus = computed(() => {
   if (
@@ -328,6 +330,7 @@ async function fecthlistperson(id: string = "") {
         organizationOrganization: e.root,
       }));
       modalAdd.value = true;
+
       rows2.value = data;
     })
     .catch((err) => {
@@ -419,7 +422,7 @@ async function clickmodalEdit(props: any) {
  * @param response response
  * @param filename ชื่อไฟล์
  */
-function downloadFile(response: any, filename: string) {
+async function downloadFile(response: any, filename: string) {
   const link = document.createElement("a");
   var fileName = filename;
   link.href = window.URL.createObjectURL(new Blob([response.data]));
@@ -476,27 +479,27 @@ async function clickSave() {
  * @param profileId
  */
 async function listEdit(profileId: string) {
+  showLoader();
   let data: any = {
     insigniaId: insignia.value,
   };
   await http
     .put(config.API.insigniaEdit(profileId), data)
-    .then(() => {
+    .then(async () => {
+      await props?.fecthInsigniaByOc?.(
+        props.roundId,
+        organization.value,
+        "officer",
+        props.tab
+      );
       success($q, "แก้ไขเครื่องราชฯ ที่ยื่นขอสำเร็จ");
+      modalEdit.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
-    .finally(async () => {
-      modalEdit.value = false;
-      if (props.fecthInsigniaByOc) {
-        await props.fecthInsigniaByOc(
-          props.roundId,
-          organization.value,
-          "officer",
-          props.tab
-        );
-      }
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -528,24 +531,25 @@ async function savaReasonReject(reason: string) {
  * @param reason หมายเหตุ
  */
 async function listreject(profileId: string, reason: string) {
+  showLoader();
   await http
     .put(config.API.insigniaReject(profileId), { reason: reason })
-    .then(() => {
+    .then(async () => {
+      await props?.fecthInsigniaByOc?.(
+        props.roundId,
+        organization.value,
+        "officer",
+        props.tab
+      );
+
       success($q, "ย้ายข้อมูลสำเร็จ");
+      modelPopupReject.value = false;
     })
     .catch((err) => {
       messageError($q, err);
     })
-    .finally(async () => {
-      if (props.fecthInsigniaByOc) {
-        await props.fecthInsigniaByOc(
-          props.roundId,
-          organization.value,
-          "officer",
-          props.tab
-        );
-      }
-      modelPopupReject.value = await false;
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -584,24 +588,24 @@ async function savaReasonDelete(reason: string) {
  * @param reason หมายเหตุ
  */
 async function listdelete(id: string, reason: string) {
+  showLoader();
   await http
     .put(config.API.insigniaDelete(id), { reason: reason })
-    .then(() => {
+    .then(async () => {
+      await props?.fecthInsigniaByOc?.(
+        props.roundId,
+        organization.value,
+        "officer",
+        props.tab
+      );
       success($q, "ลบข้อมูลสำเร็จ");
+      closemodelPopupDelete();
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(async () => {
-      if (props.fecthInsigniaByOc) {
-        await props.fecthInsigniaByOc(
-          props.roundId,
-          organization.value,
-          "officer",
-          props.tab
-        );
-      }
-      await closemodelPopupDelete();
+      hideLoader();
     });
 }
 const dataPerson = reactive({
@@ -640,7 +644,7 @@ function clearForm() {
 }
 
 const insignia = ref<string>("");
-const insigniaOptions = ref<any[]>([]);
+const insigniaOptions = ref<OptionData[]>([]);
 const insigniaType = ref<string>("");
 
 /** function เรียกประเภทเครื่องราช*/
@@ -660,8 +664,6 @@ async function fecthInsignia() {
     });
 }
 
-function onclickViewinfo(id: string) {}
-
 const personId = ref<string>("");
 /**
  *  function redirect to ทะเบียนประวัติ
@@ -670,7 +672,6 @@ const personId = ref<string>("");
 function nextPage(id: string) {
   modalPersonal.value = true;
   personId.value = id;
-  // router.push(`/registry-officer/${id}`);
 }
 
 function updatemodalPersonal(modal: boolean) {
@@ -753,22 +754,22 @@ function clickShowWarn(
  * @param update function
  * @param name ชื่อ selec
  */
-function filterSelector(val: any, update: Function, name: any) {
+function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "typeinsigniaOptions") {
       DataStore.typeinsignia = "";
       typeinsigniaOptions.value = DataStore.typeinsigniaOptions.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "employeeClassOps") {
       DataStore.employeeClass = "";
       employeeClassOps.value = DataStore.employeeClassOps.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "filterOrganizationOP") {
       filterOrganizationOP.value = organizationOptions.value.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     }
   });
@@ -831,7 +832,7 @@ onMounted(async () => {
           :hide-dropdown-icon="false"
           style="width: 400px"
           @update:model-value="changtypeOc"
-          @filter="(inputValue: any,
+          @filter="(inputValue: string,
             doneFn: Function) => filterSelector(inputValue, doneFn, 'filterOrganizationOP'
             )"
         />
@@ -900,7 +901,7 @@ onMounted(async () => {
                 DataStore.employeeClass
               )
             "
-            @filter="(inputValue: any,
+            @filter="(inputValue: string,
       doneFn: Function) => filterSelector(inputValue, doneFn, 'typeinsigniaOptions'
       )"
           >
@@ -945,7 +946,7 @@ onMounted(async () => {
                 DataStore.employeeClass
               )
             "
-            @filter="(inputValue: any,
+            @filter="(inputValue: string,
     doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
     )"
           >
diff --git a/src/modules/07_insignia/components/2_Manage/Tab2.vue b/src/modules/07_insignia/components/2_Manage/Tab2.vue
index 1e9dd6148..6649e6a25 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab2.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab2.vue
@@ -1,24 +1,21 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
+
 import { checkPermission } from "@/utils/permissions";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+import { useroleUserDataStore } from "@/stores/roleUser";
 
 /** import Type*/
 import type { QTableProps } from "quasar";
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 
 /** import components*/
 import DialogInformation from "@/components/Dialogs/Information.vue";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
-/** import Stores */
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
-import { useroleUserDataStore } from "@/stores/roleUser";
 /** useStore*/
 const roleDataStore = useroleUserDataStore();
 const DataStore = useInsigniaDataStore();
-
-const router = useRouter();
-
 const props = defineProps({
   tab: {
     type: String,
@@ -35,10 +32,10 @@ const props = defineProps({
 });
 
 const organization = ref<string>("1");
-const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
-const filterOrganizationOP = ref<any>([]);
-const typeinsigniaOptions = ref<any>(DataStore.typeinsigniaOptions);
-const employeeClassOps = ref<any>(DataStore.employeeClassOps);
+const organizationOptions = ref<OptionData[]>([{ id: "1", name: "ทั้งหมด" }]);
+const filterOrganizationOP = ref<OptionData[]>([]); //หน่วยงาน
+const typeinsigniaOptions = ref<OptionData[]>(DataStore.typeinsigniaOptions); //ประเภทเครื่องราย
+const employeeClassOps = ref<OptionData[]>(DataStore.employeeClassOps); //ประเภทข้ารายกาช
 
 /** หัวตาราง*/
 const columns = ref<QTableProps["columns"]>([
@@ -179,7 +176,6 @@ const personId = ref<string>("");
 function nextPage(id: string) {
   modalPersonal.value = true;
   personId.value = id;
-  // router.push(`/registry-officer/${id}`);
 }
 
 function updatemodalPersonal(modal: boolean) {
@@ -226,22 +222,22 @@ function closeReson() {
  * @param update funtion
  * @param name ชื่อ selec
  */
-function filterSelector(val: any, update: Function, name: any) {
+function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "typeinsigniaOptions") {
       DataStore.typeinsignia = "";
       typeinsigniaOptions.value = DataStore.typeinsigniaOptions.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "employeeClassOps") {
       DataStore.employeeClass = "";
       employeeClassOps.value = DataStore.employeeClassOps.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "filterOrganizationOP") {
       filterOrganizationOP.value = organizationOptions.value.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     }
   });
@@ -302,7 +298,7 @@ onMounted(async () => {
           :hide-dropdown-icon="false"
           style="width: 400px"
           @update:model-value="changtypeOc"
-          @filter="(inputValue:any,
+          @filter="(inputValue: string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
                       ) "
         />
@@ -370,7 +366,7 @@ onMounted(async () => {
                 DataStore.employeeClass
               )
             "
-            @filter="(inputValue:any,
+            @filter="(inputValue: string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
                       ) "
           >
@@ -415,7 +411,7 @@ onMounted(async () => {
                 DataStore.employeeClass
               )
             "
-            @filter="(inputValue:any,
+            @filter="(inputValue: string,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
                     ) "
           >
diff --git a/src/modules/07_insignia/components/2_Manage/Tab3.vue b/src/modules/07_insignia/components/2_Manage/Tab3.vue
index 78e56e187..453ae3ac9 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab3.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab3.vue
@@ -1,25 +1,21 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, reactive } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { onMounted, ref } from "vue";
+
 import { checkPermission } from "@/utils/permissions";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+import { useroleUserDataStore } from "@/stores/roleUser";
 
 /** import Type*/
 import type { QTableProps } from "quasar";
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 
 /** import components*/
 import DialogInformation from "@/components/Dialogs/Information.vue";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
-/** import Stores */
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
-import { useroleUserDataStore } from "@/stores/roleUser";
 /** useStore*/
 const DataStore = useInsigniaDataStore();
 const roleDataStore = useroleUserDataStore();
-const { adminRole } = roleDataStore;
-
-const router = useRouter();
 
 const props = defineProps({
   tab: {
@@ -35,11 +31,12 @@ const props = defineProps({
     type: Function,
   },
 });
-const typeinsigniaOptions = ref<any>(DataStore.typeinsigniaOptions);
-const employeeClassOps = ref<any>(DataStore.employeeClassOps);
-const filterOrganizationOP = ref<any>([]);
+
+const typeinsigniaOptions = ref<OptionData[]>(DataStore.typeinsigniaOptions); //ประเภทเครื่องราย
+const employeeClassOps = ref<OptionData[]>(DataStore.employeeClassOps); //ประเภทข้ารายกาช
+const filterOrganizationOP = ref<OptionData[]>([]); // //หน่วยงาน
 const organization = ref<string>("1");
-const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
+const organizationOptions = ref<OptionData[]>([{ id: "1", name: "ทั้งหมด" }]);
 
 /** หัวตาราง*/
 const columns = ref<QTableProps["columns"]>([
@@ -179,7 +176,6 @@ const personId = ref<string>("");
 function nextPage(id: string) {
   modalPersonal.value = true;
   personId.value = id;
-  // router.push(`/registry-officer/${id}`);
 }
 
 function updatemodalPersonal(modal: boolean) {
@@ -204,6 +200,7 @@ const pagination = ref({
 const dialogNote = ref<boolean>(false);
 const note = ref<string>("");
 const noteTitle = ref<string>("");
+
 /**
  * function openPopup แสดง หมายเหตุ
  * @param row รายละเอียดข้อมูล
@@ -225,22 +222,22 @@ function closeReson() {
  * @param update funtion
  * @param name ชื่อ selec
  */
-function filterSelector(val: any, update: Function, name: any) {
+function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "typeinsigniaOptions") {
       DataStore.typeinsignia = "";
       typeinsigniaOptions.value = DataStore.typeinsigniaOptions.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "employeeClassOps") {
       DataStore.employeeClass = "";
       employeeClassOps.value = DataStore.employeeClassOps.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "filterOrganizationOP") {
       filterOrganizationOP.value = organizationOptions.value.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     }
   });
@@ -301,7 +298,7 @@ onMounted(async () => {
           :hide-dropdown-icon="false"
           style="width: 400px"
           @update:model-value="changtypeOc"
-          @filter="(inputValue:any,
+          @filter="(inputValue: string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
                       ) "
         />
@@ -369,7 +366,7 @@ onMounted(async () => {
                 DataStore.employeeClass
               )
             "
-            @filter="(inputValue:any,
+            @filter="(inputValue: string,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
                         ) "
           >
@@ -414,7 +411,7 @@ onMounted(async () => {
                 DataStore.employeeClass
               )
             "
-            @filter="(inputValue:any,
+            @filter="(inputValue: string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
                       ) "
           >
diff --git a/src/modules/07_insignia/components/2_Manage/Tab4.vue b/src/modules/07_insignia/components/2_Manage/Tab4.vue
index 8f8017151..1b9fef1a3 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab4.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab4.vue
@@ -1,22 +1,25 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
+
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** import Type*/
 import type { QTableProps } from "quasar";
+import type { ResponseNoSend } from "@/modules/07_insignia/interface/response/Main";
 
-/** import Stores */
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
-import { useCounterMixin } from "@/stores/mixin";
-/** useStore*/
+/** use*/
+const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
 const DataStore = useInsigniaDataStore();
 
-const $q = useQuasar();
-
+/**
+ * props
+ */
 const props = defineProps({
   roundId: {
     type: String,
@@ -27,7 +30,7 @@ const props = defineProps({
 });
 
 /** ข้อมูลตาราง*/
-const rows = ref<any[]>([]);
+const rows = ref<ResponseNoSend[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -63,7 +66,7 @@ async function fecthOrg() {
     .get(config.API.insigniaNosend(props.roundId))
     .then((res) => {
       let data = res.data.result;
-      rows.value = data.map((e: any) => ({
+      rows.value = data.map((e: ResponseNoSend) => ({
         orgId: e.orgId,
         orgName: e.orgName,
       }));
diff --git a/src/modules/07_insignia/components/2_Manage/downloadFile.vue b/src/modules/07_insignia/components/2_Manage/downloadFile.vue
index 224835e5c..2fa3a6156 100644
--- a/src/modules/07_insignia/components/2_Manage/downloadFile.vue
+++ b/src/modules/07_insignia/components/2_Manage/downloadFile.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
 
 import type { Optionround } from "@/modules/07_insignia/interface/index/Main";
 
-/**import Stores */
-import { useCounterMixin } from "@/stores/mixin";
-/** use Store*/
+/** use*/
+const $q = useQuasar();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
 
-const $q = useQuasar();
-
 /** props*/
 const props = defineProps({
   profileId: {
@@ -27,7 +26,7 @@ const props = defineProps({
   },
 });
 
-const titleReport = ref<string>("");
+const titleReport = ref<string>(""); //ชื่อรายงาน
 
 /**
  * function ดาวน์โหลดไฟล์
@@ -63,6 +62,11 @@ async function downloadDocument(type: string) {
   }
 }
 
+/**
+ * function โหลดเอกสาร
+ * @param response ข้อมู
+ * @param filename ชื่อไฟล์
+ */
 function downloadFile(response: any, filename: string) {
   const link = document.createElement("a");
   var fileName = filename;
diff --git a/src/modules/07_insignia/components/3_result/Dialogbody.vue b/src/modules/07_insignia/components/3_result/DialogReceive_Return.vue
similarity index 83%
rename from src/modules/07_insignia/components/3_result/Dialogbody.vue
rename to src/modules/07_insignia/components/3_result/DialogReceive_Return.vue
index 684e9a066..4f61b765b 100644
--- a/src/modules/07_insignia/components/3_result/Dialogbody.vue
+++ b/src/modules/07_insignia/components/3_result/DialogReceive_Return.vue
@@ -1,22 +1,25 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { QForm, useQuasar } from "quasar";
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** import Type*/
 import type { DataOption } from "@/modules/04_registry/components/profileType";
+import type { DataStructureTree } from "@/interface/main";
 
 /**
  * import Components
  */
-import DialogHeader from "../DialogHeader.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 
-/** import Stores */
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
 
-/** useStore*/
+/** use*/
+const route = useRoute();
+const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -28,23 +31,9 @@ const {
   dateToISO,
 } = mixin;
 
-const route = useRoute();
-const $q = useQuasar();
-const myForm = ref<any>();
-
-const files = ref<any>();
-const filesReturn = ref<any>();
-const OrganazationId = ref<string>("");
-const OrganazationId2 = ref<string>("");
-const OrgList = ref<DataOption[]>([]);
-const OrgList2 = ref<DataOption[]>([]);
-const Datereceive = ref<Date | null>();
-const Datereturn = ref<Date | null>();
-const remark = ref<string>("");
-const nullii = ref<any>(null);
-const filesCheck = ref<string>("");
-const filesReturnCheck = ref<string>("");
-
+/**
+ * props
+ */
 const props = defineProps({
   modal: Boolean,
   personId: String,
@@ -52,16 +41,31 @@ const props = defineProps({
   fecthlistInsignia: Function,
   dateCheckReceive: String,
   dateCheckReturn: String,
-
   dataModal: Object,
 });
 
-/** function clearDate */
+const files = ref<any>(); //ไฟล์รับ
+const filesReturn = ref<any>(); //ไฟล์คืน
+const OrganazationId = ref<string>(""); //id หน่วยงานที่รับ
+const OrganazationId2 = ref<string>(""); //id หน่วยงานที่คือ
+const OrgList = ref<DataOption[]>([]); //รายการหน่วยงาน
+const OrgList2 = ref<DataOption[]>([]); ////รายการหน่วยงาน
+const Datereceive = ref<Date | null>(); //วันที่รับ
+const Datereturn = ref<Date | null>(); //วันที่คืน
+const nullii = ref<any>(null);
+const filesCheck = ref<string>("");
+const filesReturnCheck = ref<string>("");
+
+/**
+ * function clearDate
+ */
 function clearReturnDate() {
   Datereturn.value = null;
 }
 
-/** function Colsepopup*/
+/**
+ * function Colsepopup
+ */
 function close() {
   props.close?.();
   Datereceive.value = null;
@@ -83,11 +87,9 @@ function onSubmit(type: string, id: string) {
     if (props.dateCheckReceive === null) {
       formData.append("Date", dateToISO((Datereceive.value as Date) ?? nullii));
       formData.append("File", files.value);
-      // formData.append("OrgId", OrganazationId.value);
     } else {
       formData.append("Date", dateToISO((Datereturn.value as Date) ?? nullii));
       formData.append("File", filesReturn.value);
-      // formData.append("OrgId", OrganazationId2.value);
     }
     showLoader();
     http
@@ -110,32 +112,26 @@ function onSubmit(type: string, id: string) {
   });
 }
 
-watch(
-  () => props.modal,
-  () => {
-    if (props.modal == true) {
-      fetchOrgList();
-    }
-  }
-);
-
-/** function เรียกหน่วยงาน*/
-function fetchOrgList() {
+/**
+ * function เรียกหน่วยงาน
+ */
+async function fetchOrgList() {
   showLoader();
-  http
+  await http
     .get(config.API.activeOrganization)
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
-
-      http
+      await http
         .get(config.API.orgByIdSystem(data.activeId, route.meta.Key as string))
         .then(async (res) => {
-          const data = await res.data.result.map((item: any) => ({
-            id: item.orgTreeId,
-            name: item.orgName,
-          }));
-          OrgList.value = data;
-          OrgList2.value = data;
+          const dataSystem = await res.data.result.map(
+            (item: DataStructureTree) => ({
+              id: item.orgTreeId,
+              name: item.orgName,
+            })
+          );
+          OrgList.value = dataSystem;
+          OrgList2.value = dataSystem;
         })
         .catch((err) => {
           messageError($q, err);
@@ -149,7 +145,21 @@ function fetchOrgList() {
     });
 }
 
-/** callback function จำทำงานเมื่อ props มีการเปลี่ยนแปลง*/
+/**
+ * callback function จะทำงานเมื่อ modal มีการเปลี่ยนแปลง
+ */
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal == true) {
+      fetchOrgList();
+    }
+  }
+);
+
+/**
+ * callback function จะทำงานเมื่อ props มีการเปลี่ยนแปลง
+ */
 watch(props, () => {
   if (props.dataModal) {
     Datereceive.value = props.dataModal.dateReceiveInsignia;
@@ -172,7 +182,6 @@ watch(props, () => {
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 900px">
       <q-form
-        ref="myForm"
         greedy
         @submit.prevent
         @validation-success="
@@ -212,7 +221,7 @@ watch(props, () => {
                     dense
                     borderless
                     outlined
-                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
+                    :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
                     hide-bottom-space
                     class="inputgreen"
                     :model-value="
@@ -256,7 +265,7 @@ watch(props, () => {
                 v-model="files"
                 label="ไฟล์หลักฐานการรับ"
                 lazy-rules
-                :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+                :rules="[(val:string) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
                 hide-bottom-space
                 :disable="dateCheckReceive !== null"
               >
@@ -279,7 +288,7 @@ watch(props, () => {
                 v-model="OrganazationId"
                 lazy-rules
                 :label="`หน่วยงานที่รับ`"
-                :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']"
+                :rules="[(val:string) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']"
                 :disable="dateCheckReceive !== null"
                 class="inputgreen"
               />
@@ -317,7 +326,7 @@ watch(props, () => {
                     borderless
                     outlined
                     class="inputgreen"
-                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
+                    :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่คืน']"
                     hide-bottom-space
                     :model-value="
                       Datereturn != null ? date2Thai(Datereturn) : undefined
@@ -362,7 +371,7 @@ watch(props, () => {
                 v-model="filesReturn"
                 label="ไฟล์หลักฐานการคืน"
                 lazy-rules
-                :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']"
+                :rules="[(val:string) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']"
                 hide-bottom-space
                 :disable="dateCheckReturn !== null"
               >
@@ -385,7 +394,7 @@ watch(props, () => {
                 v-model="OrganazationId2"
                 lazy-rules
                 :label="`หน่วยงานที่คืน`"
-                :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
+                :rules="[(val:string) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
                 :disable="dateCheckReturn !== null"
                 class="inputgreen"
               />
diff --git a/src/modules/07_insignia/components/3_result/DialogForm.vue b/src/modules/07_insignia/components/3_result/DialogResults.vue
similarity index 85%
rename from src/modules/07_insignia/components/3_result/DialogForm.vue
rename to src/modules/07_insignia/components/3_result/DialogResults.vue
index 0e43594dc..f2638ae10 100644
--- a/src/modules/07_insignia/components/3_result/DialogForm.vue
+++ b/src/modules/07_insignia/components/3_result/DialogResults.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, watch, computed, reactive } from "vue";
 import { QForm, useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useResultDataStore } from "@/modules/07_insignia/storeResult";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -8,13 +11,8 @@ import config from "@/app.config";
  * import Type
  */
 import type { DataOption } from "@/modules/04_registry/components/profileType";
-import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * import Stores
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useResultDataStore } from "@/modules/07_insignia/storeResult";
+import DialogHeader from "@/components/DialogHeader.vue";
 
 /**
  * use
@@ -38,9 +36,7 @@ const {
  */
 const props = defineProps({
   modal: Boolean,
-  save: {
-    type: Function,
-  },
+
   close: {
     type: Function,
   },
@@ -63,29 +59,31 @@ const props = defineProps({
  * ตัวแปร
  */
 const status = ref<string>("");
-const Advertise = ref<string>("");
-const issue = ref<string>("");
-const brand = ref<string>("");
-const cardid = ref<string>("");
-const fullName = ref<string>("");
-const volume = ref<string>("");
-const episode = ref<string>("");
-const duty = ref<string>("");
-const announced = ref<string>("");
-const position = ref<string>("");
-const payment = ref<string>("");
-const addressPayment = ref<string | null>(null);
-const affiliationRequest = ref<string>("");
-const affiliationReceived = ref<string>("");
-const receivedate = ref<Date | null>();
-const announceDate = ref<Date | null>();
-const invoiceDate = ref<Date | null>(null);
-const filterinsigniaOp2 = ref<any[]>([]);
-const employeeClass = ref<string>("");
+const Advertise = ref<string>(""); //หมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์
+const issue = ref<string>(""); //ทะเบียนฐานันดร
+const brand = ref<string>(""); //ชั้นตราเครื่องราชอิสริยาภรณ์
+const cardid = ref<string>(""); //เลขประจำตัวประชาชน
+const fullName = ref<string>(""); //ชื่อ-นามสกุล
+const volume = ref<string>(""); //เล่มที่
+const episode = ref<string>(""); //ตอนที่
+const duty = ref<string>(""); //หน้าที่
+const announced = ref<string>(""); //ลำดับที่
+const position = ref<string>(""); //ตำเเหน่ง
+const payment = ref<string>(""); //รูปแบบการจ่าย
+const addressPayment = ref<string | null>(null); //ที่อยู่ที่จ่าย
+const affiliationRequest = ref<string>(""); //สังกัด ณ วันที่ขอพระราชทานเครื่องราชอิสริยาภรณ์
+const affiliationReceived = ref<string>(""); //สังกัด ณ วันที่ได้รับประกาศนียบัตรกำกับเครื่องราชอิสริยาภรณ์
+const receivedate = ref<Date | null>(); //วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์
+const announceDate = ref<Date | null>(); //วันที่
+const invoiceDate = ref<Date | null>(null); //วันที่จ่ายใบกำกับ
+const filterinsigniaOp2 = ref<DataOption[]>([]); //ตัวเลือกเครื่องราชอิสริยาภรณ์
+const employeeClass = ref<string>(""); //ขรก.สามัญ/ลูกจ้างประจำ
+//ประเภท ขรก.สามัญ/ลูกจ้างประจำ
 const employeeClassOps = ref<DataOption[]>([
   { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
   { id: "employee", name: "ลูกจ้างประจำ" },
 ]);
+//ประเภทรูปแบบการจ่าย
 const paymentOp = [
   { label: "จัดส่งทางไปรษณีย์", value: "จัดส่งทางไปรษณีย์" },
   { label: "มารับด้วยตัวเอง", value: "มารับด้วยตัวเอง" },
@@ -97,45 +95,13 @@ const formFilter = reactive({
   searchKeyword: "",
 });
 
-/** function  reset วันที่จ่ายใบกำกับ*/
+/**
+ * function  reset วันที่จ่ายใบกำกับ
+ */
 function clearDateInvoiceDate() {
   invoiceDate.value = null;
 }
 
-/**
- * callback function จำทำงานเมื่อ props.modal = true เปิด popup เพิ่มรายชื่อบันทึกผล
- */
-watch(props, () => {
-  if (props.modal === true) {
-    filterinsigniaOp2.value = DataStore.insigniaOp2;
-    employeeClass.value = "";
-    cardid.value = "";
-    fullName.value = "";
-    position.value = "";
-    Advertise.value = "";
-    brand.value = "";
-    receivedate.value = null;
-    issue.value = "";
-    affiliationRequest.value = "";
-    affiliationReceived.value = "";
-    announceDate.value = null;
-    volume.value = "";
-    episode.value = "";
-    duty.value = "";
-    announced.value = "";
-    invoiceDate.value = null;
-    payment.value = "";
-    if (props.personId !== undefined) {
-      if (props.action === "editData") {
-        fectDataByid(props.personId); // เมือแก้ไข เรียกข้อมูลบันทึกผล
-      }
-    }
-  } else {
-    status.value = "";
-    selectType();
-  }
-});
-
 /**
  * disbleStatus
  */
@@ -241,7 +207,9 @@ function fectDataByid(id: string) {
     });
 }
 
-/** function บักทึกผล*/
+/**
+ * function บักทึกผล
+ */
 function onSubmit() {
   dialogConfirm($q, () => {
     if (props.roundId !== undefined) {
@@ -293,17 +261,51 @@ function searchcardid() {
  * @param update function
  * @param name ชื่อ selec
  */
-const filterSelector = (val: any, update: Function, name: any) => {
+function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "insigniaOp2") {
-      brand.value = "";
+      brand.value = val ? "" : brand.value;
       filterinsigniaOp2.value = DataStore.insigniaOp2.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: DataOption) => v.name.toLowerCase().indexOf(needle) > -1
       );
     }
   });
-};
+}
+
+/**
+ * callback function จำทำงานเมื่อ props.modal = true เปิด popup เพิ่มรายชื่อบันทึกผล
+ */
+watch(props, () => {
+  if (props.modal === true) {
+    filterinsigniaOp2.value = DataStore.insigniaOp2;
+    employeeClass.value = "";
+    cardid.value = "";
+    fullName.value = "";
+    position.value = "";
+    Advertise.value = "";
+    brand.value = "";
+    receivedate.value = null;
+    issue.value = "";
+    affiliationRequest.value = "";
+    affiliationReceived.value = "";
+    announceDate.value = null;
+    volume.value = "";
+    episode.value = "";
+    duty.value = "";
+    announced.value = "";
+    invoiceDate.value = null;
+    payment.value = "";
+    if (props.personId !== undefined) {
+      if (props.action === "editData") {
+        fectDataByid(props.personId); // เมือแก้ไข เรียกข้อมูลบันทึกผล
+      }
+    }
+  } else {
+    status.value = "";
+    selectType();
+  }
+});
 </script>
 
 <template>
@@ -322,7 +324,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
             <div class="col-4">
               <q-select
                 :rules="[
-                  (val) => !!val || 'กรุณาเลือก  ขรก.สามัญ/ลูกจ้างประจำ',
+                  (val:string) => !!val || 'กรุณาเลือก  ขรก.สามัญ/ลูกจ้างประจำ',
                 ]"
                 hide-bottom-space
                 :options="employeeClassOps"
@@ -406,7 +408,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
               <q-input
                 :disable="disbleStatus || status == 'DONE'"
                 :rules="[
-                  (val) =>
+                  (val:string) =>
                     !!val ||
                     'กรุณากรอกหมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์',
                 ]"
@@ -440,9 +442,9 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 class="inputgreen"
                 style="min-width: 150px"
                 :rules="[
-                  (val) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
+                  (val:string) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
                 ]"
-                @filter="(inputValue:any,doneFn:Function) => 
+                @filter="(inputValue:string,doneFn:Function) => 
                 filterSelector(inputValue, doneFn,'insigniaOp2') "
               />
             </div>
@@ -469,7 +471,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                     dense
                     borderless
                     outlined
-                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                    :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
                     class="inputgreen"
                     hide-bottom-space
                     :model-value="
@@ -491,7 +493,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
             <div class="col-xs-12 col-sm-6">
               <q-input
                 :disable="disbleStatus || status == 'DONE'"
-                :rules="[(val) => !!val || 'กรุณากรอกทะเบียนฐานันดร']"
+                :rules="[(val:string) => !!val || 'กรุณากรอกทะเบียนฐานันดร']"
                 class="inputgreen"
                 hide-bottom-space
                 dense
@@ -507,7 +509,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 :disable="
                   disbleStatus || status == 'DONE' || status == 'PENDING'
                 "
-                :rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
+                :rules="[(val:string) => !!val || 'กรุณากรอกสังกัด']"
                 class="inputgreen"
                 hide-bottom-space
                 dense
@@ -523,7 +525,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 :disable="
                   disbleStatus || status == 'DONE' || status == 'PENDING'
                 "
-                :rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
+                :rules="[(val:string) => !!val || 'กรุณากรอกสังกัด']"
                 class="inputgreen"
                 hide-bottom-space
                 dense
@@ -561,7 +563,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                     dense
                     borderless
                     outlined
-                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                    :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
                     class="inputgreen"
                     hide-bottom-space
                     :model-value="
@@ -591,7 +593,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 borderless
                 v-model="volume"
                 :label="`เล่มที่`"
-                :rules="[(val) => !!val || 'กรุณากรอกเล่มที่']"
+                :rules="[(val:string) => !!val || 'กรุณากรอกเล่มที่']"
               />
             </div>
             <div class="col-xs-12 col-sm-4">
@@ -605,7 +607,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 borderless
                 v-model="episode"
                 :label="`ตอนที่`"
-                :rules="[(val) => !!val || 'กรุณากรอกตอนที่']"
+                :rules="[(val:string) => !!val || 'กรุณากรอกตอนที่']"
               />
             </div>
             <div class="col-xs-12 col-sm-6">
@@ -619,7 +621,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 borderless
                 v-model="duty"
                 :label="`หน้าที่`"
-                :rules="[(val) => !!val || 'กรุณากรอกหน้าที่']"
+                :rules="[(val:string) => !!val || 'กรุณากรอกหน้าที่']"
               />
             </div>
             <div class="col-xs-12 col-sm-6">
@@ -633,7 +635,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 borderless
                 v-model="announced"
                 :label="`ลำดับที่`"
-                :rules="[(val) => !!val || 'กรุณากรอกลำดับที่']"
+                :rules="[(val:string) => !!val || 'กรุณากรอกลำดับที่']"
               />
             </div>
             <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/TabDocuments.vue
similarity index 78%
rename from src/modules/07_insignia/components/3_result/fileUpload.vue
rename to src/modules/07_insignia/components/3_result/TabDocuments.vue
index dbb9465b5..78b123e78 100644
--- a/src/modules/07_insignia/components/3_result/fileUpload.vue
+++ b/src/modules/07_insignia/components/3_result/TabDocuments.vue
@@ -1,30 +1,41 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** import Type*/
 import type { QTableProps, QForm } from "quasar";
-import type { TypeData } from "@/modules/07_insignia/interface/index/Main";
+import type {
+  TypeData,
+  DataDocuments,
+} from "@/modules/07_insignia/interface/index/Main";
 
-/** import Stores */
-import { useCounterMixin } from "@/stores/mixin";
-/** useStore*/
+/** use*/
+const $q = useQuasar();
 const mixin = useCounterMixin();
 const { success, messageError, hideLoader, dialogConfirm, showLoader } = mixin;
 
-const $q = useQuasar();
-const myForm = ref<any>();
+/**
+ * props
+ */
+const props = defineProps({
+  roundId: {
+    type: String,
+  },
+});
 
-const fileUpload = ref<any>(null);
-const reason = ref<string>("");
-const documentTitle = ref<string>("");
-const filterKeyword = ref<string>("");
-const filterDoc = ref<any>(null);
+const myForm = ref<any>();
+const fileUpload = ref<any>(null); //ไฟล์เอกสาร
+const documentTitle = ref<string>(""); //ชื่อเอกสาร
+const reason = ref<string>(""); //หมายเหตุ
+const filterKeyword = ref<string>(""); //คำค้นหา
 
 /** คอลัมน์ตาราง*/
+const rows2 = ref<DataDocuments[]>([]);
 const colums2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -61,15 +72,10 @@ const visibleColumnsReference = ref<String[]>([
   "annotation",
   "file",
 ]);
-const rows2 = ref<any>([]);
 
-const props = defineProps({
-  roundId: {
-    type: String,
-  },
-});
-
-/** function ดึงข้อมูลรายการเอกสารอ้างอิง */
+/**
+ * function ดึงข้อมูลรายการเอกสารอ้างอิง
+ */
 async function getRequest() {
   showLoader();
   await http
@@ -93,46 +99,46 @@ async function getRequest() {
     });
 }
 
-/** function เช็คฟอร์มก่อนบันทึก และยืนยันการบันทึกข้อมูล */
+/**
+ * function เช็คฟอร์มก่อนบันทึก และยืนยันการบันทึกข้อมูล
+ */
 function save() {
   myForm.value.validate().then((result: boolean) => {
     if (result) {
-      dialogConfirm($q, () => putRequest());
+      dialogConfirm($q, async () => {
+        showLoader();
+        const dataAppend = new FormData();
+        dataAppend.append("Name", documentTitle.value);
+        dataAppend.append("Reason", reason.value);
+        dataAppend.append("File", fileUpload.value);
+        await http
+          .put(config.API.requestDocNote(props.roundId as string), dataAppend)
+          .then(() => {
+            success($q, "บันทึกข้อมูลสำเร็จ");
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(() => {
+            documentTitle.value = "";
+            reason.value = "";
+            fileUpload.value = null;
+
+            // reset เพื่อไม่ให้ฟอร์มแจ้งเตือ validate หลังบันทึกเสร็จแล้วล้างค่าฟิลด์ต่างๆ
+            myForm.value.reset();
+            getRequest();
+            hideLoader();
+          });
+      });
     }
   });
 }
 
-/** function  บันทึกเอกสาร */
-async function putRequest() {
-  showLoader();
-  const dataAppend = new FormData();
-  dataAppend.append("Name", documentTitle.value);
-  dataAppend.append("Reason", reason.value);
-  dataAppend.append("File", fileUpload.value);
-  await http
-    .put(config.API.requestDocNote(props.roundId as string), dataAppend)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      documentTitle.value = "";
-      reason.value = "";
-      fileUpload.value = null;
-
-      // reset เพื่อไม่ให้ฟอร์มแจ้งเตือ validate หลังบันทึกเสร็จแล้วล้างค่าฟิลด์ต่างๆ
-      myForm.value.reset();
-      getRequest();
-      hideLoader();
-    });
-}
-
-/** function  resetFilter */
+/**
+ * function  resetFilter
+ */
 function resetFilterRef() {
   filterKeyword.value = "";
-  filterDoc.value.focus();
 }
 
 const pagination = ref({
@@ -169,7 +175,7 @@ onMounted(async () => {
                   hide-bottom-space
                   lazy-rules
                   accept=".pdf"
-                  :rules="[(val) => !!val || `กรุณาเลือกไฟล์เอกสาร`]"
+                  :rules="[(val:string) => !!val || `กรุณาเลือกไฟล์เอกสาร`]"
                 >
                   <template v-slot:prepend>
                     <q-icon name="attach_file" color="primary" />
@@ -185,7 +191,7 @@ onMounted(async () => {
                   v-model="documentTitle"
                   :label="`${'ชื่อเอกสาร'}`"
                   hide-bottom-space
-                  :rules="[(val) => !!val || `กรุณากรอกชื่อเอกสาร`]"
+                  :rules="[(val:string) => !!val || `กรุณากรอกชื่อเอกสาร`]"
                 />
               </div>
               <div class="col-6 row no-wrap">
@@ -217,7 +223,6 @@ onMounted(async () => {
             standout
             dense
             v-model="filterKeyword"
-            ref="filterDoc"
             outlined
             debounce="300"
             placeholder="ค้นหา"
diff --git a/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue b/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue
index 4c0e8b021..9efca0e4c 100644
--- a/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue
+++ b/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue
@@ -1,4 +1,3 @@
-div
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
@@ -9,14 +8,13 @@ import DialogHeader from "@/components/DialogHeader.vue";
 /** impotrStores */
 import { useCounterMixin } from "@/stores/mixin";
 
+const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 
-const $q = useQuasar();
-
-const title = ref<string>("");
-const amount = ref<number>();
-
+/**
+ * props
+ */
 const props = defineProps({
   modal: Boolean,
   save: {
@@ -36,13 +34,20 @@ const props = defineProps({
   },
 });
 
-/** function closePopup*/
+const title = ref<string>(""); //เครื่องราชฯ
+const amount = ref<number>(); //จำนวน
+
+/**
+ * function closePopup
+ */
 function closeModal() {
   props.close();
 }
 
-/** function ยืนยันการบันทึก*/
-const onSubmit = () => {
+/**
+ *  function ยืนยันการบันทึก
+ */
+function onSubmit() {
   dialogConfirm($q, () => {
     if (props.actionType === "insignia") {
       props.save(
@@ -55,7 +60,7 @@ const onSubmit = () => {
       props.save(props.insigniadata.id, amount.value);
     }
   });
-};
+}
 
 watch(props, () => {
   if (props.modal === true) {
@@ -66,6 +71,7 @@ watch(props, () => {
   }
 });
 </script>
+
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="width: 800px">
@@ -104,7 +110,7 @@ watch(props, () => {
                 lazy-rules
                 type="number"
                 label="จำนวน"
-                :rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวน'}`]"
               />
             </div></div
         ></q-card-section>
diff --git a/src/modules/07_insignia/components/4_Allocate/DialogForm.vue b/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
index bfee64375..9020b9abb 100644
--- a/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
+++ b/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
@@ -1,27 +1,22 @@
-div
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
+
 import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** impotrComponents */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** impotrStores */
-import { useCounterMixin } from "@/stores/mixin";
-const mixin = useCounterMixin();
-const { dialogConfirm, dialogMessageNotify } = mixin;
-
 const $q = useQuasar();
 const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
 const myForm = ref<QForm | null>(null); //form data input
 
-const routeName = router.currentRoute.value.name;
-const amount = ref<number | null>();
-const Org = ref<string | null>("");
-const grandCross = ref<string | null>("");
-const filterInsigniaOp = ref<any>();
-
+/**
+ * props
+ */
 const props = defineProps({
   modal: Boolean,
   save: {
@@ -38,7 +33,14 @@ const props = defineProps({
   },
 });
 
-/** function closePopup*/
+const routeName = router.currentRoute.value.name;
+const amount = ref<number | null>(); //จำนวน
+const grandCross = ref<string | null>(""); //เครื่องราชฯ
+const filterInsigniaOp = ref<any[]>([]); //รายการเครื่องราชฯ
+
+/**
+ * function closePopup
+ */
 function closeModal() {
   props.close();
 }
@@ -49,14 +51,16 @@ function closeModal() {
  * @param update function
  * @param name ชื่อ Selec
  */
-function filterSelector(val: any, update: Function, name: any) {
+function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "filterInsigniaOp") {
       grandCross.value = null;
+
       const newList = props.insigniaList.filter(
         (e: any) => e.name !== "ทั้งหมด"
       );
+
       filterInsigniaOp.value = newList.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
@@ -65,22 +69,14 @@ function filterSelector(val: any, update: Function, name: any) {
 }
 
 /** function ยืนยันการบันทึก*/
-const onSubmit = () => {
-  // if (myForm.value !== null) {
-  //   myForm.value.validate().then(async (success) => {
-  //     if (success) {
+function onSubmit() {
   dialogConfirm($q, () => props.save(grandCross.value, amount.value));
-  //     } else {
-  //       dialogMessageNotify($q, "กรุณาข้อมูลให้ครบ");
-  //     }
-  //   });
-  // }
-};
+}
 
 watch(props, () => {
   if (props.modal === false) {
     grandCross.value = "";
-    Org.value = "";
+
     amount.value = null;
   }
 });
@@ -122,14 +118,14 @@ watch(
                 map-options
                 outlined
                 options-cover
-                :rules="[(val) => !!val || `${'กรุณาเลือกเครื่องราชฯ'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกเครื่องราชฯ'}`]"
                 v-model="grandCross"
                 :label="
                   routeName == 'insigniaAllocate'
                     ? `เครื่องราชฯ`
                     : `เลือกหน่วยงาน`
                 "
-                @filter="(inputValue:any,doneFn:Function) => 
+                @filter="(inputValue:string,doneFn:Function) => 
                   filterSelector(inputValue, doneFn,'filterInsigniaOp') "
               />
             </div>
@@ -143,7 +139,7 @@ watch(
                 lazy-rules
                 type="number"
                 label="จำนวน"
-                :rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวน'}`]"
               />
             </div>
           </div>
diff --git a/src/modules/07_insignia/components/4_Allocate/OrgAdd.vue b/src/modules/07_insignia/components/4_Allocate/OrgAdd.vue
deleted file mode 100644
index db5ff714e..000000000
--- a/src/modules/07_insignia/components/4_Allocate/OrgAdd.vue
+++ /dev/null
@@ -1,551 +0,0 @@
-<script setup lang="ts">
-import { ref, useAttrs } from "vue";
-import type { QTableProps } from "quasar";
-import { useQuasar } from "quasar";
-
-/** impotrComponents */
-import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
-import DialogHeader from "@/modules/07_insignia/components/DialogHeader.vue";
-import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
-
-/** impotrStores */
-import { useCounterMixin } from "@/stores/mixin";
-const mixin = useCounterMixin();
-const { dialogMessage } = mixin;
-
-const $q = useQuasar(); //ใช้ noti quasar
-const attrs = ref<any>(useAttrs());
-
-const modal = ref<boolean>(false);
-const saveWriteNote = ref<any[]>([]);
-const addNote = ref<boolean>(false);
-const name = ref<string>("");
-
-const clickNote = () => {
-  addNote.value = true;
-};
-
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const stat = ref<any>({
-  total: 3,
-  sendInsig: 2,
-  remainInsig: 1,
-});
-
-/** ข้อมูล Table1*/
-const visibleColumns = ref<string[]>([
-  "no",
-  "citizenId",
-  "name",
-  "organization",
-  "positionType",
-  "positionAdmin",
-  "positionLine",
-  "positionNum",
-  "status",
-]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ - นามสกุล",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionType",
-    align: "left",
-    label: "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionAdmin",
-    align: "left",
-    label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
-    field: "positionAdmin",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLine",
-    align: "left",
-    label: "ตำแหน่งในสายงาน/ระดับ",
-    sortable: true,
-    field: "positionLine",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionNum",
-    align: "left",
-    label: "ตำแหน่ง เลขที่",
-    sortable: true,
-    field: "positionNum",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const rows = ref<any[]>([]);
-
-/** ข้อมูล Table2*/
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "name",
-  "position",
-  "level",
-  "institution",
-]);
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "level",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "level",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "institution",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "institution",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-const rows2 = ref<any[]>([]);
-
-// const clickDelete = (id: string) => {
-//   $q.dialog({
-//     title: "ยืนยันการลบข้อมูล",
-//     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-//     cancel: {
-//       flat: true,
-//       color: "negative",
-//     },
-//     persistent: true,
-//   })
-//     .onOk(async () => {})
-//     .onCancel(() => {})
-//     .onDismiss(() => {});
-// };
-
-/** function closePopup*/
-function clickClose() {
-  modal.value = false;
-}
-
-/** function openPopupAdd*/
-function clickAdd() {
-  modal.value = true;
-}
-
-/** function บันทึกข้อมูล note*/
-async function saveNote() {
-  if (saveWriteNote.value.length == 0) {
-    dialogMessage(
-      $q,
-      "ไม่สามารถบันทึกข้อมูลได้",
-      "กรุณาเพิ่มหมายเหตุ",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-    return;
-  }
-}
-
-/** ค้นหาในตาราง*/
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
-const filterKeyword2 = ref<string>("");
-const filterRef2 = ref<any>(null);
-const resetFilter2 = () => {
-  filterKeyword2.value = "";
-  filterRef2.value.focus();
-};
-</script>
-
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายชื่อที่จัดสรรเครื่องราชอิสริยาภรณ์ {{ name }}
-  </div>
-  <q-card bordered class="q-py-sm row col-12">
-    <div class="col-12 row bg-white">
-      <div class="fit q-px-md q-py-sm">
-        <div class="row col-12 q-col-gutter-md fit">
-          <cardTop
-            :amount="stat.total"
-            label="จำนวนเครื่องราช ฯ ทั้งหมด"
-            color="#016987"
-          />
-          <cardTop
-            :amount="stat.sendInsig"
-            label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว"
-            color="#02A998"
-          />
-          <cardTop
-            :amount="stat.remainInsig"
-            label="จำนวนเครื่องราช ฯ คงเหลือ"
-            color="#2EA0FF"
-          />
-        </div>
-      </div>
-    </div>
-  </q-card>
-  <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">
-        <div>
-          <q-btn
-            @click="clickAdd()"
-            size="12px"
-            flat
-            round
-            color="add"
-            icon="mdi-plus"
-          >
-            <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">
-        <d-table
-          ref="table"
-          :columns="columns"
-          :rows="rows"
-          :filter="filterKeyword"
-          row-key="id"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          v-bind="attrs"
-          :visible-columns="visibleColumns"
-          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-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="citizenId" :props="props">
-                {{ props.row.citizenId }}
-              </q-td>
-              <q-td key="name" :props="props">
-                {{ props.row.name }}
-              </q-td>
-              <q-td key="organization" :props="props">
-                {{ props.row.organization }}
-              </q-td>
-              <q-td key="positionType" :props="props">
-                {{ props.row.positionType }}
-              </q-td>
-              <q-td key="positionAdmin" :props="props">
-                {{ props.row.positionAdmin }}
-              </q-td>
-              <q-td key="positionLine" :props="props">
-                {{ props.row.positionLine }}
-              </q-td>
-              <q-td key="positionNum" :props="props">
-                {{ props.row.positionNum }}
-              </q-td>
-              <q-td key="status" :props="props">
-                {{ props.row.status }}
-              </q-td>
-              <q-td auto-width>
-                <q-btn
-                  dense
-                  size="12px"
-                  flat
-                  round
-                  color="blue"
-                  icon="mdi-alert-circle-outline"
-                >
-                  <q-tooltip>หมายเหตุ</q-tooltip>
-                </q-btn>
-              </q-td>
-              <q-td>
-                <q-btn label="คืนแล้ว" @click="clickNote()" color="blue" />
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </div>
-    </div>
-  </q-card>
-
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
-      <q-form ref="myForm">
-        <DialogHeader tittle="เพิ่มรายชื่อ " :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-md q-col-gutter-sm">
-          <q-input
-            class="col-12"
-            standout
-            dense
-            v-model="filterKeyword2"
-            ref="filterRef2"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword2 !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter2"
-              />
-            </template>
-          </q-input>
-          <div class="col-12">
-            <d-table
-              ref="table2"
-              :columns="columns2"
-              :rows="rows2"
-              :filter="filterKeyword2"
-              row-key="Order"
-              flat
-              bordered
-              :paging="true"
-              dense
-              class="custom-header-table"
-              v-bind="attrs"
-              :visible-columns="visibleColumns2"
-              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">
-                  <q-td
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
-                    <div v-if="col.name == 'no'">
-                      {{ props.rowIndex + 1 }}
-                    </div>
-                    <div v-else>
-                      {{ col.value }}
-                    </div>
-                  </q-td>
-                  <q-td auto-width>
-                    <q-btn
-                      dense
-                      class="q-px-md"
-                      outline
-                      color="primary"
-                      v-close-popup
-                      label="เพิ่ม"
-                    >
-                    </q-btn>
-                  </q-td>
-                </q-tr>
-              </template>
-            </d-table>
-          </div>
-        </q-card-section>
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <DialogPopupReason
-    v-model:modal="addNote"
-    title="คืนเครื่องราชฯ"
-    label="กรอกเหตุผลที่ต้องการคืนเครื่องราชฯ"
-    :savaForm="saveNote"
-  />
-</template>
-
-<style lang="scss" scope>
-.filter-card {
-  background-color: #f1f1f1b0;
-}
-
-.toggle-expired-account {
-  font-size: 12px;
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 150%;
-  color: #35373c;
-}
-
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
diff --git a/src/modules/07_insignia/components/4_Allocate/OrgList.vue b/src/modules/07_insignia/components/4_Allocate/OrgAllocatePageList.vue
similarity index 87%
rename from src/modules/07_insignia/components/4_Allocate/OrgList.vue
rename to src/modules/07_insignia/components/4_Allocate/OrgAllocatePageList.vue
index 7db9c94c9..8406bd8fd 100644
--- a/src/modules/07_insignia/components/4_Allocate/OrgList.vue
+++ b/src/modules/07_insignia/components/4_Allocate/OrgAllocatePageList.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import { onMounted, ref, useAttrs } from "vue";
 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
-import router from "@/router";
+
+import { useRoute, useRouter } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { checkPermission } from "@/utils/permissions";
 
 /** impotrType */
 import type { QTableProps } from "quasar";
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
+import type { ResponseAllocate } from "@/modules/07_insignia/interface/response/Main";
+import type { DataStructureTree } from "@/interface/main";
 
 /** impotrComponents */
 import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
@@ -16,8 +21,7 @@ import DialogForm from "@/modules/07_insignia/components/4_Allocate/DialogForm.v
 import DialogEdit from "@/modules/07_insignia/components/4_Allocate/DialogEdit.vue";
 
 /** impotrStores */
-import { useCounterMixin } from "@/stores/mixin";
-import { useAllocateDataStore } from "@/modules/07_insignia/storeAllocate";
+const router = useRouter();
 const DataStore = useAllocateDataStore();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
@@ -27,13 +31,7 @@ const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
 
 /** ข้อมูล Table*/
-const visibleColumns = ref<string[]>([
-  "no",
-  "organization",
-  "total",
-  "allocate",
-  "remain",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const rows = ref<ResponseAllocate[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -81,27 +79,35 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<any[]>([]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "organization",
+  "total",
+  "allocate",
+  "remain",
+]);
 
 const name = ref<string>("");
 const id = ref<string>(route.params.id.toString());
 const modal = ref<boolean>(false);
-const orgList = ref<any>([]);
+const orgList = ref<OptionData[]>([]); //รายการหน่วยงาน
 const pagination = ref({
   sortBy: "desc",
   descending: false,
   page: 1,
   rowsPerPage: 10,
 });
-const stat = ref<any>({
-  total: 0,
-  allocate: 0,
-  remain: 0,
+
+const stat = ref({
+  total: 0, //จำนวนเครื่องราช ฯ ทั้งหมด
+  allocate: 0, //จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว
+  remain: 0, //จำนวนเครื่องราช ฯ คงเหลือ
 });
 
-/** funcion เรียกข้อมูล stat*/
+/**
+ * funcion เรียกข้อมูล stat
+ */
 async function fecthDashboard() {
-  // showLoader();
   await http
     .get(config.API.insigniaManageOrgDashboard(id.value))
     .then((res) => {
@@ -114,16 +120,17 @@ async function fecthDashboard() {
     .catch((err) => {
       messageError($q, err);
     });
-  // .finally(() => hideLoader());
 }
 
-/** funcion เรียกข้อมูลรายชื่อ หน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ ตริตาภรณ์มงกุฎไทย ()*/
+/**
+ * funcion เรียกข้อมูลรายชื่อ หน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ ตริตาภรณ์มงกุฎไทย ()
+ */
 async function fecthListData() {
   showLoader();
   await http
     .get(config.API.insigniaManageOrg(id.value))
     .then((res) => {
-      rows.value = res.data.result.map((e: any) => ({
+      rows.value = res.data.result.map((e: ResponseAllocate) => ({
         id: e.id,
         organization: e.organizationOrganization,
         total: e.total,
@@ -139,7 +146,9 @@ async function fecthListData() {
     });
 }
 
-/** funcion เรียกข้อมูลหน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ */
+/**
+ * funcion เรียกข้อมูลหน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์
+ */
 async function fetchOrgList() {
   http
     .get(config.API.activeOrganization)
@@ -149,7 +158,7 @@ async function fetchOrgList() {
       http
         .get(config.API.orgByIdSystem(data.activeId, route.meta.Key as string))
         .then(async (res) => {
-          const data = await res.data.result.map((item: any) => ({
+          const data = await res.data.result.map((item: DataStructureTree) => ({
             id: item.orgTreeId,
             name: item.orgName,
           }));
@@ -164,12 +173,16 @@ async function fetchOrgList() {
     });
 }
 
-/** funcion ย้อนกลับหน้าจัดสรรเครื่องราชอิสริยาภรณ์*/
+/**
+ * funcion ย้อนกลับหน้าจัดสรรเครื่องราชอิสริยาภรณ์
+ */
 function backHistory() {
   router.push(`/insignia/allocate`);
 }
 
-/** funcion closePopup */
+/**
+ * funcion closePopup
+ */
 function close() {
   modal.value = false;
   modalEdit.value = false;
@@ -225,13 +238,13 @@ async function saveEdit(organizationId: string, amount: number) {
     });
 }
 
-const rowData = ref<any>([]);
-const modalEdit = ref<boolean>(false);
+const rowData = ref<ResponseAllocate>(); //ข้อมูลที่ค้องการแก้ไข
+const modalEdit = ref<boolean>(false); // popup แก้ไข
 /**
  * function openPopup แก้ไข
  * @param data ข้อมูลที่จะแก้ไข
  */
-function clickEditrow(data: any) {
+function clickEditrow(data: ResponseAllocate) {
   rowData.value = data;
   modalEdit.value = true;
 }
@@ -259,9 +272,9 @@ async function clickDelete(insigniaId: string) {
   });
 }
 
-const clickAdd = () => {
+function clickAdd() {
   modal.value = true;
-};
+}
 
 /** ค้นหาในตาราง*/
 const filterKeyword = ref<string>("");
diff --git a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
index 406890c51..9187cdbf7 100644
--- a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
+++ b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -10,15 +13,7 @@ import type { DataOption } from "@/modules/04_registry/components/profileType";
 /** impotrComponents */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** impotrStores */
-import { useCounterMixin } from "@/stores/mixin";
-import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
-import { useRoute } from "vue-router";
-
 const $q = useQuasar();
-const myForm = ref<QForm>();
-const route = useRoute();
-
 const DataStore = useBrrowDataStore();
 const mixin = useCounterMixin();
 const {
@@ -31,22 +26,9 @@ const {
   notifyError,
 } = mixin;
 
-const brand = ref<string>("");
-const roundNo = ref<string | undefined>("");
-const cardid = ref<string>("");
-const OrganazationId = ref<string>("");
-const fullName = ref<string>("");
-const receivedate = ref<Date | null>();
-const returndate = ref<Date | null>();
-const reason = ref<string>("");
-const listPerson = ref<any>([]);
-const OrgList = ref<DataOption[]>([]);
-const filterOrgList = ref<DataOption[]>([]);
-const insigniaNoteProfileId = ref<string>("");
-const filterSelectRound = ref<any>();
-const selectRound = ref<any>();
-const type = ref<any>(DataStore.type);
-
+/**
+ * props
+ */
 const props = defineProps({
   modal: Boolean,
   save: {
@@ -85,7 +67,25 @@ const props = defineProps({
   },
 });
 
-/** function เคลียร์ข้อมูลในฟอร์ม*/
+const brand = ref<string>(""); //เครื่องราชฯ
+const roundNo = ref<string | undefined>(""); //รอบการขอเครื่องราชฯ
+const cardid = ref<string>(""); //เลขประจำตัวประชาชน
+const OrganazationId = ref<string>(""); //
+const receivedate = ref<Date | null>(); //วันที่ยืม
+const returndate = ref<Date | null>(); //วันที่คืน
+const fullName = ref<string>(""); //ชื่อ-นามสกุล
+const reason = ref<string>("");
+const listPerson = ref<any>([]);
+const OrgList = ref<DataOption[]>([]);
+const filterOrgList = ref<DataOption[]>([]);
+const insigniaNoteProfileId = ref<string>("");
+const filterSelectRound = ref<any>();
+const selectRound = ref<any>();
+const type = ref<any>(DataStore.type);
+
+/**
+ * function เคลียร์ข้อมูลในฟอร์ม
+ */
 function clearData() {
   receivedate.value = null;
   returndate.value = null;
@@ -97,7 +97,9 @@ function clearData() {
   reason.value = "";
 }
 
-/** function เรียกข้อมูลรายการเครื่องราช */
+/**
+ * function เรียกข้อมูลรายการเครื่องราช
+ */
 async function fecthlistInsignia() {
   if (roundNo.value !== "" && roundNo.value !== null) {
     showLoader();
@@ -125,48 +127,9 @@ async function fecthlistInsignia() {
   }
 }
 
-/** funcion เรียกข้อมูลหน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ */
-async function fetchOrgList() {
-  http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-
-      http
-        .get(config.API.orgByIdSystem(data.activeId, route.meta.Key as string))
-        .then(async (res) => {
-          const data = await res.data.result.map((item: any) => ({
-            id: item.orgTreeId,
-            name: item.orgName,
-          }));
-          OrgList.value = data;
-          filterOrgList.value = data;
-        })
-        .catch((err) => {
-          messageError($q, err);
-        });
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
-// ดึงข้อมูลการยืม-คืนมาแสดงเก็บไว้ก่อนเผื่อต้องเอาข้อมูลมาแสดงเพิ่ม
-// const fetchData = async () => {
-//   showLoader();
-//   await http
-//     .get(config.API.insigniaManageBorrowById(props.profileId))
-//     .catch((err) => {
-//       messageError($q, err);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
-// บันทึกข้อมูลการยืม-คืน
-
-/** function บันทึกการเพิ่มข้อมูล*/
+/**
+ * function บันทึกการเพิ่มข้อมูล
+ */
 async function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -205,7 +168,9 @@ async function onSubmit() {
   });
 }
 
-/** function ค้นหาคนจากเลขประจำตัวประชาชน*/
+/**
+ * function ค้นหาคนจากเลขประจำตัวประชาชน
+ */
 async function searchcardid() {
   if (cardid.value.length === 13) {
     showLoader();
@@ -236,13 +201,17 @@ async function searchcardid() {
   }
 }
 
-/** function closePopup*/
+/**
+ * function closePopup
+ */
 function closeDialog() {
   clearData();
   props.close();
 }
 
-/** function reset วันที่คืน*/
+/**
+ * function reset วันที่คืน
+ */
 function clearReturnDate() {
   returndate.value = null;
 }
@@ -253,17 +222,17 @@ function clearReturnDate() {
  * @param update function
  * @param name ชื่อ Selec
  */
-function filterSelector(val: any, update: Function, name: any) {
+function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "filterOrgList") {
-      OrganazationId.value = "";
+      OrganazationId.value = val ? "" : OrganazationId.value;
       filterOrgList.value = OrgList.value.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
     }
     if (name === "filterSelectRoundOption") {
-      roundNo.value = "";
+      roundNo.value = val ? "" : roundNo.value;
       filterSelectRound.value = selectRound.value.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
@@ -271,29 +240,32 @@ function filterSelector(val: any, update: Function, name: any) {
   });
 }
 
-/** function setValue*/
-const setValue = () => {
+/**
+ * function setValue
+ */
+function setValue() {
   filterSelectRound.value = props.filterSelectRoundOption;
   selectRound.value = props.selectRoundOption;
-};
+}
 
-/** Hook*/
-onMounted(() => {
-  setValue();
-});
-
-/** function callback  เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล */
+/**
+ * function callback  เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล
+ */
 watch(props, () => {
   if (props.modal == true && props.roundId != "all") {
     roundNo.value = props.roundId;
     if (props.action === "editData") {
-      // fetchOrgList();
     } else {
       fecthlistInsignia();
       setValue();
     }
   }
 });
+
+/** Hook*/
+onMounted(() => {
+  setValue();
+});
 </script>
 
 <template>
@@ -333,9 +305,9 @@ watch(props, () => {
                   :readonly="false"
                   :borderless="false"
                   style="min-width: 150px"
-                  :rules="[(val) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
+                  :rules="[(val:string) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
                   @update:model-value="fecthlistInsignia()"
-                  @filter="(inputValue:any,
+                  @filter="(inputValue:string,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundOption'
                     ) "
                 />
@@ -376,7 +348,7 @@ watch(props, () => {
                   v-model="fullName"
                   :label="`${'ชื่อ-นามสกุล'}`"
                   :rules="[
-                    (val) =>
+                    (val:string) =>
                       !!val ||
                       'ชื่อ-นามสกุลต้องไม่ว่าง กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง',
                   ]"
@@ -388,7 +360,7 @@ watch(props, () => {
               </div>
               <div class="col-xs-12 col-sm-6">
                 <q-input
-                  :rules="[(val) => !!val || 'กรุณาเลือกเครื่องราชฯ']"
+                  :rules="[(val:string) => !!val || 'กรุณาเลือกเครื่องราชฯ']"
                   v-model="brand"
                   disable
                   dense
@@ -420,7 +392,7 @@ watch(props, () => {
                       dense
                       borderless
                       outlined
-                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                      :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
                       hide-bottom-space
                       :model-value="
                         receivedate != null ? date2Thai(receivedate) : undefined
@@ -468,7 +440,7 @@ watch(props, () => {
                       dense
                       borderless
                       outlined
-                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
+                      :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่คืน']"
                       hide-bottom-space
                       :model-value="
                         returndate != null ? date2Thai(returndate) : undefined
@@ -491,28 +463,6 @@ watch(props, () => {
                 </datepicker>
               </div>
 
-              <!-- <div class="col-xs-12 col-sm-6">
-                <q-select
-                  hide-bottom-space
-                  :options="filterOrgList"
-                  dense
-                  lazy-rules
-                  borderless
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  map-options
-                  outlined
-                  use-input
-                  v-model="OrganazationId"
-                  :label="`เลือกหน่วยงานที่ส่งคืน`"
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
-                  @filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
-                    ) "
-                />
-              </div> -->
-
               <div class="col-12">
                 <q-input
                   class="inputgreen"
diff --git a/src/modules/07_insignia/components/DialogHeader.vue b/src/modules/07_insignia/components/DialogHeader.vue
deleted file mode 100644
index 8aa03351d..000000000
--- a/src/modules/07_insignia/components/DialogHeader.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <q-toolbar>
-    <q-toolbar-title class="text-subtitle2 text-bold">{{
-      tittle
-    }}</q-toolbar-title>
-    <q-btn
-      icon="close"
-      unelevated
-      round
-      dense
-      @click="close"
-      style="color: #ff8080; background-color: #ffdede"
-    />
-  </q-toolbar>
-</template>
-<script setup lang="ts">
-const props = defineProps({
-  tittle: String,
-  close: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const close = async () => {
-  props.close();
-};
-</script>
diff --git a/src/modules/07_insignia/components/report/Report_02.vue b/src/modules/07_insignia/components/report/ReportDetail.vue
similarity index 83%
rename from src/modules/07_insignia/components/report/Report_02.vue
rename to src/modules/07_insignia/components/report/ReportDetail.vue
index 959cb616d..64a6f997c 100644
--- a/src/modules/07_insignia/components/report/Report_02.vue
+++ b/src/modules/07_insignia/components/report/ReportDetail.vue
@@ -5,6 +5,9 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
+import type { ResponsePeriod } from "@/modules/07_insignia/interface/response/Main";
+
 import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 
 import http from "@/plugins/http";
@@ -31,37 +34,45 @@ interface OptionReport {
   title: string;
 }
 
-onMounted(async () => {
-  await fecthlistRound();
-  let report = optionReport.find((e: OptionReport) => e.id == typeReport);
-  report && (titleReport.value = report.title);
-});
-
 const splitterModel = ref(14);
 const selectList = ref<any>();
-const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
-const filterOtion = ref<any>([]);
+const optionsList = ref<OptionData[]>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
+const filterOtion = ref<OptionData[]>([]);
 
-const nextPage = () => {
+/**
+ * ฟังก์ชันไปหน้าถัดไป
+ */
+function nextPage() {
   if (page.value < numOfPages.value) {
     page.value++;
   }
-};
-const backPage = () => {
+}
+
+/**
+ * ฟังก์ชันย้อนกลับ
+ */
+function backPage() {
   if (page.value !== 1) {
     page.value--;
   }
-};
+}
 
-const backHistory = () => {
+/**
+ * ฟังก์ชัน Redirect ไปหน้า รายงานเครื่องราชอิสริยาภรณ์
+ */
+function backHistory() {
   window.history.back();
-};
+}
 
-const fecthlistRound = async () => {
+/**
+ * ฟังก์ชันคึงข้อมูลรอบการเสนอขอ
+ */
+async function fecthlistRound() {
+  showLoader();
   await http
     .get(config.API.listRoundInsignia())
     .then((res: any) => {
-      optionsList.value = res.data.result.map((e: any) => ({
+      optionsList.value = res.data.result.map((e: ResponsePeriod) => ({
         id: e.period_id,
         year: e.period_year,
         name: e.period_name,
@@ -70,14 +81,24 @@ const fecthlistRound = async () => {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
-};
+}
 
-const updateSelect = () => {
+/**
+ * ฟังก์ชันเลือกรอบการเสนอขอ
+ */
+function updateSelect() {
   conditionDocument("show");
-};
+}
 
-const conditionDocument = (type: string) => {
+/**
+ * ฟังก์ชันโหลไฟล์รายงาน
+ * @param type นามสกุลไฟล์ที่ต้องการ
+ */
+function conditionDocument(type: string) {
   myForm.value?.validate().then(async (success: boolean) => {
     if (success) {
       if (type == "show") {
@@ -87,18 +108,26 @@ const conditionDocument = (type: string) => {
       }
     }
   });
-};
+}
 
-const showDocument = (url: any) => {
+/**
+ * ฟังก์แสดงรายงาน
+ * @param url
+ */
+function showDocument(url: any) {
   const pdfData = usePDF(url);
-
   setTimeout(() => {
     pdfSrc.value = pdfData.pdf.value;
     numOfPages.value = pdfData.pages.value;
   }, 1000);
-};
+}
 
-const downloadFile = (response: any, filename: string) => {
+/**
+ * ฟังก์ชันโหลดไฟล์
+ * @param response ช้อมูลที่ต้องการ
+ * @param filename ชื่อไฟล์
+ */
+function downloadFile(response: any, filename: string) {
   const link = document.createElement("a");
   var fileName = filename;
   link.href = window.URL.createObjectURL(new Blob([response.data]));
@@ -106,12 +135,14 @@ const downloadFile = (response: any, filename: string) => {
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
-};
+}
 
-const downloadReport = async (
-  type: string = "pdf",
-  download: boolean = true
-) => {
+/**
+ * ฟังก์ชันโหลดไฟล์
+ * @param type  ประเภทไฟล์
+ * @param download
+ */
+async function downloadReport(type: string = "pdf", download: boolean = true) {
   showLoader();
   await http
     .get(config.API.reportInsignia(typeReport, type, selectList.value.id), {
@@ -134,17 +165,30 @@ const downloadReport = async (
     .finally(() => {
       hideLoader();
     });
-};
-const filterSelector = (val: any, update: Function, name: any) => {
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ * @param name ชื่อ Selec
+ */
+function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "selectList") {
       filterOtion.value = optionsList.value.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     }
   });
-};
+}
+
+onMounted(async () => {
+  await fecthlistRound();
+  let report = optionReport.find((e: OptionReport) => e.id == typeReport);
+  report && (titleReport.value = report.title);
+});
 </script>
 
 <template>
@@ -181,9 +225,9 @@ const filterSelector = (val: any, update: Function, name: any) => {
               label="เลือกรอบ"
               option-value="id"
               option-label="name"
-              :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
+              :rules="[(val:string) => !!val || 'กรุณาเลือกรอบ']"
               @update:model-value="updateSelect"
-              @filter="(inputValue:any,doneFn:Function) => 
+              @filter="(inputValue:string,doneFn:Function) => 
                 filterSelector(inputValue, doneFn,'selectList') "
             >
               <template v-slot:no-option>
diff --git a/src/modules/07_insignia/components/report/Report_01.vue b/src/modules/07_insignia/components/report/Report_01.vue
deleted file mode 100644
index a6167936e..000000000
--- a/src/modules/07_insignia/components/report/Report_01.vue
+++ /dev/null
@@ -1,423 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { QForm } from "quasar";
-
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
-const $q = useQuasar();
-
-const myForm = ref<QForm>();
-const pdfSrc = ref<any>();
-const numOfPages = ref<number>(0);
-const page = ref<number>(1);
-const dialog = ref<boolean>(false);
-onMounted(async () => {
-  await fecthlistRound();
-});
-
-const splitterModel = ref(14);
-const fileId = ref<string>("");
-const selectReport = ref<any>({ id: 39, name: "รายงานขร.1" });
-const optionsReport = ref<any>([
-  { id: 39, name: "รายงานขร.1" },
-  { id: 40, name: "รายงานขร.2" },
-  { id: 41, name: "รายงานขร.3" },
-  { id: 42, name: "รายงานขร.4" },
-]);
-const selectList = ref<any>();
-const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
-
-const nextPage = () => {
-  if (page.value < numOfPages.value) {
-    page.value++;
-  }
-};
-const backPage = () => {
-  if (page.value !== 1) {
-    page.value--;
-  }
-};
-
-const backHistory = () => {
-  window.history.back();
-};
-
-const fecthlistRound = async () => {
-  await http
-    .get(config.API.listRoundInsignia())
-    .then((res: any) => {
-      optionsList.value = res.data.result.map((e: any) => ({
-        id: e.period_id,
-        year: e.period_year,
-        name: e.period_name,
-      }));
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-};
-
-const updateSelect = () => {
-  conditionDocument("show");
-};
-
-const conditionDocument = (type: string) => {
-  myForm.value?.validate().then(async (success: boolean) => {
-    if (success) {
-      if (type == "show") {
-        await downloadReport("pdf", false);
-      } else {
-        await downloadReport(type, true);
-      }
-    }
-  });
-};
-
-const showDocument = (url: any) => {
-  const pdfData = usePDF(url);
-
-  setTimeout(() => {
-    pdfSrc.value = pdfData.pdf.value;
-    numOfPages.value = pdfData.pages.value;
-  }, 1000);
-};
-
-const downloadFile = (response: any, filename: string) => {
-  const link = document.createElement("a");
-  var fileName = filename;
-  link.href = window.URL.createObjectURL(new Blob([response.data]));
-  link.setAttribute("download", fileName);
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-};
-
-const downloadReport = async (
-  type: string = "pdf",
-  download: boolean = true
-) => {
-  showLoader();
-  await http
-    .get(
-      config.API.reportInsignia(
-        selectReport.value.id.toString(),
-        type,
-        selectList.value.id
-      ),
-      {
-        responseType: "blob",
-      }
-    )
-    .then(async (res) => {
-      if (download) {
-        downloadFile(
-          res,
-          `${selectReport.value.name} ${selectList.value.name}.${type}`
-        );
-      } else {
-        const url = URL.createObjectURL(new Blob([res.data]));
-        showDocument(url);
-      }
-    })
-    .catch(async (e) => {
-      messageError($q, JSON.parse(await e.response.data.text()));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-</script>
-
-<template>
-  <div class="toptitle">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="backHistory"
-    />
-    รายงาน ขร.1 - ขร.4
-  </div>
-  <div>
-    <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="q-pa-md q-gutter-y-sm">
-        <q-toolbar style="padding: 0">
-          <q-form ref="myForm" class="row items-center">
-            <q-select
-              use-input
-              fill-input
-              hide-selected
-              class="q-mr-sm"
-              dense
-              outlined
-              v-model="selectReport"
-              :options="optionsReport"
-              :label="optionsReport.name"
-              option-value="id"
-              option-label="name"
-              style="width: 150px"
-              @update:model-value="updateSelect"
-            />
-            <q-select
-              class="q-pa-none"
-              use-input
-              fill-input
-              hide-selected
-              dense
-              outlined
-              v-model="selectList"
-              :options="optionsList"
-              label="เลือกรอบ"
-              option-value="id"
-              option-label="name"
-              :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
-              @update:model-value="updateSelect"
-            />
-          </q-form>
-          <!-- style="width: 200px" -->
-          <q-space />
-          <div class="q-pa-ms q-gutter-sm" style="padding: 0">
-            <q-btn outline color="primary" icon="download" label="ดาวน์โหลด">
-              <q-menu>
-                <q-list style="min-width: 150px">
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="conditionDocument('pdf')"
-                  >
-                    <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="conditionDocument('docx')"
-                  >
-                    <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-item
-                    clickable
-                    v-close-popup
-                    @click="conditionDocument('xlsx')"
-                  >
-                    <q-item-section avatar
-                      ><q-icon color="green" name="mdi-file-excel"
-                    /></q-item-section>
-                    <q-item-section>ไฟล์ .xlsx</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-            <q-btn
-              unelevated
-              icon="mdi-refresh"
-              color="primary"
-              @click="conditionDocument('show')"
-            />
-            <q-btn
-              unelevated
-              color="blue"
-              icon="mdi-fullscreen"
-              @click="dialog = true"
-            />
-          </div>
-        </q-toolbar>
-        <q-splitter
-          v-model="splitterModel"
-          horizontal
-          style="
-            height: 70vh;
-            border: 1px solid rgb(210, 210, 210);
-            border-radius: 5px;
-          "
-          before-class="overflow-hidden disable"
-          separator-class="bg-white disabled"
-        >
-          <template v-slot:before>
-            <div class="q-px-sm">
-              <div class="row items-start items-center">
-                <div class="col">
-                  <q-btn
-                    padding="xs"
-                    icon="mdi-chevron-left"
-                    color="grey-2"
-                    text-color="grey-5"
-                    size="md"
-                    class="my-auto"
-                    @click="backPage"
-                    :disable="page == 1"
-                  />
-                </div>
-                <div class="col-12 col-md-auto">
-                  <div class="q-pa-md flex">
-                    หน้าที่ {{ page }} จาก {{ numOfPages }}
-                  </div>
-                </div>
-                <div class="col text-right">
-                  <q-btn
-                    padding="xs"
-                    icon="mdi-chevron-right"
-                    color="grey-2"
-                    text-color="grey-5"
-                    size="md"
-                    @click="nextPage"
-                    :disable="page === numOfPages"
-                  />
-                </div>
-              </div>
-            </div>
-          </template>
-          <template v-slot:after>
-            <div class="q-pa-md">
-              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-            </div>
-          </template>
-          <template v-slot:default>
-            <div class="q-pa-md">
-              <div class="row items-start items-center">
-                <div class="col">
-                  <q-btn
-                    padding="xs"
-                    icon="mdi-chevron-left"
-                    color="grey-2"
-                    text-color="grey-5"
-                    size="md"
-                    class="my-auto"
-                    @click="backPage"
-                    :disable="page == 1"
-                  />
-                </div>
-                <div class="col-12 col-md-auto">
-                  <div class="q-pa-md flex">
-                    หน้าที่ {{ page }} จาก {{ numOfPages }}
-                  </div>
-                </div>
-                <div class="col text-right">
-                  <q-btn
-                    padding="xs"
-                    icon="mdi-chevron-right"
-                    color="grey-2"
-                    text-color="grey-5"
-                    size="md"
-                    @click="nextPage"
-                    :disable="page === numOfPages"
-                  />
-                </div>
-              </div>
-            </div>
-          </template>
-        </q-splitter>
-      </div>
-    </q-card>
-  </div>
-
-  <!-- Dialog Full Screen -->
-  <q-dialog
-    v-model="dialog"
-    persistent
-    :maximized="true"
-    transition-show="slide-up"
-    transition-hide="slide-down"
-  >
-    <q-card class="bg-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
-        />
-      </div>
-      <div class="q-pa-md">
-        <div class="row items-start items-center">
-          <div class="col">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-left"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              class="my-auto"
-              @click="backPage"
-              :disable="page == 1"
-            />
-          </div>
-          <div class="col-12 col-md-auto">
-            <div class="q-pa-md flex">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </div>
-          </div>
-          <div class="col text-right">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-right"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              @click="nextPage"
-              :disable="page === numOfPages"
-            />
-          </div>
-        </div>
-        <div class="row items- items-center">
-          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-        </div>
-        <div class="row items- items-end">
-          <div class="col">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-left"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              class="my-auto"
-              @click="backPage"
-              :disable="page == 1"
-            />
-          </div>
-          <div class="col-12 col-md-auto">
-            <div class="q-pa-md flex">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </div>
-          </div>
-          <div class="col text-right">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-right"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              @click="nextPage"
-              :disable="page === numOfPages"
-            />
-          </div>
-        </div>
-      </div>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style lang="scss" scope>
-.disabled {
-  pointer-events: none;
-}
-</style>
diff --git a/src/modules/07_insignia/interface/index/Main.ts b/src/modules/07_insignia/interface/index/Main.ts
index 6f8024ef5..6df558527 100644
--- a/src/modules/07_insignia/interface/index/Main.ts
+++ b/src/modules/07_insignia/interface/index/Main.ts
@@ -1,5 +1,5 @@
 interface OptionData {
-  id: string;
+  id: string | number;
   name: string;
 }
 
@@ -33,6 +33,68 @@ interface InsigniaType {
   label: string;
   name: string;
 }
+
+interface OptionPeriod {
+  label: string;
+  value: number;
+}
+
+interface OptionRound {
+  id: string;
+  year: number;
+  name: string;
+}
+interface DataStat {
+  allUserUser: number;
+  orgAllCount: number;
+  orgNoSendCount: number;
+  orgSendCount: number;
+}
+
+interface DataPerson {
+  address: string;
+  citizenId: string;
+  date: string;
+  dateReceive: string;
+  dateReceiveInsignia: string;
+  dateReturnInsignia: string;
+  datepay: string;
+  docReceiveInsignia: string;
+  docReturnInsignia: string;
+  employeeType: string;
+  id: string;
+  name: string;
+  number: string;
+  orgReceiveInsignia: string;
+  orgReturnInsignia: string;
+  page: string;
+  position: string;
+  prefix: string;
+  profileType: string;
+  section: string;
+  status: string;
+  type: string;
+  typepay: string;
+  vatnumber: string;
+  volumeNo: string;
+}
+
+interface DataDocuments {
+  annotation: string;
+  file: string;
+  fileName: string;
+}
+
+interface DataAllocate {
+  allocate: number;
+  id: string;
+  insignia: string;
+  insigniaId: string;
+  remain: number;
+  total: number;
+  year: number;
+}
+
 export type {
   OptionData,
   OptionDataYear,
@@ -41,4 +103,10 @@ export type {
   TypeData,
   OptionDataInsignia,
   InsigniaType,
+  OptionPeriod,
+  OptionRound,
+  DataStat,
+  DataPerson,
+  DataDocuments,
+  DataAllocate,
 };
diff --git a/src/modules/07_insignia/interface/request/Main.ts b/src/modules/07_insignia/interface/request/Main.ts
index 678bd895a..de67f3960 100644
--- a/src/modules/07_insignia/interface/request/Main.ts
+++ b/src/modules/07_insignia/interface/request/Main.ts
@@ -25,4 +25,16 @@ interface ItemType {
 interface ColId {
   period_id: string;
 }
-export type { FormProprsalsRound, FormProprsalsRound2, ItemType, ColId };
+
+interface CheckboxData {
+  id: number;
+  name: string;
+  val: boolean;
+}
+export type {
+  FormProprsalsRound,
+  FormProprsalsRound2,
+  ItemType,
+  ColId,
+  CheckboxData,
+};
diff --git a/src/modules/07_insignia/interface/response/Main.ts b/src/modules/07_insignia/interface/response/Main.ts
index 8766fb35d..fb80f37a7 100644
--- a/src/modules/07_insignia/interface/response/Main.ts
+++ b/src/modules/07_insignia/interface/response/Main.ts
@@ -10,4 +10,38 @@ interface ResponseObject {
   note: string;
 }
 
-export type { ResponseObject };
+interface ResponsePeriod {
+  period_amount: number;
+  period_doc: string;
+  period_end: string;
+  period_id: string;
+  period_isActive: boolean;
+  period_name: string;
+  period_round: number;
+  period_start: string;
+  period_status: string;
+  period_year: number;
+}
+
+interface ResponseNoSend {
+  orgId: string;
+  orgName: string;
+}
+
+interface ResponseRound {
+  id: string;
+  name: string;
+  year: number;
+}
+
+interface ResponseAllocate {
+  allocate: number;
+  createdAt: string;
+  id: string;
+  lastUpdatedAt: string;
+  organizationOrganization: string;
+  remain: number;
+  total: number;
+}
+
+export type { ResponseObject, ResponsePeriod, ResponseNoSend, ResponseRound ,ResponseAllocate};
diff --git a/src/modules/07_insignia/router.ts b/src/modules/07_insignia/router.ts
index 982f3c0d6..a66fe2713 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -1,29 +1,32 @@
 /**
  * Router เครื่องราชอิสริยาภรณ์ (insignia)
  */
-
-const ReportView = () =>
-  import("../07_insignia/components/report/ReportView.vue");
-const report_01 = () =>
-  import("../07_insignia/components/report/Report_01.vue");
-const report_02 = () =>
-  import("../07_insignia/components/report/Report_02.vue");
-const RecordInsignia = () =>
-  import("@/modules/07_insignia/views/ResultPage.vue");
+//รายการรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
 const insigniaProposals = () =>
-  import("@/modules/07_insignia/components/1_Proposals/listProposals.vue");
-const roundAdd = () =>
-  import("@/modules/07_insignia/components/1_Proposals/addProposals.vue");
-const listMange = () =>
-  import("@/modules/07_insignia/components/2_Manage/listManage.vue");
+  import("@/modules/07_insignia/views/01_RoundMain.vue");
+
+//รายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
+const listMange = () => import("@/modules/07_insignia/views/02_ManageMain.vue");
+
+// บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/การจ่ายใบกำกับ
+const RecordInsignia = () =>
+  import("@/modules/07_insignia/views/03_ResultMain.vue");
+
+// จัดสรรเครื่องราชอิสริยาภรณ์
 const listAllocate = () =>
-  import("@/modules/07_insignia/components/4_Allocate/Main.vue");
+  import("@/modules/07_insignia/views/04_AllocateMain.vue");
 const allocateOrdList = () =>
-  import("@/modules/07_insignia/components/4_Allocate/OrgList.vue");
+  import("@/modules/07_insignia/components/4_Allocate/OrgAllocatePageList.vue");
 
 // ยืม - คืนเครื่องราช
 const insigniaBorrow = () =>
-  import("@/modules/07_insignia/components/5_Borrow/Main.vue");
+  import("@/modules/07_insignia/views/05_BorrowMain.vue");
+
+const ReportView = () => import("./views/06_ReportMain.vue");
+
+const report_02 = () =>
+  import("./components/report/ReportDetail.vue");
+
 export default [
   {
     path: "/insignia/round",
@@ -35,26 +38,16 @@ export default [
       Role: "STAFF",
     },
   },
-  // {
-  //   path: "/insignia/round/:id",
-  //   name: "roundAddEdit",
-  //   component: roundAdd,
-  //   meta: {
-  //     Auth: true,
-  //     Key: "SYS_INSIGNIA_ROUND",
-  //     Role: "STAFF",
-  //   },
-  // },
-  // {
-  //   path: "/insignia/round/add",
-  //   name: "roundAdd",
-  //   component: roundAdd,
-  //   meta: {
-  //     Auth: true,
-  //     Key: "SYS_INSIGNIA_ROUND",
-  //     Role: "STAFF",
-  //   },
-  // },
+  {
+    path: "/insignia/manage/list-manage",
+    name: "insigniaManage",
+    component: listMange,
+    meta: {
+      Auth: true,
+      Key: "SYS_INSIGNIA_MANAGE",
+      Role: "STAFF",
+    },
+  },
 
   {
     path: "/insignia/record",
@@ -77,17 +70,7 @@ export default [
     },
   },
   {
-    path: "/insignia/report/report-01",
-    name: "report-report-01",
-    component: report_01,
-    meta: {
-      Auth: true,
-      Key: "SYS_INSIGNIA_REPORT",
-      Role: "STAFF",
-    },
-  },
-  {
-    path: "/insignia/report/report/:type",
+    path: "/insignia/report/:type",
     name: "report-report",
     component: report_02,
     meta: {
@@ -96,16 +79,7 @@ export default [
       Role: "STAFF",
     },
   },
-  {
-    path: "/insignia/manage/list-manage",
-    name: "insigniaManage",
-    component: listMange,
-    meta: {
-      Auth: true,
-      Key: "SYS_INSIGNIA_MANAGE",
-      Role: "STAFF",
-    },
-  },
+
   {
     path: "/insignia/allocate",
     name: "insigniaAllocate",
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/views/01_RoundMain.vue
similarity index 83%
rename from src/modules/07_insignia/components/1_Proposals/listProposals.vue
rename to src/modules/07_insignia/views/01_RoundMain.vue
index f855e84de..2feb72ac9 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/views/01_RoundMain.vue
@@ -1,25 +1,23 @@
 <script setup lang="ts">
 import { ref, useAttrs, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import router from "@/router";
 import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
 /** import Type*/
 import type { QTableProps } from "quasar";
-import type {
-  FormProprsalsRound2,
-  ColId,
-} from "@/modules/07_insignia/interface/request/Main";
+import type { FormProprsalsRound2 } from "@/modules/07_insignia/interface/request/Main";
 
-import DialogDetail from "@/modules/07_insignia/components/1_Proposals/DialogDetail.vue";
+import DialogDetail from "@/modules/07_insignia/components/1_Round/DialogDetail.vue";
 
 /** import Store*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 
 /** use */
+const $q = useQuasar(); //ใช้ noti quasar
 const storeInsignia = useInsigniaDataStore();
 const mixin = useCounterMixin();
 const {
@@ -28,22 +26,13 @@ const {
   messageError,
   showLoader,
   hideLoader,
-  dialogConfirm,
   dialogRemove,
 } = mixin;
 
-/** use */
-const $q = useQuasar(); //ใช้ noti quasar
-
-/** คอลัมน์ที่แสดง */
-const visibleColumns = ref<string[]>([
-  "period_name",
-  "period_year",
-  "period_start",
-  "period_end",
-  "statusRoyal",
-]);
-/** คอลัมน์ */
+/** Table */
+const rows = ref<FormProprsalsRound2[]>([]); //รายการรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
+const filterKeyword = ref<string>(""); //คำค้นหาข้อมูลในตาราง
+const filterRef = ref<HTMLInputElement | null>(null);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "period_name",
@@ -97,17 +86,33 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-/** ข้อมูลตาราง (จำลอง)*/
-const rows = ref<FormProprsalsRound2[]>([]);
+const visibleColumns = ref<string[]>([
+  "period_name",
+  "period_year",
+  "period_start",
+  "period_end",
+  "statusRoyal",
+]);
+const pagination = ref({
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 
-/** Function เรียกรายการรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์ */
+const modalForm = ref<boolean>(false); //แสดงรายละเอียด
+const actionType = ref<string>(""); // ประเภท ดูรายละเอียด,แก้ไข
+const roundId = ref<string>(""); //id ที่ต้องการ ดูรายละเอียด,แก้ไข
+
+/**
+ *  Function เรียกรายการรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
+ */
 async function fetchData() {
   showLoader();
   await http
     .get(config.API.listRoundInsignia())
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
-      rows.value = data.map((e: FormProprsalsRound2) => ({
+      rows.value = await data.map((e: FormProprsalsRound2) => ({
         period_id: e.period_id,
         period_name: e.period_name,
         period_year: e.period_year + 543,
@@ -152,65 +157,33 @@ function clickDelete(id: string) {
   });
 }
 
-/** Fnction คำนวณรายชื่อผู้ได้รับเครื่องราช */
-// async function clickListInsignia(propsId: string) {
-//   dialogConfirm(
-//     $q,
-//     async () => {
-//       await getRequest(propsId);
-//     },
-//     "ยืนยันการคำนวณรายชื่อผู้ได้รับเครื่องราชฯ",
-//     "ต้องการยืนยันการคำนวณรายชื่อผู้ได้รับเครื่องราชฯนี้หรือไม่?"
-//   );
-// }
-
-/** Fnction เรียกจาก API ข้อมูลผู้ได้รับเครื่องราชฯ */
-// async function getRequest(id: string) {
-//   showLoader();
-//   await http
-//     .get(config.API.requestInsignia(id))
-//     .then(() => {
-//       success($q, "ยืนยันสำเร็จ");
-//     })
-//     .catch((err) => {
-//       messageError($q, err);
-//     })
-//     .finally(async () => {
-//       await fetchData();
-//     });
-// }
-
-/**  ค้นหาในตาราง */
-const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
-const resetFilter = () => {
+/**
+ * Function กำหนดค่า filterKeyword เป็นค่าว่าง
+ */
+function resetFilter() {
   filterKeyword.value = "";
   if (filterRef.value) {
     filterRef.value.focus();
   }
-};
-
-const attrs = ref<any>(useAttrs());
-const pagination = ref({
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-/**  Hook */
-onMounted(async () => {
-  await fetchData();
-});
-
-const modalForm = ref<boolean>(false);
-const actionType = ref<string>("");
-const roundId = ref<string>("");
+}
 
+/**
+ * function ดูข้อมูลรายละเอียดรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
+ * @param action ประเภท ดูรายละเอียด,แก้ไข
+ * @param id id ที่ต้องการ ดูรายละเอียด,แก้ไข
+ */
 function onOpenFormDetail(action: string = "", id: string = "") {
   modalForm.value = true;
   actionType.value = action;
   roundId.value = id;
 }
+
+/**
+ * ทำงานเมื่อ Componenets ถูกเรียกใช้งาน
+ */
+onMounted(async () => {
+  await fetchData();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -282,7 +255,6 @@ function onOpenFormDetail(action: string = "", id: string = "") {
           :paging="true"
           dense
           class="custom-header-table"
-          v-bind="attrs"
           :visible-columns="visibleColumns"
           v-model:pagination="pagination"
         >
@@ -385,8 +357,8 @@ function onOpenFormDetail(action: string = "", id: string = "") {
   <DialogDetail
     v-model:modal="modalForm"
     :actionType="actionType"
-    :roundId="roundId"
-    :fetchList="fetchData"
+    :round-id="roundId"
+    :fetch-list="fetchData"
   />
 </template>
 
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/views/02_ManageMain.vue
similarity index 87%
rename from src/modules/07_insignia/components/2_Manage/listManage.vue
rename to src/modules/07_insignia/views/02_ManageMain.vue
index 1718fe7a1..f1e44b29d 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/views/02_ManageMain.vue
@@ -1,10 +1,23 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+import { useroleUserDataStore } from "@/stores/roleUser";
 import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { DataStructureTree } from "@/interface/main";
+import type {
+  OptionData,
+  OptionRound,
+  DataStat,
+} from "@/modules/07_insignia/interface/index/Main";
+import type { ResponsePeriod } from "@/modules/07_insignia/interface/response/Main";
+
 /**import Componrnts*/
 import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue"; // stat
 import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue"; //คนที่ยืนขอ
@@ -13,57 +26,53 @@ import tab3 from "@/modules/07_insignia/components/2_Manage/Tab3.vue"; //คน
 import tab4 from "@/modules/07_insignia/components/2_Manage/Tab4.vue"; //หน่วยงานที่ไม่ได้ส่งชื่อ
 import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
 
-/**import stoer */
-import { useCounterMixin } from "@/stores/mixin";
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
-import { useroleUserDataStore } from "@/stores/roleUser";
-import { useRoute } from "vue-router";
-
 /**use  */
 const $q = useQuasar(); //ใช้ noti quasar
+const route = useRoute();
 const roleDataStore = useroleUserDataStore();
 const DataStore = useInsigniaDataStore();
 const mixin = useCounterMixin();
 const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
-const route = useRoute();
 
 /**
  * ตัวแปร
  */
-const loading = ref<boolean>(false);
-const loadview = ref<boolean>(false);
+const loading = ref<boolean>(false); //การโหลด
+const loadview = ref<boolean>(false); //แสดง View
 const hideBottom = ref<boolean>(false);
-const round = ref<string>("");
-const roundName = ref<string>("");
-const optionRound = ref<any>([]);
-const optiontypeOc = ref<any>([]);
-const tab = ref<any>("");
-const stat = ref<any>({
+const round = ref<string>(""); //รอยการเสนอขอ
+const roundName = ref<string>(""); //ชื่อรอบการเสนอ
+const optionRound = ref<OptionRound[]>([]);
+const optiontypeOc = ref<OptionData[]>([]);
+const tab = ref<string>(""); //tab รายชื่อ
+//ข้อมูล สถิติ
+const stat = ref<DataStat>({
   allUserUser: 0,
   orgAllCount: 0,
   orgNoSendCount: 0,
   orgSendCount: 0,
 });
-const requestNote = ref<string>("");
-const requestStatus = ref<string>("");
-const requestId = ref<string>("");
-const document = ref<string>("");
-const fileUpload = ref<any>(null);
+const requestNote = ref<string>(""); //หมายเหตุ ตีกลับ
+const requestStatus = ref<string>(""); //สถานะของรอบการเสนอขอ
+const requestId = ref<string>(""); //id ของรอบการเสนอขอ
+const document = ref<string>(""); //เอกสารดาวน์โหลด
+const fileUpload = ref<any>(null); //ไฟล์อัปโหลด
 const modalPopupBackToEdit = ref<boolean>(false); //model แก้ไข
-const modalbackInsignia2Role = ref<boolean>(false);
+const modalbackInsignia2Role = ref<boolean>(false); // popup หมายเหตุการตีกลับ
 
 /**
  * function เรียกรอบการเสนอขอพระราชทานเครื่อง
  */
-function fecthlistRound() {
-  http
+async function fecthlistRound() {
+  await http
     .get(config.API.listRoundInsignia())
-    .then(async (res: any) => {
-      optionRound.value = res.data.result.map((e: any) => ({
+    .then(async (res) => {
+      optionRound.value = res.data.result.map((e: ResponsePeriod) => ({
         id: e.period_id,
         year: e.period_year,
         name: e.period_name,
       }));
+
       //มีรอบการเสนอขอพระราชทานเครื่องแสดง UI
       if (optionRound.value.length !== 0) {
         DataStore.optionRound = optionRound.value;
@@ -89,8 +98,8 @@ function fecthlistRound() {
 /**
  * function เรียกดู Stat ของรอบการเสนอขอพระราชทานเครื่อง
  */
-function fecthStat(id: string) {
-  http
+async function fecthStat(id: string) {
+  await http
     .get(config.API.insigniaDashboard(id))
     .then((res) => {
       stat.value = res.data.result;
@@ -103,8 +112,8 @@ function fecthStat(id: string) {
 /**
  * funcion เช็คหน่วยงาน
  */
-function fecthAgency() {
-  http
+async function fecthAgency() {
+  await http
     .get(config.API.keycloakPosition())
     .then((res) => {
       loadview.value = true;
@@ -141,7 +150,7 @@ function fetchListOrg(id: string) {
   http
     .get(config.API.orgByIdSystem(id, route.meta.Key as string))
     .then(async (res) => {
-      const data = await res.data.result.map((item: any) => ({
+      const data = await res.data.result.map((item: DataStructureTree) => ({
         id: item.orgTreeId,
         name: item.orgName,
       }));
@@ -158,16 +167,18 @@ function fetchListOrg(id: string) {
 /**
  * function เรียกประเภทเครื่องราช
  */
-function fecthInsignia() {
-  http
-    .get(config.API.insigniaOrg)
-    .then((res) => {
-      const data = res.data.result;
-      DataStore.fetchInsigniaType(data);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+async function fecthInsignia() {
+  if (DataStore.dataInsigniaType.length === 0) {
+    await http
+      .get(config.API.insigniaOrg)
+      .then((res) => {
+        const data = res.data.result;
+        DataStore.fetchInsigniaType(data);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  }
 }
 
 /**
@@ -176,17 +187,18 @@ function fecthInsignia() {
 async function changround() {
   DataStore.roundId = round.value;
   fecthStat(round.value); //เรียกดู Stat รอบที่เลือก
-  var organization = await (DataStore.agency != null //ถ้ามี agency เรียกข้อมูลตาม agency  ถ้าไม่มีเรียนตาม Oc ที่เลือก
-    ? DataStore.agency
-    : DataStore.typeOc);
+  var organization =
+    DataStore.agency != null //ถ้ามี agency เรียกข้อมูลตาม agency  ถ้าไม่มีเรียนตาม Oc ที่เลือก
+      ? DataStore.agency
+      : DataStore.typeOc;
   fecthInsigniaByOc(round.value, organization, "officer", tab.value); // เรียกข้อมูลรายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
   // get round name
-  const roundFilter = await optionRound.value.find(
-    (x: any) => round.value === x.id
-  );
-  roundName.value = `รอบการเสนอขอพระราชทานเครื่องราชฯ ปี ${
-    roundFilter.year + 543
-  }`;
+  const roundFilter = optionRound.value.find((x: any) => round.value === x.id);
+  if (roundFilter) {
+    roundName.value = `รอบการเสนอขอพระราชทานเครื่องราชฯ ปี ${
+      roundFilter.year + 543
+    }`;
+  }
 }
 
 /**
@@ -196,7 +208,7 @@ async function changround() {
  * @param role   ประเภท officer,employee
  * @param status สถานะ
  */
-function fecthInsigniaByOc(
+async function fecthInsigniaByOc(
   roundId: string,
   ocId: string,
   role: string,
@@ -204,7 +216,7 @@ function fecthInsigniaByOc(
 ) {
   if (roundId && ocId && role && status) {
     showLoader();
-    http
+    await http
       .get(config.API.insigniaList(roundId, ocId, role, status))
       .then(async (res) => {
         requestNote.value = res.data.result.requestNote;
@@ -292,8 +304,8 @@ function backToEdit(reason: string) {
             "officer",
             tab.value
           );
-          modalPopupBackToEdit.value = await false;
           await success($q, "บันทึกสำเร็จ");
+          modalPopupBackToEdit.value = false;
         })
         .catch((err) => {
           messageError($q, err);
@@ -352,8 +364,8 @@ function backToEditinsignia2Role(reason: string) {
           "officer",
           tab.value
         );
-        modalbackInsignia2Role.value = await false;
         await success($q, "การตีกลับสำเร็จ");
+        modalbackInsignia2Role.value = false;
       })
       .catch((err) => {
         messageError($q, err);
@@ -421,10 +433,8 @@ async function uploadFile(event: any) {
  *  hook
  */
 onMounted(async () => {
-  tab.value = DataStore.mainTab;
-  DataStore.dataInsigniaType.length === 0 && (await fecthInsignia());
-  fecthlistRound();
-  fetchActiveId();
+  tab.value = DataStore.mainTab ?? "";
+  Promise.all([fecthInsignia(), fecthlistRound(), fetchActiveId()]);
 });
 </script>
 
@@ -547,11 +557,11 @@ onMounted(async () => {
       <q-tab-panel name="pending" class="q-pa-none">
         <tab1
           :tab="tab"
-          :roundId="round"
-          :roundName="roundName"
-          :fecthInsigniaByOc="fecthInsigniaByOc"
+          :round-id="round"
+          :round-name="roundName"
+          :fecth-insignia-by-oc="fecthInsigniaByOc"
           :request-status="requestStatus"
-          :fecthStat="fecthStat"
+          :fecth-stat="fecthStat"
         />
       </q-tab-panel>
 
@@ -559,8 +569,8 @@ onMounted(async () => {
       <q-tab-panel name="reject" class="q-pa-none">
         <tab2
           :tab="tab"
-          :roundId="round"
-          :fecthInsigniaByOc="fecthInsigniaByOc"
+          :round-id="round"
+          :fecth-insignia-by-oc="fecthInsigniaByOc"
         />
       </q-tab-panel>
 
@@ -568,8 +578,8 @@ onMounted(async () => {
       <q-tab-panel name="delete" class="q-pa-none">
         <tab3
           :tab="tab"
-          :roundId="round"
-          :fecthInsigniaByOc="fecthInsigniaByOc"
+          :round-id="round"
+          :fecth-insignia-by-oc="fecthInsigniaByOc"
         />
       </q-tab-panel>
 
@@ -579,7 +589,7 @@ onMounted(async () => {
         name="organization"
         class="q-pa-none"
       >
-        <tab4 :tab="tab" :roundId="round" />
+        <tab4 :tab="tab" :round-id="round" />
       </q-tab-panel>
     </q-tab-panels>
 
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/03_ResultMain.vue
similarity index 86%
rename from src/modules/07_insignia/views/ResultPage.vue
rename to src/modules/07_insignia/views/03_ResultMain.vue
index 90e2c7667..6fb16cd52 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/03_ResultMain.vue
@@ -1,29 +1,30 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+
 import { checkPermission } from "@/utils/permissions";
+import { useResultDataStore } from "@/modules/07_insignia/storeResult";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
 
 /**
  * import Typฃ
  */
-import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 import type { QTableProps, QInput } from "quasar";
+import type {
+  OptionData,
+  DataPerson,
+} from "@/modules/07_insignia/interface/index/Main";
+import type { ResponseRound } from "@/modules/07_insignia/interface/response/Main";
 
 /**
  * import Components
  */
 import DialogHeader from "@/components/DialogHeader.vue";
-import Dialogbody from "@/modules/07_insignia/components/3_result/Dialogbody.vue"; //รับ-คืนเครื่องราชฯ
-import DialogForm from "@/modules/07_insignia/components/3_result/DialogForm.vue"; //บันทึกผล
-import fileUploadview from "../components/3_result/fileUpload.vue";
-
-/**
- * import Stores
- */
-import { useResultDataStore } from "@/modules/07_insignia/storeResult";
-import { useCounterMixin } from "@/stores/mixin";
+import Dialogbody from "@/modules/07_insignia/components/3_result/DialogReceive_Return.vue"; //รับ-คืนเครื่องราชฯ
+import DialogForm from "@/modules/07_insignia/components/3_result/DialogResults.vue"; //บันทึกผล
+import fileUploadview from "../components/3_result/TabDocuments.vue";
 
 /**
  * use
@@ -43,30 +44,30 @@ const {
 /**
  * ตัวแปร
  */
-const tab = ref<string>("");
-const selectRound = ref<string>("");
-const selectRoundOption = ref<OptionData[]>([]);
-const modal = ref<boolean>(false);
-const action = ref<string>("");
-const personId = ref<string>();
-const profileType = ref<string>("");
-const fileResult = ref<any>(null);
-const fileinvoice = ref<any>(null);
-const loadView = ref<boolean>(false);
-const insigniaTypeOption = ref<any>([]);
-const insigniaTypeFilter = ref<any>({
-  insigniaTypeOption: [],
-});
-const filterInvoice = ref<any>(DataStore.invoiceTypeop);
-const filterEmployee = ref<any>(DataStore.employeeClassOps);
-const ModalDialog = ref<boolean>(false);
-const dateCheckReceive = ref<any>();
-const dateCheckReturn = ref<any>();
-const dataModal = ref<any>([]);
+const tab = ref<string>(""); //Tab รายการ
+const selectRound = ref<string>(""); //รอบการเสนอขอ
+const selectRoundOption = ref<OptionData[]>([]); //รายการรอบการเสนอขอ
+const modal = ref<boolean>(false); //popup บันทึกผล
+const action = ref<string>(""); //ประเภทแก่ไข,เพิ่ม
+const personId = ref<string>(); //id คนที่ต้องการ
+const profileType = ref<string>(""); //ประเภทข้ารายกาช
+const fileResult = ref<any>(null); //ไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์
+const fileinvoice = ref<any>(null); //ไฟล์บันทึกผลการจ่ายใบกำกับ
+const loadView = ref<boolean>(false); //แสดง ข้อมูล
+const insigniaTypeOption = ref<OptionData[]>([]); //ข้อมูลประเภทเครื่องราช
+const insigniaTypeFilter = ref<OptionData[]>([]); //รายการตัวเลือกประเภทเครื่องราช
+const filterInvoice = ref<OptionData[]>(DataStore.invoiceTypeop); //รายการตัวเลือกใบกำกับ
+const filterEmployee = ref<OptionData[]>(DataStore.employeeClassOps); //รายการตัวเลือกสถานะภาพ
+const ModalDialog = ref<boolean>(false); //popup รับ-คืนเครื่องราชฯ
+const dateCheckReceive = ref<string>(); //วันที่รับ
+const dateCheckReturn = ref<string>(); //วันที่คืน
+const dataModal = ref<DataPerson>(); //ช้อมูลที่ต้องการ
 
 /**
  * ข้อมูล Tabla
  */
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "action",
@@ -237,27 +238,24 @@ const visibleColumns = ref<String[]>([
   "typepay",
   "address",
 ]);
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
 
 /**
  *function เรียกรอบการเสนอขอพระราชทานเครื่องราช
  */
-function fecthRound() {
+async function fecthRound() {
   showLoader();
-  http
+  await http
     .get(config.API.noteround())
     .then(async (res) => {
       let data = res.data.result;
-
       if (data.length !== 0) {
-        selectRoundOption.value = data.map((e: any) => ({
+        selectRoundOption.value = data.map((e: ResponseRound) => ({
           name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี" + "  " + (e.year + 543),
           id: e.id,
         }));
         selectRound.value = data[0].id;
-        await fecthInsignia();
-        await fecthInsigniaType();
+
+        await Promise.all([fecthInsignia(), fecthInsigniaType()]);
       } else {
         hideLoader();
       }
@@ -271,11 +269,11 @@ function fecthRound() {
 /**
  * function เรียกประเภทเครื่องราช
  */
-function fecthInsignia() {
-  http
+async function fecthInsignia() {
+  await http
     .get(config.API.insigniaOrg)
-    .then((res) => {
-      let data = res.data.result;
+    .then(async (res) => {
+      let data = await res.data.result;
       DataStore.fetchDatainsignia(data);
     })
     .catch((err) => {
@@ -286,10 +284,10 @@ function fecthInsignia() {
 /**
  * function เรียกระดับเครื่องราช
  */
-function fecthInsigniaType() {
-  http(config.API.insigniaTypeOrg)
-    .then((res) => {
-      let data = res.data.result;
+async function fecthInsigniaType() {
+  await http(config.API.insigniaTypeOrg)
+    .then(async (res) => {
+      let data = await res.data.result;
       DataStore.fetchDatainsigniaType(data);
       tab.value = DataStore.insigniaType[0].name;
       loadView.value = true;
@@ -317,44 +315,20 @@ function selectorRound(round: string) {
   fecthlistInsignia();
 }
 
-/**
- * callback function จำทำงานเมื่อ tab มีการเปลี่ยนแปลง
- */
-watch(tab, () => {
-  if (tab.value !== "doc") {
-    DataStore.insignia = "";
-    fecthlistInsignia();
-
-    insigniaTypeOption.value = DataStore.insigniaOp.filter(
-      (e: any) => e.insigniaType == tab.value || e.name == "ทั้งหมด"
-    );
-    insigniaTypeFilter.value = insigniaTypeOption.value;
-  }
-});
-
-/**
- * callback function จำทำงานเมื่อ modal มีการเปลี่ยนแปลง
- */
-// watch(modal, () => {
-//   if (modal.value == false) {
-//     fecthlistInsignia();
-//   }
-// });
-
 /**
  * function เรียกรายชื่อบันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/การจ่ายใบกำกับ
  */
-function fecthlistInsignia() {
+async function fecthlistInsignia() {
   showLoader();
   let data = {
     insigniaTypeId: tab.value,
     insigniaNoteId: selectRound.value,
     insigniaId: DataStore.insignia,
   };
-  http
+  await http
     .post(config.API.noteSearch(), data)
-    .then((res) => {
-      let data = res.data.result;
+    .then(async (res) => {
+      let data = await res.data.result;
       DataStore.fetchlistinsignia(data);
     })
     .catch((err) => {
@@ -388,7 +362,7 @@ function uploadFile(event: any, action: string) {
           }
 
           await success($q, "อัพโหลดไฟล์สำเร็จ");
-          modelPerview.value = await false;
+          modelPerview.value = false;
         })
         .catch((err) => {
           messageError($q, err);
@@ -400,30 +374,32 @@ function uploadFile(event: any, action: string) {
   }
 }
 
-/** function closePopup*/
+/**
+ * function ปิด popup ทั้งหมด
+ */
 function close() {
   modal.value = false;
   ModalDialog.value = false;
 }
 
-/** function openPopup add*/
+/**
+ * function เปิด popup บันทึกผล เพิ่มคน
+ */
 function addData() {
   modal.value = true;
   action.value = "addData";
 }
 
-/** function openPopup edit*/
-function editData(data: any) {
+/**
+ * function  เปิด popup บันทึกผล แก้ไขข้อมูล
+ */
+function editData(data: DataPerson) {
   personId.value = data.id;
   profileType.value = data.profileType;
   action.value = "editData";
   modal.value = true;
 }
 
-const save = () => {
-  console.log("save function");
-};
-
 /**
  * ข้อมูล ไฟล์
  */
@@ -486,22 +462,13 @@ const resetFilter = () => {
   filter.value = "";
   filterRef.value!.focus();
 };
-const pagination = ref({
-  sortBy: "name",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paging = ref<boolean>(true);
-const paginationLabel = (start: number, end: number, total: number) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
 
 /**
- * function openPopup
+ * function เปิด popup รับ-คืนเครื่องราชฯ
+ * @param data ข้อมูลที่ต้องการแก่้ไข
+ *
  */
-function OpenModal(data: any) {
+function OpenModal(data: DataPerson) {
   dataModal.value = data;
   ModalDialog.value = true;
   dateCheckReceive.value = data.dateReceiveInsignia;
@@ -515,23 +482,23 @@ function OpenModal(data: any) {
  * @param update function
  * @param name ชื่อ selec
  */
-function filterSelector(val: any, update: Function, name: any) {
+function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "insigniaTypeFilter") {
-      DataStore.insignia = null as any;
+      DataStore.insignia = val ? (null as any) : DataStore.insignia;
       insigniaTypeFilter.value = insigniaTypeOption.value.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "filterInvoice") {
-      DataStore.invoiceType = "";
+      DataStore.invoiceType = val ? "" : DataStore.invoiceType;
       filterInvoice.value = DataStore.invoiceTypeop.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "filterEmployee") {
-      DataStore.employeeClass = "";
+      DataStore.employeeClass = val ? "" : DataStore.employeeClass;
       filterEmployee.value = DataStore.employeeClassOps.filter(
-        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
       );
     }
   });
@@ -554,6 +521,33 @@ function clearInsigniaFilters(name: string) {
   }
 }
 
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "name",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: number, end: number, total: number) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+
+/**
+ * callback function จำทำงานเมื่อ tab มีการเปลี่ยนแปลง
+ */
+watch(tab, () => {
+  if (tab.value !== "doc") {
+    DataStore.rows = [];
+    DataStore.insignia = "";
+    fecthlistInsignia();
+    insigniaTypeOption.value = DataStore.insigniaOp.filter(
+      (e: any) => e.insigniaType == tab.value || e.name == "ทั้งหมด"
+    );
+    insigniaTypeFilter.value = insigniaTypeOption.value;
+  }
+});
+
 /** hook*/
 onMounted(() => {
   fecthRound();
@@ -703,7 +697,7 @@ onMounted(() => {
               :borderless="false"
               style="width: 300px"
               @update:model-value="selectorInsignia"
-              @filter="(inputValue:any,
+              @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaTypeFilter'
                       ) "
             >
@@ -789,7 +783,7 @@ onMounted(() => {
                   DataStore.employeeClass
                 )
               "
-              @filter="(inputValue:any,
+              @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'filterInvoice'
                       ) "
             >
@@ -836,7 +830,7 @@ onMounted(() => {
                   DataStore.employeeClass
                 )
               "
-              @filter="(inputValue:any,
+              @filter="(inputValue:string,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'filterEmployee'
                     ) "
             >
@@ -945,22 +939,22 @@ onMounted(() => {
   <Dialogbody
     :modal="ModalDialog"
     :close="close"
-    :dateCheckReceive="dateCheckReceive"
-    :dateCheckReturn="dateCheckReturn"
-    :dataModal="dataModal"
-    :personId="personId"
-    :fecthlistInsignia="fecthlistInsignia"
+    :date-check-receive="dateCheckReceive"
+    :date-check-return="dateCheckReturn"
+    :data-modal="dataModal"
+    :person-id="personId"
+    :fecthlist-insignia="fecthlistInsignia"
   />
-  <!-- DialogForm -->
+
+  <!-- บันทึกผล -->
   <DialogForm
     :modal="modal"
-    :save="save"
     :close="close"
-    :roundId="selectRound"
+    :round-id="selectRound"
     :action="action"
-    :personId="personId"
-    :profileType="profileType"
-    :fecthlistInsignia="fecthlistInsignia"
+    :person-id="personId"
+    :profile-type="profileType"
+    :fecthlist-insignia="fecthlistInsignia"
   />
 
   <!-- ยืนยันรายการข้อมูล -->
diff --git a/src/modules/07_insignia/components/4_Allocate/Main.vue b/src/modules/07_insignia/views/04_AllocateMain.vue
similarity index 85%
rename from src/modules/07_insignia/components/4_Allocate/Main.vue
rename to src/modules/07_insignia/views/04_AllocateMain.vue
index b0cc2534f..7a439a904 100644
--- a/src/modules/07_insignia/components/4_Allocate/Main.vue
+++ b/src/modules/07_insignia/views/04_AllocateMain.vue
@@ -7,8 +7,13 @@ import { useQuasar } from "quasar";
 import { checkPermission } from "@/utils/permissions";
 
 /** impotrType */
-import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main";
 import type { QTableProps, QInput } from "quasar";
+import type {
+  OptionDataYear,
+  OptionData,
+  DataAllocate,
+} from "@/modules/07_insignia/interface/index/Main";
+import type { ResponseRound } from "@/modules/07_insignia/interface/response/Main";
 
 /** impotrComponents */
 import DialogForm from "@/modules/07_insignia/components/4_Allocate/DialogForm.vue";
@@ -24,30 +29,20 @@ const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
 
-const tab = ref<string>("");
-const selectRound = ref<string>();
-const selectRoundOption = ref<OptionDataYear[]>([]);
-const modal = ref<boolean>(false);
-const action = ref<string>("");
-const roundYear = ref<number>();
-const insigniaOp = ref<any>([]);
-const filterInsigniaOp = ref<any>({ insigniaOp: [] });
-const loadView = ref<boolean>(false);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
+const tab = ref<string>(""); //Tab ชั้นเครื่องราช
+const selectRound = ref<string>(); //รอบการเสนอขอ
+const selectRoundOption = ref<OptionDataYear[]>([]); //ตัวเลือกรอบการเสนอขอ
+const modal = ref<boolean>(false); //popup จัดสรรเครื่องราชฯ
+const action = ref<string>(""); //ประเภท แก้ไข,เพิ่ม
+const roundYear = ref<number>(); //ปีรอบการเสนอขอ
+const insigniaOp = ref<OptionData[]>([]); //ประเภทเครื่องราช
+const filterInsigniaOp = ref<OptionData[]>([]); //ตัวเลือกรายการประเภทเครื่องราช
+const loadView = ref<boolean>(false); //แสดงข้อมูล
 
 /** ข้อมูล Table*/
-const visibleColumns = ref<string[]>([
-  "no",
-  "insignia",
-  "total",
-  "allocate",
-  "remain",
-]);
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const rowData = ref<DataAllocate>(); //ข้อมูลที่ต้องการแก้ไข
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -96,18 +91,31 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
-const rowData = ref<any>([]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "insignia",
+  "total",
+  "allocate",
+  "remain",
+]);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 
-/** function เรียกรอบการเสนอขอ*/
+/**
+ *  function เรียกรอบการเสนอขอ
+ */
 async function fecthRound() {
+  showLoader();
   await http
     .get(config.API.noteround())
     .then(async (res) => {
       let data = res.data.result;
       if (data.length !== 0) {
-        selectRoundOption.value = data.map((e: any) => ({
+        selectRoundOption.value = data.map((e: ResponseRound) => ({
           id: e.id,
           name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี" + "  " + (e.year + 543),
           year: e.year,
@@ -123,8 +131,7 @@ async function fecthRound() {
           DataStore.roundId = selectRound.value;
         }
         if (roundYear.value) {
-          await fecthInsignia();
-          await fecthInsigniaType();
+          await Promise.all([fecthInsignia(), fecthInsigniaType()]);
         } else {
           hideLoader();
         }
@@ -136,14 +143,16 @@ async function fecthRound() {
     });
 }
 
-/** function เรียกประเภทเครื่องราช*/
+/**
+ * function เรียกประเภทเครื่องราช
+ */
 async function fecthInsignia() {
   await http
     .get(config.API.insigniaOrg)
     .then(async (res) => {
       let data = res.data.result;
       await DataStore.fetchDatainsignia(data);
-      insigniaOp.value = await DataStore.insigniaOp.filter(
+      insigniaOp.value = DataStore.insigniaOp.filter(
         (x: any) => x.type == tab.value || x.type === ""
       );
     })
@@ -152,8 +161,10 @@ async function fecthInsignia() {
     });
 }
 
-/** function เรียก Tab*/
-const fecthInsigniaType = async () => {
+/**
+ *  function เรียก Tab
+ */
+async function fecthInsigniaType() {
   await http(config.API.insigniaTypeOrg)
     .then((res) => {
       let data = res.data.result;
@@ -166,7 +177,7 @@ const fecthInsigniaType = async () => {
     .catch((err) => {
       messageError($q, err);
     });
-};
+}
 
 /** function เลือกรอบการเสนขอ*/
 async function selectorRound(round: string | undefined) {
@@ -174,7 +185,9 @@ async function selectorRound(round: string | undefined) {
   if (selectRound.value) {
     DataStore.roundId = selectRound.value;
   }
-  const yearFilter = selectRoundOption.value.find((x: any) => x.id == round); // หาปีของรอบการเสนอขอ
+  const yearFilter = selectRoundOption.value.find(
+    (x: OptionDataYear) => x.id == round
+  ); // หาปีของรอบการเสนอขอ
   roundYear.value = yearFilter?.year;
   DataStore.roundYear = roundYear.value;
   await fecthlistInsignia();
@@ -186,8 +199,8 @@ async function fecthlistInsignia() {
   showLoader();
   await http
     .get(config.API.insigniaManageType(tab.value, Number(roundYear.value)))
-    .then((res) => {
-      let data = res.data.result;
+    .then(async (res) => {
+      let data = await res.data.result;
       DataStore.listinsignia(data);
     })
     .catch((err) => {
@@ -211,26 +224,37 @@ function redirectToPage(id: string, name: string) {
 /** ตัวแปร popup*/
 const modalEdit = ref<boolean>(false);
 const actionType = ref<string>("");
-/** function closePopup*/
+/**
+ * function closePopup
+ */
 function close() {
   modal.value = false;
   modalEdit.value = false;
 }
 
-/** function openPopup การเพิ่มการจัดสรรเครื่องราชฯ*/
-const addData = () => {
+/**
+ * function openPopup การเพิ่มการจัดสรรเครื่องราชฯ
+ */
+function addData() {
   modal.value = true;
   action.value = "addData";
-};
+}
 
-/** function openPopup การแกไขการจัดสรรเครื่องราชฯ*/
-const clickEditrow = (data: any) => {
+/**
+ * function openPopup การแกไขการจัดสรรเครื่องราชฯ
+ */
+function clickEditrow(data: DataAllocate) {
   rowData.value = data;
   modalEdit.value = true;
   actionType.value = "insignia";
-};
-// บันทึกการเพิ่มการจัดสรรเครื่องราชฯ
-const save = async (insigniaId: string, total: string) => {
+}
+
+/**
+ * function บันทึกการเพิ่มการจัดสรรเครื่องราชฯ
+ * @param insigniaId  เครื่องราชที่ต้องการบันทึก
+ * @param total จำนวนที่ต้องการ
+ */
+async function save(insigniaId: string, total: string) {
   showLoader();
   await http
     .post(config.API.insigniaManageAdd(), {
@@ -249,7 +273,7 @@ const save = async (insigniaId: string, total: string) => {
       hideLoader();
       close();
     });
-};
+}
 
 //
 /**
@@ -320,11 +344,11 @@ function resetFilter() {
  * @param update function
  * @param name ชื่อ Selec
  */
-function filterSelector(val: any, update: Function, name: any) {
+function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "filterInsigniaOp") {
-      DataStore.insignia = undefined as any;
+      DataStore.insignia = val ? (undefined as any) : DataStore.insignia;
       filterInsigniaOp.value = insigniaOp.value.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
@@ -336,15 +360,16 @@ function filterSelector(val: any, update: Function, name: any) {
  *  function เคลียร์  filter
  * @param name ชื่อ filter
  */
-const clearInsigniaFilters = (name: string) => {
-  console.log(insigniaOp.value);
+function clearInsigniaFilters(name: string) {
   if (name === "filterInsigniaOp") {
     DataStore.insignia = "";
     filterInsigniaOp.value = insigniaOp.value;
   }
-};
+}
 
-/** function callback ทำงานเมื่อ Tab มีการเปลี่ยน*/
+/**
+ *  function callback ทำงานเมื่อ Tab มีการเปลี่ยน
+ */
 watch(tab, () => {
   insigniaOp.value = DataStore.insigniaOp.filter(
     (x: any) => x.type == tab.value || x.type === ""
@@ -443,7 +468,7 @@ onMounted(async () => {
                 @update:model-value="
                   DataStore.selectInsignia(DataStore.insignia)
                 "
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'filterInsigniaOp'
                       ) "
               >
@@ -633,7 +658,8 @@ onMounted(async () => {
     :save="saveEdit"
     :close="close"
     :insigniadata="rowData"
-    :actionType="actionType"
+    :action-type="actionType"
   />
 </template>
+
 <style lang="scss" scoped></style>
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/views/05_BorrowMain.vue
similarity index 96%
rename from src/modules/07_insignia/components/5_Borrow/Main.vue
rename to src/modules/07_insignia/views/05_BorrowMain.vue
index 40ed90f12..5c193de35 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/views/05_BorrowMain.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { checkPermission } from "@/utils/permissions";
+import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { checkPermission } from "@/utils/permissions";
 
 /** impotrType */
 import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main";
@@ -13,13 +16,11 @@ import type { QTableProps, QInput } from "quasar";
 import DialogForm from "@/modules/07_insignia/components/5_Borrow/DialogForm.vue";
 
 /** impotrStores */
-import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
-import { useCounterMixin } from "@/stores/mixin";
+const $q = useQuasar();
 const DataStore = useBrrowDataStore();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
 
-const $q = useQuasar();
 const tab = ref<string>("");
 
 /** ข้อมูล Table*/
@@ -260,7 +261,9 @@ const fileterInsigniaList = ref<any>([]);
 const loadView = ref<boolean>(false);
 const employeeClassOps = ref<any>(DataStore.employeeClassOps);
 
-/** function เรียกรอบการเสนอขอพระราชทานเครื่องราชฯ*/
+/**
+ * function เรียกรอบการเสนอขอพระราชทานเครื่องราชฯ
+ */
 async function fecthRound() {
   showLoader();
   await http
@@ -305,7 +308,9 @@ async function fecthRound() {
     });
 }
 
-/** function เรียกประเภทเครื่องราชฯ*/
+/**
+ * function เรียกประเภทเครื่องราชฯ
+ */
 async function fecthInsignia() {
   await http
     .get(config.API.insigniaOrg)
@@ -323,7 +328,9 @@ async function fecthInsignia() {
     });
 }
 
-/** function เรียกระดับเครื่องราชฯ Tab*/
+/**
+ * function เรียกระดับเครื่องราชฯ Tab
+ */
 async function fecthInsigniaType() {
   await http(config.API.insigniaTypeOrg)
     .then(async (res) => {
@@ -339,8 +346,7 @@ async function fecthInsigniaType() {
     .finally(() => {});
 }
 
-/** รอบการเสนอขอ*/
-const yearRound = ref<number>();
+const yearRound = ref<number>(); //รอบการเสนอขอ
 /**
  * function เลือกรอบการเสนอขอ
  * @param round ปีการเสนอขอ
@@ -350,7 +356,9 @@ async function selectorRound(round: number) {
   await fecthlistInsignia();
 }
 
-/** function เรียกรายชื่อการเสนอขอเครื่องราชฯ */
+/**
+ * function เรียกรายชื่อการเสนอขอเครื่องราชฯ
+ */
 async function fecthlistInsignia() {
   showLoader();
   await http
@@ -368,18 +376,24 @@ async function fecthlistInsignia() {
     });
 }
 
-/** function closePopup */
+/**
+ * function closePopup
+ */
 function close() {
   modal.value = false;
 }
 
-/** function closePopup และเเรียกข้อมูลรายชื่อการเสนอขอเครื่องราชฯ */
+/**
+ *  function closePopup และเเรียกข้อมูลรายชื่อการเสนอขอเครื่องราชฯ
+ */
 async function closeAndFecth() {
   await fecthlistInsignia();
   modal.value = false;
 }
 
-/** function openPopup เพิ่มรายการ ยืม-คืนเครื่องราชฯ*/
+/**
+ * function openPopup เพิ่มรายการ ยืม-คืนเครื่องราชฯ
+ */
 function addData() {
   modal.value = true;
   action.value = "addData";
@@ -407,7 +421,7 @@ function resetFilter() {
  * @param update function
  * @param name ชื่อ Selec
  */
-function filterSelector(val: any, update: Function, name: any) {
+function filterSelector(val: string, update: Function, name: string) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "employeeClassOps") {
@@ -429,11 +443,6 @@ function filterSelector(val: any, update: Function, name: any) {
   });
 }
 
-/** Hook*/
-onMounted(async () => {
-  await fecthRound();
-});
-
 /** function callblack ทำงานเมือมีการเปลี่ยน Tab*/
 watch(tab, async () => {
   insigniaList.value = await DataStore.insigniaOp.filter(
@@ -443,6 +452,11 @@ watch(tab, async () => {
   fileterInsigniaList.value = insigniaList.value;
   fecthlistInsignia();
 });
+
+/** Hook*/
+onMounted(async () => {
+  await fecthRound();
+});
 </script>
 
 <template>
diff --git a/src/modules/07_insignia/components/report/ReportView.vue b/src/modules/07_insignia/views/06_ReportMain.vue
similarity index 53%
rename from src/modules/07_insignia/components/report/ReportView.vue
rename to src/modules/07_insignia/views/06_ReportMain.vue
index f7d561c67..5f02e0595 100644
--- a/src/modules/07_insignia/components/report/ReportView.vue
+++ b/src/modules/07_insignia/views/06_ReportMain.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-// import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 const router = useRouter();
-// const store = useInsigniaDataStore();
 
-const nextPage = (type: string, title: string) => {
-  router.push(`/insignia/report/report/${type}`);
-};
+/**
+ * ฟังก์ชัน Redirect ไปหน้ารายงานที่เลือก
+ * @param type  ประเภทรายงาน
+ */
+function nextPage(type: string) {
+  router.push(`/insignia/report/${type}`);
+}
 </script>
 
 <template>
@@ -16,26 +18,7 @@ const nextPage = (type: string, title: string) => {
   <div>
     <q-card flat bordered class="col-12 q-mt-sm">
       <div class="q-pa-md">
-        <!-- <q-item to="/insignia/report/report-01" dense class="hover-green">
-          <q-item-section avatar>
-            <q-icon color="primary" name="mdi-file" size="xs" />
-          </q-item-section>
-          <q-item-section class="text-dark">
-            รายงาน ขร.1 - ขร.4
-          </q-item-section>
-        </q-item> -->
-
-        <q-item
-          clickable
-          @click="
-            nextPage(
-              '45',
-              'บัญชีรายชื่อข้าราชการผู้ขอพระราชทานเครื่องราชอิสริยาภรณ์'
-            )
-          "
-          dense
-          class="hover-green"
-        >
+        <q-item clickable @click="nextPage('45')" dense class="hover-green">
           <q-item-section avatar>
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
@@ -44,14 +27,7 @@ const nextPage = (type: string, title: string) => {
           </q-item-section>
         </q-item>
 
-        <q-item
-          clickable
-          @click="
-            nextPage('43', 'บัญชีระดับผลการประเมินผลการปฏิบัติราชการในรอบ 5 ปี')
-          "
-          dense
-          class="hover-green"
-        >
+        <q-item clickable @click="nextPage('43')" dense class="hover-green">
           <q-item-section avatar>
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
@@ -60,12 +36,7 @@ const nextPage = (type: string, title: string) => {
           </q-item-section>
         </q-item>
 
-        <q-item
-          clickable
-          @click="nextPage('44', 'บัญชีแสดงจำนวนชั้นตราเครื่องราชฯ')"
-          dense
-          class="hover-green"
-        >
+        <q-item clickable @click="nextPage('44')" dense class="hover-green">
           <q-item-section avatar>
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
diff --git a/src/modules/07_insignia/views/Main.vue b/src/modules/07_insignia/views/Main.vue
deleted file mode 100644
index e8e23c42e..000000000
--- a/src/modules/07_insignia/views/Main.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts"></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-card>
-  </div>
-</template>
-
-<style lang="scss" scope></style>
diff --git a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
index fb6789972..96dfb155e 100644
--- a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
+++ b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
@@ -206,8 +206,8 @@ watch(
                 borderless
                 v-model="formData.startTimeMorning"
                 :rules="[
-                  (val) => !!val || 'กรุณากรอกเวลาเข้างาน',
-                  (val) => {
+                  (val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
+                  (val:string) => {
                     if (val && formData.endTimeMorning) {
                       if (val > formData.endTimeMorning) {
                         return 'ต้องน้อยกว่าเวลาออกงาน';
@@ -243,8 +243,8 @@ watch(
                 lazy-rules
                 borderless
                 :rules="[
-                  (val) => !!val || 'กรุณากรอกเวลาออกงาน',
-                  (val) => {
+                  (val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
+                  (val:string) => {
                     if (val && formData.startTimeMorning) {
                       if (val < formData.startTimeMorning) {
                         return 'ต้องมากกว่าเวลาเข้างาน';
@@ -277,8 +277,8 @@ watch(
               <q-input
                 ref="pmRef"
                 :rules="[
-                  (val) => !!val || 'กรุณากรอกเวลาเข้างาน',
-                  (val) => {
+                  (val:string) => !!val || 'กรุณากรอกเวลาเข้างาน',
+                  (val:string) => {
                     if (val && formData.endTimeAfternoon) {
                       if (val > formData.endTimeAfternoon) {
                         return 'ต้องน้อยกว่าเวลาออกงาน';
@@ -314,8 +314,8 @@ watch(
               <q-input
                 ref="pmOutRef"
                 :rules="[
-                  (val) => !!val || 'กรุณากรอกเวลาออกงาน',
-                  (val) => {
+                  (val:string) => !!val || 'กรุณากรอกเวลาออกงาน',
+                  (val:string) => {
                     if (val && formData.startTimeAfternoon) {
                       if (val < formData.startTimeAfternoon) {
                         return 'ต้องมากกว่าเวลาเข้างาน';
@@ -414,6 +414,7 @@ watch(
 </template>
 
 <style scoped lang="scss">
+@use "sass:math";
 .mt {
   margin-top: 10px;
 }
@@ -433,7 +434,7 @@ $toggle-control-ease: ease-in;
 
 // These are our computed variables
 // change at your own risk.
-$toggle-radius: ($toggle-height / 2);
+$toggle-radius: math.div($toggle-height, 2);
 $toggle-control-size: $toggle-height - ($toggle-gutter * 2);
 
 .toggle-control {
diff --git a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
index 18b7d9ac3..64d7256a8 100644
--- a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@@ -346,6 +346,7 @@ watch(
 </template>
 
 <style scoped lang="scss">
+@use "sass:math";
 .mt {
   margin-top: 10px;
 }
@@ -365,7 +366,7 @@ $toggle-control-ease: ease-in;
 
 // These are our computed variables
 // change at your own risk.
-$toggle-radius: ($toggle-height / 2);
+$toggle-radius: math.div($toggle-height, 2);
 $toggle-control-size: $toggle-height - ($toggle-gutter * 2);
 
 .toggle-control {
diff --git a/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
index b11bbb095..917db463a 100644
--- a/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
+++ b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
@@ -9,7 +9,7 @@ import { useRoute } from "vue-router";
 
 import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
 import type { OpType } from "@/modules/05_placement/interface/response/Main";
-import type { DataListRow } from "@/modules/11_discipline/interface/request/result";
+import type { DataPerson } from "@/modules/11_discipline/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -28,7 +28,7 @@ const {
 const optionsType = ref<[]>([]);
 const idPath = ref<string>(route.params.id as string);
 const type = ref<string>("");
-const rows = ref<DataListRow[]>([]);
+const rows = ref<DataPerson[]>([]);
 const selected = ref<ResponseData[]>([]);
 
 const props = defineProps({
diff --git a/src/modules/11_discipline/components/8_AppealComplain/Form.vue b/src/modules/11_discipline/components/8_AppealComplain/Form.vue
index 7ad9dc341..3b43898f6 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/Form.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/Form.vue
@@ -20,7 +20,6 @@ import DialogHistory from "@/modules/11_discipline/components/8_AppealComplain/d
 
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const mainStore = useDisciplineMainStore();
-const router = useRouter();
 const route = useRoute();
 const checkRoutePermission = ref<boolean>(route.name == "appealComplainDetail");
 /** รับ props มาจากหน้าหลัก */
@@ -366,6 +365,7 @@ onMounted(() => {
   dataStore.visibleColumns = visibleColumns.value;
 });
 </script>
+
 <template>
   <div class="row q-col-gutter-xs">
     <form @submit.prevent="validateForm" class="col-12 row">
@@ -541,7 +541,7 @@ onMounted(() => {
                       v-model="formData.title"
                       lazy-rules
                       :rules="[
-                        (val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
+                        (val:string) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
                       ]"
                       label="เรื่องอุทธรณ์/ร้องทุกข์"
                     />
@@ -559,7 +559,7 @@ onMounted(() => {
                     v-model="formData.description"
                     lazy-rules
                     :rules="[
-                      (val) => !!val || 'กรุณากรอกรายละเอียดอุทธรณ์/ร้องทุกข์',
+                      (val:string) => !!val || 'กรุณากรอกรายละเอียดอุทธรณ์/ร้องทุกข์',
                     ]"
                     label="รายละเอียดอุทธรณ์/ร้องทุกข์"
                     type="textarea"
@@ -757,7 +757,7 @@ onMounted(() => {
   />
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 .icon-color {
   color: #4154b3;
 }
diff --git a/src/modules/11_discipline/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index 8ab9057d4..3830033c0 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -74,8 +74,32 @@ interface FileLists {
 
 interface HistoryResultCommand {
   commandSubject: string;
-  createdAt: Date|null; 
-  lastUpdatedAt: Date|null; 
+  createdAt: Date | null;
+  lastUpdatedAt: Date | null;
+}
+
+interface DataPerson {
+  id: string;
+  idInvestigate: string;
+  idComplaint: string;
+  respondentType: string;
+  persons: PersonType;
+  organizationId: string;
+  resultDescription: string;
+}
+interface PersonType {
+  id: string;
+  idcard: string;
+  name: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  position: string;
+  positionLevel: string;
+  salary: number;
+  personId: string;
+  posNo: string;
+  organization: string;
 }
 
 export type {
@@ -88,5 +112,6 @@ export type {
   FileLists,
   DataOptioGroup,
   DataOptionYear,
-  HistoryResultCommand
+  HistoryResultCommand,
+  DataPerson,
 };
diff --git a/src/modules/15_development/components/DialogRecordPerson.vue b/src/modules/15_development/components/DialogRecordPerson.vue
index 9ad5aad10..03a488880 100644
--- a/src/modules/15_development/components/DialogRecordPerson.vue
+++ b/src/modules/15_development/components/DialogRecordPerson.vue
@@ -17,8 +17,6 @@ import type { ResPrefix } from "@/modules/15_development/interface/response/Main
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** importStore*/
-
 const $q = useQuasar();
 const route = useRoute();
 const {
@@ -487,4 +485,4 @@ watch(
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/modules/16_positionEmployee/components/TreeTable.vue b/src/modules/16_positionEmployee/components/TreeTable.vue
index 312972696..db6a6aa84 100644
--- a/src/modules/16_positionEmployee/components/TreeTable.vue
+++ b/src/modules/16_positionEmployee/components/TreeTable.vue
@@ -31,10 +31,6 @@ import DialogHistoryPos from "@/modules/16_positionEmployee/components/DialogHis
 import DialogSelectPerson from "@/modules/16_positionEmployee/components/DialogSelectPerson.vue";
 import DialogSuccession from "@/modules/16_positionEmployee/components/DialogSuccession.vue";
 
-/**
- * importStore
- */
-
 /**
  * ues
  */
diff --git a/src/modules/18_command/components/Step/0_Main.vue b/src/modules/18_command/components/Step/0_Main.vue
index d5fa07909..f45c19ae3 100644
--- a/src/modules/18_command/components/Step/0_Main.vue
+++ b/src/modules/18_command/components/Step/0_Main.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeMount, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
@@ -79,7 +79,7 @@ function onConfirmSignature() {
   );
 }
 
-onBeforeMount(async () => {
+onMounted(async () => {
   await fetchData();
 });
 </script>
diff --git a/src/modules/18_command/components/Step/1_Detail.vue b/src/modules/18_command/components/Step/1_Detail.vue
index 3419896d5..1a480e21c 100644
--- a/src/modules/18_command/components/Step/1_Detail.vue
+++ b/src/modules/18_command/components/Step/1_Detail.vue
@@ -38,6 +38,7 @@ let formData = reactive<FormDataDetail>({
   issue: null,
   commandAffectDate: null, //วันที่ลงนาม
   commandExcecuteDate: null, //วันที่คำสั่งมีผล
+  isBangkok: false,
 });
 const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
 
@@ -164,6 +165,7 @@ defineExpose({
 
       <div class="col-4">
         <datepicker
+          clearable
           menu-class-name="modalfix"
           v-model="formData.commandAffectDate"
           :locale="'th'"
@@ -181,6 +183,7 @@ defineExpose({
           </template>
           <template #trigger>
             <q-input
+              clearable
               dense
               outlined
               hide-bottom-space
@@ -192,6 +195,7 @@ defineExpose({
                   : date2Thai(formData.commandAffectDate)
               "
               :label="`${'วันที่ลงนาม'}`"
+              @clear="() => (formData.commandAffectDate = null)"
             >
               <template v-slot:prepend>
                 <q-icon
@@ -207,6 +211,7 @@ defineExpose({
       </div>
       <div class="col-4">
         <datepicker
+          clearable
           menu-class-name="modalfix"
           v-model="formData.commandExcecuteDate"
           :locale="'th'"
@@ -224,6 +229,7 @@ defineExpose({
           </template>
           <template #trigger>
             <q-input
+              clearable
               dense
               outlined
               hide-bottom-space
@@ -235,6 +241,7 @@ defineExpose({
                   : date2Thai(formData.commandExcecuteDate)
               "
               :label="`${'วันที่คำสั่งมีผล'}`"
+              @clear="() => (formData.commandExcecuteDate = null)"
             >
               <template v-slot:prepend>
                 <q-icon
@@ -257,7 +264,7 @@ defineExpose({
           dense
           v-model="formData.detailHeader"
           hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งส่วนต้น'}`"
+          :label="`${'เนื้อหาคำสั่งขึ้นต้น (optional)'}`"
           @update:model-value="onCheckChangeData()"
           type="textarea"
         />
@@ -309,9 +316,10 @@ defineExpose({
           dense
           v-model="formData.detailBody"
           hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งส่วนกลาง'}`"
+          :label="`${'เนื้อหาคำสั่งหลัก'}`"
           @update:model-value="onCheckChangeData()"
           type="textarea"
+          :rules="[(val: string) => !!val || `${'กรุณากรอกเนื้อหาคำสั่งหลัก'}`]"
         />
         <!-- <q-card bordered flat>
           <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
@@ -361,7 +369,7 @@ defineExpose({
           dense
           v-model="formData.detailFooter"
           hide-bottom-space
-          :label="`${'เนื้อหาคำสั่งส่วนท้าย'}`"
+          :label="`${'เนื้อหาคำสั่งลงท้าย (optional)'}`"
           @update:model-value="onCheckChangeData()"
           type="textarea"
         />
@@ -403,6 +411,16 @@ defineExpose({
           </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>
 
diff --git a/src/modules/18_command/components/Step/View0_Digital.vue b/src/modules/18_command/components/Step/View0_Digital.vue
index e99b61200..8e973cc32 100644
--- a/src/modules/18_command/components/Step/View0_Digital.vue
+++ b/src/modules/18_command/components/Step/View0_Digital.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
+import axios from "axios";
 
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
@@ -107,6 +108,8 @@ const reason = ref<string>("");
 //รอออกคำสั่ง
 const isCheckOrder = ref<boolean>(true); //เช็ครอออกคำสั่ง
 
+const isLoad = ref<boolean>(false); //แสดงโหลด
+
 /**
  * ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
  */
@@ -173,11 +176,125 @@ function onCloseDialog() {
   modalComment.value = false;
 }
 
-onMounted(() => {});
+async function fetchDoc(group: string) {
+  showLoader();
+  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
+  await http
+    .get(config.API.file("ระบบออกคำสั่ง", type, commandId.value))
+    .then((res) => {
+      const data = res.data[0];
+      if (group === "order") {
+        fileOrder.value = data;
+      } else {
+        fileTailer.value = data;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onUploadFile(group: string) {
+  showLoader();
+  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
+  let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
+  const fileName = { fileName: type };
+  http
+    .post(config.API.file("ระบบออกคำสั่ง", type, commandId.value), {
+      replace: true,
+      fileList: fileName,
+    })
+    .then(async (res) => {
+      const foundKey: string | undefined = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      foundKey &&
+        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, group));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
+  const formData = new FormData();
+  formData.append("file", file);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async () => {
+      await fetchDoc(group);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      if (group === "order") {
+        fileUploadOrder.value = null;
+      } else {
+        fileUploadTailer.value = null;
+      }
+      hideLoader();
+    });
+}
+
+/**
+ * ดาวน์โหลดลิงก์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(file: any, group: string) {
+  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile(
+        "ระบบออกคำสั่ง",
+        type,
+        commandId.value,
+        file.fileName
+      )
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  isLoad.value = false;
+  let promises = [fetchDoc("order")];
+  if (isAttachment.value) {
+    promises.push(fetchDoc("tailer"));
+  }
+  await Promise.all(promises).finally(() => {
+    isLoad.value = true;
+  });
+});
 </script>
 
 <template>
-  <div class="q-px-lg q-py-md">
+  <div class="q-px-lg q-py-md" v-if="isLoad">
     <q-timeline :color="store.status === 'CANCEL' ? 'grey-4' : 'blue-5'">
       <!-- แบบร่าง -->
       <q-timeline-entry
@@ -185,112 +302,121 @@ onMounted(() => {});
         :icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : 'mdi-numeric-1'"
       >
         <div class="row q-col-gutter-sm">
-          <div :class="isAttachment ? 'col-12' : 'col-6'">
-            <fieldset class="border q-px-lg q-py-sm">
-              <legend class="text-header q-px-sm">
-                อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
-              </legend>
-              <div class="row q-col-gutter-md q-mb-md">
-                <!-- คำสั่ง -->
-                <div :class="isAttachment ? 'col-6' : 'col-12'">
-                  <label class="text-file">คำสั่ง</label>
-                  <div class="text-right" v-if="fileOrder">
-                    <q-btn flat dense color="primary" icon="mdi-eye" rounded>
-                      <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
-                    </q-btn>
-                    <!-- :href="OrderPDFUpload" -->
-                    <q-btn
-                      rounded
-                      type="a"
-                      flat
-                      dense
-                      color="red"
-                      icon="mdi-download"
-                      target="_blank"
-                    >
-                      <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
-                    </q-btn>
-                  </div>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12 text-header">
+              อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
+            </div>
+            <div class="col-6">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
+              >
+                <div
+                  class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                >
+                  คำสั่ง
+                  <q-space />
+                  <q-btn
+                    v-if="fileOrder"
+                    rounded
+                    flat
+                    dense
+                    color="red"
+                    icon="mdi-download"
+                    @click.prevent="downloadFile(fileOrder, 'order')"
+                  >
+                    <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
+                  </q-btn>
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-md" v-if="step === 1">
                   <q-file
-                    v-if="step === 1"
                     outlined
                     dense
                     v-model="fileUploadOrder"
                     label="เลือกไฟล์คำสั่ง"
                     hide-bottom-space
-                    :rules="[(val:string) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
                     accept=".pdf"
                     :readonly="store.readonly"
                   >
                     <template v-slot:prepend>
                       <q-icon name="attach_file" />
                     </template>
+
+                    <template v-slot:after>
+                      <q-btn
+                        @click.prevent="onUploadFile('order')"
+                        flat
+                        round
+                        icon="mdi-upload"
+                        :color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
+                        :disable="fileUploadOrder == null"
+                      />
+                    </template>
                   </q-file>
                 </div>
+              </q-card>
+            </div>
 
-                <!-- เอกสารแนบท้าย -->
-                <div v-if="isAttachment" class="col-6">
-                  <label class="text-file">เอกสารแนบท้าย</label>
-                  <div class="text-right" v-if="fileTailer">
-                    <q-btn flat dense color="primary" icon="mdi-eye" rounded>
-                      <q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
-                    </q-btn>
-                    <!-- :href="TailerPDFUpload" -->
-                    <q-btn
-                      type="a"
-                      rounded
-                      flat
-                      dense
-                      color="red"
-                      icon="mdi-download"
-                      target="_blank"
-                    >
-                      <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
-                    </q-btn>
-                  </div>
-
+            <div class="col-6" v-if="isAttachment">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
+              >
+                <div
+                  class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                >
+                  เอกสารแนบท้าย
+                  <q-space />
+                  <q-btn
+                    v-if="fileTailer"
+                    rounded
+                    flat
+                    dense
+                    color="red"
+                    icon="mdi-download"
+                    @click.prevent="downloadFile(fileTailer, 'tailer')"
+                  >
+                    <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
+                  </q-btn>
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-md" v-if="step === 1">
                   <q-file
-                    v-if="step === 1"
                     outlined
                     dense
                     v-model="fileUploadTailer"
                     label="เลือกไฟล์เอกสารแนบท้าย"
                     hide-bottom-space
-                    :rules="[(val:string) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
                     accept=".pdf"
                     :readonly="store.readonly"
                   >
                     <template v-slot:prepend>
                       <q-icon name="attach_file" />
                     </template>
+
+                    <template v-slot:after>
+                      <q-btn
+                        @click.prevent="onUploadFile('tailer')"
+                        flat
+                        round
+                        icon="mdi-upload"
+                        :color="fileUploadTailer == null ? 'grey-5' : 'blue-5'"
+                        :disable="fileUploadTailer == null"
+                      />
+                      <q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
+                    </template>
                   </q-file>
                 </div>
-
-                <div class="row col-12" v-if="!store.readonly">
-                  <q-space />
-                  <q-btn
-                    icon="mdi-upload"
-                    label="อัปโหลดเอกสารส"
-                    :color="
-                      fileUploadOrder == null ||
-                      (isAttachment && fileUploadTailer === null)
-                        ? 'grey-5'
-                        : 'blue-5'
-                    "
-                    :disable="
-                      fileUploadOrder == null ||
-                      (isAttachment && fileUploadTailer === null)
-                    "
-                  >
-                  </q-btn>
-                </div>
-              </div>
-            </fieldset>
+              </q-card>
+            </div>
           </div>
 
           <div
             class="col-12"
-            v-if="!isCheckDraft && fileOrder && (isAttachment || fileTailer)"
+            v-if="!isCheckDraft && fileOrder && (!isAttachment || fileTailer)"
           >
             <q-btn
               v-if="!store.readonly"
@@ -401,6 +527,23 @@ onMounted(() => {});
     </q-timeline>
   </div>
 
+  <div class="full-width row flex-center text-accent q-gutter-sm" v-else>
+    <span
+      ><div
+        style="
+          height: 50vh;
+          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-dialog v-model="modalSelect" persistent>
     <q-card style="min-width: 70%">
@@ -554,11 +697,6 @@ onMounted(() => {});
 </template>
 
 <style lang="scss" scoped>
-.border {
-  border-radius: 10px;
-  border: 1px solid #e9eaec;
-}
-
 .text-header {
   color: #34373c;
   font-size: 1rem;
diff --git a/src/modules/18_command/components/Step/View0_Live.vue b/src/modules/18_command/components/Step/View0_Live.vue
index f1a308560..19c90b611 100644
--- a/src/modules/18_command/components/Step/View0_Live.vue
+++ b/src/modules/18_command/components/Step/View0_Live.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeMount, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 
@@ -8,7 +8,6 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { log } from "console";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -42,8 +41,7 @@ const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแน
 const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
 
-//รอออกคำสั่ง
-const isCheckOrder = ref<boolean>(false); //เช็ครอออกคำสั่ง
+const isLoad = ref<boolean>(false); //แสดงโหลด
 
 /**
  * ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
@@ -73,6 +71,10 @@ function onConfirmDraft() {
   );
 }
 
+/**
+ * ฟังก์ชันเลือกผู้มีอำนาจลงนามอนุมัติแล้ว
+ * @param val ค่าที่เลือก เป็น boolean
+ */
 async function updateCheckboxAuthority(val: boolean) {
   showLoader();
   await http
@@ -88,6 +90,10 @@ async function updateCheckboxAuthority(val: boolean) {
     });
 }
 
+/**
+ * ฟังก์ชันสร้าง URL อัปโหลดไฟล์
+ * @param group ประเภพไฟล์ "คำสั่ง","แนบท้าย"
+ */
 function onUploadFile(group: string) {
   showLoader();
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
@@ -116,7 +122,10 @@ function onUploadFile(group: string) {
 }
 
 /**
- * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์ "คำสั่ง","แนบท้าย"
+ * @param uploadUrl URL อัปโหลดไฟล์
+ * @param file ไฟล์ที่ต้องการอัปโหลด
+ * @param group ประเภพไฟล์ "คำสั่ง","แนบท้าย"
  */
 async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
   const formData = new FormData();
@@ -144,6 +153,10 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
     });
 }
 
+/**
+ * ฟังก์ชันดึงข่อมูลไฟล์ "คำสั่ง","แนบท้าย"
+ * @param group ประเภพไฟล์ "คำสั่ง","แนบท้าย"
+ */
 async function fetchDoc(group: string) {
   showLoader();
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
@@ -236,21 +249,21 @@ onMounted(async () => {
   isCheckDraft.value = isDraft.value;
   isCheckAuthority.value = isAuthority.value;
 
-  if (step.value > 1) {
-    showLoader();
+  if (step.value !== 1) {
+    isLoad.value = false;
     let promises = [fetchDoc("order")];
     if (isAttachment.value) {
       promises.push(fetchDoc("tailer"));
     }
     await Promise.all(promises).finally(() => {
-      hideLoader();
+      isLoad.value = true;
     });
   }
 });
 </script>
 
 <template>
-  <div class="q-px-lg q-py-md">
+  <div class="q-px-lg q-py-md" v-if="isLoad">
     <q-timeline :color="store.status === 'CANCEL' ? 'grey-4' : 'blue-5'">
       <!-- แบบร่าง -->
       <q-timeline-entry
@@ -294,51 +307,53 @@ onMounted(async () => {
             />
           </div>
 
-          <div class="col-6" style="padding-left: 50px" v-if="isAuthority">
-            <fieldset class="border q-px-lg q-py-sm">
-              <legend class="text-header q-px-sm">
-                อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
-              </legend>
-              <div class="row q-col-gutter-md q-mb-md">
-                <!-- คำสั่ง -->
-                <div class="col-12">
-                  <label class="text-file">คำสั่ง</label>
-                  <div v-if="fileOrder">
-                    <q-btn
-                      flat
-                      dense
-                      color="primary"
-                      icon="mdi-eye"
-                      rounded
-                      @click.prevent="downloadFile(fileOrder, 'order')"
-                    >
-                      <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
-                    </q-btn>
+          <div
+            class="row col-12 q-col-gutter-sm"
+            style="padding-left: 50px"
+            v-if="isAuthority"
+          >
+            <div class="col-12 text-header">
+              อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
+            </div>
+            <div class="col-6">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
+              >
+                <div
+                  class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                >
+                  คำสั่ง
+                  <q-space />
+                  <q-btn
+                    v-if="fileOrder"
+                    rounded
+                    flat
+                    dense
+                    color="red"
+                    icon="mdi-download"
+                    @click.prevent="downloadFile(fileOrder, 'order')"
+                  >
+                    <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
+                  </q-btn>
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-md" v-if="step === 2">
+                  <q-file
+                    outlined
+                    dense
+                    v-model="fileUploadOrder"
+                    label="เลือกไฟล์คำสั่ง"
+                    hide-bottom-space
+                    accept=".pdf"
+                    :readonly="store.readonly"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
 
-                    <q-btn rounded flat dense color="red" icon="mdi-download">
-                      <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
-                    </q-btn>
-                  </div>
-
-                  <div class="row q-col-gutter-sm">
-                    <div class="col-11">
-                      <q-file
-                        v-if="step === 2 && !store.readonly"
-                        outlined
-                        dense
-                        v-model="fileUploadOrder"
-                        label="เลือกไฟล์คำสั่ง"
-                        hide-bottom-space
-                        accept=".pdf"
-                        :readonly="store.readonly"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon name="attach_file" />
-                        </template>
-                      </q-file>
-                    </div>
-
-                    <div class="col-1" v-if="!store.readonly && step === 2">
+                    <template v-slot:after>
                       <q-btn
                         @click.prevent="onUploadFile('order')"
                         flat
@@ -347,49 +362,51 @@ onMounted(async () => {
                         :color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
                         :disable="fileUploadOrder == null"
                       />
-                      <q-tooltip>อัปโหลดไฟล์คำสั่ง</q-tooltip>
-                    </div>
-                  </div>
+                    </template>
+                  </q-file>
                 </div>
+              </q-card>
+            </div>
 
-                <!-- เอกสารแนบท้าย -->
-                <div v-if="isAttachment" class="col-12">
-                  <label class="text-file">เอกสารแนบท้าย</label>
-                  <div v-if="fileTailer">
-                    <q-btn
-                      flat
-                      dense
-                      color="primary"
-                      icon="mdi-eye"
-                      rounded
-                      @click.prevent="downloadFile(fileTailer, 'tailer')"
-                    >
-                      <q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
-                    </q-btn>
-                    <q-btn rounded flat dense color="red" icon="mdi-download">
-                      <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
-                    </q-btn>
-                  </div>
+            <div class="col-6" v-if="isAttachment">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
+              >
+                <div
+                  class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                >
+                  เอกสารแนบท้าย
+                  <q-space />
+                  <q-btn
+                    v-if="fileTailer"
+                    rounded
+                    flat
+                    dense
+                    color="red"
+                    icon="mdi-download"
+                    @click.prevent="downloadFile(fileTailer, 'tailer')"
+                  >
+                    <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
+                  </q-btn>
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="col-12 q-pa-md" v-if="step === 2">
+                  <q-file
+                    outlined
+                    dense
+                    v-model="fileUploadTailer"
+                    label="เลือกไฟล์เอกสารแนบท้าย"
+                    hide-bottom-space
+                    accept=".pdf"
+                    :readonly="store.readonly"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
 
-                  <div class="row q-col-gutter-sm">
-                    <div class="col-11">
-                      <q-file
-                        v-if="step === 2 && !store.readonly"
-                        outlined
-                        dense
-                        v-model="fileUploadTailer"
-                        label="เลือกไฟล์เอกสารแนบท้าย"
-                        hide-bottom-space
-                        accept=".pdf"
-                        :readonly="store.readonly"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon name="attach_file" />
-                        </template>
-                      </q-file>
-                    </div>
-
-                    <div class="col-1" v-if="!store.readonly && step === 2">
+                    <template v-slot:after>
                       <q-btn
                         @click.prevent="onUploadFile('tailer')"
                         flat
@@ -399,11 +416,11 @@ onMounted(async () => {
                         :disable="fileUploadTailer == null"
                       />
                       <q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
-                    </div>
-                  </div>
+                    </template>
+                  </q-file>
                 </div>
-              </div>
-            </fieldset>
+              </q-card>
+            </div>
           </div>
 
           <div
@@ -459,14 +476,26 @@ onMounted(async () => {
       </q-timeline-entry>
     </q-timeline>
   </div>
+
+  <div class="full-width row flex-center text-accent q-gutter-sm" v-else>
+    <span
+      ><div
+        style="
+          height: 50vh;
+          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>
 </template>
 
 <style lang="scss" scoped>
-.border {
-  border-radius: 10px;
-  border: 1px solid #e9eaec;
-}
-
 .text-header {
   color: #34373c;
   font-size: 1rem;
diff --git a/src/modules/18_command/interface/request/Main.ts b/src/modules/18_command/interface/request/Main.ts
index 1c157c605..a7e9f8cb7 100644
--- a/src/modules/18_command/interface/request/Main.ts
+++ b/src/modules/18_command/interface/request/Main.ts
@@ -24,6 +24,7 @@ interface FormDataDetail {
   commandExcecuteDate: Date | null;
   commandSysId?: string;
   commandTypeName?: string;
+  isBangkok?: boolean;
 }
 
 interface ListCommandSalaryType {
@@ -48,8 +49,13 @@ interface PersonInfo {
   remarkHorizontal: string | null;
   amount: number;
   positionSalaryAmount: number;
-  mouthSalaryAmount: number; 
+  mouthSalaryAmount: number;
 }
 
-
-export type { FormQuery, FormCommand, FormDataDetail, ListCommandSalaryType ,PersonInfo};
+export type {
+  FormQuery,
+  FormCommand,
+  FormDataDetail,
+  ListCommandSalaryType,
+  PersonInfo,
+};
diff --git a/src/modules/18_command/store/DetailStore.ts b/src/modules/18_command/store/DetailStore.ts
index b33753325..17e77d4fb 100644
--- a/src/modules/18_command/store/DetailStore.ts
+++ b/src/modules/18_command/store/DetailStore.ts
@@ -18,7 +18,7 @@ export const useCommandDetail = defineStore("commandDetailStore", () => {
       case "WAITING":
         return 3;
       case "REPORTED":
-        return 4;
+        return 5;
       default:
         return 0;
     }