diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 62f8615d1..306bdee6b 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -1,5 +1,5 @@
-import env from "../index"
-const placement = `${env.API_URI}/Placement/placement`
+import env from "../index";
+const placement = `${env.API_PLACEMENT_URI}/Placement/placement`;
 const orgTree = `${env.API_URI_ORG_TREE}`;
 
 export default {
@@ -15,4 +15,33 @@ export default {
   placementPass: () => `${placement}/pass`,
   placementDefermentInfo: (id: string) => `${placement}/pass/deferment/${id}`,
   placementDisclaimInfo: (id: string) => `${placement}/pass/disclaim/${id}`,
-};
\ No newline at end of file
+
+  //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 376b4378c..99db277a8 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -20,6 +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_URI_ORG_TREE:
       "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
@@ -59,6 +60,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
+);
 const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
 
 export default {
@@ -70,6 +74,7 @@ export default {
   API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
   API_URI_ORG_EMPLOYEE_SERVICE: API_URI_ORG_EMPLOYEE_SERVICE.value,
   API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
+  API_PLACEMENT_URI: API_PLACEMENT_URI.value,
   API_URI_ORG_TREE: API_URI_ORG_TREE.value,
   MEET_URI: MEET_URI.value,
 };
diff --git a/src/modules/04_registry/components/Information/layout.vue b/src/modules/04_registry/components/Information/layout.vue
index 971238b44..be8382309 100644
--- a/src/modules/04_registry/components/Information/layout.vue
+++ b/src/modules/04_registry/components/Information/layout.vue
@@ -1,6 +1,11 @@
 <template>
   <Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
-  <Government :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
+  <Government
+    :notiNoEdit="notiNoEdit"
+    v-model:statusEdit="statusEdit"
+    profileType="profileType"
+    employeeClass="employeeClass"
+  />
   <Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
   <Family :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
   <!-- <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" /> -->
diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index f72ff76a7..a1c513c89 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -125,12 +125,30 @@ onMounted(async () => {
 });
 const fetchPlacementData = async (val: number) => {
   showLoader();
+  rows.value = [];
   http
     .get(config.API.MainDetail(val))
     .then((res) => {
       dataPlacement.value = res.data.result;
       DataStore.DataMainOrig = dataPlacement.value;
-      rows.value = DataStore.DataMainOrig;
+      console.log(DataStore.DataMainOrig);
+
+      // rows.value = DataStore.DataMainOrig;
+      DataStore.DataMainOrig.map((e: any) => {
+        rows.value.push({
+          id: e.id,
+          examRound: e.examRound,
+          examOrder: e.examOrder,
+          examTypeName: e.examTypeName,
+          examTypeValue: e.examTypeValue,
+          accountEndDate: date2Thai(e.accountEndDate),
+          accountExpirationDate: date2Thai(e.accountExpirationDate),
+          accountStartDate: date2Thai(e.accountStartDate),
+          fiscalYear: e.fiscalYear,
+          numberOfCandidates: e.numberOfCandidates,
+        });
+      });
+
       examTypeFilter();
       examTimeFilter();
       expiredAccountFilter();
@@ -218,13 +236,28 @@ const examTypeFilter = () => {
 };
 //--------------|ฟิลเตอร์|--------------------------------------//
 const searchFilterTable = async () => {
+  rows.value = [];
   if (examType.value !== undefined && examType.value !== null) {
     await DataStore.DataUpdateMain(
       examTime.value,
       examType.value,
       expiredAccount.value
     );
-    rows.value = DataStore.DataMainUpdate;
+    // rows.value = DataStore.DataMainUpdate;
+    DataStore.DataMainUpdate.map((e: any) => {
+      rows.value.push({
+        id: e.id,
+        examRound: e.examRound,
+        examOrder: e.examOrder,
+        examTypeName: e.examTypeName,
+        examTypeValue: e.examTypeValue,
+        accountEndDate: date2Thai(e.accountEndDate),
+        accountExpirationDate: date2Thai(e.accountExpirationDate),
+        accountStartDate: date2Thai(e.accountStartDate),
+        fiscalYear: e.fiscalYear,
+        numberOfCandidates: e.numberOfCandidates,
+      });
+    });
   }
 };
 
@@ -416,10 +449,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 {{ props.row.examTypeName }}
               </q-td>
               <q-td key="accountStartDate" :props="props">
-                {{ date2Thai(props.row.accountStartDate) }}
+                {{ props.row.accountStartDate }}
               </q-td>
               <q-td key="accountExpirationDate" :props="props">
-                {{ date2Thai(props.row.accountExpirationDate) }}
+                {{ props.row.accountExpirationDate }}
               </q-td>
             </q-tr>
           </template>
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index f461ed10a..372f15139 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -616,7 +616,7 @@ const fiscalYearFilter = async () => {
 };
 
 const OrderType = ref<string>("");
-const OrderTypeOption = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
+const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedOrderTypeValues: string[] = [];
 const OrderTypeFilter = async () => {
   // API
@@ -640,7 +640,8 @@ const OrderTypeFilter = async () => {
     // }
     if (!addedOrderTypeValues.includes(OrderTypeValue)) {
       OrderTypeOption.push({
-        id: OrderTypeValue,
+        // id: OrderTypeValue ?? 0,
+        id: OrderTypeOption.length,
         name: OrderTypeValue,
       });
       addedOrderTypeValues.push(OrderTypeValue);
@@ -658,7 +659,7 @@ const OrderStatus = ref<string>("");
 const OrderStatusText = ref<FormOrderPlacementMainData[]>(
   DataStore.DataMainOrigOrder
 );
-const OrderStatusOption = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
+const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
 const addedOrderStatusValues: string[] = [];
 const OrderStatusFilter = async () => {
   // API
@@ -686,7 +687,8 @@ const OrderStatusFilter = async () => {
 
     if (!addedOrderStatusValues.includes(OrderStatusValue)) {
       OrderStatusOption.push({
-        id: OrderStatusValue,
+        // id: OrderStatusValue,
+        id: OrderStatusOption.length,
         name: OrderStatusValue,
       });
       addedOrderStatusValues.push(OrderStatusValue);
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index be299f242..a671ac437 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -449,14 +449,14 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
     case "typeOrderOption":
       update(() => {
         typeOrderOption.value = typeOrderOptionFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name!.indexOf(val) > -1
         );
       });
       break;
     case "byOrderOption":
       update(() => {
         byOrderOption.value = byOrderOptionFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name!.indexOf(val) > -1
         );
       });
       break;
@@ -464,7 +464,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
     case "registerOption":
       update(() => {
         registerOption.value = registerOptionFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name!.indexOf(val) > -1
         );
       });
       break;
@@ -472,7 +472,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
     case "announceOption":
       update(() => {
         announceOption.value = announceOptionFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name!.indexOf(val) > -1
         );
       });
       break;
@@ -480,14 +480,14 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
     case "positionOption":
       update(() => {
         positionOption.value = positionOptionFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name!.indexOf(val) > -1
         );
       });
       break;
     case "testOption":
       update(() => {
         testOption.value = testOptionFilter.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name!.indexOf(val) > -1
         );
       });
       break;
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index 7d9d21328..62502cd72 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -22,11 +22,15 @@
                 <q-menu>
                   <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
+                      <q-item-section avatar
+                        ><q-icon color="red" name="mdi-file-pdf"
+                      /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
+                      <q-item-section avatar
+                        ><q-icon color="blue" name="mdi-file-word"
+                      /></q-item-section>
                       <q-item-section>ไฟล์ .docx</q-item-section>
                     </q-item>
                   </q-list>
@@ -47,82 +51,84 @@
                 <q-menu>
                   <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
+                      <q-item-section avatar
+                        ><q-icon color="red" name="mdi-file-pdf"
+                      /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
                       <q-item-section>ไฟล์ .xls</q-item-section>
                     </q-item>
                   </q-list>
                 </q-menu>
               </q-btn>
             </div>
+            <q-space />
+            <q-btn
+              class="text-dark"
+              flat
+              dense
+              icon="mdi-fullscreen"
+              color="add"
+              @click="dialog = true"
+            />
           </div>
-          <q-separator style="margin-top: -1px; z-index: 1;" />
+          <q-separator style="margin-top: -1px; z-index: 1" />
           <q-card bordered class="card-pdf q-ma-md q-pa-md">
-              <div
-                class="justify-between items-center align-center q-pb-sm row"
+            <div class="justify-between items-center align-center q-pb-sm row">
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page > 1 ? page - 1 : page"
               >
-                <q-btn
-                  class="text-dark bg-grey-4"
-                  flat
-                  dense
-                  @click="page = page > 1 ? page - 1 : page"
-                >
-                  <q-icon name="mdi-chevron-left" />
-                </q-btn>
+                <q-icon name="mdi-chevron-left" />
+              </q-btn>
 
-                <span class="body-2 grey--text">
-                  หน้าที่ {{ page }} จาก {{ numOfPages }}
-                </span>
+              <span class="body-2 grey--text">
+                หน้าที่ {{ page }} จาก {{ numOfPages }}
+              </span>
 
-                <q-btn
-                  class="text-dark bg-grey-4"
-                  flat
-                  dense
-                  @click="page = page < numOfPages ? page + 1 : page"
-                >
-                  <q-icon name="mdi-chevron-right" />
-                </q-btn>
-              </div>
-              <div class="pdfWidth">
-                <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-                <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
-              </div>
-              <div
-                class="justify-between items-center align-center q-pt-sm row"
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page < numOfPages ? page + 1 : page"
               >
-                <q-btn
-                  class="text-dark bg-grey-4"
-                  flat
-                  dense
-                  @click="page = page > 1 ? page - 1 : page"
-                >
-                  <q-icon name="mdi-chevron-left" />
-                </q-btn>
+                <q-icon name="mdi-chevron-right" />
+              </q-btn>
+            </div>
+            <div class="pdfWidth">
+              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+              <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+            </div>
+            <div class="justify-between items-center align-center q-pt-sm row">
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page > 1 ? page - 1 : page"
+              >
+                <q-icon name="mdi-chevron-left" />
+              </q-btn>
 
-                <span class="body-2 grey--text">
-                  หน้าที่ {{ page }} จาก {{ numOfPages }}
-                </span>
+              <span class="body-2 grey--text">
+                หน้าที่ {{ page }} จาก {{ numOfPages }}
+              </span>
 
-                <q-btn
-                  class="text-dark bg-grey-4"
-                  flat
-                  dense
-                  @click="page = page < numOfPages ? page + 1 : page"
-                >
-                  <q-icon name="mdi-chevron-right" />
-                </q-btn>
-              </div>
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page < numOfPages ? page + 1 : page"
+              >
+                <q-icon name="mdi-chevron-right" />
+              </q-btn>
+            </div>
           </q-card>
-          <!-- <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
-            <pdf-viewer v-model:PDFV="vuePDFRef" />
-          </div> -->
-          <!-- <div class="card-pdf q-ma-md q-pa-md" v-else>
-            <pdf-viewer v-model:PDFV="vuePDFRef" />
-          </div> -->
-          <!-- <pdf-viewer /> -->
         </template>
 
         <template v-slot:separator>
@@ -275,6 +281,21 @@
                   </div>
                 </div>
               </fieldset>
+              <div class="flex justify-around">
+                <q-btn
+                  unelevated
+                  label="ออกคำสั่ง"
+                  :color="validateForm() ? 'public' : 'grey'"
+                  :disable="!validateForm()"
+                />
+                <q-btn
+                  class="text-dark"
+                  unelevated
+                  label="ส่งไปลงนาม"
+                  color="grey"
+                  disable
+                />
+              </div>
             </div>
           </q-form>
         </template>
@@ -302,9 +323,97 @@
       </q-btn>
 
       <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
+          <q-tooltip>ต่อไป</q-tooltip>
+        </q-btn> -->
     </div>
+
+    <q-dialog
+      v-model="dialog"
+      persistent
+      :maximized="true"
+      transition-show="slide-up"
+      transition-hide="slide-down"
+    >
+      <q-card class="bg-white text-white">
+        <!-- <q-bar>
+            <q-space />
+  
+            <q-btn dense flat icon="close" v-close-popup>
+              <q-tooltip>ปิดหน้าต่าง</q-tooltip>
+            </q-btn>
+          </q-bar> -->
+
+        <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            style="color: #ff8080; background-color: #ffdede"
+            size="12px"
+            v-close-popup
+          />
+        </div>
+        <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+          <div class="justify-between items-center align-center q-pb-sm row">
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page > 1 ? page - 1 : page"
+            >
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page < numOfPages ? page + 1 : page"
+            >
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+          <div class="pdfWidth">
+            <VuePDF
+              ref="vuePDFRef"
+              :pdf="pdfSrc"
+              :page="page"
+              fit-parent
+              :scale="0.1"
+            />
+            <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+          </div>
+          <div class="justify-between items-center align-center q-pt-sm row">
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page > 1 ? page - 1 : page"
+            >
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page < numOfPages ? page + 1 : page"
+            >
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
   </div>
 </template>
 <script setup lang="ts">
@@ -317,6 +426,8 @@ import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
+const dialog = ref<boolean>(false);
+
 // onUnmounted(() => {
 //   window.removeEventListener("resize", (e: any) => {
 //     myEventHandler(e);
diff --git a/src/modules/05_placement/components/PersonalDetail/Detail.vue b/src/modules/05_placement/components/PersonalDetail/Detail.vue
index c105e003c..c68167ce6 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";
+
+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..e9d3014c8 100644
--- a/src/modules/05_placement/components/PersonalDetail/Education.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Education.vue
@@ -13,18 +13,31 @@ 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,
+  optionData,
+} 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 +87,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 +472,8 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
 });
 
 onMounted(async () => {
-  // await fetchLevel();
-  // await fetchPositionPath();
+  await fetchLevel();
+  await fetchPositionPath();
   // await fetchData();
 });
 
@@ -470,8 +483,8 @@ const fetchLevel = async () => {
     .get(config.API.educationLevel)
     .then((res) => {
       const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
+      let option: optionData[] = [];
+      data.map((r: optionData) => {
         option.push({ id: r.id.toString(), name: r.name.toString() });
       });
       Ops.value.levelOptions = option;
@@ -491,8 +504,8 @@ const fetchPositionPath = async () => {
     .get(config.API.positionPath)
     .then((res) => {
       const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
+      let option: optionData[] = [];
+      data.map((r: optionData) => {
         option.push({ id: r.id.toString(), name: r.name.toString() });
       });
       Ops.value.positionPathOptions = option;
@@ -511,7 +524,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
     case "levelOptions":
       update(() => {
         Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: optionData) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -519,7 +532,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
       update(() => {
         Ops.value.positionPathOptions =
           OpsFilter.value.positionPathOptions.filter(
-            (v: DataOption) => v.name.indexOf(val) > -1
+            (v: optionData) => v.name.indexOf(val) > -1
           );
       });
       break;
@@ -536,27 +549,27 @@ const fetchData = async () => {
       let data = res.data.result;
       rows.value = [];
       data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          level: e.educationLevel,
-          levelId: e.educationLevelId,
-          positionPath: e.positionPath,
-          positionPathId: e.positionPathId,
-          institute: e.institute,
-          degree: e.degree,
-          field: e.field,
-          gpa: e.gpa,
-          country: e.country,
-          duration: e.duration,
-          durationYear: e.durationYear,
-          other: e.other,
-          fundName: e.fundName,
-          finishDate: new Date(e.finishDate),
-          startDate: new Date(e.startDate).getFullYear(),
-          endDate: new Date(e.endDate).getFullYear(),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
+        // rows.value.push({
+        //   id: e.id,
+        //   level: e.educationLevel,
+        //   levelId: e.educationLevelId,
+        //   positionPath: e.positionPath,
+        //   positionPathId: e.positionPathId,
+        //   institute: e.institute,
+        //   degree: e.degree,
+        //   field: e.field,
+        //   gpa: e.gpa,
+        //   country: e.country,
+        //   duration: e.duration,
+        //   durationYear: e.durationYear,
+        //   other: e.other,
+        //   fundName: e.fundName,
+        //   finishDate: new Date(e.finishDate),
+        //   startDate: new Date(e.startDate).getFullYear(),
+        //   endDate: new Date(e.endDate).getFullYear(),
+        //   createdFullName: e.createdFullName,
+        //   createdAt: new Date(e.createdAt),
+        // });
       });
     })
     .catch((e) => {
@@ -591,22 +604,22 @@ const clickNext = async () => {
  * กดดูข้อมูลต่อไป
  */
 const getData = () => {
-  const row = rows.value[rowIndex.value];
-  levelId.value = row.levelId;
-  positionPathId.value = row.positionPathId;
-  institute.value = row.institute;
-  degree.value = row.degree;
-  field.value = row.field;
-  gpa.value = row.gpa;
-  country.value = row.country;
-  duration.value = row.duration;
-  durationYear.value = row.durationYear;
-  other.value = row.other;
-  fundName.value = row.fundName;
-  finishDate.value = row.finishDate;
-  startDate.value = row.startDate;
-  endDate.value = row.endDate;
-  id.value = row.id;
+  //   const row = rows.value[rowIndex.value];
+  //   levelId.value = row.levelId;
+  //   positionPathId.value = row.positionPathId;
+  //   institute.value = row.institute;
+  //   degree.value = row.degree;
+  //   field.value = row.field;
+  //   gpa.value = row.gpa;
+  //   country.value = row.country;
+  //   duration.value = row.duration;
+  //   durationYear.value = row.durationYear;
+  //   other.value = row.other;
+  //   fundName.value = row.fundName;
+  //   finishDate.value = row.finishDate;
+  //   startDate.value = row.startDate;
+  //   endDate.value = row.endDate;
+  //   id.value = row.id;
 };
 
 /**
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..e5afc189b 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
@@ -8,7 +8,6 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type {
   Address,
-  DataOption,
   zipCodeOption,
 } from "@/modules/05_placement/components/PersonalDetail/profileType";
 import { defaultAddress } from "@/modules/05_placement/components/PersonalDetail/profileType";
@@ -17,8 +16,15 @@ import type { RequestItemsHistoryObject } from "@/modules//05_placement/interfac
 import type { ResponseObject } from "@/modules//05_placement/interface/response/Address";
 import HistoryTable from "@/components/TableHistory.vue";
 import { useRoute } from "vue-router";
-import type { AddressOps } from "@/modules//05_placement/interface/index/Main";
+import { AddressDataDefualt } from "@/modules//05_placement/interface/index/Main";
+
+import type {
+  AddressOps,
+  Address as AddressType,
+  optionData,
+} from "@/modules//05_placement/interface/index/Main";
 import type { QTableProps } from "quasar";
+import type { PropType } from "vue";
 
 const props = defineProps({
   statusEdit: {
@@ -29,6 +35,14 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  fetch: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  data: {
+    type: Object as PropType<AddressType>,
+    default: AddressDataDefualt,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -232,35 +246,35 @@ const filterSelector = (val: any, update: Function, refData: string) => {
     case "provinceOps":
       update(() => {
         Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: optionData) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "districtOps":
       update(() => {
         Ops.value.districtOps = OpsFilter.value.districtOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: optionData) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "districtCOps":
       update(() => {
         Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: optionData) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "subdistrictOps":
       update(() => {
         Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: optionData) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "subdistrictCOps":
       update(() => {
         Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
+          (v: optionData) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -450,7 +464,7 @@ const fetchProvince = async () => {
     .get(config.API.province)
     .then((res) => {
       const data = res.data.result;
-      let option: DataOption[] = [];
+      let option: optionData[] = [];
       data.map((r: any) => {
         option.push({ id: r.id.toString(), name: r.name.toString() });
       });
@@ -472,17 +486,17 @@ const fetchDistrict = async (id: string | null, position: string) => {
       .get(config.API.listDistrict(id))
       .then((res) => {
         const data = res.data.result;
-        let option: DataOption[] = [];
+        let option: optionData[] = [];
         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);
@@ -831,4 +845,4 @@ const getClass = (val: boolean) => {
       </q-tr>
     </template>
   </HistoryTable>
-</template>
\ No newline at end of file
+</template>
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..c7347e5f3 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"]);
 
@@ -121,13 +125,13 @@ const fetchPrefix = async () => {
 };
 
 const addChildren = async () => {
-  familyData.value.childrens.push({
-    id: `${familyData.value.childrens.length + 1}`,
-    childrenPrefixId: "",
-    childrenFirstName: "",
-    childrenLastName: "",
-    childrenCareer: "",
-  });
+  //   familyData.value.childrens.push({
+  //     id: `${familyData.value.childrens.length + 1}`,
+  //     childrenPrefixId: "",
+  //     childrenFirstName: "",
+  //     childrenLastName: "",
+  //     childrenCareer: "",
+  //   });
 
   familyData.value.childrens.sort(
     (a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
@@ -150,26 +154,26 @@ const fetchHistory = async () => {
     .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);
+        // const arrayData: ResponseHistory = {
+        //   couple: row.couple ? "1" : "0",
+        //   couplePrefixId: row.couplePrefixId,
+        //   coupleFirstName: row.coupleFirstName,
+        //   coupleLastName: row.coupleLastName,
+        //   coupleLastNameOld: row.coupleLastNameOld,
+        //   coupleCareer: row.coupleCareer,
+        //   fatherPrefixId: row.fatherPrefixId,
+        //   fatherFirstName: row.fatherFirstName,
+        //   fatherLastName: row.fatherLastName,
+        //   fatherCareer: row.fatherCareer,
+        //   motherPrefixId: row.motherPrefixId,
+        //   motherFirstName: row.motherFirstName,
+        //   motherLastName: row.motherLastName,
+        //   motherCareer: row.motherCareer,
+        //   childrens: row.childrens,
+        //   createdFullName: row.createdFullName,
+        //   createdAt: new Date(row.createdAt),
+        // };
+        // familyDataHistory.value.push(arrayData);
       });
     })
     .catch((e) => {
@@ -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..e03652847 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
@@ -2,26 +2,26 @@
 <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";
+  InformationOps,
+  optionData,
+} 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 +32,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 +55,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 +92,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();
 };
 
 /**
@@ -308,51 +114,52 @@ const fetchPerson = async () => {
     .get(config.API.person)
     .then((res) => {
       const data = res.data.result;
-      let optionbloodGroups: DataOption[] = [];
+      let optionbloodGroups: optionData[] = [];
+      console.log(data);
       data.bloodGroups.map((r: any) => {
         optionbloodGroups.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
+          id: r.id ?? "",
+          name: r.name ?? "",
         });
       });
       Ops.value.bloodOps = optionbloodGroups;
       OpsFilter.value.bloodOps = optionbloodGroups;
 
-      let optiongenders: DataOption[] = [];
+      let optiongenders: optionData[] = [];
       data.genders.map((r: any) => {
         optiongenders.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
+          id: r.id ?? "",
+          name: r.name ?? "",
         });
       });
       Ops.value.genderOps = optiongenders;
       OpsFilter.value.genderOps = optiongenders;
 
-      let optionprefixs: DataOption[] = [];
+      let optionprefixs: optionData[] = [];
       data.prefixs.map((r: any) => {
         optionprefixs.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
+          id: r.id ?? "",
+          name: r.name ?? "",
         });
       });
       Ops.value.prefixOps = optionprefixs;
       OpsFilter.value.prefixOps = optionprefixs;
 
-      let optionrelationships: DataOption[] = [];
+      let optionrelationships: optionData[] = [];
       data.relationships.map((r: any) => {
         optionrelationships.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
+          id: r.id ?? "",
+          name: r.name ?? "",
         });
       });
       Ops.value.statusOps = optionrelationships;
       OpsFilter.value.statusOps = optionrelationships;
 
-      let optionreligions: DataOption[] = [];
+      let optionreligions: optionData[] = [];
       data.religions.map((r: any) => {
         optionreligions.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
+          id: r.id ?? "",
+          name: r.name ?? "",
         });
       });
       Ops.value.religionOps = optionreligions;
@@ -364,56 +171,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 +229,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 +257,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 +338,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 +350,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 +418,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 +442,11 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                :model-value="date2Thai(informaData.birthDate)"
+                :model-value="
+                  informaData.dateOfBirth
+                    ? date2Thai(informaData.dateOfBirth)
+                    : ''
+                "
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
                 :label="`${'วัน/เดือน/ปี เกิด'}`"
               >
@@ -793,7 +513,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 +538,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 +575,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 +605,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 +615,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 +623,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 9ca780db6..f0e0fb7ee 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -18,11 +18,11 @@ import router from "@/router";
 let roleAdmin = ref<boolean>(false);
 
 const props = defineProps({
-  statCard:{
-    type:Function,
+  statCard: {
+    type: Function,
     default: () => console.log("getStat"),
-  }
-})
+  },
+});
 const edit = ref<boolean>(true);
 const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
@@ -41,13 +41,7 @@ const files = ref<any>(null);
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const $q = useQuasar(); // show dialog
 
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  dateText,
-  success
-} = mixin;
+const { messageError, showLoader, hideLoader, dateText, success } = mixin;
 
 const route = useRoute();
 const examId = route.params.examId;
@@ -144,22 +138,42 @@ const getTable = async () => {
     .get(config.API.redirectToPage(examIdString))
     .then((res: any) => {
       const dataArray: PartialTableName[] = res.data.result;
-      rows.value = []
+      rows.value = [];
       dataArray.map((data) => {
         const rowData = {
           personalId: data.personalId,
           idCard: data.idCard,
-          fullName: data.fullName,
+          fullName: data.fullName + ' ' + data.idCard,
+          name: data.fullName,
           profilePhoto: data.profilePhoto,
-          organizationName: data.organizationName,
+          organizationName: data.organizationName + ' ' + data.organizationShortName + ' ' + data.positionNumber + ' ' + data.positionPath,
+          orgName: data.organizationName,
           organizationShortName: data.organizationShortName,
           positionNumber: data.positionNumber,
           positionPath: data.positionPath,
           reportingDate: dateText(new Date(data.reportingDate)),
           number: data.number,
-          bmaOfficer: data.bmaOfficer == 'OFFICER' ? 'ขรก.กทม. สามัญ' : data.bmaOfficer == 'EMPLOYEE_PERM' ? 'ลูกจ้างประจำ' : data.bmaOfficer == 'EMPLOYEE_TEMP' ? 'ลูกจ้างชั่วคราว' : data.bmaOfficer == null ? 'บุคคลภายนอก' : '-',
+          bmaOfficer:
+            data.bmaOfficer == "OFFICER"
+              ? "ขรก.กทม. สามัญ"
+              : data.bmaOfficer == "EMPLOYEE_PERM"
+              ? "ลูกจ้างประจำ"
+              : data.bmaOfficer == "EMPLOYEE_TEMP"
+              ? "ลูกจ้างชั่วคราว"
+              : data.bmaOfficer == null
+              ? "บุคคลภายนอก"
+              : "-",
           statusId: data.statusId,
-          statusName: data.statusId == 'UN-CONTAIN' ? 'ยังไม่บรรจุ' : data.statusId == 'PREPARE-CONTAIN' ? 'เตรียมบรรจุ' : data.statusId == 'CONTAIN' ? 'บรรจุแล้ว' : data.statusId == 'DISCLAIM' ? 'สละสิทธิ์' : '-',
+          statusName:
+            data.statusId == "UN-CONTAIN"
+              ? "ยังไม่บรรจุ"
+              : data.statusId == "PREPARE-CONTAIN"
+              ? "เตรียมบรรจุ"
+              : data.statusId == "CONTAIN"
+              ? "บรรจุแล้ว"
+              : data.statusId == "DISCLAIM"
+              ? "สละสิทธิ์"
+              : "-",
           deferment: data.deferment,
         };
 
@@ -179,7 +193,7 @@ const appointModal = ref<boolean>(false);
 const saveDeferment = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      showLoader()
+      showLoader();
       const formData = new FormData();
       formData.append("personalId", personalId.value);
       formData.append("note", userNote.value);
@@ -196,7 +210,7 @@ const saveDeferment = async () => {
         .finally(async () => {
           await getTable();
           props.statCard();
-          userNote.value = ""
+          userNote.value = "";
           modalDefermentDisclaim.value = false;
           hideLoader();
         });
@@ -207,7 +221,7 @@ const saveDeferment = async () => {
 const saveDisclaim = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      showLoader()
+      showLoader();
       const dataPost = {
         note: userNote.value,
         personId: personalId.value,
@@ -220,11 +234,13 @@ const saveDisclaim = async () => {
           note: dataPost.note,
           personalId: dataPost.personId,
         })
-        .then(() => { success($q, "บันทึกสำเร็จ"); })
+        .then(() => {
+          success($q, "บันทึกสำเร็จ");
+        })
         .finally(async () => {
           await getTable();
           props.statCard();
-          userNote.value = ""
+          userNote.value = "";
           modalDefermentDisclaim.value = false;
           hideLoader();
         });
@@ -245,7 +261,7 @@ const getClass = (val: boolean) => {
 
 const selectData = (pid: string) => {
   if (roleAdmin.value === true) {
-    personalId.value = pid
+    personalId.value = pid;
     modal.value = true;
   } else {
     router.push("/placement/detail/" + pid);
@@ -255,7 +271,7 @@ const selectData = (pid: string) => {
 const getNumFile = ref(0);
 const dataInfo = reactive({
   reason: "",
-  reliefDoc: ""
+  reliefDoc: "",
 });
 
 const editDetail = (
@@ -276,12 +292,11 @@ const editDetail = (
     modalDisclaim.value = false;
     modalDefermentDisclaim.value = true;
   } else if (action === "defermentInfo") {
-
     http
       .get(config.API.placementDefermentInfo(props.personalId))
       .then((res: any) => {
         dataInfo.reason = res.data.result.reliefReason;
-        dataInfo.reliefDoc = res.data.result.reliefDoc
+        dataInfo.reliefDoc = res.data.result.reliefDoc;
       })
       .catch((e) => {
         messageError($q, e);
@@ -313,8 +328,8 @@ const openAppointModal = (pid: string) => {
 
 const clickCloseModalTree = async () => {
   await getTable();
-  appointModal.value = false
-}
+  appointModal.value = false;
+};
 
 const validateData = async () => {
   checkValidate.value = true;
@@ -370,188 +385,334 @@ const pagination = ref({
 </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" :role-admin="roleAdmin">
-                                        <template #columns="props">
-                                          <q-tr :props="props">
-                                            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)"
-                                              class="cursor-pointer">
-                                              <template v-if="col.name === 'position'">
-                                                {{ props.rowIndex + 1 }}
-                                              </template>
-                                              <template v-else-if="col.name === 'fullName'" class="table_ellipsis">
-                                                <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-else :src="props.row.avatar" class="col-4 img-info" />
-                                                  <div class="col-4">
-                                                    <div class="text-weight-medium">{{ props.row.fullName }}</div>
-                                                    <div class="text-weight-light">{{ props.row.idCard }}</div>
-                                                  </div>
-                                                </div>
-                                              </template>
-                                              <template v-else-if="col.name === 'number'">
-                                                <div class="text-weight-medium">
-                                                  {{ props.row.number !== null ? props.row.number : "-" }}
-                                                </div>
-                                              </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"
+      :role-admin="roleAdmin"
+    >
+      <template #columns="props">
+        <q-tr :props="props">
+          <q-td
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="selectData(props.row.personalId)"
+            class="cursor-pointer"
+          >
+            <template v-if="col.name === 'position'">
+              {{ props.rowIndex + 1 }}
+            </template>
+            <template
+              v-else-if="col.name === 'fullName'"
+              class="table_ellipsis"
+            >
+              <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-else :src="props.row.avatar" class="col-4 img-info" />
+                <div class="col-4">
+                        <div class="text-weight-medium">{{ props.row.name }}</div>
+                    <div class="text-weight-light">{{ props.row.idCard }}</div>
+                  </div>
+                </div>
+              </template>
+              <template v-else-if="col.name === 'number'">
+                <div class="text-weight-medium">
+                  {{ props.row.number !== null ? props.row.number : "-" }}
+                </div>
+              </template>
 
-                                              <template v-else-if="col.name === 'organizationName'">
-                                                <div v-if="props.row.organizationName !== null ||
-                                                  props.row.positionPath !== null
-                                                  ">
-                                                  <div class="col-4">
-                                                    <div class="text-weight-medium">
-                                                      {{
-                                                        props.row.organizationName !== null
-                                                        ? props.row.organizationName
-                                                        : "-"
-                                                      }}
-                                                      {{
-                                                        props.row.organizationShortName !== null
-                                                        ? `(${props.row.organizationShortName})`
-                                                        : ""
-                                                      }}
-                                                    </div>
-                                                    <div class="text-weight-light">
-                                                      {{
-                                                        props.row.positionPath !== null
-                                                        ? props.row.positionPath
-                                                        : "-"
-                                                      }}
-                                                      {{
-                                                        props.row.positionNumber !== null
-                                                        ? `(${props.row.positionNumber})`
-                                                        : ""
-                                                      }}
-                                                    </div>
-                                                  </div>
-                                                </div>
-                                                <div v-else>
-                                                  <div class="col-4">
-                                                      <div class="text-weight-medium">-</div>
-                                                    </div>
-                                                  </div>
-                                                </template>
-                                                <template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
-                                                  <div class="text-weight-medium">
-                                                    {{ props.row.reportingDate }}
-                                                  </div>
-                                                </template>
-                                                <template v-else-if="col.name === 'bmaOfficer'">
-                                                  <div class="text-weight-medium">
-                                                    {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
-                                                  </div>
-                                                </template>
-                                                <template v-else-if="col.name === 'statusName'">
-                                                  <div class="text-weight-medium">
-                                                    {{ props.row.statusName }}
-                                                  </div>
-                                                </template>
-                                              </q-td>
-                                              <q-td auto-width>
-                                                <q-btn 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 && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
-                                                            @click="openAppointModal(props.row.personalId)">
-                                                            <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                                                              <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 && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
-                                                            @click="editDetail(props.row, 'deferment')">
-                                                            <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                                                              <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.deferment === true && props.row.statusId != 'DISCLAIM'" clickable v-close-popup
-                                                            @click="editDetail(props.row, 'defermentInfo')">
-                                                            <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                                                              <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.statusId === 'UN-CONTAIN' ||
-                                                      props.row.statusId === 'PREPARE-CONTAIN'
-                                                      " clickable v-close-popup
-                                                      @click="editDetail(props.row, 'disclaim')">
-                                                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                                                        <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
-                                                      </q-item-section>
-                                                      <q-item-section>สละสิทธิ์</q-item-section>
-                                                    </q-item>
-                                                    <q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup
-                                                      @click="editDetail(props.row, 'disclaimInfo')">
-                                                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                                                        <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
-                                                      </q-item-section>
-                                                      <q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
-                                                    </q-item>
+              <template v-else-if="col.name === 'organizationName'">
+                <div
+                  v-if="props.row.orgName !== null ||
+                    props.row.positionPath !== null
+                    "
+                >
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{
+                        props.row.orgName !== null
+                        ? props.row.orgName
+                                              : "-"
+                    }}
+                    {{
+                      props.row.organizationShortName !== null
+                        ? `(${props.row.organizationShortName})`
+                        : ""
+                    }}
+                  </div>
+                  <div class="text-weight-light">
+                    {{
+                      props.row.positionPath !== null
+                        ? props.row.positionPath
+                        : "-"
+                    }}
+                    {{
+                      props.row.positionNumber !== null
+                        ? `(${props.row.positionNumber})`
+                        : ""
+                    }}
+                  </div>
+                </div>
+              </div>
+              <div v-else>
+                <div class="col-4">
+                  <div class="text-weight-medium">-</div>
+                </div>
+              </div>
+            </template>
+            <template
+              v-else-if="col.name === 'reportingDate' && col.value !== '-'"
+            >
+              <div class="text-weight-medium">
+                {{ props.row.reportingDate }}
+              </div>
+            </template>
+            <template v-else-if="col.name === 'bmaOfficer'">
+              <div class="text-weight-medium">
+                {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
+              </div>
+            </template>
+            <template v-else-if="col.name === 'statusName'">
+              <div class="text-weight-medium">
+                {{ props.row.statusName }}
+              </div>
+            </template>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              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 && props.row.statusId === 'UN-CONTAIN'"
+                    clickable
+                    v-close-popup
+                    @click="openAppointModal(props.row.personalId)"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
+                    >
+                      <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 && props.row.statusId === 'UN-CONTAIN'"
+                    clickable
+                    v-close-popup
+                    @click="editDetail(props.row, 'deferment')"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
+                    >
+                      <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.deferment === true &&
+                      props.row.statusId != 'DISCLAIM'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="editDetail(props.row, 'defermentInfo')"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
+                    >
+                      <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.statusId === 'UN-CONTAIN' ||
+                      props.row.statusId === 'PREPARE-CONTAIN'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="editDetail(props.row, 'disclaim')"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
+                    >
+                      <q-icon
+                        color="pink"
+                        size="xs"
+                        name="mdi-account-cancel-outline"
+                      />
+                    </q-item-section>
+                    <q-item-section>สละสิทธิ์</q-item-section>
+                  </q-item>
+                  <q-item
+                    v-else-if="props.row.statusId === 'DISCLAIM'"
+                    clickable
+                    v-close-popup
+                    @click="editDetail(props.row, 'disclaimInfo')"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
+                    >
+                      <q-icon
+                        color="pink"
+                        size="xs"
+                        name="mdi-account-cancel-outline"
+                      />
+                    </q-item-section>
+                    <q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </Table>
+  </q-form>
 
-                                                  </q-list>
-                                                </q-menu>
-                                              </q-btn>
-                                            </q-td>
-                                          </q-tr>
-                                        </template>
-                                      </Table>
-                                    </q-form>
+  <!-- เลือกหน่วยงานที่บรรจุ -->
+  <DialogOrgTree
+    v-model:modal="appointModal"
+    :personalId="personalId"
+    :close="clickCloseModalTree"
+  />
 
-                                    <!-- เลือกหน่วยงานที่บรรจุ -->
-                                    <DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />
+  <!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
+  <q-form ref="myForm">
+    <DialogCard
+      v-model:Modal="modal"
+      :personal-id="personalId"
+      :close="clickClose"
+      :validate="validateData"
+    />
+  </q-form>
+  <q-dialog v-model="modalDefermentDisclaim" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${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="userNote"
+              :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>
+            </q-file>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :editvisible="true"
+          :validate="validateData"
+          :save="modalDisclaim ? saveDisclaim : saveDeferment"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
 
-                                    <!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
-                                    <q-form ref="myForm">
-                                      <DialogCard v-model:Modal="modal" :personal-id="personalId" :close="clickClose" :validate="validateData" />
-                                    </q-form>
-                                    <q-dialog v-model="modalDefermentDisclaim" persistent>
-                                      <q-card style="width: 800px">
-                                        <q-form ref="myForm">
-                                          <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${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="userNote"
-                                                :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>
-                                              </q-file>
-                                            </div>
-                                          </q-card-section>
-                                          <q-separator />
-                                                  <DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" />
-                      </q-form>
-                    </q-card>
-                  </q-dialog>
-
-                  <!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
-                  <q-dialog v-model="modalwaitInfo" persistent>
-                    <q-card style="width: 500px; max-width: 500px">
-                      <q-form ref="myForm">
-                        <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
-                        <q-separator />
-                        <q-card-section class="q-p-sm">
-                          <div class="row">
-                            <div class="col-3 text-grey-7">เหตุผล</div>
-                            <div class="col-4">{{ dataInfo.reason }}</div>
-                          </div>
-                          <div v-if="!modalDisclaim" class="row q-pt-md">
-                            <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
-                            <div class="col-2 q-mt-sm">
-                              <q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download" target="_blank" />
-                            </div>
+  <!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
+  <q-dialog v-model="modalwaitInfo" persistent>
+    <q-card style="width: 500px; max-width: 500px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`"
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row">
+            <div class="col-3 text-grey-7">เหตุผล</div>
+            <div class="col-4">{{ dataInfo.reason }}</div>
+          </div>
+          <div v-if="!modalDisclaim" class="row q-pt-md">
+            <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
+            <div class="col-2 q-mt-sm">
+              <q-btn
+                type="a"
+                :href="dataInfo.reliefDoc"
+                color="primary"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-download"
+                target="_blank"
+              />
+            </div>
           </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 657fbfbd7..c433e35b9 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -1,12 +1,12 @@
 import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
 interface DataOption {
-  id: number|null;
-  name:string|null;
+  id: number;
+  name: string;
   disable?: boolean;
 }
 interface DataOption1 {
-  id: string|null;
-  name:string|null;
+  id: string | null;
+  name: string | null;
   disable?: boolean;
 }
 interface DataOptionInsignia {
@@ -15,25 +15,30 @@ interface DataOptionInsignia {
   typeName: string;
 }
 
+interface optionData {
+  id: string;
+  name: string;
+}
+
 interface EduOps {
-  levelOptions: DataOption[];
-  positionPathOptions: DataOption[];
+  levelOptions: optionData[];
+  positionPathOptions: optionData[];
 }
 
 interface InformationOps {
-  prefixOps: DataOption[];
-  genderOps: DataOption[];
-  bloodOps: DataOption[];
-  statusOps: DataOption[];
-  religionOps: DataOption[];
-  employeeClassOps: DataOption[];
-  employeeTypeOps: DataOption[];
+  prefixOps: optionData[];
+  genderOps: optionData[];
+  bloodOps: optionData[];
+  statusOps: optionData[];
+  religionOps: optionData[];
+  employeeClassOps: optionData[];
+  employeeTypeOps: optionData[];
 }
 
 interface AddressOps {
-  provinceOps: DataOption[];
-  districtOps: DataOption[];
-  districtCOps: DataOption[];
+  provinceOps: optionData[];
+  districtOps: optionData[];
+  districtCOps: optionData[];
   subdistrictOps: zipCodeOption[];
   subdistrictCOps: zipCodeOption[];
 }
@@ -57,6 +62,100 @@ 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;
+}
+
+const AddressDataDefualt: Address = {
+  registSubDistrict: "",
+  registSubDistrictId: "",
+  registZipCode: "",
+  registDistrict: "",
+  registDistrictId: "",
+  registProvince: "",
+  registProvinceId: "",
+  currentSubDistrict: "",
+  currentSubDistrictId: "",
+  currentZipCode: "",
+  currentDistrict: "",
+  currentDistrictId: "",
+  currentProvince: "",
+  currentProvinceId: "",
+  registSame: false,
+};
+
 export type {
   DataOption,
   DataOptionInsignia,
@@ -68,4 +167,12 @@ export type {
   DataOption1,
   InsigniaOps,
   CheckboxItem,
+  Property,
+  PointExam,
+  Education,
+  Family,
+  Address,
+  optionData,
 };
+
+export { AddressDataDefualt };