diff --git a/src/modules/08_registryEmployee/views/Information/Tempinformation.vue b/src/modules/08_registryEmployee/views/Information/Tempinformation.vue
index 05c6f9596..74a1e51b4 100644
--- a/src/modules/08_registryEmployee/views/Information/Tempinformation.vue
+++ b/src/modules/08_registryEmployee/views/Information/Tempinformation.vue
@@ -5,12 +5,11 @@
       header="ข้อมูลลูกจ้างชั่วคราว"
       icon="mdi-account"
       :save="saveData"
-      :history="!statusAdd()"
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="refreshData"
-      :historyClick="clickHistory"
       :addEmployee="statusAdd()"
+      :history="!statusAdd()"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
@@ -199,7 +198,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type { DataOption } from "@/modules/04_registry/components/profileType";
 import { defaultTempInformation } from "@/modules/04_registry/components/profileType";
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import HeaderTop from "@/modules/08_registryEmployee/views/topEmployeeTemp.vue";
 import HistoryTable from "@/components/TableHistory.vue";
 import { useRoute } from "vue-router";
 import type { QTableProps } from "quasar";
@@ -421,36 +420,38 @@ const fetchDataSelector = async () => {
 /**
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  */
-const clickHistory = async () => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileEmployeeTempId(route.params.id.toString()))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: any) => {
-        rowsHistory.value.push({
-          EmployeeMoneyIncrease: e.employeeMoneyIncrease,
-          EmployeeMoneyAllowance: e.employeeMoneyAllowance,
-          EmployeeMoneyEmployee: e.employeeMoneyEmployee,
-          EmployeeMoneyEmployer: e.employeeMoneyEmployer,
-          PositionEmployeeGroupId: e.positionEmployeeGroupId,
-          PositionEmployeePositionId: e.positionEmployeePositionId,
-          PositionEmployeeLineId: e.positionEmployeeLineId,
-          EmployeeTypeIndividual: e.employeeTypeIndividual,
-          EmployeeOc: e.employeeOc,
-          EmployeeWage: e.employeeWage,
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
+// const clickHistory = async () => {
+//   modalHistory.value = true;
+//   showLoader();
+//   await http
+//     .get(config.API.profileEmployeeTempId(route.params.id.toString()))
+//     .then((res) => {
+//       let data = res.data.result;
+//       rowsHistory.value = [];
+//       data.map((e: any) => {
+//         rowsHistory.value.push({
+//           employeeMoneyIncrease: e.employeeMoneyIncrease,
+//           employeeMoneyAllowance: e.employeeMoneyAllowance,
+//           employeeMoneyEmployee: e.employeeMoneyEmployee,
+//           employeeMoneyEmployer: e.employeeMoneyEmployer,
+//           positionEmployeeGroupId: e.positionEmployeeGroupId,
+//           positionEmployeePositionId: e.positionEmployeePositionId,
+//           positionEmployeeLineId: e.positionEmployeeLineId,
+//           employeeTypeIndividual: e.employeeTypeIndividual,
+//           employeeOc: e.employeeOc,
+//           employeeWage: e.employeeWage,
+//           createdFullName: e.createdFullName,
+//           createdAt: new Date(e.createdAt),
+//         });
+//       });
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
 
 const refreshData = async () => {
   myform.value.reset();
diff --git a/src/modules/08_registryEmployee/views/topEmployeeTemp.vue b/src/modules/08_registryEmployee/views/topEmployeeTemp.vue
new file mode 100644
index 000000000..ac620aba9
--- /dev/null
+++ b/src/modules/08_registryEmployee/views/topEmployeeTemp.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon
+        :name="icon"
+        size="1.5em"
+        color="grey-5"
+        class="q-mr-md"
+        v-if="icon != ''"
+      />
+      <div
+        class="text-bold text-subtitle2 col-12 row items-center"
+        v-if="header != ''"
+      >
+        {{ header }}
+      </div>
+    </div>
+    <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
+      <q-btn
+        size="12px"
+        v-if="!edit"
+        flat
+        round
+        :disabled="disable"
+        :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :color="!edit ? 'grey-7' : 'public'"
+        @click="save"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit && !addEmployee"
+        :color="!edit ? 'grey-7' : 'red'"
+        @click="ClickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="addleave"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
+        <q-tooltip>สรุปวันลา</q-tooltip>
+      </q-btn>
+    </div>
+
+    <div class="q-pl-sm" v-else>
+      <q-btn
+        size="12px"
+        flat
+        round
+        :disabled="disable"
+        color="add"
+        @click="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <q-space />
+    <!-- <q-btn
+      color="info"
+      flat
+      dense
+      round
+      size="14px"
+      icon="mdi-history"
+      v-if="history"
+      @click="historyClick"
+    >
+      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
+    </q-btn> -->
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  history: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  addData: {
+    type: Boolean,
+    defualt: false,
+  },
+  disable: {
+    type: Boolean,
+    defualt: false,
+  },
+  historyClick: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addEmployee: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits(["update:edit"]);
+
+const updateEdit = (value: any) => {
+  emit("update:edit", value);
+};
+
+const ClickEdit = () => {
+  updateEdit(!props.edit);
+  props.changeBtn();
+};
+
+const historyClick = async () => {
+  await props.historyClick();
+};
+
+const ClickCancel = () => {
+  updateEdit(!props.edit);
+  props.cancel();
+  props.changeBtn();
+};
+
+const save = () => {
+  props.save();
+};
+
+const add = () => {
+  props.add();
+};
+
+const addleave = () => {
+  props.addleave();
+};
+</script>
+<style scoped></style>