From 07474e873dfd40ad545995eec0766126ff610e82 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Tue, 2 Apr 2024 15:07:35 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=81=E0=B8=97=E0=B9=87=E0=B8=9A=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=9C=E0=B8=A5=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Achievement/01_ProfessionalLicense.vue    | 457 +++++-----
 .../detail/Achievement/02_Train.vue           | 843 +++++++++---------
 .../detail/Achievement/03_Insignia.vue        | 816 ++++++++---------
 .../Achievement/04_DeclarationHonor.vue       | 475 +++++-----
 .../Achievement/05_ResultsPerformance.vue     | 603 +++++++------
 5 files changed, 1644 insertions(+), 1550 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 34ea0f55f..c61c10654 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -9,11 +9,9 @@ import type { RequestItemsObject } from "@/modules/04_registryNew/interface/requ
 import type { ResponseObject } from "@/modules/04_registryNew/interface/response/ProfesLicense";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { log } from "console";
 const mixin = useCounterMixin();
 const $q = useQuasar();
 const {
-  dialogRemove,
   dialogConfirm,
   showLoader,
   hideLoader,
@@ -192,6 +190,11 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const visibleColumns = ref<string[]>([
   "certificateType",
   "issuer",
@@ -432,7 +435,7 @@ onMounted(async () => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="col in props.cols" :key="col.id">
           <div>
-            {{ col.value }}
+            {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
         <q-td auto-width>
@@ -533,239 +536,267 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 40%" class="bg-white">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh"
+      class="bg-white"
+    >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-        <q-separator color="grey-4" />
-        <div class="row q-gutter-sm q-px-md q-pb-sm q-mt-sm">
-          <div class="col">
-            <q-input
-              outlined
-              v-model="profesLicenseData.certificateType"
-              label="ชื่อใบอนุญาต"
-              bg-color="white"
-              dense
-              class="inputgreen"
-              :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
-              hide-bottom-space
+        <q-header>
+          <q-toolbar>
+            <dialog-header
+              :tittle="
+                dialogStatus == 'edit'
+                  ? 'แก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ'
+                  : 'เพิ่มข้อมูลใบอนุญาตประกอบวิชาชีพ'
+              "
+              :close="closeDialog"
             />
-          </div>
-          <div class="col">
-            <q-input
-              outlined
-              v-model="profesLicenseData.issuer"
-              label="หน่วยงานผู้ออกใบอนุญาต"
-              bg-color="white"
-              dense
-              class="inputgreen"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
-              ]"
-              hide-bottom-space
-            />
-          </div>
-        </div>
-        <div class="row q-gutter-sm q-px-md q-pb-sm">
-          <div class="col">
-            <q-input
-              outlined
-              v-model="profesLicenseData.certificateNo"
-              label="เลขที่ใบอนุญาต"
-              bg-color="white"
-              class="inputgreen"
-              dense
-              :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
-              hide-bottom-space
-            />
-          </div>
-          <div class="col">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="profesLicenseData.issueDate"
-              :locale="'th'"
-              autoApply
-              class="col"
-              :enableTimePicker="false"
-              @update:modelValue="profesLicenseData.issueDate"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
+
+        <q-page-container>
+          <q-page>
+            <div class="row q-gutter-sm q-px-md q-pb-sm q-mt-sm">
+              <div class="col">
                 <q-input
-                  dense
-                  lazy-rules
-                  class="inputgreen"
                   outlined
+                  v-model="profesLicenseData.certificateType"
+                  label="ชื่อใบอนุญาต"
                   bg-color="white"
+                  dense
+                  class="inputgreen"
+                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
                   hide-bottom-space
-                  :model-value="
-                    profesLicenseData.issueDate
-                      ? date2Thai(profesLicenseData.issueDate)
-                      : ''
-                  "
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  outlined
+                  v-model="profesLicenseData.issuer"
+                  label="หน่วยงานผู้ออกใบอนุญาต"
+                  bg-color="white"
+                  dense
+                  class="inputgreen"
                   :rules="[
-                    (val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
+                    (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-gutter-sm q-px-md q-pb-sm">
-          <div class="col">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="profesLicenseData.expireDate"
-              :locale="'th'"
-              autoApply
-              :enableTimePicker="false"
-              @update:modelValue="profesLicenseData.expireDate"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
+                  hide-bottom-space
+                />
+              </div>
+            </div>
+            <div class="row q-gutter-sm q-px-md q-pb-sm">
+              <div class="col">
                 <q-input
-                  dense
                   outlined
+                  v-model="profesLicenseData.certificateNo"
+                  label="เลขที่ใบอนุญาต"
                   bg-color="white"
                   class="inputgreen"
-                  clearable
-                  @clear="() => (profesLicenseData.expireDate = null)"
+                  dense
+                  :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
                   hide-bottom-space
-                  :model-value="
-                    profesLicenseData.expireDate
-                      ? date2Thai(profesLicenseData.expireDate)
-                      : ''
-                  "
-                  :label="`${'วันที่หมดอายุ'}`"
+                />
+              </div>
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="profesLicenseData.issueDate"
+                  :locale="'th'"
+                  autoApply
+                  class="col"
+                  :enableTimePicker="false"
+                  @update:modelValue="profesLicenseData.issueDate"
+                >
+                  <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
+                      bg-color="white"
+                      hide-bottom-space
+                      :model-value="
+                        profesLicenseData.issueDate
+                          ? date2Thai(profesLicenseData.issueDate)
+                          : ''
+                      "
+                      :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-gutter-sm q-px-md q-pb-sm">
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="profesLicenseData.expireDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
                   @update:modelValue="profesLicenseData.expireDate"
                 >
-                  <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
+                      dense
+                      outlined
+                      bg-color="white"
+                      class="inputgreen"
+                      clearable
+                      @clear="() => (profesLicenseData.expireDate = null)"
+                      hide-bottom-space
+                      :model-value="
+                        profesLicenseData.expireDate
+                          ? date2Thai(profesLicenseData.expireDate)
+                          : ''
+                      "
+                      :label="`${'วันที่หมดอายุ'}`"
+                      @update:modelValue="profesLicenseData.expireDate = null"
                     >
-                    </q-icon>
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
                   </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col"></div>
-        </div>
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
+                </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-form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-card style="min-width: 70%" class="bg-white">
-      <q-card-section class="flex justify-between" style="padding: 0">
-        <dialog-header
-          tittle="ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ"
-          :close="closeHistoryDialog"
-        />
-      </q-card-section>
-      <q-separator color="grey-4" />
-      <q-card-section>
-        <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-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <dialog-header
+            tittle="ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ"
+            :close="closeHistoryDialog"
           />
         </q-toolbar>
-        <d-table
-          ref="table"
-          :columns="historyColumns"
-          :rows="historyRows"
-          row-key="name"
-          flat
-          :filter="historyKeyword"
-          v-model:pagination="pagination"
-          bordered
-          :paging="true"
-          dense
-          :rows-per-page-options="[20, 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-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"
+            dense
+            :rows-per-page-options="[20, 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-page>
+      </q-page-container>
+    </q-layout>
   </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 60287a1ac..d94ae0328 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
@@ -81,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
     label: "ปีที่อบรม (พ.ศ.)",
     sortable: true,
     field: "yearly",
-    format: (v) => v + 543,
+    format: (v) => (v !== null ? v + 543 : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -199,7 +199,7 @@ const historyColumns = ref<QTableProps["columns"]>([
     label: "ปีที่อบรม (พ.ศ.)",
     sortable: true,
     field: "yearly",
-    format: (v) => v + 543,
+    format: (v) => (v !== null ? v + 543 : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -313,6 +313,11 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const rows = ref<ResponseObject[]>([]);
 const historyRows = ref<ResponseObject[]>([]);
 
@@ -321,7 +326,7 @@ const visibleColumns = ref<string[]>([
   "topic", // หัวข้อ
   "yearly", // ปีที่อบรม
   "place", // สถานที่
-  "duration", // รวมระยะวเลา
+  "duration", // รวมระยะเวลา
   "department", // หน่วยงานที่รับผิดชอบ
   "numberOrder", // เลขที่คำสั่ง
   "dateOrder", // คำสั่งลงวันที่
@@ -334,7 +339,7 @@ const historyVisibleColumns = ref<string[]>([
   "topic", // หัวข้อ
   "yearly", // ปีที่อบรม
   "place", // สถานที่
-  "duration", // รวมระยะวเลา
+  "duration", // รวมระยะเวลา
   "department", // หน่วยงานที่รับผิดชอบ
   "numberOrder", // เลขที่คำสั่ง
   "dateOrder", // คำสั่งลงวันที่
@@ -625,19 +630,6 @@ onMounted(async () => {
           >
             <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
           </q-btn>
-          <q-btn
-            color="red"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-delete"
-            clickable
-            @click.stop="deleteData(props.row.id)"
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
         </q-td>
       </q-tr>
     </template>
@@ -693,131 +685,280 @@ onMounted(async () => {
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 40%" class="bg-white">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh"
+      class="bg-white"
+    >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-        <q-separator color="grey-4" />
-        <div class="col">
-          <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>
-          </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">
+        <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">
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="trainData.startYear"
-                  :locale="'th'"
-                  autoApply
-                  year-picker
-                  :enableTimePicker="false"
-                  @update:modelValue="
+                <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>
+            </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="
+                  >
+                    <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">
+                <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 }">{{
@@ -827,15 +968,16 @@ onMounted(async () => {
                     <q-input
                       dense
                       lazy-rules
-                      class="inputgreen"
                       outlined
+                      class="inputgreen"
+                      clearable
+                      @clear="() => (trainData.yearly = null)"
                       hide-bottom-space
-                      :model-value="trainData.finishYear + 543"
-                      :rules="[
-                        (val) =>
-                          !!val || `${'กรุณาเลือกปีที่จบการฝึกอบรม/ดูงาน'}`,
-                      ]"
-                      :label="`${'ปีที่จบการฝึกอบรม/ดูงาน'}`"
+                      :model-value="
+                        !!trainData.yearly ? trainData.yearly + 543 : null
+                      "
+                      :label="`${'ปีงบประมาณ'}`"
+                      @update:modelValue="trainData.yearly = null"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -849,68 +991,62 @@ onMounted(async () => {
                   </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>
+                <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-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 class="col">
                 <datepicker
                   menu-class-name="modalfix"
-                  v-model="trainData.endDate"
+                  v-model="trainData.dateOrder"
                   :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 }">{{
@@ -920,15 +1056,14 @@ onMounted(async () => {
                     <q-input
                       outlined
                       dense
-                      lazy-rules
                       class="inputgreen"
-                      :model-value="date2Thai(trainData.endDate)"
-                      :rules="[
-                        (val) =>
-                          !!val || `${'กรุณาเลือกวันที่จบการฝึกอบรม/ดูงาน'}`,
-                      ]"
+                      lazy-rules
+                      clearable
+                      @clear="() => (trainData.dateOrder = null)"
+                      @update:modelValue="trainData.dateOrder = null"
+                      :model-value="date2Thai(trainData.dateOrder)"
                       hide-bottom-space
-                      :label="`${'วันที่จบการฝึกอบรม/ดูงาน'}`"
+                      :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -943,224 +1078,114 @@ onMounted(async () => {
                 </datepicker>
               </div>
             </div>
-          </q-card>
-          <div class="row q-px-md 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"
-                    hide-bottom-space
-                    :model-value="
-                      !!trainData.yearly ? trainData.yearly + 543 : null
-                    "
-                    :label="`${'ปีงบประมาณ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col">
-              <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-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 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
-                    :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>
-        </div>
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
+          </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-form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-card style="min-width: 70%" class="bg-white">
-      <q-card-section class="flex justify-between" style="padding: 0">
-        <dialog-header
-          tittle="ประวัติแก้ไขการฝึกอบรม/ดูงาน"
-          :close="closeHistoryDialog"
-        />
-      </q-card-section>
-      <q-separator color="grey-4" />
-      <q-card-section>
-        <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-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <dialog-header
+            tittle="ประวัติแก้ไขการฝึกอบรม/ดูงาน"
+            :close="closeHistoryDialog"
           />
         </q-toolbar>
-        <d-table
-          ref="table"
-          :columns="historyColumns"
-          :rows="historyRows"
-          row-key="name"
-          flat
-          :filter="historyKeyword"
-          v-model:pagination="pagination"
-          bordered
-          :paging="true"
-          dense
-          :rows-per-page-options="[20, 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-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"
+            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-page>
+      </q-page-container>
+    </q-layout>
   </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 45224dd9e..232e064f8 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
@@ -52,10 +52,15 @@ const insigniaForm = reactive<RequestItemsObject>({
   note: "",
 });
 
-const currentPage = ref<number>(1);
-const maxPageHistory = ref<number>(1);
-const currentPageHistory = ref<number>(1);
-const maxPage = ref<number>(1);
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 const isEdit = ref<boolean>(false);
 const modal = ref<boolean>(false);
 const modeView = ref<string>("table");
@@ -678,6 +683,7 @@ onMounted(async () => {
     :paging="true"
     :columns="columns"
     :filter="filterSearch"
+    v-model:pagination="pagination"
     :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
     :rows-per-page-options="[20, 50, 100]"
@@ -778,429 +784,437 @@ onMounted(async () => {
         </q-card>
       </div>
     </template>
-    <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="currentPage"
-        active-color="primary"
-        color="dark"
-        :max="Number(maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template>
   </d-table>
 
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh"
+      class="bg-white"
+    >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader tittle="เครื่องราชอิสริยาภรณ์" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <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="[
+        <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="
+                      :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,
+                      :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="[
+                  @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="
+                    >
+                      <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>
+                      @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>
-            <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 />
-        <div class="text-right q-pa-sm">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </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-form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <q-dialog v-model="modalHistory" persistent>
-    <q-card style="min-width: 80%">
-      <q-card-section class="flex justify-between" style="padding: 0">
-        <DialogHeader
-          tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
-          :close="() => (modalHistory = false)"
-        />
-      </q-card-section>
-
-      <q-separator />
-      <q-card-section class="q-p-sm">
-        <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"
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <DialogHeader
+            tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
+            :close="() => (modalHistory = false)"
           />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          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>
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
 
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="currentPageHistory"
-              active-color="primary"
-              color="dark"
-              :max="Number(maxPageHistory)"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
+      <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"
+            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-page>
+      </q-page-container>
+    </q-layout>
   </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 8d6addcb4..14e5ea2e5 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
@@ -37,10 +37,6 @@ const declHonorForm = reactive<RequestItemsObject>({
   refCommandDate: null,
 });
 
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const currentPageHistory = ref<number>(1);
-const maxPageHistory = ref<number>(1);
 const isEdit = ref<boolean>(false);
 const modal = ref<boolean>(false);
 const modeView = ref<string>("table");
@@ -211,6 +207,16 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdatedAt",
 ]);
 
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
 async function fetchData() {
   if (!profileId.value) return;
 
@@ -308,10 +314,10 @@ function onSubmit() {
 
 function clearData() {
   id.value = "";
-  issueDateYear.value = 0;
+  issueDateYear.value = new Date().getFullYear();
   declHonorForm.issuer = "";
   declHonorForm.detail = "";
-  declHonorForm.issueDate = null;
+  declHonorForm.issueDate = new Date();
   declHonorForm.refCommandNo = "";
   declHonorForm.refCommandDate = null;
   declHonorForm.isDate = "false";
@@ -320,18 +326,6 @@ function clearData() {
 onMounted(async () => {
   await fetchData();
 });
-
-watch(
-  () => declHonorForm.isDate,
-  () => {
-    if (declHonorForm.isDate === "true") {
-      issueDateYear.value = 0;
-    }
-    if (declHonorForm.isDate === "false") {
-      declHonorForm.issueDate = null;
-    }
-  }
-);
 </script>
 <template>
   <div class="row items-center q-gutter-x-sm q-py-sm">
@@ -420,6 +414,7 @@ watch(
     :columns="columns"
     :filter="filterSearch"
     :grid="modeView === 'card'"
+    v-model:pagination="pagination"
     :visible-columns="visibleColumns"
     :rows-per-page-options="[20, 50, 100]"
     :card-container-class="modeView === 'card' ? 'q-col-gutter-md' : ''"
@@ -519,221 +514,244 @@ watch(
         </q-card>
       </div>
     </template>
-
-    <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="currentPage"
-        active-color="primary"
-        color="dark"
-        :max="Number(maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template>
   </d-table>
 
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh"
+      class="bg-white"
+    >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader tittle="ประกาศเกียรติคุณ" :close="clickClose" />
+        <q-header>
+          <q-toolbar>
+            <DialogHeader
+              :tittle="
+                isEdit
+                  ? 'แก้ไขข้อมูลประกาศเกียรติคุณ'
+                  : 'เพิ่มข้อมูลประกาศเกียรติคุณ'
+              "
+              :close="clickClose"
+            />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
+
         <q-separator />
-        <q-card-section class="q-p-sm">
-          <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"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="false"
-                label="ปี"
-                dense
-              />
-              <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"
-                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 ? issueDateYear + 543 : null"
-                    :rules="[
+        <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
-                week-start="0"
-                menu-class-name="modalfix"
-                v-model="declHonorForm.issueDate"
-                :locale="'th'"
-                :enableTimePicker="false"
-                v-else
-              >
-                <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 as Date)"
-                    :label="`${'วันที่ได้รับ'}`"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        color="primary"
-                      />
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+                      :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>
-            <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 />
-        <div class="text-right q-pa-sm">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </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-form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <q-dialog v-model="modalHistory" persistent>
@@ -796,6 +814,7 @@ watch(
           :columns="columnsHistory"
           :rows="rowsHistory"
           :paging="true"
+          v-model:pagination="historyPagination"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumnsHistory"
           :filter="filterHistory"
@@ -817,18 +836,6 @@ watch(
               </q-td>
             </q-tr>
           </template>
-
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="currentPageHistory"
-              active-color="primary"
-              color="dark"
-              :max="Number(maxPageHistory)"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
         </d-table>
       </q-card-section>
     </q-card>
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 0a4be22ad..1d31e2309 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
@@ -279,6 +279,16 @@ const visibleColumns = ref<String[]>([
   "date",
 ]);
 
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
 async function fetchData() {
   if (!profileId.value) return;
 
@@ -472,6 +482,7 @@ onMounted(async () => {
     :paging="true"
     :columns="columns"
     :filter="filterSearch"
+    v-model:pagination="pagination"
     :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
     :rows-per-page-options="[20, 50, 100]"
@@ -572,312 +583,318 @@ onMounted(async () => {
         </q-card>
       </div>
     </template>
-    <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="currentPage"
-        active-color="primary"
-        color="dark"
-        :max="Number(maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template>
   </d-table>
 
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh"
+      class="bg-white"
+    >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader
-          tittle="ผลการประเมินการปฏิบัติราชการ"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <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) }}
+        <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>
-              {{ textRangePoint(resPerformForm.pointSum) }}
             </div>
-          </div>
-        </q-card-section>
+          </q-page>
+        </q-page-container>
         <q-separator />
-        <div class="text-right q-pa-sm">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </div>
+        <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-form>
-    </q-card>
+    </q-layout>
   </q-dialog>
 
   <q-dialog v-model="modalHistory" persistent>
-    <q-card style="min-width: 80%">
-      <q-card-section class="flex justify-between" style="padding: 0">
-        <DialogHeader
-          tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
-          :close="() => (modalHistory = false)"
-        />
-      </q-card-section>
-
-      <q-separator />
-      <q-card-section class="q-p-sm">
-        <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"
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <DialogHeader
+            tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
+            :close="() => (modalHistory = false)"
           />
-        </div>
-        <d-table
-          ref="table"
-          flat
-          bordered
-          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>
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
 
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="currentPageHistory"
-              active-color="primary"
-              color="dark"
-              :max="Number(maxPageHistory)"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
+      <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
+            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-page>
+      </q-page-container>
+    </q-layout>
   </q-dialog>
 </template>