diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index bd9f76127..9ab8a9ba1 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -3,4 +3,34 @@
  */
 import env from "../index";
 
-export default {};
+const placement = `${env.API_PLACEMENT_URI}/Placement/placement/`;
+
+export default {
+  //personal
+  placementPersonalId: (personalId: string) =>
+    `${placement}personal/${personalId}`,
+
+  //personal
+  placementPropertyId: (personalId: string) =>
+    `${placement}property/${personalId}`,
+
+  //information
+  placementInformationId: (personalId: string) =>
+    `${placement}information/${personalId}`,
+
+  //address
+  placementAddressId: (personalId: string) =>
+    `${placement}address/${personalId}`,
+
+  //family
+  placementFamilyId: (personalId: string) => `${placement}family/${personalId}`,
+
+  //certificate
+  placementCertId: (personalId: string) =>
+    `${placement}certificate/${personalId}`,
+  placementCertDetailId: (personalId: string, certificateId: string) =>
+    `${placement}certificate/${personalId}/${certificateId}`,
+
+  //education
+  placementEducationId: (id: string) => `${placement}education/${id}`,
+};
diff --git a/src/api/index.ts b/src/api/index.ts
index 3c47b1430..857d2e33d 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -18,6 +18,7 @@ const config = ref<any>({
     API_CANDIDATE_URI: "https://bma-ehr.frappet.synology.me/api/v1",
     // API_REPORT_URI: "https://localhost:7187/api/v1",
     API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
+    API_PLACEMENT_URI: "https://localhost:7260/api",
     MEET_URI: "meet.frappet.com",
   },
   test: {
@@ -49,6 +50,9 @@ const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
 const API_URI_PROFILE_SERVICE = ref<string>(
   config.value[env.value].API_URI_PROFILE_SERVICE
 );
+const API_PLACEMENT_URI = ref<string>(
+  config.value[env.value].API_PLACEMENT_URI
+);
 
 export default {
   env: env.value,
@@ -58,5 +62,6 @@ export default {
   API_REPORT_URI: API_REPORT_URI.value,
   API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
   API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
+  API_PLACEMENT_URI: API_PLACEMENT_URI.value,
   MEET_URI: MEET_URI.value,
 };
diff --git a/src/modules/05_placement/components/PersonalDetail/Detail.vue b/src/modules/05_placement/components/PersonalDetail/Detail.vue
index c105e003c..f757ecc6d 100644
--- a/src/modules/05_placement/components/PersonalDetail/Detail.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Detail.vue
@@ -3,89 +3,330 @@
 import { onMounted, reactive, ref } from "vue";
 import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
-const router = useRouter();
-import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/layout.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import Informationvue from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
+import Addressvue from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
 import EducationVue from "@/modules/05_placement/components/PersonalDetail/Education.vue";
 import Certicate from "@/modules/05_placement/components/PersonalDetail/Information/Certicate.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";
+import Familyvue from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";
 
+import type {
+  Property,
+  PointExam,
+  Education,
+  Family,
+  Address,
+} from "@/modules/05_placement/interface/index/Main.ts";
+
+import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
+
+const $q = useQuasar(); // show dialog
+const router = useRouter();
 const store = useDataStore();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { showLoader, hideLoader, messageError } = mixin;
 const { changeTab } = store;
 const statusEdit = ref<boolean>(false);
 const profileType = ref<string>("");
 
 const route = useRoute();
-const examId = ref<string>(route.params.personalId.toString());
+const examId = ref<string>(
+  route.params.personalId ? route.params.personalId.toString() : ""
+);
 
-const FormData = reactive<any>({
-    fullName: examId,
+const ExamDataDefualt: PointExam = {
+  pointA: 0,
+  pointB: 0,
+  pointC: 0,
+  pointTotalA: 0,
+  pointTotalB: 0,
+  pointTotalC: 0,
+  point: 0,
+  pointTotal: 0,
+  examNumber: 0,
+  examRound: 0,
+  pass: "",
+};
+
+const InformationDataDefualt: Information = {
+  idCard: "",
+  prefix: "",
+  prefixId: "",
+  fullName: "",
+  firstname: "",
+  lastname: "",
+  nationality: "",
+  race: "",
+  dateOfBirth: new Date(),
+  age: "",
+  telephone: "",
+  gender: "",
+  genderId: "",
+  relationship: "",
+  relationshipId: "",
+  bloodGroup: "",
+  bloodGroupId: "",
+  religion: "",
+  religionId: "",
+};
+
+const FamilyDataDefualt: Family = {
+  couple: false,
+  marryPrefix: "",
+  marryPrefixId: "",
+  marryFirstName: "",
+  marryLastName: "",
+  marryOccupation: "",
+  fatherPrefix: "",
+  fatherPrefixId: "",
+  fatherFirstName: "",
+  fatherLastName: "",
+  fatherOccupation: "",
+  motherPrefix: "",
+  motherPrefixId: "",
+  motherFirstName: "",
+  motherLastName: "",
+  motherOccupation: "",
+};
+
+const AddressDataDefualt: Address = {
+  registSubDistrict: "",
+  registSubDistrictId: "",
+  registZipCode: "",
+  registDistrict: "",
+  registDistrictId: "",
+  registProvince: "",
+  registProvinceId: "",
+  currentSubDistrict: "",
+  currentSubDistrictId: "",
+  currentZipCode: "",
+  currentDistrict: "",
+  currentDistrictId: "",
+  currentProvince: "",
+  currentProvinceId: "",
+  registSame: false,
+};
+
+const personalData = ref({
+  id: "",
+  fullName: "",
 });
+const QualificationData = ref<Property[]>([]);
+const ExamData = ref<PointExam>(ExamDataDefualt);
+const InformationData = ref<Information>(InformationDataDefualt);
+const EducationData = ref<Education[]>([]);
+const FamilyData = ref<Family>(FamilyDataDefualt);
+const AddressData = ref<Address>(AddressDataDefualt);
 
 onMounted(async () => {
-    //   await checkProfileData();
-    //   await fetchData();
-    await changeTab("information");
+  //   await checkProfileData();
+  await fetchData();
+  await changeTab("information");
 });
 
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.placementPersonalId(examId.value))
+    .then((res: any) => {
+      const data = res.data.result;
+      //   data.value = data;
+      console.log(data);
+      personalData.value.fullName = data.fullName;
+      personalData.value.id = data.personalId;
+
+      InformationData.value.idCard = data.idCard;
+      InformationData.value.fullName = data.fullName;
+      InformationData.value.firstname = data.firstname;
+      InformationData.value.lastname = data.lastname;
+      InformationData.value.nationality = data.nationality;
+      InformationData.value.race = data.race;
+      InformationData.value.genderId = data.genderId;
+      InformationData.value.prefixId = data.prefixId;
+      InformationData.value.relationshipId = data.relationshipId;
+      InformationData.value.religionId = data.religionId;
+      InformationData.value.bloodGroupId = data.bloodGroupId;
+      InformationData.value.dateOfBirth = new Date(data.dateOfBirth);
+      InformationData.value.age = data.age;
+      InformationData.value.telephone = data.telephone;
+
+      AddressData.value.registSame = data.registSame ?? false;
+      AddressData.value.registSubDistrict = data.registSubDistrict ?? "";
+      AddressData.value.registSubDistrictId = data.registSubDistrictId ?? "";
+      AddressData.value.registZipCode = data.registZipCode ?? "";
+      AddressData.value.registDistrict = data.registDistrict ?? "";
+      AddressData.value.registDistrictId = data.registDistrictId ?? "";
+      AddressData.value.registProvince = data.registProvince ?? "";
+      AddressData.value.registProvinceId = data.registProvinceId ?? "";
+      AddressData.value.currentSubDistrict = data.currentSubDistrict ?? "";
+      AddressData.value.currentSubDistrictId = data.currentSubDistrictId ?? "";
+      AddressData.value.currentZipCode = data.currentZipCode ?? "";
+      AddressData.value.currentDistrict = data.currentDistrict ?? "";
+      AddressData.value.currentDistrictId = data.currentDistrictId ?? "";
+      AddressData.value.currentProvince = data.currentProvince ?? "";
+      AddressData.value.currentProvinceId = data.currentProvinceId ?? "";
+
+      FamilyData.value.couple = data.couple ?? false;
+      FamilyData.value.marryPrefix = data.marryPrefix ?? "";
+      FamilyData.value.marryPrefixId = data.marryPrefixId ?? "";
+      FamilyData.value.marryFirstName = data.marryFirstName ?? "";
+      FamilyData.value.marryLastName = data.marryLastName ?? "";
+      FamilyData.value.marryOccupation = data.marryOccupation ?? "";
+      FamilyData.value.fatherPrefix = data.fatherPrefix ?? "";
+      FamilyData.value.fatherPrefixId = data.fatherPrefixId ?? "";
+      FamilyData.value.fatherFirstName = data.fatherFirstName ?? "";
+      FamilyData.value.fatherLastName = data.fatherLastName ?? "";
+      FamilyData.value.fatherOccupation = data.fatherOccupation ?? "";
+      FamilyData.value.motherPrefix = data.motherPrefix ?? "";
+      FamilyData.value.motherPrefixId = data.motherPrefixId ?? "";
+      FamilyData.value.motherFirstName = data.motherFirstName ?? "";
+      FamilyData.value.motherLastName = data.motherLastName ?? "";
+      FamilyData.value.motherOccupation = data.motherOccupation ?? "";
+
+      ExamData.value.pointA = data.pointA;
+      ExamData.value.pointB = data.pointB;
+      ExamData.value.pointC = data.pointC;
+      ExamData.value.point = data.point;
+      ExamData.value.pointTotalA = data.pointTotalA;
+      ExamData.value.pointTotalB = data.pointTotalB;
+      ExamData.value.pointTotalC = data.pointTotalC;
+      ExamData.value.pointTotal = data.pointTotal;
+      ExamData.value.examNumber = data.examNumber;
+      ExamData.value.examRound = data.examRound;
+      ExamData.value.pass = data.pass;
+
+      QualificationData.value = data.isProperty;
+
+      let listRow: Education[] = [];
+      data.education.map((row: any) => {
+        listRow.push({
+          id: row.id ?? "",
+          educationLevel: row.educationLevel ?? "",
+          institute: row.institute ?? "",
+          degree: row.degree ?? "",
+          field: row.field ?? "",
+          gpa: row.gpa ?? "",
+          country: row.country ?? "",
+          duration: row.duration ?? "",
+          other: row.other ?? "",
+          fundName: row.fundName ?? "",
+          durationYear: row.durationYear ?? 0,
+          finishDate: row.finishDate ?? new Date(),
+          isDate: row.isDate ?? "",
+          startDate: row.startDate ?? 0,
+          endDate: row.endDate ?? 0,
+          positionPath: row.positionPath ?? "",
+          isEducation: row.isEducation ?? "",
+        });
+      });
+      EducationData.value = listRow;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 </script>
 <template>
-    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
-        <div class="header-text">
-            <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
-                @click="router.go(-1)" />
-            รายละเอียดของ {{ FormData.fullName }}
-        </div>
+  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
+    <div class="header-text">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      รายละเอียดของ {{ personalData.fullName }}
     </div>
-    <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>
+  <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"
+          v-model:data="InformationData"
+          :fetch="fetchData"
+        />
+        <div class="col-12 q-px-md"><q-separator size="4px" /></div>
+        <Addressvue
+          v-model:statusEdit="statusEdit"
+          v-model:data="AddressData"
+          :fetch="fetchData"
+        />
+      </div>
 
-            <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 id="family" name="10" class="col-12 q-pa-sm">
+        <div class="col-12 q-px-md"><q-separator size="4px" /></div>
+        <Familyvue
+          v-model:statusEdit="statusEdit"
+          v-model:data="FamilyData"
+          :fetch="fetchData"
+        />
+      </div>
 
-            <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 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"
+          v-model:data="InformationData"
+          :fetch="fetchData"
+        />
+      </div>
 
-            <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 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"
+          v-model:data="EducationData"
+          :fetch="fetchData"
+        />
+      </div>
 
-            <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 id="examresult" name="4" class="col-12 q-pa-sm">
+        <div class="col-12 q-px-md"><q-separator size="4px" /></div>
+        <ExamResult v-model:data="ExamData" />
+      </div>
 
-            <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>
-    </div>
+      <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"
+          v-model:data="QualificationData"
+          :fetch="fetchData"
+        />
+      </div>
+    </q-card>
+  </div>
 </template>
 <style lang="scss" scoped>
 .header-text {
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 32px;
-    letter-spacing: 0.0025em;
-    color: #35373C;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 32px;
+  letter-spacing: 0.0025em;
+  color: #35373c;
 }
 
 .information:target {
-    padding-top: 84px;
+  padding-top: 84px;
 }
 
 .horizontal-line {
-    background-color: #F4F4F4;
-    height: 5px;
+  background-color: #f4f4f4;
+  height: 5px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/PersonalDetail/Education.vue b/src/modules/05_placement/components/PersonalDetail/Education.vue
index 37c25205a..8c504a8c0 100644
--- a/src/modules/05_placement/components/PersonalDetail/Education.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Education.vue
@@ -13,18 +13,30 @@ import type {
   DataProps,
 } from "@/modules/05_placement/interface/request/Education";
 import type { ResponseObject } from "@/modules/05_placement/interface/response/Education";
-import type { DataOption } 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 { EduOps } from "@/modules/05_placement/interface/index/Main";
+import type {
+  EduOps,
+  Education,
+  DataOption,
+} from "@/modules/05_placement/interface/index/Main";
 import type { QTableProps } from "quasar";
+import type { PropType } from "vue";
 
 const props = defineProps({
   statusEdit: {
     type: Boolean,
     required: true,
   },
+  fetch: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  data: {
+    type: Array as PropType<Education[]>,
+    default: [],
+  },
 });
 
 const $q = useQuasar();
@@ -74,9 +86,9 @@ 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>('');
+const profileId = ref<string>("");
 // const profileId = ref<string>(route.params.id.toString());
-const rows = ref<RequestItemsObject[]>([]);
+const rows = ref<Education[]>(props.data);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 profileData.education.columns.length == 0
@@ -459,8 +471,8 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
 });
 
 onMounted(async () => {
-  // await fetchLevel();
-  // await fetchPositionPath();
+  await fetchLevel();
+  await fetchPositionPath();
   // await fetchData();
 });
 
diff --git a/src/modules/05_placement/components/PersonalDetail/ExamResult.vue b/src/modules/05_placement/components/PersonalDetail/ExamResult.vue
index cbee59678..5792bcf8b 100644
--- a/src/modules/05_placement/components/PersonalDetail/ExamResult.vue
+++ b/src/modules/05_placement/components/PersonalDetail/ExamResult.vue
@@ -1,101 +1,137 @@
 <script setup lang="ts">
+import type { PropType } from "vue";
+import type { PointExam } from "@/modules/05_placement/interface/index/Main";
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<PointExam>,
+    default: {
+      pointA: 0,
+      pointB: 0,
+      pointC: 0,
+      pointTotalA: 0,
+      pointTotalB: 0,
+      pointTotalC: 0,
+      point: 0,
+      pointTotal: 0,
+      examNumber: 0,
+      examRound: 0,
+      pass: "",
+    },
+  },
+});
 </script>
 <template>
-    <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>
-    </div>
-    <div class="row q-px-md">
-        <div class="col-7">
-            <q-card class="card-exam">
-                <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>
-                        <div class="q-pb-xs"> ภาค ข </div>
-                        <div class="q-pb-xs"> ภาค ค </div>
-                        <div> รวมทั้งหมด </div>
-                    </div>
-                    <div class="col q-pa-xs">
-                        <div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div>
-                        <div class="sub-text-exam q-pb-xs">200</div>
-                        <div class="sub-text-exam q-pb-xs">200</div>
-                        <div class="sub-text-exam q-pb-xs">100</div>
-                        <div class="sub-text-exam ">500</div>
-                    </div>
-                    <div class="col q-pa-xs header-sub-text-exam-2">
-                        <div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div>
-                        <div class="sub-text-exam q-pb-xs">133</div>
-                        <div class="sub-text-exam q-pb-xs">149</div>
-                        <div class="sub-text-exam q-pb-xs">100</div>
-                        <div class="sub-text-exam q-pb-xs">382</div>
-                    </div>
-                </div>
-            </q-card>
-        </div>
-        <div class="col q-pl-xl">
-            <q-card class="q-pt-xs">
-                <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 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>
+  </div>
+  <div class="row q-px-md">
+    <div class="col-7">
+      <q-card class="card-exam">
+        <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>
+            <div class="q-pb-xs">ภาค ข</div>
+            <div class="q-pb-xs">ภาค ค</div>
+            <div>รวมทั้งหมด</div>
+          </div>
+          <div class="col q-pa-xs">
+            <div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div>
+            <div class="sub-text-exam q-pb-xs">
+              {{ props.data.pointTotalA }}
+            </div>
+            <div class="sub-text-exam q-pb-xs">
+              {{ props.data.pointTotalB }}
+            </div>
+            <div class="sub-text-exam q-pb-xs">
+              {{ props.data.pointTotalC }}
+            </div>
+            <div class="sub-text-exam">{{ props.data.pointTotal }}</div>
+          </div>
+          <div class="col q-pa-xs header-sub-text-exam-2">
+            <div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div>
+            <div class="sub-text-exam q-pb-xs">{{ props.data.pointA }}</div>
+            <div class="sub-text-exam q-pb-xs">{{ props.data.pointB }}</div>
+            <div class="sub-text-exam q-pb-xs">{{ props.data.pointC }}</div>
+            <div class="sub-text-exam q-pb-xs">{{ props.data.point }}</div>
+          </div>
         </div>
+      </q-card>
     </div>
+    <div class="col q-pl-xl">
+      <q-card class="q-pt-xs">
+        <div class="header-text-right q-px-xs">ผลการสอบ</div>
+        <div class="sub-text-right q-px-xs q-pb-sm">{{ props.data.pass }}</div>
+        <div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
+        <div class="sub-text-right q-px-xs q-pb-sm">
+          {{ props.data.examNumber }}
+        </div>
+        <div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
+        <div class="sub-text-right q-px-xs q-pb-sm">
+          {{ props.data.examRound }}
+        </div>
+      </q-card>
+    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
 .header-text {
-    font-size: 18px;
-    font-weight: 600;
-    color: #4F4F4F;
+  font-size: 18px;
+  font-weight: 600;
+  color: #4f4f4f;
 }
 
 .header-text-right {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 150%;
-    color: #818181;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 150%;
+  color: #818181;
 }
 
 .sub-text-right {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 150%;
-    color: #000000;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 150%;
+  color: #000000;
 }
 
 .sub-text {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    letter-spacing: 0.0025em;
-    color: #35373C;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0.0025em;
+  color: #35373c;
 }
 
 .card-exam {
-    border-radius: 5px;
-    background: #FAFAFA;
+  border-radius: 5px;
+  background: #fafafa;
 }
 
 .header-sub-text-exam {
-    font-size: 15px;
-    font-weight: 500;
-    line-height: 150%;
-    color: #818181;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 150%;
+  color: #818181;
 }
 
 .header-sub-text-exam-2 {
-    font-size: 15px;
-    font-weight: 500;
-    line-height: 150%;
-    color: #00AA86;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 150%;
+  color: #00aa86;
 }
 
 .sub-text-exam {
-    font-size: 15px;
-    font-weight: 500;
-    color: #000000;
+  font-size: 15px;
+  font-weight: 500;
+  color: #000000;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
index bb299a3ee..623b91beb 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
@@ -29,6 +29,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  fetch: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
index 3082baed4..2f2186299 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
@@ -28,6 +28,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  fetch: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
 });
 
 const $q = useQuasar();
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
index dc8850be0..aac6c8f9f 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
@@ -27,6 +27,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  fetch: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -198,56 +202,55 @@ const fetchHistory = async () => {
 };
 
 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;
+  // 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.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";
+  // 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);
-    // });
+  // 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 () => {
@@ -1094,6 +1097,6 @@ const getClass = (val: boolean) => {
 
 <style lang="scss" scoped>
 .q-card {
-    box-shadow: 0px 0px 0px 0px !important;
+  box-shadow: 0px 0px 0px 0px !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
index a2e99b4a9..7442b06a4 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
@@ -2,26 +2,23 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
 import { useQuasar } from "quasar";
 import type {
   Information,
   DataOption,
 } 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/PersonalDetail/Information/top.vue";
-import HistoryTable from "@/components/TableHistory.vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/05_placement/store";
-import type { QTableColumn, QForm } from "quasar";
+
+import type { QForm } from "quasar";
+import type { PropType } from "vue";
 
 const props = defineProps({
   statusEdit: {
@@ -32,6 +29,14 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  fetch: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  data: {
+    type: Object as PropType<Information>,
+    default: defaultInformation,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -47,16 +52,11 @@ const {
   showLoader,
   hideLoader,
 } = mixin;
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const profileStore = useProfileDataStore();
 const { changeRetireText, changeBirth } = profileStore;
 const edit = ref<boolean>(false);
-const informaData = ref<Information>(defaultInformation);
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
-const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
-const filterHistory = ref<string>(""); //search data table history
-const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const informaData = ref<Information>(props.data);
 const age = ref<boolean>(true);
 const myform = ref<QForm | null>(null);
 const Ops = ref<InformationOps>({
@@ -89,214 +89,17 @@ const OpsFilter = ref<InformationOps>({
     { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
   ],
 });
-const columnsHistory = ref<QTableColumn[]>([
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขบัตรประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้า",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "firstName",
-    align: "left",
-    label: "ชื่อ",
-    sortable: true,
-    field: "firstName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastName",
-    align: "left",
-    label: "นามสกุล",
-    sortable: true,
-    field: "lastName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "birthDate",
-    align: "left",
-    label: "วัน/เดือน/ปี เกิด",
-    sortable: true,
-    field: "birthDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gender",
-    align: "left",
-    label: "เพศ",
-    sortable: true,
-    field: "gender",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "relationship",
-    align: "left",
-    label: "สถานภาพ",
-    sortable: true,
-    field: "relationship",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "bloodGroup",
-    align: "left",
-    label: "หมู่เลือด",
-    sortable: true,
-    field: "bloodGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "nationality",
-    align: "left",
-    label: "สัญชาติ",
-    sortable: true,
-    field: "nationality",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "race",
-    align: "left",
-    label: "เชื้อชาติ",
-    sortable: true,
-    field: "race",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "religion",
-    align: "left",
-    label: "ศาสนา",
-    sortable: true,
-    field: "religion",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "telephoneNumber",
-    align: "left",
-    label: "เบอร์โทร",
-    sortable: true,
-    field: "telephoneNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeType",
-    align: "left",
-    label: "ประเภทการจ้าง",
-    sortable: true,
-    field: "employeeType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeClass",
-    align: "left",
-    label: "ประเภทลูกจ้าง",
-    sortable: true,
-    field: "employeeClass",
-    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[]>([
-  "citizenId",
-  "prefix",
-  "firstName",
-  "lastName",
-  "birthDate",
-  "gender",
-  "relationship",
-  "bloodGroup",
-  "nationality",
-  "race",
-  "religion",
-  "telephoneNumber",
-  "employeeType",
-  "employeeClass",
-  "createdFullName",
-  "createdAt",
-]);
 
 onMounted(async () => {
-  // await fetchPerson();
-  // await fetchData();
+  await fetchPerson();
   emit("update:statusEdit", false);
 });
 
 const onCancel = async () => {
-  // if (myform.value != null) {
-  //   myform.value.reset();
-  // }
-  // await fetchData();
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await props.fetch();
 };
 
 /**
@@ -364,56 +167,6 @@ const fetchPerson = async () => {
     });
 };
 
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- */
-const clickHistory = async () => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileInforHisId(route.params.id.toString()))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: RequestItemsHistoryObject) => {
-        rowsHistory.value.push({
-          citizenId: e.citizenId,
-          prefix: e.prefix,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          birthDate: new Date(e.birthDate),
-          gender: e.gender,
-          relationship: e.relationship,
-          bloodGroup: e.bloodGroup,
-          nationality: e.nationality,
-          race: e.race,
-          religion: e.religion,
-          telephoneNumber: e.telephoneNumber,
-          employeeType:
-            e.employeeType == "gov"
-              ? "งบประมาณเงินอุดหนุนรัฐบาล"
-              : e.employeeType == "bkk"
-              ? "งบประมาณกรุงเทพมหานคร"
-              : "-",
-          employeeClass:
-            e.employeeClass == "perm"
-              ? "ลูกจ้างประจำ"
-              : e.employeeClass == "temp"
-              ? "ลูกจ้างชั่วคราว"
-              : "-",
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
 const filterSelector = (val: any, update: Function, refData: string) => {
   switch (refData) {
     case "prefixOps":
@@ -472,7 +225,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 };
 
 const handleDate = async (modelData: Date) => {
-  informaData.value.birthDate = modelData;
+  informaData.value.dateOfBirth = modelData;
   await calRetire(modelData);
 };
 
@@ -500,91 +253,51 @@ const calRetire = async (birth: Date) => {
     });
 };
 
-const fetchData = async () => {
+const editData = async () => {
+  if (age.value == false) {
+    modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
+    return;
+  }
+
+  const body: any = {
+    citizenId: informaData.value.idCard,
+    prefixId: informaData.value.prefixId,
+    firstName: informaData.value.firstname,
+    lastName: informaData.value.lastname,
+    genderId: informaData.value.genderId,
+    nationality: informaData.value.nationality,
+    race: informaData.value.race,
+    religionId: informaData.value.religionId,
+    birthDate: informaData.value.dateOfBirth,
+    bloodGroupId: informaData.value.bloodGroupId,
+    relationshipId: informaData.value.relationshipId,
+    telephoneNumber: informaData.value.telephone,
+  };
   showLoader();
   await http
-    .get(config.API.profileInforId(route.params.id.toString()))
-    .then(async (res: any) => {
-      const data: ResponseObject = res.data.result;
-      informaData.value.cardid = data.citizenId;
-      informaData.value.prefix = "";
-      informaData.value.prefixId = data.prefixId;
-      informaData.value.firstname = data.firstName;
-      informaData.value.lastname = data.lastName;
-      informaData.value.birthDate = new Date(data.birthDate);
-      informaData.value.genderId = data.genderId;
-      informaData.value.bloodId = data.bloodGroupId;
-      informaData.value.nationality = data.nationality;
-      informaData.value.ethnicity = data.race;
-      informaData.value.statusId = data.relationshipId;
-      informaData.value.religionId = data.religionId;
-      informaData.value.tel = data.telephoneNumber;
-      informaData.value.age = data.age;
-      informaData.value.employeeType = data.employeeType;
-      informaData.value.employeeClass = data.employeeClass;
-      informaData.value.profileType = data.profileType;
-      await calRetire(new Date(dateToISO(new Date(data.birthDate))));
-      if (data.profileType == "officer" && columnsHistory.value.length >= 15) {
-        columnsHistory.value.splice(13, 1);
-        columnsHistory.value.splice(12, 1);
-      }
+    .put(
+      config.API.placementInformationId(route.params.personalId.toString()),
+      body
+    )
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await props.fetch();
+      await changeBirth(informaData.value.dateOfBirth ?? new Date());
     });
 };
 
-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());
-  //   });
-};
-
 const saveData = async () => {
   if (myform.value != null) {
     await myform.value.validate().then(async (success: boolean) => {
       if (success) {
         await editData();
-      } else {
       }
     });
   }
@@ -621,7 +334,6 @@ const getClass = (val: boolean) => {
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="onCancel"
-      :historyClick="clickHistory"
     />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
@@ -634,7 +346,7 @@ const getClass = (val: boolean) => {
             lazy-rules
             :readonly="!edit"
             :borderless="!edit"
-            v-model="informaData.cardid"
+            v-model="informaData.idCard"
             maxlength="13"
             :rules="[
               (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
@@ -702,7 +414,7 @@ const getClass = (val: boolean) => {
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <datepicker
-            v-model="informaData.birthDate"
+            v-model="informaData.dateOfBirth"
             :locale="'th'"
             autoApply
             :enableTimePicker="false"
@@ -726,7 +438,7 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                :model-value="date2Thai(informaData.birthDate)"
+                :model-value="date2Thai(informaData.dateOfBirth)"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
                 :label="`${'วัน/เดือน/ปี เกิด'}`"
               >
@@ -793,7 +505,7 @@ const getClass = (val: boolean) => {
             :outlined="edit"
             dense
             lazy-rules
-            v-model="informaData.statusId"
+            v-model="informaData.relationshipId"
             emit-value
             map-options
             option-label="name"
@@ -818,7 +530,7 @@ const getClass = (val: boolean) => {
             :outlined="edit"
             dense
             lazy-rules
-            v-model="informaData.bloodId"
+            v-model="informaData.bloodGroupId"
             emit-value
             map-options
             option-label="name"
@@ -855,7 +567,7 @@ const getClass = (val: boolean) => {
             lazy-rules
             :readonly="!edit"
             :borderless="!edit"
-            v-model="informaData.ethnicity"
+            v-model="informaData.race"
             :rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
             :label="`${'เชื้อชาติ'}`"
           />
@@ -885,7 +597,7 @@ const getClass = (val: boolean) => {
                       ) "
           />
         </div>
-        <!-- <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
             hide-bottom-space
             :outlined="edit"
@@ -895,7 +607,7 @@ const getClass = (val: boolean) => {
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            v-model="informaData.tel"
+            v-model="informaData.telephone"
             :rules="[
               (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
               (val:string) => val.length >= 10 || `${'กรุณากรอกข้อมูลเบอร์โทรให้ครบ'}`,
@@ -903,90 +615,8 @@ const getClass = (val: boolean) => {
             :label="`${'เบอร์โทร'}`"
             mask="##########"
           />
-        </div> -->
-        <div
-          class="col-xs-6 col-sm-4 col-md-4"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <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="informaData.employeeType"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeTypeOps"
-            option-value="id"
-            :label="`${'ประเภทการจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
-                      ) "
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-2 col-md-2"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <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="informaData.employeeClass"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeClassOps"
-            option-value="id"
-            :label="`${'ประเภทลูกจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-          />
         </div>
       </div>
     </q-form>
   </q-card>
-  <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 == 'birthDate' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/layout.vue b/src/modules/05_placement/components/PersonalDetail/Information/layout.vue
index 380c339d4..c26230556 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/layout.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/layout.vue
@@ -43,7 +43,6 @@ const notiNoEdit = () => {
 const closeModalError = () => {
   modalNoEdit.value = false;
 };
-
 </script>
 <template>
   <div class="row col-12 items-center">
@@ -51,7 +50,7 @@ const closeModalError = () => {
       <Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
     </div>
 
-    <div class="col-12 q-px-md"><q-separator size="4px"/></div>
+    <div class="col-12 q-px-md"><q-separator size="4px" /></div>
 
     <div>
       <Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
@@ -60,7 +59,7 @@ const closeModalError = () => {
 </template>
 <style lang="scss" scoped>
 .horizontal-line {
-  background-color: #F4F4F4;
+  background-color: #f4f4f4;
   height: 5px;
 }
 </style>
diff --git a/src/modules/05_placement/components/PersonalDetail/Qualification.vue b/src/modules/05_placement/components/PersonalDetail/Qualification.vue
index 778ad5c4d..6ba5f8f09 100644
--- a/src/modules/05_placement/components/PersonalDetail/Qualification.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Qualification.vue
@@ -1,46 +1,69 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
-import type { QForm } from 'quasar';
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+
 import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { PropType } from "vue";
+import type { Property } from "@/modules/05_placement/interface/index/Main";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  modalError,
-} = mixin;
+const route = useRoute();
+const { showLoader, hideLoader, messageError, success } = mixin;
 
 const props = defineProps({
   statusEdit: {
     type: Boolean,
     required: true,
   },
-  notiNoEdit: {
+  data: {
+    type: Array as PropType<Property[]>,
+    default: [],
+  },
+  fetch: {
     type: Function,
     default: () => console.log("not function"),
   },
 });
-const emit = defineEmits(["update:statusEdit"]);
+const emit = defineEmits(["update:statusEdit", "update:data"]);
 
 const edit = ref<boolean>(false);
-const myform = ref<QForm | null>(null);
+
+onMounted(() => {
+  emit("update:statusEdit", false);
+});
+
 const saveData = async () => {
-  if (myform.value != null) {
-    await myform.value.validate().then(async (success: boolean) => {
-      if (success) {
-        await editData();
-      } else {
-      }
+  showLoader();
+  await http
+    .put(
+      config.API.placementPropertyId(route.params.personalId.toString()),
+      props.data
+    )
+    .then((res: any) => {
+      success($q, "แก้ไขข้อมูลสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await props.fetch();
+      edit.value = false;
+      hideLoader();
+      changeBtn();
     });
-  }
 };
 
 const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
       edit.value = false;
-      props.notiNoEdit();
     } else {
       emit("update:statusEdit", true);
     }
@@ -49,43 +72,34 @@ const changeBtn = async () => {
   }
 };
 
-const editData = async () => {
-  modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
-}
-
 const onCancel = async () => {
-  if (myform.value != null) {
-    myform.value.reset();
-  }
-  //   await fetchData();
+  await props.fetch();
 };
-
-
-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: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
-]
 </script>
 <template>
   <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" />
+    <HeaderTop
+      v-model:edit="edit"
+      header="การคัดกรองคุณสมบัติ"
+      icon="mdi-account-search"
+      :save="saveData"
+      :history="false"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="onCancel"
+    />
   </div>
   <div class="row q-px-lg">
-    <div v-for="item of checkboxItems" :key="item.id" class="col-12 q-pt-sm">
-      <q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="gray-5"
-        :disable="!statusEdit" />
+    <div v-for="item of props.data" :key="item.name" class="col-12 q-pt-sm">
+      <q-checkbox
+        size="xs"
+        v-model="item.value"
+        :label="item.name"
+        keep-color
+        color="gray-5"
+        :disable="!statusEdit"
+      />
       <q-separator />
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/PersonalDetail/profileType.ts b/src/modules/05_placement/components/PersonalDetail/profileType.ts
index 9ba368651..1e8e1ee75 100644
--- a/src/modules/05_placement/components/PersonalDetail/profileType.ts
+++ b/src/modules/05_placement/components/PersonalDetail/profileType.ts
@@ -8,23 +8,25 @@ interface ChangeActive {
 
 //ข้อมูลส่วนตัว
 interface Information {
-  cardid: string | null;
+  idCard: string | null;
   prefix: string | null;
-  age: string | null;
   prefixId: string | null;
+  fullName: string | null;
   firstname: string | null;
   lastname: string | null;
-  birthDate: Date;
-  genderId: string | null;
-  bloodId: string | null;
   nationality: string | null;
-  ethnicity: string | null;
-  statusId: string | null;
+  race: string | null;
+  dateOfBirth: Date | null;
+  age: string | null;
+  telephone: string | null;
+  gender: string | null;
+  genderId: string | null;
+  relationship: string | null;
+  relationshipId: string | null;
+  bloodGroup: string | null;
+  bloodGroupId: string | null;
+  religion: string | null;
   religionId: string | null;
-  tel: string | null;
-  employeeType: string | null;
-  employeeClass: string | null;
-  profileType: string | null;
 }
 
 interface Family {
@@ -119,23 +121,25 @@ const defaultAddress: Address = {
 };
 
 const defaultInformation: Information = {
-  cardid: null,
-  age: null,
+  idCard: null,
   prefix: null,
   prefixId: null,
+  fullName: null,
   firstname: null,
   lastname: null,
-  birthDate: new Date(),
-  genderId: null,
-  bloodId: null,
   nationality: null,
-  ethnicity: null,
-  statusId: null,
+  race: null,
+  dateOfBirth: new Date(),
+  age: null,
+  telephone: null,
+  gender: null,
+  genderId: null,
+  relationship: null,
+  relationshipId: null,
+  bloodGroup: null,
+  bloodGroupId: null,
+  religion: null,
   religionId: null,
-  tel: null,
-  employeeType: null,
-  employeeClass: null,
-  profileType: null,
 };
 
 const defaultFamily: Family = {
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index e4cbf2fdd..ab390e580 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -164,7 +164,7 @@ const fetchPosition = async () => {
       });
       // positionLevelOptionsFilter.value = optionPositionLevels;
     })
-    .catch((e: any) => { })
+    .catch((e: any) => {})
     .finally(() => {
       hideLoader();
     });
@@ -300,7 +300,7 @@ const selectData = (props: TableName) => {
   if (roleAdmin.value === true) {
     modal.value = true;
   } else {
-    router.push("/placement/detail/08db7322-5712-4626-8a76-e2d28cd1a13b");
+    router.push("/placement/detail/0a846508-4932-40de-9a9e-5b519492217c");
   }
 };
 const onSelected = async (id: string) => {
@@ -356,15 +356,15 @@ const editDetail = (
 };
 placementData.mappingPosition.columns.length == 0
   ? (visibleColumns.value = [
-    "position",
-    "Name",
-    "ExamOrder",
-    "Unit",
-    "ReportingDate",
-    "BMAOfficer",
-    "Status",
-    "checkList",
-  ])
+      "position",
+      "Name",
+      "ExamOrder",
+      "Unit",
+      "ReportingDate",
+      "BMAOfficer",
+      "Status",
+      "checkList",
+    ])
   : (visibleColumns.value = placementData.mappingPosition.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -1023,9 +1023,7 @@ const save = () => {
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-    console.log("roleAdmin===>", roleAdmin)
-
-
+    console.log("roleAdmin===>", roleAdmin);
   }
 
   await fetchPosition();
@@ -1077,27 +1075,53 @@ const listKeyId = (data: any) => {
 
 const expiredAccount = ref<boolean>(false);
 
-
 watch(expiredAccount, () => {
   console.log("expiredAccount===>", expiredAccount.value);
 });
 </script>
 <template>
   <!-- <q-form ref="myForm"> -->
-  <Table :expired-account="expiredAccount" :rows="rows" :columns="columns" :filter="filter"
-    :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
-    v-model:editvisible="editvisible" v-model:expiredaccountfilter="expiredAccount" :history="true" :boss="true"
-    :saveNoDraft="true" :add="save" :role-admin="roleAdmin">
+  <Table
+    :expired-account="expiredAccount"
+    :rows="rows"
+    :columns="columns"
+    :filter="filter"
+    :visible-columns="visibleColumns"
+    v-model:inputfilter="filter"
+    v-model:inputvisible="visibleColumns"
+    v-model:editvisible="editvisible"
+    v-model:expiredaccountfilter="expiredAccount"
+    :history="true"
+    :boss="true"
+    :saveNoDraft="true"
+    :add="save"
+    :role-admin="roleAdmin"
+  >
     <template #columns="props">
       <q-tr :props="props">
-        <q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
+        <q-icon
+          class="q-mr-sm"
+          size="15px"
+          color="primary"
+          name="mdi-bookmark"
+          v-if="props.row.isDirector"
+        ></q-icon>
 
-        <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
-          class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.name"
+          :props="props"
+          @click="selectData(props.row)"
+          class="cursor-pointer"
+        >
           <div v-if="col.name == 'Name'" class="table_ellipsis">
             {{ col.value }}
             <div class="row col-12 text-no-wrap items-center">
-              <img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
+              <img
+                v-if="props.row.avatar == null"
+                src="@/assets/avatar_user.jpg"
+                class="col-4 img-info"
+              />
               <img v-else :src="props.row.avatar" class="col-4 img-info" />
               <div class="col-4">
                 <div class="text-weight-medium">
@@ -1110,9 +1134,12 @@ watch(expiredAccount, () => {
             </div>
           </div>
           <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
-            <div v-if="props.row.Status == 'ยังไม่บรรจุ' ||
-              props.row.Status == 'สละสิทธิ์'
-              ">
+            <div
+              v-if="
+                props.row.Status == 'ยังไม่บรรจุ' ||
+                props.row.Status == 'สละสิทธิ์'
+              "
+            >
               -
             </div>
             <div v-else>
@@ -1120,7 +1147,10 @@ watch(expiredAccount, () => {
               <p>{{ col.value }}</p>
             </div>
           </div>
-          <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
+          <div
+            v-else-if="col.name == 'ReportingDate' && col.value != '-'"
+            class="table_ellipsis"
+          >
             {{ mixin.date2Thai(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
@@ -1128,39 +1158,86 @@ watch(expiredAccount, () => {
           </div>
         </q-td>
         <q-td auto-width>
-          <q-btn v-if="props.row.Status !== 'สละสิทธิ์' &&
-            props.row.Status !== 'บรรจุเเล้ว'
-            " icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
+          <q-btn
+            v-if="
+              props.row.Status !== 'สละสิทธิ์' &&
+              props.row.Status !== 'บรรจุเเล้ว'
+            "
+            icon="mdi-dots-vertical"
+            size="12px"
+            color="grey-7"
+            flat
+            round
+            dense
+          >
             <q-menu transition-show="jump-down" transition-hide="jump-up">
               <q-list dense style="min-width: 100px">
-                <q-item v-if="roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'" clickable v-close-popup
-                  @click="openAppointModal">
+                <q-item
+                  v-if="
+                    roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'
+                  "
+                  clickable
+                  v-close-popup
+                  @click="openAppointModal"
+                >
                   <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                    <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
+                    <q-icon
+                      color="primary"
+                      size="xs"
+                      name="mdi-bookmark-outline"
+                    />
                   </q-item-section>
                   <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
                 </q-item>
                 <q-separator />
-                <q-item v-if="roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'" clickable v-close-popup
-                  @click="editDetail(props.row, 'wait')">
+                <q-item
+                  v-if="
+                    roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'
+                  "
+                  clickable
+                  v-close-popup
+                  @click="editDetail(props.row, 'wait')"
+                >
                   <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                    <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
+                    <q-icon
+                      color="blue"
+                      size="xs"
+                      name="mdi-account-alert-outline"
+                    />
                   </q-item-section>
                   <q-item-section>ขอผ่อนผัน</q-item-section>
                 </q-item>
-                <q-item v-else-if="props.row.Status === 'ขอผ่อนผัน'" clickable v-close-popup
-                  @click="editDetail(props.row, 'waitInfo')">
+                <q-item
+                  v-else-if="props.row.Status === 'ขอผ่อนผัน'"
+                  clickable
+                  v-close-popup
+                  @click="editDetail(props.row, 'waitInfo')"
+                >
                   <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                    <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
+                    <q-icon
+                      color="blue"
+                      size="xs"
+                      name="mdi-account-details-outline"
+                    />
                   </q-item-section>
                   <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
                 </q-item>
                 <q-separator />
-                <q-item v-if="props.row.Status === 'ยังไม่บรรจุ' ||
-                  props.row.Status === 'เตรียมบรรจุ'
-                  " clickable v-close-popup @click="editDetail(props.row, 'cancel')">
+                <q-item
+                  v-if="
+                    props.row.Status === 'ยังไม่บรรจุ' ||
+                    props.row.Status === 'เตรียมบรรจุ'
+                  "
+                  clickable
+                  v-close-popup
+                  @click="editDetail(props.row, 'cancel')"
+                >
                   <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                    <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
+                    <q-icon
+                      color="pink"
+                      size="xs"
+                      name="mdi-account-cancel-outline"
+                    />
                   </q-item-section>
                   <q-item-section>สละสิทธิ์</q-item-section>
                 </q-item>
@@ -1183,25 +1260,50 @@ watch(expiredAccount, () => {
             <div class="col-xs-12 col-sm-6 row">
               <q-card flat bordered class="fit q-pa-sm">
                 <q-scroll-area visible style="height: 70vh">
-                  <q-input outlined dense v-model="search" placeholder="ค้นหา" class="q-mb-sm">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
                     <template v-slot:append>
                       <q-icon name="mdi-magnify" />
                     </template>
                   </q-input>
-                  <q-tree no-transition ref="qtreeEdit" :nodes="nodesTree" node-key="keyId" @lazy-load="onLazyLoad" dense>
+                  <q-tree
+                    no-transition
+                    ref="qtreeEdit"
+                    :nodes="nodesTree"
+                    node-key="keyId"
+                    @lazy-load="onLazyLoad"
+                    dense
+                  >
                     <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
                     <template v-slot:header-organization="prop">
                       <div class="col">
-                        <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+                        <div
+                          class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                        >
                           <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
                           <div class="text-weight-medium">
                             {{ prop.node.organizationName }}
                           </div>
 
                           <!--แสดง Total Count PositionNum-->
-                          <q-badge rounded color="grey-2" text-color="dark" :label="prop.node.totalPositionCount" />
-                          <q-badge v-if="prop.node.totalPositionVacant > 0" rounded color="red" outline
-                            :label="prop.node.totalPositionVacant" />
+                          <q-badge
+                            rounded
+                            color="grey-2"
+                            text-color="dark"
+                            :label="prop.node.totalPositionCount"
+                          />
+                          <q-badge
+                            v-if="prop.node.totalPositionVacant > 0"
+                            rounded
+                            color="red"
+                            outline
+                            :label="prop.node.totalPositionVacant"
+                          />
 
                           <q-space />
                         </div>
@@ -1214,31 +1316,51 @@ watch(expiredAccount, () => {
                       </div>
                     </template>
                     <template v-slot:header-person="prop">
-                      <q-item clickable :active="clickAction === prop.node.keyId" @click="
-                        clickAction =
-                        prop.node.name == `ว่าง` ||
+                      <q-item
+                        clickable
+                        :active="clickAction === prop.node.keyId"
+                        @click="
+                          clickAction =
+                            prop.node.name == `ว่าง` ||
+                            prop.node.name == `N/A` ||
+                            prop.node.name == null
+                              ? listKeyId(prop)
+                              : ''
+                        "
+                        active-class="my-list-link text-primary text-weight-medium"
+                        :class="
+                          prop.node.name == `ว่าง` ||
                           prop.node.name == `N/A` ||
                           prop.node.name == null
-                          ? listKeyId(prop)
-                          : ''
-                        " active-class="my-list-link text-primary text-weight-medium" :class="prop.node.name == `ว่าง` ||
-      prop.node.name == `N/A` ||
-      prop.node.name == null
-      ? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
-      : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
-    ">
-                        <img v-if="prop.node.avatar == '' ||
-                          prop.node.avatar ==
-                          'https://cdn.quasar.dev/img/boy-avatar.png'
-                          " src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%" />
-                        <img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%" />
+                            ? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
+                            : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
+                        "
+                      >
+                        <img
+                          v-if="
+                            prop.node.avatar == '' ||
+                            prop.node.avatar ==
+                              'https://cdn.quasar.dev/img/boy-avatar.png'
+                          "
+                          src="@/assets/avatar_user.jpg"
+                          class="col-xs-1 col-sm-2"
+                          style="width: 28px; height: 28px; border-radius: 50%"
+                        />
+                        <img
+                          v-else
+                          :src="prop.node.avatar"
+                          class="col-xs-1 col-sm-2"
+                          style="width: 28px; height: 28px; border-radius: 50%"
+                        />
                         <!--=====ตำแหน่งว่าง สีแดง=====-->
-                        <div v-if="prop.node.name == `ว่าง` ||
-                          prop.node.name == `N/A` ||
-                          prop.node.name == null
-                          " class="q-px-sm text-weight-medium text-red">
+                        <div
+                          v-if="
+                            prop.node.name == `ว่าง` ||
+                            prop.node.name == `N/A` ||
+                            prop.node.name == null
+                          "
+                          class="q-px-sm text-weight-medium text-red"
+                        >
                           ว่าง
                         </div>
                         <!--=====หัวหน้า สีเขียว=====-->
@@ -1263,8 +1385,13 @@ watch(expiredAccount, () => {
                         <div class="q-pr-sm">
                           {{ prop.node.positionLevel }}
                         </div>
-                        <q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px" color="primary"
-                          name="mdi-bookmark"></q-icon>
+                        <q-icon
+                          v-if="prop.node.positionLeaderFlag"
+                          class="q-mr-sm"
+                          size="15px"
+                          color="primary"
+                          name="mdi-bookmark"
+                        ></q-icon>
 
                         <q-space />
                       </q-item>
@@ -1279,24 +1406,46 @@ watch(expiredAccount, () => {
                   <div class="row col-12 q-col-gutter-xs">
                     <div class="col-xs-12 col-sm-12 col-md-12"></div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
-                        :enableTimePicker="false" @update:modelValue="clickEditRow" week-start="0">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :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(date)" :rules="[
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
                               (val: string) =>
                                 !!val ||
                                 `${'วันที่รายงานตัว'}`,
-                            ]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
+                            ]"
+                            :label="`${'วันที่รายงานตัว'}`"
+                            hide-bottom-space
+                          >
                             <template v-slot:prepend>
-                              <q-icon name="event" class="cursor-pointer" :style="edit
-                                  ? 'color: var(--q-primary)'
-                                  : 'color: var(--q-grey)'
-                                ">
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                :style="
+                                  edit
+                                    ? 'color: var(--q-primary)'
+                                    : 'color: var(--q-grey)'
+                                "
+                              >
                               </q-icon>
                             </template>
                           </q-input>
@@ -1305,58 +1454,145 @@ watch(expiredAccount, () => {
                     </div>
                     <q-space />
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input disable standout readonly class="custom-input" dense lazy-rules v-model="posNoId"
-                        :label="`${'เลขที่ตำแหน่ง'}`" />
+                      <q-input
+                        disable
+                        standout
+                        readonly
+                        class="custom-input"
+                        dense
+                        lazy-rules
+                        v-model="posNoId"
+                        :label="`${'เลขที่ตำแหน่ง'}`"
+                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionId"
-                        :label="`${'ตำแหน่ง'}`" />
+                      <q-input
+                        disable
+                        readonly
+                        class="custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        v-model="positionId"
+                        :label="`${'ตำแหน่ง'}`"
+                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-select :class="getClass(edit)" :outlined="edit" :readonly="!edit" class="custom-input" standout
-                        dense hide-bottom-space lazy-rules v-model="positionPathSideId"
-                        :rules="[(val: string) => !!val || `${'ด้าน/สาขา'}`]" :label="`${'ด้าน/สาขา'}`" />
+                      <q-select
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        :readonly="!edit"
+                        class="custom-input"
+                        standout
+                        dense
+                        hide-bottom-space
+                        lazy-rules
+                        v-model="positionPathSideId"
+                        :rules="[(val: string) => !!val || `${'ด้าน/สาขา'}`]"
+                        :label="`${'ด้าน/สาขา'}`"
+                      />
                     </div>
                     <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
 
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`" />
+                      <q-input
+                        disable
+                        readonly
+                        class="custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        v-model="positionTypeId"
+                        :label="`${'ประเภทตำแหน่ง'}`"
+                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionLineId"
-                        :label="`${'สายงาน'}`" />
+                      <q-input
+                        disable
+                        readonly
+                        class="custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        v-model="positionLineId"
+                        :label="`${'สายงาน'}`"
+                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-select :class="getClass(edit)" :outlined="edit" :readonly="!edit" class="custom-input" standout
-                        dense lazy-rules :options="positionLevelOptions" v-model="positionLevelId" :label="`${'ระดับ'}`"
-                        hide-bottom-space :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value
-                        map-options />
+                      <q-select
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        :readonly="!edit"
+                        class="custom-input"
+                        standout
+                        dense
+                        lazy-rules
+                        :options="positionLevelOptions"
+                        v-model="positionLevelId"
+                        :label="`${'ระดับ'}`"
+                        hide-bottom-space
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                        emit-value
+                        map-options
+                      />
                     </div>
                     <div class="col-sx-12 col-sm-12 col-md-12">
                       <q-separator inset size="2px" class="q-my-md" />
                     </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="amount" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number" hide-bottom-space />
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                        :label="`${'เงินเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        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="positionSalaryAmount" :rules="[
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="positionSalaryAmount"
+                        :rules="[
                           (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]" :label="`${'เงินประจำตำแหน่ง'}`" @update:modelValue="clickEditRow" type="number"
-                        hide-bottom-space />
+                        ]"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        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="mouthSalaryAmount" :rules="[
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="mouthSalaryAmount"
+                        :rules="[
                           (val) =>
                             !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                        ]" :label="`${'เงินค่าตอบแทนรายเดือน'}`" @update:modelValue="clickEditRow" type="number"
-                        hide-bottom-space />
+                        ]"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
                     </div>
                   </div>
                 </q-scroll-area>
@@ -1366,29 +1602,59 @@ watch(expiredAccount, () => {
         </q-card-section>
 
         <q-separator />
-        <DialogFooter v-model:editvisible="edit" :validate="validateData" v-model:modalEdit="modalEdit"
-          :save="saveAppoint" />
+        <DialogFooter
+          v-model:editvisible="edit"
+          :validate="validateData"
+          v-model:modalEdit="modalEdit"
+          :save="saveAppoint"
+        />
       </q-form>
     </q-card>
   </q-dialog>
   <q-form ref="myForm">
-    <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" :validate="validateData" />
+    <DialogCard
+      v-model:Modal="modal"
+      :getdetail="itemtest"
+      :close="clickClose"
+      :validate="validateData"
+    />
   </q-form>
   <q-dialog v-model="modal_right" persistent>
     <q-card style="width: 800px">
-
       <q-form ref="myForm">
-        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
+        <DialogHeader
+          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="col-xs-12 col-sm-12 col-md-12">
-            <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
-              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit"
-              v-model="positionMasterUserNote" :label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow"
-              type="textarea" />
-            <q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
-              use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
-              @update:model-value="clickEditRow" class="q-py-sm">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="positionMasterUserNote"
+              :label="`${'กรอกเหตุผล'}`"
+              @update:model-value="clickEditRow"
+              type="textarea"
+            />
+            <q-file
+              v-if="getNumFile === 1"
+              v-model="files"
+              dense
+              :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
+              outlined
+              use-chips
+              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
+              multiple
+              @update:model-value="clickEditRow"
+              class="q-py-sm"
+            >
               <template v-slot:prepend>
                 <q-icon name="attach_file" color="primary" />
               </template>
@@ -1396,8 +1662,12 @@ watch(expiredAccount, () => {
           </div>
         </q-card-section>
         <q-separator />
-        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :validate="validateData"
-          :save="modalEdit ? savePostpone : saveDisclaim" />
+        <DialogFooter
+          v-model:editvisible="edit"
+          v-model:modalEdit="modalEdit"
+          :validate="validateData"
+          :save="modalEdit ? savePostpone : saveDisclaim"
+        />
       </q-form>
     </q-card>
   </q-dialog>
@@ -1406,7 +1676,10 @@ watch(expiredAccount, () => {
   <q-dialog v-model="modalwaitInfo" persistent>
     <q-card style="width: 500px; max-width: 500px">
       <q-form ref="myForm">
-        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
+        <DialogHeader
+          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row">
@@ -1416,7 +1689,14 @@ watch(expiredAccount, () => {
           <div class="row q-pt-md">
             <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
             <div class="col-2 q-mt-sm">กรอกเหตุผล</div>
-            <q-btn color="primary" flat dense round size="14px" icon="mdi-download" />
+            <q-btn
+              color="primary"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-download"
+            />
           </div>
         </q-card-section>
         <q-separator />
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 1e46a9961..fec5586a0 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -53,6 +53,82 @@ interface CheckboxItem {
   label: string;
 }
 
+interface Property {
+  name: string;
+  value: boolean;
+}
+
+interface PointExam {
+  pointA: number;
+  pointB: number;
+  pointC: number;
+  pointTotalA: number;
+  pointTotalB: number;
+  pointTotalC: number;
+  point: number;
+  pointTotal: number;
+  examNumber: number;
+  examRound: number;
+  pass: string | null;
+}
+
+interface Education {
+  id: string;
+  educationLevel: string;
+  institute: string;
+  degree: string;
+  field: string;
+  gpa: string;
+  country: string;
+  duration: string;
+  other: string;
+  fundName: string;
+  durationYear: number;
+  finishDate: Date;
+  isDate: string;
+  startDate: number;
+  endDate: number;
+  positionPath: string;
+  isEducation: string;
+}
+
+interface Family {
+  couple: boolean;
+  marryPrefix: string;
+  marryPrefixId: string;
+  marryFirstName: string;
+  marryLastName: string;
+  marryOccupation: string;
+  fatherPrefix: string;
+  fatherPrefixId: string;
+  fatherFirstName: string;
+  fatherLastName: string;
+  fatherOccupation: string;
+  motherPrefix: string;
+  motherPrefixId: string;
+  motherFirstName: string;
+  motherLastName: string;
+  motherOccupation: string;
+}
+
+interface Address {
+  registSubDistrict: string;
+  registSubDistrictId: string;
+  registZipCode: string;
+  registDistrict: string;
+  registDistrictId: string;
+  registProvince: string;
+  registProvinceId: string;
+  currentSubDistrict: string;
+  currentSubDistrictId: string;
+  currentZipCode: string;
+  currentDistrict: string;
+  currentDistrictId: string;
+  currentProvince: string;
+  currentProvinceId: string;
+  registSame: boolean;
+}
+
 export type {
   DataOption,
   DataOptionInsignia,
@@ -63,4 +139,9 @@ export type {
   EduOps,
   InsigniaOps,
   CheckboxItem,
+  Property,
+  PointExam,
+  Education,
+  Family,
+  Address,
 };