From cf0ada2c6729a3560bbe7d79921acf5a6f12a7c4 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Tue, 27 Jun 2023 13:43:38 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css=20dr?=
 =?UTF-8?q?awer,=20=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B8=9A=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableHistory.vue               |   3 +-
 src/components/TableView.vue                  |   3 +-
 src/interface/request/main/main.ts            |   8 +-
 .../OrderPlacement/MainOrderPlacement.vue     | 349 +++++++++---------
 .../components/exams_other/Main.vue           |   2 +-
 .../components/exams_sorkorcho/Main.vue       | 124 +++----
 .../05_placement/components/pass/Detail.vue   |   9 +-
 .../05_placement/components/pass/Table.vue    |  22 +-
 src/views/MainLayout.vue                      |  21 +-
 9 files changed, 275 insertions(+), 266 deletions(-)

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 28d58c8c6..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="primary"
+          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 5257be006..452a53402 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/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 909f7cfc6..0e73ffaa1 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 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
+    <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
@@ -21,21 +22,21 @@
             :hide-dropdown-icon="false"
             @update:model-value="searchfiscalyear"
           />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-6">
-          <q-btn
-            size="12px"
-            flat
-            round
-            color="add"
-            @click="clickAdd"
-            icon="mdi-plus"
-          >
-            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-          </q-btn>
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
+          <div>
+            <q-btn
+              size="12px"
+              flat
+              round
+              color="add"
+              @click="clickAdd"
+              icon="mdi-plus"
+            >
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+          <q-space />
           <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
             standout
             dense
             v-model="filterKeyword"
@@ -43,7 +44,6 @@
             outlined
             debounce="300"
             placeholder="ค้นหา"
-            class="q-ml-sm"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
@@ -55,9 +55,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
@@ -70,162 +69,160 @@
             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">
-              <q-select
-                v-model="OrderType"
-                label="ประเภท"
-                dense
-                emit-value
-                map-options
-                option-label="name"
-                :options="OrderTypeOption"
-                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- q-pl-sm">
-              <q-select
-                v-model="OrderStatus"
-                label="สถานะ"
-                dense
-                emit-value
-                map-options
-                option-label="name"
-                :options="OrderStatusOption"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :readonly="false"
-                :borderless="false"
-                :outlined="true"
-                :hide-dropdown-icon="false"
-                @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
+        <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
-                  size="12px"
-                  flat
-                  round
-                  color="red"
-                  @click="clickDelete(props.row.id)"
-                  icon="mdi-delete"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="OrderTypeOption"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchFilterTable"
+                />
+                <q-select
+                  class="col-xs-12 col-sm-3 col-md-2"
+                  v-model="OrderStatus"
+                  label="สถานะ"
+                  dense
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="OrderStatusOption"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchFilterTable"
+                />
+            </div>
+          </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>
@@ -324,7 +321,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "OrderStatus",
-    align: "left",
+    align: "center",
     label: "สถานะคำสั่ง",
     sortable: false,
     field: "OrderStatus",
@@ -698,7 +695,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 ce476e3e4..87f3ce1b4 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -1201,17 +1201,24 @@ const listKeyId = (data: any) => {
                 v-if="props.row.Status !== 'สละสิทธิ์' &&
                   props.row.Status !== 'บรรจุเเล้ว'
                   "
-                icon="density_medium"
-                size="xs"
+                icon="mdi-dots-vertical"
+                size="12px"
+                color="grey-7"
+                flat
+                round
+                dense
               >
                 <q-menu transition-show="jump-down" transition-hide="jump-up">
-                  <q-list style="min-width: 100px">
+                  <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 />
@@ -1221,6 +1228,9 @@ const listKeyId = (data: any) => {
                       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
@@ -1229,6 +1239,9 @@ const listKeyId = (data: any) => {
                       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 />
@@ -1240,6 +1253,9 @@ const listKeyId = (data: any) => {
                       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>
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;