diff --git a/src/components/information/Address.vue b/src/components/information/Address.vue
new file mode 100644
index 000000000..8881a3505
--- /dev/null
+++ b/src/components/information/Address.vue
@@ -0,0 +1,875 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลที่อยู่"
+      icon="mdi-map-marker"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.address"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
+            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
+          />
+        </div>
+        <div class="col-xs-6 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="addressData.provinceId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.provinceOps"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value:string) => selectProvince(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 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="addressData.districtId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.districtOps"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value:string) => selectDistrict(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 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="addressData.subdistrictId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.subdistrictOps"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value:string) => selectSubDistrict(value, '1')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="codep"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-lg"><q-separator /></div>
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-bold"
+            >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
+          >
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="ใช่"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="addressData.same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่"
+            dense
+            :disable="!edit"
+          />
+        </div>
+
+        <div class="col-xs-12" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="textarea"
+            autogrow
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="addressData.addressC"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+            :label="`${'ที่อยู่ปัจจุบัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <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="addressData.provinceIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.provinceOps"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value:string) => selectProvince(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <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="addressData.districtIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.districtCOps"
+            option-value="id"
+            :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value:string) => selectDistrict(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <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="addressData.subdistrictIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.subdistrictCOps"
+            option-value="id"
+            :label="`${'ตำบล / แขวง'}`"
+            @update:model-value="(value:string) => selectSubDistrict(value, '2')"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            v-model="codec"
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :label="`${'รหัสไปรษณีย์'}`"
+          />
+        </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 == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="col.name == 'registrationSame'"
+            class="table_ellipsis"
+          >
+            {{ col.value ? "ใช่" : "ไม่" }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type {
+  Address,
+  DataOption,
+  zipCodeOption,
+} from "@/modules/04_registry/components/profileType";
+import { defaultAddress } from "@/modules/04_registry/components/profileType";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Address";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Address";
+import HistoryTable from "@/components/TableHistory.vue";
+import { useRoute } from "vue-router";
+import type { AddressOps } from "@/modules/04_registry/interface/index/Main";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, messageError } = mixin;
+const edit = ref<boolean>(false);
+const addressData = ref<Address>(defaultAddress);
+const myform = ref<any>();
+const codep = ref<string>("");
+const codec = ref<string>("");
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const Ops = ref<AddressOps>({
+  provinceOps: [],
+  districtOps: [],
+  districtCOps: [],
+  subdistrictOps: [],
+  subdistrictCOps: [],
+});
+const OpsFilter = ref<AddressOps>({
+  provinceOps: [],
+  districtOps: [],
+  districtCOps: [],
+  subdistrictOps: [],
+  subdistrictCOps: [],
+});
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "registrationAddress",
+    align: "left",
+    label: "ที่อยู่ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationAddress",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationProvince",
+    align: "left",
+    label: "จังหวัดตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationProvince",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationDistrict",
+    align: "left",
+    label: "เขต/อำเภอตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationSubDistrict",
+    align: "left",
+    label: "ตำบล/แขวงตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationSubDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationZipCode",
+    align: "left",
+    label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationZipCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationSame",
+    align: "left",
+    label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationSame",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentAddress",
+    align: "left",
+    label: "ที่อยู่ปัจจุบัน",
+    sortable: true,
+    field: "currentAddress",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentProvince",
+    align: "left",
+    label: "จังหวัดปัจจุบัน",
+    sortable: true,
+    field: "currentProvince",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentDistrict",
+    align: "left",
+    label: "เขต/อำเภอปัจจุบัน",
+    sortable: true,
+    field: "currentDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentSubDistrict",
+    align: "left",
+    label: "ตำบล/แขวงปัจจุบัน",
+    sortable: true,
+    field: "currentSubDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentZipCode",
+    align: "left",
+    label: "รหัสไปรษณีย์ปัจจุบัน",
+    sortable: true,
+    field: "currentZipCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "currentAddress",
+  "currentDistrict",
+  "currentProvince",
+  "currentSubDistrict",
+  "currentZipCode",
+  "registrationAddress",
+  "registrationDistrict",
+  "registrationProvince",
+  "registrationSame",
+  "registrationSubDistrict",
+  "registrationZipCode",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await getNewData();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    addressData.value = {
+      address: null,
+      provinceId: null,
+      districtId: null,
+      subdistrictId: null,
+      addressC: null,
+      provinceIdC: null,
+      districtIdC: null,
+      subdistrictIdC: null,
+      same: "0",
+    };
+  }
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "provinceOps":
+      update(() => {
+        Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "districtOps":
+      update(() => {
+        Ops.value.districtOps = OpsFilter.value.districtOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "districtCOps":
+      update(() => {
+        Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "subdistrictOps":
+      update(() => {
+        Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "subdistrictCOps":
+      update(() => {
+        Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileAdrsHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          currentAddress: e.currentAddress,
+          currentDistrict: e.currentDistrict,
+          currentProvince: e.currentProvince,
+          currentSubDistrict: e.currentSubDistrict,
+          currentZipCode: e.currentZipCode,
+          registrationSame: e.registrationSame,
+          registrationAddress: e.registrationAddress,
+          registrationDistrict: e.registrationDistrict,
+          registrationProvince: e.registrationProvince,
+          registrationSubDistrict: e.registrationSubDistrict,
+          registrationZipCode: e.registrationZipCode,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const refreshData = async () => {
+  myform.value.reset();
+  await getNewData();
+};
+
+const getNewData = async () => {
+  await fetchData();
+  await fetchProvince();
+  await fetchDistrict(addressData.value.provinceId, "1");
+  await fetchDistrict(addressData.value.provinceIdC, "2");
+  await fetchSubDistrict(addressData.value.districtId, "1");
+  await fetchSubDistrict(addressData.value.districtIdC, "2");
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileAdrsId(route.params.id.toString()))
+      .then((res) => {
+        const data: ResponseObject = res.data.result;
+        addressData.value.address = data.registrationAddress;
+        addressData.value.addressC = data.currentAddress;
+        addressData.value.districtId = data.registrationDistrictId;
+        addressData.value.districtIdC = data.currentDistrictId;
+        addressData.value.provinceId = data.registrationProvinceId;
+        addressData.value.provinceIdC = data.currentProvinceId;
+        addressData.value.subdistrictId = data.registrationSubDistrictId;
+        addressData.value.subdistrictIdC = data.currentSubDistrictId;
+        addressData.value.same = data.registrationSame ? "1" : "0";
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const editData = async () => {
+  const body: ResponseObject = {
+    registrationSame: addressData.value.same == "1",
+    registrationAddress: addressData.value.address,
+    registrationSubDistrictId: addressData.value.subdistrictId,
+    registrationDistrictId: addressData.value.districtId,
+    registrationProvinceId: addressData.value.provinceId,
+    registrationZipCode: codep.value,
+    currentAddress:
+      addressData.value.same == "1"
+        ? addressData.value.address
+        : addressData.value.addressC,
+    currentSubDistrictId:
+      addressData.value.same == "1"
+        ? addressData.value.subdistrictId
+        : addressData.value.subdistrictIdC,
+    currentDistrictId:
+      addressData.value.same == "1"
+        ? addressData.value.districtId
+        : addressData.value.districtIdC,
+    currentProvinceId:
+      addressData.value.same == "1"
+        ? addressData.value.provinceId
+        : addressData.value.provinceIdC,
+    currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
+    createdAt: new Date(),
+    createdFullName: "-",
+  };
+  loaderPage(true);
+  await http
+    .put(config.API.profileAdrsId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await getNewData();
+    });
+};
+
+const addData = async () => {
+  //     loaderPage(true);
+  //   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 () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+      if (props.statusAdd) {
+        await addData();
+      } else {
+        await editData();
+      }
+    } else {
+    }
+  });
+};
+
+const selectProvince = async (e: string | null, name: string) => {
+  if (e != null) {
+    if (name == "1") {
+      addressData.value.districtId = "";
+      addressData.value.subdistrictId = "";
+      codep.value = "";
+    } else {
+      addressData.value.districtIdC = "";
+      addressData.value.subdistrictIdC = "";
+      codec.value = "";
+    }
+    myform.value.resetValidation();
+    await fetchDistrict(e, name);
+  }
+};
+
+const selectDistrict = async (e: string | null, name: string) => {
+  if (e != null) {
+    if (name == "1") {
+      addressData.value.subdistrictId = "";
+      codep.value = "";
+    } else {
+      addressData.value.subdistrictIdC = "";
+      codec.value = "";
+    }
+    myform.value.resetValidation();
+    await fetchSubDistrict(e, name);
+  }
+};
+
+const selectSubDistrict = (e: string | null, name: string) => {
+  if (e != null) {
+    if (name == "1") {
+      const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      codep.value = namecode;
+    } else {
+      const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      codec.value = namecode;
+    }
+  }
+};
+
+const fetchProvince = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.province)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      Ops.value.provinceOps = option;
+      OpsFilter.value.provinceOps = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const fetchDistrict = async (id: string | null, position: string) => {
+  if (id != null && id != "") {
+    loaderPage(true);
+    await http
+      .get(config.API.listDistrict(id))
+      .then((res) => {
+        const data = res.data.result;
+        let option: DataOption[] = [];
+        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;
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchSubDistrict = async (id: string | null, position: string) => {
+  if (id != null && id != "") {
+    loaderPage(true);
+    await http
+      .get(config.API.listSubDistrict(id))
+      .then((res) => {
+        const data = res.data.result;
+        let option: zipCodeOption[] = [];
+        data.map((r: any) => {
+          option.push({
+            id: r.id.toString(),
+            name: r.name.toString(),
+            zipCode: r.zipCode.toString(),
+          });
+        });
+        if (position == "1") {
+          Ops.value.subdistrictOps = option;
+          OpsFilter.value.subdistrictOps = option;
+        } else {
+          Ops.value.subdistrictCOps = option;
+          OpsFilter.value.subdistrictCOps = option;
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/Certicate.vue b/src/components/information/Certicate.vue
new file mode 100644
index 000000000..d08e8c3b2
--- /dev/null
+++ b/src/components/information/Certicate.vue
@@ -0,0 +1,830 @@
+<!-- card ใบอนุญาตประกอบอาชีพ -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :name="
+          profileType == 'employee'
+            ? 'ใบอนุญาตของลูกจ้าง'
+            : 'ใบอนุญาตประกอบอาชีพ'
+        "
+        icon="mdi-book"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div
+                v-if="col.name == 'issueDate' || col.name == 'expireDate'"
+                class="table_ellipsis"
+              >
+                {{ date2Thai(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader
+          :tittle="
+            profileType == 'employee'
+              ? 'ใบอนุญาตของลูกจ้าง'
+              : 'ใบอนุญาตประกอบอาชีพ'
+          "
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="certificateType"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="issuer"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="certificateNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่ใบอนุญาต'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="issueDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(issueDate)"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
+                    ]"
+                    hide-bottom-space
+                    :label="`${'วันที่ออกใบอนุญาต'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="expireDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                :min-date="minDate"
+                :readonly="!edit"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date2Thai(expireDate)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่หมดอายุ'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่หมดอายุ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <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 == 'expireDate' ||
+              col.name == 'issueDate' ||
+              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>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/Certificate";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Certificate";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  profileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const certificateNo = ref<string>();
+const issuer = ref<string>();
+const issueDate = ref<Date>(new Date());
+const expireDate = ref<Date>(new Date());
+const certificateType = ref<string>();
+const minDate = ref<Date>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+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>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.certicate.columns.length == 0
+  ? (visibleColumns.value = [
+      "certificateType",
+      "certificateNo",
+      "issuer",
+      "issueDate",
+      "expireDate",
+    ])
+  : (visibleColumns.value = profileData.certicate.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "certificateType",
+    align: "left",
+    label: "ชื่อใบอนุญาต",
+    sortable: true,
+    field: "certificateType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "หน่วยงานผู้ออกใบอนุญาต",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "certificateNo",
+    align: "left",
+    label: "เลขที่ใบอนุญาต",
+    sortable: true,
+    field: "certificateNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ออกใบอนุญาต",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "expireDate",
+    align: "left",
+    label: "วันที่หมดอายุ",
+    sortable: true,
+    field: "expireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "certificateType",
+    align: "left",
+    label: "ชื่อใบอนุญาต",
+    sortable: true,
+    field: "certificateType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "หน่วยงานผู้ออกใบอนุญาต",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "certificateNo",
+    align: "left",
+    label: "เลขที่ใบอนุญาต",
+    sortable: true,
+    field: "certificateNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ออกใบอนุญาต",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "expireDate",
+    align: "left",
+    label: "วันที่หมดอายุ",
+    sortable: true,
+    field: "expireDate",
+    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[]>([
+  "certificateType",
+  "certificateNo",
+  "issuer",
+  "issueDate",
+  "expireDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("certicate", count);
+});
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileCertId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            certificateNo: e.certificateNo,
+            issuer: e.issuer,
+            issueDate: new Date(e.issueDate),
+            expireDate: new Date(e.expireDate),
+            certificateType: e.certificateType,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  certificateNo.value = row.certificateNo;
+  issuer.value = row.issuer;
+  issueDate.value = row.issueDate;
+  expireDate.value = row.expireDate;
+  certificateType.value = row.certificateType;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  loaderPage(true);
+  await http
+    .post(config.API.profileCertId(profileId.value), {
+      id: id.value,
+      certificateNo: certificateNo.value,
+      issuer: issuer.value,
+      issueDate: dateToISO(issueDate.value),
+      expireDate: dateToISO(expireDate.value),
+      certificateType: certificateType.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileCertId(id.value), {
+      id: id.value,
+      certificateNo: certificateNo.value,
+      issuer: issuer.value,
+      issueDate: dateToISO(issueDate.value),
+      expireDate: dateToISO(expireDate.value),
+      certificateType: certificateType.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileCertId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
+  modal.value = true; //modal ที่เด้งขึ้นมา
+  edit.value = false; //ปุ่ม edit ใน modal
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  certificateNo.value = props.row.certificateNo;
+  issuer.value = props.row.issuer;
+  issueDate.value = props.row.issueDate;
+  expireDate.value = props.row.expireDate;
+  certificateType.value = props.row.certificateType;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  certificateNo.value = "";
+  issuer.value = "";
+  issueDate.value = new Date();
+  expireDate.value = new Date();
+  certificateType.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  tittleHistory.value =
+    props.profileType == "employee"
+      ? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
+      : "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileCertHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          certificateNo: e.certificateNo,
+          issuer: e.issuer,
+          issueDate: new Date(e.issueDate),
+          expireDate: new Date(e.expireDate),
+          certificateType: e.certificateType,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/components/information/Family.vue b/src/components/information/Family.vue
new file mode 100644
index 000000000..8b9eaf90c
--- /dev/null
+++ b/src/components/information/Family.vue
@@ -0,0 +1,1514 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md text-dark">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลครอบครัว"
+      icon="mdi-account-group"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="historyData"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-12 row q-pb-sm q-pt-md">
+          <div class="col-xs-2 col-sm-1 text-weight-bold">• บิดา</div>
+          <div class="q-gutter-sm">
+            <q-radio
+              v-model="familyData.liveM"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              dense
+              color="blue"
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="familyData.liveM"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              color="red"
+              label="เสียชีวิต"
+              dense
+              :disable="!edit"
+            />
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.citizenIdM"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <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.prefixIdM"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameM"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameM"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationM"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="row col-12 q-py-sm">
+          <div class="col-xs-2 col-sm-1 text-weight-bold">• มารดา</div>
+          <div class="q-gutter-sm">
+            <q-radio
+              v-model="familyData.liveF"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="familyData.liveF"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="!edit"
+            />
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.citizenIdF"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <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.prefixIdF"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameF"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameF"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationF"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+
+        <div class="row col-12 q-py-sm">
+          <div class="col-xs-2 col-sm-1 text-weight-bold">• คู่สมรส</div>
+          <div class="q-gutter-sm">
+            <q-radio
+              v-model="familyData.same"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มี"
+              dense
+              :disable="!edit"
+              @update:model-value="selectRadio"
+            />
+            <q-radio
+              v-model="familyData.same"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="ไม่มี"
+              color="grey-9"
+              dense
+              :disable="!edit"
+              @update:model-value="selectRadio"
+            />
+          </div>
+          <q-separator
+            vertical
+            color="grey-4"
+            size="2px"
+            class="q-mx-md"
+            v-if="familyData.same == '1'"
+          />
+          <div class="q-gutter-sm" v-if="familyData.same == '1'">
+            <q-radio
+              v-model="familyData.liveC"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="familyData.liveC"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="!edit"
+            />
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.citizenIdC"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+
+        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <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.prefixIdC"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.firstnameC"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameC"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.lastnameCOld"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
+            :label="`${'นามสกุล(เดิม)'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.occupationC"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      </div>
+      <div
+        class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs q-mb-sm"
+      >
+        <div class="col-xs-12 q-col-gutter-x-sm items-center flex">
+          <label class="text-weight-bold">• บุตร</label>
+          <div>
+            <q-btn
+              v-if="edit"
+              size="12px"
+              flat
+              round
+              :disable="!edit"
+              :color="!edit ? 'grey-7' : 'primary'"
+              @click="addChildren"
+              icon="mdi-plus"
+            >
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+
+        <div
+          class="row col-12 items-center q-col-gutter-xs"
+          v-for="(items, index) in familyData.childrens"
+          :key="index"
+        >
+          <div class="col-12 row q-gutter-sm q-pb-xs">
+            <q-avatar class="bg-grey-2" size="28px">{{ index + 1 }}</q-avatar>
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="!edit"
+            />
+          </div>
+          <div>
+            <q-btn
+              v-if="edit"
+              flat
+              dense
+              size="12px"
+              round
+              :disable="!edit"
+              :color="!edit ? 'grey-7' : 'red'"
+              @click="deleteChildren(items)"
+              icon="mdi-delete-outline"
+            >
+              <q-tooltip>ลบข้อมูล {{ index + 1 }}</q-tooltip>
+            </q-btn>
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenCitizenId"
+              :label="`${'เลขที่บัตรประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-2 col-md-2">
+            <selector
+              :hide-dropdown-icon="!edit"
+              hide-bottom-space
+              :class="getClass(edit)"
+              :readonly="!edit"
+              :borderless="!edit"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+              :outlined="edit"
+              dense
+              lazy-rules
+              v-model="items.childrenPrefixId"
+              emit-value
+              map-options
+              option-label="name"
+              :options="Ops.prefixOps"
+              option-value="id"
+              :label="`${'คำนำหน้าชื่อ'}`"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenFirstName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              :label="`${'ชื่อ'}`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenLastName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              :label="`${'นามสกุล'}`"
+            />
+          </div>
+          <div
+            :class="
+              edit
+                ? 'col-xs-10 col-sm-1 col-md-1'
+                : 'col-xs-12 col-sm-2 col-md-2'
+            "
+          >
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenCareer"
+              :label="`${'อาชีพ'}`"
+            />
+          </div>
+          <div
+            class="col-12 q-my-sm"
+            v-if="index + 1 < familyData.childrens.length"
+          >
+            <q-separator v-if="edit" inset />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+  <DialogHistory
+    v-model:modal="modal"
+    v-model:fix="fix"
+    title="ประวัติแก้ไขข้อมูลครอบครัว"
+  >
+    <template v-slot:body>
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12 text-weight-bold">
+          {{
+            `${
+              familyDataHistory.length > 0 &&
+              familyDataHistory[indexRow].createdAt != null
+                ? date2Thai(familyDataHistory[indexRow].createdAt, false, true)
+                : ""
+            }`
+          }}
+        </div>
+        <div class="col-xs-12 text-weight-bold">
+          • บิดา
+          <q-radio
+            v-model="familyDataHistory[indexRow].fatherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มีชีวิต"
+            dense
+            :disable="true"
+          />
+          <q-radio
+            v-model="familyDataHistory[indexRow].fatherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="เสียชีวิต"
+            dense
+            :disable="true"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherCitizenId"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="true"
+            hide-bottom-space
+            :class="getClass(false)"
+            :readonly="true"
+            :borderless="true"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="false"
+            dense
+            lazy-rules
+            v-model="familyDataHistory[indexRow].fatherPrefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherFirstName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherLastName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherCareer"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 text-weight-bold">
+          • มารดา
+          <q-radio
+            v-model="familyDataHistory[indexRow].motherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มีชีวิต"
+            dense
+            :disable="true"
+          />
+          <q-radio
+            v-model="familyDataHistory[indexRow].motherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="เสียชีวิต"
+            dense
+            :disable="true"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherCitizenId"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="true"
+            hide-bottom-space
+            :class="getClass(false)"
+            :readonly="true"
+            :borderless="true"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="false"
+            dense
+            lazy-rules
+            v-model="familyDataHistory[indexRow].motherPrefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherFirstName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherLastName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherCareer"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• คู่สมรส</label>
+          <q-radio
+            v-model="familyDataHistory[indexRow].couple"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="true"
+            @update:model-value="selectRadio"
+          />
+          <q-radio
+            v-model="familyDataHistory[indexRow].couple"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            color="grey-9"
+            dense
+            :disable="true"
+            @update:model-value="selectRadio"
+          />
+          <q-separator
+            vertical
+            color="grey-4"
+            size="2px"
+            class="q-mx-md"
+            v-if="familyData.same == '1'"
+          />
+          <div class="q-gutter-sm" v-if="familyData.same == '1'">
+            <q-radio
+              v-model="familyDataHistory[indexRow].coupleLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="true"
+            />
+            <q-radio
+              v-model="familyDataHistory[indexRow].coupleLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="true"
+            />
+          </div>
+        </div>
+        <div
+          class="col-xs-6 col-sm-2 col-md-2"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleCitizenId"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+
+        <div
+          class="col-xs-12 col-sm-2 col-md-2"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <selector
+            :hide-dropdown-icon="true"
+            hide-bottom-space
+            :class="getClass(false)"
+            :readonly="true"
+            :borderless="true"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="false"
+            dense
+            lazy-rules
+            v-model="familyDataHistory[indexRow].couplePrefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleFirstName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleLastName"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-2 col-md-2"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleLastNameOld"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล(เดิม)'}`]"
+            :label="`${'นามสกุล(เดิม)'}`"
+          />
+        </div>
+        <div
+          class="col-xs-12 col-sm-2 col-md-2"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleCareer"
+            :label="`${'อาชีพ'}`"
+          />
+        </div>
+
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      </div>
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• บุตร</label>
+        </div>
+
+        <div
+          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          v-for="items in familyDataHistory[indexRow].childrens"
+          :key="items.id"
+        >
+          <div class="col-12 row q-gutter-sm q-pb-xs">
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="true"
+            />
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="true"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenCitizenId"
+              :label="`${'เลขที่บัตรประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <selector
+              :hide-dropdown-icon="true"
+              hide-bottom-space
+              :class="getClass(false)"
+              :readonly="true"
+              :borderless="true"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+              :outlined="false"
+              dense
+              lazy-rules
+              v-model="items.childrenPrefixId"
+              emit-value
+              map-options
+              option-label="name"
+              :options="Ops.prefixOps"
+              option-value="id"
+              :label="`${'คำนำหน้าชื่อ'}`"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenFirstName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              :label="`${'ชื่อ'}`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-3 col-md-3">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenLastName"
+              :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              :label="`${'นามสกุล'}`"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-2 col-md-2">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenCareer"
+              :label="`${'อาชีพ'}`"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-slot:footer>
+      <q-btn
+        flat
+        round
+        icon="mdi-menu-left"
+        @click="clickPreviousNext('next')"
+        :disable="previous == false"
+        :color="!previous ? 'grey-7' : 'public'"
+      />
+      <q-btn
+        flat
+        round
+        icon="mdi-menu-right"
+        @click="clickPreviousNext('previous')"
+        :disable="next == false"
+        :color="!next ? 'grey-7' : 'public'"
+      />
+      <q-space />
+      <div class="text-black text-subtitle2 text-bold">
+        {{ indexRow + 1 }}/{{ familyDataHistory.length }}
+      </div>
+    </template>
+  </DialogHistory>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import type {
+  Family,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import DialogHistory from "@/modules/04_registry/components/DialogHistory.vue";
+import type {
+  ResponseObject,
+  childrenFamily,
+  ResponseHistory,
+} from "@/modules/04_registry/interface/response/Family";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, messageError } = mixin;
+const edit = ref<boolean>(false);
+const fix = ref<boolean>(true);
+const myform = ref<QForm | null>(null);
+const modal = ref<boolean>(false);
+const indexRow = ref<number>(0);
+const previous = ref<boolean>(false);
+const next = ref<boolean>(false);
+//C Couple
+//M Male
+//F Female
+const familyData = ref<Family>({
+  prefixC: null,
+  prefixIdC: null,
+  firstnameC: null,
+  lastnameC: null,
+  lastnameCOld: null,
+  occupationC: null,
+  liveC: null,
+  citizenIdC: null,
+  prefixM: null,
+  prefixIdM: null,
+  firstnameM: null,
+  lastnameM: null,
+  occupationM: null,
+  liveM: null,
+  citizenIdM: null,
+  prefixF: null,
+  prefixIdF: null,
+  firstnameF: null,
+  lastnameF: null,
+  occupationF: null,
+  liveF: null,
+  citizenIdF: null,
+  same: "0",
+  childrens: [],
+});
+const familyDataHistory = ref<ResponseHistory[]>([]);
+const Ops = ref<any>({
+  prefixOps: [],
+});
+const OpsFilter = ref<any>({
+  prefixOps: [],
+});
+
+onMounted(async () => {
+  await fetchPrefix();
+  await fetchData();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    familyData.value = {
+      prefixC: null,
+      prefixIdC: null,
+      firstnameC: null,
+      lastnameC: null,
+      lastnameCOld: null,
+      occupationC: null,
+      citizenIdC: null,
+      liveC: null,
+      prefixM: null,
+      prefixIdM: null,
+      firstnameM: null,
+      lastnameM: null,
+      occupationM: null,
+      citizenIdM: null,
+      liveM: null,
+      prefixF: null,
+      prefixIdF: null,
+      firstnameF: null,
+      lastnameF: null,
+      occupationF: null,
+      citizenIdF: null,
+      liveF: null,
+      same: "0",
+      childrens: [],
+    };
+  }
+};
+
+const historyData = async () => {
+  await fetchHistory();
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  update(() => {
+    Ops.value[`${refData}`] = OpsFilter.value[`${refData}`].filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+};
+
+const refreshData = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await fetchData();
+};
+
+const fetchPrefix = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.prefix)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      Ops.value.prefixOps = option;
+      OpsFilter.value.prefixOps = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const addChildren = async () => {
+  familyData.value.childrens.push({
+    id: `${familyData.value.childrens.length + 1}`,
+    childrenPrefixId: "",
+    childrenFirstName: "",
+    childrenLastName: "",
+    childrenCareer: "",
+    childrenLive: "1",
+    childrenCitizenId: "",
+  });
+
+  familyData.value.childrens.sort(
+    (a: childrenFamily, b: childrenFamily) => Number(b.id) - Number(a.id)
+  );
+};
+
+const deleteChildren = (items: childrenFamily) => {
+  const index = familyData.value.childrens.findIndex(
+    (r: childrenFamily) => r.id == items.id
+  );
+
+  familyData.value.childrens.splice(index, 1);
+};
+
+const fetchHistory = async () => {
+  familyDataHistory.value = [];
+  loaderPage(true);
+  await http
+    .get(config.API.profileFamiHisId(route.params.id.toString()))
+    .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,
+          coupleLive: row.coupleLive ? "1" : "0",
+          coupleCitizenId: row.coupleCitizenId,
+          fatherPrefixId: row.fatherPrefixId,
+          fatherFirstName: row.fatherFirstName,
+          fatherLastName: row.fatherLastName,
+          fatherCareer: row.fatherCareer,
+          fatherLive: row.fatherLive ? "1" : "0",
+          fatherCitizenId: row.fatherCitizenId,
+          motherPrefixId: row.motherPrefixId,
+          motherFirstName: row.motherFirstName,
+          motherLastName: row.motherLastName,
+          motherCareer: row.motherCareer,
+          motherLive: row.motherLive ? "1" : "0",
+          motherCitizenId: row.motherCitizenId,
+          childrens: row.childrens,
+          createdFullName: row.createdFullName,
+          createdAt: new Date(row.createdAt),
+        };
+        familyDataHistory.value.push(arrayData);
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+      if (familyDataHistory.value.length == 0) {
+        // modalError(
+        //   $q,
+        //   "ประวัติแก้ไขข้อมูลครอบครัว",
+        //   "ไม่มีข้อมูลประวัติแก้ไขข้อมูลครอบครัว"
+        // );
+      } else {
+        modal.value = true;
+        indexRow.value = 0;
+        if (familyDataHistory.value.length > 1) {
+          next.value = true;
+          previous.value = false;
+        } else {
+          next.value = false;
+          previous.value = false;
+        }
+      }
+    });
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    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.liveC = data.coupleLive ? "1" : "0";
+        familyData.value.citizenIdC = data.coupleCitizenId;
+
+        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.liveM = data.fatherLive ? "1" : "0";
+        familyData.value.citizenIdM = data.fatherCitizenId;
+
+        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.liveF = data.motherLive ? "1" : "0";
+        familyData.value.citizenIdF = data.motherCitizenId;
+        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,
+              childrenLive: row.childrenLive,
+              childrenCitizenId: row.childrenCitizenId,
+            });
+          });
+          familyData.value.childrens = dataChild;
+        } else {
+          familyData.value.childrens = [];
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        loaderPage(false);
+      });
+  }
+};
+
+const editData = async () => {
+  loaderPage(true);
+  const body: ResponseObject = {
+    couple: familyData.value.same == "1",
+    couplePrefixId: familyData.value.prefixIdC,
+    coupleFirstName: familyData.value.firstnameC,
+    coupleLastName: familyData.value.lastnameC,
+    coupleLastNameOld: familyData.value.lastnameCOld,
+    coupleCareer: familyData.value.occupationC,
+    coupleLive: familyData.value.liveC == "1",
+    coupleCitizenId: familyData.value.citizenIdC,
+    fatherPrefixId: familyData.value.prefixIdM,
+    fatherFirstName: familyData.value.firstnameM,
+    fatherLastName: familyData.value.lastnameM,
+    fatherCareer: familyData.value.occupationM,
+    fatherLive: familyData.value.liveM == "1",
+    fatherCitizenId: familyData.value.citizenIdM,
+    motherPrefixId: familyData.value.prefixIdF,
+    motherFirstName: familyData.value.firstnameF,
+    motherLastName: familyData.value.lastnameF,
+    motherCareer: familyData.value.occupationF,
+    motherLive: familyData.value.liveF == "1",
+    motherCitizenId: familyData.value.citizenIdF,
+    childrens: familyData.value.childrens,
+    createdFullName: "-",
+    createdAt: new Date(),
+  };
+  await http
+    .put(config.API.profileFamiId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await fetchData();
+    });
+};
+
+const addData = async () => {
+  //     loaderPage(true);
+  //   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 () => {
+  await myform.value?.validate().then(async (success: boolean) => {
+    if (success) {
+      if (props.statusAdd) {
+        await addData();
+      } else {
+        await editData();
+      }
+    } else {
+    }
+  });
+};
+
+const clickPreviousNext = (page: string) => {
+  const index: number =
+    page == "next" ? indexRow.value - 1 : indexRow.value + 1;
+  let length: number = familyDataHistory.value.length;
+  previous.value = index == 0 ? false : true;
+  next.value = index == length - 1 ? false : true;
+  indexRow.value = index;
+};
+
+const selectRadio = (e: boolean, i: any) => {
+  if (e) {
+    familyData.value.prefixIdC = "";
+    familyData.value.firstnameC = "";
+    familyData.value.lastnameC = "";
+    familyData.value.lastnameCOld = "";
+    familyData.value.occupationC = "";
+    familyData.value.liveC = "";
+    familyData.value.citizenIdC = "";
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+      props.notiNoEdit();
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/Government.vue b/src/components/information/Government.vue
new file mode 100644
index 000000000..35d6fca2a
--- /dev/null
+++ b/src/components/information/Government.vue
@@ -0,0 +1,763 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลราชการ"
+      icon="mdi-account-tie"
+      :save="saveData"
+      :history="true"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="refreshData"
+      :historyClick="clickHistory"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+        <div class="col-xs-12">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ocId"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.numberId"
+            :label="`${'ตำแหน่งเลขที่'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionId"
+            :label="`${'ตำแหน่ง'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionPathSide"
+            :label="`${'ด้าน/สาขา'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionLine"
+            :label="`${'สายงาน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionType"
+            :label="`${'ประเภท'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionLevel"
+            :label="`${'ระดับ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutive"
+            :label="`${'ตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutiveSide"
+            :label="`${'ด้านตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
+        <div class="col-12 q-py-md"><q-separator /></div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="govermentData.containDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.containDate))"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกวันที่บรรจุ'
+                        : 'กรุณาเลือกวันที่แต่งตั้ง'
+                    }`,
+                ]"
+                :label="`${
+                  profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
+                }`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <datepicker
+            v-model="govermentData.workDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(new Date(govermentData.workDate))"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
+                        : 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
+                    }`,
+                ]"
+                :label="`${
+                  profileType == 'officer'
+                    ? 'เริ่มปฎิบัติราชการ'
+                    : 'วันที่จ้างและแต่งตั้งมีผล'
+                }`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-6 col-md-6" v-if="profileType == 'officer'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            stack-label
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="govermentData.reasonSameDate"
+            :label="`${'เหตุผลกรณีไม่ตรงวัน'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.retireDate"
+            :label="`${'วันเกษียณอายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.ageAll"
+            :label="`${'อายุราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.absent"
+            :label="`${'ขาดราชการ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.age"
+            :label="`${'อายุราชการเกื้อกูล'}`"
+          />
+        </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 == 'dateStart' ||
+              col.name == 'dateAppoint' ||
+              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>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import type { Goverment } from "@/modules/04_registry/components/profileType";
+import { defaultGoverment } from "@/modules/04_registry/components/profileType";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import HistoryTable from "@/components/TableHistory.vue";
+import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Government";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Government";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { storeToRefs } from "pinia";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  profileType: {
+    type: String,
+    required: true,
+  },
+  employeeClass: {
+    type: String,
+    required: true,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError } = mixin;
+const profileStore = useProfileDataStore();
+const { birthDate, retireText } = storeToRefs(profileStore);
+const edit = ref<boolean>(false);
+const govermentData = ref<Goverment>(defaultGoverment);
+const myform = ref<any>();
+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 columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่บรรจุ",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "retireDate",
+    align: "left",
+    label: "วันเกษียณอายุ",
+    sortable: true,
+    field: "retireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgeAbsent",
+    align: "left",
+    label: "ขาดราชการ",
+    sortable: true,
+    field: "govAgeAbsent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgePlus",
+    align: "left",
+    label: "อายุราชการเกื้อกูล",
+    sortable: true,
+    field: "govAgePlus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reasonSameDate",
+    align: "left",
+    label: "เหตุผลกรณีไม่ตรงวัน",
+    sortable: true,
+    field: "reasonSameDate",
+    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[]>([
+  "oc",
+  "position",
+  "positionPathSide",
+  "posNo",
+  "positionLine",
+  "positionType",
+  "positionLevel",
+  "positionexecutive",
+  "positionExecutiveSide",
+  "dateAppoint",
+  "dateStart",
+  "retireDate",
+  "govAge",
+  "govAgeAbsent",
+  "govAgePlus",
+  "reasonSameDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await fetchData();
+  emit("update:statusEdit", false);
+});
+
+watch(birthDate, async () => {
+  await fetchData();
+});
+
+watch(retireText, async () => {
+  govermentData.value.retireDate = retireText.value;
+});
+
+const fetchData = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileGovId(route.params.id.toString()))
+    .then((res) => {
+      const data: ResponseObject = res.data.result;
+      govermentData.value.ocId = data.oc;
+      govermentData.value.positionId = data.position;
+      govermentData.value.positionPathSide = data.positionPathSide;
+      govermentData.value.positionLine = data.positionLine;
+      govermentData.value.positionType = data.positionType;
+      govermentData.value.positionLevel = data.positionLevel;
+      govermentData.value.numberId = data.posNo;
+      govermentData.value.positionExecutive = data.positionExecutive;
+      govermentData.value.positionExecutiveSide = data.positionExecutiveSide;
+      govermentData.value.containDate = new Date(data.dateAppoint);
+      govermentData.value.workDate = new Date(data.dateStart);
+      govermentData.value.retireDate = data.retireDate;
+      govermentData.value.absent = data.govAgeAbsent;
+      govermentData.value.age = data.govAgePlus;
+      govermentData.value.ageAll = data.govAge;
+      govermentData.value.reasonSameDate = data.reasonSameDate;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+    });
+};
+
+const refreshData = async () => {
+  myform.value.reset();
+  await fetchData();
+};
+
+const editData = async () => {
+  loaderPage(true);
+  await http
+    .put(config.API.profileGovId(route.params.id.toString()), {
+      dateAppoint: dateToISO(govermentData.value.containDate),
+      dateStart: dateToISO(govermentData.value.workDate),
+      reasonSameDate: govermentData.value.reasonSameDate,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      emit("update:statusEdit", false);
+      edit.value = false;
+      await refreshData();
+    });
+};
+
+const saveData = async () => {
+  await myform.value.validate().then(async (success: boolean) => {
+    if (success) {
+      await editData();
+    } else {
+    }
+  });
+};
+
+const handleDate = async (modelData: Date) => {
+  govermentData.value.containDate = modelData;
+  await fetchCalAgeGov(modelData);
+};
+
+const fetchCalAgeGov = async (date: Date) => {
+  loaderPage(true);
+  const body = {
+    dateAppoint: date,
+  };
+  await http
+    .post(config.API.profileCalGovId(route.params.id.toString()), body)
+    .then((res) => {
+      const result = res.data.result;
+      govermentData.value.ageAll = result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileGovHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          oc: e.oc,
+          position: e.position,
+          positionPathSide: e.positionPathSide,
+          posNo: e.posNo,
+          positionLine: e.positionLine,
+          positionType: e.positionType,
+          positionLevel: e.positionLevel,
+          positionExecutive: e.positionExecutive,
+          positionExecutiveSide: e.positionExecutiveSide,
+          dateAppoint: new Date(e.dateAppoint),
+          dateStart: new Date(e.dateStart),
+          retireDate: e.retireDate,
+          govAge: e.govAge,
+          govAgeAbsent: e.govAgeAbsent,
+          govAgePlus: e.govAgePlus,
+          reasonSameDate: e.reasonSameDate,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/Image.vue b/src/components/information/Image.vue
new file mode 100644
index 000000000..30efcc2a7
--- /dev/null
+++ b/src/components/information/Image.vue
@@ -0,0 +1,365 @@
+<template>
+  <q-page-sticky
+    position="top"
+    expand
+    class="bg-grey-2 text-white"
+    style="z-index: 99; padding: 0% 1% 0% 1%"
+  >
+    <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
+      <q-btn
+        flat
+        round
+        class="bg-teal-1 full-height"
+        color="primary"
+        icon="mdi-chevron-left"
+        dense
+        @click="router.go(-1)"
+      >
+      </q-btn>
+      <q-avatar
+        v-if="imageUrl == null"
+        size="65px"
+        rounded
+        class="containerimage"
+      >
+        <img
+          src="@/assets/avatar_user.jpg"
+          class="bg-grey-3"
+          style="object-fit: cover"
+        />
+        <div
+          class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+          @click="clickImage()"
+        >
+          <q-icon name="mdi-camera" size="18px" color="blue">
+            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+          </q-icon>
+
+          <input
+            type="file"
+            style="display: none"
+            ref="inputImage"
+            accept="image/*"
+            @change="uploadImage"
+          />
+        </div>
+      </q-avatar>
+      <q-avatar v-else size="65px" rounded class="containerimage">
+        <img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
+        <div
+          class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+          @click="clickImage()"
+        >
+          <q-icon name="mdi-camera" size="18px" color="blue">
+            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+          </q-icon>
+
+          <input
+            type="file"
+            style="display: none"
+            ref="inputImage"
+            accept="image/*"
+            @change="uploadImage"
+          />
+        </div>
+      </q-avatar>
+      <div class="row items-center text-dark q-ml-md">
+        <div class="column">
+          <div class="text-bold q-pb-xs text-name">
+            {{ props.fullName }}
+          </div>
+          <div>{{ props.position }}</div>
+        </div>
+      </div>
+      <q-space />
+
+      <slot name="button-right" />
+    </div>
+  </q-page-sticky>
+  <!---------------------------------------- Dialog เลือก Image ---------------------------------------->
+  <q-dialog v-model="dialogImage" persistent>
+    <q-card style="width: 100vw; max-width: 60vw">
+      <q-card-section class="q-py-sm row">
+        <div class="text-h6">เลือกรูปภาพ</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeImage"
+          style="color: #ff8080; background-color: #ffdede"
+        >
+          <q-tooltip>ปิดหน้านี้</q-tooltip>
+        </q-btn>
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="col-12 row">
+        <div
+          class="row wrap items-start col-12 q-col-gutter-sm"
+          style="height: 320px; overflow: auto"
+        >
+          <div class="col-3" @click="addNewImage">
+            <div
+              style="
+                height: 160px;
+                max-width: 15vw;
+                display: flex !important;
+                justify-content: center;
+                align-items: center;
+              "
+              class="column rounded-borders cursor-pointer bg-active-image text-white"
+            >
+              <q-icon name="add" size="60px" color="white" />
+              <strong>อัปโหลดรูปภาพ</strong>
+            </div>
+          </div>
+          <div
+            v-for="n in images"
+            :key="n"
+            class="col-3"
+            @click="imageActive(n)"
+          >
+            <div :class="getClass(n)">
+              <q-img
+                v-if="n.avatar != null"
+                :src="n.avatar"
+                :class="imageClass(n)"
+              >
+                <div
+                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
+                  style="padding: 5px"
+                >
+                  {{ date2Thai(n.createdDate) }}
+
+                  <q-btn
+                    v-if="!n.isActive"
+                    icon="delete"
+                    unelevated
+                    dense
+                    @click="deletePhoto(n.id)"
+                    class="bg-white"
+                    style="color: #ff8080"
+                  />
+                </div>
+              </q-img>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          icon="check"
+          dense
+          flat
+          round
+          @click="selectAvatarHistory"
+          color="positive"
+        >
+          <q-tooltip>เลือกรูปภาพ</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const props = defineProps({
+  fullName: {
+    type: String,
+    default: "ชื่อ สกุล",
+    required: true,
+  },
+  position: {
+    type: String,
+    default: "ตำแหน่ง",
+    required: true,
+  },
+  fetchData: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  fetchSave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  fetchDelete: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  fetchUpload: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
+
+const router = useRouter();
+const imageUrl = ref<any>(null);
+const inputImage = ref<any>(null);
+const dialogImage = ref<boolean>(false);
+const images = ref<any>([]);
+const activeImage = ref<any | null>(null);
+const profileId = ref<string>("");
+
+const closeImage = () => {
+  dialogImage.value = false;
+};
+
+const clickImage = async () => {
+  // ***************************************************************************************************
+  //                  ****************** fetch data รูปภาพทั้งหมด ******************
+  // ***************************************************************************************************
+
+  dialogImage.value = true;
+};
+
+const uploadImage = async (e: any) => {
+  let input = e.target.files;
+  if (input.length > 0) {
+    const formData = new FormData();
+    formData.append("FileData", input[0]);
+    await props.fetchUpload(profileId.value, formData).then(async () => {
+      await props.fetchData();
+      closeImage();
+    });
+    // ***************************************************************************************************
+    //          ****************** ต้องทำ function props รับ formData กลับ ******************
+    //     ****************** finally ทำการ fetch data,dialogImage.value = false ******************
+    // ***************************************************************************************************
+  }
+};
+
+const selectAvatarHistory = async () => {
+  if (activeImage.value == null) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถเปลี่ยนรูปได้",
+      "กรุณาเลือกรูปที่ต้องการเปลี่ยน",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  }
+  await props.fetchSave(profileId.value);
+  // ***************************************************************************************************
+  //                 ****************** fetch data เปลี่ยนรูปภาพ ส่ง ID กลับ******************
+  // ***************************************************************************************************
+};
+
+const imageActive = (n: any) => {
+  activeImage.value = n;
+};
+
+const addNewImage = () => {
+  inputImage.value.click();
+  imageActive(null);
+};
+
+const deletePhoto = async (id: string) => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    undefined,
+    "red",
+    async () => await fetchDataDelete(id),
+    undefined,
+    false
+  );
+};
+
+const fetchDataDelete = async (id: string) => {
+  await props.fetchDelete(id).then(async () => {
+    await props.fetchData();
+    await clickImage();
+  });
+  // ***************************************************************************************************
+  //                  ****************** fetch delete รูปภาพ ******************
+  //          ****************** finally ทำการ fetch data,clickImage() ******************
+  // ***************************************************************************************************
+};
+
+const imageClass = (n: any) => {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders bg-grey-2 image-size-default": val,
+    "rounded-borders bg-grey-2 image-size-full": !val,
+  };
+};
+
+const getClass = (n: any) => {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders border-green shadow-1": val,
+    "rounded-borders shadow-1": !val,
+  };
+};
+</script>
+<style lang="scss" scoped>
+.image-size-default {
+  height: 150px;
+  max-width: 15vw;
+}
+
+.image-size-full {
+  height: 160px;
+  max-width: 15vw;
+}
+
+.border-green {
+  border: 5px solid #52c688;
+}
+
+.area-div {
+  background-color: transparent;
+}
+
+.text-header {
+  font-size: 1.2em;
+}
+
+.containerimage {
+  position: relative;
+}
+
+.containerimage:hover .overlay {
+  opacity: 1;
+}
+
+.overlay {
+  background-color: #e4f2ffd2 !important;
+  opacity: 0;
+  padding: 2px !important;
+}
+
+.information:target {
+  padding-top: 84px;
+}
+
+.border-custom {
+  border: 0.5px solid #c3c3c3;
+}
+
+.bg-active-image {
+  background-color: #52c688;
+}
+
+.text-name {
+  font-size: 1.25em;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/information/Information.vue b/src/components/information/Information.vue
new file mode 100644
index 000000000..1acf5f85d
--- /dev/null
+++ b/src/components/information/Information.vue
@@ -0,0 +1,1129 @@
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลส่วนตัว"
+      icon="mdi-account"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="onCancel"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
+        <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="informaData.cardid"
+            @update:model-value="changeCardID"
+            :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+              (val:string) =>
+                val.length >= 13 ||
+                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
+            ]"
+            label="เลขบัตรประจำตัวประชาชน"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-6 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="informaData.prefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.firstname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.lastname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <datepicker
+            v-model="informaData.birthDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="date2Thai(informaData.birthDate)"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                :label="`${'วัน/เดือน/ปี เกิด'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :model-value="informaData.age"
+            :label="`${'อายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.genderId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.genderOps"
+            option-value="id"
+            :label="`${'เพศ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.statusId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.statusOps"
+            option-value="id"
+            :label="`${'สถานภาพ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.nationality"
+            :label="`${'สัญชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.ethnicity"
+            :label="`${'เชื้อชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.religionId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.religionOps"
+            option-value="id"
+            :label="`${'ศาสนา'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.bloodId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.bloodOps"
+            option-value="id"
+            :label="`${'หมู่เลือด'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                      ) "
+            clearable
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.tel"
+            :label="`${'เบอร์โทร'}`"
+            mask="##########"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          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-3 col-md-3"
+          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 class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            color="grey-9"
+            dense
+            :disable="!edit"
+          />
+        </div>
+        <div class="row col-12">
+          <OldName
+            v-if="same == '1'"
+            v-model:statusEdit="edit"
+            :fetchDataInformation="fetchDataComponent"
+            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
+            :firstname="
+              informaData.firstname == null ? '' : informaData.firstname
+            "
+            :lastname="informaData.lastname == null ? '' : informaData.lastname"
+          />
+        </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>
+<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/04_registry/components/profileType";
+import { defaultInformation } from "@/modules/04_registry/components/profileType";
+import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Information";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import OldName from "@/modules/04_registry/components/Information/OldName.vue";
+import HeaderTop from "@/modules/04_registry/components/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 { useComponentProfileDataStore } from "@/components/information/store/store";
+import type { QTableColumn, QForm } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  fetchDataProfile: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const profileStore = useComponentProfileDataStore();
+const { changeRetireText, changeBirth } = profileStore;
+const edit = ref<boolean>(false);
+const defaultCitizenData = ref<string | null>("");
+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 myform = ref<QForm | null>(null);
+const dateBefore = ref<Date>(new Date());
+const same = ref<string>("0");
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { 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();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    informaData.value = {
+      cardid: null,
+      age: null,
+      prefix: null,
+      prefixId: null,
+      firstname: null,
+      lastname: null,
+      birthDate: new Date(),
+      genderId: null,
+      bloodId: null,
+      nationality: null,
+      ethnicity: null,
+      statusId: null,
+      religionId: null,
+      tel: null,
+      employeeType: null,
+      employeeClass: null,
+      profileType: null,
+    };
+  }
+};
+
+const onCancel = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await fetchData();
+};
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+const fetchPerson = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const changeCardID = (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      dialogMessage(
+        $q,
+        "ข้อมูลมีการแก้ไข?",
+        "ยืนยันการเปลี่ยนเลขบัตรประชาชนใช่หรือไม่",
+        "info",
+        "ยืนยัน",
+        "public",
+        async () => {
+          await checkCitizen(value);
+        },
+        async () => {
+          informaData.value.cardid = defaultCitizenData.value;
+        }
+      );
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  loaderPage(true);
+  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(() => {
+      loaderPage(false);
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const handleDate = async (modelData: Date) => {
+  informaData.value.birthDate = modelData;
+  await calRetire(modelData);
+};
+
+const fetchDataComponent = async (modelData: Date) => {
+  await props.fetchDataProfile();
+  await fetchData();
+};
+
+const calRetire = async (birth: Date) => {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileCalRetire, body)
+      .then((res: any) => {
+        const data = res.data.result;
+        informaData.value.age = data.age;
+        changeRetireText(data.retireDate);
+        dateBefore.value = birth;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+        informaData.value.birthDate = dateBefore.value;
+        changeRetireText(date2Thai(retire));
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileInforId(route.params.id.toString()))
+      .then(async (res: any) => {
+        const data: ResponseObject = res.data.result;
+        defaultCitizenData.value = data.citizenId;
+        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;
+        dateBefore.value = new Date(data.birthDate);
+        same.value = data.changeName == true ? "1" : "0";
+        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);
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        //   loaderPage(false);
+        await props.fetchDataProfile();
+      });
+  }
+};
+
+const editData = async () => {
+  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: "-",
+  };
+  loaderPage(true);
+  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 addData = async () => {
+  //     loaderPage(true);
+  //   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) {
+        if (props.statusAdd) {
+          await addData();
+        } else {
+          await editData();
+        }
+      } else {
+      }
+    });
+  }
+};
+
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
diff --git a/src/components/information/interface/store/main.ts b/src/components/information/interface/store/main.ts
new file mode 100644
index 000000000..7c31dd81c
--- /dev/null
+++ b/src/components/information/interface/store/main.ts
@@ -0,0 +1,20 @@
+interface Profile {
+  main: { columns: String[] };
+  education: { columns: String[] };
+  oldName: { columns: String[] };
+  certicate: { columns: String[] };
+  train: { columns: String[] };
+  insignia: { columns: String[] };
+  coined: { columns: String[] };
+  assessment: { columns: String[] };
+  salary: { columns: String[] };
+  discipline: { columns: String[] };
+  leave: { columns: String[] };
+  talent: { columns: String[] };
+  work: { columns: String[] };
+  record: { columns: String[] };
+  other: { columns: String[] };
+  document: { columns: String[] };
+}
+
+export type { Profile };
diff --git a/src/components/information/store/store.ts b/src/components/information/store/store.ts
new file mode 100644
index 000000000..7c30f2495
--- /dev/null
+++ b/src/components/information/store/store.ts
@@ -0,0 +1,70 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import type { Profile } from "@/components/information/interface/store/main";
+
+export const useComponentProfileDataStore = defineStore(
+  "componentProfile",
+  () => {
+    const profile = "profile";
+    const birthDate = ref<Date>(new Date());
+    const retireText = ref<string | null>(null);
+    const profileData = ref<Profile>({
+      main: { columns: [] },
+      education: { columns: [] },
+      oldName: { columns: [] },
+      certicate: { columns: [] },
+      train: { columns: [] },
+      insignia: { columns: [] },
+      coined: { columns: [] },
+      assessment: { columns: [] },
+      salary: { columns: [] },
+      discipline: { columns: [] },
+      leave: { columns: [] },
+      talent: { columns: [] },
+      work: { columns: [] },
+      record: { columns: [] },
+      other: { columns: [] },
+      document: { columns: [] },
+    });
+
+    const changeRetireText = (val: string | null) => {
+      retireText.value = val;
+    };
+    const changeBirth = (val: Date) => {
+      birthDate.value = val;
+    };
+
+    const changeProfileColumns = (system: String, val: String[]) => {
+      if (system == "main") profileData.value.main.columns = val;
+      if (system == "education") profileData.value.education.columns = val;
+      if (system == "oldName") profileData.value.oldName.columns = val;
+      if (system == "certicate") profileData.value.certicate.columns = val;
+      if (system == "train") profileData.value.train.columns = val;
+      if (system == "insignia") profileData.value.insignia.columns = val;
+      if (system == "coined") profileData.value.coined.columns = val;
+      if (system == "assessment") profileData.value.assessment.columns = val;
+      if (system == "salary") profileData.value.salary.columns = val;
+      if (system == "discipline") profileData.value.discipline.columns = val;
+      if (system == "leave") profileData.value.leave.columns = val;
+      if (system == "talent") profileData.value.talent.columns = val;
+      if (system == "work") profileData.value.work.columns = val;
+      if (system == "record") profileData.value.record.columns = val;
+      if (system == "other") profileData.value.other.columns = val;
+      if (system == "document") profileData.value.document.columns = val;
+      localStorage.setItem(profile, JSON.stringify(profileData.value));
+    };
+
+    if (localStorage.getItem(profile) !== null) {
+      profileData.value = JSON.parse(localStorage.getItem(profile) || "{}");
+    }
+
+    return {
+      profileData,
+      changeProfileColumns,
+      birthDate,
+      changeBirth,
+      retireText,
+      changeRetireText,
+    };
+  }
+);
diff --git a/src/components/information/top.vue b/src/components/information/top.vue
new file mode 100644
index 000000000..416a8f049
--- /dev/null
+++ b/src/components/information/top.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon
+        :name="icon"
+        size="1.5em"
+        color="grey-5"
+        class="q-mr-md"
+        v-if="icon != ''"
+      />
+      <div
+        class="text-bold text-subtitle2 col-12 row items-center"
+        v-if="header != ''"
+      >
+        {{ header }}
+      </div>
+    </div>
+    <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
+      <q-btn
+        size="12px"
+        v-if="!edit"
+        flat
+        round
+        :disabled="disable"
+        :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :color="!edit ? 'grey-7' : 'public'"
+        @click="save"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit && !addEmployee"
+        :color="!edit ? 'grey-7' : 'red'"
+        @click="ClickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="addleave"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
+        <q-tooltip>สรุปวันลา</q-tooltip>
+      </q-btn>
+    </div>
+
+    <div class="q-pl-sm" v-else>
+      <q-btn
+        size="12px"
+        flat
+        round
+        :disabled="disable"
+        color="add"
+        @click="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <q-space />
+    <q-btn
+      color="info"
+      flat
+      dense
+      round
+      size="14px"
+      icon="mdi-history"
+      v-if="history"
+      @click="historyClick"
+    >
+      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
+    </q-btn>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  history: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  addData: {
+    type: Boolean,
+    defualt: false,
+  },
+  disable: {
+    type: Boolean,
+    defualt: false,
+  },
+  historyClick: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addEmployee: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits(["update:edit"]);
+
+const updateEdit = (value: any) => {
+  emit("update:edit", value);
+};
+
+const ClickEdit = () => {
+  updateEdit(!props.edit);
+  props.changeBtn();
+};
+
+const historyClick = async () => {
+  await props.historyClick();
+};
+
+const ClickCancel = () => {
+  updateEdit(!props.edit);
+  props.cancel();
+  props.changeBtn();
+};
+
+const save = () => {
+  props.save();
+};
+
+const add = () => {
+  props.add();
+};
+
+const addleave = () => {
+  props.addleave();
+};
+</script>
+<style scoped></style>
diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index 8f372fe5e..2e52b3840 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -1062,7 +1062,7 @@ const fetchProvince = async () => {
 };
 
 const fetchDistrict = async (id: string | null) => {
-  if (id !== null) {
+  if (id !== null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listDistrict(id))
@@ -1084,7 +1084,7 @@ const fetchDistrict = async (id: string | null) => {
 };
 
 const fetchSubDistrict = async (id: string | null) => {
-  if (id !== null) {
+  if (id !== null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listSubDistrict(id))
diff --git a/src/modules/04_registry/components/Information/Address.vue b/src/modules/04_registry/components/Information/Address.vue
index 8b8ffbf67..8881a3505 100644
--- a/src/modules/04_registry/components/Information/Address.vue
+++ b/src/modules/04_registry/components/Information/Address.vue
@@ -626,8 +626,6 @@ const getNewData = async () => {
   await fetchDistrict(addressData.value.provinceIdC, "2");
   await fetchSubDistrict(addressData.value.districtId, "1");
   await fetchSubDistrict(addressData.value.districtIdC, "2");
-  await selectSubDistrict(addressData.value.subdistrictId, "1");
-  await selectSubDistrict(addressData.value.subdistrictIdC, "2");
 };
 
 const fetchData = async () => {
@@ -797,7 +795,7 @@ const fetchProvince = async () => {
 };
 
 const fetchDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listDistrict(id))
@@ -825,7 +823,7 @@ const fetchDistrict = async (id: string | null, position: string) => {
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listSubDistrict(id))
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index c56a812f0..c9db6d816 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -155,10 +155,6 @@
         <q-space />
 
         <q-btn round flat color="pink-5" icon="mdi-file-document">
-          <!-- <q-tooltip>{{
-            reasonStatus ? "การกลับเข้ารับราชการ" : "การออกจากราชการ"
-          }}</q-tooltip> -->
-
           <q-menu transition-show="jump-down" transition-hide="jump-up">
             <q-list dense style="min-width: 160px">
               <q-item clickable v-close-popup @click="clickPassaway">
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
index 00c482ab1..ce83dfee2 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
@@ -123,8 +123,6 @@ const getNewData = async () => {
   await fetchDistrict(addressData.value.currentProvinceId, "2");
   await fetchSubDistrict(addressData.value.registDistrictId, "1");
   await fetchSubDistrict(addressData.value.currentDistrictId, "2");
-  await selectSubDistrict(addressData.value.registSubDistrictId, "1");
-  await selectSubDistrict(addressData.value.currentSubDistrictId, "2");
 };
 
 const editData = async () => {
@@ -247,7 +245,7 @@ const fetchProvince = async () => {
 };
 
 const fetchDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     showLoader();
     await http
       .get(config.API.listDistrict(id))
@@ -275,7 +273,7 @@ const fetchDistrict = async (id: string | null, position: string) => {
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     showLoader();
     await http
       .get(config.API.listSubDistrict(id))
diff --git a/src/modules/05_placement/components/Receive/receiveDetail.vue b/src/modules/05_placement/components/Receive/receiveDetail.vue
new file mode 100644
index 000000000..534e2c65b
--- /dev/null
+++ b/src/modules/05_placement/components/Receive/receiveDetail.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="col-12 row">
+    <div class="row col-12" style="padding-top: 80px">
+      <div id="information" name="1" class="row col-12 information">
+        <Information v-model:statusEdit="statusEdit" :statusAdd="false" />
+      </div>
+      <div id="government" name="16" class="row col-12 q-mt-md">
+        <Government v-model:statusEdit="statusEdit" :statusAdd="false" />
+      </div>
+      <div id="address" name="17" class="row col-12 q-mt-md">
+        <Address v-model:statusEdit="statusEdit" :statusAdd="false" />
+      </div>
+      <div id="family" name="18" class="row col-12 q-mt-md">
+        <Family v-model:statusEdit="statusEdit" :statusAdd="false" />
+      </div>
+      <div id="certicate" name="15" class="row col-12 q-mt-md">
+        <Certicate />
+      </div>
+    </div>
+    <Image />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import Image from "@/components/information/Image.vue";
+import Information from "@/components/information/Information.vue";
+import Government from "@/components/information/Government.vue";
+import Address from "@/components/information/Address.vue";
+import Family from "@/components/information/Family.vue";
+import Certicate from "@/components/information/Certicate.vue";
+
+const statusEdit = ref<boolean>(false);
+</script>
+<style lang="scss" scoped>
+.information:target {
+  padding-top: 84px;
+}
+</style>
+>
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 9dd3924d4..007a3b7e8 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -292,6 +292,10 @@ const closeModalTree = async () => {
   //   await getTable();
   modalTree.value = false;
 };
+
+const nextPage = (id: string) => {
+  router.push(`/receive/${id}`);
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการรับโอน</div>
@@ -367,25 +371,53 @@ const closeModalTree = async () => {
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props">
+                <q-td
+                  key="no"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td key="fullname" :props="props">
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.fullname }}
                 </q-td>
-                <q-td key="position" :props="props">
+                <q-td
+                  key="position"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.position }}
                 </q-td>
-                <q-td key="positionLevel" :props="props">
+                <q-td
+                  key="positionLevel"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.positionLevel }}
                 </q-td>
-                <q-td key="oc" :props="props">
+                <q-td
+                  key="oc"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.oc }}
                 </q-td>
-                <q-td key="agency" :props="props">
+                <q-td
+                  key="agency"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.agency }}
                 </q-td>
-                <q-td key="status" :props="props">
+                <q-td
+                  key="status"
+                  :props="props"
+                  @click="nextPage(props.row.personalId)"
+                >
                   {{ props.row.status }}
                 </q-td>
                 <q-td auto-width>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 93d3af33f..b6e30b8d2 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -50,6 +50,9 @@ const RepatriationOrderAdd = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
+const receiveDetail = () =>
+  import("@/modules/05_placement/components/Receive/receiveDetail.vue");
+
 export default [
   {
     path: "/placement",
@@ -221,4 +224,14 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/receive/:id",
+    name: "receiveDetail",
+    component: receiveDetail,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
 ];
diff --git a/src/modules/08_registryEmployee/views/Information/Address.vue b/src/modules/08_registryEmployee/views/Information/Address.vue
index 8b8ffbf67..8881a3505 100644
--- a/src/modules/08_registryEmployee/views/Information/Address.vue
+++ b/src/modules/08_registryEmployee/views/Information/Address.vue
@@ -626,8 +626,6 @@ const getNewData = async () => {
   await fetchDistrict(addressData.value.provinceIdC, "2");
   await fetchSubDistrict(addressData.value.districtId, "1");
   await fetchSubDistrict(addressData.value.districtIdC, "2");
-  await selectSubDistrict(addressData.value.subdistrictId, "1");
-  await selectSubDistrict(addressData.value.subdistrictIdC, "2");
 };
 
 const fetchData = async () => {
@@ -797,7 +795,7 @@ const fetchProvince = async () => {
 };
 
 const fetchDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listDistrict(id))
@@ -825,7 +823,7 @@ const fetchDistrict = async (id: string | null, position: string) => {
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
-  if (id != null) {
+  if (id != null && id != "") {
     loaderPage(true);
     await http
       .get(config.API.listSubDistrict(id))