diff --git a/src/components/information/Address.vue b/src/components/information/Address.vue
index 8881a3505..0e0af573c 100644
--- a/src/components/information/Address.vue
+++ b/src/components/information/Address.vue
@@ -297,14 +297,14 @@ 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";
+} from "@/components/information/interface/profileType";
+import { defaultAddress } from "@/components/information/interface/profileType";
+import HeaderTop from "@/components/information/top.vue";
+import type { RequestItemsHistoryObject } from "@/components/information/interface/request/Address";
+import type { ResponseObject } from "@/components/information/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 { AddressOps } from "@/components/information/interface/index/Main";
 import type { QTableProps } from "quasar";
 
 const props = defineProps({
diff --git a/src/components/information/Certicate.vue b/src/components/information/Certicate.vue
index d08e8c3b2..fe17fc0f4 100644
--- a/src/components/information/Certicate.vue
+++ b/src/components/information/Certicate.vue
@@ -259,18 +259,18 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
-import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useComponentProfileDataStore } from "@/components/information/store/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 ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/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";
+} from "@/components/information/interface/request/Certificate";
+import type { ResponseObject } from "@/components/information/interface/response/Certificate";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -288,7 +288,7 @@ const props = defineProps({
 });
 
 const $q = useQuasar();
-const store = useProfileDataStore();
+const store = useComponentProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
diff --git a/src/components/information/DialogFooter.vue b/src/components/information/DialogFooter.vue
new file mode 100644
index 000000000..c7b6623b4
--- /dev/null
+++ b/src/components/information/DialogFooter.vue
@@ -0,0 +1,135 @@
+<template>
+  <q-card-actions class="text-primary q-py-sm">
+    <q-btn
+      flat
+      round
+      icon="mdi-menu-left"
+      @click="clickPrevious"
+      v-if="modalEdit == true"
+      :disable="previous == false"
+      :color="!previous ? 'grey-7' : 'public'"
+    />
+    <q-btn
+      flat
+      round
+      icon="mdi-menu-right"
+      @click="clickNext"
+      v-if="modalEdit == true"
+      :disable="next == false"
+      :color="!next ? 'grey-7' : 'public'"
+    />
+    <q-space />
+    <q-btn
+      v-if="modalEdit == true"
+      flat
+      round
+      color="red"
+      @click="clickDelete"
+      icon="mdi-delete"
+    >
+      <q-tooltip>ลบข้อมูล</q-tooltip>
+    </q-btn>
+    <q-btn
+      v-if="!editvisible"
+      flat
+      round
+      :disabled="editvisible"
+      :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit"
+      icon="mdi-pencil-outline"
+    >
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+    </q-btn>
+    <div v-else>
+      <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :outline="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'red'"
+        @click="cancel()"
+        icon="mdi-undo"
+        v-if="modalEdit == true"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'public'"
+        @click="checkSave"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+    </div>
+  </q-card-actions>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  editvisible: Boolean,
+  next: Boolean,
+  previous: Boolean,
+  modalEdit: Boolean,
+  clickNext: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  clickPrevious: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  clickDelete: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits([
+  "update:editvisible",
+  "update:next",
+  "update:previous",
+]);
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+const cancel = async () => {
+  props.cancel();
+};
+const clickDelete = async () => {
+  props.clickDelete();
+};
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+const checkSave = () => {
+  props.validate();
+  props.save();
+};
+
+const clickNext = async () => {
+  await props.clickNext();
+};
+
+const clickPrevious = async () => {
+  await props.clickPrevious();
+};
+</script>
diff --git a/src/components/information/DialogHeader.vue b/src/components/information/DialogHeader.vue
new file mode 100644
index 000000000..8aa03351d
--- /dev/null
+++ b/src/components/information/DialogHeader.vue
@@ -0,0 +1,27 @@
+<template>
+  <q-toolbar>
+    <q-toolbar-title class="text-subtitle2 text-bold">{{
+      tittle
+    }}</q-toolbar-title>
+    <q-btn
+      icon="close"
+      unelevated
+      round
+      dense
+      @click="close"
+      style="color: #ff8080; background-color: #ffdede"
+    />
+  </q-toolbar>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  tittle: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>
diff --git a/src/components/information/DialogHistory.vue b/src/components/information/DialogHistory.vue
new file mode 100644
index 000000000..7c08e3043
--- /dev/null
+++ b/src/components/information/DialogHistory.vue
@@ -0,0 +1,45 @@
+<template>
+  <q-dialog :model-value="modal" persistent>
+    <q-card style="width: 600px">
+      <DialogHeader :tittle="props.title" :close="close" />
+      <q-separator />
+      <q-card-section
+        :class="props.fix ? 'q-pa-md scroll' : 'q-pa-md'"
+        :style="props.fix ? 'height: 50vh' : ''"
+      >
+        <slot name="body" />
+      </q-card-section>
+      <q-separator />
+      <q-card-actions class="text-primary">
+        <slot name="footer" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import DialogHeader from "@/components/information/DialogHeader.vue";
+
+const props = defineProps({
+  title: {
+    required: true,
+    type: String,
+    default: "",
+  },
+  modal: {
+    required: true,
+    type: Boolean,
+    default: false,
+  },
+  fix: {
+    required: true,
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(["update:modal"]);
+
+const close = async () => {
+  emit("update:modal", false);
+};
+</script>
diff --git a/src/components/information/Family.vue b/src/components/information/Family.vue
index 8b9eaf90c..f6b3aab4d 100644
--- a/src/components/information/Family.vue
+++ b/src/components/information/Family.vue
@@ -1094,14 +1094,14 @@ 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";
+} from "@/components/information/interface/profileType";
+import HeaderTop from "@/components/information/top.vue";
+import DialogHistory from "@/components/information/DialogHistory.vue";
 import type {
   ResponseObject,
   childrenFamily,
   ResponseHistory,
-} from "@/modules/04_registry/interface/response/Family";
+} from "@/components/information/interface/response/Family";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
diff --git a/src/components/information/Government.vue b/src/components/information/Government.vue
index 35d6fca2a..fc7e75809 100644
--- a/src/components/information/Government.vue
+++ b/src/components/information/Government.vue
@@ -332,16 +332,16 @@ 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 type { Goverment } from "@/components/information/interface/profileType";
+import { defaultGoverment } from "@/components/information/interface/profileType";
+import HeaderTop from "@/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 type { RequestItemsHistoryObject } from "@/components/information/interface/request/Government";
+import type { ResponseObject } from "@/components/information/interface/response/Government";
 import { useRoute } from "vue-router";
-import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
 import { storeToRefs } from "pinia";
 import type { QTableProps } from "quasar";
 
@@ -367,7 +367,7 @@ const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { date2Thai, success, dateToISO, messageError } = mixin;
-const profileStore = useProfileDataStore();
+const profileStore = useComponentProfileDataStore();
 const { birthDate, retireText } = storeToRefs(profileStore);
 const edit = ref<boolean>(false);
 const govermentData = ref<Goverment>(defaultGoverment);
diff --git a/src/components/information/Information.vue b/src/components/information/Information.vue
index 1acf5f85d..ae55733a1 100644
--- a/src/components/information/Information.vue
+++ b/src/components/information/Information.vue
@@ -414,13 +414,13 @@ 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";
+} from "@/components/information/interface/profileType";
+import { defaultInformation } from "@/components/information/interface/profileType";
+import type { RequestItemsHistoryObject } from "@/components/information/interface/request/Information";
+import type { ResponseObject } from "@/components/information/interface/response/Information";
+import type { InformationOps } from "@/components/information/interface/index/Main";
+import OldName from "@/components/information/OldName.vue";
+import HeaderTop from "@/components/information/top.vue";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
diff --git a/src/components/information/OldName.vue b/src/components/information/OldName.vue
new file mode 100644
index 000000000..54ee056a7
--- /dev/null
+++ b/src/components/information/OldName.vue
@@ -0,0 +1,973 @@
+<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
+<template>
+  <div class="col-12">
+    <q-form ref="myForm">
+      <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
+        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="statusEdit ? selectData(props) : ''"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'status'" class="table_ellipsis">
+                {{ typeChangeName(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                v-if="props.row.file != null"
+                color="green"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-file-document-outline"
+                @click="openFile(props.row.file)"
+              />
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </div>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :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">
+              <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="status"
+                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>
+            <q-space class="col-6" />
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <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="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-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit || status == 'lastName'"
+                :borderless="!edit"
+                v-model="firstName"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit || status == 'firstName'"
+                :borderless="!edit"
+                v-model="lastName"
+                :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+                hide-bottom-space
+                :label="`${'นามสกุล'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <q-btn
+              v-if="file != null && !edit"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="openFile(file)"
+            />
+            <q-uploader
+              v-if="edit"
+              color="gray"
+              type="file"
+              flat
+              ref="uploader"
+              class="full-width"
+              text-color="white"
+              :max-size="10000000"
+              accept=".jpg,.png,.pdf,.csv,.doc"
+              bordered
+              label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+              @added="fileAdd"
+            >
+              <template v-slot:header="scope">
+                <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+                  <q-btn
+                    v-if="scope.queuedFiles.length > 0"
+                    icon="clear_all"
+                    @click="scope.removeQueuedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบทั้งหมด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.uploadedFiles.length > 0"
+                    icon="done_all"
+                    @click="scope.removeUploadedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                  </q-btn>
+                  <q-spinner
+                    v-if="scope.isUploading"
+                    class="q-uploader__spinner"
+                  />
+                  <div class="col">
+                    <div class="q-uploader__title">
+                      {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
+                    </div>
+                    <div class="q-uploader__subtitle">
+                      {{ scope.uploadSizeLabel }} /
+                      {{ scope.uploadProgressLabel }}
+                    </div>
+                  </div>
+                  <q-btn
+                    v-if="scope.canAddFiles"
+                    type="a"
+                    icon="add_box"
+                    @click="scope.pickFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-uploader-add-trigger />
+                    <q-tooltip>เลือกไฟล์</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.isUploading"
+                    icon="clear"
+                    @click="scope.abort"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                  </q-btn>
+                </div>
+              </template>
+            </q-uploader>
+          </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"
+    :history="true"
+  >
+    <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 == 'status'" class="table_ellipsis">
+            {{ typeChangeName(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            v-if="props.row.file != null"
+            color="green"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-file-document-outline"
+            @click="openFile(props.row.file)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useComponentProfileDataStore } from "@/components/information/store/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/components/information/Table.vue";
+import DialogHeader from "@/components/information/DialogHeader.vue";
+import DialogFooter from "@/components/information/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/components/information/interface/request/OldName";
+import type { ResponseObject } from "@/components/information/interface/response/OldName";
+import type {
+  OldNameOps,
+  DataOption,
+} from "@/components/information/interface/index/Main";
+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,
+  },
+  fetchDataInformation: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  perfixId: {
+    type: String,
+    required: true,
+  },
+  firstname: {
+    type: String,
+    required: true,
+  },
+  lastname: {
+    type: String,
+    required: true,
+  },
+});
+
+const $q = useQuasar();
+const store = useComponentProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  typeChangeName,
+  dialogMessage,
+} = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const prefixId = ref<string>();
+const firstName = ref<string>();
+const lastName = ref<string>();
+const status = ref<string>();
+const nameFile = 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.toString());
+const file = ref<string | null>(null);
+const fileUpload = ref<any>([]);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+const Ops = ref<OldNameOps>({
+  prefixOps: [],
+  statusOps: [
+    {
+      id: "firstName",
+      name: "เปลี่ยนชื่อ",
+    },
+    {
+      id: "lastName",
+      name: "เปลี่ยนนามสกุล",
+    },
+    {
+      id: "all",
+      name: "เปลี่ยนชื่อ-นามสกุล",
+    },
+  ],
+});
+const OpsFilter = ref<OldNameOps>({
+  prefixOps: [],
+  statusOps: [
+    {
+      id: "firstName",
+      name: "เปลี่ยนชื่อ",
+    },
+    {
+      id: "lastName",
+      name: "เปลี่ยนนามสกุล",
+    },
+    {
+      id: "all",
+      name: "เปลี่ยนชื่อ-นามสกุล",
+    },
+  ],
+});
+profileData.oldName.columns.length == 0
+  ? (visibleColumns.value = ["prefix", "firstName", "lastName", "status"])
+  : (visibleColumns.value = profileData.oldName.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    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: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    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: "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: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    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[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("oldName", count);
+});
+
+onMounted(async () => {
+  await fetchPerson();
+  await fetchData();
+});
+
+const fetchData = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileChangeNameId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+const fetchPerson = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      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;
+    })
+    .catch((e: any) => {})
+    .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];
+  prefixId.value = row.prefixId;
+  firstName.value = row.firstName;
+  lastName.value = row.lastName;
+  status.value = row.status;
+  file.value = row.file;
+  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 () => {
+  if (fileUpload.value.length > 0) {
+    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: fileUpload.value[0].type,
+    });
+    const formData = new FormData();
+    formData.append("", newFile);
+    if (prefixId.value != undefined)
+      formData.append("prefixId", prefixId.value);
+    if (firstName.value != undefined)
+      formData.append("firstName", firstName.value);
+    if (lastName.value != undefined)
+      formData.append("lastName", lastName.value);
+    if (status.value != undefined) formData.append("status", status.value);
+    loaderPage(true);
+    await http
+      .post(config.API.profileChangeNameId(profileId.value), formData)
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+        await props.fetchDataInformation();
+      });
+  } else {
+    dialogMessage(
+      $q,
+      "ไม่สามารถบันทึกข้อมูลได้",
+      "กรุณาอัปโหลดเอกสารหลักฐาน",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  const formData = new FormData();
+  if (fileUpload.value.length > 0) {
+    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: fileUpload.value[0].type,
+    });
+    formData.append("", newFile);
+  }
+  if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
+  if (firstName.value != undefined)
+    formData.append("firstName", firstName.value);
+  if (lastName.value != undefined) formData.append("lastName", lastName.value);
+  if (status.value != undefined) formData.append("status", status.value);
+  loaderPage(true);
+  await http
+    .put(config.API.profileChangeNameId(id.value), formData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await props.fetchDataInformation();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileChangeNameId(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;
+  prefixId.value = props.row.prefixId;
+  firstName.value = props.row.firstName;
+  lastName.value = props.row.lastName;
+  status.value = props.row.status;
+  file.value = props.row.file;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  prefixId.value = props.perfixId;
+  firstName.value = props.firstname;
+  lastName.value = props.lastname;
+  status.value = "";
+  file.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) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileChangeNameHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          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 "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fileAdd = async (val: any) => {
+  nameFile.value = val[0].name;
+  fileUpload.value = val;
+};
+
+const openFile = async (val: string | null) => {
+  if (val != null) window.open(val);
+};
+
+/**
+ * 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/Table.vue b/src/components/information/Table.vue
new file mode 100644
index 000000000..387fc9069
--- /dev/null
+++ b/src/components/information/Table.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="q-pb-sm row">
+    <HeaderTop
+      v-model:edit="editBtn"
+      :header="name"
+      :icon="icon"
+      :add="checkAdd"
+      :addleave="checkAddLeave"
+      :addData="true"
+      :history="false"
+      :disable="statusEdit"
+      :iconAdd="iconAdd"
+    />
+    <q-space />
+    <div class="items-center" style="display: flex" v-if="headerShow">
+      <!-- ค้นหาข้อความใน table -->
+      <q-input
+        standout
+        dense
+        :model-value="inputfilter"
+        ref="filterRef"
+        @update:model-value="updateInput"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+        style="max-width: 200px"
+        class="q-ml-sm"
+      >
+        <template v-slot:append>
+          <q-icon v-if="inputfilter == ''" name="search" />
+          <q-icon
+            v-if="inputfilter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+      <!-- แสดงคอลัมน์ใน table -->
+      <q-select
+        :model-value="inputvisible"
+        @update:model-value="updateVisible"
+        :display-value="$q.lang.table.columns"
+        multiple
+        outlined
+        dense
+        :options="attrs.columns"
+        options-dense
+        option-value="name"
+        map-options
+        emit-value
+        style="min-width: 150px"
+        class="gt-xs q-ml-sm"
+      />
+    </div>
+  </div>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    :pagination="initialPagination"
+    :rows-per-page-options="[0]"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import HeaderTop from "@/components/information/top.vue";
+import type { Pagination } from "@/components/information/interface/store/main";
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const editBtn = ref<boolean>(false);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  inputfilter: String,
+  name: String,
+  icon: String,
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  inputvisible: Array,
+  editvisible: Boolean,
+  headerShow: {
+    type: Boolean,
+    default: true,
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+const checkAddLeave = () => {
+  props.addleave();
+};
+
+const checkAdd = () => {
+  props.add();
+};
+
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+
+const cancel = async () => {
+  updateEdit(!props.editvisible);
+  props.cancel();
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/components/information/TableProfile.vue b/src/components/information/TableProfile.vue
new file mode 100644
index 000000000..df25354eb
--- /dev/null
+++ b/src/components/information/TableProfile.vue
@@ -0,0 +1,694 @@
+<template>
+  <q-table
+    ref="table"
+    flat
+    :class="
+      $q.screen.gt.xs
+        ? 'q-px-md custom-header-table2'
+        : 'q-px-sm custom-header-table2 custom-table-height'
+    "
+    v-bind="attrs"
+    dense
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    :pagination-label="paginationLabel"
+    :pagination="initialPagination"
+    :rows-per-page-options="[0]"
+  >
+    <template v-slot:top="props">
+      <div class="q-py-sm col-12 row">
+        <q-space />
+        <div class="items-center row col-12 q-gutter-x-sm">
+          <q-btn
+            size="13px"
+            color="grey-7"
+            dense
+            flat
+            round
+            @click="onTab"
+            class="shadow-1"
+            icon="chevron_right"
+            v-if="!isTab"
+          >
+            <q-tooltip>เปิด</q-tooltip>
+          </q-btn>
+          <q-btn
+            size="12px"
+            flat
+            round
+            color="blue"
+            @click="clickSearchPanel"
+            icon="mdi-filter-variant"
+            v-show="searchPanel == false"
+          >
+            <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
+          </q-btn>
+          <q-space />
+          <q-input
+            v-show="searchPanel == false"
+            standout
+            dense
+            :model-value="inputfilter"
+            ref="filterRef"
+            @update:model-value="updateInput"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+          >
+            <template v-slot:append>
+              <q-icon v-if="inputfilter == ''" name="search" />
+              <q-icon
+                v-if="inputfilter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <!-- แสดงคอลัมน์ใน table -->
+          <q-select
+            :model-value="inputvisible"
+            @update:model-value="updateVisible"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="attrs.columns"
+            options-dense
+            option-value="name"
+            map-options
+            emit-value
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <div class="items-center">
+        <q-slide-transition
+          v-show="searchPanel"
+          class="q-mb-sm"
+          :duration="150"
+        >
+          <div class="my-content">
+            <div
+              class="row q-pa-xs items-center bg-blue-1"
+              style="border-radius: 4px 4px 0px 0px"
+            >
+              <q-icon
+                size="20px"
+                color="blue-9"
+                name="mdi-filter-variant"
+                class="q-mx-sm"
+              />
+              <div class="text-blue-9 text-subtitle2 text-weight-medium">
+                <span>ค้นหาข้อมูลทะเบียนประวัติ</span>
+              </div>
+              <q-space />
+              <q-btn
+                color="blue-9"
+                icon="mdi-close"
+                size="12px"
+                flat
+                round
+                dense
+                @click="clickSearchPanel"
+              />
+            </div>
+            <q-separator color="blue-1" />
+            <div class="dialog-card-contain">
+              <q-card-section class="q-pa-md">
+                <div class="row col-12 q-col-gutter-sm">
+                  <div
+                    :class="
+                      $q.screen.lt.md
+                        ? ' row col-12 q-col-gutter-xs'
+                        : 'no-wrap row col-12 q-col-gutter-xs'
+                    "
+                  >
+                    <selector
+                      class="col-3"
+                      hide-bottom-space
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
+                      outlined
+                      dense
+                      lazy-rules
+                      :model-value="employeeClass"
+                      emit-value
+                      map-options
+                      :options="employeeClassOps"
+                      option-label="name"
+                      option-value="id"
+                      :label="`${'ประเภท'}`"
+                      use-input
+                      input-debounce="0"
+                      @update:model-value="updateEmployeeClass"
+                    />
+                    <!-- @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                      ) " -->
+                    <q-input
+                      class="col-3"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="profileId"
+                      hide-bottom-space
+                      label="เลขประจำตัวประชาชน"
+                      @update:model-value="updateProfileId"
+                      type="number"
+                    />
+                    <q-input
+                      class="col-2"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="fullName"
+                      hide-bottom-space
+                      label="ชื่อ-นามสกุล"
+                      @update:model-value="updateFullname"
+                    />
+                    <datepicker
+                      class="col-2"
+                      menu-class-name="modalfix"
+                      :model-value="retireYear"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:model-value="updateRetireYear"
+                      clearable
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          class="inputgreen cursor-pointer q-mb-sm"
+                          hide-bottom-space
+                          outlined
+                          dense
+                          lazy-rules
+                          borderless
+                          :model-value="
+                            retireYear == null ? null : retireYear + 543
+                          "
+                          :label="`${'ปีเกษียณ'}`"
+                          clearable
+                          @clear="clearDate"
+                        >
+                          <!-- <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template> -->
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <q-input
+                      class="col-2"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="govAge"
+                      hide-bottom-space
+                      label="อายุราชการ(ปี)"
+                      type="number"
+                      @update:model-value="updateGovAge"
+                    />
+                  </div>
+
+                  <div
+                    :class="
+                      $q.screen.lt.md
+                        ? ' row col-12 q-col-gutter-xs'
+                        : 'no-wrap row col-12 q-col-gutter-xs'
+                    "
+                  >
+                    <q-input
+                      v-if="employeeClass == 'officer'"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="positionPath"
+                      hide-bottom-space
+                      label="ตำแหน่งในสายงาน"
+                      @update:model-value="updatePositionPath"
+                      class="col-3"
+                    />
+                    <q-input
+                      v-if="employeeClass == 'officer'"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="positionLevel"
+                      hide-bottom-space
+                      label="ระดับ"
+                      @update:model-value="updatePositionLevel"
+                      class="col-3"
+                    />
+                    <q-input
+                      v-if="employeeClass == 'officer'"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="positionExecutive"
+                      hide-bottom-space
+                      label="ตำแหน่งทางการบริหาร"
+                      @update:model-value="updatePositionExecutive"
+                      class="col-3"
+                    />
+                    <q-input
+                      v-if="employeeClass != 'officer'"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="employeePosition"
+                      hide-bottom-space
+                      label="ตำแหน่ง"
+                      @update:model-value="updateEmployeePosition"
+                      class="col-3"
+                    />
+                    <q-input
+                      v-if="employeeClass != 'officer'"
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="employeeLevel"
+                      hide-bottom-space
+                      label="ระดับชั้นงาน"
+                      @update:model-value="updateEmployeeLevel"
+                      class="col-3"
+                    />
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="posNo"
+                      hide-bottom-space
+                      label="ตำแหน่งเลขที่"
+                      @update:model-value="updatePosNo"
+                      class="col-3"
+                    />
+                  </div>
+                  <div
+                    :class="
+                      $q.screen.lt.md
+                        ? ' row col-12 q-col-gutter-xs'
+                        : 'no-wrap row col-12 q-col-gutter-xs'
+                    "
+                  >
+                    <datepicker
+                      class="col-2"
+                      menu-class-name="modalfix"
+                      :model-value="reportYear"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:model-value="updateReportYear"
+                      clearable
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          class="inputgreen cursor-pointer q-mb-sm"
+                          hide-bottom-space
+                          outlined
+                          dense
+                          lazy-rules
+                          borderless
+                          :model-value="
+                            reportYear == null ? null : reportYear + 543
+                          "
+                          :label="`${'ปีงบประมาณ'}`"
+                          clearable
+                          @clear="clearReportDate"
+                        >
+                          <!-- <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template> -->
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="reportNo"
+                      hide-bottom-space
+                      label="เลขที่คำสั่ง"
+                      @update:model-value="updateReportNo"
+                      class="col-3"
+                    />
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="reportType"
+                      hide-bottom-space
+                      label="ประเภทคำสั่ง"
+                      @update:model-value="updateReportType"
+                      class="col-3"
+                    />
+                  </div>
+                  <div class="col-12 row items-center">
+                    <q-toggle
+                      dense
+                      :model-value="isShowRetire"
+                      color="primary"
+                      @update:model-value="updateIsShowRetire"
+                      class="q-pr-md"
+                    >
+                      แสดงข้อมูลผู้พ้นจากราชการ
+                    </q-toggle>
+                    <q-toggle
+                      dense
+                      :model-value="isProbation"
+                      color="primary"
+                      @update:model-value="updateIsProbation"
+                    >
+                      ทดลองปฏิบัติหน้าที่ราชการ
+                    </q-toggle>
+                    <q-space />
+                    <div>
+                      <q-btn
+                        dense
+                        color="primary"
+                        icon="mdi-magnify"
+                        label="ค้นหา"
+                        class="q-px-md"
+                        @click="doSearch"
+                      />
+                    </div>
+                  </div>
+                  <!-- <div class="col-12 row q-col-gutter-y-md">
+                    <div class="row q-gutter-md">
+                      <q-radio
+                        dense
+                        :model-value="profileType"
+                        val="officer"
+                        label="ข้าราชการสามัญ"
+                        class="q-pt-sm"
+                        @update:model-value="updateProfileType"
+                      />
+                      <q-radio
+                        dense
+                        :model-value="profileType"
+                        val="employee"
+                        class="q-pt-sm"
+                        @update:model-value="updateProfileType"
+                      >
+                        ลูกจ้าง
+                      </q-radio>
+                    </div>
+                    <q-space />
+                    <div>
+                      <q-btn
+                        dense
+                        color="primary"
+                        icon="mdi-magnify"
+                        label="ค้นหา"
+                        class="q-px-md"
+                        @click="doSearch"
+                      />
+                    </div>
+                  </div> -->
+                </div>
+              </q-card-section>
+            </div>
+          </div>
+        </q-slide-transition>
+      </div>
+    </template>
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type {
+  Pagination,
+  DataOption,
+} from "@/components/information/interface/store/main";
+
+const attrs = ref<any>(useAttrs());
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const searchPanel = ref<boolean>(true);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+const employeeClassOps = ref<DataOption[]>([
+  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
+  //   { id: "employee", name: "ลูกจ้าง(ทั้งหมด)" },
+  { id: "perm", name: "ลูกจ้างประจำ" },
+  { id: "temp", name: "ลูกจ้างชั่วคราว" },
+]);
+
+const props = defineProps({
+  inputfilter: String,
+  inputvisible: Array,
+  profileId: String,
+  employeeClass: String,
+  fullName: String,
+  oldFullName: String,
+  isShowRetire: Boolean,
+  isProbation: Boolean,
+  //   profileType: String,
+  retireYear: Number || null,
+  govAge: Number || null,
+  positionPath: String,
+  positionLevel: String,
+  positionExecutive: String,
+  employeePosition: String,
+  employeeLevel: String,
+  posNo: String,
+  reportYear: Number || null,
+  reportNo: String,
+  reportType: String,
+  isTab: {
+    type: Boolean,
+    default: true,
+  },
+  doSearch: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  onExport: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  onTab: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:profileId",
+  "update:employeeClass",
+  "update:fullName",
+  "update:oldFullName",
+  "update:oldName",
+  "update:retireYear",
+  "update:govAge",
+  "update:isShowRetire",
+  //   "update:profileType",
+  "update:isProbation",
+  "update:positionPath",
+  "update:positionLevel",
+  "update:positionExecutive",
+  "update:employeePosition",
+  "update:employeeLevel",
+  "update:posNo",
+  "update:reportYear",
+  "update:reportNo",
+  "update:reportType",
+]);
+
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const updateProfileId = (value: string | number | null) => {
+  emit("update:profileId", value);
+};
+const updateEmployeeClass = (value: string | number | null) => {
+  emit("update:employeeClass", value);
+};
+const updateFullname = (value: string | number | null) => {
+  emit("update:fullName", value);
+};
+const updateRetireYear = (value: string | number | null) => {
+  emit("update:retireYear", value);
+};
+const updateGovAge = (value: string | number | null) => {
+  emit("update:govAge", value);
+};
+const updateIsShowRetire = (value: string | number | null) => {
+  emit("update:isShowRetire", value);
+};
+const updateIsProbation = (value: string | number | null) => {
+  emit("update:isProbation", value);
+};
+const updatePositionPath = (value: string | number | null) => {
+  emit("update:positionPath", value);
+};
+const updatePositionLevel = (value: string | number | null) => {
+  emit("update:positionLevel", value);
+};
+const updatePositionExecutive = (value: string | number | null) => {
+  emit("update:positionExecutive", value);
+};
+const updateEmployeePosition = (value: string | number | null) => {
+  emit("update:employeePosition", value);
+};
+const updateEmployeeLevel = (value: string | number | null) => {
+  emit("update:employeeLevel", value);
+};
+const updatePosNo = (value: string | number | null) => {
+  emit("update:posNo", value);
+};
+const updateReportYear = (value: string | number | null) => {
+  emit("update:reportYear", value);
+};
+const updateReportNo = (value: string | number | null) => {
+  emit("update:reportNo", value);
+};
+const updateReportType = (value: string | number | null) => {
+  emit("update:reportType", value);
+};
+// const updateProfileType = (value: string | number | null) => {
+//   emit("update:profileType", value);
+// };
+
+const clearDate = () => {
+  emit("update:retireYear", null);
+};
+const clearReportDate = () => {
+  emit("update:reportYear", null);
+};
+
+const clickSearchPanel = () => {
+  emit("update:retireYear", null);
+  emit("update:govAge", null);
+  emit("update:oldName", null);
+  emit("update:oldFullName", null);
+  emit("update:fullName", null);
+  emit("update:profileId", null);
+  emit("update:employeeClass", null);
+  searchPanel.value = !searchPanel.value;
+};
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+const doSearch = () => {
+  props.doSearch();
+};
+
+const onExport = () => {
+  props.onExport();
+};
+
+const onTab = () => {
+  props.onTab();
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.my-content {
+  background: #fff;
+  border: 1px solid rgba(133, 133, 133, 0.2);
+  border-radius: 5px;
+}
+.custom-table-height {
+  height: auto !important;
+}
+.custom-header-table2 {
+  .q-table__top {
+    padding: 0px !important;
+  }
+  .q-table__bottom {
+    border-top: none !important;
+  }
+  .q-table__middle {
+    border-radius: 5px;
+    border: 1px solid rgba(133, 133, 133, 0.2) !important;
+  }
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/components/information/interface/index/Main.ts b/src/components/information/interface/index/Main.ts
new file mode 100644
index 000000000..fe165e2b9
--- /dev/null
+++ b/src/components/information/interface/index/Main.ts
@@ -0,0 +1,84 @@
+import type { zipCodeOption } from "../../components/profileType";
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+  disable?: boolean;
+}
+
+interface DataOptionLeave {
+  id: string;
+  name: string;
+  totalLeave: number;
+}
+
+interface DataOptionInsignia {
+  id: string;
+  name: string;
+  typeName: string;
+}
+
+interface treeTab {
+  id: string;
+  label: string;
+  children: treeTab[];
+}
+
+interface InformationOps {
+  prefixOps: DataOption[];
+  prefixOldOps: DataOption[];
+  genderOps: DataOption[];
+  bloodOps: DataOption[];
+  statusOps: DataOption[];
+  religionOps: DataOption[];
+  employeeClassOps: DataOption[];
+  employeeTypeOps: DataOption[];
+}
+
+interface OldNameOps {
+  prefixOps: DataOption[];
+  statusOps: DataOption[];
+}
+
+interface AddressOps {
+  provinceOps: DataOption[];
+  districtOps: DataOption[];
+  districtCOps: DataOption[];
+  subdistrictOps: zipCodeOption[];
+  subdistrictCOps: zipCodeOption[];
+}
+
+interface FamilyOps {
+  prefixOps: DataOption[];
+}
+
+interface EduOps {
+  levelOptions: DataOption[];
+  positionPathOptions: DataOption[];
+}
+
+interface InsigniaOps {
+  insigniaOptions: DataOptionInsignia[];
+}
+
+interface DisciplineOps {
+  levelOptions: DataOption[];
+}
+
+export type {
+  Pagination,
+  DataOption,
+  DataOptionInsignia,
+  treeTab,
+  InformationOps,
+  OldNameOps,
+  AddressOps,
+  FamilyOps,
+  EduOps,
+  InsigniaOps,
+  DisciplineOps,
+  DataOptionLeave,
+};
diff --git a/src/components/information/interface/profileType.ts b/src/components/information/interface/profileType.ts
new file mode 100644
index 000000000..ab3b28b22
--- /dev/null
+++ b/src/components/information/interface/profileType.ts
@@ -0,0 +1,187 @@
+//interface class array object {name string ,id number}
+
+import type { childrenFamily } from "@/modules/04_registry/interface/response/Family";
+interface ChangeActive {
+  name: string;
+  id: number;
+}
+
+//ข้อมูลส่วนตัว
+interface Information {
+  cardid: string | null;
+  prefix: string | null;
+  age: string | null;
+  prefixId: string | null;
+  firstname: string | null;
+  lastname: string | null;
+  birthDate: Date | null;
+  genderId: string | null;
+  bloodId: string | null;
+  nationality: string | null;
+  ethnicity: string | null;
+  statusId: string | null;
+  religionId: string | null;
+  tel: string | null;
+  employeeType: string | null;
+  employeeClass: string | null;
+  profileType: string | null;
+}
+
+interface Family {
+  prefixC: string | null; // couple
+  prefixIdC: string | null;
+  firstnameC: string | null;
+  lastnameC: string | null;
+  lastnameCOld: string | null;
+  occupationC: string | null;
+  citizenIdC: string | null;
+  liveC: string | null;
+  prefixM: string | null; // male
+  prefixIdM: string | null;
+  firstnameM: string | null;
+  lastnameM: string | null;
+  occupationM: string | null;
+  citizenIdM: string | null;
+  liveM: string | null;
+  prefixF: string | null; // female
+  prefixIdF: string | null;
+  firstnameF: string | null;
+  lastnameF: string | null;
+  occupationF: string | null;
+  citizenIdF: string | null;
+  liveF: string | null;
+  same: string | null;
+  childrens: childrenFamily[];
+}
+
+interface Address {
+  address: string | null;
+  provinceId: string | null;
+  districtId: string | null;
+  subdistrictId: string | null;
+  addressC: string | null;
+  provinceIdC: string | null;
+  districtIdC: string | null;
+  subdistrictIdC: string | null;
+  same: string | null;
+}
+
+interface Goverment {
+  ocId: string | null;
+  positionId: string | null;
+  positionPathSide: string | null;
+  positionLine: string | null;
+  positionType: string | null;
+  positionLevel: string | null;
+  numberId: string | null;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
+  containDate: Date;
+  workDate: Date;
+  retireDate: string | null;
+  absent: number | null;
+  age: number | null;
+  ageAll: string | null;
+  reasonSameDate: string | null;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+  zipCode?: string;
+}
+
+interface zipCodeOption {
+  id: string;
+  name: string;
+  zipCode: string;
+}
+
+const defaultGoverment: Goverment = {
+  ocId: null,
+  positionId: null,
+  positionPathSide: null,
+  positionLine: null,
+  positionType: null,
+  positionLevel: null,
+  numberId: null,
+  positionExecutive: null,
+  positionExecutiveSide: null,
+  containDate: new Date(),
+  workDate: new Date(),
+  retireDate: null,
+  absent: 0,
+  age: 0,
+  ageAll: null,
+  reasonSameDate: null,
+};
+
+const defaultAddress: Address = {
+  address: null,
+  provinceId: null,
+  districtId: null,
+  subdistrictId: null,
+  addressC: null,
+  provinceIdC: null,
+  districtIdC: null,
+  subdistrictIdC: null,
+  same: "0",
+};
+
+const defaultInformation: Information = {
+  cardid: null,
+  age: null,
+  prefix: null,
+  prefixId: null,
+  firstname: null,
+  lastname: null,
+  birthDate: null,
+  genderId: null,
+  bloodId: null,
+  nationality: null,
+  ethnicity: null,
+  statusId: null,
+  religionId: null,
+  tel: null,
+  employeeType: null,
+  employeeClass: null,
+  profileType: null,
+};
+
+const defaultFamily: Family = {
+  prefixC: null,
+  prefixIdC: null,
+  firstnameC: null,
+  lastnameC: null,
+  lastnameCOld: null,
+  occupationC: null,
+  citizenIdC: null,
+  liveC: "1",
+  prefixM: null,
+  prefixIdM: null,
+  firstnameM: null,
+  lastnameM: null,
+  occupationM: null,
+  citizenIdM: null,
+  liveM: "1",
+  prefixF: null,
+  prefixIdF: null,
+  firstnameF: null,
+  lastnameF: null,
+  occupationF: null,
+  citizenIdF: null,
+  liveF: "1",
+  same: "0",
+  childrens: [],
+};
+
+export { defaultInformation, defaultFamily, defaultAddress, defaultGoverment };
+export type {
+  ChangeActive,
+  Information,
+  Family,
+  Address,
+  Goverment,
+  DataOption,
+  zipCodeOption,
+};
diff --git a/src/components/information/interface/request/Address.ts b/src/components/information/interface/request/Address.ts
new file mode 100644
index 000000000..f8cff7753
--- /dev/null
+++ b/src/components/information/interface/request/Address.ts
@@ -0,0 +1,55 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  currentAddress: String | null;
+  currentDistrictId: String | null;
+  currentProvinceId: String | null;
+  currentSubDistrictId: String | null;
+  currentZipCode: String | null;
+  registrationAddress: String | null;
+  registrationDistrictId: String | null;
+  registrationProvinceId: String | null;
+  registrationSame: Boolean | null;
+  registrationSubDistrictId: String | null;
+  registrationZipCode: String | null;
+}
+
+interface RequestItemsHistoryObject {
+  currentAddress: String | null;
+  currentDistrict: String | null;
+  currentProvince: String | null;
+  currentSubDistrict: String | null;
+  currentZipCode: String | null;
+  registrationAddress: String | null;
+  registrationDistrict: String | null;
+  registrationProvince: String | null;
+  registrationSame: Boolean | null;
+  registrationSubDistrict: String | null;
+  registrationZipCode: String | null;
+  createdFullName: String | null;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+  RequestItemsHistoryObject,
+};
diff --git a/src/components/information/interface/request/Assessment.ts b/src/components/information/interface/request/Assessment.ts
new file mode 100644
index 000000000..58bcb2a51
--- /dev/null
+++ b/src/components/information/interface/request/Assessment.ts
@@ -0,0 +1,34 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
+  name: string;
+  date: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Certificate.ts b/src/components/information/interface/request/Certificate.ts
new file mode 100644
index 000000000..a1df312c3
--- /dev/null
+++ b/src/components/information/interface/request/Certificate.ts
@@ -0,0 +1,31 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  certificateNo: string;
+  issuer: string;
+  issueDate: Date;
+  expireDate: Date;
+  certificateType: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Coin.ts b/src/components/information/interface/request/Coin.ts
new file mode 100644
index 000000000..583338641
--- /dev/null
+++ b/src/components/information/interface/request/Coin.ts
@@ -0,0 +1,31 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  issuer: string;
+  detail: string;
+  issueDate: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Discipline.ts b/src/components/information/interface/request/Discipline.ts
new file mode 100644
index 000000000..0cc0906c7
--- /dev/null
+++ b/src/components/information/interface/request/Discipline.ts
@@ -0,0 +1,32 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  level: string;
+  detail: string;
+  unStigma: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  date: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Document.ts b/src/components/information/interface/request/Document.ts
new file mode 100644
index 000000000..9e1c21855
--- /dev/null
+++ b/src/components/information/interface/request/Document.ts
@@ -0,0 +1,19 @@
+//ข้อมูล
+interface RequestItemsObject {
+  name: String;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns };
diff --git a/src/components/information/interface/request/Education.ts b/src/components/information/interface/request/Education.ts
new file mode 100644
index 000000000..28624d8d2
--- /dev/null
+++ b/src/components/information/interface/request/Education.ts
@@ -0,0 +1,45 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  level: string;
+  levelId: string;
+  positionPath: string;
+  isEducation: boolean;
+  institute: string;
+  degree: string;
+  field: string;
+  gpa: string;
+  country: string;
+  duration: string;
+  durationYear: number;
+  other: string;
+  fundName: string;
+  isDate: string | null;
+  finishDate: Date;
+  startDate: number;
+  endDate: number;
+  startDate2: Date;
+  endDate2: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Family.ts b/src/components/information/interface/request/Family.ts
new file mode 100644
index 000000000..334f2e81b
--- /dev/null
+++ b/src/components/information/interface/request/Family.ts
@@ -0,0 +1,29 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  status: string;
+  level: string;
+  refNo: string;
+  refDate: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Government.ts b/src/components/information/interface/request/Government.ts
new file mode 100644
index 000000000..3ef47a218
--- /dev/null
+++ b/src/components/information/interface/request/Government.ts
@@ -0,0 +1,55 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  status: string;
+  level: string;
+  refNo: string;
+  refDate: Date;
+}
+
+interface RequestItemsHistoryObject {
+  oc: string | null;
+  position: string | null;
+  positionPathSide: string | null;
+  posNo: string | null;
+  positionLine: string | null;
+  positionType: string | null;
+  positionLevel: string | null;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
+  dateAppoint: Date;
+  dateStart: Date;
+  retireDate: string | null;
+  govAge: string | null;
+  govAgeAbsent: string | null;
+  govAgePlus: string | null;
+  reasonSameDate: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+  RequestItemsHistoryObject,
+};
diff --git a/src/components/information/interface/request/Information.ts b/src/components/information/interface/request/Information.ts
new file mode 100644
index 000000000..39aac0621
--- /dev/null
+++ b/src/components/information/interface/request/Information.ts
@@ -0,0 +1,59 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  birthDate: Date | null;
+  bloodGroupId: string | null;
+  citizenId: string | null;
+  firstName: string | null;
+  genderId: string | null;
+  lastName: string | null;
+  nationality: string | null;
+  prefixId: string | null;
+  race: string | null;
+  relationshipId: string | null;
+  religionId: string | null;
+  telephoneNumber: string | null;
+  employeeType: string | null;
+  employeeClass: string | null;
+}
+
+interface RequestItemsHistoryObject {
+  citizenId: string | null;
+  prefix: string | null;
+  firstName: string | null;
+  lastName: string | null;
+  birthDate: Date;
+  gender: string | null;
+  relationship: string | null;
+  bloodGroup: string | null;
+  nationality: string | null;
+  race: string | null;
+  religion: string | null;
+  telephoneNumber: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+  employeeType: string | null;
+  employeeClass: string | null;
+}
+
+//columns
+interface Columns {
+  name: String;
+  align: String;
+  label: String;
+  sortable: Boolean;
+  field: String;
+  headerStyle: String;
+  style: String;
+}
+
+export type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+  RequestItemsHistoryObject,
+};
diff --git a/src/components/information/interface/request/Insignia.ts b/src/components/information/interface/request/Insignia.ts
new file mode 100644
index 000000000..f017b879d
--- /dev/null
+++ b/src/components/information/interface/request/Insignia.ts
@@ -0,0 +1,40 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  insigniaType: string;
+  insignia: string;
+  insigniaId: string;
+  year: number;
+  no: string;
+  issue: string;
+  volumeNo: string;
+  volume: string;
+  section: string;
+  page: string;
+  receiveDate: Date;
+  dateAnnounce: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Leave.ts b/src/components/information/interface/request/Leave.ts
new file mode 100644
index 000000000..9693d517c
--- /dev/null
+++ b/src/components/information/interface/request/Leave.ts
@@ -0,0 +1,42 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  typeLeave: string;
+  dateStartLeave: Date;
+  dateEndLeave: Date;
+  numLeave: number;
+  sumLeave: number;
+  totalLeave: number;
+  status: string;
+  reason: string;
+  typeLeaveId: string;
+}
+
+//ข้อมูล
+interface RequestItemsTotalObject {
+  typeLeaveId: string;
+  typeLeave: string;
+  totalLeave: number;
+  limitLeave: string;
+  remainLeave: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps, RequestItemsTotalObject };
diff --git a/src/components/information/interface/request/Main.ts b/src/components/information/interface/request/Main.ts
new file mode 100644
index 000000000..9cf5c79b9
--- /dev/null
+++ b/src/components/information/interface/request/Main.ts
@@ -0,0 +1,49 @@
+//ข้อมูล
+interface RequestItemsObject {
+  id: number;
+  fullname: String;
+  fullnameOld: String;
+  avatar: String;
+  citizenId: String;
+  oc: String;
+  position: String;
+  positionPathSide: String;
+  numberPosition: String | null;
+  positionLine: String;
+  positionType: String;
+  govAge: number;
+  positionLevel: String;
+  positionExecutive: String | null;
+  positionExecutiveSide: String | null;
+  refSalary: String;
+  positionEmployeePosition: String | null;
+  positionEmployeePositionSide: String | null;
+  positionEmployeeLevel: String | null;
+  positionEmployeeGroup: String | null;
+  dateAppoint: Date | string | null;
+  dateStart: Date | string | null;
+  createdAt: Date | string | null;
+  salaryDate: Date | string | null;
+  leaveReason: String;
+  age: String;
+  amount: String;
+  insignia: String;
+  insigniaLast: String;
+  isLeave: String;
+  leaveDateOrder: Date | string | null;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns };
diff --git a/src/components/information/interface/request/OldName.ts b/src/components/information/interface/request/OldName.ts
new file mode 100644
index 000000000..0fde7fa45
--- /dev/null
+++ b/src/components/information/interface/request/OldName.ts
@@ -0,0 +1,32 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  prefix: string;
+  prefixId: string;
+  firstName: string;
+  lastName: string;
+  status: string;
+  file: string | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Other.ts b/src/components/information/interface/request/Other.ts
new file mode 100644
index 000000000..90339caaa
--- /dev/null
+++ b/src/components/information/interface/request/Other.ts
@@ -0,0 +1,28 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  detail: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Record.ts b/src/components/information/interface/request/Record.ts
new file mode 100644
index 000000000..b40baaf49
--- /dev/null
+++ b/src/components/information/interface/request/Record.ts
@@ -0,0 +1,31 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  detail: string;
+  reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Salary.ts b/src/components/information/interface/request/Salary.ts
new file mode 100644
index 000000000..2f3977809
--- /dev/null
+++ b/src/components/information/interface/request/Salary.ts
@@ -0,0 +1,90 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+interface DataPropsEmployee {
+  row: RequestItemsEmployee;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  date: Date;
+  amount: number;
+  positionSalaryAmount: number;
+  mouthSalaryAmount: number;
+  oc: string;
+  ocId: string;
+  position: string;
+  positionId: string;
+  posNo: string;
+  posNoId: string;
+  positionLine: string;
+  positionLineId: string;
+  positionPathSide: string;
+  positionPathSideId: string;
+  positionType: string;
+  positionTypeId: string;
+  positionLevel: string;
+  positionLevelId: string;
+  positionExecutive: string;
+  positionExecutiveId: string;
+  positionExecutiveSide: string;
+  positionExecutiveSideId: string;
+  salaryClass: string;
+  salaryRef: string;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+interface RequestItemsEmployee {
+  amount: number;
+  createdAt: Date;
+  createdFullName: string;
+  date: Date;
+  id: string;
+  mouthSalaryAmount: number;
+  oc: string | null;
+  ocId: string;
+  posNo: string | null;
+  posNoId: string | null;
+  posNoEmployee: string | null;
+  positionEmployeeGroup: string | null;
+  positionEmployeeGroupId: string | null;
+  positionEmployeeLevel: string | null;
+  positionEmployeeLevelId: string | null;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionId: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeePositionSideId: string | null;
+  positionSalaryAmount: number;
+  salaryClass: string | null;
+  salaryRef: string | null;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+  RequestItemsEmployee,
+  DataPropsEmployee,
+};
diff --git a/src/components/information/interface/request/Talent.ts b/src/components/information/interface/request/Talent.ts
new file mode 100644
index 000000000..b66341543
--- /dev/null
+++ b/src/components/information/interface/request/Talent.ts
@@ -0,0 +1,30 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  field: string;
+  detail: string;
+  remark: string;
+  reference: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Train.ts b/src/components/information/interface/request/Train.ts
new file mode 100644
index 000000000..6f0956578
--- /dev/null
+++ b/src/components/information/interface/request/Train.ts
@@ -0,0 +1,36 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  name: string;
+  topic: string;
+  yearly: number;
+  place: string;
+  duration: string;
+  department: string;
+  numberOrder: string;
+  dateOrder: Date;
+  startDate: Date;
+  endDate: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/request/Work.ts b/src/components/information/interface/request/Work.ts
new file mode 100644
index 000000000..58d2730cd
--- /dev/null
+++ b/src/components/information/interface/request/Work.ts
@@ -0,0 +1,32 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  dateStart: Date;
+  dateEnd: Date;
+  detail: string;
+  reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/components/information/interface/response/Address.ts b/src/components/information/interface/response/Address.ts
new file mode 100644
index 000000000..8769bd1b4
--- /dev/null
+++ b/src/components/information/interface/response/Address.ts
@@ -0,0 +1,34 @@
+//ข้อมูล
+interface ResponseObject {
+  currentAddress: string | null;
+  currentDistrictId: string | null;
+  currentProvinceId: string | null;
+  currentSubDistrictId: string | null;
+  currentZipCode: string | null;
+  registrationAddress: string | null;
+  registrationDistrictId: string | null;
+  registrationProvinceId: string | null;
+  registrationSame: Boolean | null;
+  registrationSubDistrictId: string | null;
+  registrationZipCode: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+}
+
+interface ResponseHistory {
+  currentAddress: string | null;
+  currentDistrictId: string | null;
+  currentProvinceId: string | null;
+  currentSubDistrictId: string | null;
+  currentZipCode: string | null;
+  registrationAddress: string | null;
+  registrationDistrictId: string | null;
+  registrationProvinceId: string | null;
+  registrationSame: string | null;
+  registrationSubDistrictId: string | null;
+  registrationZipCode: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+}
+
+export type { ResponseObject, ResponseHistory };
diff --git a/src/components/information/interface/response/Assessment.ts b/src/components/information/interface/response/Assessment.ts
new file mode 100644
index 000000000..af1f8598a
--- /dev/null
+++ b/src/components/information/interface/response/Assessment.ts
@@ -0,0 +1,16 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
+  name: string;
+  date: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Certificate.ts b/src/components/information/interface/response/Certificate.ts
new file mode 100644
index 000000000..32756682e
--- /dev/null
+++ b/src/components/information/interface/response/Certificate.ts
@@ -0,0 +1,13 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  certificateNo: string;
+  issuer: string;
+  issueDate: Date;
+  expireDate: Date;
+  certificateType: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Coin.ts b/src/components/information/interface/response/Coin.ts
new file mode 100644
index 000000000..578dcbb5e
--- /dev/null
+++ b/src/components/information/interface/response/Coin.ts
@@ -0,0 +1,13 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  issuer: string;
+  detail: string;
+  issueDate: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Discipline.ts b/src/components/information/interface/response/Discipline.ts
new file mode 100644
index 000000000..bb6ca4262
--- /dev/null
+++ b/src/components/information/interface/response/Discipline.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  level: string;
+  detail: string;
+  unStigma: string;
+  refCommandNo: string;
+  refCommandDate: Date;
+  date: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Document.ts b/src/components/information/interface/response/Document.ts
new file mode 100644
index 000000000..4365fe380
--- /dev/null
+++ b/src/components/information/interface/response/Document.ts
@@ -0,0 +1,6 @@
+//ข้อมูล
+interface ResponseObject {
+  name: String;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Education.ts b/src/components/information/interface/response/Education.ts
new file mode 100644
index 000000000..86bda975c
--- /dev/null
+++ b/src/components/information/interface/response/Education.ts
@@ -0,0 +1,27 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  educationLevel: string;
+  educationLevelId: string;
+  positionPath: string;
+  isEducation: boolean;
+  institute: string;
+  degree: string;
+  field: string;
+  gpa: string;
+  country: string;
+  duration: string;
+  durationYear: number;
+  other: string;
+  fundName: string;
+  isDate: string | null;
+  finishDate: Date;
+  startDate: number;
+  endDate: number;
+  startDate2: Date;
+  endDate2: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Family.ts b/src/components/information/interface/response/Family.ts
new file mode 100644
index 000000000..04dc4b363
--- /dev/null
+++ b/src/components/information/interface/response/Family.ts
@@ -0,0 +1,64 @@
+//ข้อมูล
+interface ResponseObject {
+  couple: Boolean | null;
+  couplePrefixId: string | null;
+  coupleFirstName: string | null;
+  coupleLastName: string | null;
+  coupleLastNameOld: string | null;
+  coupleCareer: string | null;
+  coupleLive: Boolean | null;
+  coupleCitizenId: string | null;
+  fatherPrefixId: string | null;
+  fatherFirstName: string | null;
+  fatherLastName: string | null;
+  fatherCareer: string | null;
+  fatherLive: Boolean | null;
+  fatherCitizenId: string | null;
+  motherPrefixId: string | null;
+  motherFirstName: string | null;
+  motherLastName: string | null;
+  motherCareer: string | null;
+  motherLive: Boolean | null;
+  motherCitizenId: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+  childrens: childrenFamily[];
+}
+
+interface ResponseHistory {
+  couple: string | null;
+  couplePrefixId: string | null;
+  coupleFirstName: string | null;
+  coupleLastName: string | null;
+  coupleLastNameOld: string | null;
+  coupleCareer: string | null;
+  coupleLive: string | null;
+  coupleCitizenId: string | null;
+  fatherPrefixId: string | null;
+  fatherFirstName: string | null;
+  fatherLastName: string | null;
+  fatherCareer: string | null;
+  fatherLive: string | null;
+  fatherCitizenId: string | null;
+  motherPrefixId: string | null;
+  motherFirstName: string | null;
+  motherLastName: string | null;
+  motherCareer: string | null;
+  motherLive: string | null;
+  motherCitizenId: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+  childrens: childrenFamily[];
+}
+
+interface childrenFamily {
+  id: string;
+  childrenPrefixId: string | null;
+  childrenFirstName: string | null;
+  childrenLastName: string | null;
+  childrenCareer: string | null;
+  childrenLive: string | null;
+  childrenCitizenId: string | null;
+}
+
+export type { ResponseObject, childrenFamily, ResponseHistory };
diff --git a/src/components/information/interface/response/Government.ts b/src/components/information/interface/response/Government.ts
new file mode 100644
index 000000000..69a4ef3aa
--- /dev/null
+++ b/src/components/information/interface/response/Government.ts
@@ -0,0 +1,23 @@
+//ข้อมูล
+interface ResponseObject {
+  oc: string | null;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
+  dateAppoint: Date | string;
+  dateStart: Date | string;
+  govAge: string | null;
+  govAgeAbsent: number | null;
+  govAgePlus: number | null;
+  positionLevel: string | null;
+  posNo: string | null;
+  position: string | null;
+  positionPathSide: string | null;
+  retireDate: string | null;
+  positionType: string | null;
+  positionLine: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+  reasonSameDate: string | null;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Information.ts b/src/components/information/interface/response/Information.ts
new file mode 100644
index 000000000..cd0008734
--- /dev/null
+++ b/src/components/information/interface/response/Information.ts
@@ -0,0 +1,24 @@
+//ข้อมูล
+interface ResponseObject {
+  changeName: boolean | null;
+  birthDate: Date;
+  bloodGroupId: string | null;
+  citizenId: string | null;
+  firstName: string | null;
+  genderId: string | null;
+  lastName: string | null;
+  nationality: string | null;
+  prefixId: string | null;
+  race: string | null;
+  relationshipId: string | null;
+  religionId: string | null;
+  telephoneNumber: string | null;
+  createdFullName: string | null;
+  createdAt: Date;
+  age: string | null;
+  employeeType: string | null;
+  employeeClass: string | null;
+  profileType: string | null;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Insignia.ts b/src/components/information/interface/response/Insignia.ts
new file mode 100644
index 000000000..4d26152a0
--- /dev/null
+++ b/src/components/information/interface/response/Insignia.ts
@@ -0,0 +1,22 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  insigniaType: string;
+  insignia: string;
+  insigniaId: string;
+  year: number;
+  no: string;
+  issue: string;
+  volumeNo: string;
+  volume: string;
+  section: string;
+  page: string;
+  receiveDate: Date;
+  dateAnnounce: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Leave.ts b/src/components/information/interface/response/Leave.ts
new file mode 100644
index 000000000..f5eb18b13
--- /dev/null
+++ b/src/components/information/interface/response/Leave.ts
@@ -0,0 +1,22 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  typeLeave: string;
+  dateStartLeave: Date;
+  dateEndLeave: Date;
+  numLeave: number;
+  sumLeave: number;
+  totalLeave: number;
+  status: string;
+  reason: string;
+  typeLeaveId: string;
+}
+interface ResponseTotalObject {
+  typeLeaveId: string;
+  typeLeave: string;
+  totalLeave: number;
+  limitLeave: string;
+  remainLeave: string;
+}
+
+export type { ResponseObject, ResponseTotalObject };
diff --git a/src/components/information/interface/response/Main.ts b/src/components/information/interface/response/Main.ts
new file mode 100644
index 000000000..28d372484
--- /dev/null
+++ b/src/components/information/interface/response/Main.ts
@@ -0,0 +1,37 @@
+//ข้อมูล
+interface ResponseObject {
+  id: number;
+  fullname: String;
+  fullnameOld: String;
+  avatar: String;
+  citizenId: String;
+  oc: String;
+  position: String;
+  positionPathSide: String;
+  posNo: String | null;
+  posNoEmployee: String | null;
+  positionLine: String;
+  positionType: String;
+  govAge: number;
+  positionLevel: String;
+  positionExecutive: String | null;
+  positionExecutiveSide: String | null;
+  refSalary: String;
+  positionEmployeePosition: String | null;
+  positionEmployeePositionSide: String | null;
+  positionEmployeeLevel: String | null;
+  positionEmployeeGroup: String | null;
+  dateAppoint: Date | null;
+  dateStart: Date | null;
+  createdAt: Date | null;
+  salaryDate: Date | null;
+  leaveReason: string;
+  age: String;
+  amount: String;
+  insignia: String;
+  insigniaLast: String;
+  isLeave: boolean;
+  leaveDateOrder: Date | null;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/OldName.ts b/src/components/information/interface/response/OldName.ts
new file mode 100644
index 000000000..f908976a1
--- /dev/null
+++ b/src/components/information/interface/response/OldName.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  prefix: string;
+  prefixId: string;
+  firstName: string;
+  lastName: string;
+  status: string;
+  file: string | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Other.ts b/src/components/information/interface/response/Other.ts
new file mode 100644
index 000000000..7bce7e100
--- /dev/null
+++ b/src/components/information/interface/response/Other.ts
@@ -0,0 +1,10 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  date: Date;
+  detail: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Record.ts b/src/components/information/interface/response/Record.ts
new file mode 100644
index 000000000..2ed425be7
--- /dev/null
+++ b/src/components/information/interface/response/Record.ts
@@ -0,0 +1,13 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  date: Date;
+  detail: string;
+  reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Salary.ts b/src/components/information/interface/response/Salary.ts
new file mode 100644
index 000000000..dbf255081
--- /dev/null
+++ b/src/components/information/interface/response/Salary.ts
@@ -0,0 +1,61 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  date: Date;
+  amount: number;
+  positionSalaryAmount: number;
+  mouthSalaryAmount: number;
+  oc: string;
+  ocId: string;
+  position: string;
+  positionId: string;
+  posNo: string;
+  posNoId: string;
+  positionLine: string;
+  positionLineId: string;
+  positionPathSide: string;
+  positionPathSideId: string;
+  positionType: string;
+  positionTypeId: string;
+  positionLevel: string;
+  positionLevelId: string;
+  positionExecutive: string;
+  positionExecutiveId: string;
+  positionExecutiveSide: string;
+  positionExecutiveSideId: string;
+  salaryClass: string;
+  salaryRef: string;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+interface ResponseObjectEmployee {
+  amount: number;
+  createdAt: Date;
+  createdFullName: string;
+  date: Date;
+  id: string;
+  mouthSalaryAmount: number;
+  oc: string | null;
+  ocId: string;
+  posNo: string | null;
+  posNoId: string | null;
+  posNoEmployee: string | null;
+  positionEmployeeGroup: string | null;
+  positionEmployeeGroupId: string | null;
+  positionEmployeeLevel: string | null;
+  positionEmployeeLevelId: string | null;
+  positionEmployeePosition: string | null;
+  positionEmployeePositionId: string | null;
+  positionEmployeePositionSide: string | null;
+  positionEmployeePositionSideId: string | null;
+  positionSalaryAmount: number;
+  salaryClass: string | null;
+  salaryRef: string | null;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
+}
+
+export type { ResponseObject, ResponseObjectEmployee };
diff --git a/src/components/information/interface/response/Talent.ts b/src/components/information/interface/response/Talent.ts
new file mode 100644
index 000000000..35bddad2d
--- /dev/null
+++ b/src/components/information/interface/response/Talent.ts
@@ -0,0 +1,12 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  field: string;
+  detail: string;
+  remark: string;
+  reference: string;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Train.ts b/src/components/information/interface/response/Train.ts
new file mode 100644
index 000000000..6cd0ebda2
--- /dev/null
+++ b/src/components/information/interface/response/Train.ts
@@ -0,0 +1,18 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  name: string;
+  topic: string;
+  yearly: number;
+  place: string;
+  duration: string;
+  department: string;
+  numberOrder: string;
+  dateOrder: Date;
+  startDate: Date;
+  endDate: Date;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/response/Work.ts b/src/components/information/interface/response/Work.ts
new file mode 100644
index 000000000..fb269cf17
--- /dev/null
+++ b/src/components/information/interface/response/Work.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseObject {
+  id: string;
+  dateStart: Date;
+  dateEnd: Date;
+  detail: string;
+  reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+export type { ResponseObject };
diff --git a/src/components/information/interface/store/main.ts b/src/components/information/interface/store/main.ts
index 7c31dd81c..6d0452d09 100644
--- a/src/components/information/interface/store/main.ts
+++ b/src/components/information/interface/store/main.ts
@@ -17,4 +17,14 @@ interface Profile {
   document: { columns: String[] };
 }
 
-export type { Profile };
+interface DataOption {
+  id: string;
+  name: string;
+  zipCode?: string;
+}
+
+interface Pagination {
+  rowsPerPage: number;
+}
+
+export type { Profile, DataOption, Pagination };