From 95a20c7050240cb3f9e1cae3ffd75c42a89a0312 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 28 Jun 2023 17:22:44 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20UI=20?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=88=E0=B8=AD=E0=B9=81?=
 =?UTF-8?q?=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=9C?=
 =?UTF-8?q?=E0=B8=B9=E0=B9=89=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B8=9C=E0=B9=88?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=95=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=87=E0=B8=81=E0=B8=B1=E0=B8=9A=20Req.=20#25?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   21 +-
 .../components/PersonalDetail/Detail.vue      |   37 +-
 .../components/PersonalDetail/ExamResult.vue  |   24 +-
 .../PersonalDetail/Information/Address.vue    |   98 +-
 .../PersonalDetail/Information/Family.vue     | 1099 +++++++++++++++
 .../Information/Information.vue               |   88 +-
 .../PersonalDetail/Information/layout.vue     |   17 +-
 .../components/PersonalDetail/Insignia.vue    | 1199 -----------------
 .../PersonalDetail/Qualification.vue          |   66 +-
 src/modules/05_placement/router.ts            |   16 +-
 src/views/MainLayout.vue                      |  140 +-
 11 files changed, 1351 insertions(+), 1454 deletions(-)
 create mode 100644 src/modules/05_placement/components/PersonalDetail/Information/Family.vue
 delete mode 100644 src/modules/05_placement/components/PersonalDetail/Insignia.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index df5193a95..3941c81f6 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -182,11 +182,13 @@ const menuList = readonly<any[]>([
     role: "placement",
     children: [
       {
+        key: 6.1,
         label: "รายชื่อผู้สอบผ่าน" /* รายชื่อผู้สอบผ่าน */,
         path: "placement",
         role: "placement",
       },
       {
+        key: 6.2,
         label: "ออกคำสั่ง" /* ออกคำสั่งบรรจุ */,
         path: "Orderplacement",
         role: "placement",
@@ -289,7 +291,7 @@ const tabList = readonly<tabType[]>([
   },
 ]);
 
-const tabList_placement = readonly<tabType[]>([
+const tabListPlacement = readonly<tabType[]>([
   {
     key: 1,
     label: "ข้อมูลทั่วไป",
@@ -297,30 +299,25 @@ const tabList_placement = readonly<tabType[]>([
   },
   {
     key: 2,
-    label: "ประวัติการศึกษา",
-    tag: "education",
-  },
-  {
-    key: 3,
     label: "ใบอนุญาตประกอบอาชีพ",
     tag: "certicate",
   },
   {
-    key: 4,
-    label: "เครื่องราชอิสริยาภรณ์",
-    tag: "insignia",
+    key: 3,
+    label: "ประวัติการศึกษา",
+    tag: "education",
   },
   {
-    key: 5,
+    key: 4,
     label: "ผลการสอบ",
     tag: "examresult",
   },
   {
-    key: 6,
+    key: 5,
     label: "การคัดกรองคุณสมบัติ",
     tag: "qualification",
   },
 ]);
 
-export { menuList, tabList, tabList_placement };
+export { menuList, tabList, tabListPlacement };
 export type { ScrollType, tabType, menuType, notiType, optionType };
diff --git a/src/modules/05_placement/components/PersonalDetail/Detail.vue b/src/modules/05_placement/components/PersonalDetail/Detail.vue
index 58dcf7f11..c105e003c 100644
--- a/src/modules/05_placement/components/PersonalDetail/Detail.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Detail.vue
@@ -7,9 +7,9 @@ const router = useRouter();
 import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/layout.vue";
 import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
 import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.vue";
-import InsigniaVue from "@/modules/05_placement/components/PersonalDetail/Insignia.vue";
 import ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamResult.vue";
 import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.vue";
+import Family from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";
 
 const store = useDataStore();
 const { changeTab } = store;
@@ -38,29 +38,34 @@ onMounted(async () => {
             รายละเอียดของ {{ FormData.fullName }}
         </div>
     </div>
-    <div>
-        <q-card flat bordered class="q-px-lg q-pb-lg">
-            <div id="information" name="1" class="row col-12 information">
+    <div class="q-pb-lg">
+        <q-card class="row q-pb-lg">
+            <div id="information" name="1" class="col-12 q-pa-sm">
                 <Informationvue v-model:statusEdit="statusEdit" :profileType="profileType" />
             </div>
-            <div class="horizontal-line"></div>
-            <div id="education" name="2" class="row col-12 q-mt-md">
-                <EducationVue v-model:statusEdit="statusEdit" />
+
+            <div id="family" name="10" class="col-12 q-pa-sm" >
+                <div class="col-12 q-px-md"><q-separator size="4px"/></div>
+                <Family v-model:statusEdit="statusEdit" />
             </div>
-            <div class="horizontal-line"></div>
-            <div id="certicate" name="4" class="row col-12 q-mt-md">
+
+            <div id="certicate" name="2" class="col-12 q-pa-sm" >
+                <div class="col-12 q-px-md"><q-separator size="4px"/></div>
                 <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
             </div>
-            <div class="horizontal-line"></div>
-            <div id="insignia" name="5" class="row col-12 q-mt-md">
-                <InsigniaVue v-model:statusEdit="statusEdit" />
+
+            <div id="education" name="3" class="col-12 q-pa-sm" >
+                <div class="col-12 q-px-md"><q-separator size="4px"/></div>
+                <EducationVue v-model:statusEdit="statusEdit" />
             </div>
-            <div class="horizontal-line"></div>
-            <div id="examresult" name="6" class="q-px-lg q-py-lg">
+
+            <div id="examresult" name="4" class="col-12 q-pa-sm" >
+                <div class="col-12 q-px-md"><q-separator size="4px"/></div>
                 <ExamResult />
             </div>
-                <div class="horizontal-line"></div>
-            <div id="qualification" name="7" class="q-px-lg q-py-lg">
+
+            <div id="qualification" name="5" class="col-12 q-pa-sm" >
+                <div class="col-12 q-px-md"><q-separator size="4px"/></div>
                 <Qualification v-model:statusEdit="statusEdit" />
             </div>
         </q-card>
diff --git a/src/modules/05_placement/components/PersonalDetail/ExamResult.vue b/src/modules/05_placement/components/PersonalDetail/ExamResult.vue
index ae4564dc4..cbee59678 100644
--- a/src/modules/05_placement/components/PersonalDetail/ExamResult.vue
+++ b/src/modules/05_placement/components/PersonalDetail/ExamResult.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 </script>
 <template>
-    <div class="row">
+    <div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
         <q-icon name="mdi-briefcase-edit" size="1.5em" color="grey-5" class="q-pr-md" />
-        <span class="text-bold text-subtitle2 ">ผลการสอบ</span>
+        <span class="text-bold text-subtitle2">ผลการสอบ</span>
     </div>
-    <div class="row">
-        <div class="col-7 q-pl-xl">
+    <div class="row q-px-md">
+        <div class="col-7">
             <q-card class="card-exam">
-                <div class="row">
+                <div class="row q-px-md q-py-sm">
                     <div class="col q-pa-xs header-sub-text-exam">
                         <div class="q-pb-xs"> ประเภท </div>
                         <div class="q-pb-xs"> ภาค ก </div>
@@ -35,12 +35,12 @@
         </div>
         <div class="col q-pl-xl">
             <q-card class="q-pt-xs">
-                <div class="header-text-right">ผลการสอบ</div>
-                <div class="sub-text-right q-pb-xs">ผ่าน</div>
-                <div class="header-text-right">ลำดับที่สอบได้</div>
-                <div class="sub-text-right q-pb-xs">3</div>
-                <div class="header-text-right">จำนวนครั้งที่สมัครสอบ</div>
-                <div class="sub-text-right q-pb-xs">5</div>
+                <div class="header-text-right q-px-xs">ผลการสอบ</div>
+                <div class="sub-text-right q-px-xs q-pb-sm">ผ่าน</div>
+                <div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
+                <div class="sub-text-right q-px-xs q-pb-sm">3</div>
+                <div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
+                <div class="sub-text-right q-px-xs q-pb-sm">5</div>
             </q-card>
         </div>
     </div>
@@ -53,7 +53,7 @@
 }
 
 .header-text-right {
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 400;
     line-height: 150%;
     color: #818181;
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
index 5cb0afe07..bb299a3ee 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
@@ -348,56 +348,56 @@ const fetchData = async () => {
 };
 
 const editData = async () => {
-  const body: ResponseObject = {
-    registrationSame: addressData.value.same == "1",
-    registrationAddress: addressData.value.address,
-    registrationSubDistrictId: addressData.value.subdistrictId,
-    registrationDistrictId: addressData.value.districtId,
-    registrationProvinceId: addressData.value.provinceId,
-    registrationZipCode: codep.value,
-    currentAddress:
-      addressData.value.same == "1"
-        ? addressData.value.address
-        : addressData.value.addressC,
-    currentSubDistrictId:
-      addressData.value.same == "1"
-        ? addressData.value.subdistrictId
-        : addressData.value.subdistrictIdC,
-    currentDistrictId:
-      addressData.value.same == "1"
-        ? addressData.value.districtId
-        : addressData.value.districtIdC,
-    currentProvinceId:
-      addressData.value.same == "1"
-        ? addressData.value.provinceId
-        : addressData.value.provinceIdC,
-    currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
-    createdAt: new Date(),
-    createdFullName: "-",
-  };
-  showLoader();
-  await http
-    .put(config.API.profileAdrsId(route.params.id.toString()), body)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      edit.value = false;
-      emit("update:statusEdit", false);
-      await getNewData();
-    });
+  // const body: ResponseObject = {
+  //   registrationSame: addressData.value.same == "1",
+  //   registrationAddress: addressData.value.address,
+  //   registrationSubDistrictId: addressData.value.subdistrictId,
+  //   registrationDistrictId: addressData.value.districtId,
+  //   registrationProvinceId: addressData.value.provinceId,
+  //   registrationZipCode: codep.value,
+  //   currentAddress:
+  //     addressData.value.same == "1"
+  //       ? addressData.value.address
+  //       : addressData.value.addressC,
+  //   currentSubDistrictId:
+  //     addressData.value.same == "1"
+  //       ? addressData.value.subdistrictId
+  //       : addressData.value.subdistrictIdC,
+  //   currentDistrictId:
+  //     addressData.value.same == "1"
+  //       ? addressData.value.districtId
+  //       : addressData.value.districtIdC,
+  //   currentProvinceId:
+  //     addressData.value.same == "1"
+  //       ? addressData.value.provinceId
+  //       : addressData.value.provinceIdC,
+  //   currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
+  //   createdAt: new Date(),
+  //   createdFullName: "-",
+  // };
+  // showLoader();
+  // await http
+  //   .put(config.API.profileAdrsId(route.params.id.toString()), body)
+  //   .then((res) => {
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     edit.value = false;
+  //     emit("update:statusEdit", false);
+  //     await getNewData();
+  //   });
 };
 
 const saveData = async () => {
-  await myform.value.validate().then(async (success: boolean) => {
-    if (success) {
-      await editData();
-    } else {
-    }
-  });
+  // await myform.value.validate().then(async (success: boolean) => {
+  //   if (success) {
+  //     await editData();
+  //   } else {
+  //   }
+  // });
 };
 
 const selectProvince = async (e: string | null, name: string) => {
@@ -546,13 +546,13 @@ const getClass = (val: boolean) => {
 };
 </script>
 <template>
-  <q-card flat class="col-12 q-px-lg q-py-md q-mt-md no-border">
+  <q-card class="col-12 q-px-lg q-py-md q-mt-md no-border">
     <HeaderTop
       v-model:edit="edit"
       header="ข้อมูลที่อยู่"
       icon="mdi-map-marker"
       :save="saveData"
-      :history="true"
+      :history="false"
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="refreshData"
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
new file mode 100644
index 000000000..dc8850be0
--- /dev/null
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
@@ -0,0 +1,1099 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import type {
+  Family,
+  DataOption,
+} from "@/modules/05_placement/components/PersonalDetail/profileType";
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
+import type {
+  ResponseObject,
+  childrenFamily,
+  ResponseHistory,
+} from "@/modules/04_registry/interface/response/Family";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, messageError } = mixin;
+const edit = ref<boolean>(false);
+const fix = ref<boolean>(true);
+const myform = ref<QForm | null>(null);
+const modal = ref<boolean>(false);
+const indexRow = ref<number>(0);
+const previous = ref<boolean>(false);
+const next = ref<boolean>(false);
+//C Couple
+//M Male
+//F Female
+const familyData = ref<Family>({
+  prefixC: null,
+  prefixIdC: null,
+  firstnameC: null,
+  lastnameC: null,
+  lastnameCOld: null,
+  occupationC: null,
+  prefixM: null,
+  prefixIdM: null,
+  firstnameM: null,
+  lastnameM: null,
+  occupationM: null,
+  prefixF: null,
+  prefixIdF: null,
+  firstnameF: null,
+  lastnameF: null,
+  occupationF: null,
+  same: "0",
+  childrens: [],
+});
+const familyDataHistory = ref<ResponseHistory[]>([]);
+const Ops = ref<any>({
+  prefixOps: [],
+});
+const OpsFilter = ref<any>({
+  prefixOps: [],
+});
+
+onMounted(async () => {
+  await fetchPrefix();
+  await fetchData();
+  emit("update:statusEdit", false);
+});
+
+const historyData = async () => {
+  await fetchHistory();
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  update(() => {
+    Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+};
+
+const refreshData = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await fetchData();
+};
+
+const fetchPrefix = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.prefix)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      Ops.value.prefixOps = option;
+      OpsFilter.value.prefixOps = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const addChildren = async () => {
+  familyData.value.childrens.push({
+    id: `${familyData.value.childrens.length + 1}`,
+    childrenPrefixId: "",
+    childrenFirstName: "",
+    childrenLastName: "",
+    childrenCareer: "",
+  });
+
+  familyData.value.childrens.sort(
+    (a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
+  );
+};
+
+const deleteChildren = (items: childrenFamily) => {
+  const index = familyData.value.childrens.findIndex(
+    (r: childrenFamily) => r.id == items.id
+  );
+
+  familyData.value.childrens.splice(index, 1);
+};
+
+const fetchHistory = async () => {
+  familyDataHistory.value = [];
+  loaderPage(true);
+  await http
+    .get(config.API.profileFamiHisId(route.params.id.toString()))
+    .then((res) => {
+      const data: ResponseObject[] = res.data.result;
+      data.map((row: ResponseObject) => {
+        const arrayData: ResponseHistory = {
+          couple: row.couple ? "1" : "0",
+          couplePrefixId: row.couplePrefixId,
+          coupleFirstName: row.coupleFirstName,
+          coupleLastName: row.coupleLastName,
+          coupleLastNameOld: row.coupleLastNameOld,
+          coupleCareer: row.coupleCareer,
+          fatherPrefixId: row.fatherPrefixId,
+          fatherFirstName: row.fatherFirstName,
+          fatherLastName: row.fatherLastName,
+          fatherCareer: row.fatherCareer,
+          motherPrefixId: row.motherPrefixId,
+          motherFirstName: row.motherFirstName,
+          motherLastName: row.motherLastName,
+          motherCareer: row.motherCareer,
+          childrens: row.childrens,
+          createdFullName: row.createdFullName,
+          createdAt: new Date(row.createdAt),
+        };
+        familyDataHistory.value.push(arrayData);
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+      if (familyDataHistory.value.length == 0) {
+        // modalError(
+        //   $q,
+        //   "ประวัติแก้ไขข้อมูลครอบครัว",
+        //   "ไม่มีข้อมูลประวัติแก้ไขข้อมูลครอบครัว"
+        // );
+      } else {
+        modal.value = true;
+        indexRow.value = 0;
+        if (familyDataHistory.value.length > 1) {
+          next.value = true;
+          previous.value = false;
+        } else {
+          next.value = false;
+          previous.value = false;
+        }
+      }
+    });
+};
+
+const fetchData = async () => {
+
+  familyData.value.childrens = [];
+
+  // loaderPage(true);
+  // await http
+  //   .get(config.API.profileFamiId(route.params.id.toString()))
+  //   .then((res) => {
+      // const data: ResponseObject = res.data.result;
+      // familyData.value.prefixC = "";
+      // familyData.value.prefixIdC = data.couplePrefixId;
+      // familyData.value.firstnameC = data.coupleFirstName;
+      // familyData.value.lastnameC = data.coupleLastName;
+      // familyData.value.lastnameCOld = data.coupleLastNameOld;
+      // familyData.value.occupationC = data.coupleCareer;
+      // familyData.value.prefixM = "";
+      // familyData.value.prefixIdM = data.fatherPrefixId;
+
+      // familyData.value.firstnameM = data.fatherFirstName;
+      // familyData.value.lastnameM = data.fatherLastName;
+      // familyData.value.occupationM = data.fatherCareer;
+      // familyData.value.prefixF = "";
+      // familyData.value.prefixIdF = data.motherPrefixId;
+
+      // familyData.value.firstnameF = data.motherFirstName;
+      // familyData.value.lastnameF = data.motherLastName;
+      // familyData.value.occupationF = data.motherCareer;
+      // familyData.value.same = data.couple ? "1" : "0";
+
+      // if (data.childrens.length > 0) {
+      //   let dataChild: childrenFamily[] = [];
+      //   data.childrens.map((row: childrenFamily, index: number) => {
+      //     dataChild.push({
+      //       id: `${index + 1}`,
+      //       childrenPrefixId: row.childrenPrefixId,
+      //       childrenFirstName: row.childrenFirstName,
+      //       childrenLastName: row.childrenLastName,
+      //       childrenCareer: row.childrenCareer,
+      //     });
+      //   });
+      //   familyData.value.childrens = dataChild;
+      // } else {
+      //   familyData.value.childrens = [];
+      // }
+    // })
+    // .catch((e) => {
+    //   messageError($q, e);
+    // })
+    // .finally(async () => {
+    //   loaderPage(false);
+    // });
+};
+
+const editData = async () => {
+  // loaderPage(true);
+  // const body: ResponseObject = {
+  //   couple: familyData.value.same == "1",
+  //   couplePrefixId: familyData.value.prefixIdC,
+  //   coupleFirstName: familyData.value.firstnameC,
+  //   coupleLastName: familyData.value.lastnameC,
+  //   coupleLastNameOld: familyData.value.lastnameCOld,
+  //   coupleCareer: familyData.value.occupationC,
+  //   fatherPrefixId: familyData.value.prefixIdM,
+  //   fatherFirstName: familyData.value.firstnameM,
+  //   fatherLastName: familyData.value.lastnameM,
+  //   fatherCareer: familyData.value.occupationM,
+  //   motherPrefixId: familyData.value.prefixIdF,
+  //   motherFirstName: familyData.value.firstnameF,
+  //   motherLastName: familyData.value.lastnameF,
+  //   motherCareer: familyData.value.occupationF,
+  //   childrens: familyData.value.childrens,
+  //   createdFullName: "-",
+  //   createdAt: new Date(),
+  // };
+  // await http
+  //   .put(config.API.profileFamiId(route.params.id.toString()), body)
+  //   .then((res) => {
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     edit.value = false;
+  //     emit("update:statusEdit", false);
+  //     await fetchData();
+  //   });
+};
+
+const saveData = async () => {
+  // await myform.value?.validate().then(async (success: boolean) => {
+  //   if (success) {
+  //     await editData();
+  //   } else {
+  //   }
+  // });
+};
+
+const clickPreviousNext = (page: string) => {
+  const index: number =
+    page == "next" ? indexRow.value - 1 : indexRow.value + 1;
+  let length: number = familyDataHistory.value.length;
+  previous.value = index == 0 ? false : true;
+  next.value = index == length - 1 ? false : true;
+  indexRow.value = index;
+};
+
+const selectRadio = (e: boolean, i: any) => {
+  if (e) {
+    familyData.value.prefixIdC = "";
+    familyData.value.firstnameC = "";
+    familyData.value.lastnameC = "";
+    familyData.value.lastnameCOld = "";
+    familyData.value.occupationC = "";
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+      props.notiNoEdit();
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
+<template>
+  <q-card flat class="col-12 q-px-lg q-py-md q-mt-md text-dark">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลครอบครัว"
+      icon="mdi-account-group"
+      :save="saveData"
+      :history="false"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="historyData"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12 text-weight-bold">• บิดา</div>
+        <div class="col-xs-12 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="familyData.prefixIdM"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้า'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameM"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameM"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationM"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 text-weight-bold">• มารดา</div>
+        <div class="col-xs-12 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="familyData.prefixIdF"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้า'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameF"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameF"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationF"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• คู่สมรส</label>
+          <q-radio
+            v-model="familyData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="!edit"
+            @update:model-value="selectRadio"
+          />
+          <q-radio
+            v-model="familyData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            dense
+            :disable="!edit"
+            @update:model-value="selectRadio"
+          />
+        </div>
+
+        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="familyData.prefixIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้า'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameC"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameC"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameCOld"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
+            :label="`${'นามสกุล(เดิม)'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationC"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      </div>
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12 q-col-gutter-x-sm items-center flex">
+          <label class="text-weight-bold">• บุตร</label>
+          <div>
+            <q-btn
+              v-if="edit"
+              size="12px"
+              flat
+              round
+              :disable="!edit"
+              :color="!edit ? 'grey-7' : 'primary'"
+              @click="addChildren"
+              icon="mdi-plus"
+            >
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+
+        <div
+          class="row col-12 items-center q-col-gutter-xs"
+          v-for="items in familyData.childrens"
+          :key="items.id"
+        >
+          <q-btn
+            v-if="edit"
+            size="12px"
+            flat
+            round
+            :disable="!edit"
+            :color="!edit ? 'grey-7' : 'red'"
+            @click="deleteChildren(items)"
+            icon="mdi-delete-outline"
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
+          <div
+            :class="
+              edit
+                ? 'col-xs-10 col-sm-2 col-md-2'
+                : 'col-xs-12 col-sm-3 col-md-3'
+            "
+          >
+            <selector
+              :hide-dropdown-icon="!edit"
+              hide-bottom-space
+              :class="getClass(edit)"
+              :readonly="!edit"
+              :borderless="!edit"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+              :outlined="edit"
+              dense
+              lazy-rules
+              v-model="items.childrenPrefixId"
+              emit-value
+              map-options
+              option-label="name"
+              :options="Ops.prefixOps"
+              option-value="id"
+              :label="`${'คำนำหน้า'}`"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenFirstName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              :label="`${'ชื่อ'}`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenLastName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              :label="`${'นามสกุล'}`"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenCareer"
+              :label="`${'อาชีพ'}`"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <!-- <DialogHistory
+    v-model:modal="modal"
+    v-model:fix="fix"
+    title="ประวัติแก้ไขข้อมูลครอบครัว"
+  >
+    <template v-slot:body>
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12 text-weight-bold">
+          {{
+            `${
+              familyDataHistory.length > 0 &&
+              familyDataHistory[indexRow].createdAt != null
+                ? date2Thai(familyDataHistory[indexRow].createdAt, false, true)
+                : ""
+            }`
+          }}
+        </div>
+        <div class="col-xs-12 text-weight-bold">• บิดา</div>
+        <div class="col-xs-12 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="true"
+            hide-bottom-space
+            :class="getClass(false)"
+            :readonly="true"
+            :borderless="true"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :outlined="false"
+            dense
+            lazy-rules
+            v-model="familyDataHistory[indexRow].fatherPrefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้า'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherFirstName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherLastName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherCareer"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 text-weight-bold">• มารดา</div>
+        <div class="col-xs-12 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="true"
+            hide-bottom-space
+            :class="getClass(false)"
+            :readonly="true"
+            :borderless="true"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :outlined="false"
+            dense
+            lazy-rules
+            v-model="familyDataHistory[indexRow].motherPrefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้า'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherFirstName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherLastName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherCareer"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• คู่สมรส</label>
+          <q-radio
+            v-model="familyDataHistory[indexRow].couple"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="true"
+            @update:model-value="selectRadio"
+          />
+          <q-radio
+            v-model="familyDataHistory[indexRow].couple"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            dense
+            :disable="true"
+            @update:model-value="selectRadio"
+          />
+        </div>
+
+        <div
+          class="col-xs-12 col-sm-3 col-md-3"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <selector
+            :hide-dropdown-icon="true"
+            hide-bottom-space
+            :class="getClass(false)"
+            :readonly="true"
+            :borderless="true"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :outlined="false"
+            dense
+            lazy-rules
+            v-model="familyDataHistory[indexRow].couplePrefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้า'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleFirstName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleLastName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleLastNameOld"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
+            :label="`${'นามสกุล(เดิม)'}`"
+          />
+        </div>
+        <div
+          class="col-xs-12 col-sm-3 col-md-3"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleCareer"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      </div>
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• บุตร</label>
+        </div>
+
+        <div
+          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          v-for="items in familyDataHistory[indexRow].childrens"
+          :key="items.id"
+        >
+          <div class="col-xs-12 col-sm-3 col-md-3">
+            <selector
+              :hide-dropdown-icon="true"
+              hide-bottom-space
+              :class="getClass(false)"
+              :readonly="true"
+              :borderless="true"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+              :outlined="false"
+              dense
+              lazy-rules
+              v-model="items.childrenPrefixId"
+              emit-value
+              map-options
+              option-label="name"
+              :options="Ops.prefixOps"
+              option-value="id"
+              :label="`${'คำนำหน้า'}`"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenFirstName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              :label="`${'ชื่อ'}`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenLastName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              :label="`${'นามสกุล'}`"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenCareer"
+              :label="`${'อาชีพ'}`"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-slot:footer>
+      <q-btn
+        flat
+        round
+        icon="mdi-menu-left"
+        @click="clickPreviousNext('next')"
+        :disable="previous == false"
+        :color="!previous ? 'grey-7' : 'public'"
+      />
+      <q-btn
+        flat
+        round
+        icon="mdi-menu-right"
+        @click="clickPreviousNext('previous')"
+        :disable="next == false"
+        :color="!next ? 'grey-7' : 'public'"
+      />
+      <q-space />
+      <div class="text-black text-subtitle2 text-bold">
+        {{ indexRow + 1 }}/{{ familyDataHistory.length }}
+      </div>
+    </template>
+  </DialogHistory> -->
+</template>
+
+<style lang="scss" scoped>
+.q-card {
+    box-shadow: 0px 0px 0px 0px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
index 006f3d5c6..22ca82dca 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
@@ -293,10 +293,10 @@ onMounted(async () => {
 });
 
 const onCancel = async () => {
-  if (myform.value != null) {
-    myform.value.reset();
-  }
-  await fetchData();
+  // if (myform.value != null) {
+  //   myform.value.reset();
+  // }
+  // await fetchData();
 };
 
 /**
@@ -538,45 +538,45 @@ const fetchData = async () => {
 };
 
 const editData = async () => {
-  if (age.value == false) {
-    modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
-    return;
-  }
-  const body: any = {
-    citizenId: informaData.value.cardid,
-    prefixId: informaData.value.prefixId,
-    firstName: informaData.value.firstname,
-    lastName: informaData.value.lastname,
-    genderId: informaData.value.genderId,
-    nationality: informaData.value.nationality,
-    race: informaData.value.ethnicity,
-    religionId: informaData.value.religionId,
-    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
-    bloodGroupId: informaData.value.bloodId,
-    relationshipId: informaData.value.statusId,
-    telephoneNumber: informaData.value.tel,
-    createdAt: new Date(),
-    age: null,
-    employeeType: informaData.value.employeeType,
-    employeeClass: informaData.value.employeeClass,
-    profileType: informaData.value.profileType,
-    createdFullName: "-",
-  };
-  showLoader();
-  await http
-    .put(config.API.profileInforId(route.params.id.toString()), body)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      edit.value = false;
-      emit("update:statusEdit", false);
-      await fetchData();
-      await changeBirth(informaData.value.birthDate ?? new Date());
-    });
+  // if (age.value == false) {
+  //   modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
+  //   return;
+  // }
+  // const body: any = {
+  //   citizenId: informaData.value.cardid,
+  //   prefixId: informaData.value.prefixId,
+  //   firstName: informaData.value.firstname,
+  //   lastName: informaData.value.lastname,
+  //   genderId: informaData.value.genderId,
+  //   nationality: informaData.value.nationality,
+  //   race: informaData.value.ethnicity,
+  //   religionId: informaData.value.religionId,
+  //   birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+  //   bloodGroupId: informaData.value.bloodId,
+  //   relationshipId: informaData.value.statusId,
+  //   telephoneNumber: informaData.value.tel,
+  //   createdAt: new Date(),
+  //   age: null,
+  //   employeeType: informaData.value.employeeType,
+  //   employeeClass: informaData.value.employeeClass,
+  //   profileType: informaData.value.profileType,
+  //   createdFullName: "-",
+  // };
+  // showLoader();
+  // await http
+  //   .put(config.API.profileInforId(route.params.id.toString()), body)
+  //   .then((res) => {
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     edit.value = false;
+  //     emit("update:statusEdit", false);
+  //     await fetchData();
+  //     await changeBirth(informaData.value.birthDate ?? new Date());
+  //   });
 };
 
 const saveData = async () => {
@@ -617,7 +617,7 @@ const getClass = (val: boolean) => {
       header="ข้อมูลส่วนตัว"
       icon="mdi-account"
       :save="saveData"
-      :history="true"
+      :history="false"
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="onCancel"
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/layout.vue b/src/modules/05_placement/components/PersonalDetail/Information/layout.vue
index 209e85234..380c339d4 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/layout.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/layout.vue
@@ -46,18 +46,21 @@ const closeModalError = () => {
 
 </script>
 <template>
-  <div>
-    <Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
-  </div>
-  <div class="horizontal-line"></div>
-  <div>
-    <Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
+  <div class="row col-12 items-center">
+    <div>
+      <Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
+    </div>
+
+    <div class="col-12 q-px-md"><q-separator size="4px"/></div>
+
+    <div>
+      <Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
 .horizontal-line {
   background-color: #F4F4F4;
-  width: 100%;
   height: 5px;
 }
 </style>
diff --git a/src/modules/05_placement/components/PersonalDetail/Insignia.vue b/src/modules/05_placement/components/PersonalDetail/Insignia.vue
deleted file mode 100644
index 93848dd1f..000000000
--- a/src/modules/05_placement/components/PersonalDetail/Insignia.vue
+++ /dev/null
@@ -1,1199 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
-import { useRoute } from "vue-router";
-import { useProfileDataStore } from "@/modules/05_placement/store";
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
-import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Table.vue";
-import DialogHeader from "@/modules/05_placement/components/PersonalDetail/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
-import { useQuasar } from "quasar";
-import type {
-  RequestItemsObject,
-  Columns,
-  DataProps,
-} from "@/modules/05_placement/interface/request/Insignia";
-import type { ResponseObject } from "@/modules/05_placement/interface/response/Insignia";
-import type {
-  DataOption,
-  DataOptionInsignia,
-  InsigniaOps,
-} from "@/modules/05_placement/interface/index/Main";
-import HistoryTable from "@/components/TableHistory.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QTableProps } from "quasar";
-
-const props = defineProps({
-  statusEdit: {
-    type: Boolean,
-    required: true,
-  },
-});
-
-const $q = useQuasar();
-const store = useProfileDataStore();
-const { profileData, changeProfileColumns } = store;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
-const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
-const route = useRoute();
-const id = ref<string>("");
-const insigniaId = ref<string>("");
-const Ops = ref<InsigniaOps>({
-  insigniaOptions: [],
-});
-const OpsFilter = ref<InsigniaOps>({
-  insigniaOptions: [],
-});
-const insigniaType = ref<string>();
-const year = ref<number>(0);
-const no = ref<string>();
-const issue = ref<string>();
-const volumeNo = ref<string>();
-const volume = ref<string>();
-const section = ref<string>();
-const page = ref<string>();
-const receiveDate = ref<Date>(new Date());
-const dateAnnounce = ref<Date>(new Date());
-const myForm = ref<any>(); //form data input
-const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
-const modal = ref<boolean>(false); //modal add detail
-const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
-const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
-const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
-const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
-const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
-const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
-const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
-const tittleHistory = ref<string>("ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"); //
-const filterHistory = ref<string>(""); //search data table history
-const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-// const profileId = ref<string>(route.params.id.toString());
-const profileId = ref<string>('');
-const rows = ref<RequestItemsObject[]>([]);
-const filter = ref<string>(""); //search data table
-const visibleColumns = ref<String[]>([]);
-profileData.insignia.columns.length == 0
-  ? (visibleColumns.value = [
-      "insignia",
-      "insigniaType",
-      "year",
-      "no",
-      "issue",
-      "volumeNo",
-      "volume",
-      "section",
-      "page",
-      "receiveDate",
-      "dateAnnounce",
-    ])
-  : (visibleColumns.value = profileData.insignia.columns);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "year",
-    align: "left",
-    label: "ปีที่ยื่นขอ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "receiveDate",
-    align: "left",
-    label: "ลงวันที่",
-    sortable: true,
-    field: "receiveDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "insignia",
-    align: "left",
-    label: "ชื่อเครื่องราชฯ",
-    sortable: true,
-    field: "insignia",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "insigniaType",
-    align: "left",
-    label: "ประเภท",
-    sortable: true,
-    field: "insigniaType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับที่",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "issue",
-    align: "left",
-    label: "ราชกิจจาฯ ฉบับที่",
-    sortable: true,
-    field: "issue",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "volumeNo",
-    align: "left",
-    label: "เล่มที่",
-    sortable: true,
-    field: "volumeNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "volume",
-    align: "left",
-    label: "เล่ม",
-    sortable: true,
-    field: "volume",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "section",
-    align: "left",
-    label: "ตอน",
-    sortable: true,
-    field: "section",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "page",
-    align: "left",
-    label: "หน้า",
-    sortable: true,
-    field: "page",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateAnnounce",
-    align: "left",
-    label: "วันที่ประกาศในราชกิจจาฯ",
-    sortable: true,
-    field: "dateAnnounce",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "year",
-    align: "left",
-    label: "ปีที่ยื่นขอ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "receiveDate",
-    align: "left",
-    label: "ลงวันที่",
-    sortable: true,
-    field: "receiveDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "insignia",
-    align: "left",
-    label: "ชื่อเครื่องราชฯ",
-    sortable: true,
-    field: "insignia",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "insigniaType",
-    align: "left",
-    label: "ประเภท",
-    sortable: true,
-    field: "insigniaType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับที่",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "issue",
-    align: "left",
-    label: "ราชกิจจาฯ ฉบับที่",
-    sortable: true,
-    field: "issue",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "volumeNo",
-    align: "left",
-    label: "เล่มที่",
-    sortable: true,
-    field: "volumeNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "volume",
-    align: "left",
-    label: "เล่ม",
-    sortable: true,
-    field: "volume",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "section",
-    align: "left",
-    label: "ตอน",
-    sortable: true,
-    field: "section",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "page",
-    align: "left",
-    label: "หน้า",
-    sortable: true,
-    field: "page",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateAnnounce",
-    align: "left",
-    label: "วันที่ประกาศในราชกิจจาฯ",
-    sortable: true,
-    field: "dateAnnounce",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumnsHistory = ref<String[]>([
-  "insignia",
-  "insigniaType",
-  "year",
-  "no",
-  "issue",
-  "volumeNo",
-  "volume",
-  "section",
-  "page",
-  "receiveDate",
-  "dateAnnounce",
-  "createdFullName",
-  "createdAt",
-]);
-
-watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeProfileColumns("insignia", count);
-});
-
-watch(insigniaId, (count: string, prevCount: string) => {
-  const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
-    (r: DataOptionInsignia) => r.id == insigniaId.value
-  );
-  if (insigniaTypeFilter[0] != null) {
-    insigniaType.value = insigniaTypeFilter[0].typeName;
-  }
-});
-
-onMounted(async () => {
-  // await fetchInsignia();
-  // await fetchData();
-});
-
-const filterSelector = (val: any, update: Function, refData: string) => {
-  switch (refData) {
-    case "insigniaOptions":
-      update(() => {
-        Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    default:
-      break;
-  }
-};
-
-const fetchInsignia = async () => {
-  showLoader();
-  await http
-    .get(config.API.insignia)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOptionInsignia[] = [];
-      data.map((r: any) => {
-        option.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-          typeName:
-            r.insigniaType == null ? null : r.insigniaType.name.toString(),
-        });
-      });
-      Ops.value.insigniaOptions = option;
-      OpsFilter.value.insigniaOptions = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.profileInsignId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          insignia: e.insignia,
-          insigniaId: e.insigniaId,
-          insigniaType: e.insigniaType,
-          year: e.year,
-          no: e.no,
-          issue: e.issue,
-          volumeNo: e.volumeNo,
-          volume: e.volume,
-          section: e.section,
-          page: e.page,
-          receiveDate: new Date(e.receiveDate),
-          dateAnnounce: new Date(e.dateAnnounce),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * กดดูข้อมูลก่อนหน้า
- */
-const clickPrevious = async () => {
-  edit.value = false;
-  rowIndex.value -= 1;
-  await getData();
-  await checkRowPage();
-};
-
-/**
- * กดดูข้อมูลต่อไป
- */
-const clickNext = async () => {
-  edit.value = false;
-  rowIndex.value += 1;
-  await getData();
-  await checkRowPage();
-};
-
-/**
- * กดดูข้อมูลต่อไป
- */
-const getData = () => {
-  const row = rows.value[rowIndex.value];
-  insigniaId.value = row.insigniaId;
-  insigniaType.value = row.insigniaType;
-  year.value = row.year;
-  no.value = row.no;
-  issue.value = row.issue;
-  volumeNo.value = row.volumeNo;
-  volume.value = row.volume;
-  section.value = row.section;
-  page.value = row.page;
-  receiveDate.value = row.receiveDate;
-  dateAnnounce.value = row.dateAnnounce;
-  id.value = row.id;
-};
-
-/**
- * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
- */
-const checkRowPage = () => {
-  editRow.value = false;
-  next.value = true;
-  previous.value = true;
-  if (rowIndex.value + 1 >= rows.value.length) {
-    next.value = false;
-  }
-  if (rowIndex.value - 1 < 0) {
-    previous.value = false;
-  }
-};
-
-/**
- * กดปุ่มแก้ไขใน dialog
- */
-const clickEdit = () => {
-  editRow.value = false;
-  next.value = false;
-  previous.value = false;
-};
-
-/**
- * กดปุ่มเพิ่มด้านบน table
- */
-const clickAdd = async () => {
-  editRow.value = false;
-  await addData();
-};
-
-/**
- * กดบันทึกใน dialog
- */
-const clickSave = async () => {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      if (modalEdit.value) {
-        await editData();
-      } else {
-        await saveData();
-      }
-    }
-  });
-};
-
-/**
- * บันทึกเพิ่มข้อมูล
- */
-const saveData = async () => {
-  showLoader();
-  await http
-    .post(config.API.profileInsignId(profileId.value), {
-      id: id.value,
-      insigniaId: insigniaId.value,
-      insigniaType: insigniaType.value,
-      year: year.value,
-      no: no.value,
-      issue: issue.value,
-      volumeNo: volumeNo.value,
-      volume: volume.value,
-      section: section.value,
-      page: page.value,
-      receiveDate: dateToISO(receiveDate.value),
-      dateAnnounce: dateToISO(dateAnnounce.value),
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-/**
- * บันทึกแก้ไขข้อมูล
- */
-const editData = async () => {
-  showLoader();
-  await http
-    .put(config.API.profileInsignId(id.value), {
-      id: id.value,
-      insigniaId: insigniaId.value,
-      insigniaType: insigniaType.value,
-      year: year.value,
-      no: no.value,
-      issue: issue.value,
-      volumeNo: volumeNo.value,
-      volume: volume.value,
-      section: section.value,
-      page: page.value,
-      receiveDate: dateToISO(receiveDate.value),
-      dateAnnounce: dateToISO(dateAnnounce.value),
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
-};
-
-/**
- * ลบลบข้อมูล
- */
-const clickDelete = async () => {
-  $q.dialog({
-    title: `ลบข้อมูล`,
-    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
-    cancel: "ยกเลิก",
-    ok: "ยืนยัน",
-    persistent: true,
-  })
-    .onOk(async () => {
-      showLoader();
-      await http
-        .delete(config.API.profileInsignId(id.value))
-        .then((res) => {
-          success($q, "ลบข้อมูลสำเร็จ");
-          modal.value = false;
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-        });
-    })
-    .onCancel(async () => {
-      await fetchData();
-    });
-};
-
-/**
- * กดปิด dialog
- */
-const clickClose = async () => {
-  if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(async () => {
-      modal.value = false;
-      next.value = false;
-      previous.value = false;
-    });
-  } else {
-    modal.value = false;
-    next.value = false;
-    previous.value = false;
-  }
-};
-
-/**
- * กดเลือกข้อมูลที่จะแก้ไข
- * @param props ค่า props ใน row ที่เลือก
- */
-const selectData = async (props: DataProps) => {
-  modalEdit.value = true;
-  modal.value = true;
-  edit.value = false;
-  rawItem.value = props.row;
-  rowIndex.value = props.rowIndex;
-  insigniaId.value = props.row.insigniaId;
-  insigniaType.value = props.row.insigniaType;
-  year.value = props.row.year;
-  no.value = props.row.no;
-  issue.value = props.row.issue;
-  volumeNo.value = props.row.volumeNo;
-  volume.value = props.row.volume;
-  section.value = props.row.section;
-  page.value = props.row.page;
-  receiveDate.value = props.row.receiveDate;
-  dateAnnounce.value = props.row.dateAnnounce;
-  id.value = props.row.id;
-  await checkRowPage();
-};
-
-/**
- * กดปุ่มเพิ่มบน table
- */
-const addData = () => {
-  modalEdit.value = false;
-  modal.value = true;
-  edit.value = true;
-  insigniaId.value = "";
-  insigniaType.value = "";
-  year.value = new Date().getFullYear();
-  no.value = "";
-  issue.value = "";
-  volumeNo.value = "";
-  volume.value = "";
-  section.value = "";
-  page.value = "";
-  receiveDate.value = new Date();
-  dateAnnounce.value = new Date();
-};
-
-/**
- * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
- */
-const clickCancel = async () => {
-  if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(async () => {
-      edit.value = false;
-      await checkRowPage();
-      await getData();
-    });
-  } else {
-    edit.value = false;
-    await checkRowPage();
-  }
-};
-
-/**
- * เช็คว่ามีการแก้ไขข้อมูล
- */
-const clickEditRow = () => {
-  editRow.value = true;
-};
-
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
- */
-const clickHistory = async (row: RequestItemsObject) => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileInsignHisId(row.id))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: ResponseObject) => {
-        rowsHistory.value.push({
-          id: e.id,
-          insignia: e.insignia,
-          insigniaId: e.insigniaId,
-          insigniaType: e.insigniaType,
-          year: e.year,
-          no: e.no,
-          issue: e.issue,
-          volumeNo: e.volumeNo,
-          volume: e.volume,
-          section: e.section,
-          page: e.page,
-          receiveDate: new Date(e.receiveDate),
-          dateAnnounce: new Date(e.dateAnnounce),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * validate input ใน dialog
- */
-const validateData = async () => {
-  checkValidate.value = true;
-  await myForm.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
-    }
-  });
-};
-
-/**
- * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
- * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
- */
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
-<template>
-  <q-card class="col-12 q-px-lg q-py-md no-border">
-    <q-form ref="myForm">
-      <ProfileTable
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="เครื่องราชอิสริยาภรณ์"
-        icon="mdi-medal"
-        :statusEdit="statusEdit"
-      >
-        <template #columns="props">
-          <q-tr :props="props">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
-              <div
-                v-if="col.name == 'receiveDate' || col.name == 'dateAnnounce'"
-                class="table_ellipsis"
-              >
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else-if="col.name == 'year'" class="table_ellipsis">
-                {{ col.value + 543 }}
-              </div>
-              <div v-else class="table_ellipsis">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
-            </q-td>
-          </q-tr>
-        </template>
-      </ProfileTable>
-    </q-form>
-  </q-card>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader tittle="เครื่องราชอิสริยาภรณ์" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="year"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="year + 543"
-                    :rules="[
-                      (val:string) =>
-                        !!val ||
-                        `${'กรุณาเลือกปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`,
-                    ]"
-                    hide-bottom-space
-                    :label="`${'ปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="receiveDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(receiveDate)"
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่ได้รับ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="insigniaId"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
-                hide-bottom-space
-                :label="`${'ชื่อเครื่องราชฯ'}`"
-                @update:modelValue="clickEditRow"
-                emit-value
-                map-options
-                option-label="name"
-                :options="Ops.insigniaOptions"
-                option-value="id"
-                use-input
-                input-debounce="0"
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
-                      ) "
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(false)"
-                :outlined="false"
-                dense
-                lazy-rules
-                :readonly="true"
-                :borderless="true"
-                v-model="insigniaType"
-                :label="`${'ประเภท'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="no"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
-                :label="`${'ลำดับที่'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="issue"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
-                :label="`${'ราชกิจจาฯ ฉบับที่'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="volumeNo"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
-                :label="`${'เล่มที่'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="volume"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
-                :label="`${'เล่ม'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="section"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
-                :label="`${'ตอน'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="page"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
-                :label="`${'หน้า'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateAnnounce"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(dateAnnounce)"
-                    :rules="[
-                      (val:string) =>
-                        !!val || `${'กรุณาเลือกวันที่ประกาศในราชกิจจาฯ'}`,
-                    ]"
-                    hide-bottom-space
-                    :label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :cancel="clickCancel"
-          :edit="clickEdit"
-          :save="clickSave"
-          :validate="validateData"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'receiveDate' ||
-              col.name == 'dateAnnounce' ||
-              col.name == 'createdAt'
-            "
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else-if="col.name == 'year'" class="table_ellipsis">
-            {{ col.value + 543 }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
-<style lang="scss">
-.modalfix {
-  position: fixed !important;
-}
-</style>
diff --git a/src/modules/05_placement/components/PersonalDetail/Qualification.vue b/src/modules/05_placement/components/PersonalDetail/Qualification.vue
index f9a1085a1..ec852b434 100644
--- a/src/modules/05_placement/components/PersonalDetail/Qualification.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Qualification.vue
@@ -50,56 +50,42 @@ const changeBtn = async () => {
 };
 
 const editData = async () => {
-    modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
-  }
+  modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
+}
 
-  const onCancel = async () => {
+const onCancel = async () => {
   if (myform.value != null) {
     myform.value.reset();
   }
-//   await fetchData();
+  //   await fetchData();
 };
 
 
 const selection = ref([]);
 const checkboxItems: CheckboxItem[] = [
-    { id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
-    { id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
-    { id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-    { id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
-    { id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
-    { id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
-    { id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
-    { id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
-    { id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-    { id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
-    { id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
+  { id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
+  { id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
+  { id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
+  { id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
+  { id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
+  { id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
+  { id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
+  { id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
+  { id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
+  { id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
+  { id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
 ]
 </script>
 <template>
-    <div class="row">
-        <HeaderTop
-            v-model:edit="edit"
-            header="การคัดกรองคุณสมบัติ"
-            icon="mdi-briefcase-edit"
-            :save="saveData"
-            :history="false"
-            :changeBtn="changeBtn"
-            :disable="statusEdit"
-            :cancel="onCancel"
-            />
+  <div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
+    <HeaderTop v-model:edit="edit" header="การคัดกรองคุณสมบัติ" icon="mdi-account-search" :save="saveData"
+      :history="false" :changeBtn="changeBtn" :disable="statusEdit" :cancel="onCancel" />
+  </div>
+  <div class="row col-12 q-px-lg">
+    <div v-for="item of checkboxItems" :key="item.id" class="q-pt-sm">
+      <q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="gray-5"
+        :disable="!statusEdit" />
+      <q-separator />
     </div>
-    <div class="contanier-checkbox">
-        <div v-for="item of checkboxItems" :key="item.id" class="q-pt-md">
-            <q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="teal"
-                :disable="false" />
-            <q-separator />
-        </div>
-    </div>
-</template>
-<style lang="scss" scoped>
-.contanier-checkbox {
-    padding-left: 20px;
-    padding-top: 10px;
-}
-</style>
\ No newline at end of file
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index b32119f50..22a1e2206 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -28,27 +28,27 @@ export default [
     component: PlacementMain,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [6.1],
       Role: "placement",
     },
   },
   {
     path: "/placement/detail",
-    name: "placement-detail",
+    name: "placementDetail",
     component: PlacementDetail,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [6.1],
       Role: "placement",
     },
   },
   {
     path: "/placement/detail/:personalId",
-    name: "placement-personal-detail",
+    name: "PlacementPersonalDetail",
     component: PlacementPersonalDetail,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [6.1],
       Role: "placement",
     },
   },
@@ -58,7 +58,7 @@ export default [
     component: MainOrderPlacement,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [6.2],
       Role: "placement",
     },
   },
@@ -68,7 +68,7 @@ export default [
     component: detailOrderReplace,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [6.2],
       Role: "placement",
     },
   },
@@ -78,7 +78,7 @@ export default [
     component: addOrderPlacement,
     meta: {
       Auth: true,
-      Key: [8],
+      Key: [6.2],
       Role: "placement",
     },
   },
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 4dc33cbde..048ca3047 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -13,7 +13,7 @@ import type {
 import {
   menuList,
   tabList,
-  tabList_placement,
+  tabListPlacement,
 } from "../interface/request/main/main";
 
 const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll;
@@ -71,10 +71,6 @@ const tabScroll = () => {
   return route.name == "registryDetail";
 };
 
-const tabScroll2 = () => {
-  return route.name == "placement2Detail";
-};
-
 /**
  * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
  */
@@ -101,7 +97,7 @@ const toggleBtnLeft = () => {
 const onScroll = (scroll: ScrollType) => {
   const { position } = scroll;
   updateScroll(position);
-  updateScroll2(position);
+  updateScrollPlacement(position);
 };
 
 /**
@@ -161,60 +157,6 @@ const activeBtn = () => {
   return route.name == "registryDetail" && rightActive.value;
 };
 
-const updateScroll2 = (position: number) => {
-  // เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
-  if (position === void 0) {
-    position = document.documentElement.scrollTop || document.body.scrollTop;
-  }
-
-  let last;
-  /**
-   * วนหา id ของ div นั้น
-   */
-  for (const i in tabList_placement) {
-    const section = tabList_placement[i];
-    const item = document.getElementById(section.tag);
-    /**
-     * วนหา id ของ div หน้านั้น
-     * เมื่อหาไม่เจอให้ไปต่อตัวต่อไป
-     * เมื่อเจอแล้ว ให้ ตำแหน่งบนสุดของ div นั้น มากกว่าหรือเท่ากับ  ตำแหน่ง top ที่ scroll บวกกับ แทปด้านบน 155
-     * ถ้า last เป็น undifind ให้ last เท่ากับ tag แล้ว หยุดลูป
-     * ถ้าไม่ใช้ undifind ให้ last เท่ากับ tag แล้ว ลูปหาต่อ กรณี div นั้นยาว
-     */
-    if (item === null) {
-      continue;
-    }
-
-    if (item.offsetTop >= position + 155) {
-      if (last === void 0) {
-        last = section.tag;
-      }
-      break;
-    } else {
-      last = section.tag;
-    }
-  }
-  /**
-   * ถ้า last ไม่เท่ากับ undifind
-   * ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
-   * และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
-   */
-  if (last !== void 0) {
-    changeTab(last);
-    const tocEl = document.getElementById("tab--" + last);
-    if (tocEl) {
-      tocEl.scrollIntoView({ block: "nearest" });
-    }
-  }
-};
-
-/**
- * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดหน่อยงานอื่นๆ และ rightActive เท่ากับ true
- */
-const activeBtn2 = () => {
-  return route.name == "placement2Detail" && rightActive.value;
-};
-
 /**
  * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
  * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
@@ -298,8 +240,7 @@ const tagClick = (tag: string) => {
   //   router.replace({ hash });
   if (route.hash !== hash) {
     const check = activeBtn();
-    const check2 = activeBtn2();
-    if (check || check2) {
+    if (check) {
       //   router.replace({ hash, position: { x: 0, y: 0 } });
       //   router.replace({ hash }).then(() => {
       //     setVerticalScrollPosition(window, offset, 300);
@@ -314,6 +255,71 @@ const tagClick = (tag: string) => {
   }
 };
 
+//**** Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
+const tabScrollPlacement = () => {
+  return route.name == "PlacementPersonalDetail";
+};
+
+const updateScrollPlacement = (position: number) => {
+  if (position === void 0) {
+    position = document.documentElement.scrollTop || document.body.scrollTop;
+  }
+
+  let last;
+  for (const i in tabListPlacement) {
+    const section = tabListPlacement[i];
+    const item = document.getElementById(section.tag);
+
+    if (item === null) {
+      continue;
+    }
+
+    if (item.offsetTop >= position + 100) {
+      if (last === void 0) {
+        last = section.tag;
+      }
+      break;
+    } else {
+      last = section.tag;
+    }
+  }
+
+  if (last !== void 0) {
+    changeTab(last);
+    const tocEl = document.getElementById("tab--" + last);
+    if (tocEl) {
+      tocEl.scrollIntoView({ block: "nearest" });
+    }
+  }
+};
+
+const activeBtnPlacement = () => {
+  return route.name == "PlacementPersonalDetail" && rightActive.value;
+};
+
+const activeTabPlacement = (tag: string) => {
+  return tabData.value == tag;
+};
+
+const tagClickPlacement = (tag: string) => {
+  const hash = `#${tag}`;
+  const items = document.getElementById(tag);
+  const offset = Math.max(0, items == null ? 0 : items.offsetTop + 50);
+  //   router.replace({ hash });
+  if (route.hash !== hash) {
+    const checkPlacement = activeBtnPlacement();
+    if (checkPlacement) {
+      drawerR.value = !drawerR.value;
+      setVerticalScrollPosition(window, offset, 300);
+    } else {
+      setVerticalScrollPosition(window, offset, 300);
+    }
+  } else {
+    setVerticalScrollPosition(window, offset, 300);
+  }
+};
+//**** End Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
+
 /**
  * logout keycloak
  * confirm ก่อนออกจากระบบ
@@ -500,7 +506,7 @@ if (keycloak.tokenParsed != null) {
         <q-btn
           size="13px"
           class="bg-blue-1"
-          v-if="activeBtn() || activeBtn2()"
+          v-if="activeBtn() || activeBtnPlacement()"
           flat
           dense
           round
@@ -848,7 +854,7 @@ if (keycloak.tokenParsed != null) {
       side="right"
       class="bg-grey-2"
       show-if-above
-      v-if="tabScroll2()"
+      v-if="tabScrollPlacement()"
       v-model="drawerR"
       :width="220"
       :breakpoint="1023"
@@ -856,17 +862,17 @@ if (keycloak.tokenParsed != null) {
       <q-scroll-area class="fit">
         <q-list padding>
           <q-item
-            v-for="(tabItem, index) in tabList_placement"
+            v-for="(tabItem, index) in tabListPlacement"
             :key="index"
             :id="'tab--' + tabItem.tag"
             class="tabNative"
             active-class="text-blue-7 active-item text-weight-medium tabActive"
-            :active="activeTab(tabItem.tag)"
+            :active="activeTabPlacement(tabItem.tag)"
             clickable
             v-ripple
             dense
             exact
-            @click="tagClick(tabItem.tag)"
+            @click="tagClickPlacement(tabItem.tag)"
           >
             <q-item-section>
               <q-item-label