diff --git a/src/components/Dialogs/AddPersonal.vue b/src/components/Dialogs/AddPersonal.vue
new file mode 100644
index 000000000..472ebae0d
--- /dev/null
+++ b/src/components/Dialogs/AddPersonal.vue
@@ -0,0 +1,360 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+interface typeOp {
+  id: string;
+  name: string;
+}
+
+interface tableType {
+  id: string;
+  cardId: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  position: string;
+  level: string;
+  degree: string;
+  oc: string;
+  fullName: string;
+}
+
+const rows = ref<tableType[]>([]);
+const type = ref<string>("001");
+const search = ref<string>("");
+const selected = ref<any>([]);
+const dataObject = ref<any>([]);
+
+const typeOps = ref<typeOp[]>([
+  { id: "001", name: "เลขประจำตัวประชาชน" },
+  { id: "002", name: "ชื่อ" },
+  { id: "003", name: "นามสกุล" },
+]);
+
+/** หัวข้อที่เเสดงในตาราง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "cardId",
+  "fullName",
+  "position",
+  "level",
+]);
+
+/** หัวตาราง */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "cardId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "cardId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    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: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** รับค่ามาจาก หน้าหลัก */
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  desc: {
+    type: String,
+    default: "",
+  },
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+/** ปิด dialog */
+async function close() {
+  console.log("close");
+  props.close();
+}
+
+/** เปิด dialog ยืนยัน */
+function savePost() {
+  dialogConfirm($q, () => saveData());
+}
+
+/** save data หลังจาก ยืนยัน */
+function saveData() {
+  console.log("save #in component", selected.value);
+  props.save();
+}
+
+/** input ค้นหา */
+function searchInput() {
+  const data = dataObject.value;
+  if (type.value === "001") {
+    rows.value = data.filter((item: any) => item.cardId === search.value);
+  } else if (type.value === "002") {
+    rows.value = data.filter((item: any) => item.firstName === search.value);
+  } else if (type.value === "003") {
+    rows.value = data.filter((item: any) => item.lastName === search.value);
+  }
+}
+
+/** update ตาราง เมื่อ input ว่าง */
+function updateInput() {
+  if (!search.value) {
+    rows.value = dataObject.value;
+  }
+}
+
+/** update เมื่อเปลี่ยน option */
+function updateSelect() {
+  rows.value = dataObject.value;
+  search.value = "";
+}
+
+/** เรียกข้อมูลเมื่อเริ่มโหลด หน้า dialog mock */
+onMounted(() => {
+  const data = [
+    {
+      id: "001",
+      cardId: "0000000000001",
+      prefix: "นาง",
+      firstName: "ศิรินภา",
+      lastName: "คงน้อย",
+      position: "ตำเเหน่ง1",
+      level: "level1",
+      degree: "ป.ตรี",
+      oc: "สำนักงาน 1",
+      fullName: "นางศิรินภา คงน้อย",
+    },
+    {
+      id: "002",
+      cardId: "0000000000002",
+      prefix: "นาย",
+      firstName: "แก้ว",
+      lastName: "คำ",
+      position: "ตำแหน่ง2",
+      level: "level2",
+      degree: "ป.โท",
+      oc: "สำนักงาน 2",
+      fullName: "นางแก้ว คำ",
+    },
+    {
+      id: "003",
+      cardId: "0000000000003",
+      prefix: "นาย",
+      firstName: "ภัทรานุย",
+      lastName: "คงนอย",
+      position: "ตำแหน่ง2",
+      level: "level3",
+      degree: "ป.เอก",
+      oc: "สำนักงาน 3",
+      fullName: "นางภัทรานุย คงนอย",
+    },
+  ];
+
+  dataObject.value = data;
+  rows.value = data;
+});
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 60vw">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold">{{
+          props.title
+        }}</q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="close"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+      <q-card-section class="q-pa-md bg-grey-1">
+        <div class="row col-12 q-col-gutter-sm items-start">
+          <div class="col-12 col-sm-6 col-md-4">
+            <q-select
+              v-model="type"
+              :options="typeOps"
+              emit-value
+              dense
+              @update:model-value="updateSelect"
+              map-options
+              outlined
+              option-label="name"
+              option-value="id"
+            />
+          </div>
+
+          <div class="col-12 col-sm-6 col-md-4">
+            <q-input
+              v-model="search"
+              outlined
+              clearable
+              @update:model-value="updateInput"
+              dense
+              :label="
+                type === '001'
+                  ? 'ค้นหาจากเลขบัตรประชาชน'
+                  : type === '002'
+                  ? 'ค้นหาจากชื่อ'
+                  : type === '003'
+                  ? 'ค้นหาจากนามสกุล'
+                  : ''
+              "
+            />
+          </div>
+
+          <div class="col-12 col-sm-6 col-md-4">
+            <q-btn
+              color="public"
+              label="ค้นหา"
+              class="full-width"
+              style="padding: 7px 0 7px 0"
+              @click="searchInput()"
+            >
+            </q-btn>
+          </div>
+        </div>
+
+        <div class="full-width q-mt-sm">
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+            selection="multiple"
+            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 class="text-center">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-th>
+                <q-th
+                  v-for="col in props.cols"
+                  :key="col.name"
+                  :props="props"
+                  style="color: #000000; font-weight: 500"
+                >
+                  <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">
+                <td class="text-center">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <div class="row justify-end q-px-md q-py-sm items-center">
+        <q-btn
+          dense
+          push
+          unelevated
+          color="positive"
+          id="onSubmit"
+          class="q-px-md q-py-xs"
+          @click="savePost"
+        >
+          <q-icon left name="add" />
+          <div>เพิ่ม</div>
+          <!-- icon="mdi-content-save-outline" -->
+          <q-tooltip>บันทึก</q-tooltip>
+        </q-btn>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>