diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index 1ecbeaa30..ad631ec58 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -106,7 +106,8 @@
             <template v-slot:pagination="scope">
               <q-pagination
                 v-model="pagination.page"
-                color="grey-8"
+                active-color="primary"
+                color="dark"
                 :max="scope.pagesNumber"
                 :max-pages="5"
                 size="sm"
diff --git a/src/components/TableView.vue b/src/components/TableView.vue
index d8d0b5a5e..cedd2a9e9 100644
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -249,7 +249,8 @@
       <template v-slot:pagination="scope">
         <q-pagination
           v-model="pagination.page"
-          color="grey-8"
+          active-color="primary"
+          color="dark"
           :max="scope.pagesNumber"
           :max-pages="5"
           size="sm"
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 3e1e097a8..df5193a95 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -195,16 +195,16 @@ const menuList = readonly<any[]>([
   },
   {
     key: 7,
-    icon: "mdi-home-variant-outline",
-    activeIcon: "mdi-home-variant",
+    icon: "mdi-account-cancel-outline",
+    activeIcon: "mdi-account-cancel",
     label: "พ้นจากราชการ",
     path: "retirement",
     role: "retirement",
   },
   {
     key: 8,
-    icon: "mdi-home-variant-outline",
-    activeIcon: "mdi-home-variant",
+    icon: "mdi-medal-outline",
+    activeIcon: "mdi-medal",
     label: "เครื่องราชอิสริยาภรณ์",
     path: "insignia",
     role: "insignia",
diff --git a/src/modules/01_metadata/components/insignia/Insignia.vue b/src/modules/01_metadata/components/insignia/Insignia.vue
index c5db8f96f..4858afc35 100644
--- a/src/modules/01_metadata/components/insignia/Insignia.vue
+++ b/src/modules/01_metadata/components/insignia/Insignia.vue
@@ -304,7 +304,7 @@ const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
 const { manageData, changeManageColumns, getInsignia, dataInsignia } = store;
-const rows = ref<RequestItemsHistoryObject[]>(dataInsignia); //list data table
+const rows = ref<RequestItemsHistoryObject[]>(); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
 const tittleHistory = ref<string>("ประวัติแก้ไขชื่อเครื่องราชฯ"); //
diff --git a/src/modules/01_metadata/components/insignia/InsigniaType.vue b/src/modules/01_metadata/components/insignia/InsigniaType.vue
index cfeac7a8e..ce94bc177 100644
--- a/src/modules/01_metadata/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadata/components/insignia/InsigniaType.vue
@@ -206,7 +206,7 @@ const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
 const { manageData, changeManageColumns, getInsigniaType, dataInsigniaType } =
   store;
-const rows = ref<RequestItemsHistoryObject[]>(dataInsigniaType); //list data table
+const rows = ref<RequestItemsHistoryObject[]>(); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
 const tittleHistory = ref<string>("ประวัติแก้ไขลำดับชั้นเครื่องราชฯ"); //
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 876bdd835..15966d5a3 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
   <div>
-    <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="row q-pa-md">
-        <div class="col-xs-12 col-sm-3 col-md-2">
+    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <div class="row q-col-gutter-md">
+        <div class="row col-12 q-col-gutter-sm">
           <q-select
+            class="col-xs-10 col-sm-3 col-md-2"
             v-model="fiscalyear"
             label="ปีงบประมาณ"
             dense
@@ -41,6 +42,7 @@
         </div>
         <div class="col-xs-12 col-sm-3 col-md-2">
           <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
             standout
             dense
             v-model="filterKeyword"
@@ -48,7 +50,6 @@
             outlined
             debounce="300"
             placeholder="ค้นหา"
-            class="q-ml-sm"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
@@ -60,9 +61,8 @@
               />
             </template>
           </q-input>
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
           <q-select
+            class="col-xs-12 col-sm-3 col-md-2"
             v-model="visibleColumns"
             multiple
             outlined
@@ -75,15 +75,13 @@
             option-value="name"
             options-cover
             style="min-width: 150px"
-            class="gt-xs q-ml-sm"
           />
         </div>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-card bordered class="col-12 filter-card">
-          <div class="row q-pa-sm">
-            <div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
+        <div class="col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm">
               <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
                 v-model="OrderType"
                 label="ประเภท"
                 dense
@@ -100,9 +98,8 @@
                 :hide-dropdown-icon="false"
                 @update:model-value="searchFilterTable"
               />
-            </div>
-            <div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
               <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
                 v-model="OrderStatus"
                 label="สถานะ"
                 dense
@@ -120,117 +117,118 @@
                 @update:model-value="searchFilterTable"
               />
             </div>
-          </div>
-        </q-card>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="UpdataData"
-          :filter="filterKeyword"
-          row-key="Order"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          v-bind="attrs"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td
-                key="Order"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.Order }}
-              </q-td>
-              <q-td
-                key="OrderNum"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.OrderNum }}
-              </q-td>
-              <q-td
-                key="OrderDate"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.OrderDate }}
-              </q-td>
-              <q-td
-                key="OrderBy"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.OrderBy }}
-              </q-td>
-              <q-td
-                key="Signer"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                {{ props.row.Signer }}
-              </q-td>
-              <q-td
-                key="OrderStatus"
-                :props="props"
-                @click="redirectToPage(props.row.Order)"
-              >
-                <q-icon
-                  v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
-                  name="hourglass_top"
-                  color="orange"
-                  class="text-h5"
-                />
-                <q-icon
-                  v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
-                  name="mdi-check"
-                  color="positive"
-                  class="text-h5"
-                />
-              </q-td>
-
-              <q-td auto-width>
-                <q-btn
-                  dense
-                  size="12px"
-                  flat
-                  round
-                  color="red"
-                  @click="clickDelete(props.row.id)"
-                  icon="mdi-delete"
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="UpdataData"
+            :filter="filterKeyword"
+            row-key="Order"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            v-bind="attrs"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  key="Order"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
                 >
-                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+                  {{ props.row.Order }}
+                </q-td>
+                <q-td
+                  key="OrderNum"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.OrderNum }}
+                </q-td>
+                <q-td
+                  key="OrderDate"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.OrderDate }}
+                </q-td>
+                <q-td
+                  key="OrderBy"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.OrderBy }}
+                </q-td>
+                <q-td
+                  key="Signer"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  {{ props.row.Signer }}
+                </q-td>
+                <q-td
+                  key="OrderStatus"
+                  :props="props"
+                  @click="redirectToPage(props.row.Order)"
+                >
+                  <q-icon
+                    v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
+                    name="mdi-timer-sand"
+                    color="orange"
+                    class="text-h6"
+                  />
+                  <q-icon
+                    v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
+                    name="mdi-check"
+                    color="positive"
+                    class="text-h6"
+                  />
+                </q-td>
+
+                <q-td auto-width>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="red"
+                    @click="clickDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+          </q-table>
+        </div>
       </div>
     </q-card>
   </div>
@@ -252,7 +250,7 @@ const pagination = ref({
   sortBy: "desc",
   descending: false,
   page: 1,
-  rowsPerPage: 10,
+  rowsPerPage: 5,
 });
 
 const mixin = useCounterMixin();
@@ -329,7 +327,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "OrderStatus",
-    align: "left",
+    align: "center",
     label: "สถานะคำสั่ง",
     sortable: false,
     field: "OrderStatus",
@@ -355,9 +353,9 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<FormOrderPlacementMainData[]>([
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ยังไม่ได้ออกคำสั่ง",
@@ -366,39 +364,9 @@ const rows = ref<FormOrderPlacementMainData[]>([
 
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ยังไม่ได้ออกคำสั่ง",
@@ -431,7 +399,37 @@ const rows = ref<FormOrderPlacementMainData[]>([
     OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
     OrderType: "คำสั่งบรรจุและแต่งตั้ง",
   },
   {
@@ -703,7 +701,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
 
 <style lang="scss" scope>
 .filter-card {
-  background-color: #ededed;
+  background-color: #f1f1f1b0;
 }
 
 .toggle-expired-account {
diff --git a/src/modules/05_placement/components/exams_other/Main.vue b/src/modules/05_placement/components/exams_other/Main.vue
index d1627d0e8..5abffee7e 100644
--- a/src/modules/05_placement/components/exams_other/Main.vue
+++ b/src/modules/05_placement/components/exams_other/Main.vue
@@ -373,7 +373,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
 
 <style lang="scss" scope>
 .filter-card {
-  background-color: #EDEDED;
+  background-color: #f1f1f1b0;
 }
 
 .toggle-expired-account {
diff --git a/src/modules/05_placement/components/exams_sorkorcho/Main.vue b/src/modules/05_placement/components/exams_sorkorcho/Main.vue
index c4a78ea29..ea93fa279 100644
--- a/src/modules/05_placement/components/exams_sorkorcho/Main.vue
+++ b/src/modules/05_placement/components/exams_sorkorcho/Main.vue
@@ -293,88 +293,74 @@ const paginationLabel = (start: string, end: string, total: string) => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการสอบแข่งขัน / คัดเลือก
   </div>
-  <div>
-    <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="row q-pa-md">
-        <div class="col-xs-12 col-sm-3 col-md-2">
-          <q-select v-model="fiscalyear" label="ปีงบประมาณ" dense clearable emit-value map-options :options="fiscalyearOP"
-            option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
-            :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchfiscalyear" />
+    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <div class="row q-col-gutter-md">
+        <div class="row col-12 q-col-gutter-sm">
+            <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense clearable emit-value map-options :options="fiscalyearOP"
+              option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
+              :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchfiscalyear" />
+            <q-space />
+            <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined debounce="300" placeholder="ค้นหา">
+              <template v-slot:append>
+                <q-icon v-if="filterKeyword == ''" name="search" />
+                <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+              </template>
+            </q-input>
+            <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+              emit-value map-options :options="columns" option-value="name" options-cover />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-6"></div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
-          <q-input standout dense v-model="filterKeyword" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-            class="q-ml-sm">
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-            </template>
-          </q-input>
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
-          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            class="gt-xs q-ml-sm" />
-        </div>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-card bordered class="col-12 filter-card">
-          <div class="row q-pa-sm">
-            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
-              <q-select v-model="examTime" label="ครั้งที่" dense clearable emit-value map-options :options="examTimeOP"
+        <div class="col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="examTime" label="ครั้งที่" dense clearable emit-value map-options :options="examTimeOP"
                 option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
                 :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
-            </div>
-            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
-              <q-select v-model="examType" label="ประเภทการสอบ" dense clearable emit-value map-options option-label="name"
+              <q-select class="col-xs-12 col-sm-3 col-md-2" v-model="examType" label="ประเภทการสอบ" dense clearable emit-value map-options option-label="name"
                 :options="examTypeOP" option-value="id" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
                 :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
-            </div>
-            <div class="col-xs-12 col-sm-3 col-md-3">
-              <q-toggle v-model="expiredAccount" class="toggle-expired-account" color="blue" label="แสดงบัญชีหมดอายุ"
+              <q-toggle class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account" v-model="expiredAccount" color="blue" label="แสดงบัญชีหมดอายุ"
                 @update:model-value="searchFilterTable" />
             </div>
-          </div>
-        </q-card>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="id" flat bordered
-          dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel">
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
-              <q-td key="id" :props="props">
-                {{ props.row.id }}
-              </q-td>
-              <q-td key="examRound" :props="props">
-                {{ props.row.examRound }}
-              </q-td>
-              <q-td key="examOrder" :props="props">
-                {{ props.row.examOrder }}
-              </q-td>
-              <q-td key="fiscalYear" :props="props">
-                {{ props.row.fiscalYear + 543 }}
-              </q-td>
-              <q-td key="numberofCandidates" :props="props">
-                {{ props.row.numberofCandidates }}
-              </q-td>
-              <q-td key="examType" :props="props">
-                {{ props.row.examType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
-              </q-td>
-              <q-td key="accountExpirationDate" :props="props">
-                {{ textDate(props.row.accountExpirationDate) }}
-              </q-td>
-            </q-tr>
-          </template>
-        </q-table>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="id" flat bordered
+            dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel">
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
+                <q-td key="id" :props="props">
+                  {{ props.row.id }}
+                </q-td>
+                <q-td key="examRound" :props="props">
+                  {{ props.row.examRound }}
+                </q-td>
+                <q-td key="examOrder" :props="props">
+                  {{ props.row.examOrder }}
+                </q-td>
+                <q-td key="fiscalYear" :props="props">
+                  {{ props.row.fiscalYear + 543 }}
+                </q-td>
+                <q-td key="numberofCandidates" :props="props">
+                  {{ props.row.numberofCandidates }}
+                </q-td>
+                <q-td key="examType" :props="props">
+                  {{ props.row.examType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
+                </q-td>
+                <q-td key="accountExpirationDate" :props="props">
+                  {{ textDate(props.row.accountExpirationDate) }}
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </div>
       </div>
     </q-card>
-  </div>
 </template>
 
 <style lang="scss" scope>
 .filter-card {
-  background-color: #EDEDED;
+  background-color: #f1f1f1b0;
 }
 
 .toggle-expired-account {
diff --git a/src/modules/05_placement/components/pass/Detail.vue b/src/modules/05_placement/components/pass/Detail.vue
index 9db3af52b..122a1e035 100644
--- a/src/modules/05_placement/components/pass/Detail.vue
+++ b/src/modules/05_placement/components/pass/Detail.vue
@@ -56,14 +56,13 @@ const AddTablePosition = defineAsyncComponent(
       <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
       รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
     </div>
-    <q-space />
 
-    <div class="q-py-md row col-12">  
+    <q-card bordered class="q-py-sm row col-12">  
       <div class="col-12 row bg-white">
-        <div class="fit q-pa-md">
+        <div class="fit q-px-md q-py-sm">
           <div class="row col-12 q-col-gutter-md fit">
             <div class="" v-for="item in itemTop" :key="item.id" :style="$q.screen.lt.md ? '' : sizeCard(5)" :class="$q.screen.lt.sm ? 'col-4' : ''">
-              <div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm">
+              <div class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-px-sm">
                 <div class="col-12 row items-center q-pa-sm">
                   <div class="col-12 text-h5 text-weight-bold" :style="{ color: item.color }">
                     {{ item.num }}
@@ -77,7 +76,7 @@ const AddTablePosition = defineAsyncComponent(
           </div>
         </div>
       </div>
-    </div>
+    </q-card>
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
     <div>
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index 139c95389..afa581879 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -28,7 +28,7 @@ const positionLevelId = ref<string>();
 const date = ref<Date>(new Date());
 const expanded = ref<string[]>([]);
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const editvisible = ref<boolean>(false);
+const editvisible = ref<boolean>(true);
 const myForm = ref<QForm | null>(null);
 const positionLineId = ref<string>();
 const positionId = ref<string>();
@@ -175,9 +175,9 @@ const fetchOrganization = async (id: string) => {
 };
 const templateDetail = async () => {
   await fetchOrganization(selected.value);
-  
+
   salaryClass.value = "";
-  
+
   if (ocId.value != "") {
     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
   }
@@ -268,19 +268,19 @@ const appoint = ref<any>({
 
 const saveAppoint = () => {
   const dataAppoint = {
-    date : date.value,
+    date: date.value,
     posNoId: posNoId.value,
     positionId: positionId.value,
     positionPathSideId: positionPathSideId.value,
     positionTypeId: positionTypeId.value,
     positionLineId: positionLineId.value,
     positionLevelId: positionLevelId.value,
-    amount : amount.value,
-    positionSalaryAmount : positionSalaryAmount.value,
-    mouthSalaryAmount : mouthSalaryAmount.value,
-    salaryClass : salaryClass.value,
-    refSelected : refSelected.value,
-    salaryRef : salaryRef.value
+    amount: amount.value,
+    positionSalaryAmount: positionSalaryAmount.value,
+    mouthSalaryAmount: mouthSalaryAmount.value,
+    salaryClass: salaryClass.value,
+    refSelected: refSelected.value,
+    salaryRef: salaryRef.value,
   };
   console.log("save appoint===>", dataAppoint);
 };
@@ -310,17 +310,7 @@ const getClass = (val: boolean) => {
 };
 const selectData = (props: TableName) => {
   itemtest.value = props;
-  if (editvisible.value == true) {
-    editRow.value = false;
-    modalEdit.value = true;
-    modal.value = false;
-    edit.value = true;
-  } else {
-    editRow.value = false;
-    modalEdit.value = true;
-    modal.value = true;
-    edit.value = true;
-  }
+  modal.value = true;
 };
 const onSelected = async (id: string) => {
   await fetchPositionNumber(id);
@@ -439,8 +429,8 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "BMAOfficer",
-    align: "center",
-    label: "ข้าราชการฯ กทม.",
+    align: "left",
+    label: "สถานภาพ",
     sortable: true,
     field: "BMAOfficer",
     headerStyle: "font-size: 14px",
@@ -471,7 +461,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "",
     Unit: "",
     ReportingDate: "-", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ขรก.กทม. สามัญ",
     Status: "สละสิทธิ์",
     checkList: null,
     address:
@@ -505,7 +495,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "",
     Unit: "",
     ReportingDate: "", //วันที่รายงานตัว
-    BMAOfficer: false,
+    BMAOfficer: "บุคคลภายนอก",
     Status: "ยังไม่บรรจุ",
     checkList: null,
     address:
@@ -539,7 +529,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "",
     Unit: "",
     ReportingDate: "", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ลูกจ้างชั่วคราว",
     Status: "ยังไม่บรรจุ",
     checkList: null,
     address:
@@ -574,7 +564,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.1)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ลูกจ้างประจำ",
     Status: "เตรียมบรรจุ",
     checkList: null,
     address:
@@ -609,7 +599,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.2)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ขรก.กทม. สามัญ",
     Status: "เตรียมบรรจุ",
     checkList: null,
     address:
@@ -643,7 +633,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.3)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "บุคคลภายนอก",
     Status: "เตรียมบรรจุ",
     checkList: null,
     address:
@@ -677,7 +667,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.4)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ขรก.กทม. สามัญ",
     Status: "บรรจุเเล้ว",
     checkList: null,
     address:
@@ -711,7 +701,7 @@ const rows = ref<TableName[]>([
     UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
     Unit: "นักทรัพยากรบุคคล (กบห.4)",
     ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: true,
+    BMAOfficer: "ลูกจ้างชั่วคราว",
     Status: "ขอผ่อนผัน",
     checkList: null,
     address:
@@ -968,9 +958,9 @@ const refOptionsFilter = ref<DataOption[]>([
 ]);
 const itemtest = ref<object>({});
 
-const clickCancel = async () => {
-  editvisible.value = false;
-};
+// const clickCancel = async () => {
+//   editvisible.value = false;
+// };
 
 const openAppointModal = (value: any) => {
   appointModal.value = true;
@@ -1131,675 +1121,610 @@ const listKeyId = (data: any) => {
       :visible-columns="visibleColumns"
       v-model:inputfilter="filter"
       v-model:inputvisible="visibleColumns"
-      v-model:editvisible="editvisible"
-      :cancel="clickCancel"
-      :history="true"
-      :boss="true"
-      :saveNoDraft="true"
-      :add="save"
-    >
-      <template #columns="props">
-        <q-tr :props="props">
-          <q-icon
-            class="q-mr-sm"
-            size="15px"
-            color="primary"
-            name="mdi-bookmark"
-            v-if="props.row.isDirector"
-          ></q-icon>
+        v-model:editvisible="editvisible"
+        :history="true"
+        :boss="true"
+        :saveNoDraft="true"
+        :add="save"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-icon
+              class="q-mr-sm"
+              size="15px"
+              color="primary"
+              name="mdi-bookmark"
+              v-if="props.row.isDirector"
+            ></q-icon>
 
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="selectData(props.row)"
-            class="cursor-pointer"
-          >
-            <div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
-              <div>
-                <q-icon
-                  v-if="col.value == false"
-                  name="mdi-close"
-                  color="grey-5"
-                  class="text-h5"
-                />
-                <q-icon
-                  v-else
-                  name="mdi-check"
-                  color="positive"
-                  class="text-h5"
-                />
-              </div>
-            </div>
-            <div v-else-if="col.name == 'Name'" class="table_ellipsis">
-              {{ col.value }}
-              <div class="row col-12 text-no-wrap items-center">
-                <img
-                  v-if="props.row.avatar == null"
-                  src="@/assets/avatar_user.jpg"
-                  class="col-4 img-info"
-                />
-                <img v-else :src="props.row.avatar" class="col-4 img-info" />
-                <div class="col-4">
-                  <div class="text-weight-medium">
-                    {{ props.row.fullName }}
-                  </div>
-                  <div class="text-weight-light">
-                    {{ props.row.profileID }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
-              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
-                <div @click="openAppointModal">
-                  <q-input
-                    hide-bottom-space
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="props.row.Unit"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="mdi-bookmark-plus-outline"
-                        color="primary"
-                      />
-                    </template>
-                  </q-input>
-                </div>
-              </div>
-              <div
-                v-else-if="
-                  props.row.Status == 'ยังไม่บรรจุ' ||
-                  props.row.Status == 'สละสิทธิ์'
-                "
-              >
-                -
-              </div>
-              <div v-else>
-                {{ props.row.UnitGroup }}
-                <p>{{ col.value }}</p>
-              </div>
-            </div>
-            <div
-              v-else-if="col.name == 'ReportingDate' && col.value != '-'"
-              class="table_ellipsis"
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props.row)"
+              class="cursor-pointer"
             >
-              <div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
-                <datepicker
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                  week-start="0"
-                  v-model="props.row.ReportingDate"
+              <div v-if="col.name == 'Name'" class="table_ellipsis">
+                {{ col.value }}
+                <div class="row col-12 text-no-wrap items-center">
+                  <img
+                    v-if="props.row.avatar == null"
+                    src="@/assets/avatar_user.jpg"
+                    class="col-4 img-info"
+                  />
+                  <img v-else :src="props.row.avatar" class="col-4 img-info" />
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{ props.row.fullName }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ props.row.profileID }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
+                <div
+                  v-if="props.row.Status == 'ยังไม่บรรจุ' ||
+                    props.row.Status == 'สละสิทธิ์'
+                    "
                 >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      hide-bottom-space
-                      outlined
-                      dense
-                      lazy-rules
-                      :model-value="mixin.date2Thai(col.value)"
-                    >
-                      <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 v-else>
+                  {{ props.row.UnitGroup }}
+                  <p>{{ col.value }}</p>
+                </div>
               </div>
               <div
-                v-else-if="
-                  props.row.Status == 'ยังไม่บรรจุ' ||
-                  props.row.Status == 'สละสิทธิ์'
-                "
+                v-else-if="col.name == 'ReportingDate' && col.value != '-'"
+                class="table_ellipsis"
               >
-                -
-              </div>
-              <div v-else>
                 {{ mixin.date2Thai(col.value) }}
               </div>
-            </div>
-            <div v-else class="table_ellipsis">
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <div
-              v-if="
-                props.row.Status === 'บรรจุเเล้ว' ||
-                props.row.Status === 'สละสิทธิ์'
-              "
-            >
-              <div></div>
-            </div>
-            <div v-else-if="props.row.Status === 'ขอผ่อนผัน'">
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                color="blue"
+                v-if="props.row.Status !== 'สละสิทธิ์' &&
+                  props.row.Status !== 'บรรจุเเล้ว'
+                  "
+                icon="mdi-dots-vertical"
+                size="12px"
+                color="grey-7"
                 flat
-                dense
                 round
-                size="14px"
-                icon="mdi-information-outline"
-                @click="editDetail(props.row, 'waitInfo')"
-              />
-              <q-btn
-                color="red"
-                flat
                 dense
-                round
-                size="14px"
-                icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel')"
-              />
-            </div>
-            <div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
-              <q-btn
-                color="blue"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-account-alert"
-                @click="editDetail(props.row, 'wait')"
-              />
-              <q-btn
-                color="red"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel')"
-              />
-            </div>
-            <div v-else align="right">
-              <q-btn
-                color="red"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel')"
-              />
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </Table>
-  </q-form>
+              >
+                <q-menu transition-show="jump-down" transition-hide="jump-up">
+                  <q-list dense style="min-width: 100px">
+                    <q-item
+                      v-if="props.row.Status === 'ยังไม่บรรจุ'"
+                      clickable
+                      v-close-popup
+                      @click="openAppointModal"
+                    >
+                      <q-item-section style="min-width: 0px;" avatar class="q-py-sm">
+                        <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
+                      </q-item-section>
+                      <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item
+                      v-if="props.row.Status === 'ยังไม่บรรจุ'"
+                      clickable
+                      v-close-popup
+                      @click="editDetail(props.row, 'wait')"
+                    >
+                      <q-item-section style="min-width: 0px;" avatar class="q-py-sm">
+                        <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
+                      </q-item-section>
+                      <q-item-section>ขอผ่อนผัน</q-item-section>
+                    </q-item>
+                    <q-item
+                      v-else-if="props.row.Status === 'ขอผ่อนผัน'"
+                      clickable
+                      v-close-popup
+                      @click="editDetail(props.row, 'waitInfo')"
+                    >
+                      <q-item-section style="min-width: 0px;" avatar class="q-py-sm">
+                        <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
+                      </q-item-section>
+                      <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item
+                      v-if="props.row.Status === 'ยังไม่บรรจุ' ||
+                        props.row.Status === 'เตรียมบรรจุ'
+                        "
+                      clickable
+                      v-close-popup
+                      @click="editDetail(props.row, 'cancel')"
+                    >
+                      <q-item-section style="min-width: 0px;" avatar class="q-py-sm">
+                        <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
+                      </q-item-section>
+                      <q-item-section>สละสิทธิ์</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </q-form>
 
-  <q-dialog v-model="appointModal" persistent full-width>
-    <q-card>
-      <q-form ref="myForm">
-        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-6 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <q-tree
-                    no-transition
-                    ref="qtreeEdit"
-                    :nodes="nodesTree"
-                    node-key="keyId"
-                    @lazy-load="onLazyLoad"
-                    dense
-                  >
-                    <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
-                    <template v-slot:header-organization="prop">
-                      <div class="col">
-                        <div
-                          class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                        >
-                          <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                          <div class="text-weight-medium">
-                            {{ prop.node.organizationName }}
+    <q-dialog v-model="appointModal" persistent full-width>
+      <q-card>
+        <q-form ref="myForm">
+          <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
+          <q-separator />
+          <q-card-section class="q-pa-sm bg-grey-1">
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-xs-12 col-sm-6 row">
+                <q-card flat bordered class="fit q-pa-sm">
+                  <q-scroll-area visible style="height: 70vh">
+                    <q-input
+                      outlined
+                      dense
+                      v-model="search"
+                      placeholder="ค้นหา"
+                      class="q-mb-sm"
+                    >
+                      <template v-slot:append>
+                        <q-icon name="mdi-magnify" />
+                      </template>
+                    </q-input>
+                    <q-tree
+                      no-transition
+                      ref="qtreeEdit"
+                      :nodes="nodesTree"
+                      node-key="keyId"
+                      @lazy-load="onLazyLoad"
+                      dense
+                    >
+                      <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
+                      <template v-slot:header-organization="prop">
+                        <div class="col">
+                          <div
+                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                          >
+                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                            <div class="text-weight-medium">
+                              {{ prop.node.organizationName }}
+                            </div>
+
+                            <!--แสดง Total Count PositionNum-->
+                            <q-badge
+                              rounded
+                              color="grey-2"
+                              text-color="dark"
+                              :label="prop.node.totalPositionCount"
+                            />
+                            <q-badge
+                              v-if="prop.node.totalPositionVacant > 0"
+                              rounded
+                              color="red"
+                              outline
+                              :label="prop.node.totalPositionVacant"
+                            />
+
+                            <q-space />
                           </div>
-
-                          <!--แสดง Total Count PositionNum-->
-                          <q-badge
-                            rounded
-                            color="grey-2"
-                            text-color="dark"
-                            :label="prop.node.totalPositionCount"
+                          <div class="col items-center q-px-xs q-pt-xs">
+                            <div class="text-weight-medium text-grey-7">
+                              {{ prop.node.governmentCode }}
+                              {{ prop.node.organizationShortName }}
+                            </div>
+                          </div>
+                        </div>
+                      </template>
+                      <template v-slot:header-person="prop">
+                        <q-item
+                          clickable
+                          :active="clickAction === prop.node.keyId"
+                          @click="
+                            clickAction =
+                            prop.node.name == `ว่าง` ||
+                              prop.node.name == `N/A` ||
+                              prop.node.name == null
+                              ? listKeyId(prop)
+                              : ''
+                            "
+                          active-class="my-list-link text-primary text-weight-medium"
+                          :class="prop.node.name == `ว่าง` ||
+                              prop.node.name == `N/A` ||
+                              prop.node.name == null
+                              ? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
+                              : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
+                            "
+                        >
+                          <img
+                            v-if="prop.node.avatar == '' ||
+                              prop.node.avatar ==
+                              'https://cdn.quasar.dev/img/boy-avatar.png'
+                              "
+                            src="@/assets/avatar_user.jpg"
+                            class="col-xs-1 col-sm-2"
+                            style="width: 28px; height: 28px; border-radius: 50%"
                           />
-                          <q-badge
-                            v-if="prop.node.totalPositionVacant > 0"
-                            rounded
-                            color="red"
-                            outline
-                            :label="prop.node.totalPositionVacant"
+                          <img
+                            v-else
+                            :src="prop.node.avatar"
+                            class="col-xs-1 col-sm-2"
+                            style="width: 28px; height: 28px; border-radius: 50%"
                           />
+                          <!--=====ตำแหน่งว่าง สีแดง=====-->
+                          <div
+                            v-if="prop.node.name == `ว่าง` ||
+                              prop.node.name == `N/A` ||
+                              prop.node.name == null
+                              "
+                            class="q-px-sm text-weight-medium text-red"
+                          >
+                            ว่าง
+                          </div>
+                          <!--=====หัวหน้า สีเขียว=====-->
+                          <div v-else-if="prop.node.positionLeaderFlag">
+                            <div class="q-px-sm text-weight-medium text-primary">
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--=====ลูกน้อง สีปกติ=====-->
+                          <div v-else>
+                            <div class="q-px-sm text-weight-medium">
+                              {{ prop.node.name }}
+                            </div>
+                          </div>
+                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionName }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionNum }}
+                          </div>
+                          <div class="q-pr-sm">
+                            {{ prop.node.positionLevel }}
+                          </div>
+                          <q-icon
+                            v-if="prop.node.positionLeaderFlag"
+                            class="q-mr-sm"
+                            size="15px"
+                            color="primary"
+                            name="mdi-bookmark"
+                          ></q-icon>
 
                           <q-space />
-                        </div>
-                        <div class="col items-center q-px-xs q-pt-xs">
-                          <div class="text-weight-medium text-grey-7">
-                            {{ prop.node.governmentCode }}
-                            {{ prop.node.organizationShortName }}
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-                    <template v-slot:header-person="prop">
-                      <q-item
-                        clickable
-                        :active="clickAction === prop.node.keyId"
-                        @click="clickAction = listKeyId(prop)"
-                        active-class="my-list-link text-primary text-weight-medium"
-                        class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                      >
-                        <img
-                          v-if="
-                            prop.node.avatar == '' ||
-                            prop.node.avatar ==
-                              'https://cdn.quasar.dev/img/boy-avatar.png'
-                          "
-                          src="@/assets/avatar_user.jpg"
-                          class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%"
-                        />
-                        <img
-                          v-else
-                          :src="prop.node.avatar"
-                          class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%"
-                        />
-                        <!--=====ตำแหน่งว่าง สีแดง=====-->
-                        <div
-                          v-if="
-                            prop.node.name == `ว่าง` ||
-                            prop.node.name == `N/A` ||
-                            prop.node.name == null
-                          "
-                          class="q-px-sm text-weight-medium text-red"
+                        </q-item>
+                      </template>
+                    </q-tree>
+                  </q-scroll-area>
+                </q-card>
+              </div>
+              <div class="col-xs-12 col-sm-6">
+                <q-card flat bordered class="fit q-pa-sm">
+                  <q-scroll-area visible style="height: 70vh">
+                    <div class="row col-12 q-col-gutter-xs">
+                      <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <datepicker
+                          menu-class-name="modalfix"
+                          :readonly="!edit"
+                          v-model="date"
+                          :locale="'th'"
+                          autoApply
+                          :enableTimePicker="false"
+                          @update:modelValue="clickEditRow"
+                          week-start="0"
                         >
-                          ว่าง
-                        </div>
-                        <!--=====หัวหน้า สีเขียว=====-->
-                        <div v-else-if="prop.node.positionLeaderFlag">
-                          <div class="q-px-sm text-weight-medium text-primary">
-                            {{ prop.node.name }}
-                          </div>
-                        </div>
-                        <!--=====ลูกน้อง สีปกติ=====-->
-                        <div v-else>
-                          <div class="q-px-sm text-weight-medium">
-                            {{ prop.node.name }}
-                          </div>
-                        </div>
-                        <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionName }}
-                        </div>
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionNum }}
-                        </div>
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionLevel }}
-                        </div>
-                        <q-icon
-                          v-if="prop.node.positionLeaderFlag"
-                          class="q-mr-sm"
-                          size="15px"
-                          color="primary"
-                          name="mdi-bookmark"
-                        ></q-icon>
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              :class="getClass(edit)"
+                              :outlined="edit"
+                              dense
+                              lazy-rules
+                              :borderless="!edit"
+                              :model-value="date2Thai(date)"
+                              :rules="[
+                                (val: string) =>
+                                  !!val ||
+                                  `${'วันที่รายงานตัว'}`,
+                              ]"
+                              :label="`${'วันที่รายงานตัว'}`"
+                              hide-bottom-space
+                            >
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  :style="edit
+                                      ? 'color: var(--q-primary)'
+                                      : 'color: var(--q-grey)'
+                                    "
+                                >
+                                </q-icon>
+                              </template>
+                            </q-input>
+                          </template>
+                        </datepicker>
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          standout
+                          readonly
+                          class="custom-input"
+                          dense
+                          lazy-rules
+                          v-model="posNoId"
+                          :label="`${'เลขที่ตำแหน่ง'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionId"
+                          :label="`${'ตำแหน่ง'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionPathSideId"
+                          :label="`${'ด้าน/สาขา'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionTypeId"
+                          :label="`${'ประเภทตำแหน่ง'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionLineId"
+                          :label="`${'สายงาน'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6">
+                        <q-input
+                          disable
+                          readonly
+                          class="custom-input"
+                          standout
+                          dense
+                          lazy-rules
+                          v-model="positionLevelId"
+                          :label="`${'ระดับ'}`"
+                        />
+                      </div>
+                      <div class="col-xs-6 col-sm-6 col-md-6"></div>
+                      <div class="col-xs-4 col-sm-4 col-md-4">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="amount"
+                          :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                          :label="`${'เงินเดือน'}`"
+                          @update:modelValue="clickEditRow"
+                          type="number"
+                          hide-bottom-space
+                        />
+                      </div>
+                      <div class="col-xs-4 col-sm-4 col-md-4">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="positionSalaryAmount"
+                          :rules="[
+                            (val: string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                          ]"
+                          :label="`${'เงินประจำตำแหน่ง'}`"
+                          @update:modelValue="clickEditRow"
+                          type="number"
+                          hide-bottom-space
+                        />
+                      </div>
+                      <div class="col-xs-4 col-sm-4 col-md-4">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="mouthSalaryAmount"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                          ]"
+                          :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                          @update:modelValue="clickEditRow"
+                          type="number"
+                          hide-bottom-space
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-12 col-md-12">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="salaryClass"
+                          :rules="[
+                            (val: string) =>
+                              !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
+                          ]"
+                          :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                          @update:modelValue="clickEditRow"
+                          hide-bottom-space
+                          autogrow
+                        >
+                          <template v-slot:append>
+                            <q-btn
+                              color="info"
+                              flat
+                              dense
+                              round
+                              size="14px"
+                              icon="mdi-plus"
+                              @click="templateDetail"
+                              :disable="!edit"
+                            />
+                          </template>
+                        </q-input>
+                      </div>
 
-                        <q-space />
-                      </q-item>
-                    </template>
-                  </q-tree>
-                </q-scroll-area>
-              </q-card>
+                      <div class="row col-xs-12 col-sm-12 col-md-12">
+                        <selector
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="refSelected"
+                          :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
+                          @update:modelValue="clickEditRowRef"
+                          option-label="name"
+                          :options="refOptions"
+                          option-value="id"
+                          hide-bottom-space
+                          use-input
+                          input-debounce="0"
+                          @filter="(inputValue: any,
+                            doneFn: Function) => filterSelector(inputValue, doneFn, '8'
+                            )"
+                        />
+                      </div>
+                      <div class="col-xs-12 col-sm-12 col-md-12">
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :readonly="!edit"
+                          :borderless="!edit"
+                          v-model="salaryRef"
+                          :rules="[
+                            (val: string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
+                          ]"
+                          :label="`${'เอกสารอ้างอิง'}`"
+                          @update:modelValue="clickEditRow"
+                          type="textarea"
+                          hide-bottom-space
+                        />
+                      </div>
+                    </div>
+                  </q-scroll-area>
+                </q-card>
+              </div>
             </div>
-            <div class="col-xs-12 col-sm-6">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        :readonly="!edit"
-                        v-model="date"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        @update:modelValue="clickEditRow"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            :class="getClass(edit)"
-                            :outlined="edit"
-                            dense
-                            lazy-rules
-                            :borderless="!edit"
-                            :model-value="date2Thai(date)"
-                            :rules="[
-                              (val:string) =>
-                                !!val ||
-                                `${'กรุณาเลือกวัน เดือน ปี รับตำแหน่ง'}`,
-                            ]"
-                            :label="`${'วัน เดือน ปี รับตำแหน่ง'}`"
-                            hide-bottom-space
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                :style="
-                                  edit
-                                    ? 'color: var(--q-primary)'
-                                    : 'color: var(--q-grey)'
-                                "
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        standout
-                        readonly
-                        class="custom-input"
-                        dense
-                        lazy-rules
-                        v-model="posNoId"
-                        :label="`${'เลขที่ตำแหน่ง'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionId"
-                        :label="`${'ตำแหน่ง'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionLineId"
-                        :label="`${'สายงาน'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        disable
-                        readonly
-                        class="custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        v-model="positionLevelId"
-                        :label="`${'ระดับ'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6"></div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="amount"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionSalaryAmount"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="mouthSalaryAmount"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                        ]"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryClass"
-                        :rules="[
-                          (val:string) =>
-                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
-                        ]"
-                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                        @update:modelValue="clickEditRow"
-                        hide-bottom-space
-                        autogrow
-                      >
-                        <template v-slot:append>
-                          <q-btn
-                            color="info"
-                            flat
-                            dense
-                            round
-                            size="14px"
-                            icon="mdi-plus"
-                            @click="templateDetail"
-                            :disable="!edit"
-                          />
-                        </template>
-                      </q-input>
-                    </div>
+          </q-card-section>
 
-                    <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refSelected"
-                        :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRowRef"
-                        option-label="name"
-                        :options="refOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'8'
-                      ) "
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryRef"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
-                        ]"
-                        :label="`${'เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="textarea"
-                        hide-bottom-space
-                      />
-                    </div>
-                  </div>
-                </q-scroll-area>
-              </q-card>
+          <q-separator />
+          <DialogFooter
+            v-model:editvisible="edit"
+            v-model:modalEdit="modalEdit"
+            :save="saveAppoint"
+          />
+        </q-form>
+      </q-card>
+    </q-dialog>
+
+    <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />
+
+    <q-dialog v-model="modal_right" persistent>
+      <q-card style="width: 800px">
+        <q-form ref="myForm">
+          <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+          <DialogHeader
+            :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
+            :close="clickClose"
+          />
+          <q-separator />
+          <q-card-section class="q-p-sm">
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionMasterUserNote"
+                :label="`${'กรอกเหตุผล'}`"
+                @update:modelValue="clickEditRow"
+                type="textarea"
+              />
+              <q-file
+                v-if="getNumFile == 1"
+                v-model="files"
+                dense
+                :label="'เลือกไฟล์เอกสารหลักฐาน'"
+                outlined
+                use-chips
+                multiple
+                class="q-py-sm"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+              <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
             </div>
-          </div>
-        </q-card-section>
-
-        <q-separator />
-        <DialogFooter
-          v-model:editvisible="edit"
-          v-model:modalEdit="modalEdit"
-          :save="saveAppoint"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-
-  <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" />
-
-  <q-dialog v-model="modal_right" persistent>
-    <q-card style="width: 800px">
-      <q-form ref="myForm">
-        <!-- :title="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-        <DialogHeader
-          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="positionMasterUserNote"
-              :label="`${'กรอกเหตุผล'}`"
-              @update:modelValue="clickEditRow"
-              type="textarea"
-            />
-            <q-file
-              v-if="getNumFile == 1"
-              v-model="files"
-              dense
-              :label="'เลือกไฟล์เอกสารหลักฐาน'"
-              outlined
-              use-chips
-              multiple
-              class="q-py-sm"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          v-model:editvisible="edit"
-          v-model:modalEdit="modalEdit"
-          :save="modalEdit ? savePostpone : saveDisclaim"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
+          </q-card-section>
+          <q-separator />
+          <DialogFooter
+            v-model:editvisible="edit"
+            v-model:modalEdit="modalEdit"
+            :save="modalEdit ? savePostpone : saveDisclaim"
+          />
+        </q-form>
+      </q-card>
+    </q-dialog>
 
+    <!-- dialog ขอผ่อนผัน / สละสิทธิ์ -->
   <q-dialog v-model="modalwaitInfo" persistent>
     <q-card style="width: 500px; max-width: 500px">
       <q-form ref="myForm">
@@ -1854,4 +1779,4 @@ const listKeyId = (data: any) => {
   object-fit: cover;
   margin-right: 10px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/pass/TableView.vue b/src/modules/05_placement/components/pass/TableView.vue
index 79e3c0d1a..55d7b1a30 100644
--- a/src/modules/05_placement/components/pass/TableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -1,43 +1,6 @@
 <template>
   <div class="q-px-md q-pb-md">
-    <div class="col-12 row q-py-sm" v-if="nornmalData == false">
-      <q-btn
-        size="12px"
-        v-if="!editvisible"
-        flat
-        round
-        :disabled="editvisible"
-        :color="editvisible ? 'grey-7' : 'primary'"
-        @click="clickEdit"
-        icon="mdi-pencil-outline"
-      >
-        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-      </q-btn>
-      <q-btn
-        size="12px"
-        flat
-        round
-        v-if="editvisible"
-        :disabled="!editvisible"
-        :color="!editvisible ? 'grey-7' : 'red'"
-        @click="clickCancel"
-        icon="mdi-undo"
-      >
-        <q-tooltip>ยกเลิก</q-tooltip>
-      </q-btn>
-      <div class="q-px-sm">
-        <q-btn
-          flat
-          round
-          :disabled="editvisible == false"
-          :color="editvisible == false ? 'grey-7' : 'public'"
-          @click="add"
-          icon="mdi-content-save-outline"
-        >
-          <q-tooltip>บันทึกข้อมูล</q-tooltip>
-        </q-btn>
-      </div>
-
+      <div class="col-12 row q-py-sm" v-if="nornmalData == false">
       <q-space />
       <div class="items-center" style="display: flex">
         <div
diff --git a/src/modules/05_placement/interface/request/placement.ts b/src/modules/05_placement/interface/request/placement.ts
index 199265b2a..541e5ccb7 100644
--- a/src/modules/05_placement/interface/request/placement.ts
+++ b/src/modules/05_placement/interface/request/placement.ts
@@ -9,7 +9,7 @@ interface TableName {
   UnitGroup: string;
   Unit: string;
   ReportingDate: string; //วันที่รายงานตัว
-  BMAOfficer: boolean;
+  BMAOfficer: string;
   Status: string;
   checkList: any;
   address: string;
@@ -20,15 +20,15 @@ interface TableName {
   number: number;
   examCount: number;
   scoreResult: {
-      scoreAFull:number
-      scoreA: number;
-      scoreBFull: number;
-      scoreB: number;
-      scoreCFull: number;
-      scoreC: number;
-      scoreSumFull: number;
-      scoreSum: number;
-      examResult: string;
+    scoreAFull: number;
+    scoreA: number;
+    scoreBFull: number;
+    scoreB: number;
+    scoreCFull: number;
+    scoreC: number;
+    scoreSumFull: number;
+    scoreSum: number;
+    examResult: string;
   };
 } 
 
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 224ec4a5b..4dc33cbde 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -723,6 +723,7 @@ if (keycloak.tokenParsed != null) {
                       dense-toggle
                       :label="subMenu.label"
                       v-if="subMenu.key !== 5.1"
+                      class="expan2"
                       dense
                     >
                       <q-item
@@ -891,17 +892,20 @@ if (keycloak.tokenParsed != null) {
 </template>
 
 <style>
+.menuSub .q-item__section--avatar, .menu .q-item__section--avatar{
+  min-width: 0px;
+}
 .menu {
   padding-bottom: 5px;
   padding-top: 5px;
   border-radius: 0 100px 100px 0;
-  margin-right: 4%;
+  margin-right: 2%;
 }
 
 .menuActive {
   background: #212a2f;
   border-radius: 0 100px 100px 0;
-  margin-right: 4%;
+  margin-right: 2%;
 }
 
 .menuActiveMini {
@@ -909,17 +913,22 @@ if (keycloak.tokenParsed != null) {
 }
 .menuSub .q-item {
   border-radius: 0 100px 100px 0;
-  margin-right: 4%;
+  margin-right: 2%;
+}
+.expan2 .q-item {
+  padding-left: 10%;
 }
-
 /* .menuSubAct {
   background: #1e2529d9;
 } */
-
-.menuSubHover {
+.expan2 .menuSubHover{
   padding-left: 30%;
   border-radius: 20px;
 }
+.menuSubHover{
+  padding-left: 25%;
+  border-radius: 20px;
+}
 .menuSub .q-expansion-item__content {
   background: #212a2f;
   padding: 5px 0px;