From de177a5a1877a923304b3c9a0e28c650497db77a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 5 Aug 2024 11:08:01 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=20=3D>=20list,=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B8=A7,=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TableView.vue                  | 56 +++++++++-----
 .../detail/GovernmentInformation/01_Info.vue  |  8 +-
 .../GovernmentInformation/02_Discipline.vue   | 54 ++++++-------
 .../02_DisciplineHistory.vue                  |  2 +-
 .../detail/GovernmentInformation/03_Leave.vue | 54 +++++++------
 .../GovernmentInformation/03_LeaveHistory.vue |  2 +-
 .../04_PerformSpecialWork.vue                 | 58 +++++++-------
 .../04_PerformSpecialWorkHistory.vue          |  2 +-
 .../detail/PersonalInformation/01_Profile.vue | 10 +--
 .../02_NameChangeHistory.vue                  | 53 +++++--------
 .../detail/PersonalInformation/03_Address.vue | 10 +--
 .../PersonalInformation/04_FamilyNew.vue      | 31 +++-----
 .../PersonalInformation/05_Education.vue      | 77 ++++++++-----------
 .../PersonalInformation/06_SpecialSkill.vue   | 72 ++++++++---------
 .../04_registryPerson/views/requestEdit.vue   | 28 ++++---
 15 files changed, 239 insertions(+), 278 deletions(-)

diff --git a/src/modules/04_registryPerson/components/TableView.vue b/src/modules/04_registryPerson/components/TableView.vue
index c5e98ef84..d653a61db 100644
--- a/src/modules/04_registryPerson/components/TableView.vue
+++ b/src/modules/04_registryPerson/components/TableView.vue
@@ -308,6 +308,7 @@ watch(
     >
     <template v-slot:header="props">
       <q-tr :props="props">
+        <q-th auto-width />
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium" v-if="col.name === 'posLevel'">{{
             empType === "officer" ? col.label : "ระดับชั้นงาน"
@@ -327,6 +328,21 @@ watch(
     </template>
     <template v-slot:body="props" v-if="store.mode === 'table'">
       <q-tr :props="props">
+        <q-td auto-width>
+          <q-btn
+            icon="mdi-eye"
+            round
+            dense
+            flat
+            color="info"
+            @click.stpo.pervent="
+              checkPermission($route)?.attrIsGet &&
+                onClickViewDetail(props.row.id)
+            "
+          >
+            <q-tooltip>รายละเอียด</q-tooltip>
+          </q-btn>
+        </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name === 'no'">
             {{
@@ -342,21 +358,7 @@ watch(
                   </q-avatar>
                 </q-item-section>
                 <q-item-section>
-                  <div
-                    :class="
-                      checkPermission($route)?.attrIsGet
-                        ? 'text-weight-medium text-primary cursor-pointer'
-                        : 'cursor-pointer text-weight-medium'
-                    "
-                    @click="
-                      checkPermission($route)?.attrIsGet
-                        ? onClickViewDetail(props.row.id)
-                        : undefined
-                    "
-                  >
-                    <q-tooltip v-if="checkPermission($route)?.attrIsGet"
-                      >ดูทะเบียนประวัติ</q-tooltip
-                    >
+                  <div class="text-weight-medium">
                     {{
                       `${props.row.prefix ? props.row.prefix : ""}${
                         props.row.firstName
@@ -376,7 +378,25 @@ watch(
     </template>
     <template v-slot:item="props" v-else>
       <div class="col-xs-12 col-sm-4 col-md-3">
-        <q-card flat bordered class="">
+        <q-card flat bordered>
+          <div
+            class="row justify-end q-mr-md"
+            v-if="checkPermission($route)?.attrIsGet"
+          >
+            <div class="col-1">
+              <q-btn
+                flat
+                dense
+                round
+                icon="mdi-eye"
+                color="info"
+                @click="onClickViewDetail(props.row.id)"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        <q-separator/>
           <q-card-section class="text-center q-pb-none">
             <q-avatar size="80px" class="bg-grey-2">
               <q-img :src="props.row.avatar" />
@@ -431,7 +451,7 @@ watch(
               </q-card-section>
             </q-card>
           </q-card-section>
-          <q-separator inset v-if="checkPermission($route)?.attrIsGet" />
+          <!-- <q-separator inset v-if="checkPermission($route)?.attrIsGet" />
           <q-btn
             v-if="checkPermission($route)?.attrIsGet"
             flat
@@ -439,7 +459,7 @@ watch(
             label="ดูเพิ่มเติม"
             class="hover-button full-width q-pa-md"
             @click="onClickViewDetail(props.row.id)"
-          />
+          /> -->
         </q-card>
       </div>
     </template>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
index 76c6695d0..e7b5644e5 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
@@ -438,20 +438,20 @@ onMounted(() => {
     <div class="q-gutter-x-sm">
       <q-btn
         v-if="checkPermission($route)?.attrIsUpdate"
-        color="primary"
-        icon="mdi-pencil-outline"
         flat
         dense
         round
+        color="edit"
+        icon="edit"
         @click="openDialogEdit()"
         ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
       >
       <q-btn
-        color="info"
-        icon="mdi-history"
         flat
         dense
         round
+        color="deep-purple"
+        icon="mdi-history"
         @click="openDialogHistory()"
         ><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn
       >
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
index 5871d061d..6b4e28482 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
@@ -7,7 +7,6 @@ import type {
   RequestItemsObject,
   FormFilter,
   DataOption,
-  DisciplineOps,
 } from "@/modules/04_registryPerson/interface/index/discipline";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -455,33 +454,30 @@ onMounted(async () => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            color="primary"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            icon="mdi-pencil-outline"
-            clickable
-            @click="openDialogEdit(props.row)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
+            color="deep-purple"
             icon="mdi-history"
             @click="openDialogHistory(props.row.id)"
           >
             <q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
           </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            clickable
+            @click="openDialogEdit(props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name === 'no'">
@@ -500,24 +496,24 @@ onMounted(async () => {
         <q-card flat bordered class="q-pa-none">
           <div class="row bg-grey-3">
             <q-space />
-            <div class="q-gutter-x-sm">
+            <div>
               <q-btn
-                v-if="checkPermission($route)?.attrIsUpdate"
-                color="primary"
-                icon="mdi-pencil-outline"
-                flat
-                round
-                @click="openDialogEdit(props.row)"
-                ><q-tooltip>แก้ไข</q-tooltip></q-btn
-              >
-              <q-btn
-                color="info"
+                color="deep-purple"
                 icon="mdi-history"
                 flat
                 round
                 @click="openDialogHistory(props.row.id)"
                 ><q-tooltip>ประวิติแก้ไขวินัย</q-tooltip></q-btn
               >
+              <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
+                color="edit"
+                icon="edit"
+                flat
+                round
+                @click="openDialogEdit(props.row)"
+                ><q-tooltip>แก้ไข</q-tooltip></q-btn
+              >
             </div>
           </div>
           <q-separator />
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
index d8e521816..df36ab3b7 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
@@ -260,7 +260,7 @@ watch(modal, (status) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div v-if="col.name === 'no'">
                   {{
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
index c350526b2..f1e024159 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
@@ -566,33 +566,30 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            color="primary"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            icon="mdi-pencil-outline"
-            clickable
-            @click="openDialogEdit(props.row)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
+            color="deep-purple"
             icon="mdi-history"
             @click="openDialogHistory(props.row.id)"
           >
             <q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
           </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            clickable
+            @click="openDialogEdit(props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name === 'no'">
@@ -619,24 +616,25 @@ onMounted(() => {
         <q-card flat bordered class="q-pa-none">
           <div class="row bg-grey-3">
             <q-space />
-            <div class="q-gutter-x-sm">
+            <div>
               <q-btn
-                v-if="checkPermission($route)?.attrIsUpdate"
-                color="primary"
-                icon="mdi-pencil-outline"
-                flat
-                round
-                @click="openDialogEdit(props.row)"
-                ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
-              >
-              <q-btn
-                color="info"
+              
+                color="deep-purple"
                 icon="mdi-history"
                 flat
                 round
                 @click="openDialogHistory(props.row.id)"
                 ><q-tooltip>ประวิติแก้ไขการลา</q-tooltip></q-btn
               >
+              <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
+                color="edit"
+                icon="edit"
+                flat
+                round
+                @click="openDialogEdit(props.row)"
+                ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+              >
             </div>
           </div>
           <q-separator />
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
index 1a5edb912..750445789 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
@@ -286,7 +286,7 @@ watch(modal, (status) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div v-if="col.name === 'no'">
                   {{
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
index 281bed892..f0dc5a696 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
@@ -33,7 +33,6 @@ const {
   showLoader,
   hideLoader,
   success,
-  dialogRemove,
 } = mixin;
 
 const modal = ref<boolean>(false);
@@ -411,33 +410,30 @@ onMounted(async () => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            color="primary"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            icon="mdi-pencil-outline"
-            clickable
-            @click="openDialogEdit(props.row)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
+            color="deep-purple"
             icon="mdi-history"
             @click="openDialogHistory(props.row.id)"
           >
             <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
           </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            clickable
+            @click="openDialogEdit(props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name === 'no'">
@@ -457,24 +453,24 @@ onMounted(async () => {
         <q-card flat bordered class="q-pa-none">
           <div class="row bg-grey-3">
             <q-space />
-            <div class="q-gutter-x-sm">
+            <div>
               <q-btn
-                v-if="checkPermission($route)?.attrIsUpdate"
-                color="primary"
-                icon="mdi-pencil-outline"
-                flat
-                round
-                @click="openDialogEdit(props.row)"
-                ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
-              >
-              <q-btn
-                color="info"
+                color="deep-purple"
                 icon="mdi-history"
                 flat
                 round
                 @click="openDialogHistory(props.row.id)"
-                ><q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip></q-btn
-              >
+                ><q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
+                color="edit"
+                icon="edit"
+                flat
+                round
+                @click="openDialogEdit(props.row)"
+                ><q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
             </div>
           </div>
           <q-separator />
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
index 18dbeacd4..17b3189f0 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
@@ -262,7 +262,7 @@ watch(modal, (status) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div v-if="col.name === 'no'">
                   {{
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
index 5d1ec0812..047be7421 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
@@ -428,14 +428,14 @@ onMounted(() => {
 
 <template>
   <div class="row q-gutter-sm items-center">
-    <div class="toptitle col text-right q-gutter-x-sm">
+    <div class="toptitle col text-right">
       <q-btn
         v-if="checkPermission($route)?.attrIsUpdate"
         flat
         round
         dense
-        icon="mdi-pencil-outline"
-        color="primary"
+        icon="edit"
+        color="edit"
         @click="onClickOpenDialog"
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
@@ -445,7 +445,7 @@ onMounted(() => {
         flat
         round
         icon="mdi-history"
-        color="info"
+        color="deep-purple"
         @click="clickHistory"
       >
         <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
@@ -890,7 +890,7 @@ onMounted(() => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 1a93ec421..d18533934 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -521,7 +521,7 @@ watch(
 </script>
 
 <template>
-  <div class="text-primary row q-mb-sm">
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
       v-if="checkPermission($route)?.attrIsUpdate"
       round
@@ -601,28 +601,37 @@ watch(
     </template>
 
     <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
             color="green"
             flat
             dense
             round
-            size="14px"
             icon="mdi-file-document-outline"
             @click="fetchProfile(props.row.id)"
           >
             <q-tooltip>ดาวน์โหลด</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            color="primary"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            icon="mdi-pencil-outline"
+            icon="mdi-history"
+            color="deep-purple"
+            @click="
+              () => (fetchHistoryData(props.row.id), (historyDialog = true))
+            "
+          >
+            <q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
             clickable
             @click="
               () => {
@@ -632,32 +641,6 @@ watch(
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-history"
-            @click="
-              () => (fetchHistoryData(props.row.id), (historyDialog = true))
-            "
-          >
-            <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), deleteFileData(props.row.id)"
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn> -->
         </q-td>
         <q-td v-for="(col, index) in props.cols" :key="col.name">
           <div class="table_ellipsis">
@@ -975,7 +958,7 @@ watch(
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value === "" ? "-" : col.value }}
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
index 58ac6599b..1db04b0db 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
@@ -485,14 +485,14 @@ onMounted(async () => {
 
 <template>
   <div class="row q-gutter-sm items-center">
-    <div class="toptitle col text-right q-gutter-x-sm">
+    <div class="toptitle col text-right">
       <q-btn
         v-if="checkPermission($route)?.attrIsUpdate"
         flat
         round
         dense
-        icon="mdi-pencil-outline"
-        color="primary"
+        icon="edit"
+        color="edit"
         @click="onClickOpenDialog"
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
@@ -502,7 +502,7 @@ onMounted(async () => {
         flat
         round
         icon="mdi-history"
-        color="info"
+        color="deep-purple"
         @click="clickHistory"
       >
         <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
@@ -920,7 +920,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
index 7a002a854..483987de8 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
@@ -443,9 +443,8 @@ onMounted(() => {
             v-if="checkPermission($route)?.attrIsUpdate"
             round
             flat
-            color="primary"
-            icon="mdi-pencil-outline"
-            size="14px"
+            color="edit"
+            icon="edit"
             dense
             @click="onOpenDialogForm('father')"
           >
@@ -455,9 +454,8 @@ onMounted(() => {
             round
             flat
             dense
-            color="info"
+            color="deep-purple"
             icon="mdi-history"
-            size="14px"
             @click="onOpenDialogHistory('father')"
           >
             <q-tooltip>ประวัติการแก้ไขข้อมูลบิดา</q-tooltip></q-btn
@@ -519,9 +517,8 @@ onMounted(() => {
             v-if="checkPermission($route)?.attrIsUpdate"
             round
             flat
-            color="primary"
-            icon="mdi-pencil-outline"
-            size="14px"
+            color="edit"
+            icon="edit"
             dense
             @click="onOpenDialogForm('mother')"
           >
@@ -531,9 +528,8 @@ onMounted(() => {
             round
             flat
             dense
-            color="info"
+            color="deep-purple"
             icon="mdi-history"
-            size="14px"
             @click="onOpenDialogHistory('mother')"
           >
             <q-tooltip>ประวัติการแก้ไขข้อมูลมารดา</q-tooltip></q-btn
@@ -598,7 +594,6 @@ onMounted(() => {
             dense
             color="primary"
             icon="add"
-            size="14px"
             @click="onOpenDialogForm('couple')"
           >
             <q-tooltip>เพิ่มคู่สมรส</q-tooltip></q-btn
@@ -610,9 +605,8 @@ onMounted(() => {
             round
             flat
             dense
-            color="info"
+            color="deep-purple"
             icon="mdi-history"
-            size="14px"
             @click="onOpenDialogHistory('couple')"
           >
             <q-tooltip>ประวัติการแก้ไขข้อมูลคู่สมรส</q-tooltip></q-btn
@@ -699,7 +693,6 @@ onMounted(() => {
             dense
             color="primary"
             icon="add"
-            size="14px"
             @click="onOpenDialogForm('children')"
           >
             <q-tooltip>เพิ่มบุตร</q-tooltip></q-btn
@@ -720,9 +713,8 @@ onMounted(() => {
                 v-if="checkPermission($route)?.attrIsUpdate"
                 round
                 flat
-                color="primary"
-                icon="mdi-pencil-outline"
-                size="14px"
+                color="edit"
+                icon="edit"
                 dense
                 @click="onOpenDialogForm('children', true, item)"
               >
@@ -732,9 +724,8 @@ onMounted(() => {
                 round
                 flat
                 dense
-                color="info"
+                color="deep-purple"
                 icon="mdi-history"
-                size="14px"
                 @click="onOpenDialogHistory('children', item.id)"
               >
                 <q-tooltip>ประวัติการแก้ไขข้อมูลบุตร</q-tooltip></q-btn
@@ -1057,7 +1048,7 @@ onMounted(() => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
index 08260aba4..0202ea06a 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
@@ -807,18 +807,27 @@ onMounted(async () => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            color="primary"
+            color="deep-purple"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            icon="mdi-pencil-outline"
-            clickable
+            icon="mdi-history"
+            @click="
+              () => (fetchHistoryData(props.row.id), (historyDialog = true))
+            "
+          >
+            <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            icon="edit"
+            color="edit"
             @click="
               () => {
                 editForm(props.row);
@@ -827,32 +836,6 @@ onMounted(async () => {
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-history"
-            @click="
-              () => (fetchHistoryData(props.row.id), (historyDialog = true))
-            "
-          >
-            <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-td v-for="col in props.cols" :key="col.id">
           <div>
@@ -868,27 +851,27 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
+              dense
               flat
               round
-              color="primary"
-              size="14px"
-              icon="mdi-pencil-outline"
-              @click="editForm(props.row)"
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              color="info"
-              size="14px"
-              icon="history"
+              color="deep-purple"
+              icon="mdi-history"
               @click="
                 () => (fetchHistoryData(props.row.id), (historyDialog = true))
               "
             >
               <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
             </q-btn>
+            <q-btn
+              dense
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click="editForm(props.row)"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <div class="row">
@@ -1468,7 +1451,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value === "" ? "-" : col.value }}
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
index ac0b5fe53..9c6568248 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -409,32 +409,13 @@ onMounted(async () => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            color="primary"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            icon="mdi-pencil-outline"
-            clickable
-            @click="
-              () => {
-                editForm(props.row);
-              }
-            "
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
+            color="deep-purple"
             icon="mdi-history"
             @click="
               fetchHistoryData(props.row.id);
@@ -443,6 +424,21 @@ onMounted(async () => {
           >
             <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
           </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            @click="
+              () => {
+                editForm(props.row);
+              }
+            "
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div>{{ col.value ? col.value : "-" }}</div>
@@ -456,10 +452,24 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
+              dense
               flat
               round
-              color="primary"
-              icon="mdi-pencil-outline"
+              color="deep-purple"
+              icon="mdi-history"
+              @click="
+                fetchHistoryData(props.row.id);
+                historyDialog = true;
+              "
+            >
+              <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
+            </q-btn>
+            <q-btn
+              dense
+              flat
+              round
+              color="edit"
+              icon="edit"
               size="14px"
               @click="
                 () => {
@@ -469,20 +479,6 @@ onMounted(async () => {
             >
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
-            <q-btn
-              flat
-              class="no-shadow toggle-borderd"
-              round
-              size="14px"
-              color="info"
-              icon="mdi-history"
-              @click="
-                fetchHistoryData(props.row.id);
-                historyDialog = true;
-              "
-            >
-              <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
-            </q-btn>
           </q-card-actions>
           <q-separator />
           <div class="row">
@@ -637,7 +633,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props" v-if="mode === 'table'">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>{{ col.value ? col.value : "-" }}</div>
               </q-td>
diff --git a/src/modules/04_registryPerson/views/requestEdit.vue b/src/modules/04_registryPerson/views/requestEdit.vue
index 6406f2b90..1027331de 100644
--- a/src/modules/04_registryPerson/views/requestEdit.vue
+++ b/src/modules/04_registryPerson/views/requestEdit.vue
@@ -333,14 +333,26 @@ onMounted(() => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
+            <q-th auto-width />
             <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 auto-width>
+              <q-btn
+                icon="edit"
+                round
+                dense
+                flat
+                color="edit"
+                @click.pervent="onclickEdit(props.row.id)"
+              >
+                <q-tooltip>แก้ไขสถานะคำร้อง</q-tooltip>
+              </q-btn>
+            </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
@@ -352,7 +364,6 @@ onMounted(() => {
                   dense
                   flat
                   color="primary"
-                  size="12px"
                   @click.pervent="onDownloadFile(props.row.id)"
                 >
                   <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
@@ -362,19 +373,6 @@ onMounted(() => {
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
-            <q-td>
-              <q-btn
-                icon="edit"
-                round
-                dense
-                flat
-                color="edit"
-                size="12px"
-                @click.pervent="onclickEdit(props.row.id)"
-              >
-                <q-tooltip>แก้ไขสถานะคำร้อง</q-tooltip>
-              </q-btn>
-            </q-td>
           </q-tr>
         </template>
         <template v-slot:pagination="scope">