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

---
 .../02_NameChangeHistory.vue                  |  706 ++++----
 .../detail/PersonalInformation/03_Address.vue |  511 +++---
 .../detail/PersonalInformation/04_Family.vue  | 1553 +++++++++--------
 .../PersonalInformation/05_Education.vue      |  171 +-
 .../PersonalInformation/06_SpecialSkill.vue   |  327 ++--
 5 files changed, 1730 insertions(+), 1538 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 9c775b504..9f9e937d6 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, useAttrs, reactive } from "vue";
+import { onMounted, ref, useAttrs, reactive, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import axios from "axios";
@@ -27,7 +27,7 @@ const {
   hideLoader,
   dialogRemove,
 } = mixin;
-
+const submitDisable = ref<boolean>(true);
 const { fetchPerson } = store;
 const profileId = ref<string>(route.params.id.toString());
 const editId = ref<string>("");
@@ -47,6 +47,9 @@ const changeNameData = reactive<any>({
   status: "",
   documentId: "",
 });
+const prefixChange = ref<string>("");
+const firstNameChange = ref<string>("");
+const lastNameChange = ref<string>("");
 
 const profileInfo = ref<any>([]);
 
@@ -81,8 +84,8 @@ const historyVisibleColumns = ref<String[]>([
   "firstName",
   "lastName",
   "status",
-  "createdFullName",
-  "createdAt",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 const rows = ref<ResponseObject[]>([]);
 const historyRows = ref<ResponseObject[]>([]);
@@ -179,22 +182,22 @@ const historyColumns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "createdAt",
+    field: "lastUpdatedAt",
     format: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -213,13 +216,23 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
 function editForm(row: any) {
+  submitDisable.value = true;
   dialogStatus.value = "edit";
   editId.value = row.id;
+  subId.value = row.id;
   changeNameData.prefix = row.prefix;
   changeNameData.firstName = row.firstName;
   changeNameData.lastName = row.lastName;
   changeNameData.status = row.status;
+  prefixChange.value = changeNameData.prefix;
+  firstNameChange.value = changeNameData.firstName;
+  lastNameChange.value = changeNameData.lastName;
   dialog.value = true;
 }
 
@@ -229,7 +242,7 @@ function closeDialog() {
 }
 
 async function onSubmit() {
-  if (!!fileUpload.value) {
+  if (!!fileUpload.value || dialogStatus.value === "edit") {
     await dialogConfirm(
       $q,
       async () => {
@@ -238,7 +251,9 @@ async function onSubmit() {
           ? await addData()
           : await editData(editId.value);
         closeDialog();
-        await uploadProfile(fileUpload.value);
+        if (!!fileUpload.value) {
+          await uploadProfile(fileUpload.value);
+        }
       },
       "ยืนยันการบันทึกข้อมูล",
       "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -287,6 +302,7 @@ async function uploadFileURL(uploadUrl: string, file: any) {
     .then(() => {
       // fetchProfile(profileId.value);
       // success($q, "อัปโหลดไฟล์สำเร็จ");
+      fileUpload.value = undefined;
     })
     .catch((err) => {
       messageError($q, err);
@@ -486,6 +502,39 @@ function filterSelector(val: string, update: Function, refData: string) {
       break;
   }
 }
+
+watch(
+  () => changeNameData.prefix,
+  () => {
+    if (changeNameData.prefix !== prefixChange.value) {
+      submitDisable.value = false;
+    } else {
+      submitDisable.value = true;
+    }
+  }
+);
+
+watch(
+  () => changeNameData.firstName,
+  () => {
+    if (changeNameData.firstName !== firstNameChange.value) {
+      submitDisable.value = false;
+    } else {
+      submitDisable.value = true;
+    }
+  }
+);
+
+watch(
+  () => changeNameData.lastName,
+  () => {
+    if (changeNameData.lastName !== lastNameChange.value) {
+      submitDisable.value = false;
+    } else {
+      submitDisable.value = true;
+    }
+  }
+);
 </script>
 
 <template>
@@ -500,8 +549,12 @@ function filterSelector(val: string, update: Function, refData: string) {
           changeNameData.prefix = profileInfo.prefix;
           changeNameData.firstName = profileInfo.firstName;
           changeNameData.lastName = profileInfo.lastName;
+          prefixChange = changeNameData.prefix;
+          firstNameChange = changeNameData.firstName;
+          lastNameChange = changeNameData.lastName;
           changeNameData.status = '';
           dialogStatus = 'create';
+          submitDisable = true;
           dialog = true;
         }
       "
@@ -545,13 +598,12 @@ function filterSelector(val: string, update: Function, refData: string) {
     virtual-scroll
     ref="table"
     v-bind="attrs"
+    v-model:pagination="pagination"
     :rows="rows"
     :columns="columns"
     :filter="filterSearch"
     :rows-per-page-options="[0]"
-    :pagination="initialPagination"
     :visible-columns="visibleColumns"
-    :pagination-label="paginationLabel"
     :virtual-scroll-sticky-size-start="48"
   >
     <template v-slot:header="props">
@@ -630,325 +682,351 @@ function filterSelector(val: string, update: Function, refData: string) {
     </template>
   </d-table>
 
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 50%" class="bg-white">
+  <q-dialog v-model="dialog" persistent>
+    <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="q-pa-md">
-          <div class="row q-mb-md">
-            <div class="col-5">
-              <q-select
-                outlined
-                v-model="changeNameData.status"
-                :options="statusOption"
-                label="สถานะการเปลี่ยนชื่อ"
-                use-input
-                input-debounce="0"
-                :rules="[
-                  (val) => !!val || `${'กรุณาเลือกสถานะการเปลี่ยนชื่อ'}`,
-                ]"
-                @filter="(inputValue:string,
+        <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 class="q-pa-md">
+            <div class="row q-mb-sm">
+              <div class="col-5">
+                <q-select
+                  outlined
+                  v-model="changeNameData.status"
+                  :options="statusOption"
+                  label="สถานะการเปลี่ยนชื่อ"
+                  use-input
+                  hide-bottom-space
+                  input-debounce="0"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกสถานะการเปลี่ยนชื่อ'}`,
+                  ]"
+                  @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
                       ) "
-                dense
-              />
+                  dense
+                />
+              </div>
             </div>
-          </div>
-          <div class="row q-gutter-md q-mb-md">
-            <div class="col">
-              <q-select
-                :readonly="
-                  !changeNameData.status ||
-                  (changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
-                    changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
-                    changeNameData.status !==
-                      'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
-                    changeNameData.status !==
-                      'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
-                "
-                v-model="changeNameData.prefix"
-                :options="store.Ops.prefixOps"
-                label="คำนำหน้าชื่อ"
-                dense
-                :class="
-                  !changeNameData.status ||
-                  (changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
-                    changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
-                    changeNameData.status !==
-                      'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
-                    changeNameData.status !==
-                      'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
-                    ? ''
-                    : 'inputgreen'
-                "
-                outlined
-                use-input
-                lazy-rules
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกคำนำหน้าชื่อ'}`]"
-                hide-bottom-space
-                input-debounce="0"
-                option-label="name"
-                option-value="name"
-                @filter="(inputValue:string,
+            <div class="row q-gutter-sm q-mb-md">
+              <div class="col">
+                <q-select
+                  :readonly="
+                    !changeNameData.status ||
+                    (changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
+                      changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
+                      changeNameData.status !==
+                        'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
+                      changeNameData.status !==
+                        'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
+                  "
+                  v-model="changeNameData.prefix"
+                  :options="store.Ops.prefixOps"
+                  label="คำนำหน้าชื่อ"
+                  dense
+                  :class="
+                    !changeNameData.status ||
+                    (changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
+                      changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
+                      changeNameData.status !==
+                        'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
+                      changeNameData.status !==
+                        'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
+                      ? ''
+                      : 'inputgreen'
+                  "
+                  outlined
+                  use-input
+                  lazy-rules
+                  emit-value
+                  map-options
+                  :rules="[(val) => !!val || `${'กรุณาเลือกคำนำหน้าชื่อ'}`]"
+                  hide-bottom-space
+                  input-debounce="0"
+                  option-label="name"
+                  option-value="name"
+                  @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
                       ) "
-              />
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :readonly="
+                    !changeNameData.status ||
+                    (changeNameData.status !== 'เปลี่ยนชื่อ' &&
+                      changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
+                      changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
+                      changeNameData.status !==
+                        'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
+                  "
+                  outlined
+                  v-model="changeNameData.firstName"
+                  label="ชื่อ"
+                  bg-color="white"
+                  dense
+                  :class="
+                    !changeNameData.status ||
+                    (changeNameData.status !== 'เปลี่ยนชื่อ' &&
+                      changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
+                      changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
+                      changeNameData.status !==
+                        'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
+                      ? ''
+                      : 'inputgreen'
+                  "
+                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
+                  hide-bottom-space
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :readonly="
+                    !changeNameData.status ||
+                    (changeNameData.status !== 'เปลี่ยนนามสกุล' &&
+                      changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
+                      changeNameData.status !==
+                        'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
+                      changeNameData.status !==
+                        'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
+                  "
+                  outlined
+                  v-model="changeNameData.lastName"
+                  label="นามสกุล"
+                  bg-color="white"
+                  dense
+                  :class="
+                    !changeNameData.status ||
+                    (changeNameData.status !== 'เปลี่ยนนามสกุล' &&
+                      changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
+                      changeNameData.status !==
+                        'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
+                      changeNameData.status !==
+                        'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
+                      ? ''
+                      : 'inputgreen'
+                  "
+                  :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+                  hide-bottom-space
+                />
+              </div>
             </div>
-            <div class="col">
-              <q-input
-                :readonly="
-                  !changeNameData.status ||
-                  (changeNameData.status !== 'เปลี่ยนชื่อ' &&
-                    changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
-                    changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
-                    changeNameData.status !==
-                      'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
-                "
-                outlined
-                v-model="changeNameData.firstName"
-                label="ชื่อ"
-                bg-color="white"
-                dense
-                :class="
-                  !changeNameData.status ||
-                  (changeNameData.status !== 'เปลี่ยนชื่อ' &&
-                    changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
-                    changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
-                    changeNameData.status !==
-                      'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
-                    ? ''
-                    : 'inputgreen'
-                "
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col">
-              <q-input
-                :readonly="
-                  !changeNameData.status ||
-                  (changeNameData.status !== 'เปลี่ยนนามสกุล' &&
-                    changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
-                    changeNameData.status !==
-                      'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
-                    changeNameData.status !==
-                      'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
-                "
-                outlined
-                v-model="changeNameData.lastName"
-                label="นามสกุล"
-                bg-color="white"
-                dense
-                :class="
-                  !changeNameData.status ||
-                  (changeNameData.status !== 'เปลี่ยนนามสกุล' &&
-                    changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
-                    changeNameData.status !==
-                      'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
-                    changeNameData.status !==
-                      'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
-                    ? ''
-                    : 'inputgreen'
-                "
-                :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
-                hide-bottom-space
-              />
-            </div>
-          </div>
-          <div class="row">
-            <q-uploader
-              color="gray"
-              type="file"
-              flat
-              ref="uploader"
-              class="full-width"
-              text-color="white"
-              :max-size="10000000"
-              accept=".jpg,.png,.pdf,.csv,.doc,.docx"
-              bordered
-              label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
-              @added="(v) => (fileUpload = v[0])"
-            >
-              <template v-slot:header="scope">
-                <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
-                  <q-btn
-                    v-if="scope.queuedFiles.length > 0"
-                    icon="clear_all"
-                    @click="scope.removeQueuedFiles"
-                    round
-                    dense
-                    flat
-                  >
-                    <q-tooltip>ลบทั้งหมด</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    v-if="scope.uploadedFiles.length > 0"
-                    icon="done_all"
-                    @click="scope.removeUploadedFiles"
-                    round
-                    dense
-                    flat
-                  >
-                    <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
-                  </q-btn>
-                  <q-spinner
-                    v-if="scope.isUploading"
-                    class="q-uploader__spinner"
-                  />
-                  <div class="col">
-                    <div class="q-uploader__title">
-                      {{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
-                    </div>
-                    <div class="q-uploader__subtitle">
-                      {{ scope.uploadSizeLabel }} /
-                      {{ scope.uploadProgressLabel }}
+            <div class="row">
+              <q-uploader
+                color="gray"
+                type="file"
+                flat
+                ref="uploader"
+                class="full-width"
+                text-color="white"
+                :max-size="10000000"
+                accept=".jpg,.png,.pdf,.csv,.doc,.docx"
+                bordered
+                label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]"
+                @added="(v) => (fileUpload = v[0])"
+              >
+                <template v-slot:header="scope">
+                  <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+                    <q-btn
+                      v-if="scope.queuedFiles.length > 0"
+                      icon="clear_all"
+                      @click="scope.removeQueuedFiles"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-tooltip>ลบทั้งหมด</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      v-if="scope.uploadedFiles.length > 0"
+                      icon="done_all"
+                      @click="scope.removeUploadedFiles"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                    </q-btn>
+                    <q-spinner
+                      v-if="scope.isUploading"
+                      class="q-uploader__spinner"
+                    />
+                    <div class="col">
+                      <div class="q-uploader__title">
+                        {{ "[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 10MB]" }}
+                      </div>
+                      <div class="q-uploader__subtitle">
+                        {{ scope.uploadSizeLabel }} /
+                        {{ scope.uploadProgressLabel }}
+                      </div>
                     </div>
+                    <q-btn
+                      v-if="scope.canAddFiles"
+                      type="a"
+                      icon="add_box"
+                      @click="scope.pickFiles"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-uploader-add-trigger />
+                      <q-tooltip>เลือกไฟล์</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      v-if="scope.isUploading"
+                      icon="clear"
+                      @click="scope.abort"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                    </q-btn>
                   </div>
-                  <q-btn
-                    v-if="scope.canAddFiles"
-                    type="a"
-                    icon="add_box"
-                    @click="scope.pickFiles"
-                    round
-                    dense
-                    flat
-                  >
-                    <q-uploader-add-trigger />
-                    <q-tooltip>เลือกไฟล์</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    v-if="scope.isUploading"
-                    icon="clear"
-                    @click="scope.abort"
-                    round
-                    dense
-                    flat
-                  >
-                    <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
-                  </q-btn>
-                </div>
-              </template>
-            </q-uploader>
-            <div
-              v-if="alertUpload"
-              class="row text-negative items-center q-mt-sm"
-            >
-              กรุณาอัพโหลดเอกสาร
-              <q-icon name="mdi-alert-circle q-ml-sm" size="24px" />
+                </template>
+              </q-uploader>
+              <div
+                v-if="alertUpload && dialogStatus === 'create'"
+                class="row text-negative items-center q-mt-sm"
+              >
+                กรุณาอัพโหลดเอกสาร
+                <q-icon name="mdi-alert-circle q-ml-sm" size="24px" />
+              </div>
             </div>
-          </div>
-        </div>
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-            @click="
-              () => {
-                if (!!fileUpload) {
-                  alertUpload = false;
-                } else {
-                  alertUpload = true;
+          </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
+              id="onSubmit"
+              type="submit"
+              dense
+              :disable="submitDisable"
+              unelevated
+              label="บันทึก"
+              color="public"
+              class="q-px-md"
+              @click="
+                () => {
+                  if (!!fileUpload && dialogStatus === 'create') {
+                    alertUpload = false;
+                  } else {
+                    alertUpload = true;
+                  }
                 }
-              }
-            "
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
+              "
+            >
+              <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
-          bordered
-          :paging="true"
-          dense
-          :filter="historyKeyword"
-          v-model:pagination="pagination"
-          :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-td auto-width> </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
+            bordered
+            :paging="true"
+            dense
+            :filter="historyKeyword"
+            v-model:pagination="historyPagination"
+            :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-td auto-width> </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/PersonalInformation/03_Address.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
index cf822c7c2..8038a4515 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
@@ -566,133 +566,22 @@ onMounted(async () => {
 
   <!-- Edit Dialog -->
   <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 />
-        <!-- regis address -->
-        <q-card-section class="q-p-sm">
-          <div class="col-12 q-pb-xs">
-            <q-input
-              dense
-              outlined
-              lazy-rules
-              hide-bottom-space
-              type="textarea"
-              class="inputgreen"
-              v-model="formData.registrationAddress"
-              :label="dataLabel.registrationAddress"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
-            />
-          </div>
-          <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">
-              <q-select
-                dense
-                outlined
-                use-input
-                lazy-rules
-                emit-value
-                map-options
-                hide-bottom-space
-                option-value="id"
-                option-label="name"
-                input-debounce="0"
-                class="inputgreen"
-                v-model="formData.registrationProvinceId"
-                :options="store.Ops.provinceOps"
-                :label="dataLabel.registrationProvince"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-                @update:model-value="(value:string) => selectProvince(value, '1')"
-                @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-select
-                dense
-                outlined
-                use-input
-                lazy-rules
-                emit-value
-                map-options
-                hide-bottom-space
-                option-value="id"
-                option-label="name"
-                input-debounce="0"
-                class="inputgreen"
-                v-model="formData.registrationDistrictId"
-                :options="store.Ops.districtOps"
-                :label="dataLabel.registrationDistrict"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-                @update:model-value="(value:string) => selectDistrict(value, '1')"
-                @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-select
-                dense
-                outlined
-                use-input
-                lazy-rules
-                emit-value
-                map-options
-                hide-bottom-space
-                option-value="id"
-                option-label="name"
-                input-debounce="0"
-                class="inputgreen"
-                v-model="formData.registrationSubDistrictId"
-                :options="store.Ops.subdistrictOps"
-                :label="dataLabel.registrationSubDistrict"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
-                @update:model-value="(value:string) => selectSubDistrict(value, '1')"
-                @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                dense
-                readonly
-                outlined
-                lazy-rules
-                hide-bottom-space
-                v-model="formData.registrationZipCode"
-                :label="dataLabel.registrationZipCode"
-              />
-            </div>
-          </div>
-          <!-- same address ? -->
-          <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
-            <label class="text-medium"
-              >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
-            >
-            <q-radio
-              dense
-              val="1"
-              label="ใช่"
-              checked-icon="task_alt"
-              class="inputgreen"
-              v-model="sameAddress"
-              unchecked-icon="panorama_fish_eye"
-            />
-            <q-radio
-              dense
-              val="0"
-              label="ไม่"
-              checked-icon="task_alt"
-              class="inputgreen"
-              v-model="sameAddress"
-              unchecked-icon="panorama_fish_eye"
-            />
-          </div>
-          <!-- current address -->
-          <div v-if="sameAddress === '0'">
+        <q-header>
+          <q-toolbar>
+            <DialogHeader tittle="แก้ไขข้อมูลที่อยู่" :close="clickClose" />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
+
+        <q-page-container>
+          <q-page class="q-pa-md">
             <div class="col-12 q-pb-xs">
               <q-input
                 dense
@@ -701,9 +590,9 @@ onMounted(async () => {
                 hide-bottom-space
                 type="textarea"
                 class="inputgreen"
-                v-model="formData.currentAddress"
-                :label="dataLabel.currentAddress"
-                :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+                v-model="formData.registrationAddress"
+                :label="dataLabel.registrationAddress"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
               />
             </div>
             <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -720,11 +609,11 @@ onMounted(async () => {
                   option-label="name"
                   input-debounce="0"
                   class="inputgreen"
-                  v-model="formData.currentProvinceId"
+                  v-model="formData.registrationProvinceId"
                   :options="store.Ops.provinceOps"
-                  :label="dataLabel.currentProvince"
+                  :label="dataLabel.registrationProvince"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-                  @update:model-value="(value:string) => selectProvince(value, '2')"
+                  @update:model-value="(value:string) => selectProvince(value, '1')"
                   @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
                       ) "
@@ -743,11 +632,11 @@ onMounted(async () => {
                   option-label="name"
                   input-debounce="0"
                   class="inputgreen"
-                  v-model="formData.currentDistrictId"
-                  :options="store.Ops.districtCOps"
-                  :label="dataLabel.currentDistrict"
+                  v-model="formData.registrationDistrictId"
+                  :options="store.Ops.districtOps"
+                  :label="dataLabel.registrationDistrict"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-                  @update:model-value="(value:string) => selectDistrict(value, '2')"
+                  @update:model-value="(value:string) => selectDistrict(value, '1')"
                   @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
                       ) "
@@ -766,11 +655,11 @@ onMounted(async () => {
                   option-label="name"
                   input-debounce="0"
                   class="inputgreen"
-                  v-model="formData.currentSubDistrictId"
-                  :options="store.Ops.subdistrictCOps"
-                  :label="dataLabel.currentSubDistrict"
+                  v-model="formData.registrationSubDistrictId"
+                  :options="store.Ops.subdistrictOps"
+                  :label="dataLabel.registrationSubDistrict"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
-                  @update:model-value="(value:string) => selectSubDistrict(value, '2')"
+                  @update:model-value="(value:string) => selectSubDistrict(value, '1')"
                   @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
                       ) "
@@ -783,127 +672,249 @@ onMounted(async () => {
                   outlined
                   lazy-rules
                   hide-bottom-space
-                  v-model="formData.currentZipCode"
+                  v-model="formData.registrationZipCode"
                   :label="dataLabel.registrationZipCode"
                 />
               </div>
             </div>
-          </div>
-        </q-card-section>
+            <!-- same address ? -->
+            <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+              <label class="text-medium"
+                >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
+              >
+              <q-radio
+                dense
+                val="1"
+                label="ใช่"
+                checked-icon="task_alt"
+                class="inputgreen"
+                v-model="sameAddress"
+                unchecked-icon="panorama_fish_eye"
+              />
+              <q-radio
+                dense
+                val="0"
+                label="ไม่"
+                checked-icon="task_alt"
+                class="inputgreen"
+                v-model="sameAddress"
+                unchecked-icon="panorama_fish_eye"
+              />
+            </div>
+            <!-- current address -->
+            <div v-if="sameAddress === '0'">
+              <div class="col-12 q-pb-xs">
+                <q-input
+                  dense
+                  outlined
+                  lazy-rules
+                  hide-bottom-space
+                  type="textarea"
+                  class="inputgreen"
+                  v-model="formData.currentAddress"
+                  :label="dataLabel.currentAddress"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+                />
+              </div>
+              <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">
+                  <q-select
+                    dense
+                    outlined
+                    use-input
+                    lazy-rules
+                    emit-value
+                    map-options
+                    hide-bottom-space
+                    option-value="id"
+                    option-label="name"
+                    input-debounce="0"
+                    class="inputgreen"
+                    v-model="formData.currentProvinceId"
+                    :options="store.Ops.provinceOps"
+                    :label="dataLabel.currentProvince"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+                    @update:model-value="(value:string) => selectProvince(value, '2')"
+                    @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-select
+                    dense
+                    outlined
+                    use-input
+                    lazy-rules
+                    emit-value
+                    map-options
+                    hide-bottom-space
+                    option-value="id"
+                    option-label="name"
+                    input-debounce="0"
+                    class="inputgreen"
+                    v-model="formData.currentDistrictId"
+                    :options="store.Ops.districtCOps"
+                    :label="dataLabel.currentDistrict"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                    @update:model-value="(value:string) => selectDistrict(value, '2')"
+                    @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
+                      ) "
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-select
+                    dense
+                    outlined
+                    use-input
+                    lazy-rules
+                    emit-value
+                    map-options
+                    hide-bottom-space
+                    option-value="id"
+                    option-label="name"
+                    input-debounce="0"
+                    class="inputgreen"
+                    v-model="formData.currentSubDistrictId"
+                    :options="store.Ops.subdistrictCOps"
+                    :label="dataLabel.currentSubDistrict"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
+                    @update:model-value="(value:string) => selectSubDistrict(value, '2')"
+                    @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
+                      ) "
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-input
+                    dense
+                    readonly
+                    outlined
+                    lazy-rules
+                    hide-bottom-space
+                    v-model="formData.currentZipCode"
+                    :label="dataLabel.registrationZipCode"
+                  />
+                </div>
+              </div>
+            </div>
+          </q-page>
+        </q-page-container>
         <q-separator />
-        <div class="text-right q-pa-sm">
-          <q-btn
-            dense
-            unelevated
-            id="onSubmit"
-            type="submit"
-            label="บันทึก"
-            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="currentPage"
-              active-color="primary"
-              color="dark"
-              :max="Number(maxPage)"
-              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"
+            :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/PersonalInformation/04_Family.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
index e197f856e..5f8e42370 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -455,780 +455,837 @@ onMounted(async () => {
   </div>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 70%" class="bg-white">
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 80vh; min-width: 80%"
+      class="bg-white"
+    >
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header tittle="ข้อมูลครอบครัว" :close="closeDialog" />
-        </q-card-section>
+        <q-header>
+          <q-toolbar>
+            <dialog-header tittle="แก้ไขข้อมูลครอบครัว" :close="closeDialog" />
+          </q-toolbar>
+          <q-separator color="grey-4" />
+        </q-header>
 
-        <q-separator color="grey-4" />
-        <q-card-section>
-          <div class="col-12 row q-pb-sm q-pt-md">
-            <div
-              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
-            >
-              • บิดา
-            </div>
-            <div class="flex q-gutter-sm">
-              <q-radio
-                v-model="fatherData.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="1"
-                label="มีข้อมูล"
-                dense
-                color="primary"
-              />
-              <q-radio
-                v-model="fatherData.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="0"
-                color="red"
-                label="ไม่มีข้อมูล"
-                dense
-              />
-            </div>
-          </div>
-          <q-card bordered class="bg-grey-1 q-pa-md">
-            <div class="row q-col-gutter-md">
-              <div class="col">
-                <q-input
-                  :disable="!fatherData.isHaveInfo"
-                  outlined
-                  hide-bottom-space
-                  bg-color="white"
-                  dense
-                  v-model="fatherData.citizenId"
-                  :label="`${'เลขประจำตัวประชาชน'}`"
-                  maxlength="13"
-                  :rules="[
-                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
-                  ]"
-                  class="inputgreen"
-                  mask="#############"
-                />
+        <q-page-container>
+          <q-page class="q-pa-md">
+            <div class="col-12 row q-pb-sm q-pt-md">
+              <div
+                class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+              >
+                • บิดา
               </div>
-              <div class="col">
-                <q-select
-                  :disable="!fatherData.isHaveInfo"
-                  outlined
-                  bg-color="white"
-                  lazy-rules
-                  hidden-space
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-                  label="คำนำหน้าชื่อ"
-                  v-model="fatherData.prefix"
-                  use-input
-                  input-debounce="0"
-                  emit-value
-                  map-options
-                  :options="store.Ops.prefixOps"
-                  option-label="name"
-                  option-value="name"
-                  @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!fatherData.isHaveInfo"
-                  outlined
-                  dense
-                  bg-color="white"
-                  class="inputgreen"
-                  lazy-rules
-                  v-model="fatherData.firstName"
-                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-                  label="ชื่อ"
-                  hidden-space
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!fatherData.isHaveInfo"
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  lazy-rules
-                  v-model="fatherData.lastName"
-                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-                  label="นามสกุล"
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!fatherData.isHaveInfo"
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  v-model="fatherData.job"
-                  label="อาชีพ"
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
-              <div>
+              <div class="flex q-gutter-sm">
                 <q-radio
-                  :disable="!fatherData.isHaveInfo"
-                  class="q-mr-sm"
-                  v-model="fatherData.isLive"
+                  v-model="fatherData.isHaveInfo"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="1"
-                  label="ยังมีชีวิตอยู่"
+                  label="มีข้อมูล"
                   dense
-                  :color="!fatherData.isHaveInfo ? 'grey' : 'primary'"
+                  color="primary"
                 />
                 <q-radio
-                  :disable="!fatherData.isHaveInfo"
-                  v-model="fatherData.isLive"
+                  v-model="fatherData.isHaveInfo"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="0"
-                  :color="!fatherData.isHaveInfo ? 'grey' : 'red'"
-                  label="ถึงแก่กรรม"
+                  color="red"
+                  label="ไม่มีข้อมูล"
                   dense
                 />
               </div>
             </div>
-          </q-card>
-          <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
-            <div
-              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
-            >
-              • มารดา
-            </div>
-            <div class="flex q-gutter-sm">
-              <q-radio
-                v-model="motherData.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="1"
-                label="มีข้อมูล"
-                dense
-                color="primary"
-              />
-              <q-radio
-                v-model="motherData.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="0"
-                color="red"
-                label="ไม่มีข้อมูล"
-                dense
-              />
-            </div>
-          </div>
-          <q-card bordered class="bg-grey-1 q-pa-md">
-            <div class="row q-col-gutter-md">
-              <div class="col">
-                <q-input
-                  :disable="!motherData.isHaveInfo"
-                  outlined
-                  hide-bottom-space
-                  bg-color="white"
-                  dense
-                  v-model="motherData.citizenId"
-                  :label="`${'เลขประจำตัวประชาชน'}`"
-                  maxlength="13"
-                  :rules="[
-                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
-                  ]"
-                  class="inputgreen"
-                  mask="#############"
-                />
-              </div>
-              <div class="col">
-                <q-select
-                  :disable="!motherData.isHaveInfo"
-                  outlined
-                  bg-color="white"
-                  lazy-rules
-                  dense
-                  v-model="motherData.prefix"
-                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-                  label="คำนำหน้าชื่อ"
-                  hidden-space
-                  class="inputgreen"
-                  use-input
-                  input-debounce="0"
-                  emit-value
-                  map-options
-                  :options="store.Ops.prefixOps"
-                  option-label="name"
-                  option-value="name"
-                  @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!motherData.isHaveInfo"
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  lazy-rules
-                  v-model="motherData.firstName"
-                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-                  label="ชื่อ"
-                  hidden-space
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!motherData.isHaveInfo"
-                  outlined
-                  class="inputgreen"
-                  dense
-                  bg-color="white"
-                  lazy-rules
-                  v-model="motherData.lastName"
-                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-                  label="นามสกุล"
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!motherData.isHaveInfo"
-                  outlined
-                  class="inputgreen"
-                  dense
-                  bg-color="white"
-                  v-model="motherData.job"
-                  label="อาชีพ"
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
-              <div>
-                <q-radio
-                  :disable="!motherData.isHaveInfo"
-                  class="q-mr-sm"
-                  v-model="motherData.isLive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="1"
-                  label="ยังมีชีวิตอยู่"
-                  dense
-                  :color="!motherData.isHaveInfo ? 'grey' : 'primary'"
-                />
-                <q-radio
-                  :disable="!motherData.isHaveInfo"
-                  v-model="motherData.isLive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="0"
-                  :color="!motherData.isHaveInfo ? 'grey' : 'red'"
-                  label="ถึงแก่กรรม"
-                  dense
-                />
-              </div>
-            </div>
-          </q-card>
-          <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
-            <div
-              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
-            >
-              • คู่สมรส
-            </div>
-            <div class="flex q-gutter-sm">
-              <q-radio
-                v-model="spouseData.isHave"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="1"
-                label="มี"
-                dense
-                color="primary"
-              />
-              <q-radio
-                v-model="spouseData.isHave"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="0"
-                color="red"
-                label="ไม่มี"
-                dense
-              />
-            </div>
-          </div>
-          <q-card bordered class="bg-grey-1 q-pa-md">
-            <div class="row q-col-gutter-md">
-              <div class="col">
-                <q-input
-                  :disable="!spouseData.isHave"
-                  outlined
-                  hide-bottom-space
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  v-model="spouseData.citizenId"
-                  :label="`${'เลขประจำตัวประชาชน'}`"
-                  maxlength="13"
-                  :rules="[
-                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
-                  ]"
-                  mask="#############"
-                />
-              </div>
-              <div class="col">
-                <q-select
-                  :disable="!spouseData.isHave"
-                  outlined
-                  class="inputgreen"
-                  bg-color="white"
-                  lazy-rules
-                  dense
-                  v-model="spouseData.prefix"
-                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-                  label="คำนำหน้าชื่อ"
-                  hidden-space
-                  use-input
-                  input-debounce="0"
-                  emit-value
-                  map-options
-                  :options="store.Ops.prefixOps"
-                  option-label="name"
-                  option-value="name"
-                  @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
-              )"
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!spouseData.isHave"
-                  outlined
-                  class="inputgreen"
-                  dense
-                  bg-color="white"
-                  lazy-rules
-                  v-model="spouseData.firstName"
-                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-                  label="ชื่อ"
-                  hidden-space
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!spouseData.isHave"
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  lazy-rules
-                  v-model="spouseData.lastName"
-                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-                  label="นามสกุล"
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!spouseData.isHave"
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  v-model="spouseData.job"
-                  label="อาชีพ"
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
-              <div>
-                <q-radio
-                  :disable="!spouseData.isHave"
-                  class="q-mr-sm"
-                  v-model="spouseData.isLive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="1"
-                  label="ยังมีชีวิตอยู่"
-                  dense
-                  :color="!spouseData.isHave ? 'grey' : 'primary'"
-                />
-                <q-radio
-                  :disable="!spouseData.isHave"
-                  v-model="spouseData.isLive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="0"
-                  :color="!motherData.isHaveInfo ? 'grey' : 'red'"
-                  label="ถึงแก่กรรม"
-                  dense
-                />
-              </div>
-            </div>
-          </q-card>
-          <div class="col-12 row q-pb-sm q-pt-md items-center">
-            <div
-              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
-            >
-              • บุตร
-            </div>
-            <q-btn
-              flat
-              round
-              color="primary"
-              icon="add"
-              size="14px"
-              @click="addChildren"
-            >
-              <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-            </q-btn>
-          </div>
-          <div v-for="(items, index) in childrenData.childrens" :key="index">
-            <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
-              <div class="text-medium q-pl-md">บุตรคนที่ : {{ index + 1 }}</div>
-            </div>
-            <div class="row items-center">
-              <q-card bordered class="bg-grey-1 q-pa-md col-11 q-mb-lg">
-                <div class="row q-col-gutter-md">
-                  <div class="col">
-                    <q-input
-                      outlined
-                      hide-bottom-space
-                      dense
-                      v-model="items.childrenCitizenId"
-                      :label="`${'เลขประจำตัวประชาชน'}`"
-                      bg-color="white"
-                      class="inputgreen"
-                      :rules="[
-                        (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
-                      ]"
-                      maxlength="13"
-                      mask="#############"
-                    />
-                  </div>
-                  <div class="col">
-                    <q-select
-                      outlined
-                      dense
-                      lazy-rules
-                      bg-color="white"
-                      v-model="items.childrenPrefix"
-                      :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-                      label="คำนำหน้าชื่อ"
-                      use-input
-                      class="inputgreen"
-                      input-debounce="0"
-                      emit-value
-                      map-options
-                      :options="store.Ops.prefixOps"
-                      option-label="name"
-                      option-value="name"
-                      @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-                    />
-                  </div>
-                  <div class="col">
-                    <q-input
-                      outlined
-                      dense
-                      lazy-rules
-                      class="inputgreen"
-                      bg-color="white"
-                      v-model="items.childrenFirstName"
-                      :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-                      label="ชื่อ"
-                    />
-                  </div>
-                  <div class="col">
-                    <q-input
-                      outlined
-                      lazy-rules
-                      class="inputgreen"
-                      bg-color="white"
-                      dense
-                      v-model="items.childrenLastName"
-                      :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-                      label="นามสกุล"
-                    />
-                  </div>
-                  <div class="col">
-                    <q-input
-                      outlined
-                      bg-color="white"
-                      dense
-                      class="inputgreen"
-                      v-model="items.childrenCareer"
-                      label="อาชีพ"
-                    />
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
-                  <div>
-                    <q-radio
-                      class="q-mr-sm"
-                      v-model="items.childrenLive"
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      :val="1"
-                      label="ยังมีชีวิตอยู่"
-                      dense
-                      color="primary"
-                    />
-                    <q-radio
-                      v-model="items.childrenLive"
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      :val="0"
-                      color="red"
-                      label="ถึงแก่กรรม"
-                      dense
-                    />
-                  </div>
-                </div>
-              </q-card>
-              <div class="col-1">
-                <div class="row justify-center">
-                  <q-btn
-                    flat
+            <q-card bordered class="bg-grey-1 q-pa-md">
+              <div class="row q-col-gutter-md">
+                <div class="col">
+                  <q-input
+                    :disable="!fatherData.isHaveInfo"
+                    outlined
+                    hide-bottom-space
+                    bg-color="white"
                     dense
-                    size="12px"
-                    round
-                    color="red"
-                    @click="deleteChildren(items)"
-                    icon="mdi-delete"
-                  >
-                    <q-tooltip>ลบข้อมูลบุตรคนที่ {{ index + 1 }}</q-tooltip>
-                  </q-btn>
+                    v-model="fatherData.citizenId"
+                    :label="`${'เลขประจำตัวประชาชน'}`"
+                    maxlength="13"
+                    :rules="[
+                      (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
+                    ]"
+                    class="inputgreen"
+                    mask="#############"
+                  />
                 </div>
-              </div>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="q-mt-md" align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-            @click=""
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </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" />
-      <div v-if="historyRows.length === 0" class="q-pa-md">ไม่พบข้อมูล</div>
-      <div v-else class="q-pa-md scroll" style="max-height: 70vh">
-        <div>
-          <div class="row text-right">
-            <div class="col-12">
-              แก้ไขโดย {{ historyRows[index - 1].lastUpdateFullName }}
-            </div>
-            <div class="col-12">
-              วันที่แก้ไข {{ date2Thai(historyRows[index - 1].lastUpdatedAt) }}
-            </div>
-          </div>
-          <div class="col-12 row q-pb-sm">
-            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
-              • บิดา
-            </div>
-          </div>
-          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
-            <div class="row items-center">
-              <div class="col-2">
-                <div>เลขบัตรประจำตัวประชาชน</div>
-              </div>
-              <div class="col">
-                {{ historyRows[index - 1].fatherCitizenId }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">คำนำหน้าชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index - 1].fatherPrefix }}
-              </div>
-              <div class="col-1">ชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index - 1].fatherFirstName }}
-              </div>
-              <div class="col-1">นามสกุล</div>
-              <div class="col-2">
-                {{ historyRows[index - 1].fatherLastName }}
-              </div>
-              <div class="col-1">อาชีพ</div>
-              <div class="col">
-                {{ historyRows[index - 1].fatherCareer }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">สถานภาพการมีชีวิต</div>
-              <div class="col-10">
-                <div v-if="historyRows[index - 1].fatherLive">มีชีวิตอยู่</div>
-                <div v-else>ถึงแก่กรรม</div>
-              </div>
-            </div>
-          </q-card>
-        </div>
-        <div>
-          <div class="col-12 row q-pb-sm q-pt-md">
-            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
-              • มารดา
-            </div>
-          </div>
-          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
-            <div class="row items-center">
-              <div class="col-2">
-                <div>เลขบัตรประจำตัวประชาชน</div>
-              </div>
-              <div class="col">
-                {{ historyRows[index - 1].motherCitizenId }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">คำนำหน้าชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index - 1].motherPrefix }}
-              </div>
-              <div class="col-1">ชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index - 1].motherFirstName }}
-              </div>
-              <div class="col-1">นามสกุล</div>
-              <div class="col-2">
-                {{ historyRows[index - 1].motherLastName }}
-              </div>
-              <div class="col-1">อาชีพ</div>
-              <div class="col">
-                {{ historyRows[index - 1].motherCareer }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">สถานภาพการมีชีวิต</div>
-              <div class="col">
-                <div v-if="historyRows[index - 1].motherLive">มีชีวิตอยู่</div>
-                <div v-else>ถึงแก่กรรม</div>
-              </div>
-            </div>
-          </q-card>
-        </div>
-        <div>
-          <div class="col-12 row q-pb-sm q-pt-md">
-            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
-              • คู่สมรส
-            </div>
-          </div>
-          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
-            <div class="row items-center">
-              <div class="col-2">
-                <div>เลขบัตรประจำตัวประชาชน</div>
-              </div>
-              <div class="col">
-                {{ historyRows[index - 1].coupleCitizenId }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">คำนำหน้าชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index - 1].couplePrefix }}
-              </div>
-              <div class="col-1">ชื่อ</div>
-              <div class="col-2">
-                {{ historyRows[index - 1].coupleFirstName }}
-              </div>
-              <div class="col-1">นามสกุล</div>
-              <div class="col-2">
-                {{ historyRows[index - 1].coupleLastName }}
-              </div>
-              <div class="col-1">อาชีพ</div>
-              <div class="col">
-                {{ historyRows[index - 1].coupleCareer }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2">สถานภาพการมีชีวิต</div>
-              <div class="col">
-                <div v-if="historyRows[index - 1].coupleLive">มีชีวิตอยู่</div>
-                <div v-else>ถึงแก่กรรม</div>
-              </div>
-            </div>
-          </q-card>
-        </div>
-        <div>
-          <div
-            v-if="historyRows[index - 1].children[0] !== undefined"
-            class="col-12 row q-pb-sm q-pt-md"
-          >
-            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
-              • บุตร
-            </div>
-          </div>
-          <div v-for="children in historyRows[index - 1].children" :key="index">
-            <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
-              <div class="text-medium">บุตรคนที่ : {{ index }}</div>
-            </div>
-            <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
-              <div class="row items-center">
-                <div class="col-2">
-                  <div>เลขบัตรประจำตัวประชาชน</div>
-                </div>
-                <div class="col-10">
-                  {{ children.childrenCitizenId }}
-                </div>
-              </div>
-              <div class="row items-center">
-                <div class="col-2">คำนำหน้าชื่อ</div>
-                <div class="col-2">
-                  {{ children.childrenPrefix }}
-                </div>
-                <div class="col-1">ชื่อ</div>
-                <div class="col-2">
-                  {{ children.childrenFirstName }}
-                </div>
-                <div class="col-1">นามสกุล</div>
-                <div class="col-2">
-                  {{ children.childrenLastName }}
-                </div>
-                <div class="col-1">อาชีพ</div>
                 <div class="col">
-                  {{ children.childrenCareer }}
+                  <q-select
+                    :disable="!fatherData.isHaveInfo"
+                    outlined
+                    bg-color="white"
+                    lazy-rules
+                    hidden-space
+                    dense
+                    class="inputgreen"
+                    :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                    label="คำนำหน้าชื่อ"
+                    v-model="fatherData.prefix"
+                    use-input
+                    input-debounce="0"
+                    emit-value
+                    map-options
+                    :options="store.Ops.prefixOps"
+                    option-label="name"
+                    option-value="name"
+                    @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+                  />
+                </div>
+                <div class="col">
+                  <q-input
+                    :disable="!fatherData.isHaveInfo"
+                    outlined
+                    dense
+                    bg-color="white"
+                    class="inputgreen"
+                    lazy-rules
+                    v-model="fatherData.firstName"
+                    :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                    label="ชื่อ"
+                    hidden-space
+                  />
+                </div>
+                <div class="col">
+                  <q-input
+                    :disable="!fatherData.isHaveInfo"
+                    outlined
+                    dense
+                    class="inputgreen"
+                    bg-color="white"
+                    lazy-rules
+                    v-model="fatherData.lastName"
+                    :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                    label="นามสกุล"
+                  />
+                </div>
+                <div class="col">
+                  <q-input
+                    :disable="!fatherData.isHaveInfo"
+                    outlined
+                    dense
+                    class="inputgreen"
+                    bg-color="white"
+                    v-model="fatherData.job"
+                    label="อาชีพ"
+                  />
                 </div>
               </div>
-              <div class="row items-center">
-                <div class="col-2">สถานภาพการมีชีวิต</div>
-                <div class="col">
-                  <div v-if="children.childrenLive">มีชีวิตอยู่</div>
-                  <div v-else>ถึงแก่กรรม</div>
+              <div class="row">
+                <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+                <div>
+                  <q-radio
+                    :disable="!fatherData.isHaveInfo"
+                    class="q-mr-sm"
+                    v-model="fatherData.isLive"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    :val="1"
+                    label="ยังมีชีวิตอยู่"
+                    dense
+                    :color="!fatherData.isHaveInfo ? 'grey' : 'primary'"
+                  />
+                  <q-radio
+                    :disable="!fatherData.isHaveInfo"
+                    v-model="fatherData.isLive"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    :val="0"
+                    :color="!fatherData.isHaveInfo ? 'grey' : 'red'"
+                    label="ถึงแก่กรรม"
+                    dense
+                  />
                 </div>
               </div>
             </q-card>
+            <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
+              <div
+                class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+              >
+                • มารดา
+              </div>
+              <div class="flex q-gutter-sm">
+                <q-radio
+                  v-model="motherData.isHaveInfo"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="1"
+                  label="มีข้อมูล"
+                  dense
+                  color="primary"
+                />
+                <q-radio
+                  v-model="motherData.isHaveInfo"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="0"
+                  color="red"
+                  label="ไม่มีข้อมูล"
+                  dense
+                />
+              </div>
+            </div>
+            <q-card bordered class="bg-grey-1 q-pa-md">
+              <div class="row q-col-gutter-md">
+                <div class="col">
+                  <q-input
+                    :disable="!motherData.isHaveInfo"
+                    outlined
+                    hide-bottom-space
+                    bg-color="white"
+                    dense
+                    v-model="motherData.citizenId"
+                    :label="`${'เลขประจำตัวประชาชน'}`"
+                    maxlength="13"
+                    :rules="[
+                      (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
+                    ]"
+                    class="inputgreen"
+                    mask="#############"
+                  />
+                </div>
+                <div class="col">
+                  <q-select
+                    :disable="!motherData.isHaveInfo"
+                    outlined
+                    bg-color="white"
+                    lazy-rules
+                    dense
+                    v-model="motherData.prefix"
+                    :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                    label="คำนำหน้าชื่อ"
+                    hidden-space
+                    class="inputgreen"
+                    use-input
+                    input-debounce="0"
+                    emit-value
+                    map-options
+                    :options="store.Ops.prefixOps"
+                    option-label="name"
+                    option-value="name"
+                    @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+                  />
+                </div>
+                <div class="col">
+                  <q-input
+                    :disable="!motherData.isHaveInfo"
+                    outlined
+                    dense
+                    class="inputgreen"
+                    bg-color="white"
+                    lazy-rules
+                    v-model="motherData.firstName"
+                    :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                    label="ชื่อ"
+                    hidden-space
+                  />
+                </div>
+                <div class="col">
+                  <q-input
+                    :disable="!motherData.isHaveInfo"
+                    outlined
+                    class="inputgreen"
+                    dense
+                    bg-color="white"
+                    lazy-rules
+                    v-model="motherData.lastName"
+                    :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                    label="นามสกุล"
+                  />
+                </div>
+                <div class="col">
+                  <q-input
+                    :disable="!motherData.isHaveInfo"
+                    outlined
+                    class="inputgreen"
+                    dense
+                    bg-color="white"
+                    v-model="motherData.job"
+                    label="อาชีพ"
+                  />
+                </div>
+              </div>
+              <div class="row">
+                <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+                <div>
+                  <q-radio
+                    :disable="!motherData.isHaveInfo"
+                    class="q-mr-sm"
+                    v-model="motherData.isLive"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    :val="1"
+                    label="ยังมีชีวิตอยู่"
+                    dense
+                    :color="!motherData.isHaveInfo ? 'grey' : 'primary'"
+                  />
+                  <q-radio
+                    :disable="!motherData.isHaveInfo"
+                    v-model="motherData.isLive"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    :val="0"
+                    :color="!motherData.isHaveInfo ? 'grey' : 'red'"
+                    label="ถึงแก่กรรม"
+                    dense
+                  />
+                </div>
+              </div>
+            </q-card>
+            <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
+              <div
+                class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+              >
+                • คู่สมรส
+              </div>
+              <div class="flex q-gutter-sm">
+                <q-radio
+                  v-model="spouseData.isHave"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="1"
+                  label="มี"
+                  dense
+                  color="primary"
+                />
+                <q-radio
+                  v-model="spouseData.isHave"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="0"
+                  color="red"
+                  label="ไม่มี"
+                  dense
+                />
+              </div>
+            </div>
+            <q-card v-if="spouseData.isHave" bordered class="bg-grey-1 q-pa-md">
+              <div class="row q-col-gutter-md">
+                <div class="col">
+                  <q-input
+                    :disable="!spouseData.isHave"
+                    outlined
+                    hide-bottom-space
+                    bg-color="white"
+                    dense
+                    class="inputgreen"
+                    v-model="spouseData.citizenId"
+                    :label="`${'เลขประจำตัวประชาชน'}`"
+                    maxlength="13"
+                    :rules="[
+                      (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
+                    ]"
+                    mask="#############"
+                  />
+                </div>
+                <div class="col">
+                  <q-select
+                    :disable="!spouseData.isHave"
+                    outlined
+                    class="inputgreen"
+                    bg-color="white"
+                    lazy-rules
+                    dense
+                    v-model="spouseData.prefix"
+                    :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                    label="คำนำหน้าชื่อ"
+                    hidden-space
+                    use-input
+                    input-debounce="0"
+                    emit-value
+                    map-options
+                    :options="store.Ops.prefixOps"
+                    option-label="name"
+                    option-value="name"
+                    @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
+              )"
+                  />
+                </div>
+                <div class="col">
+                  <q-input
+                    :disable="!spouseData.isHave"
+                    outlined
+                    class="inputgreen"
+                    dense
+                    bg-color="white"
+                    lazy-rules
+                    v-model="spouseData.firstName"
+                    :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                    label="ชื่อ"
+                    hidden-space
+                  />
+                </div>
+                <div class="col">
+                  <q-input
+                    :disable="!spouseData.isHave"
+                    outlined
+                    dense
+                    class="inputgreen"
+                    bg-color="white"
+                    lazy-rules
+                    v-model="spouseData.lastName"
+                    :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                    label="นามสกุล"
+                  />
+                </div>
+                <div class="col">
+                  <q-input
+                    :disable="!spouseData.isHave"
+                    outlined
+                    dense
+                    class="inputgreen"
+                    bg-color="white"
+                    v-model="spouseData.job"
+                    label="อาชีพ"
+                  />
+                </div>
+              </div>
+              <div class="row">
+                <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+                <div>
+                  <q-radio
+                    :disable="!spouseData.isHave"
+                    class="q-mr-sm"
+                    v-model="spouseData.isLive"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    :val="1"
+                    label="ยังมีชีวิตอยู่"
+                    dense
+                    :color="!spouseData.isHave ? 'grey' : 'primary'"
+                  />
+                  <q-radio
+                    :disable="!spouseData.isHave"
+                    v-model="spouseData.isLive"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    :val="0"
+                    :color="!motherData.isHaveInfo ? 'grey' : 'red'"
+                    label="ถึงแก่กรรม"
+                    dense
+                  />
+                </div>
+              </div>
+            </q-card>
+            <div class="col-12 row q-pb-sm q-pt-md items-center">
+              <div
+                class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+              >
+                • บุตร
+              </div>
+              <q-btn
+                flat
+                round
+                color="primary"
+                icon="add"
+                size="14px"
+                @click="addChildren"
+              >
+                <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+              </q-btn>
+            </div>
+            <div v-for="(items, index) in childrenData.childrens" :key="index">
+              <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
+                <div class="text-medium q-pl-md">
+                  บุตรคนที่ : {{ index + 1 }}
+                </div>
+              </div>
+              <div class="row items-center">
+                <q-card bordered class="bg-grey-1 q-pa-md col-11 q-mb-lg">
+                  <div class="row q-col-gutter-md">
+                    <div class="col">
+                      <q-input
+                        outlined
+                        hide-bottom-space
+                        dense
+                        v-model="items.childrenCitizenId"
+                        :label="`${'เลขประจำตัวประชาชน'}`"
+                        bg-color="white"
+                        class="inputgreen"
+                        :rules="[
+                          (val) =>
+                            val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
+                        ]"
+                        maxlength="13"
+                        mask="#############"
+                      />
+                    </div>
+                    <div class="col">
+                      <q-select
+                        outlined
+                        dense
+                        lazy-rules
+                        bg-color="white"
+                        v-model="items.childrenPrefix"
+                        :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                        label="คำนำหน้าชื่อ"
+                        use-input
+                        class="inputgreen"
+                        input-debounce="0"
+                        emit-value
+                        map-options
+                        :options="store.Ops.prefixOps"
+                        option-label="name"
+                        option-value="name"
+                        @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+                      />
+                    </div>
+                    <div class="col">
+                      <q-input
+                        outlined
+                        dense
+                        lazy-rules
+                        class="inputgreen"
+                        bg-color="white"
+                        v-model="items.childrenFirstName"
+                        :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                        label="ชื่อ"
+                      />
+                    </div>
+                    <div class="col">
+                      <q-input
+                        outlined
+                        lazy-rules
+                        class="inputgreen"
+                        bg-color="white"
+                        dense
+                        v-model="items.childrenLastName"
+                        :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                        label="นามสกุล"
+                      />
+                    </div>
+                    <div class="col">
+                      <q-input
+                        outlined
+                        bg-color="white"
+                        dense
+                        class="inputgreen"
+                        v-model="items.childrenCareer"
+                        label="อาชีพ"
+                      />
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+                    <div>
+                      <q-radio
+                        class="q-mr-sm"
+                        v-model="items.childrenLive"
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        :val="1"
+                        label="ยังมีชีวิตอยู่"
+                        dense
+                        color="primary"
+                      />
+                      <q-radio
+                        v-model="items.childrenLive"
+                        checked-icon="task_alt"
+                        unchecked-icon="panorama_fish_eye"
+                        :val="0"
+                        color="red"
+                        label="ถึงแก่กรรม"
+                        dense
+                      />
+                    </div>
+                  </div>
+                </q-card>
+                <div class="col-1">
+                  <div class="row justify-center">
+                    <q-btn
+                      flat
+                      dense
+                      size="12px"
+                      round
+                      color="red"
+                      @click="deleteChildren(items)"
+                      icon="mdi-delete"
+                    >
+                      <q-tooltip>ลบข้อมูลบุตรคนที่ {{ index + 1 }}</q-tooltip>
+                    </q-btn>
+                  </div>
+                </div>
+              </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-layout>
+  </q-dialog>
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <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>
+        <q-separator color="grey-4" />
+      </q-header>
+
+      <q-page-container>
+        <q-page class="q-pa-md">
+          <div v-if="historyRows.length === 0">ไม่พบข้อมูล</div>
+          <div v-else class="scroll" style="max-height: 70vh">
+            <div>
+              <div class="row text-right">
+                <div class="col-12">
+                  แก้ไขโดย {{ historyRows[index - 1].lastUpdateFullName }}
+                </div>
+                <div class="col-12">
+                  วันที่แก้ไข
+                  {{ date2Thai(historyRows[index - 1].lastUpdatedAt) }}
+                </div>
+              </div>
+              <div class="col-12 row q-pb-sm">
+                <div
+                  class="q-mr-md text-weight-bold text-primary text-subtitle1"
+                >
+                  • บิดา
+                </div>
+              </div>
+              <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+                <div class="row items-center">
+                  <div class="col-2">
+                    <div>เลขบัตรประจำตัวประชาชน</div>
+                  </div>
+                  <div class="col">
+                    {{ historyRows[index - 1].fatherCitizenId }}
+                  </div>
+                </div>
+                <div class="row items-center">
+                  <div class="col-2">คำนำหน้าชื่อ</div>
+                  <div class="col-2">
+                    {{ historyRows[index - 1].fatherPrefix }}
+                  </div>
+                  <div class="col-1">ชื่อ</div>
+                  <div class="col-2">
+                    {{ historyRows[index - 1].fatherFirstName }}
+                  </div>
+                  <div class="col-1">นามสกุล</div>
+                  <div class="col-2">
+                    {{ historyRows[index - 1].fatherLastName }}
+                  </div>
+                  <div class="col-1">อาชีพ</div>
+                  <div class="col">
+                    {{ historyRows[index - 1].fatherCareer }}
+                  </div>
+                </div>
+                <div class="row items-center">
+                  <div class="col-2">สถานภาพการมีชีวิต</div>
+                  <div class="col-10">
+                    <div v-if="historyRows[index - 1].fatherLive">
+                      มีชีวิตอยู่
+                    </div>
+                    <div v-else>ถึงแก่กรรม</div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+            <div>
+              <div class="col-12 row q-pb-sm q-pt-md">
+                <div
+                  class="q-mr-md text-weight-bold text-primary text-subtitle1"
+                >
+                  • มารดา
+                </div>
+              </div>
+              <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+                <div class="row items-center">
+                  <div class="col-2">
+                    <div>เลขบัตรประจำตัวประชาชน</div>
+                  </div>
+                  <div class="col">
+                    {{ historyRows[index - 1].motherCitizenId }}
+                  </div>
+                </div>
+                <div class="row items-center">
+                  <div class="col-2">คำนำหน้าชื่อ</div>
+                  <div class="col-2">
+                    {{ historyRows[index - 1].motherPrefix }}
+                  </div>
+                  <div class="col-1">ชื่อ</div>
+                  <div class="col-2">
+                    {{ historyRows[index - 1].motherFirstName }}
+                  </div>
+                  <div class="col-1">นามสกุล</div>
+                  <div class="col-2">
+                    {{ historyRows[index - 1].motherLastName }}
+                  </div>
+                  <div class="col-1">อาชีพ</div>
+                  <div class="col">
+                    {{ historyRows[index - 1].motherCareer }}
+                  </div>
+                </div>
+                <div class="row items-center">
+                  <div class="col-2">สถานภาพการมีชีวิต</div>
+                  <div class="col">
+                    <div v-if="historyRows[index - 1].motherLive">
+                      มีชีวิตอยู่
+                    </div>
+                    <div v-else>ถึงแก่กรรม</div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+            <div>
+              <div
+                v-if="historyRows[index - 1].couple"
+                class="col-12 row q-pb-sm q-pt-md"
+              >
+                <div
+                  class="q-mr-md text-weight-bold text-primary text-subtitle1"
+                >
+                  • คู่สมรส
+                </div>
+              </div>
+              <q-card
+                v-if="historyRows[index - 1].couple"
+                bordered
+                class="bg-grey-1 q-gutter-md q-ma-none q-pb-md"
+              >
+                <div class="row items-center">
+                  <div class="col-2">
+                    <div>เลขบัตรประจำตัวประชาชน</div>
+                  </div>
+                  <div class="col">
+                    {{ historyRows[index - 1].coupleCitizenId }}
+                  </div>
+                </div>
+                <div class="row items-center">
+                  <div class="col-2">คำนำหน้าชื่อ</div>
+                  <div class="col-2">
+                    {{ historyRows[index - 1].couplePrefix }}
+                  </div>
+                  <div class="col-1">ชื่อ</div>
+                  <div class="col-2">
+                    {{ historyRows[index - 1].coupleFirstName }}
+                  </div>
+                  <div class="col-1">นามสกุล</div>
+                  <div class="col-2">
+                    {{ historyRows[index - 1].coupleLastName }}
+                  </div>
+                  <div class="col-1">อาชีพ</div>
+                  <div class="col">
+                    {{ historyRows[index - 1].coupleCareer }}
+                  </div>
+                </div>
+                <div class="row items-center">
+                  <div class="col-2">สถานภาพการมีชีวิต</div>
+                  <div class="col">
+                    <div v-if="historyRows[index - 1].coupleLive">
+                      มีชีวิตอยู่
+                    </div>
+                    <div v-else>ถึงแก่กรรม</div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+            <div>
+              <div
+                v-if="historyRows[index - 1].children[0] !== undefined"
+                class="col-12 row q-pb-sm q-pt-md"
+              >
+                <div
+                  class="q-mr-md text-weight-bold text-primary text-subtitle1"
+                >
+                  • บุตร
+                </div>
+              </div>
+              <div
+                v-for="children in historyRows[index - 1].children"
+                :key="index"
+              >
+                <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
+                  <div class="text-medium">บุตรคนที่ : {{ index }}</div>
+                </div>
+                <q-card
+                  bordered
+                  class="bg-grey-1 q-gutter-md q-ma-none q-pb-md"
+                >
+                  <div class="row items-center">
+                    <div class="col-2">
+                      <div>เลขบัตรประจำตัวประชาชน</div>
+                    </div>
+                    <div class="col-10">
+                      {{ children.childrenCitizenId }}
+                    </div>
+                  </div>
+                  <div class="row items-center">
+                    <div class="col-2">คำนำหน้าชื่อ</div>
+                    <div class="col-2">
+                      {{ children.childrenPrefix }}
+                    </div>
+                    <div class="col-1">ชื่อ</div>
+                    <div class="col-2">
+                      {{ children.childrenFirstName }}
+                    </div>
+                    <div class="col-1">นามสกุล</div>
+                    <div class="col-2">
+                      {{ children.childrenLastName }}
+                    </div>
+                    <div class="col-1">อาชีพ</div>
+                    <div class="col">
+                      {{ children.childrenCareer }}
+                    </div>
+                  </div>
+                  <div class="row items-center">
+                    <div class="col-2">สถานภาพการมีชีวิต</div>
+                    <div class="col">
+                      <div v-if="children.childrenLive">มีชีวิตอยู่</div>
+                      <div v-else>ถึงแก่กรรม</div>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-      <div class="q-pa-sm flex flex-center">
-        <q-pagination v-model="index" :max="historyRows.length" input />
-      </div>
-    </q-card>
+          <q-footer>
+            <q-separator color="grey-4" />
+            <div class="q-pa-sm flex flex-center">
+              <q-pagination v-model="index" :max="historyRows.length" input />
+            </div>
+          </q-footer>
+        </q-page>
+      </q-page-container>
+    </q-layout>
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index fd0234685..fed637cf7 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -448,6 +448,11 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const visibleColumns = ref<string[]>([
   "educationLevel",
   "institute",
@@ -628,6 +633,7 @@ async function addData() {
       ...educationData,
       startYear: undefined,
       endYear: undefined,
+      isDate: isDate.value === "false" ? false : true,
     })
     .then(() => {
       fetchData(id.value);
@@ -648,6 +654,7 @@ function editData(idData: string) {
       profileId: undefined,
       startYear: undefined,
       endYear: undefined,
+      isDate: isDate.value === "false" ? false : true,
     })
     .then(() => {
       fetchData(id.value);
@@ -958,7 +965,11 @@ onMounted(async () => {
         <q-header>
           <q-toolbar>
             <dialog-header
-              :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+              :tittle="
+                dialogStatus == 'edit'
+                  ? 'แก้ไขข้อมูลประวัติการศึกษา'
+                  : 'เพิ่มข้อมูลประวัติการศึกษา'
+              "
               :close="closeDialog"
             />
           </q-toolbar>
@@ -1410,82 +1421,92 @@ onMounted(async () => {
   </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
-          bordered
-          :paging="true"
-          dense
-          :filter="historyKeyword"
-          v-model:pagination="pagination"
-          :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-td auto-width> </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
+            bordered
+            :paging="true"
+            dense
+            :filter="historyKeyword"
+            v-model:pagination="historyPagination"
+            :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-td auto-width> </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/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
index 56460121b..03f2dcffe 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -165,6 +165,11 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const visibleColumns = ref<string[]>([
   "field",
   "detail",
@@ -238,7 +243,6 @@ async function fetchHistoryData(id: string) {
     .get(config.API.profileNewAbilityHisByAbilityId(id))
     .then(async (res) => {
       historyRows.value = res.data.result;
-      console.log(res.data.result);
     })
     .catch((err) => {
       messageError($q, err);
@@ -434,19 +438,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>
@@ -504,151 +495,185 @@ 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" />
-        <q-card-section class="col q-gutter-sm q-pr-md">
-          <div class="row q-gutter-sm q-ml-none">
-            <div class="col">
-              <q-input
-                outlined
-                class="inputgreen"
-                dense
-                bg-color="white"
-                v-model="specialSkill.field"
-                label="ด้าน"
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
-              />
+        <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 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">
+                <q-input
+                  outlined
+                  class="inputgreen"
+                  dense
+                  bg-color="white"
+                  v-model="specialSkill.field"
+                  label="ด้าน"
+                  hide-bottom-space
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-xs-6 col-sm-6 col-md-6">
+                <q-input
+                  outlined
+                  dense
+                  class="inputgreen"
+                  bg-color="white"
+                  v-model="specialSkill.detail"
+                  label="รายละเอียด"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  class="inputgreen"
+                  outlined
+                  dense
+                  bg-color="white"
+                  v-model="specialSkill.remark"
+                  label="หมายเหตุ"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-12 col-md-12">
+                <q-input
+                  class="inputgreen"
+                  outlined
+                  dense
+                  bg-color="white"
+                  v-model="specialSkill.reference"
+                  label="เอกสารอ้างอิง"
+                />
+              </div>
             </div>
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                class="inputgreen"
-                bg-color="white"
-                v-model="specialSkill.detail"
-                label="รายละเอียด"
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-              />
-            </div>
-          </div>
-          <q-input
-            class="col-12 inputgreen"
-            outlined
-            dense
-            bg-color="white"
-            v-model="specialSkill.remark"
-            label="หมายเหตุ"
-          />
-          <q-input
-            class="col-12 inputgreen"
-            outlined
-            dense
-            bg-color="white"
-            v-model="specialSkill.reference"
-            label="เอกสารอ้างอิง"
-          />
-        </q-card-section>
-        <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
-          bordered
-          :paging="true"
-          dense
-          :filter="historyKeyword"
-          v-model:pagination="pagination"
-          :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" v-if="mode === 'table'">
-            <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-td auto-width> </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
+            bordered
+            :paging="true"
+            dense
+            :filter="historyKeyword"
+            v-model:pagination="historyPagination"
+            :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" v-if="mode === 'table'">
+              <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-td auto-width> </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-page>
+      </q-page-container>
+    </q-layout>
   </q-dialog>
 </template>
 

From 71b92a24b5e17525daee834fd0d6dc6a6d12cd28 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 2 Apr 2024 10:23:22 +0700
Subject: [PATCH 2/2] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3/=E0=B8=AB=E0=B8=A5=E0=B8=B1=E0=B8=81?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B9=E0=B8=95=E0=B8=A3=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=9D=E0=B8=B6=E0=B8=81=E0=B8=AD=E0=B8=9A=E0=B8=A3=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=B8=E0=B8=87=E0=B9=80=E0=B8=97=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=AB=E0=B8=B2=E0=B8=99=E0=B8=84=E0=B8=A3=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9B=E0=B9=87=E0=B8=99=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/components/BasicInfo.vue   |  10 +-
 .../15_development/components/MainTab.vue     | 110 +++++++++++-------
 .../15_development/components/Target.vue      |   6 +-
 src/modules/15_development/views/MainPage.vue |  45 ++++++-
 4 files changed, 121 insertions(+), 50 deletions(-)

diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index ab7f6ee68..90d4dceeb 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
@@ -40,7 +40,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
+  <!-- <q-form greedy @submit.prevent @validation-success="onSubmit"> -->
     <div class="row col-12 q-col-gutter-md q-pa-md">
       <div class="col-xs-6 col-sm-2 col-md-2">
         <datepicker
@@ -138,7 +138,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <q-separator />
+    <!-- <q-separator />
     <div class="text-right q-pa-sm">
       <q-btn
         dense
@@ -151,8 +151,8 @@ onMounted(() => {
       >
         <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
-    </div>
-  </q-form>
+    </div> -->
+  <!-- </q-form> -->
 
   <DialogSelectAgency
     v-model:modal="modalDialogSelect"
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index ea947bb0a..caa909f52 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
 import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
@@ -8,56 +9,81 @@ import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue
 import FollowResult from "@/modules/15_development/components/FollowResult.vue";
 import Other from "@/modules/15_development/components/Other.vue";
 
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
+const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 const tab = ref<string>("BasicInfo");
+
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
 </script>
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      flat
-      round
-      dense
-      class="q-mr-sm"
-      icon="mdi-arrow-left"
-      color="primary"
-      @click="router.go(-1)"
-    />
-    {{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }}
-  </div>
-
-  <q-card flat bordered class="col-12">
-    <q-tabs
-      v-model="tab"
-      dense
-      align="left"
-      inline-label
-      class="rounded-borders"
-      indicator-color="primary"
-      active-bg-color="teal-1"
-      active-class="text-primary"
-    >
-      <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
-      <q-tab name="Target" label="เป้าหมาย" />
-      <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
-      <q-tab name="FollowResult" label="การติดตามการประเมินผล" />
-      <q-tab name="Other" label="อื่นๆ" />
-    </q-tabs>
-    <q-separator />
-    <div class="q-pa-sm" style="padding: 0px">
-      <q-tab-panels v-model="tab" animated>
-        <q-tab-panel style="padding: 0px" name="BasicInfo">
-          <BasicInfo />
-        </q-tab-panel>
-        <q-tab-panel name="Target"> <Target /></q-tab-panel>
-        <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
-        <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
-        <q-tab-panel name="Other"> <Other /> </q-tab-panel>
-      </q-tab-panels>
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        flat
+        round
+        dense
+        class="q-mr-sm"
+        icon="mdi-arrow-left"
+        color="primary"
+        @click="router.go(-1)"
+      />
+      {{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }}
+      <q-space />
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-px-md"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <!-- <q-btn unelevated label="บันทึก" color="public" @click="onSubmit">
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn> -->
     </div>
-  </q-card>
+
+    <q-card flat bordered class="col-12">
+      <q-tabs
+        v-model="tab"
+        dense
+        align="left"
+        inline-label
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
+      >
+        <q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
+        <q-tab name="Target" label="เป้าหมาย" />
+        <q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
+        <q-tab name="FollowResult" label="การติดตามการประเมินผล" />
+        <q-tab name="Other" label="อื่นๆ" />
+      </q-tabs>
+      <q-separator />
+      <div class="q-pa-sm" style="padding: 0px">
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel style="padding: 0px" name="BasicInfo">
+            <BasicInfo />
+          </q-tab-panel>
+          <q-tab-panel name="Target"> <Target /></q-tab-panel>
+          <q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
+          <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
+          <q-tab-panel name="Other"> <Other /> </q-tab-panel>
+        </q-tab-panels>
+      </div>
+    </q-card>
+  </q-form>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index eb8b87105..7b383b950 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -489,7 +489,8 @@ onMounted(() => {
                 hide-bottom-space
                 v-model="formGroupTarget.amount"
                 label="จำนวน(คน)"
-                mask="#####"
+                mask="#"
+                reverse-fill-mask
                 :rules="[
               (val:string) =>
                 !!val || `${'กรุณากรอกจำนวน(คน)'}`,
@@ -545,7 +546,8 @@ onMounted(() => {
                 hide-bottom-space
                 v-model="formGroupRelate.amount"
                 label="จำนวน(คน)"
-                mask="#####"
+                mask="#"
+                reverse-fill-mask
                 :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกจำนวน(คน)'}`,
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index ca45a44e8..18efe50cb 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -47,6 +47,27 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["year", "name", "org"]);
 
+const itemDownload = ref<any>([
+  {
+    label: "ดาวน์โหลด 1",
+    value: "",
+    icon: "mdi-file-pdf-box",
+    color: "green",
+  },
+  {
+    label: "ดาวน์โหลด 2",
+    value: "",
+    icon: "mdi-file-table",
+    color: "red",
+  },
+  {
+    label: "ดาวน์โหลด 3",
+    value: "",
+    icon: "mdi-file-word",
+    color: "blue",
+  },
+]);
+
 function fetchListProject() {
   showLoader();
   const data = [
@@ -115,11 +136,33 @@ onMounted(() => {
           </q-input>
         </template>
       </datepicker>
-      <q-btn flat round dense icon="add" color="primary" @click="onClickAddOrView()">
+      <q-btn
+        flat
+        round
+        dense
+        icon="add"
+        color="primary"
+        @click="onClickAddOrView()"
+      >
         <q-tooltip>เพิ่ม</q-tooltip>
       </q-btn>
       <q-space />
       <div class="row q-gutter-sm">
+        <q-btn flat round color="primary" icon="mdi-download-outline">
+          <q-menu>
+            <q-list style="min-width: 100px" dense>
+              <q-item clickable v-close-popup v-for="items in itemDownload">
+                <q-item-section avatar>
+                  <q-icon :color="items.color" :name="items.icon" />
+                </q-item-section>
+                <q-item-section :class="`text-${items.color}`">{{
+                  items.label
+                }}</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+
         <q-input
           standout
           dense