diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index ae391cfb6..299203d89 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -27,5 +27,7 @@ export default {
   // record
   noteround: () => `${insignia}/request/note`,
 
-
+  insigniaSendToDirector: (roundId: string, ocId: string) => `${insignia}/request/officer/approve/${roundId}/${ocId}`,
+  insigniaDirectorBackToEdit: (roundId: string, ocId: string) => `${insignia}/request/director/reject/${roundId}/${ocId}`,
+  insigniaDirectorApproved: (roundId: string, ocId: string) => `${insignia}/request/director/approve/${roundId}/${ocId}`,
 };
diff --git a/src/components/Dialogs/Information.vue b/src/components/Dialogs/Information.vue
new file mode 100644
index 000000000..05747f2de
--- /dev/null
+++ b/src/components/Dialogs/Information.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  desc: {
+    type: String,
+    default: "",
+  },
+  clickClose: {
+    type: Function
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 500px; max-width: 500px">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="header-text">{{ props.title }}</q-toolbar-title>
+        <q-btn icon="close" unelevated round dense @click="clickClose" style="color: #ff8080; background-color: #ffdede" />
+      </q-toolbar>
+
+      <q-separator />
+      <q-card-section class="q-p-sm">
+        <div class="row col-12">
+          {{ props.desc }}
+        </div>
+      </q-card-section>
+      <q-separator />
+    </q-card>
+  </q-dialog>
+</template>
\ No newline at end of file
diff --git a/src/components/Dialogs/PopupReason.vue b/src/components/Dialogs/PopupReason.vue
new file mode 100644
index 000000000..e2e8d82af
--- /dev/null
+++ b/src/components/Dialogs/PopupReason.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const reason = ref<string>("");
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  clickClose: {
+    type: Function,
+    default: () => { }
+  },
+  savaForm: {
+    type: Function,
+    default: () => { }
+  }
+});
+
+const myForm = ref<any>();
+const submit = () => {
+  myForm.value.validate().then((result: boolean) => {
+    if (result) {
+      props.savaForm(reason.value)
+    }
+  });
+};
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 500px; max-width: 500px">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="header-text">{{ props.title }}</q-toolbar-title>
+        <q-btn icon="close" unelevated round dense @click="clickClose"
+          style="color: #ff8080; background-color: #ffdede" />
+      </q-toolbar>
+
+      <q-separator />
+      <q-form ref="myForm">
+        <q-card-section class="q-p-sm">
+          <div class="row col-12">
+            <q-input type="textarea" class="full-width inputgreen cursor-pointer" hide-bottom-space outlined dense
+              lazy-rules :rules="[(val) => !!val || `กรุณากรอก${label}`]" v-model="reason" :label="`${label}`" />
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-toolbar class="text-primary">
+          <q-space />
+          <q-btn label="บันทึก" color="secondary" @click="submit" />
+        </q-toolbar>
+      </q-form>
+
+    </q-card>
+  </q-dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index bff986079..13b719acf 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -287,6 +287,7 @@ const clickAdd = async (id: string) => {
     "ต้องการยืนยันการเพิ่มรายชื่อขอพระราชทานเครื่องราชฯ นี้หรือไม่ ?"
   );
 };
+
 const addlistperson = async (id: string) => {
   showLoader();
   let data = {
@@ -333,6 +334,7 @@ const clickmodalEdit = (props: any) => {
   fecthInsignia();
   // fecthInsigniaType();
 };
+
 const clickSave = () => {
   dialogConfirm(
     $q,
@@ -343,6 +345,7 @@ const clickSave = () => {
     "ต้องการยืนยันการแก้ไขเครื่องราชฯ ที่ยื่นขอนี้หรือไม่ ?"
   );
 };
+
 const listEdit = async (profileId: string) => {
   let data: any = {
     insigniaId: insignia.value,
@@ -368,6 +371,7 @@ const listEdit = async (profileId: string) => {
       }
     });
 };
+
 const clickReject = (profileId: string) => {
   dialogConfirm(
     $q,
@@ -378,6 +382,7 @@ const clickReject = (profileId: string) => {
     "ต้องการยืนยันการย้ายข้อมูลนี้หรือไม่ ?"
   );
 };
+
 const listreject = async (profileId: string) => {
   await http
     .get(config.API.insigniaReject(profileId))
@@ -398,6 +403,7 @@ const listreject = async (profileId: string) => {
       }
     });
 };
+
 const clickDelete = (profileId: string) => {
   dialogRemove(
     $q,
@@ -408,6 +414,7 @@ const clickDelete = (profileId: string) => {
     "ต้องการยืนยันการลบข้อมูลนี้หรือไม่ ?"
   );
 };
+
 const listdelete = async (profileId: string) => {
   await http
     .get(config.API.insigniaDelete(profileId))
@@ -428,6 +435,7 @@ const listdelete = async (profileId: string) => {
       }
     });
 };
+
 const insignia = ref<string>("");
 const insigniaOptions = ref<any>([]);
 const insigniaType = ref<string>("");
@@ -477,127 +485,55 @@ const pagination2 = ref({
 });
 const paging = ref<boolean>(true);
 const paging2 = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
+const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-const paginationLabel2 = (start: string, end: string, total: string) => {
+const paginationLabel2 = (start: number, end: number, total: number) => {
   if (paging2.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="row col-12 q-col-gutter-sm">
         <!-- {{ DataStore.typeinsigniaOptions }} -->
-        <q-select
-          v-if="props.roleUser=='admin'"
-          v-model="organization"
-          label="หน่วยงาน"
-          dense
-          emit-value
-          map-options
-          :options="organizationOptions"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          style="min-width: 150px"
-          @update:model-value="changtypeOc"
-        />
-        <q-select
-          v-model="DataStore.typeinsignia"
-          label="ปรเภทเครื่องราชฯ"
-          dense
-          emit-value
-          map-options
-          :options="DataStore.typeinsigniaOptions"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          style="min-width: 150px"
-          @update:model-value="DataStore.searchFilterTable"
-        />
+        <q-select v-if="props.roleUser == 'admin'" v-model="organization" label="หน่วยงาน" dense emit-value map-options
+          :options="organizationOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
+          :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
+          @update:model-value="changtypeOc" />
+        <q-select v-model="DataStore.typeinsignia" label="ปรเภทเครื่องราชฯ" dense emit-value map-options
+          :options="DataStore.typeinsigniaOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
+          :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
+          @update:model-value="DataStore.searchFilterTable" />
         <div>
           <q-btn size="md" icon="mdi-download" flat round color="primary">
             <q-tooltip>ดาวน์โหลด</q-tooltip>
           </q-btn>
-          <q-btn
-            size="12px"
-            flat
-            round
-            color="add"
-            icon="mdi-plus"
-            @click="clickmodalAdd"
-          >
+          <q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickmodalAdd">
             <q-tooltip>เพิ่ม</q-tooltip>
           </q-btn>
         </div>
         <q-space />
 
-        <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
+        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+          debounce="300" placeholder="ค้นหา">
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
+            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
           </template>
         </q-input>
 
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
+        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2" />
       </div>
       <div class="col-12 q-pt-sm">
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="DataStore.rows"
-          :filter="filterKeyword"
-          row-key="name"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
+        <q-table ref="table" :columns="columns" :rows="DataStore.rows" :filter="filterKeyword" row-key="name" flat
+          bordered :paging="true" dense class="custom-header-table" :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel" v-model:pagination="pagination">
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -607,11 +543,7 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-              @click.stop="nextPage(props.row.profileId)"
-            >
+            <q-tr :props="props" class="cursor-pointer" @click.stop="nextPage(props.row.profileId)">
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
               </q-td>
@@ -643,63 +575,25 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
                 {{ props.row.dateSend }}
               </q-td>
               <q-td auto-width>
-                <q-btn
-                  icon="mdi-dots-vertical"
-                  size="12px"
-                  color="grey-7"
-                  flat
-                  round
-                  dense
-                  @click.stop
-                >
+                <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense @click.stop>
                   <q-menu transition-show="jump-down" transition-hide="jump-up">
                     <q-list dense style="min-width: 250px">
-                      <q-item
-                        clickable
-                        v-close-popup
-                        @click.stop="clickmodalEdit(props.row)"
-                      >
-                        <q-item-section
-                          style="min-width: 0px"
-                          avatar
-                          class="q-py-sm"
-                        >
+                      <q-item clickable v-close-popup @click.stop="clickmodalEdit(props.row)">
+                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                           <q-tooltip>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-tooltip>
                           <q-icon color="primary" size="xs" name="mdi-pencil" />
                         </q-item-section>
-                        <q-item-section
-                          >แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section
-                        >
+                        <q-item-section>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section>
                       </q-item>
-                      <q-item
-                        clickable
-                        v-close-popup
-                        @click.stop="clickReject(props.row.profileId)"
-                      >
-                        <q-item-section
-                          style="min-width: 0px"
-                          avatar
-                          class="q-py-sm"
-                        >
+                      <q-item clickable v-close-popup @click.stop="clickReject(props.row.profileId)">
+                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                           <q-tooltip>ไม่ยื่นขอ</q-tooltip>
-                          <q-icon
-                            color="blue"
-                            size="xs"
-                            name="mdi-alert-circle-outline"
-                          />
+                          <q-icon color="blue" size="xs" name="mdi-alert-circle-outline" />
                         </q-item-section>
                         <q-item-section>ไม่ยื่นขอ</q-item-section>
                       </q-item>
-                      <q-item
-                        clickable
-                        v-close-popup
-                        @click.stop="clickDelete(props.row.profileId)"
-                      >
-                        <q-item-section
-                          style="min-width: 0px"
-                          avatar
-                          class="q-py-sm"
-                        >
+                      <q-item clickable v-close-popup @click.stop="clickDelete(props.row.profileId)">
+                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                           <q-tooltip>ลบออก</q-tooltip>
                           <q-icon color="red" size="xs" name="mdi-delete" />
                         </q-item-section>
@@ -712,18 +606,11 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
             </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>
+            <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>
+
       </div>
     </div>
   </div>
@@ -733,44 +620,21 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
     <q-card style="width: 850px; max-width: 80vw" class="q-pb-md">
       <q-toolbar class="q-py-md">
         <q-toolbar-title class="text-h6">เพิ่มรายชื่อ </q-toolbar-title>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="modalAdd = false"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn icon="close" unelevated round dense @click="modalAdd = false"
+          style="color: #ff8080; background-color: #ffdede" />
       </q-toolbar>
       <q-separator />
       <div class="q-pa-md">
         <q-toolbar style="padding: 0">
-          <q-input
-            borderless
-            outlined
-            dense
-            debounce="300"
-            placeholder="ค้นหา"
-            style="width: 850px; max-width: auto"
-            v-model="filterKeyword2"
-          >
+          <q-input borderless outlined dense debounce="300" placeholder="ค้นหา" style="width: 850px; max-width: auto"
+            v-model="filterKeyword2">
             <template v-slot:append>
               <q-icon name="search" />
             </template>
           </q-input>
         </q-toolbar>
-        <q-table
-          flat
-          bordered
-          dense
-          :rows="rows2"
-          :columns="columns2"
-          :filter="filterKeyword2"
-          row-key="name"
-          class="custom-header-table"
-          :pagination-label="paginationLabel2"
-          v-model:pagination="pagination2"
-        >
+        <q-table flat bordered dense :rows="rows2" :columns="columns2" :filter="filterKeyword2" row-key="name"
+          class="custom-header-table" :pagination-label="paginationLabel2" v-model:pagination="pagination2">
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -796,27 +660,14 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
                 {{ props.row.organizationOrganization }}
               </q-td>
               <q-td>
-                <q-btn
-                  outline
-                  :props="props"
-                  label="เพิ่ม"
-                  class="text-teal-5"
-                  @click="clickAdd(props.row.id)"
-                />
+                <q-btn outline :props="props" label="เพิ่ม" class="text-teal-5" @click="clickAdd(props.row.id)" />
                 <q-tooltip>เพิ่ม</q-tooltip>
               </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>
+            <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>
       </div>
@@ -827,39 +678,18 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
   <q-dialog v-model="modalEdit" persistent>
     <q-card style="width: 450px; max-width: 80vw" class="q-pb-md">
       <q-toolbar class="q-py-md">
-        <q-toolbar-title class="text-h6"
-          >แก้ไขเครื่องราชฯ ที่ยื่นขอ
+        <q-toolbar-title class="text-h6">แก้ไขเครื่องราชฯ ที่ยื่นขอ
         </q-toolbar-title>
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="modalEdit = false"
-          style="color: #ff8080; background-color: #ffdede"
-        />
+        <q-btn icon="close" unelevated round dense @click="modalEdit = false"
+          style="color: #ff8080; background-color: #ffdede" />
       </q-toolbar>
       <q-separator />
       <div class="q-pa-md">
         <div class="row q-col-gutter-sm">
           <div class="col">
-            <q-select
-              v-model="insignia"
-              label="ชื่อเครื่องราชฯ"
-              dense
-              emit-value
-              map-options
-              :options="insigniaOptions"
-              option-value="id"
-              option-label="name"
-              lazy-rules
-              hide-bottom-space
-              :readonly="false"
-              :borderless="false"
-              :outlined="true"
-              :hide-dropdown-icon="false"
-              style="min-width: 150px"
-            />
+            <q-select v-model="insignia" label="ชื่อเครื่องราชฯ" dense emit-value map-options :options="insigniaOptions"
+              option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
+              :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px" />
           </div>
           <!-- <div class="col">
             <q-select
diff --git a/src/modules/07_insignia/components/2_Manage/Tab2.vue b/src/modules/07_insignia/components/2_Manage/Tab2.vue
index db171b4ab..229b55b4a 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab2.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab2.vue
@@ -3,6 +3,7 @@ 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";
 
 const router = useRouter();
 import http from "@/plugins/http";
@@ -156,6 +157,7 @@ onMounted(async () => {
     }
   }
 });
+
 const changtypeOc = () => {
   if (props.fecthInsigniaByOc) {
     props.fecthInsigniaByOc(
@@ -184,121 +186,66 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
+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) => {
+  dialogTitle.value = 'หมายเหตุของ' + name;
+  dialogDesc.value = requestNote;
+  dialogNote.value = true;
+}
+
+const closeReson = () => {
+  dialogNote.value = false;
+}
+
 </script>
 <template>
   <div class="col-12 row q-pa-md">
     <div class="row col-12">
       <!-- {{ DataStore.typeinsigniaOptions }} -->
       <div class="row col-12 q-col-gutter-sm">
-        <q-select
-          v-if="props.roleUser == 'admin'"
-          v-model="organization"
-          label="หน่วยงาน"
-          dense
-          emit-value
-          map-options
-          :options="organizationOptions"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          style="min-width: 150px"
-          @update:model-value="changtypeOc"
-        />
-        <q-select
-          v-model="DataStore.typeinsignia"
-          label="ปรเภทเครื่องราชฯ"
-          dense
-          emit-value
-          map-options
-          :options="DataStore.typeinsigniaOptions"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          style="min-width: 150px"
-          @update:model-value="DataStore.searchFilterTable"
-        />
+        <q-select v-if="props.roleUser == 'admin'" v-model="organization" label="หน่วยงาน" dense emit-value map-options
+          :options="organizationOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
+          :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
+          @update:model-value="changtypeOc" />
+        <q-select v-model="DataStore.typeinsignia" label="ปรเภทเครื่องราชฯ" dense emit-value map-options
+          :options="DataStore.typeinsigniaOptions" option-value="id" option-label="name" lazy-rules hide-bottom-space
+          :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false" style="min-width: 150px"
+          @update:model-value="DataStore.searchFilterTable" />
         <q-space />
 
-        <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
+        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+          debounce="300" placeholder="ค้นหา">
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
+            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
           </template>
         </q-input>
 
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
+        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2" />
       </div>
       <div class="col-12 q-pt-sm">
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="DataStore.rows"
-          :filter="filterKeyword"
-          row-key="name"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
+        <q-table ref="table" :columns="columns" :rows="DataStore.rows" :filter="filterKeyword" row-key="name" flat
+          bordered :paging="true" dense class="custom-header-table" :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel" v-model:pagination="pagination">
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
+              <q-th auto-width />
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-              @click="nextPage(props.row.profileId)"
-            >
+            <q-tr :props="props" class="cursor-pointer" @click="nextPage(props.row.profileId)">
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
               </q-td>
@@ -327,21 +274,21 @@ const paginationLabel = (start: string, end: string, total: string) => {
               <q-td key="insigniaLevel" :props="props">
                 {{ props.row.insigniaLevel }}
               </q-td>
+              <q-td v-if="props.row.requestNote != ''" auto-width>
+                <q-btn dense size="12px" flat round color="blue" @click.stop
+                  @click="showReson(props.row.name, props.row.requestNote)" icon="mdi-information-outline">
+                  <q-tooltip>เหตุผลการไม่ยื่นขอ</q-tooltip>
+                </q-btn>
+              </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
+            <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>
+
+        <DialogInformation :modal="dialogNote" :title="dialogTitle" :desc="dialogDesc" :click-close="closeReson" />
       </div>
     </div>
   </div>
diff --git a/src/modules/07_insignia/components/2_Manage/Tab3.vue b/src/modules/07_insignia/components/2_Manage/Tab3.vue
index 42599e5e7..640ae0bb9 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab3.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab3.vue
@@ -179,10 +179,15 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
+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 showNote = (requestNote: string) => {
+  dialogNote.value = true;
+}
 </script>
 <template>
   <div class="col-12 row q-pa-md">
@@ -285,6 +290,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
+              <q-th auto-width />
             </q-tr>
           </template>
           <template v-slot:body="props">
@@ -321,6 +327,11 @@ const paginationLabel = (start: string, end: string, total: string) => {
               <q-td key="insigniaLevel" :props="props">
                 {{ props.row.insigniaLevel }}
               </q-td>
+              <q-td v-if="props.row.requestNote != ''" auto-width>
+                <q-btn dense size="12px" flat round color="blue" @click.stop @click="showNote(props.row.requestNote)" icon="mdi-information-outline">
+                  <q-tooltip>เหตุผลการลบ</q-tooltip>
+                </q-btn>
+              </q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index 224a65e43..83a957592 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -13,13 +13,14 @@ 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 keycloak from "@/plugins/keycloak";
 
 const roleUser = ref<string>("admin");
 
 const DataStore = useInsigniaDataStore();
 const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader, dialogMessage } =
+const { messageError, dialogConfirm, showLoader, hideLoader, success } =
   mixin;
 const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
@@ -156,6 +157,8 @@ const changround = async () => {
 //   // }
 //   // console.log(data);
 // };
+const requestNote = ref<string>("")
+const requestStatus = ref<string>("")
 const fecthInsigniaByOc = async (
   roundId: string,
   ocId: string,
@@ -163,11 +166,14 @@ const fecthInsigniaByOc = async (
   status: string
 ) => {
   showLoader();
-  console.log("ocId===>", ocId);
+  // console.log("ocId===>", ocId);
   await http
     .get(config.API.insigniaList(roundId, ocId, role, status))
     .then(async (res) => {
       // console.log(res);
+      requestNote.value = res.data.result.requestNote;
+      requestStatus.value = res.data.result.requestStatus;
+
       await DataStore.fetchData(res.data.result.items);
     })
     .catch((err) => {
@@ -179,6 +185,84 @@ const fecthInsigniaByOc = async (
       hideLoader();
     });
 };
+
+const sendToDirector = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .get(config.API.insigniaSendToDirector(round.value, DataStore.agency))
+        .then(async () => {
+          success($q, "บันทึกสำเร็จ");
+          await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
+        })
+        .catch((err) => {
+          // console.log(err);
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+};
+
+const modalPopupBackToEdit = ref<boolean>(false);
+const popupBackToEdit = async () => {
+  modalPopupBackToEdit.value = true;
+}
+const closeModalPopupBackToEdit = async () => {
+  modalPopupBackToEdit.value = false;
+}
+
+const backToEdit = async (reason: string) => {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.insigniaDirectorBackToEdit(round.value, DataStore.agency), {
+          reason: reason
+        })
+        .then(async () => {
+          success($q, "บันทึกสำเร็จ");
+          await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
+        })
+        .catch((err) => {
+          // console.log(err);
+          messageError($q, err);
+        })
+        .finally(() => {
+          closeModalPopupBackToEdit()
+          hideLoader();
+        });
+    },
+    'ยืนยันการตีกลับ',
+    'ต้องการยืนยันการตีกลับใช่หรือไม่?');
+};
+
+const directorApproved = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .get(config.API.insigniaDirectorApproved(round.value, DataStore.agency))
+        .then(async () => {
+          success($q, "บันทึกสำเร็จ");
+          await fecthInsigniaByOc(round.value, DataStore.agency, "officer", tab.value);
+        })
+        .catch((err) => {
+          // console.log(err);
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    'ยืนยันการอนุมัติ',
+    'ต้องการยืนยันการอนุมัติใช่หรือไม่?');
+};
 </script>
 
 <template>
@@ -188,106 +272,73 @@ const fecthInsigniaByOc = async (
   <q-card bordered class="row col-12 q-mt-sm">
     <div class="bg-grey-1 col-12 row items-center">
       <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
-      <q-select
-        borderless
-        dense
-        v-model="round"
-        :options="optionRound"
-        map-options
-        emit-value
-        option-value="id"
-        option-label="name"
-        @update:model-value="changround"
-      />
+      <q-select borderless dense v-model="round" :options="optionRound" map-options emit-value option-value="id"
+        option-label="name" @update:model-value="changround" />
     </div>
     <div class="col-12"><q-separator /></div>
     <div v-if="roleUser == 'admin'" 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">
-          <cardTop
-            :amount="stat.orgAllCount"
-            label="หน่วยงานทั้งหมด"
-            color="#016987"
-          />
-          <cardTop
-            :amount="stat.orgSendCount"
-            label="หน่วยงานที่ส่งรายชื่อเเล้ว"
-            color="#02A998"
-          />
-          <cardTop
-            :amount="stat.orgNoSendCount"
-            label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
-            color="#2EA0FF"
-          />
-          <cardTop
-            :amount="stat.allUserUser"
-            label="จำนวนคนที่ยื่นขอ"
-            color="#4154B3"
-          />
+          <cardTop :amount="stat.orgAllCount" label="หน่วยงานทั้งหมด" color="#016987" />
+          <cardTop :amount="stat.orgSendCount" label="หน่วยงานที่ส่งรายชื่อเเล้ว" color="#02A998" />
+          <cardTop :amount="stat.orgNoSendCount" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" color="#2EA0FF" />
+          <cardTop :amount="stat.allUserUser" label="จำนวนคนที่ยื่นขอ" color="#4154B3" />
         </div>
       </div>
     </div>
   </q-card>
 
   <q-card flat bordered class="col-12 q-mt-sm" v-if="loading">
+    <div v-if="roleUser == 'insignia1' && requestStatus == 'st4'" class="q-pa-md q-gutter-sm">
+      <q-banner inline-actions bordered class="bg-orange-1 text-orange border-orange">
+        <q-icon name="mdi-information-outline" size="20px" /> หมายเหตุ ตีกลับ {{ requestNote }}
+      </q-banner>
+    </div>
     <div class="row col-12">
-      <q-tabs
-        v-model="tab"
-        dense
-        class="text-grey"
-        active-color="primary"
-        active-class="bg-teal-1"
-        indicator-color="primary"
-        align="left"
-      >
-        <q-tab name="pending" label="ผู้ที่ได้รับพระราชทานเครื่องราชฯ" />
+      <q-tabs v-model="tab" dense class="text-grey" active-color="primary" active-class="bg-teal-1"
+        indicator-color="primary" align="left">
+        <q-tab name="pending" label="ผู้ที่ยื่นขอ" />
         <q-tab name="reject" label="คนที่ไม่ยื่นขอ" />
         <q-tab name="delete" label="คนที่ถูกลบออก" />
-        <q-tab
-          v-if="roleUser == 'admin'"
-          name="organization"
-          label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
-        />
+        <q-tab v-if="roleUser == 'admin'" name="organization" label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ" />
       </q-tabs>
     </div>
     <q-separator />
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="pending" class="q-pa-none">
-        <tab1
-          :tab="tab"
-          :roundId="round"
-          :fecthInsigniaByOc="fecthInsigniaByOc"
-          :role-user="roleUser"
-        />
+        <tab1 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser" />
       </q-tab-panel>
       <q-tab-panel name="reject" class="q-pa-none">
-        <tab2
-          :tab="tab"
-          :roundId="round"
-          :fecthInsigniaByOc="fecthInsigniaByOc"
-          :role-user="roleUser"
-        />
+        <tab2 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser" />
       </q-tab-panel>
       <q-tab-panel name="delete" class="q-pa-none">
-        <tab3
-          :tab="tab"
-          :roundId="round"
-          :fecthInsigniaByOc="fecthInsigniaByOc"
-          :role-user="roleUser"
-        />
+        <tab3 :tab="tab" :roundId="round" :fecthInsigniaByOc="fecthInsigniaByOc" :role-user="roleUser" />
       </q-tab-panel>
-      <q-tab-panel
-        v-if="roleUser == 'admin'"
-        name="organization"
-        class="q-pa-none"
-      >
+      <q-tab-panel v-if="roleUser == 'admin'" name="organization" class="q-pa-none">
         <tab4 :tab="tab" :roundId="round" :role-user="roleUser" />
       </q-tab-panel>
     </q-tab-panels>
+
+    <q-toolbar class="q-py-md text-right">
+      <q-space />
+      <q-btn v-if="roleUser == 'insignia1' && (requestStatus == 'st1' || requestStatus == 'st4')" dense unelevated label="บันทึกข้อมูล" color="public"
+        class="q-px-md" @click="sendToDirector" />
+      <q-btn v-if="roleUser == 'insignia2' && requestStatus == 'st3'" dense unelevated label="ตีกลับ" color="orange"
+        class="q-px-md" @click="popupBackToEdit" />
+      <q-btn v-if="roleUser == 'insignia2' && requestStatus == 'st3'" dense unelevated label="อนุมัติ" color="positive"
+        class="q-px-md q-ml-md" @click="directorApproved" />
+    </q-toolbar>
+
+    <DialogPopupReason :modal="modalPopupBackToEdit" title="หมายเหตุการตีกลับ" label="หมายเหตุ" :click-close="closeModalPopupBackToEdit"
+      :savaForm="backToEdit" />
   </q-card>
 </template>
 
 <style lang="scss" scope>
+.border-orange {
+  border: 1px solid #FFA800;
+  border-radius: 5px;
+}
 .filter-card {
   background-color: #f1f1f1b0;
 }
diff --git a/src/modules/07_insignia/store.ts b/src/modules/07_insignia/store.ts
index ac631d0b2..7d6e66843 100644
--- a/src/modules/07_insignia/store.ts
+++ b/src/modules/07_insignia/store.ts
@@ -23,6 +23,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
       rows.value = await data.map((e: any) =>
       ({
         id: e.id,
+        citizenId: e.citizenId,
         profileId: e.profileId,
         name: e.fullName,
         position: e.position,
@@ -33,6 +34,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
         insigniaSend: e.requestInsignia,
         insigniaLevel: e.level,
         dateSend: date2Thai(e.requestDate),
+        requestNote: e.requestNote
       }))
       listinsignia.value = await rows.value
       filtertypeInsignia()
@@ -49,7 +51,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
     typeinsignia.value = "all"
     if (listinsignia.value.length !== 0) {
       const double_name = [
-        ...new Set(listinsignia.value.map((item: any) => item.insigniaType)),
+        ...new Set(listinsignia.value.map((item: any) => item.insigniaSend)),
       ];
       typeinsigniaOptions.value = [{ id: "all", name: "ทั้งหมด" }]
       for (let i = 1; i <= double_name.length; i++) {
@@ -70,7 +72,7 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
         rows.value = listinsignia.value;
       } else {
         rows.value = listinsignia.value.filter(
-          (e: any) => e.insigniaType === typeinsignia.value
+          (e: any) => e.insigniaSend === typeinsignia.value
         );
       }
     }