From 8ffd88a469c602dba37fbddc5594f36d61555514 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Mon, 22 Apr 2024 17:08:23 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=97=E0=B8=B0?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=A1=E0=B8=B2=E0=B8=93=E0=B9=81=E0=B8=97=E0=B9=87?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=AA=E0=B9=88=E0=B8=A7=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

---
 .../detail/PersonalInformation/01_Profile.vue |  73 +--
 .../02_NameChangeHistory.vue                  | 588 +++++++++---------
 .../detail/PersonalInformation/Main.vue       |  85 +--
 .../components/detail/TabMain.vue             |  95 +--
 .../04_registryNew/views/detailView.vue       |  41 +-
 src/modules/04_registryNew/views/list.vue     |   2 +-
 6 files changed, 438 insertions(+), 446 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
index 3a89b8994..8db4e48ff 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -461,26 +461,16 @@ onMounted(async () => {
 
   <!-- Edit Dialog -->
   <q-dialog v-model="modal" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px"
-      class="bg-white"
-    >
+    <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <q-header>
-          <q-toolbar>
-            <DialogHeader
-              tittle="แก้ไขประวัติส่วนตัว"
-              :close="() => (modal = false)"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
+        <DialogHeader
+            tittle="แก้ไขประวัติส่วนตัว"
+            :close="() => (modal = false)"
+          />
 
-        <q-page-container>
-          <q-page class="q-pa-md">
-            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+        <q-separator />
+        <q-card-section style="max-height: 50vh" class="scroll">
+          <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
                   dense
@@ -749,13 +739,12 @@ onMounted(async () => {
                 />
               </div>
             </div>
-          </q-page>
-        </q-page-container>
+        </q-card-section>
 
-        <q-footer>
-          <q-separator color="grey-4" />
-          <q-toolbar class="fit row wrap justify-end items-start content-start">
-            <q-btn
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
               dense
               unelevated
               label="บันทึก"
@@ -766,32 +755,21 @@ onMounted(async () => {
             >
               <q-tooltip>บันทึกข้อมูล</q-tooltip>
             </q-btn>
-          </q-toolbar>
-        </q-footer>
+        </q-card-actions>
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
 
   <q-dialog v-model="modalHistory" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <DialogHeader
+    <q-card style="min-width: 80%">
+      <DialogHeader
             tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
             :close="() => (modalHistory = false)"
           />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
+      <q-separator />
 
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <div class="row q-gutter-sm q-mb-sm">
+      <q-card-section style="max-height: 50vh" class="scroll">
+         <div class="row q-gutter-sm q-mb-sm">
             <q-space />
             <q-input
               standout
@@ -864,9 +842,14 @@ onMounted(async () => {
               </q-tr>
             </template>
           </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right">
+        
+      </q-card-actions>
+    </q-card>
   </q-dialog>
 </template>
 
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 535b5518e..3490935db 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -683,237 +683,224 @@ watch(
   </d-table>
 
   <q-dialog v-model="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 350px"
-      class="bg-white"
-    >
+    <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <q-header>
-          <q-toolbar>
-            <dialog-header
-              :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-              :close="closeDialog"
-            />
-          </q-toolbar>
-          <q-separator color="grey-4" />
-        </q-header>
+        <dialog-header
+          :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+          :close="closeDialog"
+        />
+        <q-separator color="grey-4" />
 
-        <q-page-container>
-          <q-page 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
-                />
-              </div>
+        <q-card-section style="max-height: 50vh" class="scroll">
+          <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
+              />
             </div>
-            <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="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="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 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>
-                    <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 && dialogStatus === 'create'"
-                class="row text-negative items-center q-mt-sm"
-              >
-                กรุณาอัพโหลดเอกสาร
-                <q-icon name="mdi-alert-circle q-ml-sm" size="24px" />
-              </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 && dialogStatus === 'create'"
+              class="row text-negative items-center q-mt-sm"
+            >
+              กรุณาอัพโหลดเอกสาร
+              <q-icon name="mdi-alert-circle q-ml-sm" size="24px" />
             </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
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+           <q-btn
               id="onSubmit"
               type="submit"
               dense
@@ -934,99 +921,88 @@ watch(
             >
               <q-tooltip>บันทึกข้อมูล</q-tooltip>
             </q-btn>
-          </q-toolbar>
-        </q-footer>
+        </q-card-actions> 
       </q-form>
-    </q-layout>
+    </q-card>
   </q-dialog>
+  
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <dialog-header
+    <q-card  style="min-width: 70%">
+      <dialog-header
             tittle="ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล"
             :close="closeHistoryDialog"
           />
-        </q-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
+      <q-separator />
 
-      <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"
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+          <q-space />
+          <q-input
             dense
-            :filter="historyKeyword"
-            v-model:pagination="historyPagination"
-            :rows-per-page-options="[20, 50, 100]"
-            class="custom-header-table"
-            :visible-columns="historyVisibleColumns"
+            outlined
+            bg-color="white"
+            v-model="historyKeyword"
+            label="ค้นหา"
+            class="q-mr-sm"
           >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width />
-              </q-tr>
+            <template v-slot:append>
+              <q-icon name="search" />
             </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div>
-                    {{ col.value === "" ? "-" : col.value }}
-                  </div>
-                </q-td>
-                <q-td auto-width> </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-page>
-      </q-page-container>
-    </q-layout>
+          </q-input>
+
+          <q-select
+            v-model="historyVisibleColumns"
+            multiple
+            outlined
+            dense
+            bg-color="white"
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="historyColumns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </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-card-section>
+    </q-card>     
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
index 46ed4d66b..852b5c649 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
@@ -12,52 +12,55 @@ import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInf
 const tab = ref<string>("1");
 </script>
 <template>
-  <div class="row items-center q-mb-md">
-    <div class="text-dark row items-center text-weight-bold">
-      <q-icon name="mdi-account" class="q-mr-md" size="sm" />
-      <h3 class="resigtry-tab-title">ข้อมูลส่วนตัว</h3>
+  <div class="row items-center q-my-md">
+    <div class="text-dark row items-center q-px-md">
+      <q-icon name="mdi-account" class="q-mr-md" size="22px" />
+      <div class="text-subtitle1 text-weight-bold">ข้อมูลส่วนตัว</div>
     </div>
   </div>
 
   <q-separator />
-  <q-tabs
-    v-model="tab"
-    class="text-grey"
-    active-color="blue"
-    indicator-color="white"
-    align="left"
-    narrow-indicator
-    bordered
-  >
-    <q-tab name="1" label="ประวัติส่วนตัว" />
-    <q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
-    <q-tab name="3" label="ข้อมูลที่อยู่" />
-    <q-tab name="4" label="ข้อมูลครอบครัว" />
-    <q-tab name="5" label="ประวัติการศึกษา" />
-    <q-tab name="6" label="ความสามารถพิเศษ" />
-  </q-tabs>
-  <q-separator />
+  <q-card>
+    <q-tabs
+      v-model="tab"
+      class="text-grey q-pl-sm"
+      active-color="blue-8"
+      align="left"
+      bordered
+      narrow-indicator
+      indicator-color="transparent"
+      dense
+      >
+        <q-tab name="1" label="ประวัติส่วนตัว" />
+        <q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
+        <q-tab name="3" label="ข้อมูลที่อยู่" />
+        <q-tab name="4" label="ข้อมูลครอบครัว" />
+        <q-tab name="5" label="ประวัติการศึกษา" />
+        <q-tab name="6" label="ความสามารถพิเศษ" />
+      </q-tabs>
+    <q-separator />
 
-  <q-tab-panels v-model="tab" animated>
-    <q-tab-panel name="1">
-      <Profile />
-    </q-tab-panel>
-    <q-tab-panel name="2">
-      <NameChangeHistory />
-    </q-tab-panel>
-    <q-tab-panel name="3">
-      <Address />
-    </q-tab-panel>
-    <q-tab-panel name="4">
-      <Family />
-    </q-tab-panel>
-    <q-tab-panel name="5">
-      <Education />
-    </q-tab-panel>
-    <q-tab-panel name="6">
-      <SpecialSkill />
-    </q-tab-panel>
-  </q-tab-panels>
+    <q-tab-panels v-model="tab" animated >
+      <q-tab-panel name="1">
+        <Profile />
+      </q-tab-panel>
+      <q-tab-panel name="2">
+        <NameChangeHistory />
+      </q-tab-panel>
+      <q-tab-panel name="3">
+        <Address />
+      </q-tab-panel>
+      <q-tab-panel name="4">
+        <Family />
+      </q-tab-panel>
+      <q-tab-panel name="5">
+        <Education />
+      </q-tab-panel>
+      <q-tab-panel name="6">
+        <SpecialSkill />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/TabMain.vue b/src/modules/04_registryNew/components/detail/TabMain.vue
index 7cacabc1c..7664becd5 100644
--- a/src/modules/04_registryNew/components/detail/TabMain.vue
+++ b/src/modules/04_registryNew/components/detail/TabMain.vue
@@ -43,44 +43,59 @@ const splitterModel = ref<number>(12);
 </script>
 
 <template>
-  <q-splitter v-model="splitterModel" disable>
-    <template v-slot:before>
-      <q-tabs v-model="store.tabMain" vertical class="text-blue">
-        <q-tab
-          class="hover-tab"
-          v-for="(tab, index) in itemsTab"
-          :key="index"
-          :name="tab.name"
-          :icon="tab.icon"
-          :label="tab.label"
-        />
-      </q-tabs>
-    </template>
-
-    <template v-slot:after>
-      <q-tab-panels
-        v-model="store.tabMain"
-        animated
-        swipeable
-        vertical
-        transition-prev="jump-up"
-        transition-next="jump-up"
-        class="q-px-md"
+    <q-splitter 
+        v-model="splitterModel" 
+        disable
+        class="split"
       >
-        <q-tab-panel
-          v-for="(tab, index) in itemsTab"
-          :key="index"
-          :name="tab.name"
-        >
-          <PersonalInformationMain v-if="store.tabMain === '1'" />
-          <GovernmentInformationMain v-if="store.tabMain === '2'" />
-          <salaryMain v-if="store.tabMain === '3'" />
-          <AchievementMain v-if="store.tabMain === '4'" />
-          <OtherMaim v-if="store.tabMain === '5'" />
-        </q-tab-panel>
-      </q-tab-panels>
-    </template>
-  </q-splitter>
+      <template v-slot:before>
+        <div class=""><!--  bg-tab-regi  -->
+          <q-tabs
+            v-model="store.tabMain" 
+            vertical 
+            
+            class="text-grey-6 text-weight-light" 
+            active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
+            ><!-- indicator-color="transparent" -->
+            <q-tab
+              class="q-py-sm"
+              v-for="(tab, index) in itemsTab"
+              :key="index"
+              :name="tab.name"
+              :icon="tab.icon"
+              :label="tab.label"
+              
+            /><!-- hover-tab  -->
+          </q-tabs>
+        </div>
+      </template>
+
+      <template v-slot:after>
+        <q-tab-panels
+          v-model="store.tabMain"
+          animated
+          swipeable
+          vertical
+          transition-prev="jump-up"
+          transition-next="jump-up"
+          class="q-pa-none"
+        ><!--  split -->
+          <q-tab-panel
+            v-for="(tab, index) in itemsTab"
+            :key="index"
+            :name="tab.name"
+            class="q-pa-none"
+            
+          >
+            <PersonalInformationMain v-if="store.tabMain === '1'" />
+            <GovernmentInformationMain v-if="store.tabMain === '2'" />
+            <salaryMain v-if="store.tabMain === '3'" />
+            <AchievementMain v-if="store.tabMain === '4'" />
+            <OtherMaim v-if="store.tabMain === '5'" />
+          </q-tab-panel>
+        </q-tab-panels>
+      </template>
+    </q-splitter>
 </template>
 
 <style scoped>
@@ -89,4 +104,10 @@ const splitterModel = ref<number>(12);
   color: white !important;
   opacity: 1 !important;
 }
+.bg-tab-regi{
+  background-color: #273238;
+} 
+.split{
+  border-radius: 10px !important;
+}
 </style>
diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
index f3373b405..6dfb20dcc 100644
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -369,7 +369,7 @@ onMounted(async () => {
     >
       <q-tooltip>ดาวน์ไฟล์</q-tooltip>
       <q-menu>
-        <q-list style="min-width: 120px">
+        <q-list style="min-width: 130px">
           <q-item clickable v-close-popup @click="onClickDownloadKp7('FULL')">
             <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
           </q-item>
@@ -381,12 +381,11 @@ onMounted(async () => {
     </q-btn>
   </div>
 
-  <q-card>
-    <div class="column" style="height: 160px">
+  <q-card >
+    <div class="column" style="height: 120px">
       <div class="col row items-center">
         <div class="row col-12">
-          <div class="col-sm-3 col-md-2"></div>
-          <div class="col">
+          <div class="col"  style="padding-left: 14%;">
             <div class="col-12 text-primary">
               <h2
                 class="title q-ma-none q-pa-none"
@@ -397,38 +396,38 @@ onMounted(async () => {
                 }}
               </h2>
             </div>
-            <div class="col-12 subtitle">{{ formDetail?.position }}</div>
+            <!-- <div class="col-12 subtitle">{{ formDetail?.position }}</div> -->
           </div>
         </div>
       </div>
 
       <div class="absolute-center-left q-ml-lg">
-        <q-avatar size="130px">
+        <q-avatar size="90px">
           <img :src="profilePicture" />
         </q-avatar>
         <q-btn
           round
-          color="white"
           text-color="primary"
           icon="mdi-pencil-outline"
-          style="position: absolute; bottom: 0; right: 0"
           @click="selectFile"
+          size="sm"
+          unelevated
+          class="bg-white btnEditImg"
         >
         </q-btn>
       </div>
 
-      <div class="col row items-center bg-teal-1">
-        <div class="row col-12">
-          <div class="col-sm-3 col-md-2"></div>
+      <div class="col row items-center bg-toolbar">
+        <div class="row col-12"  style="padding-left: 14%;">
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
-              <div class="col text-grey-6">ตำแหน่งในสายงาน</div>
+              <div class="col text-grey-6 text-caption">ตำแหน่งในสายงาน</div>
               <div class="col">{{ formDetail?.position || "-" }}</div>
             </div>
           </div>
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
-              <div class="col text-grey-6">ประเภทตำแหน่ง</div>
+              <div class="col text-grey-6 text-caption">ประเภทตำแหน่ง</div>
               <div class="col">
                 {{ formDetail?.posType?.posTypeName || "-" }}
               </div>
@@ -436,7 +435,7 @@ onMounted(async () => {
           </div>
           <div class="col-2">
             <div class="col-sm-3 col-md-3">
-              <div class="col text-grey-6">ระดับตำแหน่ง</div>
+              <div class="col text-grey-6 text-caption">ระดับตำแหน่ง</div>
               <div class="col">
                 {{ formDetail?.posLevel?.posLevelName || "-" }}
               </div>
@@ -447,7 +446,7 @@ onMounted(async () => {
     </div>
   </q-card>
 
-  <q-card class="q-mt-md rounded">
+  <q-card bordered class="q-mt-md rounded">
     <TabMain />
   </q-card>
 
@@ -584,4 +583,14 @@ h2.title {
 .rounded {
   border-radius: 10px;
 }
+
+.bg-toolbar{
+  background-color: #F2FBFA;
+}
+.btnEditImg{
+  position: absolute; 
+  bottom: 0; 
+  right: 0; 
+  border: 1px solid #EDEDED ;
+}
 </style>
\ No newline at end of file
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index 02ba0a9f3..9312f21ae 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -229,7 +229,7 @@ onMounted(async () => {
     ข้อมูลทะเบียนประวัติ
   </div> -->
 
-  <q-card class="q-mt-md">
+  <q-card class="q-mt-md ">
     <q-card-section class="card-img q-pb-lg">
       <div class="text-h5 text-center q-py-md text-weight-medium">
         ค้นหาข้อมูลทะเบียนประวัติ