diff --git a/src/modules/07_insignia/components/2_Manage/StatCard.vue b/src/modules/07_insignia/components/2_Manage/StatCard.vue
index c5c0e1e0b..5b0283228 100644
--- a/src/modules/07_insignia/components/2_Manage/StatCard.vue
+++ b/src/modules/07_insignia/components/2_Manage/StatCard.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-const sizeCard = (val: number) => {
+/**
+ * @param val sizeCard
+ */
+function sizeCard(val: number) {
   if (val === 5) {
     return "width:20%;";
   }
-};
+}
+
+/** props ข้อมูลจาก listManager*/
 const props = defineProps({
   color: {
     type: String,
diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index f1aaa0dec..ab289ab1b 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -1,21 +1,27 @@
 <script setup lang="ts">
 import { onMounted, ref, computed, reactive } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+
 import { useQuasar, QForm } from "quasar";
-import type { QTableProps } from "quasar";
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
-import { useroleUserDataStore } from "@/stores/roleUser";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRouter } from "vue-router";
 
+/** import Type*/
+import type { QTableProps } from "quasar";
+
+/** import components*/
 import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
 import DialogInformation from "@/components/Dialogs/Information.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
-import btnDownloadFile from "./downloadFile.vue";
+import btnDownloadFile from "@/modules/07_insignia/components/2_Manage/downloadFile.vue";
 
-const myForm = ref<QForm>();
-const router = useRouter();
+/** import Stores*/
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+import { useroleUserDataStore } from "@/stores/roleUser";
+import { useCounterMixin } from "@/stores/mixin";
+/**user stores*/
+const DataStore = useInsigniaDataStore();
+const roleDataStore = useroleUserDataStore();
 const mixin = useCounterMixin();
 const {
   dialogConfirm,
@@ -25,9 +31,10 @@ const {
   success,
   dialogMessageNotify,
 } = mixin;
+
+const myForm = ref<QForm>();
+const router = useRouter();
 const $q = useQuasar();
-const DataStore = useInsigniaDataStore();
-const roleDataStore = useroleUserDataStore();
 
 const modelPopupReject = ref<boolean>(false);
 const modelPopupDelete = ref<boolean>(false);
@@ -35,18 +42,22 @@ const modalAdd = ref<boolean>(false);
 const modalEdit = ref<boolean>(false);
 const rowid = ref<string>("");
 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 dialogWarn = ref<boolean>(false);
 const checkboxData = ref<any>([]);
 
 const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
 const filterOrganizationOP = ref<any>([]);
+
+/** หัวตาราง*/
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -62,7 +73,6 @@ const visibleColumns = ref<string[]>([
   "note",
   "warn",
 ]);
-// หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -182,7 +192,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "index",
@@ -211,31 +220,11 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  // {
-  //   name: "position",
-  //   required: true,
-  //   label: "หมายเหตุ",
-  //   field: "position",
-  //   align: "left",
-  // },
-  // {
-  //   name: "level",
-  //   required: true,
-  //   label: "แจ้งเตื่อน",
-  //   field: "level",
-  //   align: "left",
-  // },
-  // {
-  //   name: "organizationOrganization",
-  //   required: true,
-  //   label: "สังกัด",
-  //   field: "organizationOrganization",
-  //   align: "left",
-  // },
 ]);
 
 const rows2 = ref<any[]>([]);
 const person = ref<any>([]);
+
 const props = defineProps({
   tab: {
     type: String,
@@ -260,29 +249,7 @@ const props = defineProps({
   },
 });
 
-onMounted(async () => {
-  // organization.value = await (DataStore.agency != null
-  //   ? DataStore.agency
-  //   : DataStore.typeOc);
-
-  organizationOptions.value = await DataStore.optionsTypeOc;
-  organization.value = await DataStore.typeOc;
-  console.log(organization.value);
-
-  if (organization.value !== "" || organization.value !== undefined) {
-    if (props.fecthInsigniaByOc) {
-      props.fecthInsigniaByOc(
-        props.roundId,
-        organization.value,
-        "officer",
-        props.tab
-      );
-      DataStore.mainTab = props.tab;
-    }
-  }
-  filterOrganizationOP.value = organizationOptions.value;
-});
-// เช็คสถานนะแสดงปุ่มเพิ่ม
+/** เช็คสถานนะแสดงปุ่มเพิ่ม*/
 const checkStatus = computed(() => {
   if (
     roleDataStore.insignia1Role &&
@@ -291,8 +258,9 @@ const checkStatus = computed(() => {
     return true;
   } else return false;
 });
-// เลือกหน่วยงาน
-const changtypeOc = () => {
+
+/** เลือกหน่วยงาน*/
+function changtypeOc() {
   if (organization.value !== null) {
     props.fecthInsigniaByOc?.(
       props.roundId,
@@ -302,17 +270,22 @@ const changtypeOc = () => {
     );
   }
   DataStore.typeOc = organization.value;
-};
-// เพิ่มราชชื่อ
-const clickmodalAdd = async () => {
+}
+
+/** function เพิ่มราชชื่อ*/
+async function clickmodalAdd() {
   let ocId = DataStore.typeOc ? DataStore.typeOc : DataStore.agency;
   showLoader();
   await fecthInsignia();
   await fecthlistperson(ocId);
   clearForm();
-};
-// เรียกรายชื่อข้าราชการตามหน่วยงานที่จะเพิ่ม
-const fecthlistperson = async (id: string) => {
+}
+
+/**
+ * function เรียกรายชื่อข้าราชการตามหน่วยงานที่จะเพิ่ม
+ * @param id  หน่วยงาน
+ */
+async function fecthlistperson(id: string) {
   let data = [{}];
   data = [
     {
@@ -346,9 +319,10 @@ const fecthlistperson = async (id: string) => {
     .finally(() => {
       hideLoader();
     });
-};
-// ยืนยันการเพิ่มราชชื่อ
-const clickAdd = async () => {
+}
+
+/** function ยืนยันการเพิ่มราชชื่อ*/
+async function clickAdd() {
   dataPerson.id
     ? await myForm.value!.validate().then((result: boolean) => {
         if (result) {
@@ -363,9 +337,13 @@ const clickAdd = async () => {
         }
       })
     : dialogMessageNotify($q, "กรุณาเลือกราชชื่อที่ต้องการเพิ่ม");
-};
-//เพิ่มราชชื่อข้าราชการ
-const addlistperson = async (id: string) => {
+}
+
+/**
+ * function เพิ่มรายชื่อ
+ * @param id personId
+ */
+async function addlistperson(id: string) {
   showLoader();
   let data = {
     profileId: id,
@@ -393,16 +371,25 @@ const addlistperson = async (id: string) => {
       }
       hideLoader();
     });
-};
-// เปิด POP แก้ไขเครื่องราชฯ
-const clickmodalEdit = (props: any) => {
+}
+
+/**
+ * function openPopup แก้ไขเครื่องราชฯ
+ * @param props รายละเอียด
+ */
+async function clickmodalEdit(props: any) {
   insignia.value = props.insigniaSend;
   person.value = props;
   modalEdit.value = true;
-  fecthInsignia();
-};
-// downloadfile รายชื่อข้าราชการสามัญฯ
-const downloadFile = (response: any, filename: string) => {
+  await fecthInsignia();
+}
+
+/**
+ * function  downloadfile รายชื่อข้าราชการสามัญฯ
+ * @param response 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]));
@@ -410,13 +397,13 @@ const downloadFile = (response: any, filename: string) => {
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
-};
-// เรียก file รายชื่อข้าราชการสามัญฯ
-const downloadFileexcel = async () => {
+}
+
+/** function เรียก file รายชื่อข้าราชการสามัญฯ*/
+async function downloadFileexcel() {
   const findInsigniaId = DataStore.dataInsigniaType.find(
     (e: any) => e.name == DataStore.typeinsignia
   );
-
   showLoader();
   await http
     .put(
@@ -440,9 +427,10 @@ const downloadFileexcel = async () => {
     .finally(() => {
       hideLoader();
     });
-};
-// ยืนยันการแก้ไขเครื่องราช
-const clickSave = () => {
+}
+
+/*** function ยืนยันการแก้ไขเครื่องราช*/
+async function clickSave() {
   dialogConfirm(
     $q,
     async () => {
@@ -451,9 +439,13 @@ const clickSave = () => {
     "ยืนยันการแก้ไขเครื่องราชฯ ที่ยื่นขอ",
     "ต้องการยืนยันการแก้ไขเครื่องราชฯ ที่ยื่นขอนี้หรือไม่ ?"
   );
-};
-// แก้ไขเครื่องราช API
-const listEdit = async (profileId: string) => {
+}
+
+/**
+ *  function แก้ไขเครื่องราช API
+ * @param profileId
+ */
+async function listEdit(profileId: string) {
   let data: any = {
     insigniaId: insignia.value,
   };
@@ -476,27 +468,41 @@ const listEdit = async (profileId: string) => {
         );
       }
     });
-};
-//เปิด POPUP ไม่ยืนขอ
-const clickReject = (id: string) => {
+}
+
+/**
+ * function  openPopup ไม่ยืนขอ
+ * @param id profileId
+ */
+function clickReject(id: string) {
   modelPopupReject.value = true;
   rowid.value = id;
-};
-// ปิด POPUP ไม่ยืนขอ
-const closemodelPopupReject = () => {
+}
+
+/** function closePopup ไม่ยืนขอ*/
+function closemodelPopupReject() {
   modelPopupReject.value = false;
-};
-// ยืนยัน การไม่ยืนขอ
-const savaReasonReject = (reason: string) => {
+}
+
+/**
+ * function ยืนยันการไม่ยืนขอ
+ * @param reason  หมายเหตุ
+ */
+async function savaReasonReject(reason: string) {
   dialogConfirm($q, async () => {
     await listreject(rowid.value, reason);
     if (props.fecthStat) {
       await props.fecthStat(DataStore.roundId);
     }
   });
-};
-// ยืนยัน การไม่ยืนขอ API
-const listreject = async (profileId: string, reason: string) => {
+}
+
+/**
+ * function put ยืนยันการไม่ยืนขอ API
+ * @param profileId profileId
+ * @param reason หมายเหตุ
+ */
+async function listreject(profileId: string, reason: string) {
   await http
     .put(config.API.insigniaReject(profileId), { reason: reason })
     .then(() => {
@@ -516,18 +522,24 @@ const listreject = async (profileId: string, reason: string) => {
       }
       await closemodelPopupReject();
     });
-};
-//เปิด POPUP คนที่ถูกลบ
-const clickDelete = (id: string) => {
+}
+
+/** function openPopup คนที่ถูกลบ*/
+function clickDelete(id: string) {
   modelPopupDelete.value = true;
   rowid.value = id;
-};
-// ปิด POPUP คนที่ถูกลบ
-const closemodelPopupDelete = () => {
+}
+
+/** function closePopup คนที่ถูกลบ*/
+function closemodelPopupDelete() {
   modelPopupDelete.value = false;
-};
-// ยืนยัน การลบคนที่ถูกลบ
-const savaReasonDelete = (reason: string) => {
+}
+
+/**
+ * function ยืนยัน การลบคนที่ถูกลบ
+ *  @param reason หมายเหตุ
+ */
+async function savaReasonDelete(reason: string) {
   dialogConfirm(
     $q,
     async () => {
@@ -539,9 +551,14 @@ const savaReasonDelete = (reason: string) => {
     "ยืนยันการลบออกข้ออมูล",
     "ต้องการยืนยันการลบข้อมูลนี้หรือไม่ ?"
   );
-};
-//  ยืนยัน คนที่ถูกลบ API
-const listdelete = async (id: string, reason: string) => {
+}
+
+/**
+ * function คนที่ถูกลบ API
+ * @param id profileId
+ * @param reason หมายเหตุ
+ */
+async function listdelete(id: string, reason: string) {
   await http
     .put(config.API.insigniaDelete(id), { reason: reason })
     .then(() => {
@@ -561,7 +578,7 @@ const listdelete = async (id: string, reason: string) => {
       }
       await closemodelPopupDelete();
     });
-};
+}
 const dataPerson = reactive({
   id: "",
   position: "",
@@ -569,13 +586,20 @@ const dataPerson = reactive({
   level: "",
 });
 const reason = ref<string>("");
-const selectPerson = (person: any) => {
+
+/**
+ * function เลือกperson
+ * @paeam person
+ */
+function selectPerson(person: any) {
   dataPerson.id = person.id;
   dataPerson.position = person.position;
   dataPerson.organizationOrganization = person.organizationOrganization;
   dataPerson.level = person.level;
-};
-const clearForm = () => {
+}
+
+/** function clearFormData*/
+function clearForm() {
   filterKeyword2.value = "";
   dataPerson.id = "";
   dataPerson.position = "";
@@ -583,13 +607,14 @@ const clearForm = () => {
   dataPerson.level = "";
   reason.value = "";
   insigniaType.value = "";
-};
+}
 
 const insignia = ref<string>("");
 const insigniaOptions = ref<any>([]);
 const insigniaType = ref<string>("");
-// เรียกประเภทเครื่องราชฯ
-const fecthInsignia = async () => {
+
+/** function เรียกประเภทเครื่องราช*/
+async function fecthInsignia() {
   await http
     .get(config.API.insignia)
     .then((res) => {
@@ -598,11 +623,17 @@ const fecthInsignia = async () => {
     .catch((e) => {
       messageError($q, e);
     });
-};
-const nextPage = (id: string) => {
-  router.push(`/registry/${id}`);
-};
+}
 
+/**
+ *  function redirect to ทะเบียนประวัติ
+ * @param id profileId
+ */
+function nextPage(id: string) {
+  router.push(`/registry/${id}`);
+}
+
+/** ค้นหาข้อมุล table*/
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
@@ -623,34 +654,39 @@ const pagination2 = ref({
   page: 1,
   rowsPerPage: 10,
 });
-const paging = ref<boolean>(true);
-const paging2 = ref<boolean>(true);
-const paginationLabel = (start: number, end: number, total: number) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const paginationLabel2 = (start: number, end: number, total: number) => {
-  if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const closeModalEdit = () => {
+
+/** function closePopup แก้ไข*/
+function closeModalEdit() {
   modalEdit.value = false;
-};
-// เปิด popup หมายเหตุ
-const clickShowreson = (name: string, requestNote: string) => {
+}
+
+/**
+ * function openPopup แสดงหมายเหตุ
+ * @param name ชื่อ
+ * @param requestNote หมายเหตุ
+ */
+function clickShowreson(name: string, requestNote: string) {
   dialogTitle.value = "หมายเหตุ" + name;
   dialogDesc.value = requestNote;
   dialogNote.value = true;
-};
-// ปิด popup หมายเหตุ
-const clickCloseReson = () => {
+}
+
+/** function closePopu หมายเหตุ*/
+function clickCloseReson() {
   dialogNote.value = false;
-};
-const clickShowWarn = (
+}
+
+/**
+ * function แสดงแจ้งเตือน
+ * @param markDiscipline มีโทษทางวินัย
+ * @param markLeave ไม่ได้เลื่อนเงินเดือน/ไม่ได้เลื่อนขั้น เนื่องจากลาเกิน
+ * @param markRate ผลการประเมินการปฏิบัติราชการในรอบ 5 ปี ต่ำกว่าระดับดี (น้อยกว่าร้อยละ 70)
+ */
+function clickShowWarn(
   markDiscipline: boolean,
   markLeave: boolean,
   markRate: boolean
-) => {
+) {
   checkboxData.value = [
     { id: 1, name: "มีโทษทางวินัย", val: markDiscipline },
     {
@@ -665,9 +701,15 @@ const clickShowWarn = (
     },
   ];
   dialogWarn.value = true;
-};
+}
 
-const filterSelector = (val: any, update: Function, name: any) => {
+/**
+ * function ค้นหาข้อมูล option
+ * @param val คำค้นหา
+ * @param update function
+ * @param name ชื่อ selec
+ */
+function filterSelector(val: any, update: Function, name: any) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "typeinsigniaOptions") {
@@ -686,9 +728,13 @@ const filterSelector = (val: any, update: Function, name: any) => {
       );
     }
   });
-};
+}
 
-const clearInsigniaFilters = (name: string) => {
+/**
+ * function clearfilter เครื่องราช
+ * @param name ชื่อ selec
+ */
+function clearInsigniaFilters(name: string) {
   if (name === "typeinsigniaOptions") {
     DataStore.typeinsignia = "all";
     typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
@@ -696,7 +742,27 @@ const clearInsigniaFilters = (name: string) => {
     DataStore.employeeClass = "all";
     employeeClassOps.value = DataStore.employeeClassOps;
   }
-};
+}
+
+/** Hook*/
+onMounted(async () => {
+  organizationOptions.value = await DataStore.optionsTypeOc;
+  organization.value = await DataStore.typeOc;
+  console.log(organization.value);
+
+  if (organization.value !== "" || organization.value !== undefined) {
+    if (props.fecthInsigniaByOc) {
+      props.fecthInsigniaByOc(
+        props.roundId,
+        organization.value,
+        "officer",
+        props.tab
+      );
+      DataStore.mainTab = props.tab;
+    }
+  }
+  filterOrganizationOP.value = organizationOptions.value;
+});
 </script>
 
 <template>
@@ -768,7 +834,7 @@ const clearInsigniaFilters = (name: string) => {
       <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
         <div class="row col-12 q-col-gutter-sm">
           <q-select
-            :class="roleDataStore.adminRole ? 'col-1':'col-3'"
+            :class="roleDataStore.adminRole ? 'col-1' : 'col-3'"
             v-model="DataStore.typeinsignia"
             label="ประเภทเครื่องราชฯ ที่ยืนขอ"
             dense
@@ -891,7 +957,7 @@ const clearInsigniaFilters = (name: string) => {
         </div>
       </q-card>
       <div class="col-12 q-pt-sm">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="DataStore.rows"
@@ -903,7 +969,6 @@ const clearInsigniaFilters = (name: string) => {
           dense
           class="custom-header-table"
           :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
           v-model:pagination="pagination"
         >
           <template v-slot:header="props">
@@ -1092,19 +1157,7 @@ const clearInsigniaFilters = (name: string) => {
               <q-td v-else auto-width></q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+        </d-table>
       </div>
     </div>
   </div>
@@ -1143,7 +1196,7 @@ const clearInsigniaFilters = (name: string) => {
                   </template>
                 </q-input>
               </q-toolbar>
-              <q-table
+              <d-table
                 flat
                 bordered
                 dense
@@ -1152,7 +1205,6 @@ const clearInsigniaFilters = (name: string) => {
                 :filter="filterKeyword2"
                 row-key="fullname"
                 class="custom-header-table"
-                :pagination-label="paginationLabel2"
                 v-model:pagination="pagination2"
               >
                 <template v-slot:header="props">
@@ -1182,18 +1234,7 @@ const clearInsigniaFilters = (name: string) => {
                     </q-td>
                   </q-tr>
                 </template>
-                <template v-slot:pagination="scope">
-                  <q-pagination
-                    v-model="pagination2.page"
-                    color="primary"
-                    :max="scope.pagesNumber"
-                    :max-pages="5"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                  ></q-pagination>
-                </template>
-              </q-table>
+              </d-table>
             </q-card>
           </div>
           <div class="col-xs-12 col-sm-5">
diff --git a/src/modules/07_insignia/components/2_Manage/Tab2.vue b/src/modules/07_insignia/components/2_Manage/Tab2.vue
index 18527764f..fa33249f2 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab2.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab2.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts">
 import { onMounted, ref, watch, reactive } from "vue";
-import type { QTableProps } from "quasar";
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 import { useRouter } from "vue-router";
-import DialogInformation from "@/components/Dialogs/Information.vue";
-import { useroleUserDataStore } from "@/stores/roleUser";
 
+/** import Type*/
+import type { QTableProps } from "quasar";
+
+/** import components*/
+import DialogInformation from "@/components/Dialogs/Information.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 DataStore = useInsigniaDataStore();
+
 const props = defineProps({
   tab: {
     type: String,
@@ -30,19 +37,8 @@ const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }
 const filterOrganizationOP = ref<any>([]);
 const typeinsigniaOptions = ref<any>(DataStore.typeinsigniaOptions);
 const employeeClassOps = ref<any>(DataStore.employeeClassOps);
-const visibleColumns = ref<string[]>([
-  "no",
-  "citizenId",
-  "name",
-  "employeeType",
-  "position",
-  "level",
-  "salary",
-  "insigniaType",
-  "insigniaSend",
-  "insigniaLevel",
-]);
-// หัวตาราง
+
+/** หัวตาราง*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -145,29 +141,21 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-// ข้อมูลตาราง (จำลอง)
+const visibleColumns = ref<string[]>([
+  "no",
+  "citizenId",
+  "name",
+  "employeeType",
+  "position",
+  "level",
+  "salary",
+  "insigniaType",
+  "insigniaSend",
+  "insigniaLevel",
+]);
 
-onMounted(async () => {
-  organizationOptions.value = await DataStore.optionsTypeOc;
-  organization.value = await DataStore.typeOc;
-  // organization.value = await (DataStore.agency != null
-  //   ? DataStore.agency
-  //   : DataStore.typeOc);
-  if (organization.value !== "" || organization.value !== undefined) {
-    if (props.fecthInsigniaByOc) {
-      await props.fecthInsigniaByOc(
-        props.roundId,
-        organization.value,
-        "officer",
-        props.tab
-      );
-      DataStore.mainTab = props.tab;
-    }
-  }
-  filterOrganizationOP.value = organizationOptions.value;
-});
-// เลือกหน่วยงาน
-const changtypeOc = () => {
+/** function เลือกหน่วยงาน */
+function changtypeOc() {
   if (organization.value !== null) {
     props.fecthInsigniaByOc?.(
       props.roundId,
@@ -177,11 +165,17 @@ const changtypeOc = () => {
     );
   }
   DataStore.typeOc = organization.value;
-};
-const nextPage = (id: string) => {
-  router.push(`/registry/${id}`);
-};
+}
 
+/**
+ *  function redirect ทะเบียนประวัติิ
+ * @param id profileId
+ */
+function nextPage(id: string) {
+  router.push(`/registry/${id}`);
+}
+
+/** filter table*/
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
@@ -194,25 +188,34 @@ const pagination = ref({
   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;
-};
 
+/** หมายเหตุ*/
 const dialogNote = ref<boolean>(false);
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
-const showReson = (name: string, requestNote: string) => {
+/**
+ * function openPopup แสดง หมายเหตุ
+ * @param name ชื่อ
+ * @param requestNote หมายเหตุ
+ */
+function showReson(name: string, requestNote: string) {
   dialogTitle.value = "เหตุผลการไม่ยื่นขอ " + name;
   dialogDesc.value = requestNote;
   dialogNote.value = true;
-};
+}
 
-const closeReson = () => {
+/** function closePopup หมายเหตุ*/
+function closeReson() {
   dialogNote.value = false;
-};
-const filterSelector = (val: any, update: Function, name: any) => {
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update funtion
+ * @param name ชื่อ selec
+ */
+function filterSelector(val: any, update: Function, name: any) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "typeinsigniaOptions") {
@@ -231,8 +234,13 @@ const filterSelector = (val: any, update: Function, name: any) => {
       );
     }
   });
-};
-const clearInsigniaFilters = (name: string) => {
+}
+
+/**
+ * function clearfilter เครื่องราช
+ * @param name ชื่อ selec
+ */
+function clearInsigniaFilters(name: string) {
   if (name === "typeinsigniaOptions") {
     DataStore.typeinsignia = "all";
     typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
@@ -240,7 +248,25 @@ const clearInsigniaFilters = (name: string) => {
     DataStore.employeeClass = "all";
     employeeClassOps.value = DataStore.employeeClassOps;
   }
-};
+}
+
+/*** Hook*/
+onMounted(async () => {
+  organizationOptions.value = await DataStore.optionsTypeOc;
+  organization.value = await DataStore.typeOc;
+  if (organization.value !== "" || organization.value !== undefined) {
+    if (props.fecthInsigniaByOc) {
+      await props.fecthInsigniaByOc(
+        props.roundId,
+        organization.value,
+        "officer",
+        props.tab
+      );
+      DataStore.mainTab = props.tab;
+    }
+  }
+  filterOrganizationOP.value = organizationOptions.value;
+});
 </script>
 <template>
   <div class="col-12 row q-pa-md">
@@ -310,101 +336,101 @@ const clearInsigniaFilters = (name: string) => {
       </div>
       <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
         <div class="row col-12 q-col-gutter-sm">
-        <q-select
-          v-model="DataStore.typeinsignia"
-          label="ประเภทเครื่องราชฯ ที่ยืนขอ"
-          dense
-          emit-value
-          map-options
-          :options="typeinsigniaOptions"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          use-input
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          style="min-width: 180px"
-          @update:model-value="
-            DataStore.searchDataTable(
-              DataStore.typeinsignia,
-              DataStore.employeeClass
-            )
-          "
-          @filter="(inputValue:any,
+          <q-select
+            v-model="DataStore.typeinsignia"
+            label="ประเภทเครื่องราชฯ ที่ยืนขอ"
+            dense
+            emit-value
+            map-options
+            :options="typeinsigniaOptions"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            use-input
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            style="min-width: 180px"
+            @update:model-value="
+              DataStore.searchDataTable(
+                DataStore.typeinsignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
                       ) "
-        >
-          <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="
-                clearInsigniaFilters('typeinsigniaOptions'),
-                  DataStore.searchDataTable(
-                    DataStore.typeinsignia,
-                    DataStore.employeeClass
-                  )
-              "
-              class="cursor-pointer"
-            />
-          </template>
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-select
-          v-model="DataStore.employeeClass"
-          dense
-          outlined
-          lazy-rules
-          hide-bottom-space
-          :label="`${'สถานภาพ'}`"
-          emit-value
-          use-input
-          map-options
-          option-label="name"
-          :options="employeeClassOps"
-          option-value="id"
-          :readonly="false"
-          :borderless="false"
-          style="width: 300px"
-          @update:model-value="
-            DataStore.searchDataTable(
-              DataStore.typeinsignia,
-              DataStore.employeeClass
-            )
-          "
-          @filter="(inputValue:any,
+          >
+            <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('typeinsigniaOptions'),
+                    DataStore.searchDataTable(
+                      DataStore.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </template>
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <q-select
+            v-model="DataStore.employeeClass"
+            dense
+            outlined
+            lazy-rules
+            hide-bottom-space
+            :label="`${'สถานภาพ'}`"
+            emit-value
+            use-input
+            map-options
+            option-label="name"
+            :options="employeeClassOps"
+            option-value="id"
+            :readonly="false"
+            :borderless="false"
+            style="width: 300px"
+            @update:model-value="
+              DataStore.searchDataTable(
+                DataStore.typeinsignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue:any,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
                     ) "
-        >
-          <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="
-                clearInsigniaFilters('employeeClassOps'),
-                  DataStore.searchDataTable(
-                    DataStore.typeinsignia,
-                    DataStore.employeeClass
-                  )
-              "
-              class="cursor-pointer"
-            />
-          </template>
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
+          >
+            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('employeeClassOps'),
+                    DataStore.searchDataTable(
+                      DataStore.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </template>
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
         </div>
       </q-card>
       <div class="col-12 q-pt-sm">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="DataStore.rows"
@@ -416,7 +442,6 @@ const clearInsigniaFilters = (name: string) => {
           dense
           class="custom-header-table"
           :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
           v-model:pagination="pagination"
         >
           <template v-slot:header="props">
@@ -479,19 +504,7 @@ const clearInsigniaFilters = (name: string) => {
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+        </d-table>
 
         <DialogInformation
           :modal="dialogNote"
diff --git a/src/modules/07_insignia/components/2_Manage/Tab3.vue b/src/modules/07_insignia/components/2_Manage/Tab3.vue
index e3abeb739..b70a4751b 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab3.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab3.vue
@@ -1,17 +1,24 @@
 <script setup lang="ts">
 import { onMounted, ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 import { useRouter } from "vue-router";
-import DialogInformation from "@/components/Dialogs/Information.vue";
-import { useroleUserDataStore } from "@/stores/roleUser";
 
+/** import Type*/
+import type { QTableProps } from "quasar";
+
+/** import components*/
+import DialogInformation from "@/components/Dialogs/Information.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 DataStore = useInsigniaDataStore();
+
 const props = defineProps({
   tab: {
     type: String,
@@ -31,19 +38,8 @@ const employeeClassOps = ref<any>(DataStore.employeeClassOps);
 const filterOrganizationOP = ref<any>([]);
 const organization = ref<string>("1");
 const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
-const visibleColumns = ref<string[]>([
-  "no",
-  "citizenId",
-  "name",
-  "employeeType",
-  "position",
-  "level",
-  "salary",
-  "insigniaType",
-  "insigniaSend",
-  "insigniaLevel",
-]);
-// หัวตาราง
+
+/** หัวตาราง*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -145,26 +141,21 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-onMounted(async () => {
-  organizationOptions.value = DataStore.optionsTypeOc;
-  // organization.value = await (DataStore.agency != null
-  //   ? DataStore.agency
-  //   : DataStore.typeOc);
-  organization.value = await DataStore.typeOc;
-  if (organization.value !== "" || organization.value !== undefined) {
-    if (props.fecthInsigniaByOc) {
-      await props.fecthInsigniaByOc(
-        props.roundId,
-        organization.value,
-        "officer",
-        props.tab
-      );
-      DataStore.mainTab = props.tab;
-    }
-  }
-  filterOrganizationOP.value = organizationOptions.value;
-});
-const changtypeOc = async () => {
+const visibleColumns = ref<string[]>([
+  "no",
+  "citizenId",
+  "name",
+  "employeeType",
+  "position",
+  "level",
+  "salary",
+  "insigniaType",
+  "insigniaSend",
+  "insigniaLevel",
+]);
+
+/** function เลือกหน่วยงาน */
+async function changtypeOc() {
   if (props.fecthInsigniaByOc) {
     await props.fecthInsigniaByOc(
       props.roundId,
@@ -174,11 +165,17 @@ const changtypeOc = async () => {
     );
   }
   DataStore.typeOc = organization.value;
-};
-const nextPage = (id: string) => {
-  router.push(`/registry/${id}`);
-};
+}
 
+/**
+ *  function redirect ทะเบียนประวัติิ
+ * @param id profileId
+ */
+function nextPage(id: string) {
+  router.push(`/registry/${id}`);
+}
+
+/** ข้อมูล Table*/
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
@@ -191,24 +188,33 @@ const pagination = ref({
   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;
-};
 
+/** หมายเหตุ*/
 const dialogNote = ref<boolean>(false);
 const note = ref<string>("");
 const noteTitle = ref<string>("");
-const showNote = (row: any) => {
+/**
+ * function openPopup แสดง หมายเหตุ
+ * @param row รายละเอียดข้อมูล
+ */
+function showNote(row: any) {
   note.value = row.requestNote;
   noteTitle.value = "เหตุผลการลบออก " + " " + row.name;
   dialogNote.value = true;
-};
-const closeReson = () => {
+}
+
+/** function closePopup หมายเหตุ*/
+function closeReson() {
   dialogNote.value = false;
-};
-const filterSelector = (val: any, update: Function, name: any) => {
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update funtion
+ * @param name ชื่อ selec
+ */
+function filterSelector(val: any, update: Function, name: any) {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "typeinsigniaOptions") {
@@ -227,8 +233,13 @@ const filterSelector = (val: any, update: Function, name: any) => {
       );
     }
   });
-};
-const clearInsigniaFilters = (name: string) => {
+}
+
+/**
+ * function clearfilter เครื่องราช
+ * @param name ชื่อ selec
+ */
+function clearInsigniaFilters(name: string) {
   if (name === "typeinsigniaOptions") {
     DataStore.typeinsignia = "all";
     typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
@@ -236,7 +247,25 @@ const clearInsigniaFilters = (name: string) => {
     DataStore.employeeClass = "all";
     employeeClassOps.value = DataStore.employeeClassOps;
   }
-};
+}
+
+/** Hook*/
+onMounted(async () => {
+  organizationOptions.value = DataStore.optionsTypeOc;
+  organization.value = await DataStore.typeOc;
+  if (organization.value !== "" || organization.value !== undefined) {
+    if (props.fecthInsigniaByOc) {
+      await props.fecthInsigniaByOc(
+        props.roundId,
+        organization.value,
+        "officer",
+        props.tab
+      );
+      DataStore.mainTab = props.tab;
+    }
+  }
+  filterOrganizationOP.value = organizationOptions.value;
+});
 </script>
 <template>
   <div class="col-12 row q-pa-md">
@@ -400,7 +429,7 @@ const clearInsigniaFilters = (name: string) => {
         </div>
       </q-card>
       <div class="col-12 q-pt-sm">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="DataStore.rows"
@@ -412,7 +441,6 @@ const clearInsigniaFilters = (name: string) => {
           dense
           class="custom-header-table"
           :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
           v-model:pagination="pagination"
         >
           <template v-slot:header="props">
@@ -475,19 +503,7 @@ const clearInsigniaFilters = (name: string) => {
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+        </d-table>
       </div>
     </div>
   </div>
diff --git a/src/modules/07_insignia/components/2_Manage/Tab4.vue b/src/modules/07_insignia/components/2_Manage/Tab4.vue
index 9d56c7f6c..a9df90e90 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab4.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab4.vue
@@ -1,16 +1,22 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 
-const $q = useQuasar();
+/** import Type*/
+import type { QTableProps } from "quasar";
+
+/** import Stores */
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+import { useCounterMixin } from "@/stores/mixin";
+/** useStore*/
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
 const DataStore = useInsigniaDataStore();
+
+const $q = useQuasar();
+
 const props = defineProps({
   roundId: {
     type: String,
@@ -20,8 +26,8 @@ const props = defineProps({
   },
 });
 
-const visibleColumns = ref<string[]>(["no", "orgName"]);
-// หัวตาราง
+/** ข้อมูลตาราง*/
+const rows = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -42,15 +48,16 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<any[]>([]);
-
-onMounted(async () => {
-  await fecthOrg();
-  DataStore.mainTab = props.tab;
+const visibleColumns = ref<string[]>(["no", "orgName"]);
+const pagination = ref({
+  sortBy: "name",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
 });
 
-//หน่วยงานที่ยังไม่ได้เสนอชื่อ
-const fecthOrg = async () => {
+/** function เรียกหน่วยงานที่ยังไม่ได้เสนอชื่อ*/
+async function fecthOrg() {
   showLoader();
   await http
     .get(config.API.insigniaNosend(props.roundId))
@@ -67,25 +74,19 @@ const fecthOrg = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const pagination = ref({
-  sortBy: "name",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
+/** Hook*/
+onMounted(async () => {
+  await fecthOrg();
+  DataStore.mainTab = props.tab;
 });
-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;
-};
 </script>
 <template>
   <div class="col-12 row q-pa-md">
     <div class="row col-12">
       <div class="col-12">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="rows"
@@ -96,7 +97,6 @@ const paginationLabel = (start: number, end: number, total: number) => {
           :paging="true"
           class="custom-header-table"
           :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
           v-model:pagination="pagination"
         >
           <template v-slot:header="props">
@@ -116,19 +116,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+        </d-table>
       </div>
     </div>
   </div>
diff --git a/src/modules/07_insignia/components/2_Manage/downloadFile.vue b/src/modules/07_insignia/components/2_Manage/downloadFile.vue
index 69972577f..e8588494d 100644
--- a/src/modules/07_insignia/components/2_Manage/downloadFile.vue
+++ b/src/modules/07_insignia/components/2_Manage/downloadFile.vue
@@ -3,11 +3,18 @@ import { ref } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
 
-const $q = useQuasar();
+import type { Optionround } from "@/modules/07_insignia/interface/index/Main";
+
+/**import Stores */
+import { useCounterMixin } from "@/stores/mixin";
+/** use Store*/
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
+
+const $q = useQuasar();
+
+/** props*/
 const props = defineProps({
   profileId: {
     type: String,
@@ -21,12 +28,12 @@ const props = defineProps({
 });
 
 const titleReport = ref<string>("");
-interface Optionround {
-  profileId: string;
-  id: string;
-}
 
-const downloadDocument = async (type: string) => {
+/**
+ * function ดาวน์โหลดไฟล์
+ * @param type ประเภท file
+ */
+async function downloadDocument(type: string) {
   let round = [];
   if (props.optionRound) {
     round = props.optionRound.find((e: Optionround) => e.id === props.round);
@@ -54,8 +61,9 @@ const downloadDocument = async (type: string) => {
         hideLoader();
       });
   }
-};
-const downloadFile = (response: any, filename: string) => {
+}
+
+function downloadFile(response: any, filename: string) {
   const link = document.createElement("a");
   var fileName = filename;
   link.href = window.URL.createObjectURL(new Blob([response.data]));
@@ -63,7 +71,7 @@ const downloadFile = (response: any, filename: string) => {
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
-};
+}
 </script>
 <template>
   <q-btn
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index 363903b8f..57bc7e930 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -4,21 +4,24 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/**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"; //คนที่ยืนขอ
+import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue"; //คนไม่ที่ยืนขอ
+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 cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
-import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue";
-import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue";
-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";
-
+/**use sToer */
 const roleDataStore = useroleUserDataStore();
 const DataStore = useInsigniaDataStore();
 const mixin = useCounterMixin();
 const { messageError, dialogConfirm, showLoader, hideLoader, success } = mixin;
+
 const $q = useQuasar(); //ใช้ noti quasar
 
 const loading = ref<boolean>(false);
@@ -37,14 +40,9 @@ const stat = ref<any>({
 });
 const modalPopupBackToEdit = ref<boolean>(false); //model แก้ไข
 
-onMounted(async () => {
-  tab.value = DataStore.mainTab;
-  await fecthlistRound();
-  DataStore.dataInsigniaType.length === 0 && (await fecthInsignia());
-});
-
-//เรียกรอบการเสนอขอพระราชทานเครื่อง
-const fecthlistRound = async () => {
+/** function เรียกรอบการเสนอขอพระราชทานเครื่อง*/
+async function fecthlistRound() {
+  showLoader();
   await http
     .get(config.API.listRoundInsignia())
     .then(async (res: any) => {
@@ -70,10 +68,13 @@ const fecthlistRound = async () => {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
-};
+}
 
-//เรียกดู Stat ของรอบการเสนอขอพระราชทานเครื่อง
+/** function เรียกดู Stat ของรอบการเสนอขอพระราชทานเครื่อง*/
 const fecthStat = async (id: string) => {
   showLoader();
   await http
@@ -89,8 +90,8 @@ const fecthStat = async (id: string) => {
     });
 };
 
-// เช็คหน่วยงาน
-const fecthAgency = async () => {
+/** funcion เช็คหน่วยงาน*/
+async function fecthAgency() {
   showLoader();
   await http
     .get(config.API.insigniaAgency())
@@ -110,9 +111,10 @@ const fecthAgency = async () => {
       loading.value = true;
       hideLoader();
     });
-};
-// เรียกหน่วยงาน
-const fecthType = async () => {
+}
+
+/** funcion เรียกหน่อยวงาน*/
+async function fecthType() {
   await http
     .get(config.API.typeOc())
     .then((res) => {
@@ -125,9 +127,10 @@ const fecthType = async () => {
     .catch((err) => {
       messageError($q, err);
     });
-};
-// เรียกประเภทเครื่องราช
-const fecthInsignia = async () => {
+}
+
+/**function เรียกประเภทเครื่องราช*/
+async function fecthInsignia() {
   await http
     .get(config.API.insignia)
     .then((res) => {
@@ -137,10 +140,10 @@ const fecthInsignia = async () => {
     .catch((err) => {
       messageError($q, err);
     });
-};
+}
 
-//เลือกรอบการแสดง
-const changround = async () => {
+/** function เลือกรอบการแสดง*/
+async function changround() {
   DataStore.roundId = round.value;
   fecthStat(round.value); //เรียกดู Stat รอบที่เลือก
   var organization = await (DataStore.agency != null //ถ้ามี agency เรียกข้อมูลตาม agency  ถ้าไม่มีเรียนตาม Oc ที่เลือก
@@ -154,19 +157,25 @@ const changround = async () => {
   roundName.value = `รอบการเสนอขอพระราชทานเครื่องราชฯ ปี ${
     roundFilter.year + 543
   }`;
-};
+}
 const requestNote = ref<string>("");
 const requestStatus = ref<string>("");
 const requestId = ref<string>("");
 const document = ref<string>("");
 
-//เรียกข้อมูลรายชื่อข้าราชการสามัญฯ  ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์ ตามรอบการเสนอขอ
-const fecthInsigniaByOc = async (
+/**
+ * function เรียกข้อมูลรายชื่อข้าราชการสามัญฯ  ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์ ตามรอบการเสนอขอ
+ * @param roundId id รอบการเสนอขอ
+ * @param ocId id หน่วยงาน
+ * @param role   ประเภท officer,employee
+ * @param status สถานะ
+ */
+async function fecthInsigniaByOc(
   roundId: string,
   ocId: string,
   role: string,
   status: string
-) => {
+) {
   if (roundId && ocId && role && status) {
     showLoader();
     await http
@@ -193,10 +202,10 @@ const fecthInsigniaByOc = async (
         hideLoader();
       });
   }
-};
+}
 
-// ส่งรอบการเสนอขอต่อ เฉพาะ รอบที่ requestStatus st1 และ st4
-const sendToDirector = async () => {
+/**function ยืนยันการส่งรอบการเสนอขอต่อ เฉพาะ รอบที่ requestStatus st1 และ st4 */
+async function sendToDirector() {
   dialogConfirm($q, async () => {
     showLoader();
     await http
@@ -218,26 +227,32 @@ const sendToDirector = async () => {
         await fecthStat(round.value);
       });
   });
-};
-//แสดง popup แก้ไข
-const popupBackToEdit = async () => {
+}
+
+/** function open popup แก้ไข*/
+async function popupBackToEdit() {
   modalPopupBackToEdit.value = true;
-};
-//ปิด popup แก้ไข
-const closeModalPopupBackToEdit = async () => {
+}
+/** function close popup แก้ไข*/
+async function closeModalPopupBackToEdit() {
   modalPopupBackToEdit.value = false;
-};
+}
+
 const modalbackInsignia2Role = ref<boolean>(false);
-//แสดง popup ตีกลับ admin
+/**function  open popup ตีกลับ admin*/
 const popupBackToInsignia2Role = async () => {
   modalbackInsignia2Role.value = true;
 };
-//ปิด popup ตีกลับ admin
+/**function  close popup ตีกลับ admin*/
 const closepopupBackToInsignia2Role = async () => {
   modalbackInsignia2Role.value = false;
 };
-// ตีกลับรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
-const backToEdit = async (reason: string) => {
+
+/**
+ * funtion ยืนยันการ ตีกลับรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
+ * @param reason หมายเหตุการตีกลับ
+ */
+async function backToEdit(reason: string) {
   dialogConfirm(
     $q,
     async () => {
@@ -269,9 +284,10 @@ const backToEdit = async (reason: string) => {
     "ยืนยันการตีกลับ",
     "ต้องการยืนยันการตีกลับใช่หรือไม่?"
   );
-};
-// อนุมัติรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st3 และ insignia2Role
-const directorApproved = async () => {
+}
+
+/**function ยืนยันการอนุมัติรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st3 และ insignia2Role */
+async function directorApproved() {
   dialogConfirm(
     $q,
     async () => {
@@ -298,9 +314,13 @@ const directorApproved = async () => {
     "ยืนยันการอนุมัติ",
     "ต้องการยืนยันการอนุมัติใช่หรือไม่?"
   );
-};
-// ตีกลับรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st5 และ adminRole
-const backToEditinsignia2Role = async (reason: string) => {
+}
+
+/**
+ * function ยืนยันการตีกลับรอบการเสนอขอ  เฉพาะ รอบที่ requestStatus st5 และ adminRole
+ * @param reason หมายเหตุการตีกลับ
+ */
+async function backToEditinsignia2Role(reason: string) {
   dialogConfirm($q, async () => {
     await http
       .put(config.API.rejectRequest(round.value, DataStore.typeOc), {
@@ -322,12 +342,10 @@ const backToEditinsignia2Role = async (reason: string) => {
         closepopupBackToInsignia2Role();
       });
   });
-};
-// ล็อกข้อมูลรอบการเสนอขอ
-const requestSendNote = async () => {
-  // var organization = await (DataStore.agency != null
-  //   ? DataStore.agency
-  //   : DataStore.typeOc);
+}
+
+/**function ยืนยันการล็อกข้อมูล*/
+async function requestSendNote() {
   dialogConfirm($q, async () => {
     showLoader();
     await http
@@ -351,10 +369,14 @@ const requestSendNote = async () => {
         await fecthStat(round.value);
       });
   });
-};
-// อัปโหลดไฟล์เจ้าหน้าที่
+}
+
 const fileUpload = ref<any>(null);
-const uploadFile = async (event: any) => {
+/**
+ * function อัปโหลดไฟล์เจ้าหน้าที่
+ * @param event file
+ */
+async function uploadFile(event: any) {
   dialogConfirm($q, async () => {
     const selectedFile = event;
     const formdata = new FormData();
@@ -377,7 +399,14 @@ const uploadFile = async (event: any) => {
       "ยืนยันการอัปโหลดไฟล์",
       "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?";
   });
-};
+}
+
+/** hook*/
+onMounted(async () => {
+  tab.value = DataStore.mainTab;
+  await fecthlistRound();
+  DataStore.dataInsigniaType.length === 0 && (await fecthInsignia());
+});
 </script>
 
 <template>
@@ -420,6 +449,7 @@ const uploadFile = async (event: any) => {
     <div v-if="roleDataStore.adminRole" class="col-12 row bg-white">
       <div class="fit q-px-md q-py-sm">
         <div class="row col-12 q-col-gutter-sm fit">
+          <!-- stat -->
           <cardTop
             :amount="stat.orgAllCount"
             label="หน่วยงานทั้งหมด"
@@ -491,6 +521,7 @@ const uploadFile = async (event: any) => {
     </div>
     <q-separator />
     <q-tab-panels v-model="tab" animated>
+      <!-- แทบคนที่ยื่นขอ -->
       <q-tab-panel name="pending" class="q-pa-none">
         <tab1
           :tab="tab"
@@ -501,6 +532,8 @@ const uploadFile = async (event: any) => {
           :fecthStat="fecthStat"
         />
       </q-tab-panel>
+
+      <!-- แทบคนที่ไม่ยื่นขอ -->
       <q-tab-panel name="reject" class="q-pa-none">
         <tab2
           :tab="tab"
@@ -508,6 +541,8 @@ const uploadFile = async (event: any) => {
           :fecthInsigniaByOc="fecthInsigniaByOc"
         />
       </q-tab-panel>
+
+      <!-- แทบคนที่ถูกลบออก -->
       <q-tab-panel name="delete" class="q-pa-none">
         <tab3
           :tab="tab"
@@ -515,6 +550,8 @@ const uploadFile = async (event: any) => {
           :fecthInsigniaByOc="fecthInsigniaByOc"
         />
       </q-tab-panel>
+
+      <!-- แทบหน่วยงานที่ยังไม่ได้ส่งรายชื่อ -->
       <q-tab-panel
         v-if="roleDataStore.adminRole"
         name="organization"
@@ -523,7 +560,6 @@ const uploadFile = async (event: any) => {
         <tab4 :tab="tab" :roundId="round" />
       </q-tab-panel>
     </q-tab-panels>
-    <!-- :role-user="roleUser" -->
     <q-toolbar class="q-py-md text-right">
       <q-file
         v-if="roleDataStore.insignia1Role"
@@ -622,6 +658,7 @@ const uploadFile = async (event: any) => {
       />
     </q-toolbar>
 
+    <!-- popup หมายเหตุ -->
     <DialogPopupReason
       :modal="modalPopupBackToEdit"
       title="หมายเหตุการตีกลับ"
diff --git a/src/modules/07_insignia/components/3_result/DialogForm.vue b/src/modules/07_insignia/components/3_result/DialogForm.vue
index 714e6113e..3e07e3d8e 100644
--- a/src/modules/07_insignia/components/3_result/DialogForm.vue
+++ b/src/modules/07_insignia/components/3_result/DialogForm.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { ref, watch, computed } 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";
+
+/** 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";
+/** useStore*/
 const DataStore = useResultDataStore();
-const $q = useQuasar();
-const myForm = ref<QForm>();
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -21,8 +23,11 @@ const {
   hideLoader,
   notifyError,
 } = mixin;
-const status = ref<string>("");
 
+const $q = useQuasar();
+const myForm = ref<QForm>();
+
+const status = ref<string>("");
 const Advertise = ref<string>("");
 const issue = ref<string>("");
 const brand = ref<string>("");
@@ -40,34 +45,31 @@ const affiliationReceived = ref<string>("");
 const receivedate = ref<Date | null>();
 const announceDate = ref<Date | null>();
 const invoiceDate = ref<Date | null>(null);
-const filterinsigniaOp2 = ref<any>(DataStore.insigniaOp2)
+const filterinsigniaOp2 = ref<any>(DataStore.insigniaOp2);
 const employeeClass = ref<string>("");
 const employeeClassOps = ref<DataOption[]>([
   { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
   { id: "employee", name: "ลูกจ้างประจำ" },
 ]);
-
 const listPerson = ref<any>([]);
-
 const paymentOp = [
   { label: "จัดส่งทางไปรษณีย์", value: "จัดส่งทางไปรษณีย์" },
   { label: "มารับด้วยตัวเอง", value: "มารับด้วยตัวเอง" },
 ];
 
-// reset วันที่ประกาศราชกิจจานุเบกษา
-const clearAnnounceExam = () => {
+function clearAnnounceExam() {
   announceDate.value = null;
-};
+}
 
-// reset วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์
-const clearDateReceivedate = () => {
+/** function  reset วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์*/
+function clearDateReceivedate() {
   receivedate.value = null;
-};
+}
 
-// reset วันที่จ่ายใบกำกับ
-const clearDateInvoiceDate = () => {
+/** function  reset วันที่จ่ายใบกำกับ*/
+function clearDateInvoiceDate() {
   invoiceDate.value = null;
-};
+}
 
 const props = defineProps({
   modal: Boolean,
@@ -90,7 +92,8 @@ const props = defineProps({
     type: String,
   },
 });
-// เปิด popup เพิ่มราชชื่อบันทึกผล
+
+/** callback function จำทำงานเมื่อ props.modal = true เปิด popup เพิ่มราชชื่อบันทึกผล*/
 watch(props, () => {
   if (props.modal === true) {
     employeeClass.value = "";
@@ -117,13 +120,17 @@ watch(props, () => {
     }
   }
 });
+
+/** disbleStatus */
 const disbleStatus = computed(() => {
   if (employeeClass.value !== "") {
     return false;
   } else return true;
 });
 // เลือกประเภทลูกจ้าง
-const selectType = async () => {
+
+/** function เลือกประเภทลูกจ้าง */
+async function selectType() {
   showLoader();
   cardid.value = "";
   fullName.value = "";
@@ -142,9 +149,10 @@ const selectType = async () => {
   invoiceDate.value = null;
   payment.value = "";
   await fecthlistPerson();
-};
-// เรียกหน่วยงาน
-const fecthlistPerson = async () => {
+}
+
+/** function เรียกหน่วยงาน*/
+async function fecthlistPerson() {
   await http
     .get(config.API.profileOrganizRoot)
     .then((res) => {
@@ -156,9 +164,13 @@ const fecthlistPerson = async () => {
     .catch((e) => {
       messageError($q, e);
     });
-};
-// เรียกราชชื่อลูกจ้างตาม id หน่วยงาน
-const findlist = async (id: string) => {
+}
+
+/**
+ *  function เรียกราชชื่อลูกจ้างตาม id หน่วยงาน
+ * @param id id หน่วยงาน
+ */
+async function findlist(id: string) {
   let data = [{}];
   //  ข้าราชการ
   if (employeeClass.value === "officer") {
@@ -183,9 +195,13 @@ const findlist = async (id: string) => {
     .finally(() => {
       hideLoader();
     });
-};
-// เรียกข้อมูลบันทึกผลตาม id
-const fectDataByid = async (id: string) => {
+}
+
+/**
+ * function เรียกข้อมูลบันทึกผลตาม id
+ * @param id
+ */
+async function fectDataByid(id: string) {
   showLoader();
   if (props.profileType !== undefined) {
     employeeClass.value = props.profileType.toString();
@@ -219,9 +235,10 @@ const fectDataByid = async (id: string) => {
     .finally(() => {
       hideLoader();
     });
-};
-// บักทึกผล
-const clickSave = async () => {
+}
+
+/** function บักทึกผล*/
+async function clickSave() {
   let body = {
     citizanId: cardid.value, // เลขบัตร
     insigniaId: brand.value, // insigniaID
@@ -247,9 +264,10 @@ const clickSave = async () => {
       });
     }
   });
-};
-// เพิ่มแก้ ข้อมูลบันทึกผล
-const addNote = async (body: any) => {
+}
+
+/** function เพิ่มแก้ ข้อมูลบันทึกผล*/
+async function addNote(body: any) {
   if (props.roundId !== undefined) {
     await http
       .put(config.API.noteAdd(props.roundId), body)
@@ -265,9 +283,10 @@ const addNote = async (body: any) => {
         }
       });
   }
-};
-// หาเลขบัตรประจำตัวประชาชน
-const searchcardid = () => {
+}
+
+/** function หาเลขบัตรประจำตัวประชาชน*/
+function searchcardid() {
   if (cardid.value.length === 13) {
     let data = listPerson.value.find((e: any) => e.citizenId === cardid.value);
     if (data) {
@@ -275,20 +294,25 @@ const searchcardid = () => {
       position.value = data.positionEmployeePosition; // ตำแหน่ง
     } else notifyError($q, "ไม่พบข้อมูลเลขบัตรประชาชนนี้");
   }
-};
+}
+
+/**
+ * function ค้นหาข้อมูล option
+ * @param val คำค้นหา
+ * @param update function
+ * @param name ชื่อ selec
+ */
 const filterSelector = (val: any, update: Function, name: any) => {
   update(() => {
     const needle = val.toLowerCase();
-    if (name === 'insigniaOp2') {
-      brand.value = ''
+    if (name === "insigniaOp2") {
+      brand.value = "";
       filterinsigniaOp2.value = DataStore.insigniaOp2.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
     }
-
-    }
-  )
-}
+  });
+};
 </script>
 
 <template>
diff --git a/src/modules/07_insignia/components/3_result/Dialogbody.vue b/src/modules/07_insignia/components/3_result/Dialogbody.vue
index 11bd4f011..0c9f37bcb 100644
--- a/src/modules/07_insignia/components/3_result/Dialogbody.vue
+++ b/src/modules/07_insignia/components/3_result/Dialogbody.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** import Type*/
 import type { DataOption } from "@/modules/04_registry/components/profileType";
 
-const $q = useQuasar();
-const myForm = ref<any>();
+/** import Stores */
+import { useCounterMixin } from "@/stores/mixin";
+/** useStore*/
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -20,6 +20,10 @@ const {
   dialogConfirm,
   dateToISO,
 } = mixin;
+
+const $q = useQuasar();
+const myForm = ref<any>();
+
 const files = ref<any>();
 const filesReturn = ref<any>();
 const OrganazationId = ref<string>("");
@@ -32,6 +36,7 @@ const remark = ref<string>("");
 const nullii = ref<any>(null);
 const filesCheck = ref<string>("");
 const filesReturnCheck = ref<string>("");
+
 const props = defineProps({
   modal: Boolean,
   personId: String,
@@ -42,14 +47,19 @@ const props = defineProps({
 
   dataModal: Object,
 });
-// reset วันที่ประกาศราชกิจจานุเบกษา
-const clearReceiveDate = () => {
+
+/** function reset วันที่ประกาศราชกิจจานุเบกษา*/
+function clearReceiveDate() {
   Datereceive.value = null;
-};
-const clearReturnDate = () => {
+}
+
+/** function clearDate */
+function clearReturnDate() {
   Datereturn.value = null;
-};
-const close = () => {
+}
+
+/** function Colsepopup*/
+function close() {
   props.close?.();
   Datereceive.value = null;
   files.value = null;
@@ -57,17 +67,28 @@ const close = () => {
   Datereturn.value = null;
   filesReturn.value = null;
   OrganazationId2.value = "";
-};
+}
 
-const SaveData = async (type: string, id: string) => {
+/**
+ * function ยืนยันการบันทึกข้อมูล
+ * @param type receive,return
+ * @param id personId
+ */
+async function SaveData(type: string, id: string) {
   await myForm.value.validate().then((result: boolean) => {
     if (result) {
       dialogConfirm($q, () => dataSave(type, id));
     } else {
     }
   });
-};
-const dataSave = (type: string, id: string) => {
+}
+
+/**
+ * function บันทึกข้อมูล
+ * @param type receive,return
+ * @param id personId
+ */
+function dataSave(type: string, id: string) {
   const formData = new FormData();
   if (props.dateCheckReceive === null) {
     formData.append("Date", dateToISO(Datereceive.value ?? nullii));
@@ -94,12 +115,14 @@ const dataSave = (type: string, id: string) => {
       Datereturn.value = null;
       filesReturn.value = null;
       OrganazationId2.value = "";
+      props.fecthlistInsignia?.();
       props.close?.();
       hideLoader();
-      props.fecthlistInsignia?.();
     });
-};
-const fetchOrgList = async () => {
+}
+
+/** function เรียกหน่วยงาน*/
+async function fetchOrgList() {
   showLoader();
   await http
     .get(config.API.typeOc())
@@ -123,7 +146,14 @@ const fetchOrgList = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
+
+/** hook*/
+onMounted(() => {
+  fetchOrgList();
+});
+
+/** callback function จำทำงานเมื่อ props มีการเปลี่ยนแปลง*/
 watch(props, () => {
   if (props.dataModal) {
     Datereceive.value = props.dataModal.dateReceiveInsignia;
@@ -140,10 +170,6 @@ watch(props, () => {
         : "-";
   }
 });
-
-onMounted(() => {
-  fetchOrgList();
-});
 </script>
 
 <template>
@@ -322,7 +348,7 @@ onMounted(() => {
             </div>
             <div v-if="filesReturnCheck !== null" class="col-xs-12 col-sm-4">
               <q-btn
-              type="a"
+                type="a"
                 outline
                 ripple
                 class="full-width"
diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/fileUpload.vue
index eb7307d4f..cd96f4a96 100644
--- a/src/modules/07_insignia/components/3_result/fileUpload.vue
+++ b/src/modules/07_insignia/components/3_result/fileUpload.vue
@@ -1,31 +1,29 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import type { QTableProps, QForm } from "quasar";
 import { useQuasar } from "quasar";
-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 Stores */
+import { useCounterMixin } from "@/stores/mixin";
+/** useStore*/
 const mixin = useCounterMixin();
 const { success, messageError, hideLoader, dialogConfirm, showLoader } = mixin;
+
+const $q = useQuasar();
+const myForm = ref<any>();
+
 const fileUpload = ref<any>(null);
 const reason = ref<string>("");
 const documentTitle = ref<string>("");
-const $q = useQuasar();
-
-const myForm = ref<any>();
-
 const filterKeyword = ref<string>("");
 const filterDoc = ref<any>(null);
 
-const visibleColumnsReference = ref<String[]>([
-  "no",
-  "fileName",
-  "annotation",
-  "file",
-]);
-
-// คอลัมน์ตาราง
+/** คอลัมน์ตาราง*/
 const colums2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -56,27 +54,22 @@ const colums2 = ref<QTableProps["columns"]>([
     sortable: false,
   },
 ]);
-
+const visibleColumnsReference = ref<String[]>([
+  "no",
+  "fileName",
+  "annotation",
+  "file",
+]);
 const rows2 = ref<any>([]);
 
-interface TypeData {
-  fileName: string;
-  reason: string;
-  pathName: string;
-}
-
 const props = defineProps({
   roundId: {
     type: String,
   },
 });
 
-onMounted(async () => {
-  await getRequest();
-});
-
-// ดึงข้อมูลรายการเอกสารอ้างอิง
-const getRequest = async () => {
+/** function ดึงข้อมูลรายการเอกสารอ้างอิง */
+async function getRequest() {
   showLoader();
   await http
     .get(config.API.requestDocNote(props.roundId as string))
@@ -97,19 +90,19 @@ const getRequest = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-// เช็คฟอร์มก่อนบันทึก
-const save = () => {
+/** function เช็คฟอร์มก่อนบันทึก และยืนยันการบันทึกข้อมูล */
+function save() {
   myForm.value.validate().then((result: boolean) => {
     if (result) {
       dialogConfirm($q, () => putRequest());
     }
   });
-};
+}
 
-// บันทึกเอกสาร
-const putRequest = async () => {
+/** function  บันทึกเอกสาร */
+async function putRequest() {
   showLoader();
   const dataAppend = new FormData();
   dataAppend.append("Name", documentTitle.value);
@@ -124,21 +117,22 @@ const putRequest = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      documentTitle.value = ""
-      reason.value = ""
-      fileUpload.value = null
+      documentTitle.value = "";
+      reason.value = "";
+      fileUpload.value = null;
 
       // reset เพื่อไม่ให้ฟอร์มแจ้งเตือ validate หลังบันทึกเสร็จแล้วล้างค่าฟิลด์ต่างๆ
-      myForm.value.reset()
+      myForm.value.reset();
       getRequest();
       hideLoader();
     });
-};
+}
 
-const resetFilterRef = () => {
+/** function  resetFilter */
+function resetFilterRef() {
   filterKeyword.value = "";
   filterDoc.value.focus();
-};
+}
 
 const pagination = ref({
   sortBy: "filename",
@@ -146,6 +140,11 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
+
+/**hook*/
+onMounted(async () => {
+  await getRequest();
+});
 </script>
 
 <template>
@@ -156,42 +155,104 @@ const pagination = ref({
           <q-form ref="myForm">
             <div class="row col-12 q-col-gutter-x-sm">
               <div class="col-3">
-                <q-file class="bg-white" outlined dense v-model="fileUpload" label="ไฟล์เอกสาร" hide-bottom-space
-                  lazy-rules accept=".pdf" :rules="[(val) => !!val || `กรุณาเลือกไฟล์เอกสาร`]">
+                <q-file
+                  class="bg-white"
+                  outlined
+                  dense
+                  v-model="fileUpload"
+                  label="ไฟล์เอกสาร"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf"
+                  :rules="[(val) => !!val || `กรุณาเลือกไฟล์เอกสาร`]"
+                >
                   <template v-slot:prepend>
                     <q-icon name="attach_file" color="primary" />
                   </template>
                 </q-file>
               </div>
               <div class="col-3">
-                <q-input class="bg-white" outlined dense lazy-rules v-model="documentTitle" :label="`${'ชื่อเอกสาร'}`"
-                  hide-bottom-space :rules="[(val) => !!val || `กรุณากรอกชื่อเอกสาร`]" />
+                <q-input
+                  class="bg-white"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="documentTitle"
+                  :label="`${'ชื่อเอกสาร'}`"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `กรุณากรอกชื่อเอกสาร`]"
+                />
               </div>
               <div class="col-6 row no-wrap">
-                <q-input class="bg-white full-width" outlined dense lazy-rules v-model="reason" :label="`${'หมายเหตุ'}`"
-                  hide-bottom-space />
-                <q-btn unelevated dense class="q-ml-sm q-px-md items-center" color="public" label="บันทึก" @click="save" />
+                <q-input
+                  class="bg-white full-width"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="reason"
+                  :label="`${'หมายเหตุ'}`"
+                  hide-bottom-space
+                />
+                <q-btn
+                  unelevated
+                  dense
+                  class="q-ml-sm q-px-md items-center"
+                  color="public"
+                  label="บันทึก"
+                  @click="save"
+                />
               </div>
             </div>
           </q-form>
         </q-card>
         <div class="row col-12">
           <q-space />
-          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterDoc" outlined
-            debounce="300" placeholder="ค้นหา">
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterDoc"
+            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="resetFilterRef" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilterRef"
+              />
             </template>
           </q-input>
 
-          <q-select v-model="visibleColumnsReference" multiple outlined dense options-dense
-            :display-value="$q.lang.table.columns" emit-value map-options :options="colums2" option-value="name"
-            options-cover style="min-width: 150px" class="col-xs-12 col-sm-3 col-md-2 q-ml-sm" />
+          <q-select
+            v-model="visibleColumnsReference"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="colums2"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
         </div>
         <div class="col-12 q-pt-sm">
-          <d-table :columns="colums2" :rows="rows2" :filter="filterKeyword" row-key="fileName"
-            :visible-columns="visibleColumnsReference" v-model:pagination="pagination">
+          <d-table
+            :columns="colums2"
+            :rows="rows2"
+            :filter="filterKeyword"
+            row-key="fileName"
+            :visible-columns="visibleColumnsReference"
+            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">
@@ -214,8 +275,17 @@ const pagination = ref({
                   }}
                 </q-td>
                 <q-td auto-width>
-                  <q-btn type="a" :href="props.row.file" target="_blank" dense size="14px" flat round
-                    color="deep-orange-6" icon="picture_as_pdf">
+                  <q-btn
+                    type="a"
+                    :href="props.row.file"
+                    target="_blank"
+                    dense
+                    size="14px"
+                    flat
+                    round
+                    color="deep-orange-6"
+                    icon="picture_as_pdf"
+                  >
                     <q-tooltip>ดาว์โหลด PDF</q-tooltip>
                   </q-btn>
                 </q-td>
diff --git a/src/modules/07_insignia/interface/index/Main.ts b/src/modules/07_insignia/interface/index/Main.ts
index 1353de759..6f8024ef5 100644
--- a/src/modules/07_insignia/interface/index/Main.ts
+++ b/src/modules/07_insignia/interface/index/Main.ts
@@ -9,4 +9,36 @@ interface OptionDataYear {
   year: number;
 }
 
-export type { OptionData, OptionDataYear };
+interface OptionReport {
+  id: string;
+  title: string;
+}
+interface Optionround {
+  profileId: string;
+  id: string;
+}
+
+interface TypeData {
+  fileName: string;
+  reason: string;
+  pathName: string;
+}
+
+interface OptionDataInsignia {
+  id: string;
+  name: string;
+  type: string;
+}
+interface InsigniaType {
+  label: string;
+  name: string;
+}
+export type {
+  OptionData,
+  OptionDataYear,
+  OptionReport,
+  Optionround,
+  TypeData,
+  OptionDataInsignia,
+  InsigniaType,
+};
diff --git a/src/modules/07_insignia/store.ts b/src/modules/07_insignia/store.ts
index 57d062b5c..c6a1e4ff3 100644
--- a/src/modules/07_insignia/store.ts
+++ b/src/modules/07_insignia/store.ts
@@ -1,28 +1,29 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 
+/**import Type */
+import type { OptionReport } from "@/modules/07_insignia/interface/index/Main";
+
+/**import Stores */
+import { useCounterMixin } from "@/stores/mixin";
+/**use Stroe */
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
 export const useInsigniaDataStore = defineStore("insignia", () => {
-  interface OptionReport {
-    id: string;
-    title: string;
-  }
   const roundId = ref<string>("");
   const optionRound = ref<any>([]);
   const isLock = ref<boolean>(false);
   const roleUser = ref<string>("");
   const requestId = ref<string>("");
   const requestStatus = ref<string>("");
-  let optionsTypeOc = ref<any>([]);
-  let typeOc = ref<string>("");
+  const optionsTypeOc = ref<any>([]);
+  const typeOc = ref<string>("");
   const agency = ref<string>("");
-  let rows = ref<any>([]);
+  const rows = ref<any>([]);
   const listinsignia = ref<any>([]);
   const typeinsignia = ref<string>("all");
-  let typeinsigniaOptions = ref<any>([{ id: "all", name: "ทั้งหมด" }]);
+  const typeinsigniaOptions = ref<any>([{ id: "all", name: "ทั้งหมด" }]);
   const employeeClass = ref<string>("all");
   const employeeClassOps = ref<any>([
     { name: "ทั้งหมด", id: "all" },
@@ -30,7 +31,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
     { name: "ลูกจ้างประจำ", id: "perm" },
   ]);
 
-  //รางาน
+  /** option รายงาน */
   const optionReport = ref<OptionReport[]>([
     {
       id: "45",
@@ -41,8 +42,12 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
   ]);
   const mainTab = ref<string | undefined>("pending");
   const dataInsigniaType = ref<any>([]);
-  // เรียกราชชื่อการเสนอขอ
-  const fetchData = async (data: any) => {
+
+  /**
+   * Funtioin เรียกข้อมูลรายชื่อข้าราชการสามัญ
+   * @param data ข้อมูลรายชื่อข้าราชการสามัญ
+   */
+  async function fetchData(data: any) {
     if (data !== null) {
       let datalist = await data.map((e: any) => ({
         id: e.id,
@@ -102,15 +107,23 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
       searchDataTable(typeinsignia.value, employeeClass.value);
       filtertypeInsignia();
     } else rows.value = [];
-  };
-  // เรียกข้อมูลรอบการเสนอขอ
-  const fetchDataInsignia = async (data: any) => {
+  }
+
+  /**
+   * function เรียกข้อมูลรอบการเสนอขอ
+   * @param data ข้อมูลราบการเสนอขอ
+   */
+  async function fetchDataInsignia(data: any) {
     isLock.value = data.isLock; // สถานะล็อกข้อมูล
     requestId.value = data.requestId;
     requestStatus.value = data.requestStatus; // สถานะของรอบการเสนอขอ
-  };
-  // เรียก Option หน่วยงานทั้งหมด
-  const fetchOption = (op: any) => {
+  }
+
+  /**
+   * funntoin หา option หน่วยงสานทั้งหมด
+   * @param op
+   */
+  function fetchOption(op: any) {
     const aId = agency.value ?? "00000000-0000-0000-0000-000000000000";
 
     if (aId !== "00000000-0000-0000-0000-000000000000") {
@@ -119,11 +132,13 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
     } else {
       (optionsTypeOc.value = op), (typeOc.value = op[0].id);
     }
-  };
-  // หาประเภทเครื่องราชทั้งหมดที่อยู่ในรายชื่อข้าราชการสามัญฯ
-  const filtertypeInsignia = async () => {
-    typeinsignia.value = "all";
+  }
 
+  /**
+   * funcion หาประเภทเครื่องราชทั้งหมดที่อยู่ในรายชื่อข้าราชการสามัญฯ
+   */
+  async function filtertypeInsignia() {
+    typeinsignia.value = "all";
     if (listinsignia.value.length !== 0) {
       // หาประเภทเครื่องราชที่ขอที่ชื่อซ้ำกัน
       const double_name = [
@@ -142,9 +157,14 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
         typeinsigniaOptions.value.push(listtype);
       }
     } else typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }];
-  };
-  // ค้นหาข้อมมูลราชชื่อ ตาม ประเท๓และสถานภาพ
-  const searchDataTable = async (type: string, employeeClasstype: string) => {
+  }
+
+  /**
+   * function ค้นหาข้อมมูลราชชื่อ ตาม ประเภทและสถานภาพ
+   * @param type ประเภท
+   * @param employeeClasstype สถานภาพ
+   */
+  async function searchDataTable(type: string, employeeClasstype: string) {
     typeinsignia.value = type;
     employeeClass.value = employeeClasstype;
     if (type !== "all" && employeeClasstype !== "all") {
@@ -164,14 +184,21 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
     } else if (type === "all" && employeeClasstype === "all") {
       rows.value = listinsignia.value;
     }
-  };
-  // ประเภทเครื่องราช
+  }
+
+  /**
+   * function เรียกประเภทเครื่องราช
+   * @param data ประเภทเครื่องราชทั้งหมด
+   */
   function fetchInsigniaType(data: any) {
     dataInsigniaType.value = data;
   }
 
-  // ประเภทลูกจ้าง
-  const profileType = (val: string) => {
+  /**
+   * Function convert ประเภทลูกจ้าง
+   * @param val ประเภทลูกจ้าง
+   */
+  function profileType(val: string) {
     switch (val) {
       case "officer":
         return "ข้าราชการ กทม.สามัญ";
@@ -182,8 +209,12 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
       case "temp":
         return "ลูกจ้างประจำ";
     }
-  };
-  //แปลงสถานะ
+  }
+
+  /**
+   * function convert สถานะ
+   * @param val สถานะ
+   */
   function convertStatus(val: string) {
     switch (val) {
       case "WAITTING":
diff --git a/src/modules/07_insignia/storeAllocate.ts b/src/modules/07_insignia/storeAllocate.ts
index 0eef5cccc..a217bd841 100644
--- a/src/modules/07_insignia/storeAllocate.ts
+++ b/src/modules/07_insignia/storeAllocate.ts
@@ -1,63 +1,87 @@
 import { defineStore } from "pinia";
-import { ref, } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-} = mixin;
+import { ref } from "vue";
 
 export const useAllocateDataStore = defineStore("insigniaallocate", () => {
-  const roundId = ref<string>('')
-  const roundYear = ref<number>()
-  const insigniaName = ref<string>('')
-  const insignia = ref<string>('')
-  const insigniaOp = ref<any[]>([{ name: "ทั้งหมด", id: "", type: "" }])
-  const insigniaType = ref<any>()
-  const rows = ref<any>([])
-  const listInsignia = ref<any>([])
-  const mainTab = ref<string>("")
-  const type = ref<any[]>([])
-  const fetchDatainsignia = async (data: any) => {
-    // insignia.value = ''
-    insigniaOp.value = [{ name: "ทั้งหมด", id: "", type: "" }]
+  const roundId = ref<string>("");
+  const roundYear = ref<number>();
+  const insigniaName = ref<string>("");
+  const insignia = ref<string>("");
+  const insigniaOp = ref<any[]>([{ name: "ทั้งหมด", id: "", type: "" }]);
+  const insigniaType = ref<any>();
+  const rows = ref<any>([]);
+  const listInsignia = ref<any>([]);
+  const mainTab = ref<string>("");
+  const type = ref<any[]>([]);
+
+  /**
+   * function เรียกข้อมูลเครื่องราช
+   * @param data ข้อมูลเครื่องราช
+   */
+  async function fetchDatainsignia(data: any) {
+    insigniaOp.value = [{ name: "ทั้งหมด", id: "", type: "" }];
     data.forEach((e: any) => {
-      insigniaOp.value.push({ name: `${e.name} (${e.shortName})`, id: e.id, type: e.insigniaType.id })
+      insigniaOp.value.push({
+        name: `${e.name} (${e.shortName})`,
+        id: e.id,
+        type: e.insigniaType.id,
+      });
     });
     data.forEach((e: any) => {
       type.value.push({
-        name:e.name,
-        shortName:e.shortName,
-      })})
+        name: e.name,
+        shortName: e.shortName,
+      });
+    });
   }
-  const fetchDatainsigniaType = async (data: any,) => {
-    insigniaType.value = data.map((e: any) => ({ name: e.id, label: e.name }))
-    // mainTab.value = insigniaType.value[0].name
 
+  /**
+   * function เรียกประเเภทเครื่องราช
+   * @param data ข้อมูลเครื่องราช
+   */
+  async function fetchDatainsigniaType(data: any) {
+    insigniaType.value = data.map((e: any) => ({ name: e.id, label: e.name }));
   }
-  const listinsignia = async (data: any) => {
+
+  /**
+   * function เรียกรายการจัดสรรเครื่องราชอิสริยาภรณ์
+   * @param data ข้อมูลรายการจัดสรรเครื่องราชอิสริยาภรณ์
+   */
+  async function listinsignia(data: any) {
     rows.value = [];
     let list = await data.map((e: any) => ({
       id: e.id,
-      insignia: `${e.insignia} (${type.value.find(item => item.name === e.insignia)?.shortName || ''})`,
+      insignia: `${e.insignia} (${
+        type.value.find((item) => item.name === e.insignia)?.shortName || ""
+      })`,
       insigniaId: e.insigniaId,
       total: e.total,
       allocate: e.allocate,
       remain: e.remain,
       year: e.year,
-    }))
-    rows.value = list
-    listInsignia.value = list
-    selectInsignia(insignia.value)
+    }));
+    rows.value = list;
+    listInsignia.value = list;
+    selectInsignia(insignia.value);
   }
-  const selectInsignia = (type: string) => {
-    insignia.value = type
-    if (insignia.value !== "") {
-      rows.value = listInsignia.value.filter((e: any) => e.insigniaId === insignia.value)
-    } else rows.value = listInsignia.value
 
+  /**
+   * function ค้นหาข้อมูลตามประเภทเครื่องราช
+   * @param type ประเภทเครื่องราช
+   */
+  function selectInsignia(type: string) {
+    insignia.value = type;
+    if (insignia.value !== "") {
+      rows.value = listInsignia.value.filter(
+        (e: any) => e.insigniaId === insignia.value
+      );
+    } else rows.value = listInsignia.value;
   }
-  const profileType = (val: string) => {
+
+  /**
+   * function convert สถานภาพ
+   * @param val สถานภาพ
+   */
+  function profileType(val: string) {
     switch (val) {
       case "officer":
         return "ข้าราชการ กทม.สามัญ";
@@ -78,6 +102,6 @@ export const useAllocateDataStore = defineStore("insigniaallocate", () => {
     selectInsignia,
     profileType,
     insigniaName,
-    mainTab
+    mainTab,
   };
 });
diff --git a/src/modules/07_insignia/storeBrrow.ts b/src/modules/07_insignia/storeBrrow.ts
index 6ad37ba90..4a330aa3b 100644
--- a/src/modules/07_insignia/storeBrrow.ts
+++ b/src/modules/07_insignia/storeBrrow.ts
@@ -1,38 +1,70 @@
 import { defineStore } from "pinia";
-import { ref, } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref } from "vue";
 
+/** import Type*/
+import type {
+  OptionData,
+  OptionDataInsignia,
+  InsigniaType,
+} from "@/modules/07_insignia/interface/index/Main";
+
+/** import Stores */
+import { useCounterMixin } from "@/stores/mixin";
+/** useStore*/
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-} = mixin;
+const { date2Thai } = mixin;
 
 export const useBrrowDataStore = defineStore("insigniaBrrow", () => {
-  const insignia = ref<string>('')
-  const insigniaOp = ref<any[]>([{ name: "ทั้งหมด", id: "", type: "" }])
-  const insigniaType = ref<any>()
-  const rows = ref<any>([])
-  const listInsignia = ref<any>([])
+  const insignia = ref<string>("");
+  const insigniaOp = ref<OptionDataInsignia[]>([
+    { name: "ทั้งหมด", id: "", type: "" },
+  ]);
+  const insigniaType = ref<InsigniaType[]>();
+  const rows = ref<any>([]);
+  const listInsignia = ref<any>([]);
   const employeeClass = ref<string>("all");
-  const employeeClassOps = ref<any>([{ name: "ทั้งหมด", id: "all" }, { name: "ข้าราชการ กทม.สามัญ", id: "officer" }, { name: "ลูกจ้างประจำ", id: "perm" }])
-  const type = ref<any[]>([])
-  const fetchDataInsignia = async (data: any) => {
-    insignia.value = ''
-    insigniaOp.value = [{ name: "ทั้งหมด", id: "", type: "" }]
+  const employeeClassOps = ref<OptionData[]>([
+    { name: "ทั้งหมด", id: "all" },
+    { name: "ข้าราชการ กทม.สามัญ", id: "officer" },
+    { name: "ลูกจ้างประจำ", id: "perm" },
+  ]);
+  const type = ref<any[]>([]);
+
+  /**
+   * function เรียกข้อมุลราชชื่อเครื่อง
+   * @param data ข้อมูลเครื่องราช
+   */
+  async function fetchDataInsignia(data: any) {
+    insignia.value = "";
+    insigniaOp.value = [{ name: "ทั้งหมด", id: "", type: "" }];
     data.forEach((e: any) => {
-      insigniaOp.value.push({ name: `${e.name} (${e.shortName})`, id: e.id, type: e.insigniaType.id })
+      insigniaOp.value.push({
+        name: `${e.name} (${e.shortName})`,
+        id: e.id,
+        type: e.insigniaType.id,
+      });
     });
     data.forEach((e: any) => {
       type.value.push({
-        name:e.name,
-        shortName:e.shortName,
-      })})
-  }
-  const fetchDatainsigniaType = async (data: any) => {
-    insigniaType.value = data.map((e: any) => ({ name: e.id, label: e.name }))
+        name: e.name,
+        shortName: e.shortName,
+      });
+    });
   }
 
-  const fetchlistinsignia = async (data: any) => {
+  /**
+   * function เรียกข้อมูลขั้นเครื่องราช
+   * @param data ข้อมูลขั้นเครื่องราช
+   */
+  async function fetchDatainsigniaType(data: any) {
+    insigniaType.value = data.map((e: any) => ({ name: e.id, label: e.name }));
+  }
+
+  /**
+   * function เรียกข้อมูล ยืม-คืนเครื่องราชฯ
+   * @param data ข้อมูล ยืม-คืนเครื่องราชฯ
+   */
+  async function fetchlistinsignia(data: any) {
     rows.value = [];
     let list = await data.map((e: any) => ({
       id: e.id,
@@ -41,7 +73,10 @@ export const useBrrowDataStore = defineStore("insigniaBrrow", () => {
       position: e.position,
       status: status(e.status),
       name: e.fullName,
-      type: `${e.requestInsignia} (${type.value.find(item => item.name === e.requestInsignia)?.shortName || ''})`,
+      type: `${e.requestInsignia} (${
+        type.value.find((item) => item.name === e.requestInsignia)?.shortName ||
+        ""
+      })`,
       requestInsigniaId: e.requestInsigniaId,
       employeeType: profileType(e.profileType),
       profileType: e.profileType,
@@ -56,31 +91,44 @@ export const useBrrowDataStore = defineStore("insigniaBrrow", () => {
       typepay: e.typePayment,
       address: e.address,
       borrowOrganization: e.borrowOrganization,
-      borrowDate: e.borrowDate !== null ? date2Thai(e.borrowDate) : '-',
+      borrowDate: e.borrowDate !== null ? date2Thai(e.borrowDate) : "-",
       returnOrganization: e.returnOrganization,
-      returnDate: e.returnDate !== null ? date2Thai(e.returnDate) : '-',
-      returnReason: e.returnReason !== null ? e.returnReason : '-',
+      returnDate: e.returnDate !== null ? date2Thai(e.returnDate) : "-",
+      returnReason: e.returnReason !== null ? e.returnReason : "-",
     }));
-    rows.value = list
-    listInsignia.value = list
-    searchDatatable(insignia.value, employeeClass.value)
+    rows.value = list;
+    listInsignia.value = list;
+    searchDatatable(insignia.value, employeeClass.value);
   }
-  const searchDatatable = (type: string, employeeClass: string) => {
-    if (type !== '' && employeeClass !== "all") {
-      rows.value = listInsignia.value.filter((e: any) => e.requestInsigniaId == type && e.profileType == employeeClass
-      )
-    } else if (type !== '' && employeeClass == "all") {
-      rows.value = listInsignia.value.filter((e: any) => e.requestInsigniaId == type
-      )
-    } else if (type == '' && employeeClass !== "all") {
-      rows.value = listInsignia.value.filter((e: any) => e.profileType == employeeClass
-      )
-    } else if (type === '' && employeeClass === "all") {
-      rows.value = listInsignia.value
+
+  /**
+   * function ค้นหาข้อมูล Table
+   * @param type ประเภทเครื่องราช
+   * @param employeeClass  สถานภาพ
+   */
+  function searchDatatable(type: string, employeeClass: string) {
+    if (type !== "" && employeeClass !== "all") {
+      rows.value = listInsignia.value.filter(
+        (e: any) =>
+          e.requestInsigniaId == type && e.profileType == employeeClass
+      );
+    } else if (type !== "" && employeeClass == "all") {
+      rows.value = listInsignia.value.filter(
+        (e: any) => e.requestInsigniaId == type
+      );
+    } else if (type == "" && employeeClass !== "all") {
+      rows.value = listInsignia.value.filter(
+        (e: any) => e.profileType == employeeClass
+      );
+    } else if (type === "" && employeeClass === "all") {
+      rows.value = listInsignia.value;
     }
-
   }
 
+  /**
+   * function convert สถานะ
+   * @param val สถานะ
+   */
   const status = (val: string) => {
     switch (val) {
       case "PENDING":
@@ -92,8 +140,13 @@ export const useBrrowDataStore = defineStore("insigniaBrrow", () => {
       case "DONE":
         return "บันทึกลง ก.พ. 7 แล้ว";
     }
-  }
-  const profileType = (val: string) => {
+  };
+
+  /**
+   * function convert สถานภาพ
+   * @param val สถานภาพ
+   */
+  function profileType(val: string) {
     switch (val) {
       case "officer":
         return "ข้าราชการ กทม.สามัญ";
@@ -114,6 +167,6 @@ export const useBrrowDataStore = defineStore("insigniaBrrow", () => {
     profileType,
     fetchlistinsignia,
     searchDatatable,
-    type
+    type,
   };
 });
diff --git a/src/modules/07_insignia/storeResult.ts b/src/modules/07_insignia/storeResult.ts
index 7cfcca968..c798aab84 100644
--- a/src/modules/07_insignia/storeResult.ts
+++ b/src/modules/07_insignia/storeResult.ts
@@ -1,48 +1,75 @@
 import { defineStore } from "pinia";
-import { ref, } from "vue";
+import { ref } from "vue";
+
+/** import Type*/
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
+
+/** import Stores */
 import { useCounterMixin } from "@/stores/mixin";
-
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-
-} = mixin;
+const { date2Thai } = mixin;
 
 export const useResultDataStore = defineStore("insigniaResult", () => {
-  const insignia = ref<string>('')
-  const insigniaOp = ref<any[]>([{ name: "ทั้งหมด", id: "" }])
-  const insigniaOp2 = ref<any[]>([])
-  const insigniaType = ref<any>()
-  const invoiceType = ref<string>('all')
-  const invoiceTypeop = ref<any>([{ name: "ทั้งหมด", id: "all" }, { name: "ใบกำกับที่ค้างจ่าย", id: "noDate" }, { name: "ใบกำกับที่จ่ายแล้ว", id: "haveDate" }])
+  const insignia = ref<string>("");
+  const insigniaOp = ref<any[]>([{ name: "ทั้งหมด", id: "" }]);
+  const insigniaOp2 = ref<any[]>([]);
+  const insigniaType = ref<any>();
+  const invoiceType = ref<string>("all");
+  const invoiceTypeop = ref<OptionData[]>([
+    { name: "ทั้งหมด", id: "all" },
+    { name: "ใบกำกับที่ค้างจ่าย", id: "noDate" },
+    { name: "ใบกำกับที่จ่ายแล้ว", id: "haveDate" },
+  ]);
   const employeeClass = ref<string>("all");
-  const employeeClassOps = ref<any>([{ name: "ทั้งหมด", id: "all" }, { name: "ข้าราชการ กทม.สามัญ", id: "officer" }, { name: "ลูกจ้างประจำ", id: "employee" }])
-  const rows = ref<any>([])
-  const listInsignia = ref<any>([])
-  const type = ref<any[]>([])
+  const employeeClassOps = ref<OptionData[]>([
+    { name: "ทั้งหมด", id: "all" },
+    { name: "ข้าราชการ กทม.สามัญ", id: "officer" },
+    { name: "ลูกจ้างประจำ", id: "employee" },
+  ]);
+  const rows = ref<any>([]);
+  const listInsignia = ref<any>([]);
+  const type = ref<any[]>([]);
 
-  const fetchDatainsignia = async (data: any) => {
-    insignia.value = ''
-    invoiceType.value = 'all'
-    insigniaOp.value = [{ name: "ทั้งหมด", id: "" }]
-    insigniaOp2.value = []
+  /**
+   * function เรียกประเภทเครื่องราช
+   * @param data ประเภทเครื่องราช
+   */
+  async function fetchDatainsignia(data: any) {
+    insignia.value = "";
+    invoiceType.value = "all";
+    insigniaOp.value = [{ name: "ทั้งหมด", id: "" }];
+    insigniaOp2.value = [];
     data.forEach((e: any) => {
-      insigniaOp.value.push({ name: `${e.name} (${e.shortName})`, id: e.id, insigniaType: e.insigniaType.id })
+      insigniaOp.value.push({
+        name: `${e.name} (${e.shortName})`,
+        id: e.id,
+        insigniaType: e.insigniaType.id,
+      });
     });
     data.forEach((e: any) => {
-      insigniaOp2.value.push({ name: `${e.name} (${e.shortName})`, id: e.id })
+      insigniaOp2.value.push({ name: `${e.name} (${e.shortName})`, id: e.id });
     });
     data.forEach((e: any) => {
       type.value.push({
-        name:e.name,
-        shortName:e.shortName,
-      })
-  })
-}
-  const fetchDatainsigniaType = async (data: any) => {
-    insigniaType.value = data.map((e: any) => ({ name: e.id, label: e.name }))
+        name: e.name,
+        shortName: e.shortName,
+      });
+    });
   }
-  const fetchlistinsignia = async (data: any) => {
+
+  /**
+   * function เรียกประเภทเครื่องราช
+   * @param data ประเภทเครื่องราช
+   */
+  async function fetchDatainsigniaType(data: any) {
+    insigniaType.value = data.map((e: any) => ({ name: e.id, label: e.name }));
+  }
+
+  /**
+   * function บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/การจ่ายใบกำกับ
+   * @param data รายชื่อข้าราชการสามัญฯ
+   */
+  async function fetchlistinsignia(data: any) {
     rows.value = [];
     let alllist = await data.map((e: any) => ({
       id: e.id,
@@ -52,7 +79,10 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
       status: status(e.status),
       dateReceive: date2Thai(e.dateReceive),
       name: e.prefix + e.fullName,
-      type: `${e.requestInsignia} (${type.value.find(item => item.name === e.requestInsignia)?.shortName || ''})`,
+      type: `${e.requestInsignia} (${
+        type.value.find((item) => item.name === e.requestInsignia)?.shortName ||
+        ""
+      })`,
       employeeType: profileType(e.profileType),
       profileType: e.profileType,
       date: date2Thai(e.date),
@@ -64,33 +94,51 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
       datepay: date2Thai(e.datePayment),
       typepay: e.typePayment,
       address: e.address,
-      dateReceiveInsignia:e.dateReceiveInsignia,
-      dateReturnInsignia:e.dateReturnInsignia,
-      docReceiveInsignia:e.docReceiveInsignia,
-      docReturnInsignia:e.docReturnInsignia,
-      orgReceiveInsignia:e.orgReceiveInsignia,
-      orgReturnInsignia:e.orgReturnInsignia,
+      dateReceiveInsignia: e.dateReceiveInsignia,
+      dateReturnInsignia: e.dateReturnInsignia,
+      docReceiveInsignia: e.docReceiveInsignia,
+      docReturnInsignia: e.docReturnInsignia,
+      orgReceiveInsignia: e.orgReceiveInsignia,
+      orgReturnInsignia: e.orgReturnInsignia,
     }));
-    rows.value = alllist
-    listInsignia.value = alllist
+    rows.value = alllist;
+    listInsignia.value = alllist;
     searchData(invoiceType.value, employeeClass.value);
-
   }
-  const searchData = (invoice: string, employeeClass: string) => {
-    if (invoice !== 'all' && employeeClass !== 'all') {
-      let list = listInsignia.value.filter((e: any) => convertDatepay(e.datepay) === invoice && e.employeeType === profileType(employeeClass))
-      rows.value = list
-    } else if (invoice !== 'all' && employeeClass === 'all') {
-      let list = listInsignia.value.filter((e: any) => convertDatepay(e.datepay) === invoice)
-      rows.value = list
-    } else if (invoice === 'all' && employeeClass !== 'all') {
-      let list = listInsignia.value.filter((e: any) => e.employeeType === profileType(employeeClass))
-      rows.value = list
-    } else if (invoice === 'all' && employeeClass == 'all') {
-      rows.value = listInsignia.value
+
+  /**
+   * function ค้นหาข้อมูลในตาราง
+   * @param invoice ใบกำกับ
+   * @param employeeClass สถารภาพ
+   */
+  function searchData(invoice: string, employeeClass: string) {
+    if (invoice !== "all" && employeeClass !== "all") {
+      let list = listInsignia.value.filter(
+        (e: any) =>
+          convertDatepay(e.datepay) === invoice &&
+          e.employeeType === profileType(employeeClass)
+      );
+      rows.value = list;
+    } else if (invoice !== "all" && employeeClass === "all") {
+      let list = listInsignia.value.filter(
+        (e: any) => convertDatepay(e.datepay) === invoice
+      );
+      rows.value = list;
+    } else if (invoice === "all" && employeeClass !== "all") {
+      let list = listInsignia.value.filter(
+        (e: any) => e.employeeType === profileType(employeeClass)
+      );
+      rows.value = list;
+    } else if (invoice === "all" && employeeClass == "all") {
+      rows.value = listInsignia.value;
     }
   }
-  const status = (val: string) => {
+
+  /**
+   * function convert สถานะ
+   * @param val สถานะ
+   */
+  function status(val: string) {
     switch (val) {
       case "PENDING":
         return "รอบันทึกข้อมูล";
@@ -102,6 +150,11 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
         return "บันทึกลง ก.พ. 7 แล้ว";
     }
   }
+
+  /**
+   * function convert สถานภาพ
+   * @param val สถานภาพ
+   */
   const profileType = (val: string) => {
     switch (val) {
       case "officer":
@@ -109,7 +162,12 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
       case "employee":
         return "ลูกจ้างประจำ";
     }
-  }
+  };
+
+  /**
+   * function convert  สถานะ การจ่าย
+   * @param val สถานะ การจ่าย
+   */
   const convertDatepay = (val: any) => {
     switch (val) {
       case null:
@@ -117,7 +175,7 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
       default:
         return "haveDate";
     }
-  }
+  };
   return {
     rows,
     insignia,
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 7b01537de..44da53cfc 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useResultDataStore } from "@/modules/07_insignia/storeResult";
+import { useQuasar } from "quasar";
 
+/** import Type*/
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
+import type { QTableProps, QInput } from "quasar";
+
+/** import Components*/
 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 type { OptionData } from "@/modules/07_insignia/interface/index/Main";
-import type { QTableProps, QInput } from "quasar";
-import { useQuasar } from "quasar";
-
+/** import Stores */
+import { useResultDataStore } from "@/modules/07_insignia/storeResult";
+import { useCounterMixin } from "@/stores/mixin";
+/** useStore*/
 const DataStore = useResultDataStore();
 const mixin = useCounterMixin();
 const {
@@ -23,9 +27,10 @@ const {
   messageError,
   success,
 } = mixin;
-const $q = useQuasar();
-const tab = ref<string>("");
 
+const $q = useQuasar();
+
+const tab = ref<string>("");
 const selectRound = ref<string>("");
 const selectRoundOption = ref<OptionData[]>([]);
 const modal = ref<boolean>(false);
@@ -44,81 +49,9 @@ const filterEmployee = ref<any>(DataStore.employeeClassOps);
 const ModalDialog = ref<boolean>(false);
 const dateCheckReceive = ref<any>();
 const dateCheckReturn = ref<any>();
-const dataModal = ref<any>([])
-onMounted(async () => {
-  await fecthRound();
-});
-
-// รอบการเสนอขอพระราชทานเครื่องราช
-const fecthRound = async () => {
-  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) => ({
-          name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี" + "  " + (e.year + 543),
-          id: e.id,
-        }));
-        selectRound.value = data[0].id;
-        await fecthInsignia();
-        await fecthInsigniaType();
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-// ประเภทเครื่องราช
-const fecthInsignia = async () => {
-  await http
-    .get(config.API.insignia)
-    .then((res) => {
-      let data = res.data.result;
-      DataStore.fetchDatainsignia(data);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-};
-
-// ระดับเครื่องราช
-const fecthInsigniaType = async () => {
-  await http(config.API.insigniaType)
-    .then((res) => {
-      let data = res.data.result;
-      DataStore.fetchDatainsigniaType(data);
-      tab.value = DataStore.insigniaType[0].name;
-      loadView.value = true;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-};
-const visibleColumns = ref<String[]>([
-  "no",
-  "status",
-  "citizenId",
-  "name",
-  "type",
-  "dateReceive",
-  "date",
-  "employeeType",
-  "volumeNo",
-  "section",
-  "page",
-  "number",
-  "vatnumber",
-  "datepay",
-  "typepay",
-  "address",
-  "action",
-]);
+const dataModal = ref<any>([]);
 
+/** ข้อมูล Tabla*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -270,9 +203,101 @@ const columns = ref<QTableProps["columns"]>([
     field: "",
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "no",
+  "status",
+  "citizenId",
+  "name",
+  "type",
+  "dateReceive",
+  "date",
+  "employeeType",
+  "volumeNo",
+  "section",
+  "page",
+  "number",
+  "vatnumber",
+  "datepay",
+  "typepay",
+  "address",
+  "action",
+]);
+
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+
+/** 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) => ({
+          name: "รอบการเสนอขอพระราชทานเครื่องราชฯ ปี" + "  " + (e.year + 543),
+          id: e.id,
+        }));
+        selectRound.value = data[0].id;
+        await fecthInsignia();
+        await fecthInsigniaType();
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function เรียกประเภทเครื่องราช*/
+async function fecthInsignia() {
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      let data = res.data.result;
+      DataStore.fetchDatainsignia(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function เรียกระดับเครื่องราช*/
+async function fecthInsigniaType() {
+  await http(config.API.insigniaType)
+    .then((res) => {
+      let data = res.data.result;
+      DataStore.fetchDatainsigniaType(data);
+      tab.value = DataStore.insigniaType[0].name;
+      loadView.value = true;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function เลือกประเภทเครื่องราช*/
+function selectorInsignia() {
+  fecthlistInsignia();
+}
+
+/**
+ *  function เลือกรอบการเสนอขอ
+ * @param round รอบการเสนอขอ
+ */
+function selectorRound(round: string) {
+  if (round) {
+    selectRound.value = round;
+  }
+  fecthlistInsignia();
+}
+
+/** callback function จำทำงานเมื่อ tab มีการเปลี่ยนแปลง*/
 watch(tab, () => {
   if (tab.value !== "doc") {
-    DataStore.insignia = ''
+    DataStore.insignia = "";
     fecthlistInsignia();
     insigniaTypeOption.value = DataStore.insigniaOp.filter(
       (e: any) => e.insigniaType == tab.value || e.name == "ทั้งหมด"
@@ -280,27 +305,16 @@ watch(tab, () => {
     insigniaTypeFilter.value = insigniaTypeOption.value;
   }
 });
+
+/** callback function จำทำงานเมื่อ modal มีการเปลี่ยนแปลง*/
 watch(modal, () => {
   if (modal.value == false) {
     fecthlistInsignia();
   }
 });
 
-// เลือกประเภทเครื่องราช
-const selectorInsignia = () => {
-  fecthlistInsignia();
-};
-
-// เลือกประเภทเครื่องราช
-const selectorRound = (round: string) => {
-  if (round) {
-    selectRound.value = round;
-  }
-  fecthlistInsignia();
-};
-
-// ราชชื่อบันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/การจ่ายใบกำกับ
-const fecthlistInsignia = async () => {
+/** function เรียกราชชื่อบันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/การจ่ายใบกำกับ */
+async function fecthlistInsignia() {
   showLoader();
   let data = {
     insigniaTypeId: tab.value,
@@ -319,9 +333,14 @@ const fecthlistInsignia = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
-const uploadFile = async (event: any, action: string) => {
+/**
+ * function uploadFile
+ * @param event file
+ * @param action  typepreview
+ */
+async function uploadFile(event: any, action: string) {
   if (selectRound.value !== undefined) {
     let id = selectRound.value;
     dialogConfirm($q, async () => {
@@ -349,38 +368,44 @@ const uploadFile = async (event: any, action: string) => {
       "ยืนยันการบันทึกรายการข้อมูล",
       "ต้องการยืนยันรายการข้อมูลนี้หรื้อไม่ ?";
   }
-};
+}
 
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
-
-const close = () => {
+/** function closePopup*/
+function close() {
   modal.value = false;
   ModalDialog.value = false;
-};
+}
 
-const addData = () => {
+/** function openPopup add*/
+function addData() {
   modal.value = true;
   action.value = "addData";
-};
-
-const editData = (data: any) => {
+}
 
+/** function openPopup edit*/
+function editData(data: any) {
   personId.value = data.id;
   profileType.value = data.profileType;
   action.value = "editData";
   modal.value = true;
-};
+}
 
 const save = () => {
   console.log("save function");
 };
+
+/** ข้อมูล ไฟล์*/
 const modelPerview = ref<boolean>(false);
 const rowspreview = ref<any>([]);
 const typepreview = ref<string>("");
 const fileInsignia = ref<any>(null);
-// แสดง fileupload
-const perviewfile = async (event: any, actionType: string) => {
+
+/**
+ * function แสดง fileupload
+ * @param event  ไฟล
+ * @param actionType  ประเภทไฟล์ receice,invoice
+ */
+async function perviewfile(event: any, actionType: string) {
   showLoader();
   typepreview.value = actionType;
   fileInsignia.value = event;
@@ -419,7 +444,7 @@ const perviewfile = async (event: any, actionType: string) => {
         hideLoader();
       });
   }
-};
+}
 
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
@@ -437,55 +462,65 @@ const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-const OpenModal = (data: any) => {
-  dataModal.value = data
+
+/** function openPopup */
+function OpenModal(data: any) {
+  dataModal.value = data;
   ModalDialog.value = true;
   dateCheckReceive.value = data.dateReceiveInsignia;
   dateCheckReturn.value = data.dateReturnInsignia;
   personId.value = data.id;
-};
-const filterSelector = (val: any, update: Function, name: any) => {
+}
+
+/**
+ * function ค้นหาข้อมูล option
+ * @param val คำค้นหา
+ * @param update function
+ * @param name ชื่อ selec
+ */
+function filterSelector(val: any, update: Function, name: any) {
   update(() => {
     const needle = val.toLowerCase();
-    if (name === 'insigniaTypeFilter') {
-      DataStore.insignia = null as any
-        insigniaTypeFilter.value = insigniaTypeOption.value.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
+    if (name === "insigniaTypeFilter") {
+      DataStore.insignia = null as any;
+      insigniaTypeFilter.value = insigniaTypeOption.value.filter(
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (name === "filterInvoice") {
+      DataStore.invoiceType = "";
+      filterInvoice.value = DataStore.invoiceTypeop.filter(
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (name === "filterEmployee") {
+      DataStore.employeeClass = "";
+      filterEmployee.value = DataStore.employeeClassOps.filter(
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
     }
-    else if(name === 'filterInvoice'){
-      DataStore.invoiceType =''
-        filterInvoice.value = DataStore.invoiceTypeop.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
-    }
-    else if(name === 'filterEmployee'){
-      DataStore.employeeClass = ''
-        filterEmployee.value = DataStore.employeeClassOps.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
-    }
-
-    }
-  )
+  });
 }
 
-
-const clearInsigniaFilters = (name: string) => {
-  if (name ==='insigniaTypeFilter' ) {
-       DataStore.insignia = "";
-      insigniaTypeFilter.value = insigniaTypeOption.value
-
-  }
-  else if(name === 'filterInvoice'){
+/**
+ * function clearfilter เครื่องราช
+ * @param name ชื่อ selec
+ */
+function clearInsigniaFilters(name: string) {
+  if (name === "insigniaTypeFilter") {
+    DataStore.insignia = "";
+    insigniaTypeFilter.value = insigniaTypeOption.value;
+  } else if (name === "filterInvoice") {
     DataStore.invoiceType = "all";
-      filterInvoice.value = DataStore.invoiceTypeop
-  }
-  else if(name === 'filterEmployee'){
+    filterInvoice.value = DataStore.invoiceTypeop;
+  } else if (name === "filterEmployee") {
     DataStore.employeeClass = "all";
-      filterEmployee.value = DataStore.employeeClassOps
+    filterEmployee.value = DataStore.employeeClassOps;
   }
 }
+
+/** hook*/
+onMounted(async () => {
+  await fecthRound();
+});
 </script>
 
 <template>
@@ -555,7 +590,7 @@ const clearInsigniaFilters = (name: string) => {
                   v-model="fileResult"
                   label="บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์"
                   accept=".xlsx"
-                  class=" full-width"
+                  class="full-width"
                 >
                   <template v-slot:prepend>
                     <q-icon name="attach_file" color="primary" />
@@ -587,10 +622,10 @@ const clearInsigniaFilters = (name: string) => {
                   v-model="fileinvoice"
                   label="บันทึกผลการจ่ายใบกำกับ"
                   accept=".xlsx"
-                  class=" full-width"
+                  class="full-width"
                 >
                   <template v-slot:prepend>
-                    <q-icon name="attach_file" color="primary"/>
+                    <q-icon name="attach_file" color="primary" />
                   </template>
                   <q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
                 </q-file>
@@ -610,7 +645,7 @@ const clearInsigniaFilters = (name: string) => {
             </div>
           </q-card>
           <div class="row col-12 q-pb-sm q-col-gutter-xs">
-                        <q-select
+            <q-select
               v-model="DataStore.insignia"
               dense
               outlined
@@ -636,7 +671,8 @@ const clearInsigniaFilters = (name: string) => {
                   name="cancel"
                   @click.stop.prevent="
                     clearInsigniaFilters('insigniaTypeFilter'),
-                    selectorInsignia()"
+                      selectorInsignia()
+                  "
                   class="cursor-pointer"
                 />
               </template>
@@ -647,7 +683,7 @@ const clearInsigniaFilters = (name: string) => {
                   </q-item-section>
                 </q-item>
               </template>
-            </q-select> 
+            </q-select>
             <q-space />
             <div class="items-center" style="display: flex">
               <!-- ค้นหาข้อความใน table -->
@@ -688,7 +724,6 @@ const clearInsigniaFilters = (name: string) => {
                 class="gt-xs q-ml-sm"
               />
             </div>
-            
           </div>
           <div class="row col-12 q-mb-sm q-col-gutter-xs">
             <q-select
@@ -764,10 +799,7 @@ const clearInsigniaFilters = (name: string) => {
                     doneFn:Function) => filterSelector(inputValue, doneFn,'filterEmployee'
                     ) "
             >
-              <template
-                v-if="DataStore.employeeClass !== 'all'"
-                v-slot:append
-              >
+              <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
                 <q-icon
                   name="cancel"
                   @click.stop.prevent="
@@ -781,12 +813,12 @@ const clearInsigniaFilters = (name: string) => {
                 />
               </template>
               <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  ไม่มีข้อมูล
-                </q-item-section>
-              </q-item>
-            </template>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
             </q-select>
             <div>
               <q-btn
diff --git a/src/modules/09_leave/views/RoundMain.vue b/src/modules/09_leave/views/RoundMain.vue
index b20b24f33..9b1330afa 100644
--- a/src/modules/09_leave/views/RoundMain.vue
+++ b/src/modules/09_leave/views/RoundMain.vue
@@ -33,10 +33,6 @@ const resetFilter = () => {
   }
 };
 
-onMounted(() => {
-  fetchListRoind();
-});
-
 /** Function get ข้อมูลรายการรอบการปฏิบัติงาน */
 async function fetchListRoind() {
   showLoader();
@@ -100,6 +96,11 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
+
+/** Hook*/
+onMounted(() => {
+  fetchListRoind();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -229,9 +230,6 @@ const pagination = ref({
             </q-td>
             <q-td>
               <q-btn
-                v-if="
-                  props.row.isDefault === false && props.row.isActive === false
-                "
                 dense
                 flat
                 round