From 0fa8d6ace19990d70f17b74f1d6291cd473099b8 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Wed, 24 Apr 2024 17:26:12 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20css=20?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=83=E0=B8=AB=E0=B8=A1=E0=B9=88=E0=B9=81=E0=B8=97=E0=B9=87?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B9=80=E0=B8=AB=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Achievement/01_ProfessionalLicense.vue    | 115 +--
 .../detail/Achievement/02_Train.vue           | 831 +++++++++---------
 .../detail/Achievement/03_Insignia.vue        | 815 +++++++++--------
 .../Achievement/04_DeclarationHonor.vue       | 430 +++++----
 .../Achievement/05_ResultsPerformance.vue     | 575 ++++++------
 .../02_DisciplineHistory.vue                  |   2 +-
 .../GovernmentInformation/03_LeaveHistory.vue |   2 +-
 .../04_PerformSpecialWorkHistory.vue          |   2 +-
 .../detail/Other/01_OtherInformation.vue      | 166 ++--
 .../Other/01_OtherInformationHistory.vue      | 165 ++--
 .../components/detail/Other/02_Document.vue   | 164 ++--
 .../detail/Salary/01_PositionSalary.vue       | 622 +++++++------
 .../Salary/01_PositionSalaryHistory.vue       | 157 ++--
 .../detail/Salary/02_NotReceiveSalary.vue     | 330 ++++---
 .../Salary/02_NotReceiveSalaryHistory.vue     | 143 ++-
 15 files changed, 2153 insertions(+), 2366 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
index 1499e91f5..652d0f54e 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -338,12 +338,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-toolbar style="padding: 0px" class="q-mb-xs">
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
       round
       flat
       color="primary"
       icon="add"
+      dense
       @click="
         dialogStatus = 'create';
         clearForm();
@@ -354,7 +355,7 @@ onMounted(async () => {
     >
 
     <q-space />
-    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+    <q-input dense outlined v-model="keyword" label="ค้นหา">
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -373,7 +374,6 @@ onMounted(async () => {
       option-value="name"
       options-cover
       style="min-width: 150px"
-      class="q-mr-sm"
     />
 
     <q-btn-toggle
@@ -406,7 +406,7 @@ onMounted(async () => {
         />
       </template>
     </q-btn-toggle>
-  </q-toolbar>
+  </div>
   <d-table
     :grid="mode === 'card'"
     ref="table"
@@ -536,30 +536,20 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 300px"
-      class="bg-white"
-    >
+    <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-header>
-          <q-toolbar>
-            <dialog-header
-              :tittle="
-                dialogStatus == 'edit'
-                  ? 'แก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ'
-                  : 'เพิ่มข้อมูลใบอนุญาตประกอบวิชาชีพ'
-              "
-              :close="closeDialog"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
+        <dialog-header
+          :tittle="
+            dialogStatus == 'edit'
+              ? 'แก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ'
+              : 'เพิ่มข้อมูลใบอนุญาตประกอบวิชาชีพ'
+          "
+          :close="closeDialog"
+        />
+        <q-separator color="grey-4" />
 
-        <q-page-container>
-          <q-page>
-            <div class="row q-gutter-sm q-px-md q-pb-sm q-mt-sm">
+        <q-card-section style="max-height: 55vh" class="scroll">
+            <div class="row q-gutter-sm q-pb-sm">
               <div class="col">
                 <q-input
                   outlined
@@ -587,7 +577,7 @@ onMounted(async () => {
                 />
               </div>
             </div>
-            <div class="row q-gutter-sm q-px-md q-pb-sm">
+            <div class="row q-gutter-sm q-pb-sm">
               <div class="col">
                 <q-input
                   outlined
@@ -645,7 +635,7 @@ onMounted(async () => {
                 </datepicker>
               </div>
             </div>
-            <div class="row q-gutter-sm q-px-md q-pb-sm">
+            <div class="row q-gutter-sm q-pb-sm">
               <div class="col">
                 <datepicker
                   menu-class-name="modalfix"
@@ -689,48 +679,35 @@ onMounted(async () => {
                 </datepicker>
               </div>
             </div>
-          </q-page>
-        </q-page-container>
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <dialog-header
-            tittle="ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ"
-            :close="closeHistoryDialog"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
+    <q-card style="min-width: 80%">
+      <dialog-header
+        tittle="ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ"
+        :close="closeHistoryDialog"
+      />
+      <q-separator color="grey-4" />
 
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+      <q-card-section style="max-height: 60vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
             <q-space />
             <q-input
               dense
@@ -738,7 +715,6 @@ onMounted(async () => {
               bg-color="white"
               v-model="historyKeyword"
               label="ค้นหา"
-              class="q-mr-sm"
             >
               <template v-slot:append>
                 <q-icon name="search" />
@@ -760,7 +736,7 @@ onMounted(async () => {
               options-cover
               style="min-width: 150px"
             />
-          </q-toolbar>
+          </div>
           <d-table
             ref="table"
             :columns="historyColumns"
@@ -794,9 +770,8 @@ onMounted(async () => {
               </q-tr>
             </template>
           </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
index cb05031f9..c83a10e3f 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
@@ -496,9 +496,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-toolbar style="padding: 0px">
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
       round
+      dense
       flat
       color="primary"
       icon="add"
@@ -514,7 +515,7 @@ onMounted(async () => {
     >
 
     <q-space />
-    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
+    <q-input dense outlined v-model="keyword" label="ค้นหา">
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -533,7 +534,6 @@ onMounted(async () => {
       option-value="name"
       options-cover
       style="min-width: 150px"
-      class="q-mr-sm"
     />
 
     <q-btn-toggle
@@ -566,7 +566,7 @@ onMounted(async () => {
         />
       </template>
     </q-btn-toggle>
-  </q-toolbar>
+  </div>
 
   <d-table
     :grid="mode === 'card'"
@@ -685,280 +685,87 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 450px"
-      class="bg-white"
-    >
+    <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-header>
-          <q-toolbar>
-            <dialog-header
-              :tittle="
-                dialogStatus == 'edit'
-                  ? 'แก้ไขการฝึกอบรม/ดูงาน'
-                  : 'เพิ่มการฝึกอบรม/ดูงาน'
-              "
-              :close="closeDialog"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-page-container>
-          <q-page>
-            <div class="row q-px-md q-mt-sm q-mb-sm q-gutter-sm">
-              <div class="col">
-                <q-input
-                  outlined
-                  v-model="trainData.name"
-                  label="ชื่อโครงการ/หลักสูตรการฝึกอบรม"
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  :rules="[
-                    (val) =>
-                      !!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
-                  ]"
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  outlined
-                  class="inputgreen"
-                  v-model="trainData.topic"
-                  label="หัวข้อการฝึกอบรม/ดูงาน"
-                  bg-color="white"
-                  dense
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
-                  ]"
-                  hide-bottom-space
-                />
-              </div>
+        <dialog-header
+          :tittle="
+            dialogStatus == 'edit'
+              ? 'แก้ไขการฝึกอบรม/ดูงาน'
+              : 'เพิ่มการฝึกอบรม/ดูงาน'
+          "
+          :close="closeDialog"
+        />
+        <q-separator color="grey-4" />
+        <q-card-section style="max-height: 55vh" class="scroll">
+          <div class="row q-mb-sm q-gutter-sm">
+            <div class="col">
+              <q-input
+                outlined
+                v-model="trainData.name"
+                label="ชื่อโครงการ/หลักสูตรการฝึกอบรม"
+                bg-color="white"
+                dense
+                class="inputgreen"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
+                ]"
+                hide-bottom-space
+              />
             </div>
-            <q-card
-              flat
-              bordered
-              class="q-px-sm q-mx-md q-my-md q-pb-sm borderCard"
-            >
-              <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
-                <q-radio
-                  v-model="isDate"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  val="false"
-                  label="ปี"
-                  dense
-                />
-                <q-radio
-                  v-model="isDate"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  val="true"
-                  label="วัน/เดือน/ปี"
-                  dense
-                />
-              </div>
-              <div v-if="isDate === 'false'" class="row q-gutter-sm">
-                <div class="col">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="trainData.startYear"
-                    :locale="'th'"
-                    autoApply
-                    year-picker
-                    :enableTimePicker="false"
-                    @update:modelValue="
-                    (v:number) =>
-                      (trainData.startDate = new Date(
-                        `${v}-01-01T00:00:02.010+07:00`
-                      ))
-                  "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        lazy-rules
-                        outlined
-                        class="inputgreen"
-                        hide-bottom-space
-                        :model-value="trainData.startYear + 543"
-                        :rules="[
-                          (val) =>
-                            !!val ||
-                            `${'กรุณาเลือกปีที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
-                        ]"
-                        :label="`${'ปีที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-                <div class="col">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="trainData.finishYear"
-                    :locale="'th'"
-                    autoApply
-                    year-picker
-                    :enableTimePicker="false"
-                    @update:modelValue="
-                    (v:number) =>
-                      (trainData.endDate = new Date(
-                        `${v}-01-01T00:00:02.010+07:00`
-                      ))
-                  "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        dense
-                        lazy-rules
-                        class="inputgreen"
-                        outlined
-                        hide-bottom-space
-                        :model-value="trainData.finishYear + 543"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณาเลือกปีที่จบการฝึกอบรม/ดูงาน'}`,
-                        ]"
-                        :label="`${'ปีที่จบการฝึกอบรม/ดูงาน'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            style="color: var(--q-primary)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-              </div>
-              <div v-if="isDate === 'true'" class="row q-gutter-sm">
-                <div class="col">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="trainData.startDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:modelValue="
-                    (v: Date) =>
-                      (trainData.startYear = parseInt(
-                        v.toString().slice(11, 15)
-                      ))
-                  "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        class="inputgreen"
-                        :model-value="date2Thai(trainData.startDate)"
-                        :rules="[
-                          (val) =>
-                            !!val ||
-                            `${'กรุณาเลือกวันที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
-                        ]"
-                        hide-bottom-space
-                        :label="`${'วันที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            color="primary"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-                <div class="col">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="trainData.endDate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                    @update:modelValue="
-                    (v: Date)  =>
-                      (trainData.finishYear = parseInt(
-                        v.toString().slice(11, 15)
-                      ))
-                  "
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        class="inputgreen"
-                        :model-value="date2Thai(trainData.endDate)"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณาเลือกวันที่จบการฝึกอบรม/ดูงาน'}`,
-                        ]"
-                        hide-bottom-space
-                        :label="`${'วันที่จบการฝึกอบรม/ดูงาน'}`"
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            class="cursor-pointer"
-                            color="primary"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-              </div>
-            </q-card>
-            <div class="row q-px-md q-mb-sm q-gutter-sm">
+            <div class="col">
+              <q-input
+                outlined
+                class="inputgreen"
+                v-model="trainData.topic"
+                label="หัวข้อการฝึกอบรม/ดูงาน"
+                bg-color="white"
+                dense
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
+                ]"
+                hide-bottom-space
+              />
+            </div>
+          </div>
+          <q-card
+            flat
+            bordered
+            class="q-px-sm q-my-sm q-pb-sm borderCard"
+          >
+            <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="false"
+                label="ปี"
+                dense
+              />
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="true"
+                label="วัน/เดือน/ปี"
+                dense
+              />
+            </div>
+            <div v-if="isDate === 'false'" class="row q-gutter-sm">
               <div class="col">
                 <datepicker
                   menu-class-name="modalfix"
-                  v-model="trainData.yearly"
+                  v-model="trainData.startYear"
                   :locale="'th'"
                   autoApply
                   year-picker
                   :enableTimePicker="false"
-                  @update:modelValue="trainData.yearly"
+                  @update:modelValue="
+                  (v:number) =>
+                    (trainData.startDate = new Date(
+                      `${v}-01-01T00:00:02.010+07:00`
+                    ))
+                "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -970,14 +777,14 @@ onMounted(async () => {
                       lazy-rules
                       outlined
                       class="inputgreen"
-                      clearable
-                      @clear="() => (trainData.yearly = null)"
                       hide-bottom-space
-                      :model-value="
-                        !!trainData.yearly ? trainData.yearly + 543 : null
-                      "
-                      :label="`${'ปีงบประมาณ'}`"
-                      @update:modelValue="trainData.yearly = null"
+                      :model-value="trainData.startYear + 543"
+                      :rules="[
+                        (val) =>
+                          !!val ||
+                          `${'กรุณาเลือกปีที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
+                      ]"
+                      :label="`${'ปีที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -992,61 +799,66 @@ onMounted(async () => {
                 </datepicker>
               </div>
               <div class="col">
-                <q-input
-                  outlined
-                  v-model="trainData.place"
-                  label="สถานที่ฝึกอบรม/ดูงาน"
-                  bg-color="white"
-                  class="inputgreen"
-                  dense
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
-                  ]"
-                  hide-bottom-space
-                />
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="trainData.finishYear"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="
+                  (v:number) =>
+                    (trainData.endDate = new Date(
+                      `${v}-01-01T00:00:02.010+07:00`
+                    ))
+                "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      class="inputgreen"
+                      outlined
+                      hide-bottom-space
+                      :model-value="trainData.finishYear + 543"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกปีที่จบการฝึกอบรม/ดูงาน'}`,
+                      ]"
+                      :label="`${'ปีที่จบการฝึกอบรม/ดูงาน'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
               </div>
             </div>
-            <div class="row q-px-md q-mb-sm q-gutter-sm">
-              <div class="col">
-                <q-input
-                  outlined
-                  class="inputgreen"
-                  v-model="trainData.duration"
-                  label="รวมระยะเวลาในการฝึกอบรม/ดูงาน"
-                  bg-color="white"
-                  dense
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  outlined
-                  class="inputgreen"
-                  v-model="trainData.department"
-                  label="หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน"
-                  bg-color="white"
-                  dense
-                />
-              </div>
-            </div>
-            <div class="row q-px-md q-mb-sm q-gutter-sm">
-              <div class="col">
-                <q-input
-                  class="inputgreen"
-                  outlined
-                  v-model="trainData.numberOrder"
-                  label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
-                  bg-color="white"
-                  dense
-                />
-              </div>
+            <div v-if="isDate === 'true'" class="row q-gutter-sm">
               <div class="col">
                 <datepicker
                   menu-class-name="modalfix"
-                  v-model="trainData.dateOrder"
+                  v-model="trainData.startDate"
                   :locale="'th'"
                   autoApply
                   :enableTimePicker="false"
                   week-start="0"
+                  @update:modelValue="
+                  (v: Date) =>
+                    (trainData.startYear = parseInt(
+                      v.toString().slice(11, 15)
+                    ))
+                "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -1056,14 +868,61 @@ onMounted(async () => {
                     <q-input
                       outlined
                       dense
-                      class="inputgreen"
                       lazy-rules
-                      clearable
-                      @clear="() => (trainData.dateOrder = null)"
-                      @update:modelValue="trainData.dateOrder = null"
-                      :model-value="date2Thai(trainData.dateOrder)"
+                      class="inputgreen"
+                      :model-value="date2Thai(trainData.startDate)"
+                      :rules="[
+                        (val) =>
+                          !!val ||
+                          `${'กรุณาเลือกวันที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
+                      ]"
                       hide-bottom-space
-                      :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
+                      :label="`${'วันที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="trainData.endDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:modelValue="
+                  (v: Date)  =>
+                    (trainData.finishYear = parseInt(
+                      v.toString().slice(11, 15)
+                    ))
+                "
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      class="inputgreen"
+                      :model-value="date2Thai(trainData.endDate)"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่จบการฝึกอบรม/ดูงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      :label="`${'วันที่จบการฝึกอบรม/ดูงาน'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -1078,114 +937,228 @@ onMounted(async () => {
                 </datepicker>
               </div>
             </div>
-          </q-page>
-        </q-page-container>
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+          </q-card>
+          <div class="row q-mb-sm q-gutter-sm">
+            <div class="col">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="trainData.yearly"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:modelValue="trainData.yearly"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    lazy-rules
+                    outlined
+                    class="inputgreen"
+                    clearable
+                    @clear="() => (trainData.yearly = null)"
+                    hide-bottom-space
+                    :model-value="
+                      !!trainData.yearly ? trainData.yearly + 543 : null
+                    "
+                    :label="`${'ปีงบประมาณ'}`"
+                    @update:modelValue="trainData.yearly = null"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="trainData.place"
+                label="สถานที่ฝึกอบรม/ดูงาน"
+                bg-color="white"
+                class="inputgreen"
+                dense
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
+                ]"
+                hide-bottom-space
+              />
+            </div>
+          </div>
+          <div class="row q-mb-sm q-gutter-sm">
+            <div class="col">
+              <q-input
+                outlined
+                class="inputgreen"
+                v-model="trainData.duration"
+                label="รวมระยะเวลาในการฝึกอบรม/ดูงาน"
+                bg-color="white"
+                dense
+              />
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                class="inputgreen"
+                v-model="trainData.department"
+                label="หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน"
+                bg-color="white"
+                dense
+              />
+            </div>
+          </div>
+          <div class="row q-mb-sm q-gutter-sm">
+            <div class="col">
+              <q-input
+                class="inputgreen"
+                outlined
+                v-model="trainData.numberOrder"
+                label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
+                bg-color="white"
+                dense
+              />
+            </div>
+            <div class="col">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="trainData.dateOrder"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="inputgreen"
+                    lazy-rules
+                    clearable
+                    @clear="() => (trainData.dateOrder = null)"
+                    @update:modelValue="trainData.dateOrder = null"
+                    :model-value="date2Thai(trainData.dateOrder)"
+                    hide-bottom-space
+                    :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <dialog-header
-            tittle="ประวัติแก้ไขการฝึกอบรม/ดูงาน"
-            :close="closeHistoryDialog"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
-
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-            <q-space />
-            <q-input
-              dense
-              outlined
-              bg-color="white"
-              v-model="historyKeyword"
-              label="ค้นหา"
-              class="q-mr-sm"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="historyVisibleColumns"
-              multiple
-              outlined
-              dense
-              bg-color="white"
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="historyColumns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </q-toolbar>
-          <d-table
-            ref="table"
-            :columns="historyColumns"
-            :rows="historyRows"
-            row-key="name"
-            flat
-            :filter="historyKeyword"
-            v-model:pagination="historyPagination"
-            bordered
-            :paging="true"
+    <q-card style="min-width: 80%">
+      <dialog-header
+        tittle="ประวัติแก้ไขการฝึกอบรม/ดูงาน"
+        :close="closeHistoryDialog"
+      />
+      <q-separator color="grey-4" />
+      <q-card-section style="max-height: 60vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
             dense
-            :rows-per-page-options="[10, 25, 50, 100]"
-            class="custom-header-table"
-            :visible-columns="historyVisibleColumns"
+            outlined
+            bg-color="white"
+            v-model="historyKeyword"
+            label="ค้นหา"
           >
-            <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 v-slot:append>
+              <q-icon name="search" />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+          </q-input>
+
+          <q-select
+            v-model="historyVisibleColumns"
+            multiple
+            outlined
+            dense
+            bg-color="white"
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="historyColumns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          :columns="historyColumns"
+          :rows="historyRows"
+          row-key="name"
+          flat
+          :filter="historyKeyword"
+          v-model:pagination="historyPagination"
+          bordered
+          :paging="true"
+          dense
+          :rows-per-page-options="[10, 25, 50, 100]"
+          class="custom-header-table"
+          :visible-columns="historyVisibleColumns"
+        >
+          <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 v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
index ff4d09b09..fbb0f8044 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
@@ -598,8 +598,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="row items-center q-gutter-x-sm q-py-sm">
-    <q-btn color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn dense color="primary" icon="add" flat round @click="onClickOpenDialog()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -787,434 +787,409 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px"
-      class="bg-white"
-    >
+    <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader
-              :tittle="
-                isEdit
-                  ? 'แก้ไขข้อมูลเครื่องราชอิสริยาภรณ์'
-                  : 'เพิ่มข้อมูลเครื่องราชอิสริยาภรณ์'
-              "
-              :close="clickClose"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  autoApply
-                  year-picker
-                  v-model="insigniaForm.year"
-                  week-start="0"
-                  menu-class-name="modalfix"
-                  :locale="'th'"
-                  :enableTimePicker="false"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      hide-bottom-space
-                      class="inputgreen"
-                      :model-value="insigniaForm.year !== 0 ? (insigniaForm.year as number) + 543 : null"
-                      :rules="[
-                      (val:string) =>
-                        !!val ||
-                        `${'กรุณาเลือกปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`,
-                    ]"
-                      :label="`${'ปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  autoApply
-                  borderless
-                  week-start="0"
-                  menu-class-name="modalfix"
-                  v-model="insigniaForm.receiveDate"
-                  :locale="'th'"
-                  :enableTimePicker="false"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      hide-bottom-space
-                      class="inputgreen"
-                      for="inputDatereceive"
-                      ref="dateReceivedRef"
-                      :model-value="
-                      insigniaForm.receiveDate != null
-                        ? date2Thai(insigniaForm.receiveDate as Date)
-                        : null
-                    "
-                      :label="`${'วันที่ได้รับ'}`"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
-                  dense
-                  outlined
-                  use-input
-                  emit-value
-                  lazy-rules
-                  map-options
-                  hide-bottom-space
-                  option-value="id"
-                  input-debounce="0"
-                  option-label="name"
-                  v-model="insigniaForm.insigniaId"
-                  class="inputgreen"
-                  :label="`${'ชื่อเครื่องราชฯ'}`"
-                  :options="Ops.insigniaOptions"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
-                  @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
-                      ) "
-                  @update:modelValue="insigniaTypeSelection"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  readonly
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  v-model="insigniaType"
-                  :label="`${'ลำดับชั้น'}`"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  v-model="insigniaForm.no"
-                  class="inputgreen"
-                  :label="`${'ลำดับที่'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  v-model="insigniaForm.issue"
-                  class="inputgreen"
-                  :label="`${'ราชกิจจาฯ ฉบับที่'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  v-model="insigniaForm.volumeNo"
-                  class="inputgreen"
-                  :label="`${'เล่มที่'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  v-model="insigniaForm.volume"
-                  class="inputgreen"
-                  :label="`${'เล่ม'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  v-model="insigniaForm.section"
-                  class="inputgreen"
-                  :label="`${'ตอน'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  lazy-rules
-                  outlined
-                  hide-bottom-space
-                  v-model="insigniaForm.page"
-                  class="inputgreen"
-                  :label="`${'หน้า'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  autoApply
-                  week-start="0"
-                  v-model="insigniaForm.dateAnnounce"
-                  menu-class-name="modalfix"
-                  :locale="'th'"
-                  :enableTimePicker="false"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      hide-bottom-space
-                      class="inputgreen"
-                      :model-value="date2Thai(insigniaForm.dateAnnounce as Date)"
-                      :label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
-                      :rules="[
-                      (val:string) =>
-                        !!val || `${'กรุณาเลือกวันที่ประกาศในราชกิจจาฯ'}`,
-                    ]"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  v-model="insigniaForm.refCommandNo"
-                  class="inputgreen"
-                  :label="`${'เลขที่คำสั่ง'}`"
-                >
-                  <template v-slot:append>
-                    <q-icon name="mdi-file" class="cursor-pointer" />
-                  </template>
-                </q-input>
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  autoApply
-                  week-start="0"
-                  v-model="insigniaForm.refCommandDate"
-                  menu-class-name="modalfix"
-                  :locale="'th'"
-                  :enableTimePicker="false"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      clearable
-                      hide-bottom-space
-                      class="inputgreen"
-                      :label="`${'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'}`"
-                      :model-value="
-                      date2Thai(insigniaForm.refCommandDate as Date)
-                    "
-                      @clear="insigniaForm.refCommandDate = null"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  hide-bottom-space
-                  v-model="insigniaForm.note"
-                  class="inputgreen"
-                  label="หมายเหตุ"
-                />
-              </div>
+        <DialogHeader
+          :tittle="
+            isEdit
+              ? 'แก้ไขข้อมูลเครื่องราชอิสริยาภรณ์'
+              : 'เพิ่มข้อมูลเครื่องราชอิสริยาภรณ์'
+          "
+          :close="clickClose"
+        />
+        <q-separator color="grey-4" />
+        <q-card-section style="max-height: 55vh" class="scroll">
+        <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                year-picker
+                v-model="insigniaForm.year"
+                week-start="0"
+                menu-class-name="modalfix"
+                :locale="'th'"
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    hide-bottom-space
+                    class="inputgreen"
+                    :model-value="insigniaForm.year !== 0 ? (insigniaForm.year as number) + 543 : null"
+                    :rules="[
+                    (val:string) =>
+                      !!val ||
+                      `${'กรุณาเลือกปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`,
+                  ]"
+                    :label="`${'ปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
             </div>
-          </q-page>
-        </q-page-container>
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="insigniaForm.receiveDate"
+                :locale="'th'"
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    hide-bottom-space
+                    class="inputgreen"
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    :model-value="
+                    insigniaForm.receiveDate != null
+                      ? date2Thai(insigniaForm.receiveDate as Date)
+                      : null
+                  "
+                    :label="`${'วันที่ได้รับ'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                emit-value
+                lazy-rules
+                map-options
+                hide-bottom-space
+                option-value="id"
+                input-debounce="0"
+                option-label="name"
+                v-model="insigniaForm.insigniaId"
+                class="inputgreen"
+                :label="`${'ชื่อเครื่องราชฯ'}`"
+                :options="Ops.insigniaOptions"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
+                @filter="(inputValue:string,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
+                    ) "
+                @update:modelValue="insigniaTypeSelection"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                readonly
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="insigniaType"
+                :label="`${'ลำดับชั้น'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="insigniaForm.no"
+                class="inputgreen"
+                :label="`${'ลำดับที่'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="insigniaForm.issue"
+                class="inputgreen"
+                :label="`${'ราชกิจจาฯ ฉบับที่'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="insigniaForm.volumeNo"
+                class="inputgreen"
+                :label="`${'เล่มที่'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="insigniaForm.volume"
+                class="inputgreen"
+                :label="`${'เล่ม'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="insigniaForm.section"
+                class="inputgreen"
+                :label="`${'ตอน'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                lazy-rules
+                outlined
+                hide-bottom-space
+                v-model="insigniaForm.page"
+                class="inputgreen"
+                :label="`${'หน้า'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                week-start="0"
+                v-model="insigniaForm.dateAnnounce"
+                menu-class-name="modalfix"
+                :locale="'th'"
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    hide-bottom-space
+                    class="inputgreen"
+                    :model-value="date2Thai(insigniaForm.dateAnnounce as Date)"
+                    :label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
+                    :rules="[
+                    (val:string) =>
+                      !!val || `${'กรุณาเลือกวันที่ประกาศในราชกิจจาฯ'}`,
+                  ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="insigniaForm.refCommandNo"
+                class="inputgreen"
+                :label="`${'เลขที่คำสั่ง'}`"
+              >
+                <template v-slot:append>
+                  <q-icon name="mdi-file" class="cursor-pointer" />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                week-start="0"
+                v-model="insigniaForm.refCommandDate"
+                menu-class-name="modalfix"
+                :locale="'th'"
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    clearable
+                    hide-bottom-space
+                    class="inputgreen"
+                    :label="`${'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'}`"
+                    :model-value="
+                    date2Thai(insigniaForm.refCommandDate as Date)
+                  "
+                    @clear="insigniaForm.refCommandDate = null"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                v-model="insigniaForm.note"
+                class="inputgreen"
+                label="หมายเหตุ"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <q-dialog v-model="modalHistory" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <DialogHeader
-            tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
-            :close="() => (modalHistory = false)"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
+        :close="() => (modalHistory = false)"
+      />
+      <q-separator color="grey-4" />
 
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <div class="row q-gutter-sm q-mb-sm">
-            <q-space />
-            <q-input
-              standout
-              dense
-              v-model="filterHistory"
-              ref="filterRef"
-              outlined
-              placeholder="ค้นหา"
-              debounce="300"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filterHistory == ''"
-                  name="search"
-                  @click.stop.prevent="filterHistory = ''"
-                  class="cursor-pointer"
-                />
-                <q-icon
-                  v-if="filterHistory"
-                  name="cancel"
-                  @click.stop.prevent="filterHistory = ''"
-                  class="cursor-pointer"
-                />
-              </template>
-            </q-input>
-            <q-select
-              v-model="visibleColumnsHistory"
-              multiple
-              outlined
-              dense
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columnsHistory"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </div>
-          <d-table
-            ref="table"
-            flat
-            bordered
-            v-model:pagination="historyPagination"
+      <q-card-section style="max-height: 60vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
             dense
-            :columns="columnsHistory"
-            :rows="rowsHistory"
-            :paging="true"
-            :rows-per-page-options="[10, 25, 50, 100]"
-            :visible-columns="visibleColumnsHistory"
-            :filter="filterHistory"
+            v-model="filterHistory"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
           >
-            >
-            <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-tr>
+            <template v-slot:append>
+              <q-icon
+                v-if="filterHistory == ''"
+                name="search"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterHistory"
+                name="cancel"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+          </q-input>
+          <q-select
+            v-model="visibleColumnsHistory"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columnsHistory"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          v-model:pagination="historyPagination"
+          dense
+          :columns="columnsHistory"
+          :rows="rowsHistory"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumnsHistory"
+          :filter="filterHistory"
+        >
+          >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
index 1d2666fd9..12cd16e62 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
@@ -328,8 +328,8 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="row items-center q-gutter-x-sm q-py-sm">
-    <q-btn color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn dense color="primary" icon="add" flat round @click="onClickOpenDialog()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -517,226 +517,211 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 320px"
-      class="bg-white"
-    >
+    <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader
-              :tittle="
-                isEdit
-                  ? 'แก้ไขข้อมูลประกาศเกียรติคุณ'
-                  : 'เพิ่มข้อมูลประกาศเกียรติคุณ'
-              "
-              :close="clickClose"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-separator />
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-              <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
-                <q-radio
-                  v-model="(declHonorForm.isDate as string)"
-                  dense
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  val="false"
-                  label="ปี"
-                />
-                <q-radio
-                  v-model="(declHonorForm.isDate as string)"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  val="true"
-                  label="วัน/เดือน/ปี"
-                  dense
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  autoApply
-                  year-picker
-                  v-model="issueDateYear"
-                  week-start="0"
-                  menu-class-name="modalfix"
-                  :locale="'th'"
-                  :enableTimePicker="false"
-                  @update:modelValue="
-                    (v:number) =>
-                      (declHonorForm.issueDate = new Date(
-                        `${v}-01-01T00:00:02.010+07:00`
-                      ))
-                  "
-                  v-if="declHonorForm.isDate === 'false'"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      hide-bottom-space
-                      class="inputgreen"
-                      :model-value="issueDateYear + 543"
-                      :rules="[
-                      (val:string) =>
-                        !!val ||
-                        `${'กรุณาเลือกปีที่ได้รับ'}`,
-                    ]"
-                      :label="`${'ปีที่ได้รับ'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-                <datepicker
-                  autoApply
-                  borderless
-                  v-else
-                  week-start="0"
-                  menu-class-name="modalfix"
-                  v-model="declHonorForm.issueDate"
-                  :locale="'th'"
-                  :enableTimePicker="false"
-                  @update:modelValue="
-                    (v: Date) =>
-                      (issueDateYear = parseInt(
-                        v.toString().slice(11, 15)
-                      ))
-                  "
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      hide-bottom-space
-                      for="inputDatereceive"
-                      ref="dateReceivedRef"
-                      class="inputgreen"
-                      :model-value="date2Thai(declHonorForm.issueDate)"
-                      :label="`${'วันที่ได้รับ'}`"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  class="inputgreen"
-                  v-model="declHonorForm.issuer"
-                  :label="`${'ผู้มีอำนาจลงนาม'}`"
-                />
-              </div>
-              <div class="col-12">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  class="inputgreen"
-                  v-model="declHonorForm.detail"
-                  :label="`${'รายละเอียด'}`"
-                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  class="inputgreen"
-                  v-model="declHonorForm.refCommandNo"
-                  :label="`${'เลขที่คำสั่ง'}`"
-                >
-                  <template v-slot:append>
-                    <q-icon name="mdi-file" class="cursor-pointer" />
-                  </template>
-                </q-input>
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  autoApply
-                  borderless
-                  week-start="0"
-                  menu-class-name="modalfix"
-                  v-model="declHonorForm.refCommandDate"
-                  :locale="'th'"
-                  :enableTimePicker="false"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      clearable
-                      hide-bottom-space
-                      class="inputgreen"
-                      :model-value="
-                        declHonorForm.refCommandDate == null
-                          ? null
-                          : date2Thai(declHonorForm.refCommandDate)
-                      "
-                      :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                      @clear="declHonorForm.refCommandDate = null"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
+        <DialogHeader
+          :tittle="
+            isEdit
+              ? 'แก้ไขข้อมูลประกาศเกียรติคุณ'
+              : 'เพิ่มข้อมูลประกาศเกียรติคุณ'
+          "
+          :close="clickClose"
+        />
+        <q-separator color="grey-4" />
+        <q-card-section style="max-height: 55vh" class="scroll">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
+              <q-radio
+                v-model="(declHonorForm.isDate as string)"
+                dense
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="false"
+                label="ปี"
+              />
+              <q-radio
+                v-model="(declHonorForm.isDate as string)"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="true"
+                label="วัน/เดือน/ปี"
+                dense
+              />
             </div>
-          </q-page>
-        </q-page-container>
-
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                year-picker
+                v-model="issueDateYear"
+                week-start="0"
+                menu-class-name="modalfix"
+                :locale="'th'"
+                :enableTimePicker="false"
+                @update:modelValue="
+                  (v:number) =>
+                    (declHonorForm.issueDate = new Date(
+                      `${v}-01-01T00:00:02.010+07:00`
+                    ))
+                "
+                v-if="declHonorForm.isDate === 'false'"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    hide-bottom-space
+                    class="inputgreen"
+                    :model-value="issueDateYear + 543"
+                    :rules="[
+                    (val:string) =>
+                      !!val ||
+                      `${'กรุณาเลือกปีที่ได้รับ'}`,
+                  ]"
+                    :label="`${'ปีที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <datepicker
+                autoApply
+                borderless
+                v-else
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="declHonorForm.issueDate"
+                :locale="'th'"
+                :enableTimePicker="false"
+                @update:modelValue="
+                  (v: Date) =>
+                    (issueDateYear = parseInt(
+                      v.toString().slice(11, 15)
+                    ))
+                "
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    hide-bottom-space
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    class="inputgreen"
+                    :model-value="date2Thai(declHonorForm.issueDate)"
+                    :label="`${'วันที่ได้รับ'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                v-model="declHonorForm.issuer"
+                :label="`${'ผู้มีอำนาจลงนาม'}`"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                v-model="declHonorForm.detail"
+                :label="`${'รายละเอียด'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                v-model="declHonorForm.refCommandNo"
+                :label="`${'เลขที่คำสั่ง'}`"
+              >
+                <template v-slot:append>
+                  <q-icon name="mdi-file" class="cursor-pointer" />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="declHonorForm.refCommandDate"
+                :locale="'th'"
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    clearable
+                    hide-bottom-space
+                    class="inputgreen"
+                    :model-value="
+                      declHonorForm.refCommandDate == null
+                        ? null
+                        : date2Thai(declHonorForm.refCommandDate)
+                    "
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                    @clear="declHonorForm.refCommandDate = null"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-actions align="right">
             <q-btn
               dense
               unelevated
@@ -748,10 +733,9 @@ onMounted(async () => {
             >
               <q-tooltip>บันทึกข้อมูล</q-tooltip>
             </q-btn>
-          </q-toolbar>
-        </q-footer>
+          </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <q-dialog v-model="modalHistory" persistent>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
index 1231e38d9..f6a06416b 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
@@ -397,8 +397,8 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="row items-center q-gutter-x-sm q-py-sm">
-    <q-btn color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn dense color="primary" icon="add" flat round @click="onClickOpenDialog()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -586,315 +586,288 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 350px"
-      class="bg-white"
-    >
+    <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader
-              :tittle="
-                isEdit
-                  ? 'แก้ไขผลการประเมินการปฏิบัติราชการ'
-                  : 'เพิ่มผลการประเมินการปฏิบัติราชการ'
-              "
-              :close="clickClose"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-              <div class="col-12">
-                <datepicker
-                  autoApply
-                  borderless
-                  week-start="0"
-                  menu-class-name="modalfix"
-                  v-model="resPerformForm.date"
-                  :locale="'th'"
-                  :enableTimePicker="false"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      dense
-                      outlined
-                      for="inputDatereceive"
-                      ref="dateReceivedRef"
-                      class="inputgreen"
-                      hide-bottom-space
-                      :model-value="date2Thai(resPerformForm.date as Date)"
-                      :label="`${'วันที่ได้รับ'}`"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  mask="###"
-                  class="inputgreen"
-                  v-model="resPerformForm.point1Total"
-                  input-class="text-right "
-                  :label="`${'ส่วนที่1 (คะแนน)'}`"
-                  :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
-                  @update:model-value="
-                    resPerformForm.point1Total > 100
-                      ? (resPerformForm.point1Total = 100)
-                      : ''
-                  "
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  mask="###"
-                  class="inputgreen"
-                  v-model="resPerformForm.point1"
-                  input-class="text-right"
-                  :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
-                  ]"
-                  @update:model-value="
-                    resPerformForm.point1 > 100
-                      ? (resPerformForm.point1 = 100)
-                      : ''
-                  "
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  mask="###"
-                  class="inputgreen"
-                  v-model="resPerformForm.point2Total"
-                  input-class="text-right"
-                  :label="`${'ส่วนที่2 (คะแนน)'}`"
-                  :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
-                  @update:model-value="
-                    resPerformForm.point2Total > 100
-                      ? (resPerformForm.point2Total = 100)
-                      : ''
-                  "
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  mask="###"
-                  class="inputgreen"
-                  v-model="resPerformForm.point2"
-                  input-class="text-right"
-                  :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
-                  ]"
-                  @update:model-value="
-                    resPerformForm.point2 > 100
-                      ? (resPerformForm.point2 = 100)
-                      : ''
-                  "
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  mask="###"
-                  class="inputgreen"
-                  v-model="resPerformForm.pointSumTotal"
-                  input-class="text-right"
-                  :label="`${'ผลรวม (คะแนน)'}`"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
-                  @update:model-value="
-                    resPerformForm.pointSumTotal > 100
-                      ? (resPerformForm.pointSumTotal = 100)
-                      : ''
-                  "
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  dense
-                  outlined
-                  lazy-rules
-                  hide-bottom-space
-                  mask="###"
-                  v-model="resPerformForm.pointSum"
-                  class="inputgreen"
-                  input-class="text-right"
-                  :label="`${'ผลประเมินรวม (คะแนน)'}`"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
-                  ]"
-                  @update:model-value="
-                    resPerformForm.pointSum > 100
-                      ? (resPerformForm.pointSum = 100)
-                      : ''
-                  "
-                />
-              </div>
-              <div class="text-subtitle2 col-12 row items-center">
-                <q-space></q-space>
-                ผลการประเมิน:
-                <div class="text-bold items-center q-px-sm">
-                  {{ textPoint(resPerformForm.pointSum) }}
-                </div>
-                {{ textRangePoint(resPerformForm.pointSum) }}
-              </div>
+        <DialogHeader
+          :tittle="
+            isEdit
+              ? 'แก้ไขผลการประเมินการปฏิบัติราชการ'
+              : 'เพิ่มผลการประเมินการปฏิบัติราชการ'
+          "
+          :close="clickClose"
+        />
+        <q-separator color="grey-4" />
+        <q-card-section style="max-height: 55vh" class="scroll">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-12">
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="resPerformForm.date"
+                :locale="'th'"
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    class="inputgreen"
+                    hide-bottom-space
+                    :model-value="date2Thai(resPerformForm.date as Date)"
+                    :label="`${'วันที่ได้รับ'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
             </div>
-          </q-page>
-        </q-page-container>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                mask="###"
+                class="inputgreen"
+                v-model="resPerformForm.point1Total"
+                input-class="text-right "
+                :label="`${'ส่วนที่1 (คะแนน)'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
+                @update:model-value="
+                  resPerformForm.point1Total > 100
+                    ? (resPerformForm.point1Total = 100)
+                    : ''
+                "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                mask="###"
+                class="inputgreen"
+                v-model="resPerformForm.point1"
+                input-class="text-right"
+                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
+                ]"
+                @update:model-value="
+                  resPerformForm.point1 > 100
+                    ? (resPerformForm.point1 = 100)
+                    : ''
+                "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                mask="###"
+                class="inputgreen"
+                v-model="resPerformForm.point2Total"
+                input-class="text-right"
+                :label="`${'ส่วนที่2 (คะแนน)'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
+                @update:model-value="
+                  resPerformForm.point2Total > 100
+                    ? (resPerformForm.point2Total = 100)
+                    : ''
+                "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                mask="###"
+                class="inputgreen"
+                v-model="resPerformForm.point2"
+                input-class="text-right"
+                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
+                ]"
+                @update:model-value="
+                  resPerformForm.point2 > 100
+                    ? (resPerformForm.point2 = 100)
+                    : ''
+                "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                mask="###"
+                class="inputgreen"
+                v-model="resPerformForm.pointSumTotal"
+                input-class="text-right"
+                :label="`${'ผลรวม (คะแนน)'}`"
+                :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
+                @update:model-value="
+                  resPerformForm.pointSumTotal > 100
+                    ? (resPerformForm.pointSumTotal = 100)
+                    : ''
+                "
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                mask="###"
+                v-model="resPerformForm.pointSum"
+                class="inputgreen"
+                input-class="text-right"
+                :label="`${'ผลประเมินรวม (คะแนน)'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
+                ]"
+                @update:model-value="
+                  resPerformForm.pointSum > 100
+                    ? (resPerformForm.pointSum = 100)
+                    : ''
+                "
+              />
+            </div>
+            <div class="col-12 row items-center q-pt-md justify-center">
+              ผลการประเมิน:
+              <div class="text-bold items-center q-px-sm">
+                {{ textPoint(resPerformForm.pointSum) }}
+              </div>
+              {{ textRangePoint(resPerformForm.pointSum) }}
+            </div>
+          </div>
+        </q-card-section>
+          
         <q-separator />
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <q-dialog v-model="modalHistory" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <DialogHeader
-            tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
-            :close="() => (modalHistory = false)"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
-
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <div class="row q-gutter-sm q-mb-sm">
-            <q-space />
-            <q-input
-              standout
-              dense
-              v-model="filterHistory"
-              ref="filterRef"
-              outlined
-              placeholder="ค้นหา"
-              debounce="300"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filterHistory == ''"
-                  name="search"
-                  @click.stop.prevent="filterHistory = ''"
-                  class="cursor-pointer"
-                />
-                <q-icon
-                  v-if="filterHistory"
-                  name="cancel"
-                  @click.stop.prevent="filterHistory = ''"
-                  class="cursor-pointer"
-                />
-              </template>
-            </q-input>
-            <q-select
-              v-model="visibleColumnsHistory"
-              multiple
-              outlined
-              dense
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columnsHistory"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </div>
-          <d-table
-            ref="table"
-            flat
-            bordered
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
+        :close="() => (modalHistory = false)"
+      />
+      <q-separator color="grey-4" />
+      <q-card-section style="max-height: 60vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
             dense
-            :columns="columnsHistory"
-            v-model:pagination="historyPagination"
-            :rows="rowsHistory"
-            :paging="true"
-            :rows-per-page-options="[10, 25, 50, 100]"
-            :visible-columns="visibleColumnsHistory"
-            :filter="filterHistory"
+            v-model="filterHistory"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
           >
-            >
-            <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-tr>
+            <template v-slot:append>
+              <q-icon
+                v-if="filterHistory == ''"
+                name="search"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterHistory"
+                name="cancel"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+          </q-input>
+          <q-select
+            v-model="visibleColumnsHistory"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columnsHistory"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columnsHistory"
+          v-model:pagination="historyPagination"
+          :rows="rowsHistory"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumnsHistory"
+          :filter="filterHistory"
+        >
+          >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
index 1e14e2fc6..f546eb59e 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_DisciplineHistory.vue
@@ -191,7 +191,7 @@ watch(modal, (status) => {
       />
       <q-separator color="grey-4" />
 
-      <q-card-section style="max-height: 50vh" class="scroll">
+      <q-card-section style="max-height: 60vh" class="scroll">
         <div class="row q-gutter-sm q-mb-sm">
           <q-space />
           <q-input
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
index 37a17d15c..fb23c589e 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_LeaveHistory.vue
@@ -220,7 +220,7 @@ watch(modal, (status) => {
         :close="() => (modal = false)"
       />
       <q-separator color="grey-4" />
-      <q-card-section style="max-height: 50vh" class="scroll">
+      <q-card-section style="max-height: 60vh" class="scroll">
         <div class="row q-gutter-sm q-mb-sm">
           <q-space />
           <q-input
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
index 2e876fb3e..11d9ed0e4 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
@@ -193,7 +193,7 @@ watch(modal, (status) => {
         tittle="ประวัติแก้ไขปฏิบัติราชการพิเศษ"
         :close="() => (modal = false)"
       />
-      <q-card-section style="max-height: 50vh" class="scroll">
+      <q-card-section style="max-height: 60vh" class="scroll">
         <div class="row q-gutter-sm q-mb-sm">
           <q-space />
           <q-input
diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
index 41789d4a4..d2660242e 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
@@ -209,8 +209,8 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="row items-center q-gutter-x-sm q-py-sm">
-    <q-btn color="primary" icon="add" flat round @click="openDialogAdd()"
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn dense color="primary" icon="add" flat round @click="openDialogAdd()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -393,97 +393,83 @@ onMounted(() => {
 
   <!-- dialog add edit -->
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 200px"
-      class="bg-white"
-    >
+    <q-card style="min-width: 70%">
       <q-form greedy @submit.prevent @validation-success="validateForm">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader
-              :tittle="edit ? 'แก้ไขข้อมูลอื่นๆ' : 'เพิ่มข้อมูลอื่นๆ'"
-              :close="closeDialog"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="date"
-                  :locale="'th'"
-                  autoApply
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      ref="dateRef"
-                      class="full-width inputgreen cursor-pointer"
-                      outlined
-                      dense
-                      :model-value="date2Thai(date)"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
-                      hide-bottom-space
-                      :label="`${'วันที่'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          :style="'color: var(--q-primary)'"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-6">
-                <q-input
-                  ref="detailRef"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="detail"
-                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                  hide-bottom-space
-                  :label="`${'รายละเอียด'}`"
-                />
-              </div>
-            </div>
-          </q-page>
-        </q-page-container>
+        <DialogHeader
+          :tittle="edit ? 'แก้ไขข้อมูลอื่นๆ' : 'เพิ่มข้อมูลอื่นๆ'"
+          :close="closeDialog"
+        />
         <q-separator />
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+
+        <q-card-section style="max-height: 60vh" class="scroll">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    ref="dateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    outlined
+                    dense
+                    :model-value="date2Thai(date)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="'color: var(--q-primary)'"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-9 col-md-9">
+              <q-input
+                ref="detailRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <DialogHistory v-model:modal="modalHistory" v-model:id="id" />
diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
index e424737fa..3bb2330fe 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
@@ -129,97 +129,86 @@ watch(modal, (status) => {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <DialogHeader
-            tittle="ประวัติแก้ไขอื่นๆ"
-            :close="() => (modal = false)"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขอื่นๆ"
+        :close="() => (modal = false)"
+      />
+      <q-separator color="grey-4" />
 
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <div class="row q-gutter-sm q-mb-sm">
-            <q-space />
-            <q-input
-              standout
-              dense
-              v-model="filterKeyword"
-              ref="filterRef"
-              outlined
-              placeholder="ค้นหา"
-              debounce="300"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filterKeyword == ''"
-                  name="search"
-                  @click.stop.prevent="filterKeyword = ''"
-                  class="cursor-pointer"
-                />
-                <q-icon
-                  v-if="filterKeyword"
-                  name="cancel"
-                  @click.stop.prevent="filterKeyword = ''"
-                  class="cursor-pointer"
-                />
-              </template>
-            </q-input>
-            <q-select
-              v-model="visibleColumns"
-              multiple
-              outlined
-              dense
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </div>
-          <d-table
-            ref="table"
-            flat
-            bordered
+      <q-card-section style="max-height: 60vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
             dense
-            :columns="columns"
-            :rows="rows"
-            :paging="true"
-            :rows-per-page-options="[10, 25, 50, 100]"
-            :visible-columns="visibleColumns"
-            :filter="filterKeyword"
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
           >
-            >
-            <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-tr>
+            <template v-slot:append>
+              <q-icon
+                v-if="filterKeyword == ''"
+                name="search"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterKeyword"
+                name="cancel"
+                @click.stop.prevent="filterKeyword = ''"
+                class="cursor-pointer"
+              />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div>
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          :filter="filterKeyword"
+        >
+          >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/04_registryNew/components/detail/Other/02_Document.vue b/src/modules/04_registryNew/components/detail/Other/02_Document.vue
index e491b421e..2793f0080 100644
--- a/src/modules/04_registryNew/components/detail/Other/02_Document.vue
+++ b/src/modules/04_registryNew/components/detail/Other/02_Document.vue
@@ -171,96 +171,88 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="col-sm-12 col-md-3">
-    <div flat class="q-pa-none">
-      <div class="col-12 row q-col-gutter-md">
-        <div class="row col-12">
-          <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-            <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-              อัปโหลดไฟล์เอกสารหลักฐาน
+  <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+    <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+      อัปโหลดไฟล์เอกสารหลักฐาน
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+      <div class="col-12 row">
+        <q-file
+          for="inputFiles"
+          class="col-12"
+          outlined
+          dense
+          v-model="documentFile"
+          label="ไฟล์เอกสารหลักฐาน"
+          hide-bottom-space
+          accept=".pdf,.xlsx,.docx,.png,.jpg"
+          clearable
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+          <template v-slot:after>
+            <q-btn
+              size="14px"
+              v-if="documentFile"
+              flat
+              round
+              dense
+              color="add"
+              icon="mdi-upload"
+              @click="clickUpload(documentFile)"
+              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+            >
+          </template>
+        </q-file>
+
+        <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
+      </div>
+
+      <div v-if="fileList.length > 0" class="col-xs-12 row">
+        <q-list class="full-width rounded-borders" bordered separator>
+          <q-item
+            clickable
+            v-ripple
+            v-for="data in fileList"
+            :key="data.id"
+            class="items-center"
+          >
+            <q-item-section>{{ data.fileName }}</q-item-section>
+            <q-space />
+            <div>
+              <q-btn
+                size="12px"
+                flat
+                round
+                dense
+                color="blue"
+                icon="mdi-download"
+                @click="downloadFile(data.fileName)"
+                ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+              >
+              <q-btn
+                size="12px"
+                flat
+                round
+                dense
+                color="red"
+                class="q-ml-sm"
+                icon="mdi-delete-outline"
+                @click="deleteFile(data.fileName)"
+                ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+              >
             </div>
-            <div class="col-12"><q-separator /></div>
-            <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
-              <div class="col-12 row">
-                <q-file
-                  for="inputFiles"
-                  class="col-12"
-                  outlined
-                  dense
-                  v-model="documentFile"
-                  label="ไฟล์เอกสารหลักฐาน"
-                  hide-bottom-space
-                  accept=".pdf,.xlsx,.docx,.png,.jpg"
-                  clearable
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" color="primary" />
-                  </template>
-                  <template v-slot:after>
-                    <q-btn
-                      size="14px"
-                      v-if="documentFile"
-                      flat
-                      round
-                      dense
-                      color="add"
-                      icon="mdi-upload"
-                      @click="clickUpload(documentFile)"
-                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                    >
-                  </template>
-                </q-file>
+          </q-item>
+        </q-list>
+      </div>
 
-                <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
-              </div>
-
-              <div v-if="fileList.length > 0" class="col-xs-12 row">
-                <q-list class="full-width rounded-borders" bordered separator>
-                  <q-item
-                    clickable
-                    v-ripple
-                    v-for="data in fileList"
-                    :key="data.id"
-                    class="items-center"
-                  >
-                    <q-item-section>{{ data.fileName }}</q-item-section>
-                    <q-space />
-                    <div>
-                      <q-btn
-                        size="12px"
-                        flat
-                        round
-                        dense
-                        color="blue"
-                        icon="mdi-download"
-                        @click="downloadFile(data.fileName)"
-                        ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-                      >
-                      <q-btn
-                        size="12px"
-                        flat
-                        round
-                        dense
-                        color="red"
-                        class="q-ml-sm"
-                        icon="mdi-delete-outline"
-                        @click="deleteFile(data.fileName)"
-                        ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-                      >
-                    </div>
-                  </q-item>
-                </q-list>
-              </div>
-
-              <div class="col-12" v-else>
-                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-              </div>
-            </div>
-          </q-card>
-        </div>
+      <div class="col-12" v-else>
+        <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
       </div>
     </div>
-  </div>
+  </q-card>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
index ed9fcdb43..6f0dba7cb 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
@@ -396,8 +396,8 @@ onMounted(() => {
 });
 </script>
 <template>
-  <q-toolbar style="padding: 0px" class="text-primary q-mb-xs">
-    <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn flat color="primary" round dense icon="add" @click="onClickOpenDialog()">
       <q-tooltip>เพิ่มข้อมูล</q-tooltip>
     </q-btn>
     <q-space />
@@ -433,7 +433,7 @@ onMounted(() => {
       options-cover
       style="min-width: 150px"
     />
-  </q-toolbar>
+  </div>
   <d-table
     ref="table"
     row-key="id"
@@ -524,345 +524,329 @@ onMounted(() => {
   </d-table>
 
   <q-dialog v-model="modalDialogSalary" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 90vh; min-width: 80%"
-      class="bg-white"
-    >
+    <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader
-              :tittle="
-                isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
-              "
-              :close="onClickCloseDialog"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
+        <DialogHeader
+          :tittle="
+            isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
+          "
+          :close="onClickCloseDialog"
+        />
+        <q-separator color="grey-4" />
 
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="row col-12 q-col-gutter-sm">
-              <q-card flat bordered class="row fit q-pa-sm q-col-gutter-sm">
-                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <datepicker
-                    v-model="formDataSalary.date"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        dense
-                        borderless
-                        :model-value="date2Thai(formDataSalary.date)"
-                        :rules="[
-                            (val: string) =>
-                              !!val ||
-                              `${'กรุณาเลือก วัน/เดือน/ปี'}`,
-                          ]"
-                        :label="`${'วัน/เดือน/ปี'}`"
-                        hide-bottom-space
-                      >
-                        <template v-slot:prepend>
-                          <q-icon
-                            name="event"
-                            color="primary"
-                            class="cursor-pointer"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
+        <q-card-section style="max-height: 55vh" class="scroll">
+          <div class="row col-12 q-col-gutter-sm">
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <datepicker
+                  v-model="formDataSalary.date"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      borderless
+                      :model-value="date2Thai(formDataSalary.date)"
+                      :rules="[
+                          (val: string) =>
+                            !!val ||
+                            `${'กรุณาเลือก วัน/เดือน/ปี'}`,
+                        ]"
+                      :label="`${'วัน/เดือน/ปี'}`"
+                      hide-bottom-space
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          color="primary"
+                          class="cursor-pointer"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
 
-                <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    ref="posNoRef"
-                    outlined
-                    dense
-                    lazy-rules
-                    borderless
-                    v-model="formDataSalary.posNo"
-                    hide-bottom-space
-                    :label="`${'เลขที่ตำแหน่ง'}`"
-                    :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
-                  >
-                  </q-input>
-                </div>
-
-                <div class="col-xs-12 col-sm-12 col-md-12">
-                  <q-select
-                    ref="templatePosRef"
-                    outlined
-                    dense
-                    lazy-rules
-                    borderless
-                    clearable
-                    v-model="formDataSalary.templatePos"
-                    :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
-                    option-label="name"
-                    :options="posNoOptions"
-                    option-value="name"
-                    hide-bottom-space
-                    emit-value
-                    use-input
-                    input-debounce="0"
-                    @update:modelValue="updatePos"
-                    @filter="(inputValue: any,
-                        doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
-                        )"
-                  />
-                </div>
-
-                <div class="col-xs-12 col-sm-12 col-md-12">
-                  <q-input
-                    ref="positionRef"
-                    outlined
-                    dense
-                    lazy-rules
-                    borderless
-                    v-model="formDataSalary.position"
-                    :label="`${'ตำแหน่ง'}`"
-                    type="textarea"
-                    hide-bottom-space
-                    :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
-                  />
-                </div>
-
-                <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="formDataSalary.positionLine"
-                    hide-bottom-space
-                    :label="`${'สายงาน'}`"
-                  />
-                  <!-- <q-select
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  ref="posNoRef"
                   outlined
                   dense
                   lazy-rules
                   borderless
+                  v-model="formDataSalary.posNo"
+                  hide-bottom-space
+                  :label="`${'เลขที่ตำแหน่ง'}`"
+                  :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                >
+                </q-input>
+              </div>
+
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-select
+                  ref="templatePosRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  clearable
+                  v-model="formDataSalary.templatePos"
+                  :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
+                  option-label="name"
+                  :options="posNoOptions"
+                  option-value="name"
+                  hide-bottom-space
+                  emit-value
+                  use-input
+                  input-debounce="0"
+                  @update:modelValue="updatePos"
+                  @filter="(inputValue: any,
+                      doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
+                      )"
+                />
+              </div>
+
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  ref="positionRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.position"
+                  :label="`${'ตำแหน่ง'}`"
+                  type="textarea"
+                  hide-bottom-space
+                  :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
                   v-model="formDataSalary.positionLine"
+                  hide-bottom-space
                   :label="`${'สายงาน'}`"
+                />
+                <!-- <q-select
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.positionLine"
+                :label="`${'สายงาน'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="positionLineOptions"
+                option-value="id"
+                hide-bottom-space
+                use-input
+                input-debounce="0"
+                @filter="(inputValue: any,
+                      doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
+                      )"
+              /> -->
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="formDataSalary.positionPathSide"
+                  hide-bottom-space
+                  :label="`${'ด้าน/สาขา'}`"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.positionExecutive"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่งทางการบริหาร'}`"
+                >
+                </q-input>
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-select
+                  ref="positionType Ref"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.positionType"
+                  :label="`${'ตำแหน่งประเภท'}`"
                   emit-value
                   map-options
                   option-label="name"
-                  :options="positionLineOptions"
-                  option-value="id"
+                  :options="posTypeOptions"
+                  option-value="name"
+                  hide-bottom-space
+                  use-input
+                  input-debounce="0"
+                  @update:model-value="updateSelectType"
+                  :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
+                  @filter="(inputValue: any,
+                      doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
+                      )"
+                />
+              </div>
+
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-select
+                  ref="positionLevel Ref"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.positionLevel"
+                  :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
+                  :label="`${'ระดับตำแหน่ง'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="posLevelOption"
+                  option-value="name"
                   hide-bottom-space
                   use-input
                   input-debounce="0"
                   @filter="(inputValue: any,
-                        doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
                         )"
-                /> -->
-                </div>
+                />
+              </div>
+              <div class="col-md-4"></div>
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  ref="salaryRef"
+                  dense
+                  outlined
+                  v-model="formDataSalary.salary"
+                  label="เงินเดือน"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
 
-                <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="formDataSalary.positionPathSide"
-                    hide-bottom-space
-                    :label="`${'ด้าน/สาขา'}`"
-                  />
-                </div>
-                <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    borderless
-                    v-model="formDataSalary.positionExecutive"
-                    hide-bottom-space
-                    :label="`${'ตำแหน่งทางการบริหาร'}`"
-                  >
-                  </q-input>
-                </div>
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  ref="amountRef"
+                  dense
+                  outlined
+                  v-model="formDataSalary.salaryPos"
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                  ]"
+                  label="เงินประจำตำแหน่ง"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-4">
+                <q-input
+                  ref="amountRef"
+                  dense
+                  outlined
+                  v-model="formDataSalary.salaryCompensation"
+                  label="เงินค่าตอบแทนรายเดือน"
+                  mask="###,###,###,###"
+                  reverse-fill-mask
+                  lazy-rules
+                  hide-bottom-space
+                />
+              </div>
 
-                <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-select
-                    ref="positionType Ref"
-                    outlined
-                    dense
-                    lazy-rules
-                    borderless
-                    v-model="formDataSalary.positionType"
-                    :label="`${'ตำแหน่งประเภท'}`"
-                    emit-value
-                    map-options
-                    option-label="name"
-                    :options="posTypeOptions"
-                    option-value="name"
-                    hide-bottom-space
-                    use-input
-                    input-debounce="0"
-                    @update:model-value="updateSelectType"
-                    :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
-                    @filter="(inputValue: any,
-                        doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
+              <div class="col-xs-6 col-sm-6 col-md-12">
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.refCommandNo"
+                  hide-bottom-space
+                  :label="`${'เลขที่คำสั่ง'}`"
+                  mask="#####################"
+                >
+                  <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
+                </q-input>
+              </div>
+
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-select
+                  ref="templateDocRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  clearable
+                  v-model="formDataSalary.templateDoc"
+                  :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                  option-label="name"
+                  :options="docOption"
+                  option-value="name"
+                  emit-value
+                  hide-bottom-space
+                  use-input
+                  input-debounce="0"
+                  @update:modelValue="updateDoc"
+                  @filter="(inputValue: any,
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
                         )"
-                  />
-                </div>
+                />
+              </div>
 
-                <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-select
-                    ref="positionLevel Ref"
-                    outlined
-                    dense
-                    lazy-rules
-                    borderless
-                    v-model="formDataSalary.positionLevel"
-                    :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
-                    :label="`${'ระดับตำแหน่ง'}`"
-                    emit-value
-                    map-options
-                    option-label="name"
-                    :options="posLevelOption"
-                    option-value="name"
-                    hide-bottom-space
-                    use-input
-                    input-debounce="0"
-                    @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
-                          )"
-                  />
-                </div>
-                <div class="col-md-4"></div>
-                <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-input
-                    ref="salaryRef"
-                    dense
-                    outlined
-                    v-model="formDataSalary.salary"
-                    label="เงินเดือน"
-                    mask="###,###,###,###"
-                    reverse-fill-mask
-                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                    lazy-rules
-                    hide-bottom-space
-                  />
-                </div>
-
-                <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-input
-                    ref="amountRef"
-                    dense
-                    outlined
-                    v-model="formDataSalary.salaryPos"
-                    :rules="[
-                      (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                    ]"
-                    label="เงินประจำตำแหน่ง"
-                    mask="###,###,###,###"
-                    reverse-fill-mask
-                    lazy-rules
-                    hide-bottom-space
-                  />
-                </div>
-                <div class="col-xs-6 col-sm-6 col-md-4">
-                  <q-input
-                    ref="amountRef"
-                    dense
-                    outlined
-                    v-model="formDataSalary.salaryCompensation"
-                    label="เงินค่าตอบแทนรายเดือน"
-                    mask="###,###,###,###"
-                    reverse-fill-mask
-                    lazy-rules
-                    hide-bottom-space
-                  />
-                </div>
-
-                <div class="col-xs-6 col-sm-6 col-md-12">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    borderless
-                    v-model="formDataSalary.refCommandNo"
-                    hide-bottom-space
-                    :label="`${'เลขที่คำสั่ง'}`"
-                    mask="#####################"
-                  >
-                    <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
-                  </q-input>
-                </div>
-
-                <div class="col-xs-12 col-sm-12 col-md-12">
-                  <q-select
-                    ref="templateDocRef"
-                    outlined
-                    dense
-                    lazy-rules
-                    borderless
-                    clearable
-                    v-model="formDataSalary.templateDoc"
-                    :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
-                    option-label="name"
-                    :options="docOption"
-                    option-value="name"
-                    emit-value
-                    hide-bottom-space
-                    use-input
-                    input-debounce="0"
-                    @update:modelValue="updateDoc"
-                    @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
-                          )"
-                  />
-                </div>
-
-                <div class="col-xs-12 col-sm-12 col-md-12">
-                  <q-input
-                    ref="docRef"
-                    outlined
-                    dense
-                    lazy-rules
-                    borderless
-                    v-model="formDataSalary.doc"
-                    :label="`${'เอกสารอ้างอิง'}`"
-                    type="textarea"
-                    hide-bottom-space
-                    :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
-                  />
-                </div>
-              </q-card>
-            </div>
-          </q-page>
-        </q-page-container>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  ref="docRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formDataSalary.doc"
+                  :label="`${'เอกสารอ้างอิง'}`"
+                  type="textarea"
+                  hide-bottom-space
+                  :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                />
+              </div>
+          </div>
+        </q-card-section>
         <q-separator />
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" />
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
index ff4c5d781..2336e371e 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
@@ -248,94 +248,81 @@ watch(
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <DialogHeader
-            :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
-            :close="closeDialog"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
-
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <q-toolbar style="padding: 0px" class="text-primary">
-            <q-space />
-            <q-input
-              dense
-              outlined
-              v-model="keyword"
-              label="ค้นหา"
-              class="q-mr-sm"
-            >
-              <template v-slot:append>
-                <q-icon v-if="keyword === ''" name="search" />
-                <q-icon
-                  v-else
-                  name="clear"
-                  class="cursor-pointer"
-                  @click="keyword = ''"
-                />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="visibleColumns"
-              multiple
-              outlined
-              dense
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </q-toolbar>
-
-          <d-table
-            ref="table"
-            row-key="id"
-            flat
-            bordered
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
+        :close="closeDialog"
+      />
+      <q-separator color="grey-4" />
+      <q-card-section style="max-height: 60vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
             dense
-            :filter="keyword"
-            :columns="columns"
-            :rows="rows"
-            :paging="true"
-            v-model:pagination="pagination"
-            :rows-per-page-options="[10, 20, 50, 100]"
-            :visible-columns="visibleColumns"
+            outlined
+            v-model="keyword"
+            label="ค้นหา"
+            class="q-mr-sm"
           >
-            <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-tr>
+            <template v-slot:append>
+              <q-icon v-if="keyword === ''" name="search" />
+              <q-icon
+                v-else
+                name="clear"
+                class="cursor-pointer"
+                @click="keyword = ''"
+              />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols">
-                  <div class="table_ellipsis">
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          row-key="id"
+          flat
+          bordered
+          dense
+          :filter="keyword"
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          v-model:pagination="pagination"
+          :rows-per-page-options="[10, 20, 50, 100]"
+          :visible-columns="visibleColumns"
+        >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols">
+                <div class="table_ellipsis">
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
index f9747afc4..088afc793 100644
--- a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
@@ -223,8 +223,8 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="row items-center q-gutter-x-sm q-py-sm">
-    <q-btn color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn dense color="teal-5" icon="add" flat round @click="onClickOpenDialog()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -416,185 +416,165 @@ onMounted(() => {
   </d-table>
 
   <q-dialog v-model="modalDialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 300px; min-width: 80%"
-      class="bg-white"
-    >
+    <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader
-              :tittle="
-                isStatusEdit
-                  ? 'แก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'
-                  : 'เพิ่มบันทึกวันที่ไม่ได้รับเงินเดือนฯ'
-              "
-              :close="onClickCloseDialog"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
-
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="row col-12 q-col-gutter-sm">
-              <div class="col-xs-12 col-sm-12">
-                <q-card flat bordered class="fit q-pa-sm">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        v-model="formData.date"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        week-start="0"
+        <DialogHeader
+          :tittle="
+            isStatusEdit
+              ? 'แก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'
+              : 'เพิ่มบันทึกวันที่ไม่ได้รับเงินเดือนฯ'
+          "
+          :close="onClickCloseDialog"
+        />
+        <q-separator color="grey-4" />
+        
+        <q-card-section style="max-height: 55vh" class="scroll">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    ref="dateRef"
+                    outlined
+                    dense
+                    borderless
+                    class="inputgreen"
+                    :model-value="date2Thai(formData.date)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วัน/เดือน/ปี'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
                       >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            ref="dateRef"
-                            outlined
-                            dense
-                            borderless
-                            class="inputgreen"
-                            :model-value="date2Thai(formData.date)"
-                            :rules="[
-                              (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`,
-                            ]"
-                            hide-bottom-space
-                            :label="`${'วัน/เดือน/ปี'}`"
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                style="color: var(--q-primary)"
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <div class="col-6">
-                      <q-input
-                        ref="referenceRef"
-                        outlined
-                        dense
-                        autogrow
-                        lazy-rules
-                        borderless
-                        v-model="formData.reference"
-                        class="inputgreen"
-                        :rules="[
-                          (val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
-                        ]"
-                        hide-bottom-space
-                        :label="`${'เอกสารอ้างอิง'}`"
-                      />
-                    </div>
-                    <div class="col-12">
-                      <q-input
-                        ref="detailRef"
-                        outlined
-                        dense
-                        autogrow
-                        lazy-rules
-                        borderless
-                        v-model="formData.detail"
-                        class="inputgreen"
-                        :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                        hide-bottom-space
-                        :label="`${'รายละเอียด'}`"
-                      />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        outlined
-                        dense
-                        lazy-rules
-                        borderless
-                        v-model="formData.refCommandNo"
-                        class="inputgreen"
-                        hide-bottom-space
-                        :label="`${'เลขที่คำสั่ง'}`"
-                      >
-                        <template v-slot:append>
-                          <q-icon name="mdi-file" class="cursor-pointer" />
-                        </template>
-                      </q-input>
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        v-model="formData.refCommandDate"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            clearable
-                            outlined
-                            dense
-                            borderless
-                            class="inputgreen"
-                            :model-value="
-                        formData.refCommandDate == null ? null : date2Thai(formData.refCommandDate as Date)
-                        "
-                            hide-bottom-space
-                            :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                            @clear="formData.refCommandDate = null"
-                          >
-                            <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>
-                </q-card>
-              </div>
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
             </div>
-          </q-page>
-        </q-page-container>
+            <div class="col-6">
+              <q-input
+                ref="referenceRef"
+                outlined
+                dense
+                autogrow
+                lazy-rules
+                borderless
+                v-model="formData.reference"
+                class="inputgreen"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'เอกสารอ้างอิง'}`"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                ref="detailRef"
+                outlined
+                dense
+                autogrow
+                lazy-rules
+                borderless
+                v-model="formData.detail"
+                class="inputgreen"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.refCommandNo"
+                class="inputgreen"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+              >
+                <template v-slot:append>
+                  <q-icon name="mdi-file" class="cursor-pointer" />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    clearable
+                    outlined
+                    dense
+                    borderless
+                    class="inputgreen"
+                    :model-value="
+                formData.refCommandDate == null ? null : date2Thai(formData.refCommandDate as Date)
+                "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                    @clear="formData.refCommandDate = null"
+                  >
+                    <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>
+        </q-card-section>
         <q-separator />
 
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-              class="q-px-md"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </q-footer>
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <DialogHisotory v-model:modal="modalHistory" v-model:id="id" />
diff --git a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
index 641e54b1c..3c7a45743 100644
--- a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
@@ -144,87 +144,76 @@ watch(modal, (status) => {
 </script>
 <template>
   <q-dialog v-model="modal" persistent full-width>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <DialogHeader
-            :tittle="'ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'"
-            :close="closeDialog"
-          />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
+    <q-card style="min-width: 80%"> 
+      <DialogHeader
+        :tittle="'ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'"
+        :close="closeDialog"
+      />
+      <q-separator color="grey-4" />
 
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-            <q-space />
-            <q-input
-              dense
-              outlined
-              v-model="filter"
-              label="ค้นหา"
-              class="q-mr-sm"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="visibleColumns"
-              multiple
-              outlined
-              dense
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </q-toolbar>
-          <d-table
-            ref="table"
-            row-key="id"
-            flat
-            bordered
+      <q-card-section style="max-height: 60vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
             dense
-            :filter="filter"
-            :columns="columns"
-            :rows="rows"
-            :paging="true"
-            v-model:pagination="pagination"
-            :rows-per-page-options="[20, 50, 100]"
-            :visible-columns="visibleColumns"
+            outlined
+            v-model="filter"
+            label="ค้นหา"
+            class="q-mr-sm"
           >
-            <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-tr>
+            <template v-slot:append>
+              <q-icon name="search" />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div class="table_ellipsis">
-                    {{ col.value ? col.value : "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          row-key="id"
+          flat
+          bordered
+          dense
+          :filter="filter"
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          v-model:pagination="pagination"
+          :rows-per-page-options="[20, 50, 100]"
+          :visible-columns="visibleColumns"
+        >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div class="table_ellipsis">
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
   </q-dialog>
 </template>