diff --git a/src/components/DialogWorkflow.vue b/src/components/DialogWorkflow.vue
new file mode 100644
index 000000000..28cbca153
--- /dev/null
+++ b/src/components/DialogWorkflow.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const operator = defineModel<string>("operator", {
+  default: "officer",
+});
+
+/** table*/
+const rows = ref<any[]>([
+  {
+    fullName: "นายศรัณย์ ศิลาดี",
+    position: "นักบริหาร",
+    posType: "บริหาร(สูง)",
+    organization: "",
+  },
+]);
+const selected = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    field: "organization",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function fetchLists() {}
+
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+
+function convertLabelBtn(name: string) {
+  switch (name) {
+    case "officer":
+      return "การเจ้าหน้าที่";
+    case "personnelOfficer":
+      return "สำนักงานการเจ้าหน้าที่";
+    case "commander":
+      return "ผู้บังคับบัญชา";
+    case "authority":
+      return "ผู้มีอำนาจ";
+  }
+}
+
+function onCloseModal() {
+  modal.value = false;
+  selected.value = [];
+  rows.value = [];
+}
+
+watch(modal, (val) => {
+  if (val) {
+    fetchLists();
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 700px">
+      <q-form q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="`เลือกรายชื่อ`" :close="onCloseModal" />
+        <q-separator />
+
+        <q-card-section>
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            flat
+            bordered
+            :paging="true"
+            dense
+            :rows-per-page-options="[10, 25, 50, 100]"
+            class="tableTb"
+            selection="single"
+            v-model:selected="selected"
+          >
+            <template v-slot:header-selection="scope">
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="scope.checkBox"
+              />
+            </template>
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table></q-card-section
+        >
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            :label="convertLabelBtn(operator)"
+            color="public"
+            type="submit"
+            :disable="selected.length === 0"
+          >
+            <q-tooltip>{{ convertLabelBtn(operator) }}</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_placement/components/PersonalDetail/CheckInformation/01_FormInformations.vue b/src/modules/05_placement/components/PersonalDetail/CheckInformation/01_FormInformations.vue
index 497c9ec58..3404b2b22 100644
--- a/src/modules/05_placement/components/PersonalDetail/CheckInformation/01_FormInformations.vue
+++ b/src/modules/05_placement/components/PersonalDetail/CheckInformation/01_FormInformations.vue
@@ -141,6 +141,7 @@ function filterSelector(val: string, update: Function, refData: string) {
         hide-bottom-space
         dense
         lazy-rules
+        readonly
         outlined
         v-model="informaData.idCard"
         maxlength="13"
@@ -164,6 +165,7 @@ function filterSelector(val: string, update: Function, refData: string) {
         lazy-rules
         v-model="informaData.prefixId"
         emit-value
+        readonly
         map-options
         option-label="name"
         :options="Ops.prefixOps"
@@ -181,6 +183,7 @@ function filterSelector(val: string, update: Function, refData: string) {
         class="inputgreen"
         hide-bottom-space
         outlined
+        readonly
         dense
         lazy-rules
         v-model="informaData.firstname"
@@ -193,6 +196,7 @@ function filterSelector(val: string, update: Function, refData: string) {
         class="inputgreen"
         hide-bottom-space
         outlined
+        readonly
         dense
         lazy-rules
         v-model="informaData.lastname"
@@ -205,6 +209,7 @@ function filterSelector(val: string, update: Function, refData: string) {
         v-model="informaData.dateOfBirth"
         :locale="'th'"
         autoApply
+        readonly
         :enableTimePicker="false"
         week-start="0"
         :max-date="new Date()"
@@ -220,6 +225,7 @@ function filterSelector(val: string, update: Function, refData: string) {
           <q-input
             class="inputgreen"
             hide-bottom-space
+            readonly
             outlined
             dense
             :model-value="
@@ -263,6 +269,7 @@ function filterSelector(val: string, update: Function, refData: string) {
         lazy-rules
         v-model="informaData.genderId"
         emit-value
+        readonly
         map-options
         option-label="name"
         :options="Ops.genderOps"
@@ -283,6 +290,7 @@ function filterSelector(val: string, update: Function, refData: string) {
         outlined
         dense
         lazy-rules
+        readonly
         v-model="informaData.relationshipId"
         emit-value
         map-options
@@ -304,6 +312,7 @@ function filterSelector(val: string, update: Function, refData: string) {
         outlined
         dense
         lazy-rules
+        readonly
         v-model="informaData.bloodGroupId"
         emit-value
         map-options
@@ -321,24 +330,20 @@ function filterSelector(val: string, update: Function, refData: string) {
     <div class="col-xs-6 col-sm-3 col-md-3">
       <q-input
         class="inputgreen"
-        hide-bottom-space
         outlined
+        readonly
         dense
-        lazy-rules
         v-model="informaData.nationality"
-        :rules="[(val:string) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
         :label="`${'สัญชาติ'}`"
       />
     </div>
     <div class="col-xs-6 col-sm-3 col-md-3">
       <q-input
         class="inputgreen"
-        hide-bottom-space
         outlined
+        readonly
         dense
-        lazy-rules
         v-model="informaData.race"
-        :rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
         :label="`${'เชื้อชาติ'}`"
       />
     </div>
@@ -350,6 +355,7 @@ function filterSelector(val: string, update: Function, refData: string) {
         outlined
         dense
         lazy-rules
+        readonly
         v-model="informaData.religionId"
         emit-value
         map-options
@@ -370,6 +376,7 @@ function filterSelector(val: string, update: Function, refData: string) {
         outlined
         dense
         lazy-rules
+        readonly
         type="tel"
         class="inputgreen"
         v-model="informaData.telephone"
diff --git a/src/modules/05_placement/components/PersonalDetail/CheckInformation/02_FormAddress.vue b/src/modules/05_placement/components/PersonalDetail/CheckInformation/02_FormAddress.vue
index dc2683063..d683a8f6c 100644
--- a/src/modules/05_placement/components/PersonalDetail/CheckInformation/02_FormAddress.vue
+++ b/src/modules/05_placement/components/PersonalDetail/CheckInformation/02_FormAddress.vue
@@ -337,6 +337,7 @@ onMounted(() => {
         outlined
         dense
         lazy-rules
+        readonly
         type="textarea"
         autogrow
         v-model="addressData.registAddress"
@@ -351,6 +352,7 @@ onMounted(() => {
         :rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
         outlined
         dense
+        readonly
         lazy-rules
         v-model="registAddress.provinceId"
         emit-value
@@ -374,6 +376,7 @@ onMounted(() => {
         :rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
         outlined
         dense
+        readonly
         lazy-rules
         v-model="registAddress.districtId"
         emit-value
@@ -398,6 +401,7 @@ onMounted(() => {
         outlined
         dense
         lazy-rules
+        readonly
         v-model="registAddress.subDistrictId"
         emit-value
         map-options
@@ -436,6 +440,7 @@ onMounted(() => {
         checked-icon="task_alt"
         unchecked-icon="panorama_fish_eye"
         val="1"
+        disable
         label="ใช่"
         dense
       />
@@ -444,6 +449,7 @@ onMounted(() => {
         checked-icon="task_alt"
         unchecked-icon="panorama_fish_eye"
         val="0"
+        disable
         label="ไม่"
         dense
       />
@@ -456,6 +462,7 @@ onMounted(() => {
         outlined
         dense
         lazy-rules
+        readonly
         type="textarea"
         autogrow
         v-model="addressData.currentAddress"
@@ -474,6 +481,7 @@ onMounted(() => {
         outlined
         dense
         lazy-rules
+        readonly
         v-model="currentAddress.provinceId"
         emit-value
         map-options
@@ -499,6 +507,7 @@ onMounted(() => {
         :rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
         outlined
         dense
+        readonly
         lazy-rules
         v-model="currentAddress.districtId"
         emit-value
@@ -525,6 +534,7 @@ onMounted(() => {
         :rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
         outlined
         dense
+        readonly
         lazy-rules
         v-model="currentAddress.subDistrictId"
         emit-value
diff --git a/src/modules/05_placement/components/PersonalDetail/CheckInformation/03_FormFamily.vue b/src/modules/05_placement/components/PersonalDetail/CheckInformation/03_FormFamily.vue
index 802e06fd5..dd66018c3 100644
--- a/src/modules/05_placement/components/PersonalDetail/CheckInformation/03_FormFamily.vue
+++ b/src/modules/05_placement/components/PersonalDetail/CheckInformation/03_FormFamily.vue
@@ -56,6 +56,7 @@ function selectRadio(e: boolean) {
         v-model="familyData.fatherPrefixId"
         emit-value
         map-options
+        readonly
         option-label="name"
         :options="Ops.prefixOps"
         option-value="id"
@@ -73,6 +74,7 @@ function selectRadio(e: boolean) {
         class="inputgreen"
         hide-bottom-space
         outlined
+        readonly
         dense
         lazy-rules
         v-model="familyData.fatherFirstName"
@@ -86,6 +88,7 @@ function selectRadio(e: boolean) {
         hide-bottom-space
         outlined
         dense
+        readonly
         lazy-rules
         v-model="familyData.fatherLastName"
         :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
@@ -98,6 +101,7 @@ function selectRadio(e: boolean) {
         hide-bottom-space
         outlined
         dense
+        readonly
         lazy-rules
         v-model="familyData.fatherOccupation"
         :label="`${'อาชีพ'}`"
@@ -113,6 +117,7 @@ function selectRadio(e: boolean) {
         :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
         outlined
         dense
+        readonly
         lazy-rules
         v-model="familyData.motherPrefixId"
         emit-value
@@ -134,6 +139,7 @@ function selectRadio(e: boolean) {
         class="inputgreen"
         hide-bottom-space
         outlined
+        readonly
         dense
         lazy-rules
         v-model="familyData.motherFirstName"
@@ -146,6 +152,7 @@ function selectRadio(e: boolean) {
         class="inputgreen"
         hide-bottom-space
         outlined
+        readonly
         dense
         lazy-rules
         v-model="familyData.motherLastName"
@@ -158,6 +165,7 @@ function selectRadio(e: boolean) {
         class="inputgreen"
         hide-bottom-space
         outlined
+        readonly
         dense
         lazy-rules
         v-model="familyData.motherOccupation"
@@ -174,6 +182,7 @@ function selectRadio(e: boolean) {
         val="1"
         label="มี"
         dense
+        disable
         @update:model-value="selectRadio"
       />
       <q-radio
@@ -183,6 +192,7 @@ function selectRadio(e: boolean) {
         val="0"
         label="ไม่มี"
         dense
+        disable
         @update:model-value="selectRadio"
       />
     </div>
@@ -195,6 +205,7 @@ function selectRadio(e: boolean) {
         outlined
         dense
         lazy-rules
+        readonly
         v-model="familyData.marryPrefixId"
         emit-value
         map-options
@@ -217,6 +228,7 @@ function selectRadio(e: boolean) {
         outlined
         dense
         lazy-rules
+        readonly
         v-model="familyData.marryFirstName"
         :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
         :label="`${'ชื่อ'}`"
@@ -228,6 +240,7 @@ function selectRadio(e: boolean) {
         hide-bottom-space
         outlined
         dense
+        readonly
         lazy-rules
         v-model="familyData.marryLastName"
         :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
@@ -239,6 +252,7 @@ function selectRadio(e: boolean) {
         class="inputgreen"
         hide-bottom-space
         outlined
+        readonly
         dense
         lazy-rules
         v-model="familyData.marryOccupation"
diff --git a/src/modules/05_placement/components/PersonalDetail/DetailMain.vue b/src/modules/05_placement/components/PersonalDetail/DetailMain.vue
index 55d6f0036..3cdb7a10f 100644
--- a/src/modules/05_placement/components/PersonalDetail/DetailMain.vue
+++ b/src/modules/05_placement/components/PersonalDetail/DetailMain.vue
@@ -603,6 +603,7 @@ onMounted(async () => {
 
   <DialogCheckInformation
     v-model:modal="modalCheck"
+    :InformationData="InformationData"
     :address-data="AddressData"
     :family-data="FamilyData"
     :Ops="Ops"
diff --git a/src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue b/src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue
index 4ff2f1618..e0c0cb591 100644
--- a/src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue
+++ b/src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue
@@ -12,6 +12,7 @@ import {
   FamilyDataDefualt,
 } from "@/modules/05_placement/interface/index/Main";
 
+import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
 import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
 import type {
   Address as AddressType,
@@ -47,6 +48,11 @@ const props = defineProps({
     type: Object as PropType<AddressType>,
     default: AddressDataDefualt,
   },
+  InformationData: {
+    type: Object as PropType<Information>,
+    default: defaultInformation,
+  },
+
   familyData: {
     type: Object as PropType<Family>,
     default: FamilyDataDefualt,
@@ -202,10 +208,12 @@ function onSubmit() {
     coupleLastName: familyData.value.marryLastName,
     coupleLastNameOld: "",
     coupleCareer: familyData.value.marryOccupation,
+    
     fatherPrefix: familyData.value.fatherPrefixId,
     fatherFirstName: familyData.value.fatherFirstName,
     fatherLastName: familyData.value.fatherLastName,
     fatherCareer: familyData.value.fatherOccupation,
+
     motherPrefix: familyData.value.motherPrefixId,
     motherFirstName: familyData.value.motherFirstName,
     motherLastName: familyData.value.motherLastName,
@@ -221,6 +229,30 @@ async function amiRequest() {
   const profile = await store.amiRequest($q, 5000, idCard.value, "001");
   if (profile) {
     data.value = profile;
+
+    formInformations.idCard = idCard.value;
+    formInformations.prefix = data.value.titleName;
+    formInformations.prefixId = data.value.titleName;
+    formInformations.fullName = data.value.fullnameAndRank;
+    formInformations.firstname = data.value.firstName;
+    formInformations.lastname = data.value.lastname;
+    formInformations.nationality = data.value.nationalityDesc;
+    formInformations.race = props.InformationData.race;
+    formInformations.dateOfBirth = data.value.dateOfBirth;
+    formInformations.age = data.value.age;
+    formInformations.telephone = props.InformationData.telephone;
+    formInformations.gender = data.value.genderDesc;
+    formInformations.genderId = data.value.genderDesc;
+    formInformations.relationship = props.InformationData.relationship;
+    formInformations.relationshipId = props.InformationData.relationshipId;
+    formInformations.bloodGroup = props.InformationData.bloodGroup;
+    formInformations.bloodGroupId = props.InformationData.bloodGroupId;
+    formInformations.religion = props.InformationData.religionId;
+    formInformations.religionId = props.InformationData.religionId;
+
+    familyData.value.fatherFirstName = data.value.fatherName
+    familyData.value.motherFirstName = data.value.motherName
+
   }
 
   data.value = {
@@ -241,14 +273,17 @@ async function amiRequest() {
     statusOfPersonDesc: "บุคคลนี้มีภูมิลำเนาอยู่ในบ้านนี้",
     dateOfMoveIn: 25580728,
     age: 45,
+
     fatherPersonalID: 3102100621479,
     fatherName: "บุญเชิด",
     fatherNationalityCode: 99,
     fatherNationalityDesc: "ไทย",
+
     motherPersonalID: 3102100621487,
     motherName: "พยอม",
     motherNationalityCode: 99,
     motherNationalityDesc: "ไทย",
+
     fullnameAndRank: "นายสุพลชัย พูลสวัสดิ์",
     englishTitleDesc: "MR.",
     englishFirstName: "SUPHONCHAI",
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
index 7a472a8ea..815fa6d61 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
@@ -199,14 +199,11 @@ onMounted(async () => {
           <selector
             :hide-dropdown-icon="!edit"
             @update:modelValue="checkEdit"
-            hide-bottom-space
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
             :outlined="edit"
             dense
-            lazy-rules
             v-model="familyData.fatherPrefixId"
             emit-value
             map-options
@@ -225,14 +222,11 @@ onMounted(async () => {
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
             :class="getClass(edit)"
-            hide-bottom-space
             :outlined="edit"
             dense
-            lazy-rules
             :readonly="!edit"
             :borderless="!edit"
             v-model="familyData.fatherFirstName"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
             @update:modelValue="checkEdit"
           />
@@ -240,14 +234,11 @@ onMounted(async () => {
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
             :class="getClass(edit)"
-            hide-bottom-space
             :outlined="edit"
             dense
-            lazy-rules
             :readonly="!edit"
             :borderless="!edit"
             v-model="familyData.fatherLastName"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
             @update:modelValue="checkEdit"
           />
@@ -272,14 +263,11 @@ onMounted(async () => {
         <div class="col-xs-12 col-sm-3 col-md-3">
           <selector
             :hide-dropdown-icon="!edit"
-            hide-bottom-space
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
             :outlined="edit"
             dense
-            lazy-rules
             v-model="familyData.motherPrefixId"
             emit-value
             map-options
@@ -299,14 +287,11 @@ onMounted(async () => {
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
             :class="getClass(edit)"
-            hide-bottom-space
             :outlined="edit"
             dense
-            lazy-rules
             :readonly="!edit"
             :borderless="!edit"
             v-model="familyData.motherFirstName"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
             @update:modelValue="checkEdit"
           />
@@ -314,14 +299,11 @@ onMounted(async () => {
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
             :class="getClass(edit)"
-            hide-bottom-space
             :outlined="edit"
             dense
-            lazy-rules
             :readonly="!edit"
             :borderless="!edit"
             v-model="familyData.motherLastName"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
             @update:modelValue="checkEdit"
           />
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
index c85ec694e..47c53d6c5 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
@@ -509,14 +509,11 @@ onMounted(async () => {
           <q-input
             @update:modelValue="checkEdit"
             :class="getClass(edit)"
-            hide-bottom-space
             :outlined="edit"
             dense
-            lazy-rules
             :readonly="!edit"
             :borderless="!edit"
             v-model="informaData.nationality"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
             :label="`${'สัญชาติ'}`"
           />
         </div>
@@ -524,14 +521,11 @@ onMounted(async () => {
           <q-input
             @update:modelValue="checkEdit"
             :class="getClass(edit)"
-            hide-bottom-space
             :outlined="edit"
             dense
-            lazy-rules
             :readonly="!edit"
             :borderless="!edit"
             v-model="informaData.race"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
             :label="`${'เชื้อชาติ'}`"
           />
         </div>