From c8fef9712521c46db428a6527b13f6c2902080f1 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 1 Aug 2024 18:03:39 +0700
Subject: [PATCH] =?UTF-8?q?permission=20=3D>=20=E0=B9=82=E0=B8=84=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=A3=E0=B8=B2=E0=B8=81=E0=B8=B3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=87,=E0=B8=AD=E0=B8=B1=E0=B8=95=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B8=B3=E0=B8=A5=E0=B8=B1=E0=B8=87=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=88=E0=B8=B3,=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=A7=E0=B8=B1=E0=B8=95=E0=B8=B4,=20=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87,?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B9=89=E0=B8=87=E0=B8=84=E0=B9=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A7=E0=B9=87=E0=B8=9A=E0=B8=AA=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=B2,=20=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B9=81?=
 =?UTF-8?q?=E0=B8=82=E0=B9=88=E0=B8=87=E0=B8=82=E0=B8=B1=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_organization/views/main.vue    |    5 +
 .../03_recruiting/components/Table.vue        |    6 +-
 src/modules/03_recruiting/components/top1.vue |   17 +-
 .../03_recruiting/views/01_compete/Period.vue |   24 +-
 .../03_recruiting/views/03_editor/index.vue   |   15 +-
 .../components/TableView.vue                  |   19 +-
 .../Achievement/01_ProfessionalLicense.vue    |    4 +
 .../detail/Achievement/02_Train.vue           |    4 +
 .../detail/Achievement/03_Insignia.vue        |    6 +-
 .../Achievement/04_DeclarationHonor.vue       |    6 +-
 .../Achievement/05_ResultsPerformance.vue     |    6 +-
 .../detail/Employee/01_DataEmployee.vue       |    2 +
 .../detail/Employee/02_Employment.vue         |   12 +-
 .../detail/GovernmentInformation/01_Info.vue  |    3 +
 .../GovernmentInformation/02_Discipline.vue   |   26 +-
 .../detail/GovernmentInformation/03_Leave.vue |   13 +-
 .../04_PerformSpecialWork.vue                 |   26 +-
 .../detail/Other/01_OtherInformation.vue      |   14 +-
 .../components/detail/Other/02_Document.vue   |    3 +
 .../detail/PersonalInformation/01_Profile.vue |  166 +-
 .../02_NameChangeHistory.vue                  |  152 +-
 .../detail/PersonalInformation/03_Address.vue |    3 +
 .../detail/PersonalInformation/04_Family.vue  | 1363 -----------------
 .../PersonalInformation/04_FamilyNew.vue      |    7 +
 .../PersonalInformation/05_Education.vue      |    4 +
 .../PersonalInformation/06_SpecialSkill.vue   |  157 +-
 .../detail/Salary/01_PositionSalary.vue       |   14 +-
 .../detail/Salary/02_NotReceiveSalary.vue     |   19 +-
 .../components/detail/TabMain.vue             |    6 +-
 .../04_registryPerson/views/detailView.vue    |  301 ++--
 .../08_registryEmployee/views/Main.vue        |   20 +-
 .../components/TreeTable.vue                  |   53 +-
 src/stores/menuList.ts                        |   30 +-
 src/utils/permissions.ts                      |    4 -
 34 files changed, 606 insertions(+), 1904 deletions(-)
 delete mode 100644 src/modules/04_registryPerson/components/detail/PersonalInformation/04_Family.vue

diff --git a/src/modules/02_organization/views/main.vue b/src/modules/02_organization/views/main.vue
index f580aad73..1824a137d 100644
--- a/src/modules/02_organization/views/main.vue
+++ b/src/modules/02_organization/views/main.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
+import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -175,6 +176,7 @@ onMounted(async () => {
         <strong>{{ date2Thai(store.orgPublishDate) }}</strong>
       </div>
       <q-btn
+        v-if="checkPermission($route)?.attrIsUpdate"
         dense
         class="q-px-md"
         color="indigo-9"
@@ -208,6 +210,7 @@ onMounted(async () => {
         >
           <div>
             <q-btn
+              v-if="checkPermission($route)?.attrIsCreate"
               flat
               style="background-color: #d8f5f2"
               round
@@ -242,6 +245,7 @@ onMounted(async () => {
               />
 
               <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
                 dense
                 class="q-px-md"
                 :outline="store.typeOrganizational === 'draft' ? false : true"
@@ -280,6 +284,7 @@ onMounted(async () => {
             </q-btn-group>
 
             <q-btn-dropdown
+              v-if="checkPermission($route)?.attrIsCreate"
               dense
               unelevated
               class="q-px-md"
diff --git a/src/modules/03_recruiting/components/Table.vue b/src/modules/03_recruiting/components/Table.vue
index bd08b044a..f3ff7bbe6 100644
--- a/src/modules/03_recruiting/components/Table.vue
+++ b/src/modules/03_recruiting/components/Table.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
     <!--  -->
-    <div class="q-gutter-sm" v-if="nornmalData == true">
+    <div
+      class="q-gutter-sm"
+      v-if="nornmalData == true && checkPermission($route)?.attrIsCreate"
+    >
       <q-btn
         size="12px"
         flat
@@ -123,6 +126,7 @@
   </q-table>
 </template>
 <script setup lang="ts">
+import { checkPermission } from "@/utils/permissions";
 import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 
diff --git a/src/modules/03_recruiting/components/top1.vue b/src/modules/03_recruiting/components/top1.vue
index 58db8da3a..bdd8b7809 100644
--- a/src/modules/03_recruiting/components/top1.vue
+++ b/src/modules/03_recruiting/components/top1.vue
@@ -19,7 +19,7 @@
     <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
       <q-btn
         size="12px"
-        v-if="!edit"
+        v-if="!edit && checkPermission($route)?.attrIsUpdate"
         flat
         round
         :disabled="disable"
@@ -33,7 +33,7 @@
         size="12px"
         flat
         round
-        v-if="edit"
+        v-if="edit && checkPermission($route)?.attrIsUpdate"
         :color="!edit ? 'grey-7' : 'public'"
         @click="save"
         icon="mdi-content-save-outline"
@@ -44,7 +44,7 @@
         size="12px"
         flat
         round
-        v-if="edit && !addEmployee"
+        v-if="edit && !addEmployee && checkPermission($route)?.attrIsUpdate"
         :color="!edit ? 'grey-7' : 'red'"
         @click="ClickCancel"
         icon="mdi-undo"
@@ -52,7 +52,14 @@
         <q-tooltip>ยกเลิก</q-tooltip>
       </q-btn>
     </div>
-    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
+    <div
+      class="q-pl-sm"
+      v-else-if="
+        iconAdd != '' &&
+        iconAdd != null &&
+        checkPermission($route)?.attrIsUpdate
+      "
+    >
       <q-btn
         size="12px"
         flat
@@ -70,6 +77,7 @@
 
     <div class="q-pl-sm" v-else>
       <q-btn
+        v-if="checkPermission($route)?.attrIsUpdate"
         size="12px"
         flat
         round
@@ -99,6 +107,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import { checkPermission } from "@/utils/permissions";
 const props = defineProps({
   header: {
     type: String,
diff --git a/src/modules/03_recruiting/views/01_compete/Period.vue b/src/modules/03_recruiting/views/01_compete/Period.vue
index bbe88039b..f4e129d5e 100644
--- a/src/modules/03_recruiting/views/01_compete/Period.vue
+++ b/src/modules/03_recruiting/views/01_compete/Period.vue
@@ -23,6 +23,7 @@
           <q-tr :props="props" class="cursor-pointer">
             <q-td>
               <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
                 dense
                 size="12px"
                 flat
@@ -34,6 +35,7 @@
                 <q-tooltip>แก้ไขข้อมูล</q-tooltip>
               </q-btn>
               <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
                 dense
                 size="12px"
                 flat
@@ -61,9 +63,12 @@
               v-for="col in props.cols"
               :key="col.name"
               :props="props"
-              @click="clickDetail(props.row.id)"
+              @click="
+                checkPermission($route)?.attrIsGet
+                  ? clickDetail(props.row.id)
+                  : undefined
+              "
             >
-            
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
@@ -81,7 +86,9 @@
                   round
                   color="green"
                   @click.stop.prevent="clickEdit(props.row.id)"
-                  v-if="col.value == null"
+                  v-if="
+                    col.value == null && checkPermission($route)?.attrIsUpdate
+                  "
                 >
                   <q-icon name="mdi-file-excel-outline" size="20px" />
                   <!-- นำเข้าไฟล์ผลคะแนนสอบ -->
@@ -90,6 +97,7 @@
                 <div v-else>
                   {{ col.value }}
                   <q-btn
+                    v-if="checkPermission($route)?.attrIsUpdate"
                     dense
                     size="12px"
                     flat
@@ -102,6 +110,7 @@
                   </q-btn>
 
                   <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
                     dense
                     size="12px"
                     flat
@@ -122,7 +131,10 @@
                   color="green"
                   round
                   @click.stop.prevent="clickUpload(props.row.id)"
-                  v-if="col.value == null || col.value == '0'"
+                  v-if="
+                    (col.value == null || col.value == '0') &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
                 >
                   <q-icon name="mdi-file-excel-outline" size="20px" />
                   <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
@@ -131,6 +143,7 @@
                   {{ col.value }}
 
                   <q-btn
+                    v-if="checkPermission($route)?.attrIsUpdate"
                     dense
                     size="12px"
                     flat
@@ -143,6 +156,7 @@
                   </q-btn>
 
                   <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
                     dense
                     size="12px"
                     flat
@@ -159,7 +173,6 @@
                 {{ col.value }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
       </Table>
@@ -361,6 +374,7 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
+import { checkPermission } from "@/utils/permissions";
 import type { QTableProps } from "quasar";
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index 295c7f12c..4dcee6d83 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
+import { checkPermission } from "@/utils/permissions";
 import { ref, onMounted } from "vue";
 import type {
   WebType,
@@ -709,6 +710,7 @@ const getClass = (val: boolean) => {
               </q-img>
             </q-card>
             <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
               unelevated
               color="primary"
               size="md"
@@ -744,6 +746,7 @@ const getClass = (val: boolean) => {
               </q-img>
             </q-card>
             <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
               unelevated
               color="blue"
               size="md"
@@ -1036,7 +1039,11 @@ const getClass = (val: boolean) => {
                   v-for="col in props.cols"
                   :key="col.name"
                   :props="props"
-                  @click="selectData(props.row.id, false)"
+                  @click="
+                    checkPermission($route)?.attrIsUpdate
+                      ? selectData(props.row.id, false)
+                      : undefined
+                  "
                   class="cursor-pointer"
                 >
                   <div v-if="col.name == 'createdAt'" class="">
@@ -1075,7 +1082,11 @@ const getClass = (val: boolean) => {
                   v-for="col in props.cols"
                   :key="col.name"
                   :props="props"
-                  @click="selectData(props.row.id, true)"
+                  @click="
+                    checkPermission($route)?.attrIsUpdate
+                      ? selectData(props.row.id, true)
+                      : undefined
+                  "
                   class="cursor-pointer"
                 >
                   <div v-if="col.name == 'createdAt'" class="">
diff --git a/src/modules/04_registryPerson/components/TableView.vue b/src/modules/04_registryPerson/components/TableView.vue
index b5527c3ec..c5e98ef84 100644
--- a/src/modules/04_registryPerson/components/TableView.vue
+++ b/src/modules/04_registryPerson/components/TableView.vue
@@ -343,10 +343,20 @@ watch(
                 </q-item-section>
                 <q-item-section>
                   <div
-                    class="text-weight-medium text-primary cursor-pointer"
-                    @click="onClickViewDetail(props.row.id)"
+                    :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>ดูทะเบียนประวัติ</q-tooltip>
+                    <q-tooltip v-if="checkPermission($route)?.attrIsGet"
+                      >ดูทะเบียนประวัติ</q-tooltip
+                    >
                     {{
                       `${props.row.prefix ? props.row.prefix : ""}${
                         props.row.firstName
@@ -421,8 +431,9 @@ watch(
               </q-card-section>
             </q-card>
           </q-card-section>
-          <q-separator inset />
+          <q-separator inset v-if="checkPermission($route)?.attrIsGet" />
           <q-btn
+            v-if="checkPermission($route)?.attrIsGet"
             flat
             color="black"
             label="ดูเพิ่มเติม"
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
index 3285537c5..2415d54ec 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -348,6 +349,7 @@ onMounted(async () => {
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
       round
       flat
       color="primary"
@@ -443,6 +445,7 @@ onMounted(async () => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="primary"
             flat
             dense
@@ -500,6 +503,7 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
               color="primary"
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
index a167d887a..448a1b2e6 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -503,6 +504,7 @@ onMounted(async () => {
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
       round
       dense
       flat
@@ -601,6 +603,7 @@ onMounted(async () => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="primary"
             flat
             dense
@@ -645,6 +648,7 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
               size="14px"
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
index c99725bd9..f3546bcfa 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, watch, reactive } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -608,6 +609,7 @@ onMounted(async () => {
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
       dense
       color="primary"
       icon="add"
@@ -716,6 +718,7 @@ onMounted(async () => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
@@ -757,6 +760,7 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
               color="primary"
@@ -779,7 +783,7 @@ onMounted(async () => {
           <div>
             <q-item
               v-for="(col, index) in props.cols.filter(
-                (col) => col.name !== 'desc'
+                (col:any) => col.name !== 'desc'
               )"
               :key="col.name"
               :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
index 2027c7417..551a80e72 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -338,6 +339,7 @@ onMounted(async () => {
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
       dense
       color="primary"
       icon="add"
@@ -446,6 +448,7 @@ onMounted(async () => {
       <q-tr :props="props">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
@@ -487,6 +490,7 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
               color="primary"
@@ -509,7 +513,7 @@ onMounted(async () => {
           <div>
             <q-item
               v-for="(col, index) in props.cols.filter(
-                (col) => col.name !== 'desc'
+                (col:any) => col.name !== 'desc'
               )"
               :key="col.name"
               :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index 991b93b6a..4ab2675e0 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, watch, reactive } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -410,6 +411,7 @@ onMounted(async () => {
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
       dense
       color="primary"
       icon="add"
@@ -518,6 +520,7 @@ onMounted(async () => {
       <q-tr :props="props">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
@@ -559,6 +562,7 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
               color="primary"
@@ -581,7 +585,7 @@ onMounted(async () => {
           <div>
             <q-item
               v-for="(col, index) in props.cols.filter(
-                (col) => col.name !== 'desc'
+                (col:any) => col.name !== 'desc'
               )"
               :key="col.name"
               :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
diff --git a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
index 98a7850a0..7c7955779 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, watch, ref, reactive } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
@@ -298,6 +299,7 @@ onMounted(() => {
   <div class="row q-gutter-sm items-center">
     <div class="toptitle col text-right q-gutter-x-sm">
       <q-btn
+        v-if="checkPermission($route)?.attrIsUpdate"
         flat
         round
         dense
diff --git a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
index 21e72995b..c26885415 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -226,6 +227,7 @@ onMounted(() => {
   <div class="flex items-center">
     <div class="q-gutter-sm">
       <q-btn
+        v-if="checkPermission($route)?.attrIsUpdate"
         size="12px"
         flat
         round
@@ -288,9 +290,9 @@ onMounted(() => {
     >
       <template v-slot:header="props">
         <q-tr :props="props">
-          <q-th auto-width></q-th>
-          <q-th auto-width></q-th>
-          <q-th auto-width></q-th>
+          <q-th auto-width v-if="checkPermission($route)?.attrIsUpdate" />
+          <q-th auto-width v-if="checkPermission($route)?.attrIsDelete" />
+          <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>
@@ -298,7 +300,7 @@ onMounted(() => {
       </template>
       <template v-slot:body="props">
         <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-          <q-td>
+          <q-td v-if="checkPermission($route)?.attrIsUpdate">
             <q-btn
               dense
               flat
@@ -310,7 +312,7 @@ onMounted(() => {
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
           </q-td>
-          <q-td>
+          <q-td v-if="checkPermission($route)?.attrIsDelete">
             <q-btn
               dense
               flat
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 7676e1103..76c6695d0 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
+
 import { useCounterMixin } from "@/stores/mixin";
 import type {
   RequestItemsHistoryObject,
@@ -435,6 +437,7 @@ onMounted(() => {
     <q-space />
     <div class="q-gutter-x-sm">
       <q-btn
+        v-if="checkPermission($route)?.attrIsUpdate"
         color="primary"
         icon="mdi-pencil-outline"
         flat
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 88f8fca3e..5871d061d 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
+import { checkPermission } from "@/utils/permissions";
+
 import type { QTableProps } from "quasar";
 import type {
   RequestItemsObject,
@@ -344,7 +346,14 @@ onMounted(async () => {
 </script>
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
-    <q-btn dense color="primary" icon="add" flat round @click="openDialogAdd()"
+    <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
+      dense
+      color="primary"
+      icon="add"
+      flat
+      round
+      @click="openDialogAdd()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -449,6 +458,7 @@ onMounted(async () => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="primary"
             flat
             dense
@@ -472,19 +482,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-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name === 'no'">
@@ -505,6 +502,7 @@ onMounted(async () => {
             <q-space />
             <div class="q-gutter-x-sm">
               <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
                 color="primary"
                 icon="mdi-pencil-outline"
                 flat
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 b36f6b406..c350526b2 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
+
 import { useRoute } from "vue-router";
 import { useQuasar, type QTableProps } from "quasar";
 
@@ -457,7 +459,14 @@ onMounted(() => {
 </script>
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
-    <q-btn dense color="primary" icon="add" flat round @click="openDialogAdd()"
+    <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
+      dense
+      color="primary"
+      icon="add"
+      flat
+      round
+      @click="openDialogAdd()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -560,6 +569,7 @@ onMounted(() => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="primary"
             flat
             dense
@@ -611,6 +621,7 @@ onMounted(() => {
             <q-space />
             <div class="q-gutter-x-sm">
               <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
                 color="primary"
                 icon="mdi-pencil-outline"
                 flat
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 1112d6bd8..281bed892 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
+
 import { useQuasar, type QTableProps } from "quasar";
 import type {
   FormFilter,
@@ -301,7 +303,14 @@ onMounted(async () => {
 </script>
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
-    <q-btn dense color="primary" icon="add" flat round @click="openDialogAdd()"
+    <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
+      dense
+      color="primary"
+      icon="add"
+      flat
+      round
+      @click="openDialogAdd()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -405,6 +414,7 @@ onMounted(async () => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="primary"
             flat
             dense
@@ -428,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-td v-for="col in props.cols" :key="col.id">
           <div v-if="col.name === 'no'">
@@ -462,6 +459,7 @@ onMounted(async () => {
             <q-space />
             <div class="q-gutter-x-sm">
               <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
                 color="primary"
                 icon="mdi-pencil-outline"
                 flat
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
index 6062d2599..b8a52959e 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useQuasar, type QTableProps } from "quasar";
+import { checkPermission } from "@/utils/permissions";
 import { ref, onMounted, reactive } from "vue";
 import type {
   RowList,
@@ -214,7 +215,14 @@ onMounted(() => {
 </script>
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
-    <q-btn dense color="primary" icon="add" flat round @click="openDialogAdd()"
+    <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
+      dense
+      color="primary"
+      icon="add"
+      flat
+      round
+      @click="openDialogAdd()"
       ><q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
 
@@ -316,6 +324,7 @@ onMounted(() => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
@@ -353,6 +362,7 @@ onMounted(() => {
             <q-space />
             <div class="q-gutter-x-sm">
               <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
                 color="primary"
                 icon="mdi-pencil-outline"
                 flat
@@ -374,7 +384,7 @@ onMounted(() => {
           <q-card-section class="q-pa-none">
             <q-item
               v-for="(col, index) in props.cols.filter(
-                (col) => col.name !== 'desc'
+                (col:any) => col.name !== 'desc'
               )"
               :key="col.name"
               :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
diff --git a/src/modules/04_registryPerson/components/detail/Other/02_Document.vue b/src/modules/04_registryPerson/components/detail/Other/02_Document.vue
index dbc3df4e1..0184aabf8 100644
--- a/src/modules/04_registryPerson/components/detail/Other/02_Document.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/02_Document.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
+
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -179,6 +181,7 @@ onMounted(() => {
     <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
       <div class="col-12 row">
         <q-file
+          v-if="checkPermission($route)?.attrIsUpdate"
           for="inputFiles"
           class="col-12"
           outlined
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 a8fe46e7c..5d1ec0812 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
@@ -1,21 +1,36 @@
 <script setup lang="ts">
 import { onMounted, watch, ref, reactive } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
-import type { QTableColumn, QForm } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
-import DialogHeader from "@/components/DialogHeader.vue";
+/**
+ * importType
+ */
+import type { QTableColumn, QForm } from "quasar";
 import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile";
 
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
+
+/**
+ * use
+ */
 const $q = useQuasar();
 const route = useRoute();
-const mixin = useCounterMixin();
 const store = useProfileDataStore();
+const { calculateAge, fetchPerson, filterSelector } = store;
 const {
   success,
   showLoader,
@@ -24,8 +39,11 @@ const {
   messageError,
   dialogConfirm,
   dialogMessageNotify,
-} = mixin;
-const { calculateAge, fetchPerson, filterSelector } = store;
+} = useCounterMixin();
+
+/**
+ * props
+ */
 const props = defineProps({
   fetchDataPersonal: { type: Function, require: true },
 });
@@ -37,23 +55,16 @@ const empType = ref<string>(
   route.name === "registryNewByid" ? "" : "-employee"
 );
 
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
 const modal = ref<boolean>(false);
 const informaData = ref<ResponseObject>();
 const rowsHistory = ref<ResponseObject[]>([]);
 const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
-
 const id = ref<string>("");
 const age = ref<string | null>("");
 const formData = reactive<RequestObject>(store.defaultProfile);
 
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
+/** ข้อมูล Label*/
 const dataLabel = {
   citizenId: "เลขประจำตัวประชาชน",
   name: "ชื่อ - สกุล",
@@ -73,6 +84,7 @@ const dataLabel = {
   lastName: "นามสกุล",
 };
 
+/** ข้อมูล Table ประวัติแการก้ไขข้อมูลส่วนตัว*/
 const columnsHistory = ref<QTableColumn[]>([
   {
     name: "citizenId",
@@ -244,7 +256,6 @@ const columnsHistory = ref<QTableColumn[]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const visibleColumnsHistory = ref<String[]>([
   "citizenId",
   "prefix",
@@ -262,8 +273,17 @@ const visibleColumnsHistory = ref<String[]>([
   "createdFullName",
   "createdAt",
 ]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+  sortBy: "createdAt",
+  descending: true,
+});
 
-async function getData() {
+/**
+ * function เรียกข้อมูลข้อมูลส่วนตัว
+ */
+function getData() {
   showLoader();
   http
     .get(config.API.registryNewByProfileId(profileId.value, empType.value))
@@ -272,10 +292,7 @@ async function getData() {
       id.value = res.data.result.id;
 
       if (res.data.result.birthDate) {
-        console.log("birthDate===>", res.data.result.birthDate);
-
         age.value = calculateAge(res.data.result.birthDate);
-        console.log("age===>", age.value);
       }
     })
     .catch((e) => {
@@ -286,37 +303,12 @@ async function getData() {
     });
 }
 
-const calculateMaxDate = () => {
-  const today = new Date();
-  today.setFullYear(today.getFullYear() - 18);
-  return today;
-};
-
-async function editData() {
-  showLoader();
-  await http
-    .put(config.API.profileNewProfileById(id.value, empType.value), {
-      ...formData,
-      employeeClass: route.name === "registry-employeeId" ? "TEMP" : undefined,
-    })
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      getData(), (modal.value = false);
-      props.fetchDataPersonal?.();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
+/**
+ * function แก้ไขข้อมูลประวัติส่วนตัว
+ */
 function onClickOpenDialog() {
   if (!informaData.value) return;
   modal.value = true;
-  console.log("onClickOpenDialog birthDate===>", informaData.value.birthDate);
-
   id.value = informaData.value.id;
   age.value = calculateAge(informaData.value.birthDate);
   formData.citizenId = informaData.value.citizenId;
@@ -334,21 +326,45 @@ function onClickOpenDialog() {
   formData.phone = informaData.value.phone;
 }
 
+/**
+ * function ยืนยันการบันทึกข้อมูล
+ */
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      editData();
-      modal.value = false;
+      showLoader();
+      http
+        .put(config.API.profileNewProfileById(id.value, empType.value), {
+          ...formData,
+          employeeClass:
+            route.name === "registry-employeeId" ? "TEMP" : undefined,
+        })
+        .then(async () => {
+          await getData();
+          await props.fetchDataPersonal?.();
+          modal.value = false;
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
-async function clickHistory() {
+/**
+ * function ดูข้อมูลประวัติแก้ไขข้อมูลส่วนตัว
+ */
+function clickHistory() {
   modalHistory.value = true;
-  await http
+  filterHistory.value = "";
+  http
     .get(config.API.profileNewProfileHisById(id.value, empType.value))
     .then((res) => {
       rowsHistory.value = res.data.result;
@@ -361,6 +377,10 @@ async function clickHistory() {
     });
 }
 
+/**
+ * function  เช็คเลขประจำตัวประชาชนช้ำ
+ * @param citizenId เลขประจำตัวประชาชน
+ */
 function changeCardID(citizenId: string | number | null) {
   if (citizenId != null && typeof citizenId == "string") {
     if (citizenId.length == 13 && citizenId) {
@@ -380,29 +400,29 @@ function changeCardID(citizenId: string | number | null) {
   }
 }
 
+/**
+ * function เช็คอายุไม่เกิน 18 ปี
+ */
+function calculateMaxDate() {
+  const today = new Date();
+  today.setFullYear(today.getFullYear() - 18);
+  return today;
+}
+
 watch(
   () => formData.birthDate,
   (v) => {
-    console.log("v===>", v);
-
     if (v) {
       age.value = calculateAge(v);
     }
   }
 );
 
-onMounted(async () => {
-  await getData();
-
+onMounted(() => {
+  getData();
   if (store.Ops && store.Ops.prefixOps && store.Ops.prefixOps.length === 0) {
     fetchPerson();
   }
-
-  // store.Ops.prefixOps.length === 0 ||
-  //   store.Ops.genderOps.length === 0 ||
-  //   store.Ops.bloodOps.length === 0 ||
-  //   store.Ops.statusOps.length === 0 ||
-  //   store.Ops.religionOps.length === 0
 });
 </script>
 
@@ -410,6 +430,7 @@ onMounted(async () => {
   <div class="row q-gutter-sm items-center">
     <div class="toptitle col text-right q-gutter-x-sm">
       <q-btn
+        v-if="checkPermission($route)?.attrIsUpdate"
         flat
         round
         dense
@@ -552,7 +573,7 @@ onMounted(async () => {
                 :options="store.Ops.prefixOps"
                 :label="dataLabel.prefix"
                 :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
               )"
               />
@@ -574,7 +595,7 @@ onMounted(async () => {
                 class="inputgreen"
                 :options="store.Ops.rankOps"
                 :label="dataLabel.rank"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'rankOps'
               )"
               />
@@ -676,7 +697,7 @@ onMounted(async () => {
                 class="inputgreen"
                 :options="store.Ops.genderOps"
                 :label="dataLabel.gender"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
               )"
               />
@@ -698,7 +719,7 @@ onMounted(async () => {
                 v-model="formData.relationship"
                 :options="store.Ops.statusOps"
                 :label="dataLabel.relationship"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
               )"
               />
@@ -742,7 +763,7 @@ onMounted(async () => {
                 class="inputgreen"
                 :options="store.Ops.religionOps"
                 :label="dataLabel.religion"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
               )"
               />
@@ -764,7 +785,7 @@ onMounted(async () => {
                 class="inputgreen"
                 :options="store.Ops.bloodOps"
                 :label="dataLabel.bloodGroup"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
               )"
               />
@@ -820,6 +841,7 @@ onMounted(async () => {
             outlined
             placeholder="ค้นหา"
             debounce="300"
+            clearable
           >
             <template v-slot:append>
               <q-icon
@@ -828,12 +850,6 @@ onMounted(async () => {
                 @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
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 31cae6786..1a93ec421 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -1,23 +1,37 @@
 <script setup lang="ts">
 import { onMounted, ref, useAttrs, reactive, watch } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import axios from "axios";
-import type { QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import dialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import type { ResponseObject } from "@/components/information/interface/response/OldName";
-import type { Pagination } from "@/modules/04_registryPerson/interface/index/Main";
-import type { RequestItemsObject } from "@/components/information/interface/request/OldName";
-import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
 
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { ResponseObject } from "@/components/information/interface/response/OldName";
+
+/**
+ * importComponents
+ */
+import dialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * importStore
+ */
+import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
 const $q = useQuasar();
 const route = useRoute();
-const mixin = useCounterMixin();
 const store = useProfileDataStore();
 const attrs = ref<any>(useAttrs());
+const { fetchPerson } = store;
 const {
   date2Thai,
   success,
@@ -25,27 +39,29 @@ const {
   messageError,
   showLoader,
   hideLoader,
-  dialogRemove,
-} = mixin;
-const submitDisable = ref<boolean>(true);
-const { fetchPerson } = store;
-const profileId = ref<string>(route.params.id.toString());
-const empType = ref<string>(
-  route.name === "registryNewByid" ? "" : "-employee"
-);
+} = useCounterMixin();
+
+/**
+ * props
+ */
 const props = defineProps({
   fetchDataPersonal: { type: Function, require: true },
 });
 
+const submitDisable = ref<boolean>(true);
+const profileId = ref<string>(route.params.id.toString());
+const empType = ref<string>(
+  route.name === "registryNewByid" ? "" : "-employee"
+);
 const editId = ref<string>("");
 const dialog = ref<boolean>(false);
 const dialogStatus = ref<string>("create");
 const filterSearch = ref("");
-const filterHistory = ref<string>("");
+
 const historyDialog = ref<boolean>(false);
 const historyKeyword = ref<string>("");
-const rowsHistory = ref<RequestItemsObject[]>([]);
-const changeNameData = reactive<any>({
+
+const changeNameData = reactive({
   profileId: profileId.value,
   prefixId: "",
   prefix: "",
@@ -79,7 +95,6 @@ const statusOptionFilter = ref([
   "เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล",
 ]);
 const alertUpload = ref<boolean>(false);
-const tittleHistory = ref<string>("ประวัติการเปลี่ยนชื่อ-นามสกุล");
 const visibleColumns = ref<string[]>([
   "prefix",
   "firstName",
@@ -213,9 +228,7 @@ const historyColumns = ref<QTableProps["columns"]>([
   },
 ]);
 const uploadUrl = ref<string>("");
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
+
 const subId = ref<string>("");
 const fileUpload = ref<File>();
 const pagination = ref({
@@ -248,18 +261,16 @@ function closeDialog() {
   dialog.value = false;
 }
 
-async function onSubmit() {
+function onSubmit() {
   if (!!fileUpload.value || dialogStatus.value === "edit") {
-    await dialogConfirm(
+    dialogConfirm(
       $q,
-      async () => {
+      () => {
         showLoader();
-        dialogStatus.value === "create"
-          ? await addData()
-          : await editData(editId.value);
+        dialogStatus.value === "create" ? addData() : editData(editId.value);
         closeDialog();
         if (!!fileUpload.value) {
-          await uploadProfile(fileUpload.value);
+          uploadProfile(fileUpload.value);
         }
       },
       "ยืนยันการบันทึกข้อมูล",
@@ -307,8 +318,6 @@ async function uploadFileURL(uploadUrl: string, file: any) {
       },
     })
     .then(() => {
-      // fetchProfile(profileId.value);
-      // success($q, "อัปโหลดไฟล์สำเร็จ");
       fileUpload.value = undefined;
     })
     .catch((err) => {
@@ -407,44 +416,6 @@ function editData(idData: string) {
     });
 }
 
-// function deleteData(idData: string) {
-//   dialogRemove($q, () =>
-//     http
-//       .delete(config.API.profileNewChangeNameByChangeNameId(idData))
-//       .then(() => {
-//         fetchData(profileId.value);
-//         success($q, "ลบข้อมูลสำเร็จ");
-//       })
-//       .catch((err) => {
-//         messageError($q, err);
-//       })
-//       .finally(() => {
-//         hideLoader();
-//       })
-//   );
-// }
-
-function deleteFileData(idData: string) {
-  http
-    .delete(
-      config.API.subFile(
-        "ทะเบียนประวัติ",
-        "ประวัติการเปลี่ยนชื่อ-นามสกุล",
-        profileId.value,
-        idData
-      )
-    )
-    .then(() => {
-      fetchData(profileId.value);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 async function fetchHistoryData(id: string) {
   showLoader();
   await http
@@ -460,14 +431,6 @@ async function fetchHistoryData(id: string) {
     });
 }
 
-const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
-};
-
-async function openFile(val: string | null) {
-  if (val != null) window.open(val);
-}
-
 function closeHistoryDialog() {
   historyDialog.value = false;
 }
@@ -487,26 +450,12 @@ async function fetchData(id: string) {
     });
 }
 
-onMounted(async () => {
-  if (
-    store.Ops.prefixOps.length === 0 ||
-    store.Ops.genderOps.length === 0 ||
-    store.Ops.bloodOps.length === 0 ||
-    store.Ops.statusOps.length === 0 ||
-    store.Ops.religionOps.length === 0
-  ) {
-    await fetchPerson();
-  }
-
-  fetchData(profileId.value);
-  fetchDataPersonal();
-});
 function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "statusOptions":
       update(() => {
         statusOption.value = statusOptionFilter.value.filter(
-          (v: any) => v.indexOf(val) > -1
+          (v: string) => v.indexOf(val) > -1
         );
       });
       break;
@@ -522,6 +471,21 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
+onMounted(async () => {
+  if (
+    store.Ops.prefixOps.length === 0 ||
+    store.Ops.genderOps.length === 0 ||
+    store.Ops.bloodOps.length === 0 ||
+    store.Ops.statusOps.length === 0 ||
+    store.Ops.religionOps.length === 0
+  ) {
+    await fetchPerson();
+  }
+
+  fetchData(profileId.value);
+  fetchDataPersonal();
+});
+
 watch(
   () => changeNameData.prefix,
   () => {
@@ -559,6 +523,7 @@ watch(
 <template>
   <div class="text-primary row q-mb-sm">
     <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
       round
       flat
       color="primary"
@@ -650,6 +615,7 @@ watch(
             <q-tooltip>ดาวน์โหลด</q-tooltip>
           </q-btn>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="primary"
             flat
             dense
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 2f79a2114..58ac6599b 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, reactive, watch } from "vue";
+import { checkPermission } from "@/utils/permissions";
+
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
@@ -485,6 +487,7 @@ onMounted(async () => {
   <div class="row q-gutter-sm items-center">
     <div class="toptitle col text-right q-gutter-x-sm">
       <q-btn
+        v-if="checkPermission($route)?.attrIsUpdate"
         flat
         round
         dense
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_Family.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_Family.vue
deleted file mode 100644
index 8ed8e3a39..000000000
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_Family.vue
+++ /dev/null
@@ -1,1363 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-import dialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { QForm, useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute } from "vue-router";
-import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
-const mixin = useCounterMixin();
-const $q = useQuasar();
-const {
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  date2Thai,
-} = mixin;
-
-const store = useProfileDataStore();
-const { fetchPerson, filterSelector } = store;
-const route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const empType = ref<string>(
-  route.name === "registryNewByid" ? "" : "-employee"
-);
-const dialog = ref<boolean>(false);
-const historyDialog = ref<boolean>(false);
-const fatherIsHaveInfo = ref<boolean>(false);
-const motherIsHaveInfo = ref<boolean>(false);
-const spouseIsHave = ref<boolean>(false);
-const fatherIsLive = ref<boolean>(false);
-const motherIsLive = ref<boolean>(false);
-const spouseIsLive = ref<boolean>(false);
-const index = ref<number>(1);
-const fatherData = reactive({
-  isHaveInfo: 1,
-  isLive: 0,
-  citizenId: "",
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  job: "",
-});
-
-const fatherDataEdit = reactive({
-  isHaveInfo: 1,
-  isLive: 0,
-  citizenId: "",
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  job: "",
-});
-
-const motherData = reactive({
-  isHaveInfo: 1,
-  isLive: 0,
-  citizenId: "",
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  job: "",
-});
-
-const motherDataEdit = reactive({
-  isHaveInfo: 1,
-  isLive: 0,
-  citizenId: "",
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  job: "",
-});
-
-const spouseData = reactive({
-  isHave: 1,
-  isLive: 0,
-  citizenId: "",
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  job: "",
-});
-
-const spouseDataEdit = reactive({
-  isHave: 1,
-  isLive: 0,
-  citizenId: "",
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  job: "",
-});
-
-const rows = ref<any[]>([]);
-const historyRows = ref<any>([]);
-const prefixFilter = ref([]);
-const childrenData: any = reactive({
-  childrens: [],
-});
-const childrenDataEdit: any = reactive({
-  childrens: [],
-});
-
-function editForm(rows: any) {
-  if (rows !== null) {
-    fatherDataEdit.isHaveInfo = rows.fatherFirstName !== null ? 1 : 0;
-    fatherDataEdit.isLive = rows.fatherLive ? 1 : 0;
-    fatherDataEdit.citizenId = rows.fatherCitizenId;
-    fatherDataEdit.prefix = rows.fatherPrefix;
-    fatherDataEdit.firstName = rows.fatherFirstName;
-    fatherDataEdit.lastName = rows.fatherLastName;
-    fatherDataEdit.job = rows.fatherCareer;
-    motherDataEdit.isHaveInfo = rows.motherLive ? 1 : 0;
-    motherDataEdit.isLive = rows.firstName !== null ? 1 : 0;
-    motherDataEdit.citizenId = rows.motherCitizenId;
-    motherDataEdit.prefix = rows.motherPrefix;
-    motherDataEdit.firstName = rows.motherFirstName;
-    motherDataEdit.lastName = rows.motherLastName;
-    motherDataEdit.job = rows.motherCareer;
-    spouseDataEdit.isLive = rows.coupleFirstName !== null ? 1 : 0;
-    spouseDataEdit.citizenId = rows.coupleCitizenId;
-    spouseDataEdit.prefix = rows.couplePrefix;
-    spouseDataEdit.firstName = rows.coupleFirstName;
-    spouseDataEdit.lastName = rows.coupleLastName;
-    spouseDataEdit.job = rows.coupleCareer;
-    spouseDataEdit.isHave = rows.couple ? 1 : 0;
-    childrenDataEdit.childrens = rows.children.map((e: any) => ({
-      ...e,
-      childrenLive: e.childrenLive ? 1 : 0,
-    }));
-  }
-}
-
-async function fetchData(id: string) {
-  showLoader();
-  await http
-    .get(config.API.profileNewFamilyByProfileId(id, empType.value))
-    .then(async (res) => {
-      const data = res.data.result;
-      rows.value = res.data.result;
-      if (rows.value !== null) {
-        fatherData.isLive = data.fatherLive ? 1 : 0;
-        fatherData.citizenId = data.fatherCitizenId;
-        fatherData.prefix = data.fatherPrefix;
-        fatherData.firstName = data.fatherFirstName;
-        fatherData.lastName = data.fatherLastName;
-        fatherData.job = data.fatherCareer;
-        motherData.isLive = data.motherLive ? 1 : 0;
-        motherData.citizenId = data.motherCitizenId;
-        motherData.prefix = data.motherPrefix;
-        motherData.firstName = data.motherFirstName;
-        motherData.lastName = data.motherLastName;
-        motherData.job = data.motherCareer;
-        spouseData.isLive = data.coupleLive ? 1 : 0;
-        spouseData.citizenId = data.coupleCitizenId;
-        spouseData.prefix = data.couplePrefix;
-        spouseData.firstName = data.coupleFirstName;
-        spouseData.lastName = data.coupleLastName;
-        spouseData.job = data.coupleCareer;
-        spouseData.isHave = data.couple ? 1 : 0;
-        childrenData.childrens = data.children.map((e: any) => ({
-          ...e,
-          childrenLive: e.childrenLive ? 1 : 0,
-        }));
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function fetchHistoryData(id: string) {
-  showLoader();
-  await http
-    .get(config.API.profileNewFamilyHisByFamilyId(id, empType.value))
-    .then(async (res) => {
-      historyRows.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      index.value = 1;
-      historyDialog.value = true;
-      hideLoader();
-    });
-}
-
-async function addData() {
-  fatherIsHaveInfo.value = fatherDataEdit.isHaveInfo === 1 ? true : false;
-  motherIsHaveInfo.value = motherDataEdit.isHaveInfo === 1 ? true : false;
-  spouseIsHave.value = spouseDataEdit.isHave === 1 ? true : false;
-  fatherIsLive.value = fatherDataEdit.isLive === 1 ? true : false;
-  motherIsLive.value = motherDataEdit.isLive === 1 ? true : false;
-  spouseIsLive.value = spouseDataEdit.isLive === 1 ? true : false;
-  const children = childrenDataEdit.childrens.map((e: any) => ({
-    childrenLive: !!e.childrenLive,
-    childrenCareer: e.childrenCareer,
-    childrenCitizenId: e.childrenCitizenId,
-    childrenFirstName: e.childrenFirstName,
-    childrenLastName: e.childrenLastName,
-    childrenPrefix: e.childrenPrefix,
-    id: e.id,
-  }));
-  const url =
-    rows.value === null
-      ? config.API.profileNewFamily(empType.value)
-      : config.API.profileNewFamilyByProfileId(id.value, empType.value);
-  const method = rows.value === null ? "post" : "patch";
-
-  await http[method](url, {
-    profileId:
-      rows.value === null && empType.value === "" ? id.value : undefined,
-    profileEmployeeId: empType.value !== "" ? id.value : undefined,
-    motherLive: motherIsHaveInfo.value ? motherIsLive.value : null,
-    motherCitizenId: motherIsHaveInfo.value ? motherDataEdit.citizenId : null,
-    motherPrefix: motherIsHaveInfo.value ? motherDataEdit.prefix : null,
-    motherFirstName: motherIsHaveInfo.value ? motherDataEdit.firstName : null,
-    motherLastName: motherIsHaveInfo.value ? motherDataEdit.lastName : null,
-    motherCareer: motherIsHaveInfo.value ? motherDataEdit.job : null,
-    fatherLive: fatherIsHaveInfo.value ? fatherIsLive.value : null,
-    fatherCitizenId: fatherIsHaveInfo.value ? fatherDataEdit.citizenId : null,
-    fatherPrefix: fatherIsHaveInfo.value ? fatherDataEdit.prefix : null,
-    fatherFirstName: fatherIsHaveInfo.value ? fatherDataEdit.firstName : null,
-    fatherLastName: fatherIsHaveInfo.value ? fatherDataEdit.lastName : null,
-    fatherCareer: fatherIsHaveInfo.value ? fatherDataEdit.job : null,
-    coupleLive: spouseIsHave.value ? spouseIsLive.value : null,
-    coupleCitizenId: spouseIsHave.value ? spouseDataEdit.citizenId : null,
-    couplePrefix: spouseIsHave.value ? spouseDataEdit.prefix : null,
-    coupleFirstName: spouseIsHave.value ? spouseDataEdit.firstName : null,
-    coupleLastName: spouseIsHave.value ? spouseDataEdit.lastName : null,
-    coupleLastNameOld: spouseIsHave.value ? spouseDataEdit.lastName : null,
-    coupleCareer: spouseIsHave.value ? spouseDataEdit.job : null,
-    couple: spouseIsHave.value,
-    children: children,
-  })
-
-    .then(() => {
-      fetchData(id.value);
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-const childrenOptionPrefix = ["นาย", "นาง", "นางสาว"];
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function closeHistoryDialog() {
-  historyDialog.value = false;
-}
-
-async function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      addData();
-      closeDialog();
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
-
-const addChildren = async () => {
-  childrenDataEdit.childrens.push({
-    childrenLive: 0,
-    childrenCitizenId: "",
-    childrenPrefix: "",
-    childrenFirstName: "",
-    childrenLastName: "",
-    childrenCareer: "",
-    id: "",
-  });
-};
-
-function deleteChildren(items: any) {
-  const index = childrenDataEdit.childrens.findIndex(
-    (r: any) => r.id == items.id
-  );
-
-  childrenDataEdit.childrens.splice(index, 1);
-}
-
-onMounted(async () => {
-  if (
-    store.Ops.prefixOps.length === 0 ||
-    store.Ops.genderOps.length === 0 ||
-    store.Ops.bloodOps.length === 0 ||
-    store.Ops.statusOps.length === 0 ||
-    store.Ops.religionOps.length === 0
-  ) {
-    await fetchPerson();
-  }
-  await fetchData(id.value);
-});
-</script>
-
-<template>
-  <div>
-    <div class="flex justify-end q-gutter-x-sm">
-      <q-btn
-        round
-        flat
-        color="primary"
-        icon="mdi-pencil-outline"
-        size="14px"
-        dense
-        @click="
-          () => {
-            editForm(rows);
-            dialog = true;
-          }
-        "
-      >
-        <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
-      >
-      <q-btn
-        round
-        flat
-        dense
-        color="info"
-        icon="mdi-history"
-        size="14px"
-        @click="
-          () => {
-            fetchHistoryData(id);
-          }
-        "
-      >
-        <q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
-      >
-    </div>
-    <div v-if="fatherData.firstName !== null">
-      <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 text-grey-6 text-weight-medium">
-            <div>เลขประจำตัวประชาชน</div>
-          </div>
-          <div class="col">
-            {{ fatherData.citizenId ? fatherData.citizenId : "-" }}
-          </div>
-        </div>
-        <div class="row items-center">
-          <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
-          <div class="col-6">
-            {{
-              fatherData.prefix
-                ? fatherData.prefix +
-                  fatherData.firstName +
-                  " " +
-                  fatherData.lastName
-                : "-"
-            }}
-          </div>
-          <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
-          <div class="col">
-            {{ fatherData.job ? fatherData.job : "-" }}
-          </div>
-        </div>
-        <div class="row items-center">
-          <div class="col-2 text-grey-6 text-weight-medium">
-            สถานภาพการมีชีวิต
-          </div>
-          <div class="col-10">
-            <div v-if="fatherData.isLive">มีชีวิตอยู่</div>
-            <div v-else>ถึงแก่กรรม</div>
-          </div>
-        </div>
-      </q-card>
-    </div>
-    <q-separator class="q-my-lg" />
-    <div v-if="motherData.firstName !== null">
-      <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 text-grey-6 text-weight-medium">
-            <div>เลขประจำตัวประชาชน</div>
-          </div>
-          <div class="col">
-            {{ motherData.citizenId ? motherData.citizenId : "-" }}
-          </div>
-        </div>
-        <div class="row items-center">
-          <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
-          <div class="col-6">
-            {{
-              motherData.prefix
-                ? motherData.prefix +
-                  motherData.firstName +
-                  " " +
-                  motherData.lastName
-                : "-"
-            }}
-          </div>
-          <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
-          <div class="col">
-            {{ motherData.job ? motherData.job : "-" }}
-          </div>
-        </div>
-        <div class="row items-center">
-          <div class="col-2 text-grey-6 text-weight-medium">
-            สถานภาพการมีชีวิต
-          </div>
-          <div class="col">
-            <div v-if="motherData.isLive">มีชีวิตอยู่</div>
-            <div v-else>ถึงแก่กรรม</div>
-          </div>
-        </div>
-      </q-card>
-    </div>
-    <q-separator class="q-my-lg" />
-    <div v-if="spouseData.firstName !== null">
-      <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 text-grey-6 text-weight-medium">
-            <div>เลขประจำตัวประชาชน</div>
-          </div>
-          <div class="col">
-            {{ spouseData.citizenId ? spouseData.citizenId : "-" }}
-          </div>
-        </div>
-        <div class="row items-center">
-          <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
-          <div class="col-6">
-            {{
-              spouseData.prefix
-                ? spouseData.prefix +
-                  spouseData.firstName +
-                  " " +
-                  spouseData.lastName
-                : "-"
-            }}
-          </div>
-          <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
-          <div class="col">
-            {{ spouseData.job ? spouseData.job : "-" }}
-          </div>
-        </div>
-        <div class="row items-center">
-          <div class="col-2 text-grey-6 text-weight-medium">
-            สถานภาพการมีชีวิต
-          </div>
-          <div class="col">
-            <div v-if="spouseData.isLive">มีชีวิตอยู่</div>
-            <div v-else>ถึงแก่กรรม</div>
-          </div>
-        </div>
-      </q-card>
-    </div>
-    <q-separator class="q-my-lg" />
-    <div v-if="childrenData.childrens[0] !== undefined">
-      <div class="col-12 row q-pb-sm">
-        <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
-          • บุตร
-        </div>
-      </div>
-      <div v-for="(children, index) in childrenData.childrens" :key="index">
-        <q-card bordered class="bg-grey-1 q-pb-md">
-          <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center">
-            <div class="text-weight-medium q-pr-md">
-              บุตรคนที่ : {{ index + 1 }}
-            </div>
-          </div>
-          <q-separator />
-          <div class="col-12 q-pa-md q-col-gutter-md">
-            <div class="row items-center">
-              <div class="col-2 text-grey-6 text-weight-medium">
-                <div>เลขประจำตัวประชาชน</div>
-              </div>
-              <div class="col-10">
-                {{ children.childrenCitizenId }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2 text-grey-6 text-weight-medium">
-                ชื่อ-นามสกุล
-              </div>
-              <div class="col-6">
-                {{
-                  children.childrenPrefix
-                    ? children.childrenPrefix +
-                      children.childrenFirstName +
-                      " " +
-                      children.childrenLastName
-                    : "-"
-                }}
-              </div>
-              <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
-              <div class="col">
-                {{ children.childrenCareer }}
-              </div>
-            </div>
-            <div class="row items-center">
-              <div class="col-2 text-grey-6 text-weight-medium">
-                สถานภาพการมีชีวิต
-              </div>
-              <div class="col">
-                <div v-if="children.childrenLive">มีชีวิตอยู่</div>
-                <div v-else>ถึงแก่กรรม</div>
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div>
-    </div>
-  </div>
-
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 80%">
-      <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <dialog-header tittle="แก้ไขข้อมูลครอบครัว" :close="closeDialog" />
-        <q-separator color="grey-4" />
-        <q-card-section style="max-height: 70vh" class="scroll">
-          <div class="col-12 row q-pb-sm">
-            <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="fatherDataEdit.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="1"
-                label="มีข้อมูล"
-                dense
-                color="primary"
-              />
-              <q-radio
-                v-model="fatherDataEdit.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="0"
-                color="red"
-                label="ไม่มีข้อมูล"
-                dense
-              />
-            </div>
-          </div>
-          <q-card
-            v-if="fatherDataEdit.isHaveInfo"
-            bordered
-            class="bg-grey-1 q-pa-md"
-          >
-            <div class="row q-col-gutter-md">
-              <div class="col">
-                <q-input
-                  :disable="!fatherDataEdit.isHaveInfo"
-                  outlined
-                  hide-bottom-space
-                  bg-color="white"
-                  dense
-                  v-model="fatherDataEdit.citizenId"
-                  :label="`${'เลขประจำตัวประชาชน'}`"
-                  maxlength="13"
-                  :rules="[
-                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
-                  ]"
-                  class="inputgreen"
-                  mask="#############"
-                />
-              </div>
-              <div class="col">
-                <q-select
-                  :disable="!fatherDataEdit.isHaveInfo"
-                  outlined
-                  bg-color="white"
-                  lazy-rules
-                  hidden-space
-                  dense
-                  class="inputgreen"
-                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-                  label="คำนำหน้าชื่อ"
-                  v-model="fatherDataEdit.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="!fatherDataEdit.isHaveInfo"
-                  outlined
-                  dense
-                  bg-color="white"
-                  class="inputgreen"
-                  lazy-rules
-                  v-model="fatherDataEdit.firstName"
-                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-                  label="ชื่อ"
-                  hidden-space
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!fatherDataEdit.isHaveInfo"
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  lazy-rules
-                  v-model="fatherDataEdit.lastName"
-                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-                  label="นามสกุล"
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!fatherDataEdit.isHaveInfo"
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  v-model="fatherDataEdit.job"
-                  label="อาชีพ"
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
-              <div>
-                <q-radio
-                  :disable="!fatherDataEdit.isHaveInfo"
-                  class="q-mr-sm"
-                  v-model="fatherDataEdit.isLive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="1"
-                  label="ยังมีชีวิตอยู่"
-                  dense
-                  :color="!fatherDataEdit.isHaveInfo ? 'grey' : 'primary'"
-                />
-                <q-radio
-                  :disable="!fatherDataEdit.isHaveInfo"
-                  v-model="fatherDataEdit.isLive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="0"
-                  :color="!fatherDataEdit.isHaveInfo ? 'grey' : 'red'"
-                  label="ถึงแก่กรรม"
-                  dense
-                />
-              </div>
-            </div>
-          </q-card>
-          <q-separator class="q-my-lg" />
-          <div class="col-12 row q-pb-sm">
-            <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="motherDataEdit.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="1"
-                label="มีข้อมูล"
-                dense
-                color="primary"
-              />
-              <q-radio
-                v-model="motherDataEdit.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="0"
-                color="red"
-                label="ไม่มีข้อมูล"
-                dense
-              />
-            </div>
-          </div>
-          <q-card
-            v-if="motherDataEdit.isHaveInfo"
-            bordered
-            class="bg-grey-1 q-pa-md"
-          >
-            <div class="row q-col-gutter-md">
-              <div class="col">
-                <q-input
-                  :disable="!motherDataEdit.isHaveInfo"
-                  outlined
-                  hide-bottom-space
-                  bg-color="white"
-                  dense
-                  v-model="motherDataEdit.citizenId"
-                  :label="`${'เลขประจำตัวประชาชน'}`"
-                  maxlength="13"
-                  :rules="[
-                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
-                  ]"
-                  class="inputgreen"
-                  mask="#############"
-                />
-              </div>
-              <div class="col">
-                <q-select
-                  :disable="!motherDataEdit.isHaveInfo"
-                  outlined
-                  bg-color="white"
-                  lazy-rules
-                  dense
-                  v-model="motherDataEdit.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="!motherDataEdit.isHaveInfo"
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  lazy-rules
-                  v-model="motherDataEdit.firstName"
-                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-                  label="ชื่อ"
-                  hidden-space
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!motherDataEdit.isHaveInfo"
-                  outlined
-                  class="inputgreen"
-                  dense
-                  bg-color="white"
-                  lazy-rules
-                  v-model="motherDataEdit.lastName"
-                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-                  label="นามสกุล"
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!motherDataEdit.isHaveInfo"
-                  outlined
-                  class="inputgreen"
-                  dense
-                  bg-color="white"
-                  v-model="motherDataEdit.job"
-                  label="อาชีพ"
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
-              <div>
-                <q-radio
-                  :disable="!motherDataEdit.isHaveInfo"
-                  class="q-mr-sm"
-                  v-model="motherDataEdit.isLive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="1"
-                  label="ยังมีชีวิตอยู่"
-                  dense
-                  :color="!motherDataEdit.isHaveInfo ? 'grey' : 'primary'"
-                />
-                <q-radio
-                  :disable="!motherDataEdit.isHaveInfo"
-                  v-model="motherDataEdit.isLive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="0"
-                  :color="!motherDataEdit.isHaveInfo ? 'grey' : 'red'"
-                  label="ถึงแก่กรรม"
-                  dense
-                />
-              </div>
-            </div>
-          </q-card>
-          <q-separator class="q-my-lg" />
-          <div class="col-12 row q-pb-sm">
-            <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="spouseDataEdit.isHave"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="1"
-                label="มี"
-                dense
-                color="primary"
-              />
-              <q-radio
-                v-model="spouseDataEdit.isHave"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                :val="0"
-                color="red"
-                label="ไม่มี"
-                dense
-              />
-            </div>
-          </div>
-          <q-card
-            v-if="spouseDataEdit.isHave"
-            bordered
-            class="bg-grey-1 q-pa-md"
-          >
-            <div class="row q-col-gutter-md">
-              <div class="col">
-                <q-input
-                  :disable="!spouseDataEdit.isHave"
-                  outlined
-                  hide-bottom-space
-                  bg-color="white"
-                  dense
-                  class="inputgreen"
-                  v-model="spouseDataEdit.citizenId"
-                  :label="`${'เลขประจำตัวประชาชน'}`"
-                  maxlength="13"
-                  :rules="[
-                    (val) => val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
-                  ]"
-                  mask="#############"
-                />
-              </div>
-              <div class="col">
-                <q-select
-                  :disable="!spouseDataEdit.isHave"
-                  outlined
-                  class="inputgreen"
-                  bg-color="white"
-                  lazy-rules
-                  dense
-                  v-model="spouseDataEdit.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="!spouseDataEdit.isHave"
-                  outlined
-                  class="inputgreen"
-                  dense
-                  bg-color="white"
-                  lazy-rules
-                  v-model="spouseDataEdit.firstName"
-                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-                  label="ชื่อ"
-                  hidden-space
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!spouseDataEdit.isHave"
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  lazy-rules
-                  v-model="spouseDataEdit.lastName"
-                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-                  label="นามสกุล"
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  :disable="!spouseDataEdit.isHave"
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  v-model="spouseDataEdit.job"
-                  label="อาชีพ"
-                />
-              </div>
-            </div>
-            <div class="row">
-              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
-              <div>
-                <q-radio
-                  :disable="!spouseDataEdit.isHave"
-                  class="q-mr-sm"
-                  v-model="spouseDataEdit.isLive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="1"
-                  label="ยังมีชีวิตอยู่"
-                  dense
-                  :color="!spouseDataEdit.isHave ? 'grey' : 'primary'"
-                />
-                <q-radio
-                  :disable="!spouseDataEdit.isHave"
-                  v-model="spouseDataEdit.isLive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  :val="0"
-                  :color="!motherData.isHaveInfo ? 'grey' : 'red'"
-                  label="ถึงแก่กรรม"
-                  dense
-                />
-              </div>
-            </div>
-          </q-card>
-          <q-separator class="q-mt-lg q-mb-md" />
-          <div class="col-12 row items-center q-pb-sm">
-            <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"
-              dense
-              @click="addChildren"
-            >
-              <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-            </q-btn>
-          </div>
-          <div
-            v-for="(items, index) in childrenDataEdit.childrens"
-            :key="index"
-          >
-            <div class="row items-center">
-              <q-card bordered class="bg-grey-1 col-12 q-mb-lg">
-                <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center">
-                  <div class="text-weight-medium q-pr-md">
-                    บุตรคนที่ : {{ index + 1 }}
-                  </div>
-                  <q-btn
-                    flat
-                    dense
-                    size="12px"
-                    round
-                    color="red"
-                    @click="deleteChildren(items)"
-                    icon="mdi-delete"
-                  >
-                    <q-tooltip>ลบข้อมูลบุตรคนที่ {{ index + 1 }}</q-tooltip>
-                  </q-btn>
-                </div>
-                <q-separator />
-                <div class="q-pa-md col-12">
-                  <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>
-                </div>
-              </q-card>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-
-  <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-card style="min-width: 60%">
-      <dialog-header
-        tittle="ประวัติแก้ไขข้อมูลครอบครัว"
-        :close="closeHistoryDialog"
-      />
-      <q-separator color="grey-4" />
-      <q-card-section style="max-height: 60vh" class="scroll q-pa-none">
-        <div v-if="historyRows.length === 0">ไม่พบข้อมูล</div>
-        <div v-else class="scroll">
-          <div class="row col-12 bg-teal-1 q-py-sm q-px-md">
-            ลำดับที่ <strong class="q-pl-sm q-pr-md">{{ index }}</strong>
-            <span class="q-pr-md">: </span> แก้ไขโดย
-            <strong class="q-pl-sm q-pr-md">{{
-              historyRows[index - 1].lastUpdateFullName
-            }}</strong>
-            วันที่แก้ไข
-            <strong class="q-pl-sm q-pr-md">{{
-              date2Thai(historyRows[index - 1].lastUpdatedAt)
-            }}</strong>
-          </div>
-          <div class="q-pa-md">
-            <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 text-grey-6 text-weight-medium">
-                  <div>เลขประจำตัวประชาชน</div>
-                </div>
-                <div class="col">
-                  {{ historyRows[index - 1].fatherCitizenId }}
-                </div>
-              </div>
-              <div class="row items-center">
-                <div class="col-2 text-grey-6 text-weight-medium">
-                  ชื่อ-นามสกุล
-                </div>
-                <div class="col-6">
-                  {{
-                    historyRows[index - 1].fatherPrefix +
-                    historyRows[index - 1].fatherFirstName +
-                    " " +
-                    historyRows[index - 1].fatherLastName
-                  }}
-                </div>
-                <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
-                <div class="col">
-                  {{ historyRows[index - 1].fatherCareer }}
-                </div>
-              </div>
-              <div class="row items-center">
-                <div class="col-2 text-grey-6 text-weight-medium">
-                  สถานภาพการมีชีวิต
-                </div>
-                <div class="col-10">
-                  <div v-if="historyRows[index - 1].fatherLive">
-                    มีชีวิตอยู่
-                  </div>
-                  <div v-else>ถึงแก่กรรม</div>
-                </div>
-              </div>
-            </q-card>
-
-            <div class="col-12 row q-pb-sm q-mt-lg">
-              <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 text-grey-6 text-weight-medium">
-                  <div>เลขประจำตัวประชาชน</div>
-                </div>
-                <div class="col">
-                  {{ historyRows[index - 1].motherCitizenId }}
-                </div>
-              </div>
-              <div class="row items-center">
-                <div class="col-2 text-grey-6 text-weight-medium">
-                  ชื่อ-นามสกุล
-                </div>
-                <div class="col-6">
-                  {{
-                    historyRows[index - 1].motherPrefix +
-                    historyRows[index - 1].motherFirstName +
-                    " " +
-                    historyRows[index - 1].motherLastName
-                  }}
-                </div>
-                <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
-                <div class="col">
-                  {{ historyRows[index - 1].motherCareer }}
-                </div>
-              </div>
-              <div class="row items-center">
-                <div class="col-2 text-grey-6 text-weight-medium">
-                  สถานภาพการมีชีวิต
-                </div>
-                <div class="col">
-                  <div v-if="historyRows[index - 1].motherLive">
-                    มีชีวิตอยู่
-                  </div>
-                  <div v-else>ถึงแก่กรรม</div>
-                </div>
-              </div>
-            </q-card>
-
-            <div
-              v-if="historyRows[index - 1].couple"
-              class="col-12 row q-pb-sm q-mt-lg"
-            >
-              <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 text-grey-6 text-weight-medium">
-                  <div>เลขประจำตัวประชาชน</div>
-                </div>
-                <div class="col">
-                  {{ historyRows[index - 1].coupleCitizenId }}
-                </div>
-              </div>
-              <div class="row items-center">
-                <div class="col-2 text-grey-6 text-weight-medium">
-                  ชื่อ-นามสกุล
-                </div>
-                <div class="col-6">
-                  {{
-                    historyRows[index - 1].couplePrefix +
-                    historyRows[index - 1].coupleFirstName +
-                    " " +
-                    historyRows[index - 1].coupleLastName
-                  }}
-                </div>
-                <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
-                <div class="col">
-                  {{ historyRows[index - 1].coupleCareer }}
-                </div>
-              </div>
-              <div class="row items-center">
-                <div class="col-2 text-grey-6 text-weight-medium">
-                  สถานภาพการมีชีวิต
-                </div>
-                <div class="col">
-                  <div v-if="historyRows[index - 1].coupleLive">
-                    มีชีวิตอยู่
-                  </div>
-                  <div v-else>ถึงแก่กรรม</div>
-                </div>
-              </div>
-            </q-card>
-
-            <div
-              v-if="historyRows[index - 1].children[0] !== undefined"
-              class="col-12 row q-pb-sm q-mt-lg"
-            >
-              <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"
-            >
-              <q-card bordered class="bg-grey-1 q-pb-md">
-                <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center">
-                  <div class="text-weight-medium q-pr-md">
-                    บุตรคนที่ : {{ index + 1 }}
-                  </div>
-                </div>
-                <q-separator />
-                <div class="col-12 q-pa-md q-col-gutter-md">
-                  <div class="row items-center">
-                    <div class="col-2 text-grey-6 text-weight-medium">
-                      <div>เลขประจำตัวประชาชน</div>
-                    </div>
-                    <div class="col-10">
-                      {{ children.childrenCitizenId }}
-                    </div>
-                  </div>
-                  <div class="row items-center">
-                    <div class="col-2 text-grey-6 text-weight-medium">
-                      ชื่อ-นามสกุล
-                    </div>
-                    <div class="col-6">
-                      {{
-                        children.childrenPrefix +
-                        children.childrenFirstName +
-                        " " +
-                        children.childrenLastName
-                      }}
-                    </div>
-                    <div class="col-1 text-grey-6 text-weight-medium">
-                      อาชีพ
-                    </div>
-                    <div class="col">
-                      {{ children.childrenCareer }}
-                    </div>
-                  </div>
-                  <div class="row items-center">
-                    <div class="col-2 text-grey-6 text-weight-medium">
-                      สถานภาพการมีชีวิต
-                    </div>
-                    <div class="col">
-                      <div v-if="children.childrenLive">มีชีวิตอยู่</div>
-                      <div v-else>ถึงแก่กรรม</div>
-                    </div>
-                  </div>
-                </div>
-              </q-card>
-            </div>
-          </div>
-        </div>
-      </q-card-section>
-      <q-separator color="grey-4" />
-      <q-card-actions align="center">
-        <div class="q-pa-sm flex flex-center">
-          <q-pagination v-model="index" :max="historyRows.length" input />
-        </div>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>
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 a4b8b5711..7a002a854 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
+
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
@@ -438,6 +440,7 @@ onMounted(() => {
         </q-toolbar-title>
         <div class="row q-col-gutter-sm">
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             round
             flat
             color="primary"
@@ -513,6 +516,7 @@ onMounted(() => {
         </q-toolbar-title>
         <div class="row q-col-gutter-sm">
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             round
             flat
             color="primary"
@@ -588,6 +592,7 @@ onMounted(() => {
             • คู่สมรส
           </div>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             round
             flat
             dense
@@ -688,6 +693,7 @@ onMounted(() => {
         <div class="row q-col-gutter-sm">
           <div class="text-weight-bold text-primary text-subtitle1">• บุตร</div>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             round
             flat
             dense
@@ -711,6 +717,7 @@ onMounted(() => {
             <q-space />
             <div class="row q-col-gutter-sm">
               <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
                 round
                 flat
                 color="primary"
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 2254b1330..08260aba4 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
+
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -709,6 +711,7 @@ onMounted(async () => {
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
       round
       flat
       dense
@@ -807,6 +810,7 @@ onMounted(async () => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="primary"
             flat
             dense
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 418db32b9..ac0b5fe53 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { QForm, useQuasar } from "quasar";
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -320,6 +321,7 @@ onMounted(async () => {
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
       flat
       round
       color="primary"
@@ -410,6 +412,7 @@ onMounted(async () => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="primary"
             flat
             dense
@@ -571,91 +574,79 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-layout
-      view="lHh lpr lFf"
-      container
-      style="height: 500px; min-width: 80%"
-      class="bg-white"
-    >
-      <q-header>
-        <q-toolbar>
-          <dialog-header
-            tittle="ประวัติแก้ไขความสามารถพิเศษ"
-            :close="closeHistoryDialog"
+  <q-dialog v-model="historyDialog" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <dialog-header
+        tittle="ประวัติแก้ไขความสามารถพิเศษ"
+        :close="closeHistoryDialog"
+      />
+      <q-separator />
+      <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-toolbar>
-        <q-separator color="grey-4" />
-      </q-header>
-
-      <q-page-container>
-        <q-page class="q-pa-md">
-          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-            <q-space />
-            <q-input
-              dense
-              outlined
-              bg-color="white"
-              v-model="historyKeyword"
-              label="ค้นหา"
-              class="q-mr-sm"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="historyVisibleColumns"
-              multiple
-              outlined
-              dense
-              bg-color="white"
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="historyColumns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </q-toolbar>
-          <d-table
-            ref="table"
-            :columns="historyColumns"
-            :rows="historyRows"
-            row-key="name"
-            flat
-            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>
+        <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-card-section>
+    </q-card>
   </q-dialog>
 </template>
 
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
index 508a41363..69c99c8e0 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from "vue";
+import { checkPermission } from "@/utils/permissions";
+
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
@@ -540,6 +542,7 @@ onMounted(() => {
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
       flat
       color="primary"
       round
@@ -599,8 +602,8 @@ onMounted(() => {
   >
     <template v-slot:header="props">
       <q-tr :props="props">
-        <q-th auto-width />
-        <q-th auto-width />
+        <q-th auto-width v-if="checkPermission($route)?.attrIsUpdate" />
+        <q-th auto-width v-if="checkPermission($route)?.attrIsUpdate" />
         <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>
@@ -609,7 +612,7 @@ onMounted(() => {
     </template>
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td auto-width>
+        <q-td auto-width v-if="checkPermission($route)?.attrIsUpdate">
           <q-btn
             dense
             size="12px"
@@ -620,10 +623,9 @@ onMounted(() => {
             icon="mdi-arrow-up-bold"
             @click="onSwapUp(props.row.id)"
           >
-            <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
           </q-btn>
         </q-td>
-        <q-td auto-width>
+        <q-td auto-width v-if="checkPermission($route)?.attrIsUpdate">
           <q-btn
             dense
             size="12px"
@@ -634,11 +636,11 @@ onMounted(() => {
             icon="mdi-arrow-down-bold"
             @click="onSwapDown(props.row.id)"
           >
-            <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
           </q-btn>
         </q-td>
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="primary"
             flat
             dense
diff --git a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
index 635b0d9cd..06c73cfd5 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
@@ -229,6 +230,7 @@ onMounted(() => {
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
     <q-btn
+      v-if="checkPermission($route)?.attrIsUpdate"
       dense
       color="teal-5"
       icon="add"
@@ -337,6 +339,7 @@ onMounted(() => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
@@ -359,19 +362,6 @@ onMounted(() => {
           >
             <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
           </q-btn>
-          <!-- <q-btn
-            flat
-            dense
-            round
-            size="14px"
-            color="red"
-            icon="mdi-delete"
-            @click="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-          >
-            <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>
@@ -385,6 +375,7 @@ onMounted(() => {
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
+             v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
               color="primary"
@@ -407,7 +398,7 @@ onMounted(() => {
           <q-list>
             <q-item
               v-for="(col, index) in props.cols.filter(
-                (col) => col.name !== 'desc'
+                (col:any) => col.name !== 'desc'
               )"
               :key="col.name"
               :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
diff --git a/src/modules/04_registryPerson/components/detail/TabMain.vue b/src/modules/04_registryPerson/components/detail/TabMain.vue
index 83f75c08a..0343538fd 100644
--- a/src/modules/04_registryPerson/components/detail/TabMain.vue
+++ b/src/modules/04_registryPerson/components/detail/TabMain.vue
@@ -28,7 +28,7 @@ const itemsTab = ref<any>([
     name: "2",
     icon: "mdi-account-tie",
     label:
-      route.name === "registry-employeeId"
+      route.name === "registryNewEmployeeByid"
         ? "ข้อมูลลูกจ้างชั่วคราว"
         : "ข้อมูลราชการ",
   },
@@ -96,7 +96,9 @@ const splitterModel = ref<number>(12);
             :fetchDataPersonal="props.fetchDataPersonal"
           />
           <EmployeeMain
-            v-if="store.tabMain === '2' && route.name === 'registry-employeeId'"
+            v-if="
+              store.tabMain === '2' && route.name === 'registryNewEmployeeByid'
+            "
           />
           <GovernmentInformationMain v-else-if="store.tabMain === '2'" />
 
diff --git a/src/modules/04_registryPerson/views/detailView.vue b/src/modules/04_registryPerson/views/detailView.vue
index 15e467a26..78a7f61b6 100644
--- a/src/modules/04_registryPerson/views/detailView.vue
+++ b/src/modules/04_registryPerson/views/detailView.vue
@@ -1,29 +1,32 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
-import axios from "axios";
+import { ref, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
+import axios from "axios";
+/**
+ * importType
+ */
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile";
 
-import avatar from "@/assets/avatar_user.jpg";
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
 import TabMain from "@/modules/04_registryPerson/components/detail/TabMain.vue";
 
-import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile";
-import DialogHeader from "@/components/DialogHeader.vue";
-/** ถึงเเก่กรรม */
-const dialogPassaway = ref<boolean>(false);
-const placeDeathCertificate = ref("");
-const deathCertificateNo = ref("");
-const dateDeath = ref<Date>(new Date());
-const filePassaway = ref<any>(null);
-const reasonDeath = ref("");
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+import avatar from "@/assets/avatar_user.jpg";
 
-const dialogImage = ref<boolean>(false);
-
-const mixin = useCounterMixin();
+/**
+ * use
+ */
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
@@ -37,7 +40,17 @@ const {
   date2Thai,
   dateToISO,
   dialogMessageNotify,
-} = mixin;
+} = useCounterMixin();
+
+/** ถึงเเก่กรรม */
+const dialogPassaway = ref<boolean>(false);
+const placeDeathCertificate = ref("");
+const deathCertificateNo = ref("");
+const dateDeath = ref<Date>(new Date());
+const filePassaway = ref<any>(null);
+const reasonDeath = ref("");
+
+const dialogImage = ref<boolean>(false);
 
 const profileId = ref<string>(route.params.id.toString());
 const empType = ref<string>(
@@ -115,7 +128,6 @@ function uploadImg() {
       profileId: profileId.value,
     })
     .then((res) => {
-      console.log(res.data);
       fileName.value = res.data.result.avatarName;
       uploadProfile(res.data.result.avatar);
     })
@@ -125,8 +137,8 @@ function uploadImg() {
     .finally(() => {});
 }
 
-async function uploadProfile(path: string) {
-  await http
+function uploadProfile(path: string) {
+  http
     .post(config.API.fileByPath(path), {
       replace: true,
       fileList: [
@@ -135,7 +147,7 @@ async function uploadProfile(path: string) {
         },
       ],
     })
-    .then(async (res) => {
+    .then((res) => {
       uploadUrl.value = res.data[fileName.value].uploadUrl;
       uploadFileURL(uploadUrl.value, profileFile.value);
       closeImage();
@@ -148,9 +160,9 @@ async function uploadProfile(path: string) {
     });
 }
 
-async function uploadFileURL(uploadUrl: string, file: any) {
+function uploadFileURL(uploadUrl: string, file: any) {
   showLoader();
-  await axios
+  axios
     .put(uploadUrl, file, {
       headers: {
         "Content-Type": file.type,
@@ -168,9 +180,9 @@ async function uploadFileURL(uploadUrl: string, file: any) {
     });
 }
 
-async function fetchProfile(id: string) {
+function fetchProfile(id: string) {
   showLoader();
-  await http
+  http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
     .then(async (res) => {
       profilePicture.value = res.data.downloadUrl;
@@ -287,140 +299,155 @@ function onClickDownloadKp7(type: string) {
     });
 }
 
-/** ช่วยราชการ */
-async function helpPost() {
+/**
+ *  ช่วยราชการ
+ */
+function helpPost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
   dialogConfirm($q, async () => {
     showLoader();
     await http
       .post(config.API.placemenHelpGov, formData)
-      .then(() => {
-        success($q, "ดำเนินการสำเร็จ");
+      .then(async () => {
+        await router.push("/help-government");
+        await success($q, "ดำเนินการสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
         hideLoader();
-        router.push("/help-government");
       });
   });
 }
 
-/** ส่งตัวกลับ */
-async function repatriationPost() {
+/**
+ * ส่งตัวกลับ
+ */
+function repatriationPost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
   dialogConfirm($q, async () => {
     showLoader();
     await http
       .post(config.API.placemenRepatriation, formData)
-      .then(() => {
-        success($q, "ดำเนินการสำเร็จ");
+      .then(async () => {
+        await router.push("/repatriate");
+        await success($q, "ดำเนินการสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
         hideLoader();
-        router.push("/repatriate");
       });
   });
 }
 
-/** แต่งตังเลื่อน */
-async function appointPost() {
+/**
+ * แต่งตังเลื่อน
+ */
+function appointPost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
   dialogConfirm($q, async () => {
     showLoader();
     await http
       .post(config.API.placemenAppointment, formData)
-      .then(() => {
-        success($q, "ดำเนินการสำเร็จ");
+      .then(async () => {
+        await router.push("/appoint-promote");
+        await success($q, "ดำเนินการสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
         hideLoader();
-        router.push("/appoint-promote");
       });
   });
 }
 
-/** ถึงเเก่กรรม */
-async function clickPassaway() {
+/**
+ * ถึงเเก่กรรม
+ */
+function clickPassaway() {
   dialogPassaway.value = true;
 }
 
-/** ให้ออกจากราชการ */
-async function outPost() {
+/**
+ * ให้ออกจากราชการ
+ */
+function outPost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
   dialogConfirm($q, async () => {
     showLoader();
     await http
       .post(config.API.retirementOut, formData)
-      .then(() => {
-        success($q, "ดำเนินการสำเร็จ");
+      .then(async () => {
+        await router.push("/dismiss-order");
+        await success($q, "ดำเนินการสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
         hideLoader();
-        router.push("/dismiss-order");
       });
   });
 }
 
-/** อื่นๆ */
-async function otherPost() {
+/**
+ * อื่นๆ
+ */
+function otherPost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
   dialogConfirm($q, async () => {
     showLoader();
     await http
       .post(config.API.placemenOther, formData)
-      .then(() => {
-        success($q, "ดำเนินการสำเร็จ");
+      .then(async () => {
+        await router.push("/other");
+        await success($q, "ดำเนินการสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
         hideLoader();
-        router.push("/other");
       });
   });
 }
 
-const appointEmployeePost = async () => {
+function appointEmployeePost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
   dialogConfirm($q, async () => {
     showLoader();
     await http
       .post(config.API.appointEmployee(), formData)
-      .then(() => {
-        success($q, "ดำเนินการสำเร็จ");
+      .then(async () => {
+        await router.push("/appoint-employee");
+        await success($q, "ดำเนินการสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
         hideLoader();
-        router.push("/appoint-employee");
       });
   });
-};
+}
 
 function closePassaway() {
   dialogPassaway.value = false;
 }
 
+/**
+ * function ยืนยันบันทึกข้อมูลถึงแก่กรรม
+ */
 function clickSaveDeceased() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -433,9 +460,9 @@ function clickSaveDeceased() {
     formData.append("ProfileId", profileId.value);
     await http
       .post(config.API.listDeceased(), formData)
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        router.push("/deceased");
+      .then(async () => {
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+        await router.push("/deceased");
       })
       .catch((e) => {
         messageError($q, e);
@@ -446,10 +473,17 @@ function clickSaveDeceased() {
   });
 }
 
+/**
+ * function เปืด popup เลือกรูปภาพ
+ */
 function openDialogImg() {
   dialogImage.value = true;
   getImage();
 }
+
+/**
+ * function เรียกข้อมูลรูป
+ */
 function getImage() {
   showLoader();
   http
@@ -470,6 +504,10 @@ function getImage() {
     });
 }
 
+/**
+ * function เรียกข้อมูลรูป
+ * @param dataList
+ */
 function getImg(dataList: any) {
   http
     .get(config.API.fileByPath(`${dataList.avatar}/${dataList.avatarName}`))
@@ -481,21 +519,26 @@ function getImg(dataList: any) {
         ...data,
       };
       images.value = [...images.value, newData];
-      console.log(images.value);
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {});
+    });
 }
 
+/**
+ * funciton ปิด Popup เลือกรูปภาพ
+ */
 function closeImage() {
   dialogImage.value = false;
   images.value = [];
   imagesAlldata.value = [];
 }
 
-async function deletePhoto(id: string) {
+/**
+ * funciotn ยืนยันการลบรูป
+ * @param id  รูปภาพ
+ */
+function deletePhoto(id: string) {
   dialogRemove(
     $q,
     () => {
@@ -518,35 +561,20 @@ async function deletePhoto(id: string) {
   );
 }
 
-function imageClass(n: any) {
-  const val = n == activeImage.value;
-  return {
-    "rounded-borders bg-grey-2 image-size-default": val,
-    "rounded-borders bg-grey-2 image-size-full": !val,
-  };
-}
-function getClass(n: any) {
-  const val = n == activeImage.value;
-  return {
-    "rounded-borders border-green shadow-1": val,
-    "rounded-borders shadow-1": !val,
-  };
-}
-
-async function selectAvatarHistory() {
-  console.log(activeImage.value);
-
+/**
+ * function ยืนยันการเลือกรูป
+ */
+function selectAvatarHistory() {
   if (activeImage.value == null) {
     dialogMessageNotify($q, "กรุณาเลือกรูปที่ต้องการเปลี่ยน");
     return;
   }
   const data = activeImage.value;
   showLoader();
-  await http
+  http
     .get(config.API.orgProfileAvatar + `/select/${profileId.value}/${data.id}`)
-    .then(async (res) => {
+    .then(async () => {
       closeImage();
-
       await fetchDataPersonal();
       await fetchProfile(profileId.value);
     })
@@ -558,10 +586,32 @@ async function selectAvatarHistory() {
     });
 }
 
+/**
+ * class รูป
+ * @param n
+ */
+function imageClass(n: any) {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders bg-grey-2 image-size-default": val,
+    "rounded-borders bg-grey-2 image-size-full": !val,
+  };
+}
+
+/**
+ * class input
+ * @param n
+ */
+function getClass(n: any) {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders border-green shadow-1": val,
+    "rounded-borders shadow-1": !val,
+  };
+}
+
 onMounted(async () => {
-  //   fileName.value = `profile-${profileId.value}`;
   await fetchDataPersonal();
-  // await fetchProfile(profileId.value);
 });
 </script>
 
@@ -677,7 +727,6 @@ onMounted(async () => {
                 }}
               </h2>
             </div>
-            <!-- <div class="col-12 subtitle">{{ formDetail?.position }}</div> -->
           </div>
         </div>
       </div>
@@ -691,6 +740,7 @@ onMounted(async () => {
           <q-img :src="profilePicture" />
         </q-avatar>
         <q-btn
+          v-if="checkPermission($route)?.attrIsUpdate"
           round
           text-color="primary"
           icon="mdi-pencil-outline"
@@ -739,78 +789,6 @@ onMounted(async () => {
     <q-separator />
   </q-card>
 
-  <!--  <q-card>
-    <div class="column" style="height: 120px">
-      <div class="col row items-center">
-        <div class="row col-12">
-          <div class="col" style="padding-left: 14%">
-            <div class="col-12 text-primary">
-              <h2
-                class="title q-ma-none q-pa-none"
-                v-if="formDetail && formDetail.firstName && formDetail.lastName"
-              >
-                {{
-                  `${formDetail?.prefix ? formDetail?.prefix : ""}${
-                    formDetail?.firstName
-                  } ${formDetail?.lastName} ${leaveReason}`
-                }}
-              </h2>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="absolute-center-left q-ml-lg">
-        <q-avatar size="90px" class="bg-grey-2">
-          <q-img :src="profilePicture" />
-        </q-avatar>
-        <q-btn
-          round
-          text-color="primary"
-          icon="mdi-pencil-outline"
-          @click="openDialogImg"
-          size="sm"
-          unelevated
-          class="bg-white btnEditImg"
-        >
-        </q-btn>
-      </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 text-caption">
-                {{ empType === "" ? "ตำแหน่งในสายงาน" : "ตำแหน่ง" }}
-              </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 text-caption">
-                {{ empType === "" ? "ตำแหน่งประเภท" : "กลุ่มงาน" }}
-              </div>
-              <div class="col">
-                {{ formDetail?.posType?.posTypeName || "-" }}
-              </div>
-            </div>
-          </div>
-          <div class="col-2">
-            <div class="col-sm-3 col-md-3">
-              <div class="col text-grey-6 text-caption">
-                {{ empType === "" ? "ระดับ" : "ระดับชั้นงาน" }}
-              </div>
-              <div class="col">
-                {{ formDetail?.posLevel?.posLevelName || "-" }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card> -->
-
   <q-card bordered class="q-mt-md rounded">
     <TabMain :fetchDataPersonal="fetchDataPersonal" />
   </q-card>
@@ -1034,6 +1012,7 @@ h2.title {
 
 .bg-toolbar {
   background-color: #f2fbfa;
+  height: 60px;
 }
 .btnEditImg {
   position: absolute;
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 79827d1af..f19ed42f2 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import { date, useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
@@ -288,6 +289,7 @@ onMounted(() => {
   <q-card flat bordered class="q-pa-md">
     <div class="col-12 row items-center">
       <q-btn
+        v-if="checkPermission($route)?.attrIsCreate"
         flat
         round
         color="primary"
@@ -297,6 +299,7 @@ onMounted(() => {
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
       <q-btn
+        v-if="checkPermission($route)?.attrIsUpdate"
         flat
         round
         color="primary"
@@ -380,7 +383,13 @@ onMounted(() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td auto-width>
+            <q-td
+              auto-width
+              v-if="
+                checkPermission($route)?.attrIsDelete ||
+                checkPermission($route)?.attrIsUpdate
+              "
+            >
               <q-btn
                 icon="mdi-dots-vertical"
                 size="12px"
@@ -395,9 +404,10 @@ onMounted(() => {
                       clickable
                       v-close-popup
                       v-if="
-                        props.row.draftOrgEmployeeStatus === null ||
-                        props.row.draftOrgEmployeeStatus === 'WAITTING' ||
-                        props.row.draftOrgEmployeeStatus === 'PENDING'
+                        (props.row.draftOrgEmployeeStatus === null ||
+                          props.row.draftOrgEmployeeStatus === 'WAITTING' ||
+                          props.row.draftOrgEmployeeStatus === 'PENDING') &&
+                        checkPermission($route)?.attrIsUpdate
                       "
                       @click.pervent="onClickSelectPos(props.row)"
                     >
@@ -415,6 +425,7 @@ onMounted(() => {
                       <q-item-section>กำหนดตำแหน่ง</q-item-section>
                     </q-item>
                     <q-item
+                      v-if="checkPermission($route)?.attrIsUpdate"
                       clickable
                       v-close-popup
                       @click.pervent="redirectToPageDetail(props.row.id)"
@@ -430,6 +441,7 @@ onMounted(() => {
                     </q-item>
                     <q-separator />
                     <q-item
+                      v-if="checkPermission($route)?.attrIsDelete"
                       clickable
                       v-close-popup
                       @click.pervent="onClickDelete(props.row.id)"
diff --git a/src/modules/16_positionEmployee/components/TreeTable.vue b/src/modules/16_positionEmployee/components/TreeTable.vue
index 4f62bf065..f144c02cf 100644
--- a/src/modules/16_positionEmployee/components/TreeTable.vue
+++ b/src/modules/16_positionEmployee/components/TreeTable.vue
@@ -3,7 +3,7 @@ import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
-import genreport from "@/plugins/genreportxlsx";
+import { checkPermission } from "@/utils/permissions";
 
 /**
  * importType
@@ -348,6 +348,7 @@ watch(
     <q-toolbar style="padding: 0">
       <div>
         <q-btn
+          v-if="checkPermission($route)?.attrIsCreate"
           flat
           round
           dense
@@ -359,6 +360,7 @@ watch(
         </q-btn>
 
         <q-btn
+          v-if="checkPermission($route)?.attrIsUpdate"
           flat
           round
           dense
@@ -370,6 +372,7 @@ watch(
         </q-btn>
 
         <q-btn
+          v-if="checkPermission($route)?.attrIsUpdate"
           flat
           round
           dense
@@ -381,32 +384,6 @@ watch(
         </q-btn>
       </div>
 
-      <!-- <q-btn
-        v-if="store.typeOrganizational === 'draft'"
-        flat
-        round
-        dense
-        color="deep-purple"
-        icon="save_alt"
-      >
-        <q-menu>
-          <q-list
-            dense
-            style="min-width: 100px"
-            v-for="(item, index) in document"
-            :key="index"
-          >
-            <q-item
-              clickable
-              v-close-popup
-              @click.stop="onClickDownloadReport(item.val, item.name)"
-            >
-              <q-item-section>{{ item.name }}</q-item-section>
-            </q-item>
-          </q-list>
-        </q-menu>
-        <q-tooltip>ดาวน์โหลด</q-tooltip>
-      </q-btn> -->
       <q-space />
       <div class="row q-gutter-md">
         <div>
@@ -466,6 +443,10 @@ watch(
         <q-tr :props="props" class="cursor-pointer">
           <q-td>
             <q-btn
+              v-if="
+                checkPermission($route)?.attrIsUpdate ||
+                checkPermission($route)?.attrIsDelete
+              "
               flat
               dense
               icon="mdi-dots-vertical"
@@ -477,7 +458,10 @@ watch(
                 <q-list dense style="min-width: 150px">
                   <!-- เลือกคนครอง -->
                   <q-item
-                    v-if="props.row.positionIsSelected == 'ว่าง'"
+                    v-if="
+                      props.row.positionIsSelected == 'ว่าง' &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
                     clickable
                     v-close-popup
                     @click="openSelectPerson(props.row)"
@@ -494,7 +478,10 @@ watch(
                     </q-item-section>
                   </q-item>
                   <q-item
-                    v-else-if="props.row.positionIsSelected != 'ว่าง'"
+                    v-else-if="
+                      props.row.positionIsSelected != 'ว่าง' &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
                     clickable
                     v-close-popup
                     @click="removePerson(props.row.id)"
@@ -511,7 +498,13 @@ watch(
                     </q-item-section>
                   </q-item>
                   <q-item
-                    v-for="(item, index) in listMenu"
+                    v-for="(item, index) in checkPermission($route)
+                      ?.attrIsUpdate && !checkPermission($route)?.attrIsDelete
+                      ? listMenu.filter((e) => e.type !== 'DEL')
+                      : checkPermission($route)?.attrIsDelete &&
+                        !checkPermission($route)?.attrIsUpdate
+                      ? listMenu.filter((e) => e.type === 'DEL')
+                      : listMenu"
                     :key="index"
                     clickable
                     v-close-popup
diff --git a/src/stores/menuList.ts b/src/stores/menuList.ts
index 4682dd3be..d4a86bc2c 100644
--- a/src/stores/menuList.ts
+++ b/src/stores/menuList.ts
@@ -116,21 +116,23 @@ export const useMenuDataStore = defineStore("menuUse", () => {
    * @param data ข้อมูลรายการทั้งหมด
    */
   function fetchListMenu(data: ListMenu[]) {
-    data.forEach((item) => {
-      if (item.children && item.children.length !== 0) {
-        item.children.forEach((q: ListMenu) => {
-          const config: any = childLevelTree.value[q.id];
-          if (config) {
-            if (!q.children) {
-              q.children = [];
+    if (data) {
+      data.forEach((item) => {
+        if (item.children && item.children.length !== 0) {
+          item.children.forEach((q: ListMenu) => {
+            const config: any = childLevelTree.value[q.id];
+            if (config) {
+              if (!q.children) {
+                q.children = [];
+              }
+              // เพิ่มเมนูเลเวล 3
+              q.children.push(...config);
             }
-            // เพิ่มเมนูเลเวล 3
-            q.children.push(...config);
-          }
-        });
-      }
-    });
-    menuList.value.push(...data);
+          });
+        }
+      });
+      menuList.value.push(...data);
+    }
   }
 
   /****************** สิทธิ์ **************************/
diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts
index 6a13c6aad..df203e5cb 100644
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -7,15 +7,11 @@ import type { RoleData } from "@/interface/main";
 const storeMenu = useMenuDataStore();
 
 export function checkPermission(route: any): RoleData | null {
-  console.log("storeMenu.permissions", storeMenu.permissions);
-  
-
   if (storeMenu.permissions && route.meta.Key) {
     const role =
       storeMenu.permissions.roles.find(
         (item) => item.authSysId === route.meta.Key
       ) ?? null;
-    
 
     return role;
   } else {