diff --git a/src/api/registry/api.profile.ts b/src/api/registry/api.profile.ts
index 60b262952..825354745 100644
--- a/src/api/registry/api.profile.ts
+++ b/src/api/registry/api.profile.ts
@@ -188,10 +188,8 @@ export default {
 
   //ระบบ ลูกจ้างชั่คราว
   employmentId: (profileId: string) => `${profile}employment/${profileId}`,
-  employmentHistoryId: (employmentId: string) => `${profile}employment/history/${employmentId}`
-
-
-
-
+  employmentHistoryId: (employmentId: string) =>
+    `${profile}employment/history/${employmentId}`,
 
+  searchPersonal: () => `${profile}search-personal`,
 };
diff --git a/src/components/Dialogs/AddPersonal.vue b/src/components/Dialogs/AddPersonal.vue
index 91fa3f1fe..7e45d08c4 100644
--- a/src/components/Dialogs/AddPersonal.vue
+++ b/src/components/Dialogs/AddPersonal.vue
@@ -1,54 +1,58 @@
 <script setup lang="ts">
-import { ref, onMounted,watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
+import type { ResponsePreson } from "@/interface/response/listPerson";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm, dialogMessageNotify } = mixin;
+const { dialogConfirm, dialogMessageNotify, showLoader, hideLoader } = mixin;
 
 const data = [
-    {
-      id: "001",
-      idcard: "0000000000001",
-      prefix: "นาง",
-      firstName: "ศิรินภา",
-      lastName: "คงน้อย",
-      posNo: "สกก.1",
-      position: "ตำเเหน่ง1",
-      positionLevel: "level1",
-      salary: "100",
-      organization: "สำนักงาน 1",
-      name: "นางศิรินภา คงน้อย",
-    },
-    {
-      id: "002",
-      idcard: "0000000000002",
-      prefix: "นาย",
-      firstName: "แก้ว",
-      lastName: "คำ",
-      posNo: "สกก.1",
-      position: "ตำแหน่ง2",
-      positionLevel: "level2",
-      salary: "100",
-      organization: "สำนักงาน 2",
-      name: "นางแก้ว คำ",
-    },
-    {
-      id: "003",
-      idcard: "0000000000003",
-      prefix: "นาย",
-      firstName: "ภัทรานุย",
-      lastName: "คงนอย",
-      posNo: "สกก.1",
-      position: "ตำแหน่ง2",
-      positionLevel: "level3",
-      salary: "100",
-      organization: "สำนักงาน 3",
-      name: "นางภัทรานุย คงนอย",
-    },
-  ];
+  {
+    id: "001",
+    idcard: "0000000000001",
+    prefix: "นาง",
+    firstName: "ศิรินภา",
+    lastName: "คงน้อย",
+    posNo: "สกก.1",
+    position: "ตำเเหน่ง1",
+    positionLevel: "level1",
+    salary: "100",
+    organization: "สำนักงาน 1",
+    name: "นางศิรินภา คงน้อย",
+  },
+  {
+    id: "002",
+    idcard: "0000000000002",
+    prefix: "นาย",
+    firstName: "แก้ว",
+    lastName: "คำ",
+    posNo: "สกก.1",
+    position: "ตำแหน่ง2",
+    positionLevel: "level2",
+    salary: "100",
+    organization: "สำนักงาน 2",
+    name: "นางแก้ว คำ",
+  },
+  {
+    id: "003",
+    idcard: "0000000000003",
+    prefix: "นาย",
+    firstName: "ภัทรานุย",
+    lastName: "คงนอย",
+    posNo: "สกก.1",
+    position: "ตำแหน่ง2",
+    positionLevel: "level3",
+    salary: "100",
+    organization: "สำนักงาน 3",
+    name: "นางภัทรานุย คงนอย",
+  },
+];
 
 interface typeOp {
   id: string;
@@ -170,9 +174,9 @@ const columns = ref<QTableProps["columns"]>([
 
 /** รับค่ามาจาก หน้าหลัก */
 const props = defineProps({
-  checkId:{
-    type:Array,
-    default:[]
+  checkId: {
+    type: Array,
+    default: [],
   },
   modal: {
     type: Boolean,
@@ -215,7 +219,7 @@ async function close() {
 /** เปิด dialog ยืนยัน */
 function savePost() {
   if (selected.value.length != 0) {
-    dialogConfirm($q, () => saveData());
+    dialogConfirm($q, () => console.log(selected.value));
   } else {
     dialogMessageNotify($q, "กรุณาเลือกอย่างน้อย 1 รายการ");
   }
@@ -227,15 +231,45 @@ function saveData() {
   emit("returnData", selected.value);
 }
 
+const searchRef = ref<any>(null);
 /** input ค้นหา */
-function searchInput() {
-  const data = dataObject.value;
-  if (type.value === "idcard") {
-    rows.value = data.filter((item: any) => item.idcard === search.value);
-  } else if (type.value === "firstname") {
-    rows.value = data.filter((item: any) => item.firstName === search.value);
-  } else if (type.value === "lastname") {
-    rows.value = data.filter((item: any) => item.lastName === search.value);
+async function searchInput() {
+  searchRef.value.validate();
+  if (!searchRef.value.hasError) {
+    showLoader();
+    const body = {
+      fieldName: type.value,
+      keyword: search.value,
+    };
+    await http
+      .post(config.API.searchPersonal(), body)
+      .then((res) => {
+        const data = res.data.result;
+        const list = data.map((e: ResponsePreson) => ({
+          personId: e.personId,
+          idcard: e.idcard,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          fullName: `${e.prefix}${e.firstName}  ${e.lastName}`,
+          posNo: e.posNo ?? "-",
+          position: e.position ?? "-",
+          positionLevel: e.positionLevel ?? "-",
+          salary: e.salaries ?? "-",
+          organization: e.organization ?? "-",
+          phone: e.phone ?? "-",
+          email: e.email ?? "-",
+        }));
+
+        rows.value = list;
+        console.log(list);
+      })
+      .catch((err) => {
+        console.log(err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   }
 }
 
@@ -248,23 +282,27 @@ function updateInput() {
 
 /** update เมื่อเปลี่ยน option */
 function updateSelect() {
-  rows.value = dataObject.value;
   search.value = "";
 }
 
-watch(() => props.modal, () => {
-  if (props.modal === true) {
-    console.log(props.checkId);
-    const dataProps = props.checkId.map((item: any) => item.idcard);
-    const dataMapId = data.filter((item: any) => !dataProps.includes(item.idcard));
-    rows.value = dataMapId
-  }
-});
+// watch(
+//   () => props.modal,
+//   () => {
+//     if (props.modal === true) {
+//       console.log(props.checkId);
+//       const dataProps = props.checkId.map((item: any) => item.idcard);
+//       const dataMapId = data.filter(
+//         (item: any) => !dataProps.includes(item.idcard)
+//       );
+//       rows.value = dataMapId;
+//     }
+//   }
+// );
 
 /** เรียกข้อมูลเมื่อเริ่มโหลด หน้า dialog mock */
 onMounted(() => {
-  dataObject.value = data;
-  rows.value = data;
+  // dataObject.value = data;
+  // rows.value = data;
 });
 </script>
 
@@ -304,12 +342,13 @@ onMounted(() => {
 
           <div class="col-12 col-sm-6 col-md-6">
             <q-input
+              ref="searchRef"
               v-model="search"
               outlined
               clearable
-              @update:model-value="updateInput"
               dense
               label="คำค้น"
+              :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
             />
           </div>
 
@@ -330,7 +369,7 @@ onMounted(() => {
             ref="table"
             :columns="columns"
             :rows="rows"
-            row-key="id"
+            row-key="personId"
             flat
             bordered
             :paging="true"
@@ -383,8 +422,8 @@ onMounted(() => {
                     {{ props.rowIndex + 1 }}
                   </div>
                   <div v-if="col.name === 'fullName'">
-                  {{ props.prefix }}
-                </div>
+                    {{ props.prefix }}
+                  </div>
                   <div>
                     {{ col.value }}
                   </div>
diff --git a/src/interface/response/listPerson.ts b/src/interface/response/listPerson.ts
new file mode 100644
index 000000000..47c39277a
--- /dev/null
+++ b/src/interface/response/listPerson.ts
@@ -0,0 +1,16 @@
+interface ResponsePreson {
+  personId: string; //id อ้างอิง profile
+  idcard: string; //รหัสบัตรประชาชน
+  prefix: string; //คำนำหน้า
+  firstName: string; //ชื่อ
+  lastName: string; //นามสกุล
+  posNo: string; //เลขที่ตำแหน่ง
+  position: string; //ตำแหน่ง
+  positionLevel: string; //ระดับ
+  salaries: number; //เงินเดือน
+  organization: string; //สังกัด
+  email: string; //อีเมล
+  phone: string; //เบอร์โทรศัพท์
+}
+
+export type { ResponsePreson };