diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 36d485167..49a3c21c6 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -121,7 +121,7 @@ const menuList = readonly<any[]>([
   },
   {
     key: 10,
-    icon: "o_list",
+    icon: "mdi-file-certificate-outline",
     activeIcon: "order",
     label: "ออกคำสั่ง",
     path: "order",
diff --git a/src/modules/05_placement/components/AppointMent/Main.vue b/src/modules/05_placement/components/AppointMent/Main.vue
index 9165fa683..3a4c8fca7 100644
--- a/src/modules/05_placement/components/AppointMent/Main.vue
+++ b/src/modules/05_placement/components/AppointMent/Main.vue
@@ -192,8 +192,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a, b) => (b.createdAt) - (a.createdAt)
-    
   },
   {
     name: "status",
@@ -337,6 +335,13 @@ const status = (val: string) => {
       return "-";
   }
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -408,6 +413,8 @@ const status = (val: string) => {
             :filter="filterKeyword"
             row-key="citizenId"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/05_placement/components/Other/Main.vue b/src/modules/05_placement/components/Other/Main.vue
index 669a72823..5e1cd20eb 100644
--- a/src/modules/05_placement/components/Other/Main.vue
+++ b/src/modules/05_placement/components/Other/Main.vue
@@ -369,6 +369,12 @@ const status = (val: string) => {
       return "-";
   }
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการอื่นๆ</div>
@@ -438,6 +444,7 @@ const status = (val: string) => {
             :filter="filterKeyword"
             row-key="fullname"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/05_placement/components/Relocation/RelocationMain.vue b/src/modules/05_placement/components/Relocation/RelocationMain.vue
index de39c3233..54b05d98c 100644
--- a/src/modules/05_placement/components/Relocation/RelocationMain.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationMain.vue
@@ -325,6 +325,12 @@ const closeModalTree = async () => {
 onMounted(async () => {
   await getData();
 });
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการย้าย</div>
@@ -390,6 +396,7 @@ onMounted(async () => {
             :filter="filterKeyword"
             row-key="id"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index d42e1c3a0..451cf6f71 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -8,7 +8,6 @@ import config from "@/app.config";
 
 const $q = useQuasar();
 const myForm = ref<QForm>();
-const edit = ref<boolean>(false);
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -21,13 +20,22 @@ const {
 } = mixin;
 const route = useRoute();
 const assignId = ref<string>(route.params.form.toString());
-
+const saveData = ref<boolean>(true)
 const assign = ref<any>([]);
 const mentors = ref<any>([]);
 const commander = ref<any>([]);
 const status = ref<boolean>(true);
 // const evaluate = ref<any>([]);
-
+const saveEdit = (id: string) => {
+  dialogConfirm($q, () => console.log("save"));
+};
+const edit = () => {
+  status.value = true;
+  console.log(status.value);
+};
+const cancel = () => {
+  status.value = false;
+};
 onMounted(() => {
   fecthAssign(assignId.value);
   fecthResult(assignId.value);
@@ -81,6 +89,7 @@ const fecthResult = async (id: string) => {
       director1_dated.value = data.director1_dated;
       director2_dated.value = data.director2_dated;
       status.value = false;
+      saveData.value = false;
     })
     .catch((e) => {
       console.log(e);
@@ -138,16 +147,49 @@ const postData = async () => {
 </script>
 
 <template>
-  <div class="row col-12 q-mr-md">
-    <q-form ref="myForm">
+  <div class="row col-12 q-ma-xs">
       <div class="toptitle text-dark col-12 row items-center">
         <div>แบบรายงานการประเมินฯ</div>
+        <q-space />
+        <div v-if="status == false">
+          <q-btn
+            flat
+            round
+            color="primary"
+            @click="edit()"
+            icon="mdi-pencil-outline"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+        <div v-else>
+          <q-btn flat round color="red" @click="cancel()" icon="mdi-undo">
+            <q-tooltip>ยกเลิก</q-tooltip>
+          </q-btn>
+          <q-btn
+            flat
+            round
+            color="public"
+            @click="saveEdit(assignId)"
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
       </div>
       <div class="row col-12">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
-              :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_start"
+              :locale="'th'"
+              autoApply
+              borderless
+              :readonly ="!status"
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -155,10 +197,23 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
-                  " :label="`${'ระหว่างวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
+                <q-input
+                  outlined
+                  dense
+                  :disable="!status"
+                  class="full-width datepicker"
+                  :model-value="
+                    date_start != null ? date2Thai(date_start) : null
+                  "
+                  :label="`${'ระหว่างวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -166,8 +221,16 @@ const postData = async () => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
-              :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_finish"
+              :locale="'th'"
+              autoApply
+              :readonly="!status"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -175,10 +238,23 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
-                  " :label="`${'ถึงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
+                <q-input
+                  outlined
+                  dense
+                  :disable="!status"
+                  class="full-width datepicker"
+                  :model-value="
+                    date_finish != null ? date2Thai(date_finish) : null
+                  "
+                  :label="`${'ถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -189,30 +265,70 @@ const postData = async () => {
       </div>
 
       <div class="col-12 row q-mt-xs">
+        <div class="col-12 row q-col-gutter-md">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[
-            (val) =>
-              !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
-          ]" hide-bottom-space :options="options" class="col-xs-12 col-sm-6" dense borderless emit-value map-options
-            option-label="label" option-value="value" outlined v-model="develop"
-            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+          <q-select
+            :rules="[
+              (val) =>
+                !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="options"
+            class="col-xs-12 col-sm-6"
+            dense
+            borderless
+            :disable="!status"
+            emit-value
+            map-options
+            option-label="label"
+            option-value="value"
+            outlined
+            v-model="develop"
+            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
+    </div>
       <div class="col-12 row q-mt-lg">
+        <div class="col-12 row q-col-gutter-md">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[
-            (val) =>
-              !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
-          ]" hide-bottom-space :options="optionsResult" class="col-xs-12 col-sm-6" dense borderless emit-value
-            map-options option-label="label" option-value="value" outlined v-model="result"
-            label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
+          <q-select
+            :rules="[
+              (val) =>
+                !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="optionsResult"
+            class="col-xs-12 col-sm-6"
+            :disable="!status"
+            dense
+            borderless
+            emit-value
+            map-options
+            option-label="label"
+            option-value="value"
+            outlined
+            v-model="result"
+            label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
-
+    </div>
       <div class="col-12 row q-mt-lg">
         <div class="col-12">
-          <q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
-            v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']" />
+          <q-input
+            hide-bottom-space
+            dense
+            borderless
+            outlined
+            :disable="!status"
+            class="bg-white"
+            type="textarea"
+            
+            v-model="reson"
+            label="เหตุผล"
+            :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"
+          />
         </div>
       </div>
 
@@ -226,11 +342,27 @@ const postData = async () => {
             ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="commander" label=""
-              option-label="name" disable />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id"
+              outlined
+              :options="commander"
+              label=""
+              option-label="name"
+              disable
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="chairman_dated" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="chairman_dated"
+                :locale="'th'"
+                :readonly="!status"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -238,10 +370,23 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="chairman_dated != null ? date2Thai(chairman_dated) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      chairman_dated != null ? date2Thai(chairman_dated) : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -257,11 +402,27 @@ const postData = async () => {
             <!-- ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector" label=""
-              option-label="name" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id2"
+              outlined
+              :disable="!status"
+              :options="optionDirector"
+              label=""
+              option-label="name"
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director1_dated" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director1_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :readonly="!status"
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -269,12 +430,25 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director1_dated != null
-                      ? date2Thai(director1_dated)
-                      : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director1_dated != null
+                        ? date2Thai(director1_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -290,11 +464,27 @@ const postData = async () => {
             <!-- ผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector" label=""
-              option-label="name" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id3"
+              outlined
+              :options="optionDirector"
+              :disable="!status"
+              label=""
+              option-label="name"
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director2_dated" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director2_dated"
+                :locale="'th'"
+                autoApply
+                :readonly="!status"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -302,12 +492,25 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director2_dated != null
-                      ? date2Thai(director2_dated)
-                      : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director2_dated != null
+                        ? date2Thai(director2_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -320,9 +523,13 @@ const postData = async () => {
 
       <q-toolbar class="text-primary">
         <q-space />
-        <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          @click="savaForm"
+          v-if="!saveData"
+        />
       </q-toolbar>
-    </q-form>
   </div>
 </template>
 
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index 9ecf53361..5da0549cb 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -407,8 +407,7 @@ const saveformdata = async (data: any) => {
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
     <div class="toptitle text-dark col-12 row items-center">
-      <div>แบบบันทึกผล</div>
-      <q-space/>        
+      <div>แบบบันทึกผล</div>      
           <q-space />
           <div v-if="status == false">
             <q-btn
diff --git a/src/modules/06_retirement/components/Discharged/dischargedMain.vue b/src/modules/06_retirement/components/Discharged/dischargedMain.vue
index a007e5d67..79bd53767 100644
--- a/src/modules/06_retirement/components/Discharged/dischargedMain.vue
+++ b/src/modules/06_retirement/components/Discharged/dischargedMain.vue
@@ -302,6 +302,12 @@ const saveOrder = async () => {
       hideLoader();
     });
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการปลดออก</div>
@@ -367,6 +373,7 @@ const saveOrder = async () => {
             :filter="filterKeyword"
             row-key="id"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
index 34e77698d..2914a3a20 100644
--- a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
+++ b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
@@ -302,6 +302,12 @@ const saveOrder = async () => {
       hideLoader();
     });
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการให้ออก</div>
@@ -367,6 +373,7 @@ const saveOrder = async () => {
             :filter="filterKeyword"
             row-key="id"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionMain.vue b/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
index 714187f17..9bd73b41b 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
@@ -303,6 +303,12 @@ const saveOrder = async () => {
       hideLoader();
     });
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการไล่ออก</div>
@@ -368,6 +374,7 @@ const saveOrder = async () => {
             :filter="filterKeyword"
             row-key="id"
             :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/06_retirement/components/resign/Deceased.vue b/src/modules/06_retirement/components/resign/Deceased.vue
index a548cad24..f0cae6c40 100644
--- a/src/modules/06_retirement/components/resign/Deceased.vue
+++ b/src/modules/06_retirement/components/resign/Deceased.vue
@@ -125,17 +125,7 @@ const fectListDecased = async () => {
     });
 };
 
-const paging = ref<boolean>(true);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
+
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
@@ -147,6 +137,12 @@ const resetFilter = () => {
 const nextPage = (id: string) => {
   router.push("/deceased/" + id);
 };
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -196,7 +192,7 @@ const nextPage = (id: string) => {
           />
         </div>
         <div class="col-12 q-pt-sm">
-          <q-table
+          <d-table
             ref="table"
             :columns="columns"
             :rows="rows"
@@ -208,7 +204,6 @@ const nextPage = (id: string) => {
             dense
             class="custom-header-table"
             :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
             v-model:pagination="pagination"
           >
             <template v-slot:header="props">
@@ -257,19 +252,7 @@ const nextPage = (id: 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/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index b5f5e97c2..1b4ad5313 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -454,13 +454,40 @@
       </q-form>
     </q-card>
   </q-dialog> -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myFormConfirm">
+        <DialogHeader
+          :title="`${actionPass ? 'การอนุมัติการลาออก' : 'การยับยั้งการลาออก'}`"
+          :close="closeModal"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <q-input
+              hide-bottom-space
+              dense
+              outlined
+              lazy-rules
+              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+              v-model="reasonReign"
+              :label="`${'กรอกเหตุผล'}`"
+              type="textarea"
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter :editvisible="true" :save="conditionPopup" />
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar, QForm } from "quasar";
 import { ref, onMounted } from "vue";
-// import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
-// import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRetirementDataStore } from "@/modules/06_retirement/store";
 
@@ -487,6 +514,7 @@ const { statusText } = RetirementData;
 
 const id = ref<string>(route.params.id.toString());
 const myForm = ref<QForm | null>(null);
+const myFormConfirm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
 const dataDetail = ref<ResponseItems>({
   datetext: "",
@@ -522,6 +550,13 @@ const reason = ref<string>("");
 const location = ref<string>("");
 const status = ref<string>("");
 
+const modal = ref<boolean>(false);
+const actionPass = ref<boolean>(false);
+const reasonReign = ref<string>("");
+
+const closeModal = () => (modal.value = false);
+const openModal = () => (modal.value = true);
+
 // const modalPass = ref<boolean>(false);
 // const modalPassNot = ref<boolean>(false);
 onMounted(() => {
@@ -558,39 +593,60 @@ const fetchData = async (id: string) => {
 };
 
 const popUp = (action: "pass" | "passNot") => {
-  if (action === "pass") {
-    $q.dialog({
-      title: "ยืนยันการอนุมัติการลาออก",
-      message: "ต้องการยืนยันอนุมัติการลาออกนี้ใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
-      },
-      persistent: true,
-    }).onOk(async () => {
-      confirmpopUp();
-    });
-  } else if (action === "passNot") {
-    $q.dialog({
-      title: "ยืนยันการยับยั้งการลาออก",
-      message: "ต้องการยืนยันการยับยั้งการลาออกนี้ใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
-      },
-      persistent: true,
-    }).onOk(async () => {
-      rejectpopUp();
+  reasonReign.value = "";
+  actionPass.value = action === "pass";
+  openModal();
+  //   if (action === "pass") {
+  //     $q.dialog({
+  //       title: "ยืนยันการอนุมัติการลาออก",
+  //       message: "ต้องการยืนยันอนุมัติการลาออกนี้ใช่หรือไม่?",
+  //       cancel: {
+  //         flat: true,
+  //         color: "negative",
+  //       },
+  //       persistent: true,
+  //     }).onOk(async () => {
+  //       confirmpopUp();
+  //     });
+  //   } else if (action === "passNot") {
+  //     $q.dialog({
+  //       title: "ยืนยันการยับยั้งการลาออก",
+  //       message: "ต้องการยืนยันการยับยั้งการลาออกนี้ใช่หรือไม่?",
+  //       cancel: {
+  //         flat: true,
+  //         color: "negative",
+  //       },
+  //       persistent: true,
+  //     }).onOk(async () => {
+  //       rejectpopUp();
+  //     });
+  //   }
+};
+
+const conditionPopup = () => {
+  if (myFormConfirm.value !== null) {
+    myFormConfirm.value.validate().then(async (check) => {
+      if (check) {
+        if (actionPass.value) {
+          await confirmpopUp();
+        } else {
+          await rejectpopUp();
+        }
+      }
     });
   }
 };
 
 const confirmpopUp = async () => {
+  const body = {
+    reason: reasonReign.value,
+  };
   await http
-    .get(config.API.resignConfirm(id.value))
+    .put(config.API.resignConfirm(id.value), body)
     .then(() => {
       console.log("ยืนยัน");
-      success($q, "บันทึกสำเร็จ");
+      success($q, "การอนุมัติสำเร็จ");
+      closeModal();
     })
     .catch((e) => {
       console.log(e);
@@ -602,11 +658,14 @@ const confirmpopUp = async () => {
 };
 
 const rejectpopUp = async () => {
-  console.log("ยกเลิก");
+  const body = {
+    reason: reasonReign.value,
+  };
   await http
-    .get(config.API.resignReject(id.value))
+    .put(config.API.resignReject(id.value), body)
     .then(() => {
-      success($q, "บันทึกสำเร็จ");
+      success($q, "การยับยั้งสำเร็จ");
+      closeModal();
     })
     .catch((e) => {
       messageError($q, e);
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index 74139883e..57207f646 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -426,7 +426,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   round
                   color="primary"
                   @click="clickListInsignia(props.row.id)"
-                  icon="mdi-account-star"
+                  icon="mdi-account-check"
                 >
                   <q-tooltip>ผู้ได้รับเครื่องราชฯ</q-tooltip>
                 </q-btn>
diff --git a/src/modules/07_insignia/components/2_Manage/StatCard.vue b/src/modules/07_insignia/components/2_Manage/StatCard.vue
index 67ddb48bc..c5c0e1e0b 100644
--- a/src/modules/07_insignia/components/2_Manage/StatCard.vue
+++ b/src/modules/07_insignia/components/2_Manage/StatCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const sizeCard = (val: number) => {
   if (val === 5) {
-    return "width:15%;";
+    return "width:20%;";
   }
 };
 const props = defineProps({
diff --git a/src/modules/07_insignia/components/2_Manage/Tab4.vue b/src/modules/07_insignia/components/2_Manage/Tab4.vue
index 42d619368..7a3c32b00 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab4.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab4.vue
@@ -289,13 +289,14 @@ const paginationLabel = (start: string, end: string, total: string) => {
           class="col-xs-12 col-sm-3 col-md-2"
         />
       </div> -->
-      <div class="col-12 q-pt-sm">
+      <div class="col-12 ">
         <q-table
           ref="table"
           :columns="columns"
           :rows="rows"
           :filter="filterKeyword"
           row-key="name"
+          dense
           flat
           bordered
           :paging="true"
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index a8840174e..255d452a9 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -139,11 +139,11 @@ const fecthInsigniaByOc = async (
     รายชื่อข้าราชการสามัญฯ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชย์อิสริยาภรณ์
   </div>
   <q-card bordered class="row col-12 q-mt-sm">
-    <div class="bg-grey-2 col-12 row items-center">
-      <div class="q-pl-sm q-mr-md text-weight-bold text-grey">รอบ</div>
-
+    <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
@@ -153,9 +153,10 @@ const fecthInsigniaByOc = async (
         @update:model-value="changround"
       />
     </div>
+    <div class="col-12"><q-separator/></div>
     <div class="col-12 row bg-white">
       <div class="fit q-px-md q-py-sm">
-        <div class="row col-12 q-col-gutter-md fit">
+        <div class="row col-12 q-col-gutter-sm fit">
           <cardTop
             :amount="stat.orgAllCount"
             label="หน่วยงานทั้งหมด"
@@ -200,28 +201,28 @@ const fecthInsigniaByOc = async (
     </div>
     <q-separator />
     <q-tab-panels v-model="tab" animated>
-      <q-tab-panel name="pending">
+      <q-tab-panel name="pending" class="q-pa-none">
         <tab1
           :tab="tab"
           :roundId="round"
           :fecthInsigniaByOc="fecthInsigniaByOc"
         />
       </q-tab-panel>
-      <q-tab-panel name="reject">
+      <q-tab-panel name="reject" class="q-pa-none">
         <tab2
           :tab="tab"
           :roundId="round"
           :fecthInsigniaByOc="fecthInsigniaByOc"
         />
       </q-tab-panel>
-      <q-tab-panel name="delete">
+      <q-tab-panel name="delete" class="q-pa-none">
         <tab3
           :tab="tab"
           :roundId="round"
           :fecthInsigniaByOc="fecthInsigniaByOc"
         />
       </q-tab-panel>
-      <q-tab-panel name="organization">
+      <q-tab-panel name="organization" class="q-pa-none">
         <tab4 :tab="tab" :roundId="round" />
       </q-tab-panel>
     </q-tab-panels>
diff --git a/src/modules/07_insignia/components/report/ReportView.vue b/src/modules/07_insignia/components/report/ReportView.vue
index 07479b0a9..950f88bf8 100644
--- a/src/modules/07_insignia/components/report/ReportView.vue
+++ b/src/modules/07_insignia/components/report/ReportView.vue
@@ -40,6 +40,10 @@
 
 <style lang="scss" scope>
 .q-item.hover-green:hover {
-  background-color: #d5f1ee;
+  background-color: #d5f1ee57;
+  border-radius: 2px ;
+}
+.q-item.hover-green{
+  padding: 10px;
 }
 </style>
diff --git a/src/modules/07_insignia/components/report/Report_01.vue b/src/modules/07_insignia/components/report/Report_01.vue
index 7f5505edf..77a935cca 100644
--- a/src/modules/07_insignia/components/report/Report_01.vue
+++ b/src/modules/07_insignia/components/report/Report_01.vue
@@ -63,7 +63,7 @@ const backHistory = () => {
   </div>
   <div>
     <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="q-pa-md q-gutter-y-md">
+      <div class="q-pa-md q-gutter-y-sm">
         <q-toolbar style="padding: 0" >
           <q-select
             class="q-mr-sm"
@@ -87,11 +87,13 @@ const backHistory = () => {
           <q-space />
           <div class="q-pa-ms q-gutter-sm" style="padding: 0">
             <q-btn outline color="primary" icon="download" label="ดาวน์โหลด" />
-            <q-btn icon="mdi-eye" color="primary" label="แสดงรางงาน" />
+            <q-btn unelevated icon="mdi-eye" color="primary" label="แสดงรางงาน" />
             <q-btn
-              color="primary"
+              unelevated
+              color="blue"
               icon="mdi-fullscreen"
               @click="dialog = true"
+              dense
             />
           </div>
         </q-toolbar>
@@ -107,7 +109,7 @@ const backHistory = () => {
           separator-class="bg-white disabled"
         >
           <template v-slot:before>
-            <div class="q-pa-md">
+            <div class="q-px-sm">
               <div class="row items-start items-center">
                 <div class="col">
                   <q-btn
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 05fa10027..393ff0a04 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -220,47 +220,64 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
     บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์/การจ่ายใบกำกับ
   </div>
   <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
-    <div class="q-pa-md row items-center">
-      <selector hide-bottom-space borderless dense lazy-rules emit-value map-options options-dense option-label="name"
-        option-value="id" v-model="selectRound" :options="selectRoundOption" use-input input-debounce="0"
-        input-class="text-bold text-grey">
-        <template v-slot:before><label class="text-bold text-grey" style="font-size: 16px">รอบ</label>
-        </template>
-      </selector>
+    <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>
+      <div>
+        <selector 
+          hide-bottom-space 
+          borderless 
+          dense 
+          lazy-rules 
+          emit-value 
+          map-options 
+          options-dense 
+          option-label="name"
+          option-value="id" 
+          v-model="selectRound" 
+          :options="selectRoundOption" 
+          use-input 
+          input-debounce="0"
+          input-class="text-bold text-grey">
+        </selector>
+      </div>
     </div>
     <q-separator />
-    <q-tabs v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
+    <q-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
       <q-tab name="hight" label="ขั้นสายสะพาน" />
       <q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
       <q-tab name="medal" label="เหรียญตรา" />
       <q-tab name="doc" label="เอกสารอ้างอิง" />
     </q-tabs>
     <q-separator />
-    <div class="q-py-md q-px-md">
+    <div>
 
-      <div v-if="tab=='hight'">
-        <div class="row col-12 q-pb-sm">
+      <div v-if="tab=='hight'" class="q-pa-md">
+        <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
           <selector outlined dense lazy-rules v-model="selectType" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
             emit-value map-options option-label="name" :options="selectTypeOption" option-value="id" use-input
-            input-debounce="0" style="min-width: 150px" class="gt-xs q-ml-sm" @filter="(inputValue: string, doneFn: Function) => filterSelector(inputValue, doneFn, 'selectTypeOption')" />
-          <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-          <q-btn flat round color="light-blue" icon="upload">
-            <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
+            input-debounce="0" style="min-width: 150px" @filter="(inputValue: string, doneFn: Function) => filterSelector(inputValue, doneFn, 'selectTypeOption')" />
+          <div>  
+            <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+          </div>
+          <div> 
+            <q-btn flat round color="light-blue" icon="upload">
+              <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
 
           <q-space />
 
@@ -309,31 +326,35 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
         </d-table>
       </div>
 
-      <div v-else-if="tab=='low'">
-        <div class="row col-12 q-pb-sm">
+      <div v-else-if="tab=='low'" class="q-pa-md">
+        <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
           <selector outlined dense lazy-rules v-model="selectType" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
             emit-value map-options option-label="name" :options="selectTypeOption" option-value="id" use-input
-            input-debounce="0" style="min-width: 150px" class="gt-xs q-ml-sm" @filter="(inputValue: string,
+            input-debounce="0" style="min-width: 150px" @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'selectTypeOption'
               )" />
-          <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-          <q-btn flat round color="light-blue" icon="upload">
-            <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
+          <div>
+            <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+          </div>
+          <div>
+            <q-btn flat round color="light-blue" icon="upload">
+              <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
 
           <q-space />
 
@@ -382,32 +403,35 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
         </d-table>
       </div>
 
-      <div v-else-if="tab=='medal'">
-        <div class="row col-12 q-pb-sm">
+      <div v-else-if="tab=='medal'" class="q-pa-md">
+        <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
           <selector outlined dense lazy-rules v-model="selectType" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
             emit-value map-options option-label="name" :options="selectTypeOption" option-value="id" use-input
-            input-debounce="0" style="min-width: 150px" class="gt-xs q-ml-sm" @filter="(inputValue: string,
+            input-debounce="0" style="min-width: 150px"  @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'selectTypeOption'
               )" />
-          <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-          <q-btn flat round color="light-blue" icon="upload">
-            <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                  <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-
+          <div>
+            <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+          </div>
+          <div>
+            <q-btn flat round color="light-blue" icon="upload">
+              <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup>
+                    <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                    <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
           <q-space />
 
           <div class="items-center" style="display: flex">
@@ -457,181 +481,187 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 
       <div v-else-if="tab=='doc'">
         <Transition>
-        <div class="bg-base rounded-borders q-pa-md q-mb-md">
-          <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
-            <!-- <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="issue"
-                :label="`${'ฉบับ'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="book"
-                :label="`${'เล่มที่'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="volume"
-                :label="`${'เล่ม'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="section"
-                :label="`${'ตอนที่'}`"
-                hide-bottom-space
-              />
-            </div> -->
-            <div class="col-xs-6 col-md-4">
-              <q-file
-                class="bg-white"
-                outlined
-                dense
-                v-model="fileUpload"
-                label="ไฟล์เอกสาร"
-                hide-bottom-space
-                lazy-rules
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-            </div>
-            <div class="col-xs-6 col-md-3">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="documentTitle"
-                :label="`${'ชื่อเอกสาร'}`"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-12 col-md-5">
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                v-model="reason"
-                :label="`${'หมายเหตุ'}`"
-                hide-bottom-space
-              />
-            </div>
-            <!-- <div class="col-xs-6 col-md-2">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateGoverment"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
+          <div>
+            <div class="q-pa-md">
+              <div class="row col-12 q-col-gutter-sm">
+                <!-- <div class="col-xs-6 col-md-2">
                   <q-input
+                    class="bg-white"
                     outlined
                     dense
-                    class="full-width datepicker bg-white"
-                    :model-value="
-                      dateGoverment != null ? date2Thai(dateGoverment) : null
-                    "
-                    :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-md-2">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateReceiver"
-                :locale="'th'"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
+                    lazy-rules
+                    v-model="issue"
+                    :label="`${'ฉบับ'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-xs-6 col-md-2">
                   <q-input
+                    class="bg-white"
                     outlined
                     dense
-                    class="full-width datepicker bg-white"
-                    :model-value="
-                      dateReceiver != null ? date2Thai(dateReceiver) : null
-                    "
-                    :label="`${'วันที่ได้รับ'}`"
+                    lazy-rules
+                    v-model="book"
+                    :label="`${'เล่มที่'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-xs-6 col-md-2">
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="volume"
+                    :label="`${'เล่ม'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-xs-6 col-md-2">
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="section"
+                    :label="`${'ตอนที่'}`"
+                    hide-bottom-space
+                  />
+                </div> -->
+                <div class="col-xs-6 col-md-4">
+                  <q-file
+                    class="bg-white"
+                    outlined
+                    dense
+                    v-model="fileUpload"
+                    label="ไฟล์เอกสาร"
+                    hide-bottom-space
+                    lazy-rules
                   >
                     <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
+                      <q-icon name="attach_file" color="primary" />
                     </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div> -->
-            <div class="col-xs-12 col-md-9">
-              <!-- <p>
-                วันที่ประกาศราชกิจจานุเบกษา <b>{{ date2Thai(new Date()) }}</b>
-              </p> -->
+                  </q-file>
+                </div>
+                <div class="col-xs-6 col-md-3">
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="documentTitle"
+                    :label="`${'ชื่อเอกสาร'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-xs-12 col-md-5">
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="reason"
+                    :label="`${'หมายเหตุ'}`"
+                    hide-bottom-space
+                  />
+                </div>
+                <!-- <div class="col-xs-6 col-md-2">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateGoverment"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        dense
+                        class="full-width datepicker bg-white"
+                        :model-value="
+                          dateGoverment != null ? date2Thai(dateGoverment) : null
+                        "
+                        :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div class="col-xs-6 col-md-2">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="dateReceiver"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">
+                      {{ year + 543 }}
+                    </template>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        outlined
+                        dense
+                        class="full-width datepicker bg-white"
+                        :model-value="
+                          dateReceiver != null ? date2Thai(dateReceiver) : null
+                        "
+                        :label="`${'วันที่ได้รับ'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div> -->
+                <!--<div class="col-xs-12 col-md-9">
+                  <p>
+                    วันที่ประกาศราชกิจจานุเบกษา <b>{{ date2Thai(new Date()) }}</b>
+                  </p>
+                </div> -->
+                <!-- <div class="col-xs-6 col-md-3">
+                  <p>
+                    วันที่ได้รับ <b>{{ date2Thai(new Date()) }}</b>
+                  </p>
+                </div> -->
+              </div>
             </div>
-            <!-- <div class="col-xs-6 col-md-3">
-              <p>
-                วันที่ได้รับ <b>{{ date2Thai(new Date()) }}</b>
-              </p>
-            </div> -->
-            <div class="col-xs-12 col-md-3 flexsave">
+            <div class="col-12"><q-separator /></div>
+            <div class="col-12 flexsave q-pa-sm">
+              <q-space/>
               <q-btn label="บันทึก" @click="save" color="public" />
             </div>
           </div>
-        </div>
-      </Transition>
+            
+          
+        </Transition>
       </div>
 
     </div>
diff --git a/src/modules/08_registryEmployee/request/Main.ts b/src/modules/08_registryEmployee/request/Main.ts
index 78ad46293..0be4e8822 100644
--- a/src/modules/08_registryEmployee/request/Main.ts
+++ b/src/modules/08_registryEmployee/request/Main.ts
@@ -24,6 +24,8 @@ interface FormRegistryEmployee {
   draftOrganizationOrganization: String | null;
   newAgency: String | null;
   currentAgency: String | null;
+  status: String;
+  statustext: String;
 }
 interface ResponseEmployeeTemp {
   id: string;
@@ -49,5 +51,6 @@ interface ResponseEmployeeTemp {
   leaveDateOrder: Date | null;
   draftPositionEmployee: String | null;
   draftOrganizationOrganization: String | null;
+  draftOrgEmployeeStatus: String;
 }
 export type { ResponseEmployeeTemp, FormRegistryEmployee };
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 78d7a400c..d74ddafcd 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -7,26 +7,64 @@
       <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
-      <q-btn flat round color="primary" icon="mdi-account-arrow-right" @click="clickAddOrder" />
+      <q-btn
+        flat
+        round
+        color="primary"
+        icon="mdi-account-arrow-right"
+        @click="clickAddOrder"
+      >
+        <q-tooltip>ส่งรายชื่อไปออกคำสั่ง</q-tooltip>
+      </q-btn>
       <q-space />
       <div class="items-center" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
-        <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-          style="max-width: 200px" class="q-ml-sm">
+        <q-input
+          standout
+          dense
+          v-model="filter"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
           <template v-slot:append>
             <q-icon v-if="filter == ''" name="search" />
-            <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            <q-icon
+              v-if="filter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
         </q-input>
         <!-- แสดงคอลัมน์ใน table -->
-        <q-select v-model="visibleColumnsEmployeeTemp" :display-value="$q.lang.table.columns" multiple outlined dense
-          :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-          class="gt-xs q-ml-sm" />
+        <q-select
+          v-model="visibleColumnsEmployeeTemp"
+          :display-value="$q.lang.table.columns"
+          multiple
+          outlined
+          dense
+          :options="columns"
+          options-dense
+          option-value="name"
+          map-options
+          emit-value
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
+        />
       </div>
     </div>
     <div class="col-12 q-pt-sm">
-      <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumnsEmployeeTemp" :filter="filter"
-        row-key="id">
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumnsEmployeeTemp"
+        :filter="filter"
+        row-key="id"
+      >
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -37,16 +75,32 @@
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="no"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.rowIndex + 1 }}
             </q-td>
-            <q-td key="fullname" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="fullname"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.fullname }}
             </q-td>
-            <q-td key="newAgency" :props="props" @click="redirectToPage(props.row.id)">
-              <div class="col-12" v-if="props.row.draftOrganizationOrganization == null &&
-                props.row.draftPositionEmployee == null
-                ">
+            <q-td
+              key="newAgency"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              <div
+                class="col-12"
+                v-if="
+                  props.row.draftOrganizationOrganization == null &&
+                  props.row.draftPositionEmployee == null
+                "
+              >
                 <div class="text-weight-medium">
                   {{ "-" }}
                 </div>
@@ -60,8 +114,15 @@
                 </div>
               </div>
             </q-td>
-            <q-td key="currentAgency" :props="props" @click="redirectToPage(props.row.id)">
-              <div class="col-12" v-if="props.row.oc == null && props.row.position == null">
+            <q-td
+              key="currentAgency"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              <div
+                class="col-12"
+                v-if="props.row.oc == null && props.row.position == null"
+              >
                 <div class="text-weight-medium">
                   {{ "-" }}
                 </div>
@@ -78,82 +139,182 @@
             <!-- <q-td
               key="positionEmployeePosition"
               :props="props"
-              @click="redirectToPage(props.row.id)"
+              @click="redirectToPage(props.row.id,props.row.status)"
             >
               {{ props.row.positionEmployeePosition }}
             </q-td>
             <q-td
               key="positionEmployeePositionSide"
               :props="props"
-              @click="redirectToPage(props.row.id)"
+              @click="redirectToPage(props.row.id,props.row.status)"
             >
               {{ props.row.positionEmployeePositionSide }}
             </q-td>
             <q-td
               key="positionLine"
               :props="props"
-              @click="redirectToPage(props.row.id)"
+              @click="redirectToPage(props.row.id,props.row.status)"
             >
               {{ props.row.positionLine }}
             </q-td>
             <q-td
               key="positionEmployeeGroup"
               :props="props"
-              @click="redirectToPage(props.row.id)"
+              @click="redirectToPage(props.row.id,props.row.status)"
             >
               {{ props.row.positionEmployeeGroup }}
             </q-td>
-            <q-td key="oc" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td key="oc" :props="props" @click="redirectToPage(props.row.id,props.row.status)">
               {{ props.row.oc }}
             </q-td> -->
-            <q-td key="amount" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="amount"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.amount }}
             </q-td>
-            <q-td key="govAge" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="govAge"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.govAge }}
             </q-td>
-            <q-td key="dateAppoint" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="dateAppoint"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.dateAppoint }}
             </q-td>
-            <q-td key="dateStart" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="dateStart"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.dateStart }}
             </q-td>
-            <q-td key="salaryDate" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="salaryDate"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.salaryDate }}
             </q-td>
-            <q-td key="refSalary" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="refSalary"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.refSalary }}
             </q-td>
-            <q-td key="age" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="age"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.age }}
             </q-td>
-            <q-td key="fullnameOld" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="fullnameOld"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.fullnameOld }}
             </q-td>
-            <q-td key="createdAt" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="createdAt"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.createdAt }}
             </q-td>
-            <q-td key="isLeave" :props="props" @click="redirectToPage(props.row.id)">
+            <q-td
+              key="isLeave"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.isLeave }}
             </q-td>
-            <q-td key="leaveDateOrder" :props="props" @click="redirectToPage(props.row.id)">
+
+            <q-td
+              key="leaveDateOrder"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
               {{ props.row.leaveDateOrder }}
             </q-td>
-
+            <q-td
+              key="statustext"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.statustext }}
+            </q-td>
             <q-td auto-width>
-              <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
+              <q-btn
+                icon="mdi-dots-vertical"
+                size="12px"
+                color="grey-7"
+                flat
+                round
+                dense
+              >
                 <q-menu transition-show="jump-down" transition-hide="jump-up">
                   <q-list dense style="min-width: 160px">
-                    <q-item clickable v-close-popup @click="editDetail(props.row)">
-                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                        <q-icon color="blue" size="xs" name="mdi-account-settings" />
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="editDetail(props.row)"
+                      :disable="
+                        props.row.status == 'REPORT' ||
+                        props.row.status == 'DONE'
+                      "
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon
+                          :color="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                              ? 'grey'
+                              : 'blue'
+                          "
+                          size="xs"
+                          name="mdi-account-settings"
+                        />
                       </q-item-section>
                       <q-item-section>กำหนดตำแหน่ง</q-item-section>
                     </q-item>
                     <q-separator />
-                    <q-item clickable v-close-popup @click="clickDelete(props.row.id)">
-                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                        <q-icon color="red" size="xs" name="mdi-delete" />
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="clickDelete(props.row.id)"
+                      :disable="
+                        props.row.status == 'REPORT' ||
+                        props.row.status == 'DONE'
+                      "
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon
+                          :color="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                              ? 'grey'
+                              : 'red-7'
+                          "
+                          size="xs"
+                          name="mdi-delete"
+                        />
                       </q-item-section>
                       <q-item-section>ลบ</q-item-section>
                     </q-item>
@@ -173,16 +334,34 @@
       <DialogHeader tittle="กำหนดตำแหน่ง" :close="modalOpenClose" />
       <q-separator />
       <q-card-section class="q-pa-sm">
-        <d-table :rows="rowsPosition" :columns="columnsPosition" row-key="id" selection="single"
-          v-model:selected="selectedPosition" :visible-columns="visibleColumnsPosition">
+        <d-table
+          :rows="rowsPosition"
+          :columns="columnsPosition"
+          row-key="id"
+          selection="single"
+          v-model:selected="selectedPosition"
+          :visible-columns="visibleColumnsPosition"
+        >
           <template v-slot:body-selection="scope">
-            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
           </template>
         </d-table>
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
-        <q-btn dense unelevated label="บันทึก" color="public" @click="checkSave" class="q-px-md"><!-- icon="mdi-content-save-outline"
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="checkSave"
+          class="q-px-md"
+          ><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
         </q-btn>
       </q-card-actions>
@@ -192,14 +371,24 @@
   <!-- dialog ส่งรายชื่อไปออกคำสั่ง -->
   <q-dialog v-model="modaladdOrder">
     <q-card style="width: 900px; max-width: 80vw">
-      <DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="clickCloseSendModal" />
+      <DialogHeader
+        tittle="ส่งรายชื่อไปออกคำสั่ง"
+        :close="clickCloseSendModal"
+      />
       <q-separator />
       <q-card-section class="q-pt-none">
         <div class="row justify-end">
           <div class="col-5">
             <q-toolbar style="padding: 0">
-              <q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา"
-                style="width: 850px; max-width: auto">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filter"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
                 <template v-slot:append>
                   <q-icon name="search" />
                 </template>
@@ -208,37 +397,80 @@
           </div>
         </div>
 
-        <d-table :rows="rowsOrder" :columns="columnsOrder" :visible-columns="visibleColumnsOrder" :filter="filter"
-          row-key="id" selection="single" v-model:selected="selectedToOrder">
+        <d-table
+          :rows="rowsOrder"
+          :columns="columnsOrder"
+          :visible-columns="visibleColumnsOrder"
+          :filter="filter"
+          row-key="id"
+          selection="single"
+          v-model:selected="selectedToOrder"
+        >
           <template v-slot:body-selection="scope">
-            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td>
-                <q-checkbox keep-color color="primary" dense v-model="props.selected" />
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
               </q-td>
+
               <q-td key="no" :props="props">
                 {{ props.rowIndex + 1 }}
               </q-td>
               <q-td key="fullname" :props="props">
                 {{ props.row.fullname }}
               </q-td>
-              <q-td key="positionEmployeePosition" :props="props">
-                {{ props.row.positionEmployeePosition }}
+              <q-td key="newAgency" :props="props">
+                <div
+                  class="col-12"
+                  v-if="
+                    props.row.draftOrganizationOrganization == null &&
+                    props.row.draftPositionEmployee == null
+                  "
+                >
+                  <div class="text-weight-medium">
+                    {{ "-" }}
+                  </div>
+                </div>
+                <div class="col-12" v-else>
+                  <div class="text-weight-medium">
+                    {{ props.row.draftOrganizationOrganization ?? "-" }}
+                  </div>
+                  <div class="text-weight-light">
+                    {{ props.row.draftPositionEmployee ?? "-" }}
+                  </div>
+                </div>
               </q-td>
-              <q-td key="positionEmployeePositionSide" :props="props">
-                {{ props.row.positionEmployeePositionSide }}
-              </q-td>
-              <q-td key="positionLine" :props="props">
-                {{ props.row.positionLine }}
-              </q-td>
-              <q-td key="positionEmployeeGroup" :props="props">
-                {{ props.row.positionEmployeeGroup }}
-              </q-td>
-              <q-td key="oc" :props="props">
-                {{ props.row.oc }}
+              <q-td key="currentAgency" :props="props">
+                <div
+                  class="col-12"
+                  v-if="props.row.oc == null && props.row.position == null"
+                >
+                  <div class="text-weight-medium">
+                    {{ "-" }}
+                  </div>
+                </div>
+                <div class="col-12" v-else>
+                  <div class="text-weight-medium">
+                    {{ props.row.oc ?? "-" }}
+                  </div>
+                  <div class="text-weight-light">
+                    {{ props.row.position ?? "-" }}
+                  </div>
+                </div>
               </q-td>
+
               <q-td key="amount" :props="props">
                 {{ props.row.amount }}
               </q-td>
@@ -269,9 +501,13 @@
               <q-td key="isLeave" :props="props">
                 {{ props.row.isLeave }}
               </q-td>
+
               <q-td key="leaveDateOrder" :props="props">
                 {{ props.row.leaveDateOrder }}
               </q-td>
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
+              </q-td>
             </q-tr>
           </template>
         </d-table>
@@ -322,7 +558,7 @@ const {
   dialogMessage,
   dialogRemove,
   dialogConfirm,
-  dialogMessageNotify
+  dialogMessageNotify,
 } = mixin;
 
 const modaladdOrder = ref<boolean>(false);
@@ -368,12 +604,13 @@ const visibleColumnsOrder = ref<String[]>([
   "salaryDate",
   "age",
   "amount",
-  "isLeave",
+  "statustext",
   "leaveDateOrder",
+  "newAgency",
+  "currentAgency",
 ]);
 
-const visibleColumnsEmployeeTemp = ref<String[]>([]);
-visibleColumnsEmployeeTemp.value = [
+const visibleColumnsEmployeeTemp = ref<String[]>([
   "no",
   "fullname",
   "fullnameOld",
@@ -390,10 +627,12 @@ visibleColumnsEmployeeTemp.value = [
   "salaryDate",
   "age",
   "amount",
+  "statustext",
   "leaveDateOrder",
   "newAgency",
   "currentAgency",
-];
+]);
+
 // "isLeave",
 const columns = ref<QTableProps["columns"]>([
   {
@@ -645,6 +884,20 @@ const columns = ref<QTableProps["columns"]>([
     // sort: (a: string, b: string) =>
     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
 ]);
 const rows = ref<FormRegistryEmployee[]>([]);
 
@@ -788,13 +1041,12 @@ const columnsOrder = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px; min-width: 200px",
     style: "font-size: 14px; ",
   },
-
   {
-    name: "positionEmployeePosition",
+    name: "newAgency",
     align: "left",
-    label: "ตำแหน่ง",
+    label: "หน่วยงานที่รับการบรรจุ",
     sortable: true,
-    field: "positionEmployeePosition",
+    field: "newAgency",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -804,25 +1056,11 @@ const columnsOrder = ref<QTableProps["columns"]>([
       }),
   },
   {
-    name: "positionEmployeePositionSide",
+    name: "currentAgency",
     align: "left",
-    label: "ด้านของตำแหน่ง",
+    label: "หน่วยงานปัจจุบัน",
     sortable: true,
-    field: "positionEmployeePositionSide",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "positionLine",
-    align: "left",
-    label: "สายงาน",
-    sortable: true,
-    field: "positionLine",
+    field: "currentAgency",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -832,34 +1070,77 @@ const columnsOrder = ref<QTableProps["columns"]>([
       }),
   },
 
-  {
-    name: "positionEmployeeGroup",
-    align: "left",
-    label: "กลุ่มงาน",
-    sortable: true,
-    field: "positionEmployeeGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "oc",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "oc",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
+  //   {
+  //     name: "positionEmployeePosition",
+  //     align: "left",
+  //     label: "ตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionEmployeePosition",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+  //   {
+  //     name: "positionEmployeePositionSide",
+  //     align: "left",
+  //     label: "ด้านของตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionEmployeePositionSide",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+  //   {
+  //     name: "positionLine",
+  //     align: "left",
+  //     label: "สายงาน",
+  //     sortable: true,
+  //     field: "positionLine",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+
+  //   {
+  //     name: "positionEmployeeGroup",
+  //     align: "left",
+  //     label: "กลุ่มงาน",
+  //     sortable: true,
+  //     field: "positionEmployeeGroup",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+  //   {
+  //     name: "oc",
+  //     align: "left",
+  //     label: "สังกัด",
+  //     sortable: true,
+  //     field: "oc",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
   {
     name: "amount",
     align: "left",
@@ -964,17 +1245,17 @@ const columnsOrder = ref<QTableProps["columns"]>([
     // sort: (a: string, b: string) =>
     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "isLeave",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+  //   {
+  //     name: "isLeave",
+  //     align: "left",
+  //     label: "สถานะ",
+  //     sortable: true,
+  //     field: "isLeave",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     // sort: (a: string, b: string) =>
+  //     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
   {
     name: "leaveDateOrder",
     align: "left",
@@ -986,8 +1267,23 @@ const columnsOrder = ref<QTableProps["columns"]>([
     // sort: (a: string, b: string) =>
     //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
 ]);
 const rowsOrder = ref<FormRegistryEmployee[]>([]);
+const filters = ref<FormRegistryEmployee[]>([]);
 const selected = ref([]);
 onMounted(async () => {
   await nodeTree();
@@ -997,8 +1293,8 @@ const checkNull = (text: string) =>
   text == null
     ? ""
     : text == "00000000-0000-0000-0000-000000000000"
-      ? ""
-      : text;
+    ? ""
+    : text;
 
 const getPosition = async (id: string) => {
   showLoader();
@@ -1079,23 +1375,24 @@ const getPosition = async (id: string) => {
 
 const clickAddOrder = () => {
   modaladdOrder.value = true;
-  const filteredRows = rowsOrder.value.filter(
-    (row) => row.draftPositionEmployee !== null
+  const row = filters.value.filter(
+    (r: FormRegistryEmployee) => r.status == "PENDING"
   );
-  rowsOrder.value = filteredRows;
+
+  rowsOrder.value = row;
 };
 
 const clickCloseSendModal = () => {
   modaladdOrder.value = false;
 };
 const checkSave = () => {
-  dialogConfirm($q, async () => await saveData())
-}
+  dialogConfirm($q, async () => await saveData());
+};
 const saveData = async () => {
   if (selectedPosition.value.length == 0) {
     dialogMessageNotify(
       $q,
-      "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง",
+      "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง"
       // "กรุณาเลือกตำแหน่ง",
       // "warning",
       // undefined,
@@ -1110,8 +1407,8 @@ const saveData = async () => {
   }
 };
 const checkSaveOrder = () => {
-  dialogConfirm($q, () => SaveOrder())
-}
+  dialogConfirm($q, () => SaveOrder());
+};
 const SaveOrder = async () => {
   // ส่งไปออกคำสั่ง
   let pId: string[] = [];
@@ -1194,8 +1491,10 @@ const clickAdd = () => {
 };
 
 // ดูรายการแก้ไขรายชื่อ
-const redirectToPage = (id?: string) => {
-  router.push(`/registry-employee/edit/${id}`);
+const redirectToPage = (id?: string, status?: string) => {
+  if (!(status == "REPORT" || status == "DONE")) {
+    router.push(`/registry-employee/edit/${id}`);
+  }
 };
 const editDetail = async (row: any) => {
   await getPosition(row.id);
@@ -1204,10 +1503,9 @@ const editDetail = async (row: any) => {
   modal.value = true;
 };
 
-
 const clickDelete = (id: string) => {
-  dialogRemove($q, async () => await deleteData(id))
-}
+  dialogRemove($q, async () => await deleteData(id));
+};
 
 const deleteData = async (id: string) => {
   showLoader();
@@ -1222,7 +1520,7 @@ const deleteData = async (id: string) => {
     })
     .finally(() => {
       hideLoader();
-    })
+    });
 };
 
 const nodeTree = async () => {
@@ -1266,10 +1564,12 @@ const showEmployeeTemp = async () => {
       criterias: cirteria,
     })
     .then((res) => {
-      let data = res.data.result;
+      const data = res.data.result;
       rows.value = [];
+      filters.value = [];
+      let list: FormRegistryEmployee[] = [];
       data.map((e: ResponseEmployeeTemp) => {
-        rows.value.push({
+        list.push({
           id: e.id,
           fullname: e.fullname,
           fullnameOld: e.fullnameOld,
@@ -1299,10 +1599,12 @@ const showEmployeeTemp = async () => {
           currentAgency: "",
           draftPositionEmployee: e.draftPositionEmployee,
           draftOrganizationOrganization: e.draftOrganizationOrganization,
+          status: e.draftOrgEmployeeStatus ?? "",
+          statustext: statusText(e.draftOrgEmployeeStatus ?? ""),
         });
-
-        rowsOrder.value = rows.value.filter((e: any) => e.draftPositionEmployee !== null);
       });
+      rows.value = list;
+      filters.value = list;
     })
     .catch((e) => {
       messageError($q, e);
@@ -1312,6 +1614,26 @@ const showEmployeeTemp = async () => {
     });
 };
 
+const statusText = (val: String) => {
+  switch (val) {
+    case "WAITTING":
+      return "รอดำเนินการ";
+    case "PENDING":
+      return "เลือกตำแหน่งแล้ว";
+    case "APPROVE":
+      return "อนุมัติ";
+    case "REJECT":
+      return "ไม่อนุมัติ";
+    case "REPORT":
+      return "ส่งรายชื่อไปออกคำสั่ง";
+    case "DONE":
+      return "ออกคำสั่งเสร็จแล้ว";
+
+    default:
+      return "-";
+  }
+};
+
 // const showEmployeeTempOrder = async () => {
 //   let cirteria = [];
 
@@ -1380,6 +1702,5 @@ const showEmployeeTemp = async () => {
 const onSelected = async (id: string) => {
   //   await fetchPositionNumber(id);
 };
-
 </script>
 <style lang="scss"></style>