diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 306bdee6b..d655ad806 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -1,5 +1,6 @@
 import env from "../index";
-const placement = `${env.API_PLACEMENT_URI}/Placement/placement`;
+// const placement = `${env.API_PLACEMENT_URI}/placement`;
+const placement = `${env.API_URI}/placement`;
 const orgTree = `${env.API_URI_ORG_TREE}`;
 
 export default {
diff --git a/src/api/index.ts b/src/api/index.ts
index 9ba34e3bc..e02e135df 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -20,7 +20,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",
+    API_PLACEMENT_URI: "https://localhost:7260/api/v1",
     API_URI_ORG_TREE:
       "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
diff --git a/src/modules/05_placement/components/PersonalDetail/Detail.vue b/src/modules/05_placement/components/PersonalDetail/Detail.vue
index c68167ce6..7f55d64d1 100644
--- a/src/modules/05_placement/components/PersonalDetail/Detail.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Detail.vue
@@ -17,6 +17,11 @@ import ExamResult from "@/modules/05_placement/components/PersonalDetail/ExamRes
 import Qualification from "@/modules/05_placement/components/PersonalDetail/Qualification.vue";
 import Familyvue from "@/modules/05_placement/components/PersonalDetail/Information/Family.vue";
 
+import {
+  AddressDataDefualt,
+  FamilyDataDefualt,
+} from "@/modules/05_placement/interface/index/Main";
+
 import type {
   Property,
   PointExam,
@@ -77,43 +82,6 @@ const InformationDataDefualt: Information = {
   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: "",
@@ -157,7 +125,9 @@ const fetchData = async () => {
       InformationData.value.age = data.age;
       InformationData.value.telephone = data.telephone;
 
-      AddressData.value.registSame = data.registSame ?? false;
+      AddressData.value.registAddress = data.registAddress ?? "";
+      AddressData.value.currentAddress = data.currentAddress ?? "";
+      AddressData.value.registSame = data.registSame ? "1" : "0";
       AddressData.value.registSubDistrict = data.registSubDistrict ?? "";
       AddressData.value.registSubDistrictId = data.registSubDistrictId ?? "";
       AddressData.value.registZipCode = data.registZipCode ?? "";
@@ -173,7 +143,7 @@ const fetchData = async () => {
       AddressData.value.currentProvince = data.currentProvince ?? "";
       AddressData.value.currentProvinceId = data.currentProvinceId ?? "";
 
-      FamilyData.value.couple = data.couple ?? false;
+      FamilyData.value.couple = data.couple ? "1" : "0";
       FamilyData.value.marryPrefix = data.marryPrefix ?? "";
       FamilyData.value.marryPrefixId = data.marryPrefixId ?? "";
       FamilyData.value.marryFirstName = data.marryFirstName ?? "";
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
index e5afc189b..00c482ab1 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
@@ -2,19 +2,13 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type {
-  Address,
-  zipCodeOption,
-} from "@/modules/05_placement/components/PersonalDetail/profileType";
-import { defaultAddress } from "@/modules/05_placement/components/PersonalDetail/profileType";
+import type { zipCodeOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
+
 import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
-import type { RequestItemsHistoryObject } from "@/modules//05_placement/interface/request/Address";
-import type { ResponseObject } from "@/modules//05_placement/interface/response/Address";
-import HistoryTable from "@/components/TableHistory.vue";
+
 import { useRoute } from "vue-router";
 import { AddressDataDefualt } from "@/modules//05_placement/interface/index/Main";
 
@@ -23,7 +17,6 @@ import type {
   Address as AddressType,
   optionData,
 } from "@/modules//05_placement/interface/index/Main";
-import type { QTableProps } from "quasar";
 import type { PropType } from "vue";
 
 const props = defineProps({
@@ -48,19 +41,13 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
 const edit = ref<boolean>(false);
-const addressData = ref<Address>(defaultAddress);
+const addressData = ref<AddressType>(props.data);
 const myform = ref<any>();
 const codep = ref<string>("");
 const codec = ref<string>("");
-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 Ops = ref<AddressOps>({
   provinceOps: [],
   districtOps: [],
@@ -75,169 +62,9 @@ const OpsFilter = ref<AddressOps>({
   subdistrictOps: [],
   subdistrictCOps: [],
 });
-const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "registrationAddress",
-    align: "left",
-    label: "ที่อยู่ตามทะเบียนบ้าน",
-    sortable: true,
-    field: "registrationAddress",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "registrationProvince",
-    align: "left",
-    label: "จังหวัดตามทะเบียนบ้าน",
-    sortable: true,
-    field: "registrationProvince",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "registrationDistrict",
-    align: "left",
-    label: "เขต/อำเภอตามทะเบียนบ้าน",
-    sortable: true,
-    field: "registrationDistrict",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "registrationSubDistrict",
-    align: "left",
-    label: "ตำบล/แขวงตามทะเบียนบ้าน",
-    sortable: true,
-    field: "registrationSubDistrict",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "registrationZipCode",
-    align: "left",
-    label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
-    sortable: true,
-    field: "registrationZipCode",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "registrationSame",
-    align: "left",
-    label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
-    sortable: true,
-    field: "registrationSame",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "currentAddress",
-    align: "left",
-    label: "ที่อยู่ปัจจุบัน",
-    sortable: true,
-    field: "currentAddress",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "currentProvince",
-    align: "left",
-    label: "จังหวัดปัจจุบัน",
-    sortable: true,
-    field: "currentProvince",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "currentDistrict",
-    align: "left",
-    label: "เขต/อำเภอปัจจุบัน",
-    sortable: true,
-    field: "currentDistrict",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "currentSubDistrict",
-    align: "left",
-    label: "ตำบล/แขวงปัจจุบัน",
-    sortable: true,
-    field: "currentSubDistrict",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "currentZipCode",
-    align: "left",
-    label: "รหัสไปรษณีย์ปัจจุบัน",
-    sortable: true,
-    field: "currentZipCode",
-    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[]>([
-  "currentAddress",
-  "currentDistrict",
-  "currentProvince",
-  "currentSubDistrict",
-  "currentZipCode",
-  "registrationAddress",
-  "registrationDistrict",
-  "registrationProvince",
-  "registrationSame",
-  "registrationSubDistrict",
-  "registrationZipCode",
-  "createdFullName",
-  "createdAt",
-]);
 
 onMounted(async () => {
-  // await getNewData();
+  await getNewData();
   emit("update:statusEdit", false);
 });
 
@@ -284,145 +111,85 @@ const filterSelector = (val: any, update: Function, refData: string) => {
   }
 };
 
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- */
-const clickHistory = async () => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileAdrsHisId(route.params.id.toString()))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: RequestItemsHistoryObject) => {
-        rowsHistory.value.push({
-          currentAddress: e.currentAddress,
-          currentDistrict: e.currentDistrict,
-          currentProvince: e.currentProvince,
-          currentSubDistrict: e.currentSubDistrict,
-          currentZipCode: e.currentZipCode,
-          registrationSame: e.registrationSame,
-          registrationAddress: e.registrationAddress,
-          registrationDistrict: e.registrationDistrict,
-          registrationProvince: e.registrationProvince,
-          registrationSubDistrict: e.registrationSubDistrict,
-          registrationZipCode: e.registrationZipCode,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
 const refreshData = async () => {
   myform.value.reset();
   await getNewData();
 };
 
 const getNewData = async () => {
-  await fetchData();
+  await props.fetch();
   await fetchProvince();
-  await fetchDistrict(addressData.value.provinceId, "1");
-  await fetchDistrict(addressData.value.provinceIdC, "2");
-  await fetchSubDistrict(addressData.value.districtId, "1");
-  await fetchSubDistrict(addressData.value.districtIdC, "2");
-  await selectSubDistrict(addressData.value.subdistrictId, "1");
-  await selectSubDistrict(addressData.value.subdistrictIdC, "2");
+  await fetchDistrict(addressData.value.registProvinceId, "1");
+  await fetchDistrict(addressData.value.currentProvinceId, "2");
+  await fetchSubDistrict(addressData.value.registDistrictId, "1");
+  await fetchSubDistrict(addressData.value.currentDistrictId, "2");
+  await selectSubDistrict(addressData.value.registSubDistrictId, "1");
+  await selectSubDistrict(addressData.value.currentSubDistrictId, "2");
 };
 
-const fetchData = async () => {
+const editData = async () => {
+  const body = {
+    registrationSame: addressData.value.registSame == "1",
+    registrationAddress: addressData.value.registAddress,
+    registrationSubDistrictId: addressData.value.registSubDistrictId,
+    registrationDistrictId: addressData.value.registDistrictId,
+    registrationProvinceId: addressData.value.registProvinceId,
+    registrationZipCode: codep.value,
+    currentAddress:
+      addressData.value.registSame == "1"
+        ? addressData.value.registAddress
+        : addressData.value.currentAddress,
+    currentSubDistrictId:
+      addressData.value.registSame == "1"
+        ? addressData.value.registSubDistrictId
+        : addressData.value.currentSubDistrictId,
+    currentDistrictId:
+      addressData.value.registSame == "1"
+        ? addressData.value.registDistrict
+        : addressData.value.currentDistrictId,
+    currentProvinceId:
+      addressData.value.registSame == "1"
+        ? addressData.value.registProvinceId
+        : addressData.value.currentProvinceId,
+    currentZipCode:
+      addressData.value.registSame == "1" ? codep.value : codec.value,
+  };
   showLoader();
   await http
-    .get(config.API.profileAdrsId(route.params.id.toString()))
+    .put(
+      config.API.placementAddressId(route.params.personalId.toString()),
+      body
+    )
     .then((res) => {
-      const data: ResponseObject = res.data.result;
-      addressData.value.address = data.registrationAddress;
-      addressData.value.addressC = data.currentAddress;
-      addressData.value.districtId = data.registrationDistrictId;
-      addressData.value.districtIdC = data.currentDistrictId;
-      addressData.value.provinceId = data.registrationProvinceId;
-      addressData.value.provinceIdC = data.currentProvinceId;
-      addressData.value.subdistrictId = data.registrationSubDistrictId;
-      addressData.value.subdistrictIdC = data.currentSubDistrictId;
-      addressData.value.same = data.registrationSame ? "1" : "0";
+      success($q, "แก้ไขข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await getNewData();
     });
 };
 
-const editData = async () => {
-  // const body: ResponseObject = {
-  //   registrationSame: addressData.value.same == "1",
-  //   registrationAddress: addressData.value.address,
-  //   registrationSubDistrictId: addressData.value.subdistrictId,
-  //   registrationDistrictId: addressData.value.districtId,
-  //   registrationProvinceId: addressData.value.provinceId,
-  //   registrationZipCode: codep.value,
-  //   currentAddress:
-  //     addressData.value.same == "1"
-  //       ? addressData.value.address
-  //       : addressData.value.addressC,
-  //   currentSubDistrictId:
-  //     addressData.value.same == "1"
-  //       ? addressData.value.subdistrictId
-  //       : addressData.value.subdistrictIdC,
-  //   currentDistrictId:
-  //     addressData.value.same == "1"
-  //       ? addressData.value.districtId
-  //       : addressData.value.districtIdC,
-  //   currentProvinceId:
-  //     addressData.value.same == "1"
-  //       ? addressData.value.provinceId
-  //       : addressData.value.provinceIdC,
-  //   currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
-  //   createdAt: new Date(),
-  //   createdFullName: "-",
-  // };
-  // showLoader();
-  // await http
-  //   .put(config.API.profileAdrsId(route.params.id.toString()), body)
-  //   .then((res) => {
-  //     success($q, "บันทึกข้อมูลสำเร็จ");
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //     edit.value = false;
-  //     emit("update:statusEdit", false);
-  //     await getNewData();
-  //   });
-};
-
 const saveData = async () => {
-  // await myform.value.validate().then(async (success: boolean) => {
-  //   if (success) {
-  //     await editData();
-  //   } else {
-  //   }
-  // });
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+      await editData();
+    }
+  });
 };
 
 const selectProvince = async (e: string | null, name: string) => {
   if (e != null) {
     if (name == "1") {
-      addressData.value.districtId = "";
-      addressData.value.subdistrictId = "";
+      addressData.value.registDistrictId = "";
+      addressData.value.registSubDistrictId = "";
       codep.value = "";
     } else {
-      addressData.value.districtIdC = "";
-      addressData.value.subdistrictIdC = "";
+      addressData.value.currentDistrictId = "";
+      addressData.value.currentSubDistrictId = "";
       codec.value = "";
     }
     myform.value.resetValidation();
@@ -433,10 +200,10 @@ const selectProvince = async (e: string | null, name: string) => {
 const selectDistrict = async (e: string | null, name: string) => {
   if (e != null) {
     if (name == "1") {
-      addressData.value.subdistrictId = "";
+      addressData.value.registSubDistrictId = "";
       codep.value = "";
     } else {
-      addressData.value.subdistrictIdC = "";
+      addressData.value.currentSubDistrictId = "";
       codec.value = "";
     }
     myform.value.resetValidation();
@@ -490,13 +257,13 @@ const fetchDistrict = async (id: string | null, position: string) => {
         data.map((r: any) => {
           option.push({ id: r.id.toString(), name: r.name.toString() });
         });
-        // if (position == "1") {
-        //   Ops.value.districtOps = option;
-        //   OpsFilter.value.districtOps = option;
-        // } else {
-        //   Ops.value.districtCOps = option;
-        //   OpsFilter.value.districtCOps = option;
-        // }
+        if (position == "1") {
+          Ops.value.districtOps = option;
+          OpsFilter.value.districtOps = option;
+        } else {
+          Ops.value.districtCOps = option;
+          OpsFilter.value.districtCOps = option;
+        }
       })
       .catch((e) => {
         messageError($q, e);
@@ -570,7 +337,6 @@ const getClass = (val: boolean) => {
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="refreshData"
-      :historyClick="clickHistory"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -585,7 +351,7 @@ const getClass = (val: boolean) => {
             autogrow
             :readonly="!edit"
             :borderless="!edit"
-            v-model="addressData.address"
+            v-model="addressData.registAddress"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
             :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
           />
@@ -601,7 +367,7 @@ const getClass = (val: boolean) => {
             :outlined="edit"
             dense
             lazy-rules
-            v-model="addressData.provinceId"
+            v-model="addressData.registProvinceId"
             emit-value
             map-options
             option-label="name"
@@ -627,7 +393,7 @@ const getClass = (val: boolean) => {
             :outlined="edit"
             dense
             lazy-rules
-            v-model="addressData.districtId"
+            v-model="addressData.registDistrictId"
             emit-value
             map-options
             option-label="name"
@@ -653,7 +419,7 @@ const getClass = (val: boolean) => {
             :outlined="edit"
             dense
             lazy-rules
-            v-model="addressData.subdistrictId"
+            v-model="addressData.registSubDistrictId"
             emit-value
             map-options
             option-label="name"
@@ -687,7 +453,7 @@ const getClass = (val: boolean) => {
             >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
           >
           <q-radio
-            v-model="addressData.same"
+            v-model="addressData.registSame"
             checked-icon="task_alt"
             unchecked-icon="panorama_fish_eye"
             val="1"
@@ -696,7 +462,7 @@ const getClass = (val: boolean) => {
             :disable="!edit"
           />
           <q-radio
-            v-model="addressData.same"
+            v-model="addressData.registSame"
             checked-icon="task_alt"
             unchecked-icon="panorama_fish_eye"
             val="0"
@@ -706,7 +472,7 @@ const getClass = (val: boolean) => {
           />
         </div>
 
-        <div class="col-xs-12" v-if="addressData.same == '0'">
+        <div class="col-xs-12" v-if="addressData.registSame == '0'">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -717,12 +483,15 @@ const getClass = (val: boolean) => {
             autogrow
             :readonly="!edit"
             :borderless="!edit"
-            v-model="addressData.addressC"
+            v-model="addressData.currentAddress"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
             :label="`${'ที่อยู่ปัจจุบัน'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="addressData.registSame == '0'"
+        >
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
@@ -733,7 +502,7 @@ const getClass = (val: boolean) => {
             :outlined="edit"
             dense
             lazy-rules
-            v-model="addressData.provinceIdC"
+            v-model="addressData.currentProvinceId"
             emit-value
             map-options
             option-label="name"
@@ -748,7 +517,10 @@ const getClass = (val: boolean) => {
                       ) "
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="addressData.registSame == '0'"
+        >
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
@@ -759,7 +531,7 @@ const getClass = (val: boolean) => {
             :outlined="edit"
             dense
             lazy-rules
-            v-model="addressData.districtIdC"
+            v-model="addressData.currentDistrictId"
             emit-value
             map-options
             option-label="name"
@@ -774,7 +546,10 @@ const getClass = (val: boolean) => {
                       ) "
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="addressData.registSame == '0'"
+        >
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
@@ -785,7 +560,7 @@ const getClass = (val: boolean) => {
             :outlined="edit"
             dense
             lazy-rules
-            v-model="addressData.subdistrictIdC"
+            v-model="addressData.currentSubDistrictId"
             emit-value
             map-options
             option-label="name"
@@ -800,7 +575,10 @@ const getClass = (val: boolean) => {
                       ) "
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="addressData.registSame == '0'"
+        >
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -816,33 +594,4 @@ const getClass = (val: boolean) => {
       </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 == 'createdAt'" class="table_ellipsis">
-            {{ date2Thai(col.value) }}
-          </div>
-          <div
-            v-else-if="col.name == 'registrationSame'"
-            class="table_ellipsis"
-          >
-            {{ col.value ? "ใช่" : "ไม่" }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
 </template>
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
index c7347e5f3..85452fd45 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
@@ -2,21 +2,15 @@
 import { ref, onMounted } from "vue";
 import type { QForm } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
 import { useQuasar } from "quasar";
-import type {
-  Family,
-  DataOption,
-} from "@/modules/05_placement/components/PersonalDetail/profileType";
+import type { DataOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
 import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
-import type {
-  ResponseObject,
-  childrenFamily,
-  ResponseHistory,
-} from "@/modules/04_registry/interface/response/Family";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
+import type { PropType } from "vue";
+import type { Family } from "@/modules/05_placement/interface/index/Main";
+import { FamilyDataDefualt } from "@/modules/05_placement/interface/index/Main";
 
 const props = defineProps({
   statusEdit: {
@@ -31,46 +25,23 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  data: {
+    type: Object as PropType<Family>,
+    default: FamilyDataDefualt,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const { loaderPage } = dataStore;
+
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError } = mixin;
+const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
 const edit = ref<boolean>(false);
-const fix = ref<boolean>(true);
+
 const myform = ref<QForm | null>(null);
-const modal = ref<boolean>(false);
-const indexRow = ref<number>(0);
-const previous = ref<boolean>(false);
-const next = ref<boolean>(false);
-//C Couple
-//M Male
-//F Female
-const familyData = ref<Family>({
-  prefixC: null,
-  prefixIdC: null,
-  firstnameC: null,
-  lastnameC: null,
-  lastnameCOld: null,
-  occupationC: null,
-  prefixM: null,
-  prefixIdM: null,
-  firstnameM: null,
-  lastnameM: null,
-  occupationM: null,
-  prefixF: null,
-  prefixIdF: null,
-  firstnameF: null,
-  lastnameF: null,
-  occupationF: null,
-  same: "0",
-  childrens: [],
-});
-const familyDataHistory = ref<ResponseHistory[]>([]);
+const familyData = ref<Family>(props.data);
+
 const Ops = ref<any>({
   prefixOps: [],
 });
@@ -80,14 +51,10 @@ const OpsFilter = ref<any>({
 
 onMounted(async () => {
   await fetchPrefix();
-  await fetchData();
+
   emit("update:statusEdit", false);
 });
 
-const historyData = async () => {
-  await fetchHistory();
-};
-
 const filterSelector = (val: any, update: Function, refData: string) => {
   update(() => {
     Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
@@ -100,11 +67,12 @@ const refreshData = async () => {
   if (myform.value != null) {
     myform.value.reset();
   }
-  await fetchData();
+  emit("update:statusEdit", false);
+  await props.fetch();
 };
 
 const fetchPrefix = async () => {
-  loaderPage(true);
+  showLoader();
   await http
     .get(config.API.prefix)
     .then((res) => {
@@ -120,200 +88,80 @@ const fetchPrefix = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      loaderPage(false);
+      hideLoader();
     });
 };
 
-const addChildren = async () => {
-  //   familyData.value.childrens.push({
-  //     id: `${familyData.value.childrens.length + 1}`,
-  //     childrenPrefixId: "",
-  //     childrenFirstName: "",
-  //     childrenLastName: "",
-  //     childrenCareer: "",
-  //   });
+const editData = async () => {
+  showLoader();
+  //   const body: ResponseObject = {
+  //     couple: familyData.value.couple == "1",
+  //     couplePrefixId: familyData.value.marryPrefixId,
+  //     coupleFirstName: familyData.value.marryFirstName,
+  //     coupleLastName: familyData.value.marryLastName,
+  //     coupleLastNameOld: familyData.value.lastnameCOld,
+  //     coupleCareer: familyData.value.marryOccupation,
+  //     fatherPrefixId: familyData.value.fatherPrefixId,
+  //     fatherFirstName: familyData.value.fatherFirstName,
+  //     fatherLastName: familyData.value.fatherLastName,
+  //     fatherCareer: familyData.value.fatherOccupation,
+  //     motherPrefixId: familyData.value.motherPrefixId,
+  //     motherFirstName: familyData.value.motherFirstName,
+  //     motherLastName: familyData.value.motherLastName,
+  //     motherCareer: familyData.value.motherOccupation,
+  //     // childrens: familyData.value.childrens,
+  //     createdFullName: "-",
+  //     createdAt: new Date(),
+  //   };
 
-  familyData.value.childrens.sort(
-    (a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
-  );
-};
-
-const deleteChildren = (items: childrenFamily) => {
-  const index = familyData.value.childrens.findIndex(
-    (r: childrenFamily) => r.id == items.id
-  );
-
-  familyData.value.childrens.splice(index, 1);
-};
-
-const fetchHistory = async () => {
-  familyDataHistory.value = [];
-  loaderPage(true);
+  const body = {
+    couple: familyData.value.couple == "1",
+    couplePrefixId: familyData.value.marryPrefixId,
+    coupleFirstName: familyData.value.marryFirstName,
+    coupleLastName: familyData.value.marryLastName,
+    coupleLastNameOld: "",
+    coupleCareer: familyData.value.marryOccupation,
+    fatherPrefixId: familyData.value.fatherPrefixId,
+    fatherFirstName: familyData.value.fatherFirstName,
+    fatherLastName: familyData.value.fatherLastName,
+    fatherCareer: familyData.value.fatherOccupation,
+    motherPrefixId: familyData.value.motherPrefixId,
+    motherFirstName: familyData.value.motherFirstName,
+    motherLastName: familyData.value.motherLastName,
+    motherCareer: familyData.value.motherOccupation,
+  };
   await http
-    .get(config.API.profileFamiHisId(route.params.id.toString()))
+    .put(config.API.placementFamilyId(route.params.personalId.toString()), body)
     .then((res) => {
-      const data: ResponseObject[] = res.data.result;
-      data.map((row: ResponseObject) => {
-        // const arrayData: ResponseHistory = {
-        //   couple: row.couple ? "1" : "0",
-        //   couplePrefixId: row.couplePrefixId,
-        //   coupleFirstName: row.coupleFirstName,
-        //   coupleLastName: row.coupleLastName,
-        //   coupleLastNameOld: row.coupleLastNameOld,
-        //   coupleCareer: row.coupleCareer,
-        //   fatherPrefixId: row.fatherPrefixId,
-        //   fatherFirstName: row.fatherFirstName,
-        //   fatherLastName: row.fatherLastName,
-        //   fatherCareer: row.fatherCareer,
-        //   motherPrefixId: row.motherPrefixId,
-        //   motherFirstName: row.motherFirstName,
-        //   motherLastName: row.motherLastName,
-        //   motherCareer: row.motherCareer,
-        //   childrens: row.childrens,
-        //   createdFullName: row.createdFullName,
-        //   createdAt: new Date(row.createdAt),
-        // };
-        // familyDataHistory.value.push(arrayData);
-      });
+      success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
-      loaderPage(false);
-      if (familyDataHistory.value.length == 0) {
-        // modalError(
-        //   $q,
-        //   "ประวัติแก้ไขข้อมูลครอบครัว",
-        //   "ไม่มีข้อมูลประวัติแก้ไขข้อมูลครอบครัว"
-        // );
-      } else {
-        modal.value = true;
-        indexRow.value = 0;
-        if (familyDataHistory.value.length > 1) {
-          next.value = true;
-          previous.value = false;
-        } else {
-          next.value = false;
-          previous.value = false;
-        }
-      }
+      hideLoader();
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await props.fetch();
     });
 };
 
-const fetchData = async () => {
-  familyData.value.childrens = [];
-
-  // loaderPage(true);
-  // await http
-  //   .get(config.API.profileFamiId(route.params.id.toString()))
-  //   .then((res) => {
-  // const data: ResponseObject = res.data.result;
-  // familyData.value.prefixC = "";
-  // familyData.value.prefixIdC = data.couplePrefixId;
-  // familyData.value.firstnameC = data.coupleFirstName;
-  // familyData.value.lastnameC = data.coupleLastName;
-  // familyData.value.lastnameCOld = data.coupleLastNameOld;
-  // familyData.value.occupationC = data.coupleCareer;
-  // familyData.value.prefixM = "";
-  // familyData.value.prefixIdM = data.fatherPrefixId;
-
-  // familyData.value.firstnameM = data.fatherFirstName;
-  // familyData.value.lastnameM = data.fatherLastName;
-  // familyData.value.occupationM = data.fatherCareer;
-  // familyData.value.prefixF = "";
-  // familyData.value.prefixIdF = data.motherPrefixId;
-
-  // familyData.value.firstnameF = data.motherFirstName;
-  // familyData.value.lastnameF = data.motherLastName;
-  // familyData.value.occupationF = data.motherCareer;
-  // familyData.value.same = data.couple ? "1" : "0";
-
-  // if (data.childrens.length > 0) {
-  //   let dataChild: childrenFamily[] = [];
-  //   data.childrens.map((row: childrenFamily, index: number) => {
-  //     dataChild.push({
-  //       id: `${index + 1}`,
-  //       childrenPrefixId: row.childrenPrefixId,
-  //       childrenFirstName: row.childrenFirstName,
-  //       childrenLastName: row.childrenLastName,
-  //       childrenCareer: row.childrenCareer,
-  //     });
-  //   });
-  //   familyData.value.childrens = dataChild;
-  // } else {
-  //   familyData.value.childrens = [];
-  // }
-  // })
-  // .catch((e) => {
-  //   messageError($q, e);
-  // })
-  // .finally(async () => {
-  //   loaderPage(false);
-  // });
-};
-
-const editData = async () => {
-  // loaderPage(true);
-  // const body: ResponseObject = {
-  //   couple: familyData.value.same == "1",
-  //   couplePrefixId: familyData.value.prefixIdC,
-  //   coupleFirstName: familyData.value.firstnameC,
-  //   coupleLastName: familyData.value.lastnameC,
-  //   coupleLastNameOld: familyData.value.lastnameCOld,
-  //   coupleCareer: familyData.value.occupationC,
-  //   fatherPrefixId: familyData.value.prefixIdM,
-  //   fatherFirstName: familyData.value.firstnameM,
-  //   fatherLastName: familyData.value.lastnameM,
-  //   fatherCareer: familyData.value.occupationM,
-  //   motherPrefixId: familyData.value.prefixIdF,
-  //   motherFirstName: familyData.value.firstnameF,
-  //   motherLastName: familyData.value.lastnameF,
-  //   motherCareer: familyData.value.occupationF,
-  //   childrens: familyData.value.childrens,
-  //   createdFullName: "-",
-  //   createdAt: new Date(),
-  // };
-  // await http
-  //   .put(config.API.profileFamiId(route.params.id.toString()), body)
-  //   .then((res) => {
-  //     success($q, "บันทึกข้อมูลสำเร็จ");
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //     edit.value = false;
-  //     emit("update:statusEdit", false);
-  //     await fetchData();
-  //   });
-};
-
 const saveData = async () => {
-  // await myform.value?.validate().then(async (success: boolean) => {
-  //   if (success) {
-  //     await editData();
-  //   } else {
-  //   }
-  // });
-};
-
-const clickPreviousNext = (page: string) => {
-  const index: number =
-    page == "next" ? indexRow.value - 1 : indexRow.value + 1;
-  let length: number = familyDataHistory.value.length;
-  previous.value = index == 0 ? false : true;
-  next.value = index == length - 1 ? false : true;
-  indexRow.value = index;
+  await myform.value?.validate().then(async (success: boolean) => {
+    if (success) {
+      await editData();
+    } else {
+    }
+  });
 };
 
 const selectRadio = (e: boolean, i: any) => {
   if (e) {
-    familyData.value.prefixIdC = "";
-    familyData.value.firstnameC = "";
-    familyData.value.lastnameC = "";
-    familyData.value.lastnameCOld = "";
-    familyData.value.occupationC = "";
+    familyData.value.marryPrefixId = "";
+    familyData.value.marryFirstName = "";
+    familyData.value.marryLastName = "";
+    // familyData.value.lastnameCOld = "";
+    familyData.value.marryOccupation = "";
   }
 };
 
@@ -349,7 +197,6 @@ const getClass = (val: boolean) => {
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="refreshData"
-      :historyClick="historyData"
     />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -365,7 +212,7 @@ const getClass = (val: boolean) => {
             :outlined="edit"
             dense
             lazy-rules
-            v-model="familyData.prefixIdM"
+            v-model="familyData.fatherPrefixId"
             emit-value
             map-options
             option-label="name"
@@ -389,7 +236,7 @@ const getClass = (val: boolean) => {
             lazy-rules
             :readonly="!edit"
             :borderless="!edit"
-            v-model="familyData.firstnameM"
+            v-model="familyData.fatherFirstName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
           />
@@ -403,7 +250,7 @@ const getClass = (val: boolean) => {
             lazy-rules
             :readonly="!edit"
             :borderless="!edit"
-            v-model="familyData.lastnameM"
+            v-model="familyData.fatherLastName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
           />
@@ -417,7 +264,7 @@ const getClass = (val: boolean) => {
             lazy-rules
             :readonly="!edit"
             :borderless="!edit"
-            v-model="familyData.occupationM"
+            v-model="familyData.fatherOccupation"
             :label="`${'อาชีพ'}`"
           />
         </div>
@@ -435,7 +282,7 @@ const getClass = (val: boolean) => {
             :outlined="edit"
             dense
             lazy-rules
-            v-model="familyData.prefixIdF"
+            v-model="familyData.motherPrefixId"
             emit-value
             map-options
             option-label="name"
@@ -459,7 +306,7 @@ const getClass = (val: boolean) => {
             lazy-rules
             :readonly="!edit"
             :borderless="!edit"
-            v-model="familyData.firstnameF"
+            v-model="familyData.motherFirstName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
           />
@@ -473,7 +320,7 @@ const getClass = (val: boolean) => {
             lazy-rules
             :readonly="!edit"
             :borderless="!edit"
-            v-model="familyData.lastnameF"
+            v-model="familyData.motherLastName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
           />
@@ -487,7 +334,7 @@ const getClass = (val: boolean) => {
             lazy-rules
             :readonly="!edit"
             :borderless="!edit"
-            v-model="familyData.occupationF"
+            v-model="familyData.motherOccupation"
             :label="`${'อาชีพ'}`"
           />
         </div>
@@ -495,7 +342,7 @@ const getClass = (val: boolean) => {
         <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
           <label class="text-weight-bold">• คู่สมรส</label>
           <q-radio
-            v-model="familyData.same"
+            v-model="familyData.couple"
             checked-icon="task_alt"
             unchecked-icon="panorama_fish_eye"
             val="1"
@@ -505,7 +352,7 @@ const getClass = (val: boolean) => {
             @update:model-value="selectRadio"
           />
           <q-radio
-            v-model="familyData.same"
+            v-model="familyData.couple"
             checked-icon="task_alt"
             unchecked-icon="panorama_fish_eye"
             val="0"
@@ -516,7 +363,10 @@ const getClass = (val: boolean) => {
           />
         </div>
 
-        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+        <div
+          class="col-xs-12 col-sm-2 col-md-2"
+          v-if="familyData.couple == '1'"
+        >
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
@@ -527,7 +377,7 @@ const getClass = (val: boolean) => {
             :outlined="edit"
             dense
             lazy-rules
-            v-model="familyData.prefixIdC"
+            v-model="familyData.marryPrefixId"
             emit-value
             map-options
             option-label="name"
@@ -542,7 +392,7 @@ const getClass = (val: boolean) => {
           />
         </div>
 
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.couple == '1'">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -551,12 +401,12 @@ const getClass = (val: boolean) => {
             lazy-rules
             :readonly="!edit"
             :borderless="!edit"
-            v-model="familyData.firstnameC"
+            v-model="familyData.marryFirstName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -565,12 +415,12 @@ const getClass = (val: boolean) => {
             lazy-rules
             :readonly="!edit"
             :borderless="!edit"
-            v-model="familyData.lastnameC"
+            v-model="familyData.marryLastName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+        <!-- <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -583,8 +433,11 @@ const getClass = (val: boolean) => {
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
             :label="`${'นามสกุล(เดิม)'}`"
           />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+        </div> -->
+        <div
+          class="col-xs-12 col-sm-3 col-md-3"
+          v-if="familyData.couple == '1'"
+        >
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -593,506 +446,13 @@ const getClass = (val: boolean) => {
             lazy-rules
             :readonly="!edit"
             :borderless="!edit"
-            v-model="familyData.occupationC"
+            v-model="familyData.marryOccupation"
             :label="`${'อาชีพ'}`"
           />
         </div>
-
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-      </div>
-      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-xs-12 q-col-gutter-x-sm items-center flex">
-          <label class="text-weight-bold">• บุตร</label>
-          <div>
-            <q-btn
-              v-if="edit"
-              size="12px"
-              flat
-              round
-              :disable="!edit"
-              :color="!edit ? 'grey-7' : 'primary'"
-              @click="addChildren"
-              icon="mdi-plus"
-            >
-              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-            </q-btn>
-          </div>
-        </div>
-
-        <div
-          class="row col-12 items-center q-col-gutter-xs"
-          v-for="items in familyData.childrens"
-          :key="items.id"
-        >
-          <q-btn
-            v-if="edit"
-            size="12px"
-            flat
-            round
-            :disable="!edit"
-            :color="!edit ? 'grey-7' : 'red'"
-            @click="deleteChildren(items)"
-            icon="mdi-delete-outline"
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
-          <div
-            :class="
-              edit
-                ? 'col-xs-10 col-sm-2 col-md-2'
-                : 'col-xs-12 col-sm-3 col-md-3'
-            "
-          >
-            <selector
-              :hide-dropdown-icon="!edit"
-              hide-bottom-space
-              :class="getClass(edit)"
-              :readonly="!edit"
-              :borderless="!edit"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-              :outlined="edit"
-              dense
-              lazy-rules
-              v-model="items.childrenPrefixId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.prefixOps"
-              option-value="id"
-              :label="`${'คำนำหน้า'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-            />
-          </div>
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="items.childrenFirstName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :label="`${'ชื่อ'}`"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="items.childrenLastName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-              :label="`${'นามสกุล'}`"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-3 col-md-3">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="items.childrenCareer"
-              :label="`${'อาชีพ'}`"
-            />
-          </div>
-        </div>
       </div>
     </q-form>
   </q-card>
-  <!-- <DialogHistory
-    v-model:modal="modal"
-    v-model:fix="fix"
-    title="ประวัติแก้ไขข้อมูลครอบครัว"
-  >
-    <template v-slot:body>
-      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-xs-12 text-weight-bold">
-          {{
-            `${
-              familyDataHistory.length > 0 &&
-              familyDataHistory[indexRow].createdAt != null
-                ? date2Thai(familyDataHistory[indexRow].createdAt, false, true)
-                : ""
-            }`
-          }}
-        </div>
-        <div class="col-xs-12 text-weight-bold">• บิดา</div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
-          <selector
-            :hide-dropdown-icon="true"
-            hide-bottom-space
-            :class="getClass(false)"
-            :readonly="true"
-            :borderless="true"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-            :outlined="false"
-            dense
-            lazy-rules
-            v-model="familyDataHistory[indexRow].fatherPrefixId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.prefixOps"
-            option-value="id"
-            :label="`${'คำนำหน้า'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-          />
-        </div>
-
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            :outlined="false"
-            dense
-            lazy-rules
-            :readonly="true"
-            :borderless="true"
-            v-model="familyDataHistory[indexRow].fatherFirstName"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            :outlined="false"
-            dense
-            lazy-rules
-            :readonly="true"
-            :borderless="true"
-            v-model="familyDataHistory[indexRow].fatherLastName"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            :outlined="false"
-            dense
-            lazy-rules
-            :readonly="true"
-            :borderless="true"
-            v-model="familyDataHistory[indexRow].fatherCareer"
-            :label="`${'อาชีพ'}`"
-          />
-        </div>
-
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-        <div class="col-xs-12 text-weight-bold">• มารดา</div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
-          <selector
-            :hide-dropdown-icon="true"
-            hide-bottom-space
-            :class="getClass(false)"
-            :readonly="true"
-            :borderless="true"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-            :outlined="false"
-            dense
-            lazy-rules
-            v-model="familyDataHistory[indexRow].motherPrefixId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.prefixOps"
-            option-value="id"
-            :label="`${'คำนำหน้า'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-          />
-        </div>
-
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            :outlined="false"
-            dense
-            lazy-rules
-            :readonly="true"
-            :borderless="true"
-            v-model="familyDataHistory[indexRow].motherFirstName"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            :outlined="false"
-            dense
-            lazy-rules
-            :readonly="true"
-            :borderless="true"
-            v-model="familyDataHistory[indexRow].motherLastName"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            :outlined="false"
-            dense
-            lazy-rules
-            :readonly="true"
-            :borderless="true"
-            v-model="familyDataHistory[indexRow].motherCareer"
-            :label="`${'อาชีพ'}`"
-          />
-        </div>
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
-          <label class="text-weight-bold">• คู่สมรส</label>
-          <q-radio
-            v-model="familyDataHistory[indexRow].couple"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มี"
-            dense
-            :disable="true"
-            @update:model-value="selectRadio"
-          />
-          <q-radio
-            v-model="familyDataHistory[indexRow].couple"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่มี"
-            dense
-            :disable="true"
-            @update:model-value="selectRadio"
-          />
-        </div>
-
-        <div
-          class="col-xs-12 col-sm-3 col-md-3"
-          v-if="familyDataHistory[indexRow].couple == '1'"
-        >
-          <selector
-            :hide-dropdown-icon="true"
-            hide-bottom-space
-            :class="getClass(false)"
-            :readonly="true"
-            :borderless="true"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-            :outlined="false"
-            dense
-            lazy-rules
-            v-model="familyDataHistory[indexRow].couplePrefixId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.prefixOps"
-            option-value="id"
-            :label="`${'คำนำหน้า'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-          />
-        </div>
-
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="familyDataHistory[indexRow].couple == '1'"
-        >
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            :outlined="false"
-            dense
-            lazy-rules
-            :readonly="true"
-            :borderless="true"
-            v-model="familyDataHistory[indexRow].coupleFirstName"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="familyDataHistory[indexRow].couple == '1'"
-        >
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            :outlined="false"
-            dense
-            lazy-rules
-            :readonly="true"
-            :borderless="true"
-            v-model="familyDataHistory[indexRow].coupleLastName"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="familyDataHistory[indexRow].couple == '1'"
-        >
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            :outlined="false"
-            dense
-            lazy-rules
-            :readonly="true"
-            :borderless="true"
-            v-model="familyDataHistory[indexRow].coupleLastNameOld"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
-            :label="`${'นามสกุล(เดิม)'}`"
-          />
-        </div>
-        <div
-          class="col-xs-12 col-sm-3 col-md-3"
-          v-if="familyDataHistory[indexRow].couple == '1'"
-        >
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            :outlined="false"
-            dense
-            lazy-rules
-            :readonly="true"
-            :borderless="true"
-            v-model="familyDataHistory[indexRow].coupleCareer"
-            :label="`${'อาชีพ'}`"
-          />
-        </div>
-
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-      </div>
-      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
-          <label class="text-weight-bold">• บุตร</label>
-        </div>
-
-        <div
-          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-          v-for="items in familyDataHistory[indexRow].childrens"
-          :key="items.id"
-        >
-          <div class="col-xs-12 col-sm-3 col-md-3">
-            <selector
-              :hide-dropdown-icon="true"
-              hide-bottom-space
-              :class="getClass(false)"
-              :readonly="true"
-              :borderless="true"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-              :outlined="false"
-              dense
-              lazy-rules
-              v-model="items.childrenPrefixId"
-              emit-value
-              map-options
-              option-label="name"
-              :options="Ops.prefixOps"
-              option-value="id"
-              :label="`${'คำนำหน้า'}`"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                      ) "
-            />
-          </div>
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="items.childrenFirstName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :label="`${'ชื่อ'}`"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="items.childrenLastName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-              :label="`${'นามสกุล'}`"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-3 col-md-3">
-            <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="items.childrenCareer"
-              :label="`${'อาชีพ'}`"
-            />
-          </div>
-        </div>
-      </div>
-    </template>
-    <template v-slot:footer>
-      <q-btn
-        flat
-        round
-        icon="mdi-menu-left"
-        @click="clickPreviousNext('next')"
-        :disable="previous == false"
-        :color="!previous ? 'grey-7' : 'public'"
-      />
-      <q-btn
-        flat
-        round
-        icon="mdi-menu-right"
-        @click="clickPreviousNext('previous')"
-        :disable="next == false"
-        :color="!next ? 'grey-7' : 'public'"
-      />
-      <q-space />
-      <div class="text-black text-subtitle2 text-bold">
-        {{ indexRow + 1 }}/{{ familyDataHistory.length }}
-      </div>
-    </template>
-  </DialogHistory> -->
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index c433e35b9..ff97f44c5 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -1,6 +1,6 @@
 import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
 interface DataOption {
-  id: number;
+  id: number | null;
   name: string;
   disable?: boolean;
 }
@@ -102,7 +102,7 @@ interface Education {
 }
 
 interface Family {
-  couple: boolean;
+  couple: string;
   marryPrefix: string;
   marryPrefixId: string;
   marryFirstName: string;
@@ -121,6 +121,7 @@ interface Family {
 }
 
 interface Address {
+  registAddress: string;
   registSubDistrict: string;
   registSubDistrictId: string;
   registZipCode: string;
@@ -128,6 +129,7 @@ interface Address {
   registDistrictId: string;
   registProvince: string;
   registProvinceId: string;
+  currentAddress: string;
   currentSubDistrict: string;
   currentSubDistrictId: string;
   currentZipCode: string;
@@ -135,10 +137,12 @@ interface Address {
   currentDistrictId: string;
   currentProvince: string;
   currentProvinceId: string;
-  registSame: boolean;
+  registSame: string;
 }
 
 const AddressDataDefualt: Address = {
+  registAddress: "",
+  currentAddress: "",
   registSubDistrict: "",
   registSubDistrictId: "",
   registZipCode: "",
@@ -153,9 +157,27 @@ const AddressDataDefualt: Address = {
   currentDistrictId: "",
   currentProvince: "",
   currentProvinceId: "",
-  registSame: false,
+  registSame: "0",
 };
 
+const FamilyDataDefualt: Family = {
+  couple: "0",
+  marryPrefix: "",
+  marryPrefixId: "",
+  marryFirstName: "",
+  marryLastName: "",
+  marryOccupation: "",
+  fatherPrefix: "",
+  fatherPrefixId: "",
+  fatherFirstName: "",
+  fatherLastName: "",
+  fatherOccupation: "",
+  motherPrefix: "",
+  motherPrefixId: "",
+  motherFirstName: "",
+  motherLastName: "",
+  motherOccupation: "",
+};
 export type {
   DataOption,
   DataOptionInsignia,
@@ -175,4 +197,4 @@ export type {
   optionData,
 };
 
-export { AddressDataDefualt };
+export { AddressDataDefualt, FamilyDataDefualt };