From 1295a7f7fb829e23387532e7969e1b83f2c3f7c9 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 28 Jun 2023 11:15:22 +0700
Subject: [PATCH 1/2] =?UTF-8?q?re-structure=20folder=20&=20route=20?=
 =?UTF-8?q?=E0=B9=83=E0=B8=99=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/{exams_sorkorcho => }/Main.vue |   0
 .../Detail.vue                                |  19 +-
 .../DialogFooter.vue                          |   0
 .../DialogHeader.vue                          |   0
 .../Education.vue                             |   6 +-
 .../ExamResult.vue                            |   0
 .../Information/Address.vue                   |   6 +-
 .../Information/Certicate.vue                 |   6 +-
 .../Information/Information.vue               |   6 +-
 .../Information/layout.vue                    |   4 +-
 .../Information/top.vue                       |   0
 .../Insignia.vue                              |   6 +-
 .../Qualification.vue                         |   2 +-
 .../{exams_other => PersonalDetail}/Table.vue |   2 +-
 .../profileType.ts                            |   0
 .../components/exams_other/Main.vue           | 421 ------------------
 .../05_placement/interface/index/Main.ts      |  21 +-
 src/modules/05_placement/router.ts            |  64 ++-
 18 files changed, 66 insertions(+), 497 deletions(-)
 rename src/modules/05_placement/components/{exams_sorkorcho => }/Main.vue (100%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/Detail.vue (77%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/DialogFooter.vue (100%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/DialogHeader.vue (100%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/Education.vue (99%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/ExamResult.vue (100%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/Information/Address.vue (99%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/Information/Certicate.vue (98%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/Information/Information.vue (99%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/Information/layout.vue (88%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/Information/top.vue (100%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/Insignia.vue (99%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/Qualification.vue (98%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/Table.vue (97%)
 rename src/modules/05_placement/components/{exams_other => PersonalDetail}/profileType.ts (100%)
 delete mode 100644 src/modules/05_placement/components/exams_other/Main.vue

diff --git a/src/modules/05_placement/components/exams_sorkorcho/Main.vue b/src/modules/05_placement/components/Main.vue
similarity index 100%
rename from src/modules/05_placement/components/exams_sorkorcho/Main.vue
rename to src/modules/05_placement/components/Main.vue
diff --git a/src/modules/05_placement/components/exams_other/Detail.vue b/src/modules/05_placement/components/PersonalDetail/Detail.vue
similarity index 77%
rename from src/modules/05_placement/components/exams_other/Detail.vue
rename to src/modules/05_placement/components/PersonalDetail/Detail.vue
index 09565a34e..58dcf7f11 100644
--- a/src/modules/05_placement/components/exams_other/Detail.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Detail.vue
@@ -2,22 +2,25 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import { useDataStore } from "@/stores/data";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 const router = useRouter();
-import Informationvue from "@/modules/05_placement/components/exams_other/Information/layout.vue";
-import EducationVue from "@/modules/05_placement/components/exams_other/Education.vue";
-import Certicate from "@/modules/05_placement/components/exams_other/Information/Certicate.vue";
-import InsigniaVue from "@/modules/05_placement/components/exams_other/Insignia.vue";
-import ExamResult from "@/modules/05_placement/components/exams_other/ExamResult.vue";
-import Qualification from "@/modules/05_placement/components/exams_other/Qualification.vue";
+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";
 
 const store = useDataStore();
 const { changeTab } = store;
 const statusEdit = ref<boolean>(false);
 const profileType = ref<string>("");
 
+const route = useRoute();
+const examId = ref<string>(route.params.personalId.toString());
+
 const FormData = reactive<any>({
-    fullName: "นาย กอ กอกอก",
+    fullName: examId,
 });
 
 onMounted(async () => {
diff --git a/src/modules/05_placement/components/exams_other/DialogFooter.vue b/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
similarity index 100%
rename from src/modules/05_placement/components/exams_other/DialogFooter.vue
rename to src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
diff --git a/src/modules/05_placement/components/exams_other/DialogHeader.vue b/src/modules/05_placement/components/PersonalDetail/DialogHeader.vue
similarity index 100%
rename from src/modules/05_placement/components/exams_other/DialogHeader.vue
rename to src/modules/05_placement/components/PersonalDetail/DialogHeader.vue
diff --git a/src/modules/05_placement/components/exams_other/Education.vue b/src/modules/05_placement/components/PersonalDetail/Education.vue
similarity index 99%
rename from src/modules/05_placement/components/exams_other/Education.vue
rename to src/modules/05_placement/components/PersonalDetail/Education.vue
index 0079e0854..37c25205a 100644
--- a/src/modules/05_placement/components/exams_other/Education.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Education.vue
@@ -4,9 +4,9 @@ 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/exams_other/Table.vue";
-import DialogHeader from "@/modules/05_placement/components/exams_other/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/exams_other/DialogFooter.vue";
+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,
diff --git a/src/modules/05_placement/components/exams_other/ExamResult.vue b/src/modules/05_placement/components/PersonalDetail/ExamResult.vue
similarity index 100%
rename from src/modules/05_placement/components/exams_other/ExamResult.vue
rename to src/modules/05_placement/components/PersonalDetail/ExamResult.vue
diff --git a/src/modules/05_placement/components/exams_other/Information/Address.vue b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
similarity index 99%
rename from src/modules/05_placement/components/exams_other/Information/Address.vue
rename to src/modules/05_placement/components/PersonalDetail/Information/Address.vue
index 309eb465b..5cb0afe07 100644
--- a/src/modules/05_placement/components/exams_other/Information/Address.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
@@ -10,9 +10,9 @@ import type {
   Address,
   DataOption,
   zipCodeOption,
-} from "@/modules/05_placement/components/exams_other/profileType";
-import { defaultAddress } from "@/modules/05_placement/components/exams_other/profileType";
-import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
+} from "@/modules/05_placement/components/PersonalDetail/profileType";
+import { defaultAddress } from "@/modules/05_placement/components/PersonalDetail/profileType";
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
 import type { RequestItemsHistoryObject } from "@/modules//05_placement/interface/request/Address";
 import type { ResponseObject } from "@/modules//05_placement/interface/response/Address";
 import HistoryTable from "@/components/TableHistory.vue";
diff --git a/src/modules/05_placement/components/exams_other/Information/Certicate.vue b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
similarity index 98%
rename from src/modules/05_placement/components/exams_other/Information/Certicate.vue
rename to src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
index 6e0b0bd64..351cd071b 100644
--- a/src/modules/05_placement/components/exams_other/Information/Certicate.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
@@ -5,9 +5,9 @@ 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/exams_other/Table.vue";
-import DialogHeader from "@/modules/05_placement/components/exams_other/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/exams_other/DialogFooter.vue";
+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,
diff --git a/src/modules/05_placement/components/exams_other/Information/Information.vue b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
similarity index 99%
rename from src/modules/05_placement/components/exams_other/Information/Information.vue
rename to src/modules/05_placement/components/PersonalDetail/Information/Information.vue
index 0538a83a6..006f3d5c6 100644
--- a/src/modules/05_placement/components/exams_other/Information/Information.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
@@ -7,15 +7,15 @@ import { useQuasar } from "quasar";
 import type {
   Information,
   DataOption,
-} from "@/modules/05_placement/components/exams_other/profileType";
-import { defaultInformation } from "@/modules/05_placement/components/exams_other/profileType";
+} from "@/modules/05_placement/components/PersonalDetail/profileType";
+import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
 import type {
   RequestItemsHistoryObject,
   Columns,
 } from "@/modules/05_placement/interface/request/Information";
 import type { ResponseObject } from "@/modules/05_placement/interface/response/Information";
 import type { InformationOps } from "@/modules/05_placement/interface/index/Main";
-import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
diff --git a/src/modules/05_placement/components/exams_other/Information/layout.vue b/src/modules/05_placement/components/PersonalDetail/Information/layout.vue
similarity index 88%
rename from src/modules/05_placement/components/exams_other/Information/layout.vue
rename to src/modules/05_placement/components/PersonalDetail/Information/layout.vue
index e6dbdc6a2..209e85234 100644
--- a/src/modules/05_placement/components/exams_other/Information/layout.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/layout.vue
@@ -1,8 +1,8 @@
 <!-- card รวม ข้อมูลส่วนตัว กับ ที่อยู่ -->
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
-import Information from "@/modules/05_placement/components/exams_other/Information/Information.vue";
-import Address from "@/modules/05_placement/components/exams_other/Information/Address.vue";
+import Information from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
+import Address from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 const props = defineProps({
diff --git a/src/modules/05_placement/components/exams_other/Information/top.vue b/src/modules/05_placement/components/PersonalDetail/Information/top.vue
similarity index 100%
rename from src/modules/05_placement/components/exams_other/Information/top.vue
rename to src/modules/05_placement/components/PersonalDetail/Information/top.vue
diff --git a/src/modules/05_placement/components/exams_other/Insignia.vue b/src/modules/05_placement/components/PersonalDetail/Insignia.vue
similarity index 99%
rename from src/modules/05_placement/components/exams_other/Insignia.vue
rename to src/modules/05_placement/components/PersonalDetail/Insignia.vue
index 1fc3a8fac..93848dd1f 100644
--- a/src/modules/05_placement/components/exams_other/Insignia.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Insignia.vue
@@ -4,9 +4,9 @@ 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/exams_other/Table.vue";
-import DialogHeader from "@/modules/05_placement/components/exams_other/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/exams_other/DialogFooter.vue";
+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,
diff --git a/src/modules/05_placement/components/exams_other/Qualification.vue b/src/modules/05_placement/components/PersonalDetail/Qualification.vue
similarity index 98%
rename from src/modules/05_placement/components/exams_other/Qualification.vue
rename to src/modules/05_placement/components/PersonalDetail/Qualification.vue
index 412bf2aee..f9a1085a1 100644
--- a/src/modules/05_placement/components/exams_other/Qualification.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Qualification.vue
@@ -4,7 +4,7 @@ import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
 import type { QForm } from 'quasar';
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
diff --git a/src/modules/05_placement/components/exams_other/Table.vue b/src/modules/05_placement/components/PersonalDetail/Table.vue
similarity index 97%
rename from src/modules/05_placement/components/exams_other/Table.vue
rename to src/modules/05_placement/components/PersonalDetail/Table.vue
index 85c5d5443..57a5336d1 100644
--- a/src/modules/05_placement/components/exams_other/Table.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Table.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
-import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
+import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
 import type { Pagination } from "@/modules/05_placement/interface/index/Main";
 
 const attrs = ref<any>(useAttrs());
diff --git a/src/modules/05_placement/components/exams_other/profileType.ts b/src/modules/05_placement/components/PersonalDetail/profileType.ts
similarity index 100%
rename from src/modules/05_placement/components/exams_other/profileType.ts
rename to src/modules/05_placement/components/PersonalDetail/profileType.ts
diff --git a/src/modules/05_placement/components/exams_other/Main.vue b/src/modules/05_placement/components/exams_other/Main.vue
deleted file mode 100644
index 5abffee7e..000000000
--- a/src/modules/05_placement/components/exams_other/Main.vue
+++ /dev/null
@@ -1,421 +0,0 @@
-<script setup lang="ts">
-import { onMounted, reactive, ref, useAttrs } from 'vue';
-import type { QTableProps } from 'quasar';
-import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { usePlacementDataStore } from "@/modules/05_placement/store";
-import router from '@/router';
-
-const DataStore = usePlacementDataStore()
-
-const mixin = useCounterMixin();
-const { dateText } = mixin;
-
-// แปลงเวลา ค.ศ ให้เป็น พ.ศ
-const textDate = (value: Date) => {
-  return dateText(value);
-};
-
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "id",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "id",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "examRound",
-    align: "left",
-    label: "รอบการสอบ",
-    sortable: true,
-    field: "examRound",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "examOrder",
-    align: "left",
-    label: "ครั้งที่",
-    sortable: true,
-    field: "examOrder",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fiscalYear",
-    align: "left",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "fiscalYear",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "numberofCandidates",
-    align: "left",
-    label: "จำนวนผู้สอบได้",
-    sortable: false,
-    field: "numberofCandidates",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "examType",
-    align: "left",
-    label: "ประเภทการสอบ",
-    sortable: false,
-    field: "examType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "accountExpirationDate",
-    align: "left",
-    label: "วันที่บัญชีหมดอายุ",
-    sortable: true,
-    field: "accountExpirationDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-]);
-
-// ข้อมูลตาราง (จำลอง)
-const rows = ref<FormPlacementMainData[]>([{
-  id: 1,
-  examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-  examOrder: 3,
-  fiscalYear: 2023,
-  numberofCandidates: 8,
-  examType: 1,
-  accountExpirationDate: "2023-02-28T14:47:04.1785384Z"
-},
-{
-  id: 2,
-  examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-  examOrder: 2,
-  fiscalYear: 2023,
-  numberofCandidates: 12,
-  examType: 1,
-  accountExpirationDate: "2023-02-28T14:47:04.1785384Z"
-},
-{
-  id: 3,
-  examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-  examOrder: 2,
-  fiscalYear: 2023,
-  numberofCandidates: 20,
-  examType: 1,
-  accountExpirationDate: "2023-01-31T14:47:04.1785384Z"
-},
-{
-  id: 4,
-  examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-  examOrder: 2,
-  fiscalYear: 2022,
-  numberofCandidates: 16,
-  examType: 2,
-  accountExpirationDate: "2023-11-30T14:47:04.1785384Z"
-},
-{
-  id: 5,
-  examRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-  examOrder: 1,
-  fiscalYear: 2021,
-  numberofCandidates: 20,
-  examType: 2,
-  accountExpirationDate: "2024-05-21T14:47:04.1785384Z",
-},
-]);
-
-let OriginalData = ref<FormPlacementMainData[]>([]);
-let UpdataData = ref<FormPlacementMainData[]>([]);
-
-const OriginalDataFetch = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  await DataStore.DataMain(rows.value)
-  OriginalData.value = await DataStore.DataMainOrig
-  UpdataData.value = OriginalData.value
-}
-
-onMounted(async () => {
-  await OriginalDataFetch()
-  fiscalYearFilter()
-  examTimeFilter()
-  examTypeFilter()
-  await expiredAccountFilter()
-  searchFilterTable()
-})
-
-// ดูรายการสอบแข่งขัน หน้าต่อไป
-const redirectToPage = (id?: number) => {
-  router.push(`/placement2/detail`);
-};
-
-// เลือกปีงบประมาณ
-const fiscalyear = ref<number | null>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: 'ทั้งหมด' }]);
-const addedfiscalYearValues: number[] = [];
-const fiscalYearFilter = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //    DataStore.DataMainYearSet(rows.value);
-  //    fiscalyearOP.value = DataStore.DataMainYearGet;
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  for (let data of OriginalData.value) {
-    const year = data.fiscalYear + 543;
-
-    if (fiscalyear.value === null || year > fiscalyear.value) {
-      fiscalyear.value = year;
-    }
-
-    if (!addedfiscalYearValues.includes(year)) {
-      fiscalyearOP.push({ id: year, name: year.toString() });
-      addedfiscalYearValues.push(year);
-    }
-  }
-}
-
-// เลือกปีงบประมาณตาม API
-const searchfiscalyear = () => {
-  console.log('Input value changed:', fiscalyear.value);
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-};
-
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
-
-const attrs = ref<any>(useAttrs());
-const visibleColumns = ref<string[]>(['id', 'examRound', 'examOrder', 'fiscalYear', 'numberofCandidates', 'examType', 'accountExpirationDate']) //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// ครั้งที่สอบ
-const examTime = ref<number | null>(null);
-const examTimeOP = ref<number[]>([]);
-const examTimeFilter = async () => {
-  for (let data of OriginalData.value) {
-    if (!examTimeOP.value.includes(data.examOrder)) {
-      examTimeOP.value.push(data.examOrder);
-    }
-  }
-  examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
-}
-
-// ประเภทการสอบ
-const examType = ref<number | null>(0);
-const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedexamTypeValues: number[] = [];
-const examTypeFilter = async () => {
-  for (let data of OriginalData.value) {
-    const examTypeValue = data.examType;
-    if (examTypeValue == 1 && !addedexamTypeValues.includes(1)) {
-      examTypeOP.push({ id: 1, name: "คัดเลือก" });
-      addedexamTypeValues.push(1);
-    } else if (examTypeValue == 2 && !addedexamTypeValues.includes(2)) {
-      examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
-      addedexamTypeValues.push(2);
-    }
-  }
-}
-
-const searchFilterTable = async () => {
-  // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
-  await DataStore.DataUpdateMain(examTime.value, examType.value, expiredAccount.value);
-  UpdataData.value = DataStore.DataMainUpdate
-};
-
-// บัญชีหมดอายุ
-const expiredAccount = ref<boolean>(false);
-const expiredAccountFilter = async () => {
-  const currentDate = new Date();
-  const updatedRows = OriginalData.value.map((data) => {
-    let expirationDate = new Date(data.accountExpirationDate);
-    let isExpired = expirationDate < currentDate 
-
-    return { ...data, isExpired };
-  });
-  await DataStore.DataMain(updatedRows);
-};
-
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true)
-    return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-
-</script>
-
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายการสอบแข่งขัน / คัดเลือก
-  </div>
-  <div>
-    <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="row q-pa-md">
-        <div class="col-xs-12 col-sm-3 col-md-2">
-          <q-select v-model="fiscalyear" label="ปีงบประมาณ" dense clearable emit-value map-options :options="fiscalyearOP"
-            option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
-            :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchfiscalyear" />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-6"></div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
-          <q-input standout dense v-model="filterKeyword" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-            class="q-ml-sm">
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-            </template>
-          </q-input>
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-2">
-          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            class="gt-xs q-ml-sm" />
-        </div>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-card bordered class="col-12 filter-card">
-          <div class="row q-pa-sm">
-            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
-              <q-select v-model="examTime" label="ครั้งที่" dense clearable emit-value map-options :options="examTimeOP"
-                option-value="id" option-label="name" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
-                :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
-            </div>
-            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
-              <q-select v-model="examType" label="ประเภทการสอบ" dense clearable emit-value map-options option-label="name"
-                :options="examTypeOP" option-value="id" lazy-rules hide-bottom-space :readonly="false" :borderless="false"
-                :outlined="true" :hide-dropdown-icon="false" @update:model-value="searchFilterTable" />
-            </div>
-            <div class="col-xs-12 col-sm-3 col-md-3">
-              <q-toggle v-model="expiredAccount" class="toggle-expired-account" color="blue" label="แสดงบัญชีหมดอายุ"
-                @update:model-value="searchFilterTable" />
-            </div>
-          </div>
-        </q-card>
-      </div>
-      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-        <q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="id" flat bordered
-          dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel">
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
-              <q-td key="id" :props="props">
-                {{ props.row.id }}
-              </q-td>
-              <q-td key="examRound" :props="props">
-                {{ props.row.examRound }}
-              </q-td>
-              <q-td key="examOrder" :props="props">
-                {{ props.row.examOrder }}
-              </q-td>
-              <q-td key="fiscalYear" :props="props">
-                {{ props.row.fiscalYear + 543 }}
-              </q-td>
-              <q-td key="numberofCandidates" :props="props">
-                {{ props.row.numberofCandidates }}
-              </q-td>
-              <q-td key="examType" :props="props">
-                {{ props.row.examType == 1 ? 'คัดเลือก' : 'สอบแข่งขัน' }}
-              </q-td>
-              <q-td key="accountExpirationDate" :props="props">
-                {{ textDate(props.row.accountExpirationDate) }}
-              </q-td>
-            </q-tr>
-          </template>
-        </q-table>
-      </div>
-    </q-card>
-  </div>
-</template>
-
-<style lang="scss" scope>
-.filter-card {
-  background-color: #f1f1f1b0;
-}
-
-.toggle-expired-account {
-  font-size: 12px;
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 150%;
-  color: #35373C;
-}
-
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-header-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 438d71ab3..1e46a9961 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -1,4 +1,4 @@
-import type { zipCodeOption } from "../../components/exams_other/profileType";
+import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
 interface DataOption {
   id: number | string;
   name: string;
@@ -16,7 +16,6 @@ interface EduOps {
   positionPathOptions: DataOption[];
 }
 
-
 interface InformationOps {
   prefixOps: DataOption[];
   genderOps: DataOption[];
@@ -54,14 +53,14 @@ interface CheckboxItem {
   label: string;
 }
 
-export type { 
-  DataOption, 
-  DataOptionInsignia, 
-  treeTab, 
-  InformationOps, 
-  AddressOps, 
-  Pagination, 
-  EduOps, 
+export type {
+  DataOption,
+  DataOptionInsignia,
+  treeTab,
+  InformationOps,
+  AddressOps,
+  Pagination,
+  EduOps,
   InsigniaOps,
-  CheckboxItem
+  CheckboxItem,
 };
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 77f1cd48e..b32119f50 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -2,14 +2,12 @@
  * Router บรรจุ แต่งตั้ง ย้าย โอน (Placement)
  */
 
-const MainSorkorcho = () =>
-  import("@/modules/05_placement/components/exams_sorkorcho/Main.vue");
+const PlacementMain = () =>
+  import("@/modules/05_placement/components/Main.vue");
 const PlacementDetail = () =>
   import("@/modules/05_placement/components/pass/Detail.vue");
-const MainOther = () =>
-  import("@/modules/05_placement/components/exams_other/Main.vue");
-const Placement2Detail = () =>
-  import("@/modules/05_placement/components/exams_other/Detail.vue");
+const PlacementPersonalDetail = () =>
+  import("@/modules/05_placement/components/PersonalDetail/Detail.vue");
 const addOrderPlacement = () =>
   import(
     "@/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue"
@@ -25,9 +23,29 @@ const detailOrderReplace = () =>
 
 export default [
   {
-    path: "/placement/Sorkorcho",
+    path: "/placement",
     name: "placement",
-    component: MainSorkorcho,
+    component: PlacementMain,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/placement/detail",
+    name: "placement-detail",
+    component: PlacementDetail,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/placement/detail/:personalId",
+    name: "placement-personal-detail",
+    component: PlacementPersonalDetail,
     meta: {
       Auth: true,
       Key: [7],
@@ -54,36 +72,6 @@ export default [
       Role: "placement",
     },
   },
-  {
-    path: "/placement/detail",
-    name: "placementDetail",
-    component: PlacementDetail,
-    meta: {
-      Auth: true,
-      Key: [7],
-      Role: "placement",
-    },
-  },
-  {
-    path: "/placement2",
-    name: "placement2",
-    component: MainOther,
-    meta: {
-      Auth: true,
-      Key: [7],
-      Role: "placement",
-    },
-  },
-  {
-    path: "/placement2/detail",
-    name: "placement2Detail",
-    component: Placement2Detail,
-    meta: {
-      Auth: true,
-      Key: [7],
-      Role: "placement",
-    },
-  },
   {
     path: "/placement/addOrderPlacement",
     name: "addOrderPlacement",

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 2/2] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20UI?=
 =?UTF-8?q?=20=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=82=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AA=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=82=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B8=9C?=
 =?UTF-8?q?=E0=B9=88=E0=B8=B2=E0=B8=99=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=95?=
 =?UTF-8?q?=E0=B8=A3=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