diff --git a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
index 7ae0444c1..8c637bd94 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, watch, ref, reactive } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QTableColumn } from "quasar";
 import type { FormEmployee } from "@/modules/04_registryPerson/interface/request/Employee";
 import type {
   EmployeeHistory,
@@ -13,8 +14,7 @@ import type {
 } from "@/modules/04_registryPerson/interface/response/Employee";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-
-import type { QTableColumn } from "quasar";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -145,9 +145,6 @@ function onSubmit() {
 
 /** ประวัติข้อมูลลูกจ้างชั่วคราว */
 const modalHistory = ref<boolean>(false);
-const filter = ref<string>("");
-const rows = ref<EmployeeHistory[]>([]);
-const rowsMain = ref<EmployeeHistory[]>([]);
 const columns = ref<QTableColumn[]>([
   {
     name: "positionEmployeeGroupId",
@@ -307,7 +304,7 @@ const columns = ref<QTableColumn[]>([
         .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumns = ref<String[]>([
+const visibleColumns = ref<string[]>([
   "positionEmployeeGroupId",
   "positionEmployeeLineId",
   "positionEmployeePositionId",
@@ -321,38 +318,23 @@ const visibleColumns = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 function onClickHistory() {
-  showLoader();
   modalHistory.value = true;
-  http
-    .get(config.API.informationHistoryEmployee(profileId.value))
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data.sort(
-        (a: any, b: any) =>
-          new Date(b.lastUpdatedAt).getTime() -
-          new Date(a.lastUpdatedAt).getTime()
-      );
-      rowsMain.value = rows.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 }
 
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    filter.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.informationHistoryEmployee(profileId.value)
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }
 
 onMounted(() => {
@@ -635,80 +617,13 @@ onMounted(() => {
   </q-dialog>
 
   <!-- Dialog ประวัติการแก้ไขข้อมูลลูกจ้างชั่วคราว -->
-  <q-dialog v-model="modalHistory" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
-        :close="() => ((modalHistory = false), (filter = ''), (rows = []))"
-      />
-      <q-separator />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          :visible-columns="visibleColumns"
-          v-model:pagination="pagination"
-        >
-          >
-          <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-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-actions align="right"> </q-card-actions>
-    </q-card>
-  </q-dialog>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :visible-columns="visibleColumns"
+    :title="`ประวัติแก้ไขข้อมูลส่วนตัว`"
+    :columns="columns"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
index de701915d..c7b4f8419 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
@@ -6,7 +6,7 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type {
   Employment,
   EmploymentHistory,
@@ -14,6 +14,7 @@ import type {
 import type { FormEmployment } from "@/modules/04_registryPerson/interface/request/Employee";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -28,6 +29,7 @@ const {
   hideLoader,
   showLoader,
   onSearchDataTable,
+  convertDateToAPI,
 } = useCounterMixin();
 
 const profileId = ref<string>(route.params.id.toString());
@@ -41,7 +43,8 @@ const isLeave = defineModel<boolean>("isLeave", {
 const rows = ref<Employment[]>([]);
 const rowsMain = ref<Employment[]>([]);
 const filter = ref<string>("");
-const columns = ref<QTableProps["columns"]>([
+
+const columns = ref<QTableColumn[]>([
   {
     name: "date",
     align: "left",
@@ -106,9 +109,6 @@ const visibleColumns = ref<string[]>([
 const pagination = ref({
   sortBy: "",
 });
-const paginationHistory = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 const modalEmployment = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
@@ -186,7 +186,10 @@ function onSubmit() {
     showLoader();
     const methods = isEdit.value ? "put" : "post";
     const id = isEdit.value ? employmentId.value : profileId.value;
-    http[methods](config.API.employmentEmployee(id), formData)
+    http[methods](config.API.employmentEmployee(id), {
+      ...formData,
+      date: convertDateToAPI(formData.date),
+    })
       .then(async () => {
         await fetchListEmployment();
         await success($q, "บันทึกข้อมูลสำเร็จ");
@@ -224,30 +227,29 @@ function onDeleteEmployment(id: string) {
 
 /** ประวัติข้อมูลการจ้าง*/
 const modalHistory = ref<boolean>(false);
-const rowsHistory = ref<EmploymentHistory[]>([]);
-const rowsHistoryMain = ref<EmploymentHistory[]>([]);
-const filterHistory = ref<string>("");
+const historyId = ref<string>("");
 
 /**
  * function เปิด dialog ประวัติการแก้ไขข้อมูลการจ้าง
  * @param id รายการการจ้าง
  */
 function onClickHistory(id: string) {
+  historyId.value = id;
   modalHistory.value = true;
+}
+
+async function fetchDataHistory() {
   showLoader();
-  http
-    .get(config.API.employmentHistoryEmployee(id))
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = data;
-      rowsHistoryMain.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  try {
+    const res = await http.get(
+      config.API.employmentHistoryEmployee(historyId.value)
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }
 
 function serchDataTable() {
@@ -258,14 +260,6 @@ function serchDataTable() {
   );
 }
 
-function serchDataTableHistory() {
-  rowsHistory.value = onSearchDataTable(
-    filterHistory.value,
-    rowsHistoryMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
 onMounted(() => {
   profileId.value && fetchListEmployment();
 });
@@ -462,81 +456,13 @@ onMounted(() => {
   </q-dialog>
 
   <!-- Dialog ประวัติการแก้ไขข้อมูลลูกจ้างชั่วคราว -->
-  <q-dialog v-model="modalHistory" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
-        :close="
-          () => (
-            (modalHistory = false), (filterHistory = ''), (rowsHistory = [])
-          )
-        "
-      />
-      <q-separator />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filterHistory"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTableHistory"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rowsHistory"
-          :visible-columns="visibleColumns"
-          v-model:pagination="paginationHistory"
-        >
-          >
-          <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-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-
-      <q-separator />
-    </q-card>
-  </q-dialog>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :visible-columns="visibleColumns"
+    :title="`ประวัติแก้ไขข้อมูลการจ้าง`"
+    :columns="columns"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped></style>