diff --git a/src/api/evaluate/api.evaluate.ts b/src/api/evaluate/api.evaluate.ts
new file mode 100644
index 0000000..b8ae7c5
--- /dev/null
+++ b/src/api/evaluate/api.evaluate.ts
@@ -0,0 +1,3 @@
+import env from "../index";
+
+export default {};
diff --git a/src/api/index.ts b/src/api/index.ts
index cbbd4bf..d001eaf 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,34 +1,35 @@
 /**config api */
-import { ref } from "vue"
+import { ref } from "vue";
 
-const env = ref<string>(process.env.NODE_ENV || "development")
-export const apiUrlConfig = import.meta.env.VITE_API_URI_CONFIG
+const env = ref<string>(process.env.NODE_ENV || "development");
+export const apiUrlConfig = import.meta.env.VITE_API_URI_CONFIG;
 // if (process.env.VUE_APP_TEST) {
 //   env = "test";
 // }
 const config = ref<any>({
-	development: {
-		// API_URI: "https://localhost:7260/api",
-		API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
-		MEET_URI: "meet.frappet.com",
-	},
-	test: {
-		API_URI: "http://localhost:5010/api/v1",
-		MEET_URI: "meet.frappet.com",
-	},
-	production: {
-		API_URI: apiUrlConfig,
-		API_URI_ORG_TREE: "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
-		MEET_URI: "meet.frappet.com",
-	},
-})
+  development: {
+    // API_URI: "https://localhost:7260/api",
+    API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
+    MEET_URI: "meet.frappet.com",
+  },
+  test: {
+    API_URI: "http://localhost:5010/api/v1",
+    MEET_URI: "meet.frappet.com",
+  },
+  production: {
+    API_URI: apiUrlConfig,
+    API_URI_ORG_TREE:
+      "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
+    MEET_URI: "meet.frappet.com",
+  },
+});
 
-const API_URI = ref<string>(config.value[env.value].API_URI)
-const MEET_URI = ref<string>(config.value[env.value].MEET_URI)
+const API_URI = ref<string>(config.value[env.value].API_URI);
+const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
 
 export default {
-	env: env.value,
-	config: config.value,
-	API_URI: API_URI.value,
-	MEET_URI: MEET_URI.value,
-}
+  env: env.value,
+  config: config.value,
+  API_URI: API_URI.value,
+  MEET_URI: MEET_URI.value,
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index 0a2fa88..e607537 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -6,16 +6,17 @@ import retirementResign from "./api/leave/api.leave"
 import placementTransfer from "./api/transfer/api.transfer"
 import appeal from "./api/appeal/api.appeal"
 import message from "./api/api.message"
-
+import evaluate from "./api/evaluate/api.evaluate";
 
 const API = {
-	...testtest,
-	...retirementResign,
-	...placementTransfer,
-	...message,
-	...appeal
-}
+  ...testtest,
+  ...retirementResign,
+  ...placementTransfer,
+  ...message,
+  ...evaluate,
+  ...appeal
+};
 
 export default {
-	API: API,
-}
+  API: API,
+};
diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 1bd3a57..b568017 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -36,7 +36,7 @@ const items = ref<any>([
     title: "ประเมินผล",
     sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
     color: "lime-4",
-    path: "/assess",
+    path: "/evaluate",
     active: false,
   },
   {
diff --git a/src/modules/04_checkin/componenst/mapCheck.vue b/src/modules/04_checkin/components/mapCheck.vue
similarity index 100%
rename from src/modules/04_checkin/componenst/mapCheck.vue
rename to src/modules/04_checkin/components/mapCheck.vue
diff --git a/src/modules/04_checkin/componenst/tableHistory.vue b/src/modules/04_checkin/components/tableHistory.vue
similarity index 100%
rename from src/modules/04_checkin/componenst/tableHistory.vue
rename to src/modules/04_checkin/components/tableHistory.vue
diff --git a/src/modules/04_checkin/views/Checkin.vue b/src/modules/04_checkin/views/Checkin.vue
index 9e92aba..71a478f 100644
--- a/src/modules/04_checkin/views/Checkin.vue
+++ b/src/modules/04_checkin/views/Checkin.vue
@@ -263,7 +263,7 @@ import moment, { Moment } from "moment";
 import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
 const { dateThai } = mixin;
-// import mapCheckin from "../componenst/mapCheck.vue";
+// import mapCheckin from "../components/mapCheck.vue";
 
 const router = useRouter();
 const $q = useQuasar();
diff --git a/src/modules/04_checkin/views/history.vue b/src/modules/04_checkin/views/history.vue
index 5325ab0..b52f7da 100644
--- a/src/modules/04_checkin/views/history.vue
+++ b/src/modules/04_checkin/views/history.vue
@@ -77,7 +77,7 @@
 import type { QTableProps } from "quasar"
 import { ref } from "vue"
 import { useRouter } from "vue-router"
-import Table from "@/modules/04_checkin/componenst/tableHistory.vue"
+import Table from "@/modules/04_checkin/components/tableHistory.vue"
 
 const router = useRouter()
 
diff --git a/src/modules/05_leave/componenst/DialogDetail.vue b/src/modules/05_leave/componenst/DialogDetail.vue
deleted file mode 100644
index 0d793a0..0000000
--- a/src/modules/05_leave/componenst/DialogDetail.vue
+++ /dev/null
@@ -1,499 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** import type*/
-import type {
-  FremDetail,
-  FormDelete,
-  FormDeleteRef,
-} from "@/modules/05_leave/interface/response/leave";
-
-/** import componest*/
-import FormLeave from "@/modules/05_leave/componenst/formDetail/formLeave.vue";
-import FormChildbirth from "@/modules/05_leave/componenst/formDetail/formChildbirth.vue";
-import FormHoliday from "@/modules/05_leave/componenst/formDetail/formHoliday.vue";
-import FormUpasom from "@/modules/05_leave/componenst/formDetail/formUpasom.vue";
-import FormHajj from "@/modules/05_leave/componenst/formDetail/formHajj.vue";
-import FormCheckSelect from "@/modules/05_leave/componenst/formDetail/formCheckSelect.vue";
-import FormStudy from "@/modules/05_leave/componenst/formDetail/formStudy.vue";
-import FormLeaveToTraining from "@/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue";
-import FormLeaveToWorkInternational from "@/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue";
-import FormSpouse from "@/modules/05_leave/componenst/formDetail/formSpouse.vue";
-import FormVocationalRehabilitation from "@/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue";
-
-/** import stort*/
-import { useCounterMixin } from "@/stores/mixin";
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  success,
-  dialogConfirm,
-} = mixin;
-
-const $q = useQuasar();
-
-const props = defineProps({
-  modal: {
-    type: Boolean,
-    require: true,
-  },
-  leaveId: {
-    type: String,
-    require: true,
-  },
-  onClickClose: {
-    type: Function,
-    require: true,
-  },
-  leaveType: {
-    type: Object,
-    require: true,
-  },
-  leaveStatus: {
-    type: String,
-    require: true,
-  },
-  fetchDataTable: {
-    type: Function,
-    require: true,
-  },
-});
-
-const titleMain = ref<string>("รายละเอียดการลาของ");
-const titleName = ref<string>("");
-/**checkForm Form การลา*/
-const checkForm = ref<string>("");
-
-/** Form รายละเอียดข้อมูล*/
-const formData = reactive<FremDetail>({
-  id: "", //Id การยื่นขอลา
-  leaveTypeName: "", // Name ประเภทการลา
-  leaveTypeId: "", //Id ประเภทการลา
-  fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
-  dateSendLeave: new Date(), // วันที่ยืนใบลา
-  status: "", //สถานะการของลา
-  leaveDateStart: new Date(), //วันเริ่มการลา
-  leaveDateEnd: new Date(), //วันสิ้นสุดการลา
-  leaveCount: 0, //จำนวนวันลา
-  leaveWrote: "", //เขียนที่
-  leaveAddress: "", //สถานที่ติดต่อขณะลา
-  leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
-  leaveDetail: "", //รายละเอียดการลา
-  leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
-  leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
-  leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-  leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-  leaveTotal: 0, //จำนวนวันที่ลา(Auto)
-  leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
-  leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
-  leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
-  leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
-  leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
-  wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-  wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-  restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
-  restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
-  ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
-  ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
-  ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
-  ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
-  ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
-  ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
-  ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
-  hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
-  absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
-  coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
-  coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-  coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
-  coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
-  coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-  step: "",
-});
-
-/** form ขอยกเลิก*/
-const formDelete = reactive<FormDelete>({
-  writeAt: "",
-  reason: "",
-  doc: null,
-});
-/**Validate ข้อมูล */
-const writeAtRef = ref<Object | null>(null);
-const reasonRef = ref<Object | null>(null);
-const docRef = ref<Object | null>(null);
-const formDeleteRef: FormDeleteRef = {
-  writeAt: writeAtRef,
-  reason: reasonRef,
-  doc: docRef,
-};
-
-/**
- * function เรียกข้อมูลการลา
- * @param id การลา
- */
-async function fetchDataDetail(id: string) {
-  showLoader();
-  await http
-    .get(config.API.leaveUserId(id), {})
-    .then((res) => {
-      const data = res.data.result;
-      titleName.value = data.fullName;
-      formData.id = data.id;
-      formData.leaveTypeName = data.leaveTypeName;
-      formData.leaveTypeId = data.leaveTypeId;
-      formData.fullname = data.fullname;
-      formData.dateSendLeave =
-        data.dateSendLeave && date2Thai(data.dateSendLeave);
-      formData.status = data.status;
-      formData.leaveDateStart =
-        data.leaveStartDate && date2Thai(data.leaveStartDate);
-      formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
-      formData.leaveCount = data.leaveTotal;
-      formData.leaveWrote = data.leaveWrote;
-      formData.leaveAddress = data.leaveAddress;
-      formData.leaveNumber = data.leaveNumber;
-      formData.leaveDetail = data.leaveDetail;
-      formData.leaveDocument = data.leaveDocument;
-      formData.leaveDraftDocument = data.leaveDraftDocument;
-      formData.leaveLastStart =
-        data.leaveLastStart && date2Thai(data.leaveLastStart);
-      formData.leaveLastEnd =
-        data.leaveLastStart && date2Thai(data.leaveLastEnd);
-      formData.leaveTotal = data.leaveTotal;
-      formData.leavebirthDate =
-        data.leavebirthDate && date2Thai(data.leavebirthDate);
-      formData.leavegovernmentDate =
-        data.leavegovernmentDate && date2Thai(data.leavegovernmentDate);
-      formData.leaveSalary = data.leaveSalary;
-      formData.leaveSalaryText = data.leaveSalaryText;
-      formData.wifeDayName = data.wifeDayName;
-      formData.wifeDayDateBorn =
-        data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
-      formData.restDayOldTotal = data.restDayOldTotal;
-      formData.restDayCurrentTotal = data.restDayCurrentTotal;
-      formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช";
-      formData.ordainDayLocationName = data.ordainDayLocationName;
-      formData.ordainDayLocationAddress = data.ordainDayLocationAddress;
-      formData.ordainDayLocationNumber = data.ordainDayLocationNumber;
-      formData.ordainDayOrdination =
-        data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
-      formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName;
-      formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress;
-      formData.hajjDayStatus = data.hajjDayStatus
-        ? "เคย"
-        : "ไม่เคยไปประกอบพิธีฮัจญ์";
-      formData.absentDaySummon = data.absentDaySummon;
-      formData.absentDayLocation = data.absentDayLocation;
-      formData.absentDayRegistorDate =
-        data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
-      formData.absentDayGetIn = data.absentDayGetIn;
-      formData.absentDayAt = data.absentDayAt;
-      formData.studyDaySubject = data.studyDaySubject;
-      formData.studyDayDegreeLevel = data.studyDayDegreeLevel;
-      formData.studyDayUniversityName = data.studyDayUniversityName;
-      formData.studyDayTrainingSubject = data.studyDayTrainingSubject;
-      formData.studyDayTrainingName = data.studyDayTrainingName;
-      formData.studyDayCountry = data.studyDayCountry;
-      formData.studyDayScholarship = data.studyDayScholarship;
-      formData.coupleDayName = data.coupleDayName;
-      formData.coupleDayPosition = data.coupleDayPosition;
-      formData.coupleDayLevel = data.coupleDayLevel;
-      formData.coupleDayLevelCountry = data.coupleDayLevelCountry;
-      formData.coupleDayCountryHistory = data.coupleDayCountryHistory;
-      formData.coupleDayTotalHistory = data.coupleDayTotalHistory;
-      formData.coupleDayStartDateHistory =
-        data.coupleDayStartDateHistory &&
-        date2Thai(data.coupleDayStartDateHistory);
-      formData.coupleDayEndDateHistory =
-        data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
-      formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory;
-      formData.step = data.step;
-      checkLeaveType(formData.leaveTypeId, formData.leaveTypeName);
-    })
-    .catch((err) => {
-      props.onClickClose?.();
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * function check ประเภทการลา
- * @param leaveTypeId  ประเภทการลา
- * @param leaveTypeName  ประเภทการลา
- */
-function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
-  if (props.leaveType) {
-    const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
-    const type = filtertype.code;
-    if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
-      checkForm.value = "FormLeave";
-    } else if (type === "LV-004") {
-      checkForm.value = "FormChildbirth";
-    } else if (type === "LV-005") {
-      checkForm.value = "FormHoliday";
-    } else if (type === "LV-006") {
-      checkForm.value = "FormUpasom";
-    } else if (type === "LV-006" && leaveTypeName === "พิธีฮัจญ์ฯ") {
-      checkForm.value = "FormHajj";
-    } else if (type === "LV-007") {
-      checkForm.value = "FormCheckSelect";
-    } else if (type === "LV-008" && leaveTypeName === "ลาไปศีกษา") {
-      checkForm.value = "FormStudy";
-    } else if (type === "LV-008") {
-      checkForm.value = "FormLeaveToTraining";
-    } else if (type === "LV-009") {
-      checkForm.value = "FormLeaveToWorkInternational";
-    } else if (type === "LV-010") {
-      checkForm.value = "FormSpouse";
-    } else if (type === "LV-011") {
-      checkForm.value = "FormVocationalRehabilitation";
-    }
-  }
-}
-
-/**
- * function เรียกข้อมูลยกเลิกการลา
- * @param id ยกเลิกการลา
- */
-async function fetchDataCancelDetail(id: string) {
-  showLoader();
-  await http
-    .get(config.API.leaveCancelById(id))
-    .then((res) => {
-      console.log(res);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** function ยินยันการบันทึกข้อมูล*/
-async function onClickSave() {
-  const hasError = [];
-  for (const key in formDeleteRef) {
-    if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
-      const property = formDeleteRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    dialogConfirm(
-      $q,
-      () => {
-        onSubmit();
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  } else {
-    console.log(hasError);
-  }
-}
-
-/** function บันทึกข้อมูล*/
-async function onSubmit() {
-  showLoader();
-  const id = props.leaveId ? props.leaveId : "";
-  const formData = new FormData();
-  formData.append("leaveWrote", formDelete.writeAt);
-  formData.append("reason", formDelete.reason);
-  formData.append("doc", formDelete.doc);
-  await http
-    .post(config.API.leaveCancelById(id), formData)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      props.fetchDataTable?.();
-      hideLoader();
-    });
-}
-
-watch(
-  () => props.modal,
-  () => {
-    if (props.modal === true) {
-      formDelete.writeAt = "";
-      formDelete.reason = "";
-      formDelete.doc = null;
-
-      props.leaveStatus === "DELETE"
-        ? props.leaveId && fetchDataCancelDetail(props.leaveId)
-        : props.leaveId && fetchDataDetail(props.leaveId);
-    }
-  }
-);
-</script>
-
-<template>
-  <q-dialog v-model="props.modal" persistent>
-    <q-card q-card style="min-width: 70%">
-      <q-card-section class="row items-center q-pa-sm">
-        <div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="props.onClickClose"
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-separator />
-      <q-card-section class="q-p-md row q-gutter-y-md">
-        <div
-          flat
-          :class="
-            props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'
-          "
-        >
-          <div class="col-12 q-col-gutter-sm row items-center"></div>
-          <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
-          <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
-
-          <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
-          <FormChildbirth
-            v-else-if="checkForm === 'FormChildbirth'"
-            :data="formData"
-          />
-
-          <!-- ลาพักผ่อน -->
-          <FormHoliday
-            v-else-if="checkForm === 'FormHoliday'"
-            :data="formData"
-          />
-
-          <!-- ลาอุปสมบท -->
-          <FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
-
-          <!-- ลาประกอบพิธีฮัจญ์ -->
-          <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
-
-          <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
-          <FormCheckSelect
-            v-else-if="checkForm === 'FormCheckSelect'"
-            :data="formData"
-          />
-
-          <!-- ลาไปศึกษา -->
-          <FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
-
-          <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
-          <FormLeaveToTraining
-            v-else-if="checkForm === 'FormLeaveToTraining'"
-            :data="formData"
-          />
-
-          <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
-          <FormLeaveToWorkInternational
-            v-else-if="checkForm === 'FormLeaveToWorkInternational'"
-            :data="formData"
-          />
-
-          <!-- ลาติดตามคู่สมรส -->
-          <FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
-
-          <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
-          <FormVocationalRehabilitation
-            v-else-if="checkForm === 'FormVocationalRehabilitation'"
-            :data="formData"
-          />
-        </div>
-
-        <div
-          flat
-          class="col-xs-6 col-sm-6"
-          v-if="props.leaveStatus === 'CANCEL'"
-        >
-          <q-card-section>
-            <q-input
-              ref="writeAtRef"
-              v-model="formDelete.writeAt"
-              label="เขียนที่"
-              :rules="[(val) => !!val || 'กรุณากรอกเขียนที่']"
-              lazy-rules
-              outlined
-              dense
-            />
-            <q-input
-              ref="reasonRef"
-              v-model="formDelete.reason"
-              type="textarea"
-              label="กรอกเหตุผล"
-              :rules="[(val) => !!val || 'กรูณากรอกเหตุผล']"
-              lazy-rules
-              class="q-mt-md"
-              outlined
-              dense
-            />
-            <q-file
-              ref="docRef"
-              outlined
-              v-model="formDelete.doc"
-              label="เลือกไฟล์เอกสารหลักฐาน"
-              :rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
-              lazy-rules
-              class="q-mt-md"
-              use-chips
-              dense
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" />
-              </template>
-            </q-file>
-          </q-card-section>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-section
-        class="row items-center q-pa-sm"
-        v-if="props.leaveStatus === 'CANCEL'"
-      >
-        <q-space />
-        <q-btn
-          label="ยืนยัน"
-          unelevated
-          color="secondary"
-          dense
-          class="q-px-md"
-          @click="onClickSave"
-        />
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/05_leave/componenst/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
similarity index 91%
rename from src/modules/05_leave/componenst/Calendar.vue
rename to src/modules/05_leave/components/Calendar.vue
index b26e7e3..a6d8344 100644
--- a/src/modules/05_leave/componenst/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref,  onMounted, watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
@@ -19,11 +19,10 @@ import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/C
 import type {
   DataCalendar,
   LeaveType,
-  FilterList,
 } from "@/modules/05_leave/interface/response/leave";
 
 /** import componest*/
-import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";
+import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
 
 /** import stort*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -39,6 +38,10 @@ const emit = defineEmits(["update:dateYear"]);
 const fullName = ref<string>("");
 const mainData = ref<DataCalendar[]>([]);
 
+const keycloakId = ref<string>(
+  keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
+);
+
 /**
  * Option ของปฏิทิน
  */
@@ -85,22 +88,22 @@ async function fetchDataCalendar() {
       mainData.value = res.data.result;
 
       const double_name = [
-        ...new Set(mainData.value.map((item: DataCalendar) => item.fullName)),
+        ...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId)),
       ];
-
+      filterLists.value = [];
       for (let i = 1; i <= double_name.length; i++) {
-        filterLists.value = [];
         const name = double_name[i - 1];
         const filterName = {
           id: name,
-          name: name,
-          color: name === "นางสาวสาวิตรี ศรีสมัย" ? "green" : "grey",
+          name: convertKeycloakId(name),
+          color: name === keycloakId.value ? "green" : "grey",
         };
+
         filterLists.value.push(filterName);
       }
 
       const data = mainData.value.filter(
-        (e: any) => e.fullName === "นางสาวสาวิตรี ศรีสมัย"
+        (e: any) => e.keycloakId === keycloakId.value
       );
 
       const event = data.map((e: DataCalendar) => ({
@@ -109,6 +112,8 @@ async function fetchDataCalendar() {
         start: e.leaveStartDate,
         end: e.leaveEndDate,
         allDay: true,
+        color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
+        textColor: "black",
       }));
       calendarOptions.value.events = event;
     })
@@ -121,6 +126,11 @@ async function fetchDataCalendar() {
     });
 }
 
+function convertKeycloakId(id: any) {
+  const filterName = mainData.value.find((e: any) => e.keycloakId === id);
+  return filterName?.fullName;
+}
+
 const leaveType = ref<LeaveType[]>([]);
 /** function เรียกประเภทการลา */
 async function fectOptionType() {
@@ -169,31 +179,33 @@ async function onClickClose() {
 }
 
 /** filter calendar left */
-const filterLists = ref<FilterList[]>([]);
-const filterVal = ref(["นางสาวสาวิตรี ศรีสมัย"]);
+const filterLists = ref<any>([]);
+const filterVal = ref<any>([]);
 
 watch(
   () => filterVal.value,
   () => {
     const eventData = filterVal.value.map((item: any) => {
       return mainData.value
-        .filter((e: DataCalendar) => e.fullName === item)
+        .filter((e: DataCalendar) => e.keycloakId === item)
         .map((e) => ({
           id: e.id,
           title: `${e.fullName} (${e.leaveTypeName})`,
           start: e.leaveStartDate,
           end: e.leaveEndDate,
           allDay: true,
+          color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
+          textColor: "black",
         }));
     });
-    calendarOptions.value.events = eventData[0];
+    const allEventData = [].concat(...eventData);
+    calendarOptions.value.events = allEventData;
   }
 );
 
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    fullName.value = keycloak.tokenParsed.name;
-  }
+  filterVal.value.push(keycloakId.value);
+
   await fetchDataCalendar();
   await fectOptionType();
 });
diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
new file mode 100644
index 0000000..fc1cd43
--- /dev/null
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -0,0 +1,476 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue"
+import { useQuasar } from "quasar"
+import http from "@/plugins/http"
+import config from "@/app.config"
+
+/** import type*/
+import type { FremDetail, FormDelete, FormDeleteRef, FromCancelDetail } from "@/modules/05_leave/interface/response/leave"
+
+/** import componest*/
+import FormLeave from "@/modules/05_leave/components/formDetail/formLeave.vue"
+import FormChildbirth from "@/modules/05_leave/components/formDetail/formChildbirth.vue"
+import FormHoliday from "@/modules/05_leave/components/formDetail/formHoliday.vue"
+import FormUpasom from "@/modules/05_leave/components/formDetail/formUpasom.vue"
+import FormHajj from "@/modules/05_leave/components/formDetail/formHajj.vue"
+import FormCheckSelect from "@/modules/05_leave/components/formDetail/formCheckSelect.vue"
+import FormStudy from "@/modules/05_leave/components/formDetail/formStudy.vue"
+import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/formLeaveToTraining.vue"
+import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue"
+import FormSpouse from "@/modules/05_leave/components/formDetail/formSpouse.vue"
+import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue"
+import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue"
+
+/** import stort*/
+import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+
+const dataStore = useLeaveStore()
+const { convertStatud } = dataStore
+const mixin = useCounterMixin()
+const { showLoader, hideLoader, messageError, date2Thai, success, dialogConfirm } = mixin
+
+const $q = useQuasar()
+
+const props = defineProps({
+	modal: {
+		type: Boolean,
+		require: true,
+	},
+	leaveId: {
+		type: String,
+		require: true,
+	},
+	onClickClose: {
+		type: Function,
+		require: true,
+	},
+	leaveType: {
+		type: Object,
+		require: true,
+	},
+	leaveStatus: {
+		type: String,
+		require: true,
+	},
+	fetchDataTable: {
+		type: Function,
+		require: true,
+	},
+})
+
+const titleMain = ref<string>("รายละเอียดการลาของ")
+const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ")
+const titleName = ref<string>("")
+/**checkForm Form การลา*/
+const checkForm = ref<string>("")
+
+/** Form รายละเอียดข้อมูล*/
+const formData = reactive<FremDetail>({
+	id: "", //Id การยื่นขอลา
+	leaveTypeName: "", // Name ประเภทการลา
+	leaveTypeId: "", //Id ประเภทการลา
+	fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
+	dateSendLeave: new Date(), // วันที่ยืนใบลา
+	status: "", //สถานะการของลา
+	leaveDateStart: new Date(), //วันเริ่มการลา
+	leaveDateEnd: new Date(), //วันสิ้นสุดการลา
+	leaveCount: 0, //จำนวนวันลา
+	leaveWrote: "", //เขียนที่
+	leaveAddress: "", //สถานที่ติดต่อขณะลา
+	leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: "", //รายละเอียดการลา
+	leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
+	leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
+	leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+	leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+	leaveTotal: 0, //จำนวนวันที่ลา(Auto)
+	leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
+	leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
+	leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
+	leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
+	leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
+	wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+	wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+	restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
+	restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
+	ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
+	ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
+	ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
+	ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
+	ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
+	ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
+	ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
+	hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
+	absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
+	coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
+	coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
+	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
+	coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
+	coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+	coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
+	coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
+	coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+	approveStep: "",
+	dear: "",
+})
+/** Form รายละเอียดข้อมูล*/
+const formDataCancle = reactive<FromCancelDetail>({
+	id: "",
+	leaveTypeName: "",
+	fullname: "",
+	status: "",
+	leaveDocDelete: "",
+	leaveResonDelete: "",
+	leaveWrote: "",
+	leaveAddress: "",
+	leaveNumber: "",
+	leaveDetail: "",
+	leaveTotal: 0,
+	leaveStartDate: new Date(),
+	leaveEndDate: new Date(),
+})
+
+/** form ขอยกเลิก*/
+const formDelete = reactive<FormDelete>({
+	writeAt: "",
+	reason: "",
+	doc: null,
+})
+/**Validate ข้อมูล */
+const writeAtRef = ref<Object | null>(null)
+const reasonRef = ref<Object | null>(null)
+const docRef = ref<Object | null>(null)
+const formDeleteRef: FormDeleteRef = {
+	writeAt: writeAtRef,
+	reason: reasonRef,
+	doc: docRef,
+}
+
+/**
+ * function เรียกข้อมูลการลา
+ * @param id การลา
+ */
+async function fetchDataDetail(id: string) {
+	showLoader()
+	await http
+		.get(config.API.leaveUserId(id), {})
+		.then(res => {
+			const data = res.data.result
+			titleName.value = data.fullName ?? "-"
+			formData.id = data.id ?? "-"
+			formData.leaveTypeName = data.leaveTypeName ?? "-"
+			formData.leaveTypeId = data.leaveTypeId ?? "-"
+			formData.fullname = data.fullName ?? "-"
+			formData.dateSendLeave = data.dateSendLeave && date2Thai(data.dateSendLeave)
+			formData.status = data.status ?? "-"
+			formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate)
+			formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate)
+			formData.leaveCount = data.leaveTotal ?? "-"
+			formData.leaveWrote = data.leaveWrote ?? "-"
+			formData.leaveAddress = data.leaveAddress ?? "-"
+			formData.leaveNumber = data.leaveNumber ?? "-"
+			formData.leaveDetail = data.leaveDetail ?? "-"
+			formData.leaveDocument = data.leaveDocument
+			formData.leaveDraftDocument = data.leaveDraftDocument
+			formData.leaveLastStart = data.leaveLastStart && date2Thai(data.leaveLastStart)
+			formData.leaveLastEnd = data.leaveLastStart && date2Thai(data.leaveLastEnd)
+			formData.leaveTotal = data.leaveTotal
+			formData.leavebirthDate = data.leaveBirthDate && date2Thai(data.leaveBirthDate)
+			formData.leavegovernmentDate = data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate)
+			formData.leaveSalary = data.leaveSalary ?? "-"
+			formData.leaveSalaryText = data.leaveSalaryText ?? "-"
+			formData.wifeDayName = data.wifeDayName ?? "-"
+			formData.wifeDayDateBorn = data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn)
+			formData.restDayOldTotal = data.restDayOldTotal ?? "-"
+			formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-"
+			formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช"
+			formData.ordainDayLocationName = data.ordainDayLocationName ?? "-"
+			formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-"
+			formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-"
+			formData.ordainDayOrdination = data.ordainDayOrdination && date2Thai(data.ordainDayOrdination)
+			formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName ?? "-"
+			formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress ?? "-"
+			formData.hajjDayStatus = data.hajjDayStatus ? "เคย" : "ไม่เคยไปประกอบพิธีฮัจญ์"
+			formData.absentDaySummon = data.absentDaySummon ?? "-"
+			formData.absentDayLocation = data.absentDayLocation ?? "-"
+			formData.absentDayRegistorDate = data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate)
+			formData.absentDayGetIn = data.absentDayGetIn ?? "-"
+			formData.absentDayAt = data.absentDayAt ?? "-"
+			formData.studyDaySubject = data.studyDaySubject ?? "-"
+			formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-"
+			formData.studyDayUniversityName = data.studyDayUniversityName ?? "-"
+			formData.studyDayTrainingSubject = data.studyDayTrainingSubject ?? "-" ?? "-"
+			formData.studyDayTrainingName = data.studyDayTrainingName ?? "-"
+			formData.studyDayCountry = data.studyDayCountry ?? "-"
+			formData.studyDayScholarship = data.studyDayScholarship ?? "-"
+			formData.coupleDayName = data.coupleDayName ?? "-"
+			formData.coupleDayPosition = data.coupleDayPosition ?? "-"
+			formData.coupleDayLevel = data.coupleDayLevel ?? "-"
+			formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-"
+			formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-"
+			formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-"
+			formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory && date2Thai(data.coupleDayStartDateHistory)
+			formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory)
+			formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-"
+			formData.approveStep = data.approveStep ?? "-"
+			formData.dear = data.dear ?? "-"
+			checkLeaveType(formData.leaveTypeId, formData.leaveTypeName)
+		})
+		.catch(err => {
+			props.onClickClose?.()
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
+}
+
+/**
+ * function check ประเภทการลา
+ * @param leaveTypeId  ประเภทการลา
+ * @param leaveTypeName  ประเภทการลา
+ */
+function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
+	if (props.leaveType) {
+		const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId)
+		const type = filtertype.code
+		if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
+			checkForm.value = "FormLeave"
+		} else if (type === "LV-004") {
+			checkForm.value = "FormChildbirth"
+		} else if (type === "LV-005") {
+			checkForm.value = "FormHoliday"
+		} else if (type === "LV-006") {
+			checkForm.value = "FormUpasom"
+		} else if (type === "LV-006" && leaveTypeName === "พิธีฮัจญ์ฯ") {
+			checkForm.value = "FormHajj"
+		} else if (type === "LV-007") {
+			checkForm.value = "FormCheckSelect"
+		} else if (type === "LV-008" && leaveTypeName === "ลาไปศีกษา") {
+			checkForm.value = "FormStudy"
+		} else if (type === "LV-008") {
+			checkForm.value = "FormLeaveToTraining"
+		} else if (type === "LV-009") {
+			checkForm.value = "FormLeaveToWorkInternational"
+		} else if (type === "LV-010") {
+			checkForm.value = "FormSpouse"
+		} else if (type === "LV-011") {
+			checkForm.value = "FormVocationalRehabilitation"
+		}
+	}
+}
+
+/**
+ * function เรียกข้อมูลยกเลิกการลา
+ * @param id ยกเลิกการลา
+ */
+async function fetchDataCancelDetail(id: string) {
+	showLoader()
+	await http
+		.get(config.API.leaveCancelById(id))
+		.then(res => {
+			const data = res.data.result
+			formDataCancle.leaveTypeName = data.leaveTypeName ?? "-"
+			formDataCancle.leaveWrote = data.leaveWrote ?? "-"
+			formDataCancle.fullname = data.fullName ?? "-"
+			formDataCancle.status = convertStatud(data.status) ?? "-"
+			formDataCancle.leaveStartDate = data.leaveStartDate && date2Thai(data.leaveStartDate)
+			formDataCancle.leaveEndDate = data.leaveEndDate && date2Thai(data.leaveEndDate)
+			formDataCancle.leaveTotal = data.leaveTotal ?? "-"
+			formDataCancle.leaveAddress = data.leaveAddress ?? "-"
+			formDataCancle.leaveNumber = data.leaveNumber ?? "-"
+			formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-"
+			formDataCancle.leaveDetail = data.leaveDetail ?? "-"
+			formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null
+
+			console.log(res)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
+}
+
+/** function ยินยันการบันทึกข้อมูล*/
+async function onClickSave() {
+	const hasError = []
+	for (const key in formDeleteRef) {
+		if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
+			const property = formDeleteRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		dialogConfirm(
+			$q,
+			() => {
+				onSubmit()
+			},
+			"ยืนยันการบันทึกข้อมูล",
+			"ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
+		)
+	} else {
+		console.log(hasError)
+	}
+}
+
+/** function บันทึกข้อมูล*/
+async function onSubmit() {
+	showLoader()
+	const id = props.leaveId ? props.leaveId : ""
+	const formData = new FormData()
+	formData.append("leaveWrote", formDelete.writeAt)
+	formData.append("reason", formDelete.reason)
+	formData.append("doc", formDelete.doc)
+	await http
+		.post(config.API.leaveCancelById(id), formData)
+		.then(() => {
+			success($q, "บันทึกข้อมูลสำเร็จ")
+			props.onClickClose?.()
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			props.fetchDataTable?.()
+			hideLoader()
+		})
+}
+
+watch(
+	() => props.modal,
+	() => {
+		if (props.modal === true) {
+			formDelete.writeAt = ""
+			formDelete.reason = ""
+			formDelete.doc = null
+
+			props.leaveStatus === "DELETE" ? props.leaveId && fetchDataCancelDetail(props.leaveId) : props.leaveId && fetchDataDetail(props.leaveId)
+		}
+	}
+)
+</script>
+
+<template>
+	<q-dialog v-model="props.modal" persistent>
+		<q-card q-card style="min-width: 70%" v-if="props.leaveStatus != 'DELETE'">
+			<q-card-section class="row items-center q-pa-sm">
+				<div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
+				<q-space />
+				<q-btn icon="close" unelevated round dense @click="props.onClickClose" style="color: #ff8080; background-color: #ffdede" />
+			</q-card-section>
+			<q-separator />
+			<q-card-section class="q-p-md row q-gutter-y-md">
+				<div flat :class="props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'">
+					<div class="col-12 q-col-gutter-sm row items-center"></div>
+					<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
+					<FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
+
+					<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
+					<FormChildbirth v-else-if="checkForm === 'FormChildbirth'" :data="formData" />
+
+					<!-- ลาพักผ่อน -->
+					<FormHoliday v-else-if="checkForm === 'FormHoliday'" :data="formData" />
+
+					<!-- ลาอุปสมบท -->
+					<FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
+
+					<!-- ลาประกอบพิธีฮัจญ์ -->
+					<FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
+
+					<!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
+					<FormCheckSelect v-else-if="checkForm === 'FormCheckSelect'" :data="formData" />
+
+					<!-- ลาไปศึกษา -->
+					<FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
+
+					<!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
+					<FormLeaveToTraining v-else-if="checkForm === 'FormLeaveToTraining'" :data="formData" />
+
+					<!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
+					<FormLeaveToWorkInternational v-else-if="checkForm === 'FormLeaveToWorkInternational'" :data="formData" />
+
+					<!-- ลาติดตามคู่สมรส -->
+					<FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
+
+					<!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
+					<FormVocationalRehabilitation v-else-if="checkForm === 'FormVocationalRehabilitation'" :data="formData" />
+				</div>
+
+				<div flat class="col-xs-6 col-sm-6" v-if="props.leaveStatus === 'CANCEL'">
+					<q-card-section>
+						<q-input ref="writeAtRef" v-model="formDelete.writeAt" label="เขียนที่" :rules="[val => !!val || 'กรุณากรอกเขียนที่']" lazy-rules outlined dense />
+						<q-input
+							ref="reasonRef"
+							v-model="formDelete.reason"
+							type="textarea"
+							label="กรอกเหตุผล"
+							:rules="[val => !!val || 'กรูณากรอกเหตุผล']"
+							lazy-rules
+							class="q-mt-md"
+							outlined
+							dense
+						/>
+						<q-file
+							ref="docRef"
+							outlined
+							v-model="formDelete.doc"
+							label="เลือกไฟล์เอกสารหลักฐาน"
+							:rules="[val => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
+							lazy-rules
+							class="q-mt-md"
+							use-chips
+							dense
+						>
+							<template v-slot:prepend>
+								<q-icon name="attach_file" />
+							</template>
+						</q-file>
+					</q-card-section>
+				</div>
+			</q-card-section>
+			<q-separator />
+			<q-card-section class="row items-center q-pa-sm" v-if="props.leaveStatus === 'CANCEL'">
+				<q-space />
+				<q-btn label="ยืนยัน" unelevated color="secondary" dense class="q-px-md" @click="onClickSave" />
+			</q-card-section>
+		</q-card>
+
+		<q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'">
+			<q-card-section class="row items-center q-pa-sm">
+				<div class="text-bold q-pl-sm">{{ titleMainCancle }}{{ titleName }}</div>
+				<q-space />
+				<q-btn icon="close" unelevated round dense @click="props.onClickClose" style="color: #ff8080; background-color: #ffdede" />
+			</q-card-section>
+			<q-separator />
+			<q-card-section class="q-p-md row q-gutter-y-md">
+				<div flat class="col-12">
+					<div class="col-12 q-col-gutter-sm row items-center"></div>
+					<!-- FormCancel -->
+					<FormCancel :data="formDataCancle" />
+				</div>
+			</q-card-section>
+			<q-separator />
+		</q-card>
+	</q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/components/Forms/01_SickForm.vue
similarity index 95%
rename from src/modules/05_leave/componenst/Forms/01_SickForm.vue
rename to src/modules/05_leave/components/Forms/01_SickForm.vue
index 37a530d..d44b384 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/components/Forms/01_SickForm.vue
@@ -43,9 +43,6 @@ const formDataSick = reactive<any>({
 	leaveDocument: [],
 })
 
-//แปลง leaveLast ด้วย Date2thai
-const leave2Thai = dataStore.leaveLast != null ? date2Thai(dataStore.leaveLast) : null
-
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveWroteRef = ref<object | null>(null)
 const leaveStartDateRef = ref<object | null>(null)
@@ -56,7 +53,6 @@ const leaveLastRef = ref<object | null>(null)
 const leaveNumberRef = ref<object | null>(null)
 const leaveAddressRef = ref<object | null>(null)
 const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
@@ -68,7 +64,6 @@ const FormRef: FormRef = {
 	leaveNumber: leaveNumberRef,
 	leaveAddress: leaveAddressRef,
 	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
 }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
@@ -138,11 +133,14 @@ const onSubmit = async () => {
  */
 async function saveFormData() {
 	const formData = new FormData()
-	const blob = formDataSick.leaveDocument.slice(0, formDataSick.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataSick.leaveDocument[0].type,
-	})
-	formData.append("leaveDocument", newFile)
+	if (formDataSick.leaveDocument.length > 0) {
+		const blob = formDataSick.leaveDocument.slice(0, formDataSick.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataSick.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	}
+
 	formData.append("type", formDataSick.type)
 	formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
 	formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
@@ -277,7 +275,7 @@ const isReadOnly = computed(() => {
 							week-start="0"
 							:readonly="isReadOnly"
 							@update:model-value="FetchCheck()"
-							:min-date="formDataSick.leaveStartDate ? new Date(formDataSick.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+							:min-date="formDataSick.leaveStartDate ? new Date(formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 						>
 							<template #year="{ year }">
 								{{ year + 543 }}
@@ -323,7 +321,7 @@ const isReadOnly = computed(() => {
 							outlined
 							ref="leaveLastRef"
 							for="leaveLastRef"
-							v-model="leave2Thai"
+							v-model="dataStore.leaveLast"
 							label="ลาครั้งสุดท้ายเมื่อวันที่"
 							readonly
 							hide-bottom-space
@@ -379,7 +377,6 @@ const isReadOnly = computed(() => {
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<q-file
-							ref="leaveDocumentRef"
 							for="leaveDocumentRef"
 							v-model="formDataSick.leaveDocument"
 							@added="fileUploadDoc"
@@ -390,7 +387,6 @@ const isReadOnly = computed(() => {
 							multiple
 							bg-color="white"
 							class="col-12 q-pl-sm col-12"
-							:rules="[val => !!val || `${'กรุณาเลือกไฟล์'}`]"
 						>
 							<template v-slot:prepend>
 								<q-icon name="attach_file" color="primary" />
diff --git a/src/modules/05_leave/componenst/Forms/03_Birth.vue b/src/modules/05_leave/components/Forms/03_Birth.vue
similarity index 95%
rename from src/modules/05_leave/componenst/Forms/03_Birth.vue
rename to src/modules/05_leave/components/Forms/03_Birth.vue
index 1d5d330..7573487 100644
--- a/src/modules/05_leave/componenst/Forms/03_Birth.vue
+++ b/src/modules/05_leave/components/Forms/03_Birth.vue
@@ -42,9 +42,6 @@ const formDataBirth = reactive<any>({
 	leaveDocument: [],
 })
 
-//แปลง leaveLast ด้วย Date2thai
-const leave2Thai = dataStore.leaveLast != null ? date2Thai(dataStore.leaveLast) : null
-
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveWroteRef = ref<object | null>(null)
 const leaveStartDateRef = ref<object | null>(null)
@@ -145,11 +142,13 @@ async function FetchCheck() {
  */
 async function saveFormData() {
 	const formData = new FormData()
-	const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataBirth.leaveDocument[0].type,
-	})
-	formData.append("leaveDocument", newFile)
+	if (formDataBirth.leaveDocument.length > 0) {
+		const blob = formDataBirth.leaveDocument[0].slice(0, formDataBirth.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataBirth.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	}
 	formData.append("type", formDataBirth.type)
 	formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
 	formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
@@ -244,7 +243,7 @@ async function saveFormData() {
 					:enableTimePicker="false"
 					week-start="0"
 					:readonly="!formDataBirth.leaveStartDate"
-					:min-date="formDataBirth.leaveStartDate ? new Date(formDataBirth.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataBirth.leaveStartDate ? new Date(formDataBirth.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -290,7 +289,7 @@ async function saveFormData() {
 					outlined
 					ref="leaveLastRef"
 					for="leaveLastRef"
-					v-model="leave2Thai"
+					v-model="dataStore.leaveLast"
 					label="ลาครั้งสุดท้ายเมื่อวันที่"
 					readonly
 					hide-bottom-space
@@ -343,7 +342,6 @@ async function saveFormData() {
 				/>
 
 				<q-file
-					ref="leaveDocumentRef"
 					for="leaveDocumentRef"
 					hide-bottom-space
 					v-model="formDataBirth.leaveDocument"
@@ -355,7 +353,6 @@ async function saveFormData() {
 					use-chips
 					multiple
 					class="q-pl-sm col-12"
-					:rules="[val => !!val || `${'กรุณาเลือกไฟล์'}`]"
 				>
 					<template v-slot:prepend>
 						<q-icon name="attach_file" color="primary" />
diff --git a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
similarity index 97%
rename from src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
rename to src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
index a5bf61d..1fd3f5b 100644
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
@@ -158,12 +158,13 @@ async function FetchCheck() {
  */
 async function saveFormData() {
 	const formData = new FormData()
-
-	const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataHelpWife.leaveDocument[0].type,
-	})
-	formData.append("leaveDocument", newFile)
+	if (formDataHelpWife.leaveDocument.length > 0) {
+		const blob = formDataHelpWife.leaveDocument[0].slice(0, formDataHelpWife.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataHelpWife.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	}
 	formData.append("type", formDataHelpWife.type)
 	formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
 	formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
@@ -257,7 +258,7 @@ async function saveFormData() {
 					@update:model-value="updateLeaveTotal, FetchCheck()"
 					week-start="0"
 					:readonly="!formDataHelpWife.leaveStartDate"
-					:min-date="formDataHelpWife.leaveStartDate ? new Date(formDataHelpWife.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataHelpWife.leaveStartDate ? new Date(formDataHelpWife.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
diff --git a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue b/src/modules/05_leave/components/Forms/05_VacationForm.vue
similarity index 97%
rename from src/modules/05_leave/componenst/Forms/05_VacationForm.vue
rename to src/modules/05_leave/components/Forms/05_VacationForm.vue
index a958969..cd8c577 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/components/Forms/05_VacationForm.vue
@@ -154,12 +154,13 @@ async function FetchCheck() {
  */
 async function saveFormData() {
 	const formData = new FormData()
-
-	const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataVacation.leaveDocument[0].type,
-	})
-	formData.append("leaveDocument", newFile)
+	if (formDataVacation.leaveDocument.length > 0) {
+		const blob = formDataVacation.leaveDocument[0].slice(0, formDataVacation.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataVacation.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	}
 	formData.append("type", formDataVacation.type)
 	formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
 	formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
@@ -250,7 +251,7 @@ const isReadOnly = computed(() => {
 					hide-bottom-space
 					bg-color="white"
 					outlined
-					v-model="dataStore.restDayCurrentTotal"
+					v-model="dataStore.leaveRemain"
 					label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
 				/>
 
@@ -305,7 +306,7 @@ const isReadOnly = computed(() => {
 					:enableTimePicker="false"
 					week-start="0"
 					:readonly="isReadOnly"
-					:min-date="formDataVacation.leaveStartDate ? new Date(formDataVacation.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataVacation.leaveStartDate ? new Date(formDataVacation.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
diff --git a/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue b/src/modules/05_leave/components/Forms/06_OrdinationForm.vue
similarity index 97%
rename from src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
rename to src/modules/05_leave/components/Forms/06_OrdinationForm.vue
index 63fca2d..9bca382 100644
--- a/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/Forms/06_OrdinationForm.vue
@@ -157,12 +157,13 @@ async function FetchCheck() {
  */
 async function saveFormData() {
 	const formData = new FormData()
-
-	const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataOrdination.leaveDocument[0].type,
-	})
-	formData.append("leaveDocument", newFile)
+	if (formDataOrdination.leaveDocument.length > 0) {
+		const blob = formDataOrdination.leaveDocument[0].slice(0, formDataOrdination.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataOrdination.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	}
 	formData.append("type", formDataOrdination.type)
 	formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
 	formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
@@ -263,7 +264,7 @@ function updateLeaveTotal() {
 					@update:model-value="updateLeaveTotal, FetchCheck()"
 					:readonly="!formDataOrdination.leaveStartDate"
 					:enableTimePicker="false"
-					:min-date="formDataOrdination.leaveStartDate ? new Date(formDataOrdination.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataOrdination.leaveStartDate ? new Date(formDataOrdination.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 					week-start="0"
 				>
 					<template #year="{ year }">
diff --git a/src/modules/05_leave/componenst/Forms/07_HajjForm.vue b/src/modules/05_leave/components/Forms/07_HajjForm.vue
similarity index 97%
rename from src/modules/05_leave/componenst/Forms/07_HajjForm.vue
rename to src/modules/05_leave/components/Forms/07_HajjForm.vue
index b52ca1a..ea42974 100644
--- a/src/modules/05_leave/componenst/Forms/07_HajjForm.vue
+++ b/src/modules/05_leave/components/Forms/07_HajjForm.vue
@@ -123,12 +123,13 @@ async function FetchCheck() {
  */
 async function saveFormData() {
 	const formData = new FormData()
-
-	const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataHaji.leaveDocument[0].type,
-	})
-	formData.append("leaveDocument", newFile)
+	if (formDataHaji.leaveDocument.length > 0) {
+		const blob = formDataHaji.leaveDocument[0].slice(0, formDataHaji.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataHaji.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	}
 	formData.append("type", formDataHaji.type)
 	formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
 	formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
@@ -226,7 +227,7 @@ function updateLeaveTotal() {
 							:locale="'th'"
 							@update:model-value="updateLeaveTotal"
 							:readonly="!formDataHaji.leaveStartDate"
-							:min-date="formDataHaji.leaveStartDate ? new Date(formDataHaji.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+							:min-date="formDataHaji.leaveStartDate ? new Date(formDataHaji.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 						>
 							<template #year="{ year }">
 								{{ year + 543 }}
diff --git a/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue b/src/modules/05_leave/components/Forms/08_MilitaryForm.vue
similarity index 97%
rename from src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
rename to src/modules/05_leave/components/Forms/08_MilitaryForm.vue
index fd96c01..259720a 100644
--- a/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/Forms/08_MilitaryForm.vue
@@ -135,11 +135,13 @@ async function FetchCheck() {
  */
 async function saveFormData() {
 	const formData = new FormData()
-	const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataMilitary.leaveDocument[0].type,
-	})
-	formData.append("leaveDocument", newFile)
+	if (formDataMilitary.leaveDocument.length > 0) {
+		const blob = formDataMilitary.leaveDocument[0].slice(0, formDataMilitary.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataMilitary.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	}
 	formData.append("type", formDataMilitary.type)
 	formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
 	formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
@@ -238,7 +240,7 @@ function updateLeaveTotal() {
 					week-start="0"
 					@update:model-value="updateLeaveTotal, FetchCheck()"
 					:readonly="!formDataMilitary.leaveStartDate"
-					:min-date="formDataMilitary.leaveStartDate ? new Date(formDataMilitary.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataMilitary.leaveStartDate ? new Date(formDataMilitary.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
diff --git a/src/modules/05_leave/componenst/Forms/09_StudyForm.vue b/src/modules/05_leave/components/Forms/09_StudyForm.vue
similarity index 98%
rename from src/modules/05_leave/componenst/Forms/09_StudyForm.vue
rename to src/modules/05_leave/components/Forms/09_StudyForm.vue
index ca39791..97ce271 100644
--- a/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
+++ b/src/modules/05_leave/components/Forms/09_StudyForm.vue
@@ -145,11 +145,13 @@ async function FetchCheck() {
 }
 async function saveFormData() {
 	const formData = new FormData()
-	const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataStudy.leaveDocument[0].type,
-	})
-	formData.append("leaveDocument", newFile) //
+	if (formDataStudy.leaveDocument.length > 0) {
+		const blob = formDataStudy.leaveDocument[0].slice(0, formDataStudy.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataStudy.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	}
 	formData.append("type", formDataStudy.type) //
 	formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
 	formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
@@ -260,7 +262,7 @@ const formattedleaveSalary = computed(() => {
 					@update:model-value="updateLeaveTotal, FetchCheck()"
 					:readonly="!formDataStudy.leaveStartDate"
 					:enableTimePicker="false"
-					:min-date="formDataStudy.leaveStartDate ? new Date(formDataStudy.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataStudy.leaveStartDate ? new Date(formDataStudy.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
diff --git a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue b/src/modules/05_leave/components/Forms/10_TrainForm.vue
similarity index 97%
rename from src/modules/05_leave/componenst/Forms/10_TrainForm.vue
rename to src/modules/05_leave/components/Forms/10_TrainForm.vue
index 854f279..8922b1d 100644
--- a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
+++ b/src/modules/05_leave/components/Forms/10_TrainForm.vue
@@ -144,11 +144,13 @@ async function FetchCheck() {
  */
 async function saveFormData() {
 	const formData = new FormData()
-	const blob = formDataTrain.leaveDocument.slice(0, formDataTrain.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataTrain.leaveDocument[0].type,
-	})
-	formData.append("leaveDocument", newFile) //
+	if (formDataTrain.leaveDocument.length > 0) {
+		const blob = formDataTrain.leaveDocument[0].slice(0, formDataTrain.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataTrain.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	} //
 	formData.append("type", formDataTrain.type) //
 	formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)) //
 	formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)) //
@@ -261,7 +263,7 @@ const formattedSalary = computed(() => {
 					:readonly="!formDataTrain.leaveStartDate"
 					:locale="'th'"
 					:enableTimePicker="false"
-					:min-date="formDataTrain.leaveStartDate ? new Date(formDataTrain.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataTrain.leaveStartDate ? new Date(formDataTrain.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
diff --git a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue
similarity index 93%
rename from src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
rename to src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue
index ee784a7..6b5c8f2 100644
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue
@@ -138,17 +138,22 @@ async function FetchCheck() {
  */
 async function saveFormData() {
 	const formData = new FormData()
-	const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataWorkInternational.leaveDocument[0].type,
-	})
-	const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
-	const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
-		type: formDataWorkInternational.leaveDraftDocument[0].type,
-	})
-
-	formData.append("leaveDocument", newFile) //
-	formData.append("leaveDraftDocument", newFileDraft) //
+	//
+	if (formDataWorkInternational.leaveDocument.length > 0) {
+		const blob = formDataWorkInternational.leaveDocument[0].slice(0, formDataWorkInternational.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataWorkInternational.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	}
+	//
+	if (formDataWorkInternational.leaveDraftDocument.length > 0) {
+		const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
+		const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
+			type: formDataWorkInternational.leaveDraftDocument[0].type,
+		})
+		formData.append("leaveDraftDocument", newFileDraft) //
+	}
 	formData.append("type", formDataWorkInternational.type) //
 	formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
 	formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
@@ -240,7 +245,7 @@ async function saveFormData() {
 					@update:model-value="FetchCheck()"
 					week-start="0"
 					:readonly="!formDataWorkInternational.leaveStartDate"
-					:min-date="formDataWorkInternational.leaveStartDate ? new Date(formDataWorkInternational.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataWorkInternational.leaveStartDate ? new Date(formDataWorkInternational.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
similarity index 98%
rename from src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
rename to src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
index 809545a..ad9d34b 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
@@ -170,12 +170,13 @@ async function FetchCheck() {
  */
 async function saveFormData() {
 	const formData = new FormData()
-	const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataFollowSpouse.leaveDocument[0].type,
-	})
-
-	formData.append("leaveDocument", newFile) //
+	if (formDataFollowSpouse.leaveDocument.length > 0) {
+		const blob = formDataFollowSpouse.leaveDocument[0].slice(0, formDataFollowSpouse.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataFollowSpouse.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	} //
 	formData.append("type", formDataFollowSpouse.type) //
 	formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
 	formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
@@ -286,7 +287,7 @@ function updateLeaveTotal() {
 					week-start="0"
 					@update:model-value="updateLeaveTotal, FetchCheck()"
 					:readonly="!formDataFollowSpouse.leaveStartDate"
-					:min-date="formDataFollowSpouse.leaveStartDate ? new Date(formDataFollowSpouse.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataFollowSpouse.leaveStartDate ? new Date(formDataFollowSpouse.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
diff --git a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue b/src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
similarity index 93%
rename from src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
rename to src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
index 0941569..eb44534 100644
--- a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
@@ -120,17 +120,21 @@ async function FetchCheck() {
  */
 async function saveFormData() {
 	const formData = new FormData()
-	const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: formDataRehabilitation.leaveDocument[0].type,
-	})
-	const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
-	const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
-		type: formDataRehabilitation.leaveDraftDocument[0].type,
-	})
+	if (formDataRehabilitation.leaveDraftDocument.length > 0) {
+		const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
+		const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
+			type: formDataRehabilitation.leaveDraftDocument[0].type,
+		})
+		formData.append("leaveDraftDocument", newFileDraft) //
+	}
 
-	formData.append("leaveDocument", newFile) //
-	formData.append("leaveDraftDocument", newFileDraft) //
+	if (formDataRehabilitation.leaveDocument.length > 0) {
+		const blob = formDataRehabilitation.leaveDocument[0].slice(0, formDataRehabilitation.leaveDocument[0].size)
+		const newFile = new File(blob, nameFile.value, {
+			type: formDataRehabilitation.leaveDocument[0].type,
+		})
+		formData.append("leaveDocument", newFile)
+	} //
 	formData.append("type", formDataRehabilitation.type) //
 	formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
 	formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
@@ -217,7 +221,7 @@ async function saveFormData() {
 					@update:model-value="FetchCheck()"
 					:readonly="!formDataRehabilitation.leaveStartDate"
 					:enableTimePicker="false"
-					:min-date="formDataRehabilitation.leaveStartDate ? new Date(formDataRehabilitation.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataRehabilitation.leaveStartDate ? new Date(formDataRehabilitation.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
diff --git a/src/modules/05_leave/componenst/Forms/Form.vue b/src/modules/05_leave/components/Forms/Form.vue
similarity index 100%
rename from src/modules/05_leave/componenst/Forms/Form.vue
rename to src/modules/05_leave/components/Forms/Form.vue
diff --git a/src/modules/05_leave/componenst/ListCalendar.vue b/src/modules/05_leave/components/ListCalendar.vue
similarity index 98%
rename from src/modules/05_leave/componenst/ListCalendar.vue
rename to src/modules/05_leave/components/ListCalendar.vue
index 8126a2f..01f7233 100644
--- a/src/modules/05_leave/componenst/ListCalendar.vue
+++ b/src/modules/05_leave/components/ListCalendar.vue
@@ -8,8 +8,8 @@ import config from "@/app.config";
 import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
 
 /** import componest*/
-import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";
-import Table from "@/modules/05_leave/componenst/Table.vue";
+import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
+import Table from "@/modules/05_leave/components/Table.vue";
 
 /** import stort*/
 import { useCounterMixin } from "@/stores/mixin";
diff --git a/src/modules/05_leave/componenst/Table.vue b/src/modules/05_leave/components/Table.vue
similarity index 100%
rename from src/modules/05_leave/componenst/Table.vue
rename to src/modules/05_leave/components/Table.vue
diff --git a/src/modules/05_leave/components/formDetail/formCancel.vue b/src/modules/05_leave/components/formDetail/formCancel.vue
new file mode 100644
index 0000000..ce59263
--- /dev/null
+++ b/src/modules/05_leave/components/formDetail/formCancel.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = defineProps({
+	data: {
+		type: Object,
+		required: true,
+	},
+})
+</script>
+
+<template>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ประเภทการลา</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ชื่อ-นามสกุล</div>
+				<div class="col">{{ props.data.fullname }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">สถานะการของลา</div>
+				<div class="col">{{ props.data.status }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveStartDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveEndDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">{{ props.data.leaveTotal }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">สถานที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveAddress }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveNumber }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เหตุผลการยกเลิกการลา</div>
+				<div class="col">{{ props.data.leaveResonDelete }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียดการลา</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารการยกเลิกการลา</div>
+				<div class="col" v-if="props.data.leaveDocDelete">
+					<q-btn :href="props.data.leaveDocDelete" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+				</div>
+				<div class="col" v-else>-</div>
+			</div>
+		</div>
+	</q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_leave/componenst/formDetail/formCheckSelect.vue b/src/modules/05_leave/components/formDetail/formCheckSelect.vue
similarity index 96%
rename from src/modules/05_leave/componenst/formDetail/formCheckSelect.vue
rename to src/modules/05_leave/components/formDetail/formCheckSelect.vue
index 6eace6c..0cead4d 100644
--- a/src/modules/05_leave/componenst/formDetail/formCheckSelect.vue
+++ b/src/modules/05_leave/components/formDetail/formCheckSelect.vue
@@ -61,7 +61,7 @@ console.log(props);
       </div>
       <div class="row">
         <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
+        <div class="col" v-if="props.data.leaveDocument">
           <q-btn
             :href="props.data.leaveDocument"
             target="_blank"
@@ -73,6 +73,7 @@ console.log(props);
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
           >
         </div>
+        <div class="col" v-else>-</div>
       </div>
     </div>
   </q-card-section>
diff --git a/src/modules/05_leave/componenst/formDetail/formChildbirth.vue b/src/modules/05_leave/components/formDetail/formChildbirth.vue
similarity index 96%
rename from src/modules/05_leave/componenst/formDetail/formChildbirth.vue
rename to src/modules/05_leave/components/formDetail/formChildbirth.vue
index fc4609b..115f2f5 100644
--- a/src/modules/05_leave/componenst/formDetail/formChildbirth.vue
+++ b/src/modules/05_leave/components/formDetail/formChildbirth.vue
@@ -55,7 +55,7 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
+        <div class="col" v-if="props.data.leaveDocument">
           <q-btn
             :href="props.data.leaveDocument"
             target="_blank"
@@ -67,6 +67,7 @@ const props = defineProps({
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
           >
         </div>
+        <div class="col" v-else>-</div>
       </div>
     </div>
   </q-card-section>
diff --git a/src/modules/05_leave/componenst/formDetail/formHajj.vue b/src/modules/05_leave/components/formDetail/formHajj.vue
similarity index 96%
rename from src/modules/05_leave/componenst/formDetail/formHajj.vue
rename to src/modules/05_leave/components/formDetail/formHajj.vue
index f73d560..903d36b 100644
--- a/src/modules/05_leave/componenst/formDetail/formHajj.vue
+++ b/src/modules/05_leave/components/formDetail/formHajj.vue
@@ -48,7 +48,7 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
+        <div class="col" v-if="props.data.leaveDocument">
           <q-btn
             :href="props.data.leaveDocument"
             target="_blank"
@@ -60,6 +60,7 @@ const props = defineProps({
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
           >
         </div>
+        <div class="col" v-else>-</div>
       </div>
     </div>
   </q-card-section>
diff --git a/src/modules/05_leave/componenst/formDetail/formHoliday.vue b/src/modules/05_leave/components/formDetail/formHoliday.vue
similarity index 96%
rename from src/modules/05_leave/componenst/formDetail/formHoliday.vue
rename to src/modules/05_leave/components/formDetail/formHoliday.vue
index f6df377..5b843c3 100644
--- a/src/modules/05_leave/componenst/formDetail/formHoliday.vue
+++ b/src/modules/05_leave/components/formDetail/formHoliday.vue
@@ -60,7 +60,7 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
+        <div class="col" v-if="props.data.leaveDocument">
           <q-btn
             :href="props.data.leaveDocument"
             target="_blank"
@@ -72,6 +72,7 @@ const props = defineProps({
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
           >
         </div>
+        <div class="col" v-else>-</div>
       </div>
     </div>
   </q-card-section>
diff --git a/src/modules/05_leave/componenst/formDetail/formLeave.vue b/src/modules/05_leave/components/formDetail/formLeave.vue
similarity index 96%
rename from src/modules/05_leave/componenst/formDetail/formLeave.vue
rename to src/modules/05_leave/components/formDetail/formLeave.vue
index f1fa741..3e176d8 100644
--- a/src/modules/05_leave/componenst/formDetail/formLeave.vue
+++ b/src/modules/05_leave/components/formDetail/formLeave.vue
@@ -58,7 +58,7 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
+        <div class="col" v-if="props.data.leaveDocument">
           <q-btn
             :href="props.data.leaveDocument"
             target="_blank"
@@ -70,6 +70,7 @@ const props = defineProps({
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
           >
         </div>
+        <div class="col" v-else>-</div>
       </div>
     </div>
   </q-card-section>
diff --git a/src/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue b/src/modules/05_leave/components/formDetail/formLeaveToTraining.vue
similarity index 97%
rename from src/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue
rename to src/modules/05_leave/components/formDetail/formLeaveToTraining.vue
index 2d5b10c..4df5389 100644
--- a/src/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue
+++ b/src/modules/05_leave/components/formDetail/formLeaveToTraining.vue
@@ -79,7 +79,7 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
+        <div class="col" v-if="props.data.leaveDocument">
           <q-btn
             :href="props.data.leaveDocument"
             target="_blank"
@@ -91,6 +91,7 @@ const props = defineProps({
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
           >
         </div>
+        <div class="col" v-else>-</div>
       </div>
     </div>
   </q-card-section>
diff --git a/src/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue b/src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue
similarity index 94%
rename from src/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue
rename to src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue
index f30f825..fee371c 100644
--- a/src/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue
+++ b/src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue
@@ -35,7 +35,7 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
+        <div class="col" v-if="props.data.leaveDocument">
           <q-btn
             :href="props.data.leaveDocument"
             target="_blank"
@@ -47,6 +47,7 @@ const props = defineProps({
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
           >
         </div>
+        <div class="col" v-else>-</div>
       </div>
     </div>
   </q-card-section>
diff --git a/src/modules/05_leave/componenst/formDetail/formMain.vue b/src/modules/05_leave/components/formDetail/formMain.vue
similarity index 100%
rename from src/modules/05_leave/componenst/formDetail/formMain.vue
rename to src/modules/05_leave/components/formDetail/formMain.vue
diff --git a/src/modules/05_leave/componenst/formDetail/formSpouse.vue b/src/modules/05_leave/components/formDetail/formSpouse.vue
similarity index 97%
rename from src/modules/05_leave/componenst/formDetail/formSpouse.vue
rename to src/modules/05_leave/components/formDetail/formSpouse.vue
index 9084ee6..e2d7d8e 100644
--- a/src/modules/05_leave/componenst/formDetail/formSpouse.vue
+++ b/src/modules/05_leave/components/formDetail/formSpouse.vue
@@ -86,7 +86,7 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
+        <div class="col" v-if="props.data.leaveDocument">
           <q-btn
             :href="props.data.leaveDocument"
             target="_blank"
@@ -98,6 +98,7 @@ const props = defineProps({
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
           >
         </div>
+        <div class="col" v-else>-</div>
       </div>
     </div>
   </q-card-section>
diff --git a/src/modules/05_leave/componenst/formDetail/formStudy.vue b/src/modules/05_leave/components/formDetail/formStudy.vue
similarity index 97%
rename from src/modules/05_leave/componenst/formDetail/formStudy.vue
rename to src/modules/05_leave/components/formDetail/formStudy.vue
index 6df8940..d2073f6 100644
--- a/src/modules/05_leave/componenst/formDetail/formStudy.vue
+++ b/src/modules/05_leave/components/formDetail/formStudy.vue
@@ -82,7 +82,7 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
+        <div class="col" v-if="props.data.leaveDocument">
           <q-btn
             :href="props.data.leaveDocument"
             target="_blank"
@@ -94,6 +94,7 @@ const props = defineProps({
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
           >
         </div>
+        <div class="col" v-else>-</div>
       </div>
     </div>
   </q-card-section>
diff --git a/src/modules/05_leave/componenst/formDetail/formUpasom.vue b/src/modules/05_leave/components/formDetail/formUpasom.vue
similarity index 97%
rename from src/modules/05_leave/componenst/formDetail/formUpasom.vue
rename to src/modules/05_leave/components/formDetail/formUpasom.vue
index 08955e6..a38b9df 100644
--- a/src/modules/05_leave/componenst/formDetail/formUpasom.vue
+++ b/src/modules/05_leave/components/formDetail/formUpasom.vue
@@ -73,7 +73,7 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
+        <div class="col" v-if="props.data.leaveDocument">
           <q-btn
             :href="props.data.leaveDocument"
             target="_blank"
@@ -85,6 +85,7 @@ const props = defineProps({
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
           >
         </div>
+        <div class="col" v-else>-</div>
       </div>
     </div>
   </q-card-section>
diff --git a/src/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue b/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
similarity index 94%
rename from src/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue
rename to src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
index f30f825..fee371c 100644
--- a/src/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue
+++ b/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
@@ -35,7 +35,7 @@ const props = defineProps({
       </div>
       <div class="row">
         <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
+        <div class="col" v-if="props.data.leaveDocument">
           <q-btn
             :href="props.data.leaveDocument"
             target="_blank"
@@ -47,6 +47,7 @@ const props = defineProps({
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
           >
         </div>
+        <div class="col" v-else>-</div>
       </div>
     </div>
   </q-card-section>
diff --git a/src/modules/05_leave/interface/request/SickForm.ts b/src/modules/05_leave/interface/request/SickForm.ts
index 9701480..e3573be 100644
--- a/src/modules/05_leave/interface/request/SickForm.ts
+++ b/src/modules/05_leave/interface/request/SickForm.ts
@@ -21,7 +21,7 @@ interface FormRef {
 	leaveNumber: object | null //หมายเลขที่ติดต่อขณะลา
 	leaveDetail: object | null //รายละเอียดการลา
 	leaveAddress: object | null //สถานที่ติดต่อขณะลา
-	leaveDocument: object | null //เอกสารปะกอบ
+
 	[key: string]: any
 }
 
diff --git a/src/modules/05_leave/interface/response/leave.ts b/src/modules/05_leave/interface/response/leave.ts
index 6fe3624..a361889 100644
--- a/src/modules/05_leave/interface/response/leave.ts
+++ b/src/modules/05_leave/interface/response/leave.ts
@@ -1,132 +1,141 @@
 interface ListLeave {
-  id: string; //*Id การยื่นขอลา
-  leaveTypeName: string; //Name ประเภทการลา
-  leaveTypeId: string; //Id ประเภทการลา
-  fullName: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
-  dateSendLeave: Date | null; //วันที่ยื่นใบลา
-  status: string; //สถานะการของลา
-  isDelete: boolean; //ขอยกเลิกคำขอลา ถ้าเคยขอแล้วจะเป็น true ไม่เคยเป็น false
+	id: string //*Id การยื่นขอลา
+	leaveTypeName: string //Name ประเภทการลา
+	leaveTypeId: string //Id ประเภทการลา
+	fullName: string //คำนำหน้า ชื่อ นามสกุล คนขอลา
+	dateSendLeave: Date | null //วันที่ยื่นใบลา
+	status: string //สถานะการของลา
+	isDelete: boolean //ขอยกเลิกคำขอลา ถ้าเคยขอแล้วจะเป็น true ไม่เคยเป็น false
 }
 
 interface ListLeaveTable {
-  id: string;
-  leaveTypeName: string;
-  leaveTypeId: string;
-  fullName: string;
-  dateSendLeave: string | null;
-  status: string;
-  isDelete: boolean;
+	id: string
+	leaveTypeName: string
+	leaveTypeId: string
+	fullName: string
+	dateSendLeave: string | null
+	status: string
+	isDelete: boolean
 }
 
 interface FremDetail {
-  id: string; //Id การยื่นขอลา
-  leaveTypeName: string; // Name ประเภทการลา
-  leaveTypeId: string; //Id ประเภทการลา
-  fullname: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
-  dateSendLeave: Date; // วันที่ยืนใบลา
-  status: string; //สถานะการของลา
-  leaveDateStart: Date; //วันเริ่มการลา
-  leaveDateEnd: Date; //วันสิ้นสุดการลา
-  leaveCount: number; //จำนวนวันลา
-  leaveWrote: string; //เขียนที่
-  leaveAddress: string; //สถานที่ติดต่อขณะลา
-  leaveNumber: string; //หมายเลขที่ติดต่อขณะลา
-  leaveDetail: string; //รายละเอียดการลา
-  leaveDocument: string; //อัปโหลดเอกสารประกอบรายละเอียด
-  leaveDraftDocument: string; //อัปโหลดแบบฟอร์มการลา
-  leaveLastStart: Date; //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-  leaveLastEnd: Date; //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-  leaveTotal: number; //จำนวนวันที่ลา(Auto)
-  leavebirthDate: Date; //วันเดือนปีเกิด(Auto)
-  leavegovernmentDate: Date; //วันที่เข้ารับราชการ(Auto)
-  leaveSalary: number; //เงินเดือนปัจจุบัน(Auto)
-  leaveSalaryText: string; //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
-  leaveTypeDay: string; //ประเภทการลาในวันนั้นเช่น
-  wifeDayName: string; //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-  wifeDayDateBorn: Date; //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-  restDayOldTotal: number; //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
-  restDayCurrentTotal: number; //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
-  ordainDayStatus: string; //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
-  ordainDayLocationName: string; //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
-  ordainDayLocationAddress: string; //สถานที่บวช ที่อยู่(ลาอุปสมบท)
-  ordainDayLocationNumber: string; //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
-  ordainDayOrdination: Date; //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
-  ordainDayBuddhistLentName: string; //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
-  ordainDayBuddhistLentAddress: string; //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
-  hajjDayStatus: string; //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
-  absentDaySummon: string; //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayLocation: string; //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayRegistorDate: Date; //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayGetIn: string; //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayAt: string; //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  studyDaySubject: string; //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayDegreeLevel: string; //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayUniversityName: string; //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayTrainingSubject: string; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayTrainingName: string; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayCountry: string; //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayScholarship: string; //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  coupleDayName: string; //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayPosition: string; //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayLevel: string; //ระดับคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayLevelCountry: string; //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
-  coupleDayCountryHistory: string; //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
-  coupleDayTotalHistory: string; //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-  coupleDayStartDateHistory: Date; //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
-  coupleDayEndDateHistory: Date; //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
-  coupleDaySumTotalHistory: string; //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-  step: string;
+	id: string //Id การยื่นขอลา
+	leaveTypeName: string // Name ประเภทการลา
+	leaveTypeId: string //Id ประเภทการลา
+	fullname: string //คำนำหน้า ชื่อ นามสกุล คนขอลา
+	dateSendLeave: Date // วันที่ยืนใบลา
+	status: string //สถานะการของลา
+	leaveDateStart: Date //วันเริ่มการลา
+	leaveDateEnd: Date //วันสิ้นสุดการลา
+	leaveCount: number //จำนวนวันลา
+	leaveWrote: string //เขียนที่
+	leaveAddress: string //สถานที่ติดต่อขณะลา
+	leaveNumber: string //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: string //รายละเอียดการลา
+	leaveDocument: string //อัปโหลดเอกสารประกอบรายละเอียด
+	leaveDraftDocument: string //อัปโหลดแบบฟอร์มการลา
+	leaveLastStart: Date //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+	leaveLastEnd: Date //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+	leaveTotal: number //จำนวนวันที่ลา(Auto)
+	leavebirthDate: Date //วันเดือนปีเกิด(Auto)
+	leavegovernmentDate: Date //วันที่เข้ารับราชการ(Auto)
+	leaveSalary: number //เงินเดือนปัจจุบัน(Auto)
+	leaveSalaryText: string //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
+	leaveTypeDay: string //ประเภทการลาในวันนั้นเช่น
+	wifeDayName: string //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+	wifeDayDateBorn: Date //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+	restDayOldTotal: number //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
+	restDayCurrentTotal: number //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
+	ordainDayStatus: string //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
+	ordainDayLocationName: string //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
+	ordainDayLocationAddress: string //สถานที่บวช ที่อยู่(ลาอุปสมบท)
+	ordainDayLocationNumber: string //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
+	ordainDayOrdination: Date //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
+	ordainDayBuddhistLentName: string //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
+	ordainDayBuddhistLentAddress: string //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
+	hajjDayStatus: string //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
+	absentDaySummon: string //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayLocation: string //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayRegistorDate: Date //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayGetIn: string //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayAt: string //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	studyDaySubject: string //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayDegreeLevel: string //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayUniversityName: string //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayTrainingSubject: string //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayTrainingName: string //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayCountry: string //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayScholarship: string //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	coupleDayName: string //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
+	coupleDayPosition: string //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
+	coupleDayLevel: string //ระดับคู่สมรส (ลาติดตามคู่สมรส)
+	coupleDayLevelCountry: string //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
+	coupleDayCountryHistory: string //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
+	coupleDayTotalHistory: string //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+	coupleDayStartDateHistory: Date //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
+	coupleDayEndDateHistory: Date //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
+	coupleDaySumTotalHistory: string //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+	approveStep: string
+	dear: string
+}
+
+interface FromCancelDetail {
+	id: string //*Id การยื่นขอลา
+	leaveTypeName: String //Name ประเภทการลา
+	fullname: String //คำนำหน้า ชื่อ นามสกุล คนขอลา
+	status: String //สถานะการของลา
+	leaveDocDelete: string //เอกสารการยกเลิกการลา
+	leaveResonDelete: String //เหตุผลการยกเลิกการลา
+	leaveWrote: String //เขียนที่
+	leaveAddress: String //สถานที่ติดต่อขณะลา
+	leaveNumber: String //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: String //รายละเอียดการลา
+	leaveTotal: number //จำนวนวันที่ลา
+	leaveStartDate: Date //วัน เดือน ปีเริ่มต้นลา
+	leaveEndDate: Date //วัน เดือน ปีสิ้นสุดลา
 }
 
 interface FormDelete {
-  writeAt: string;
-  reason: string;
-  doc: any;
+	writeAt: string
+	reason: string
+	doc: any
 }
 interface FormDeleteRef {
-  writeAt: object | null;
-  reason: object | null;
-  doc: object | null;
-  [key: string]: any;
+	writeAt: object | null
+	reason: object | null
+	doc: object | null
+	[key: string]: any
 }
 
 interface DataCalendar {
-  dateSendLeave: Date;
-  fullName: string;
-  id: string;
-  leaveEndDate: Date;
-  leaveStartDate: Date;
-  leaveTypeId: string;
-  leaveTypeName: string;
-  status: string;
+	dateSendLeave: Date
+	fullName: string
+	id: string
+	leaveEndDate: Date
+	leaveStartDate: Date
+	leaveTypeId: string
+	leaveTypeName: string
+	status: string
+	keycloakId: string
 }
 
 interface LeaveType {
-  code: string;
-  createdAt: Date;
-  createdFullName: string;
-  createdUserId: string;
-  id: string;
-  lastUpdateFullName: string;
-  lastUpdateUserId: string;
-  lastUpdatedAt: Date | null;
-  limit: Number;
-  name: string;
+	code: string
+	createdAt: Date
+	createdFullName: string
+	createdUserId: string
+	id: string
+	lastUpdateFullName: string
+	lastUpdateUserId: string
+	lastUpdatedAt: Date | null
+	limit: Number
+	name: string
 }
 
 interface FilterList {
-  id: string;
-  name: string;
-  color: string;
+	id: string
+	name: string | null
+	color: string
 }
 
-export type {
-  ListLeave,
-  ListLeaveTable,
-  FremDetail,
-  FormDelete,
-  FormDeleteRef,
-  DataCalendar,
-  LeaveType,
-  FilterList,
-};
+export type { ListLeave, ListLeaveTable, FremDetail, FormDelete, FormDeleteRef, DataCalendar, LeaveType, FilterList, FromCancelDetail }
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 098c7b7..e2f8ecf 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -67,7 +67,13 @@ export const useLeaveStore = defineStore("Leave", () => {
 	 * @param data ประเภทการลา
 	 */
 	async function fetchLeaveType(data: TypeLeave[]) {
-		typeOptionsMain.value = [{ id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด", code: "LV-000" }]
+		typeOptionsMain.value = [
+			{
+				id: "00000000-0000-0000-0000-000000000000",
+				name: "ทั้งหมด",
+				code: "LV-000",
+			},
+		]
 		const optionType = data.map((e: TypeLeave) => ({
 			id: e.id,
 			name: e.name,
@@ -85,11 +91,11 @@ export const useLeaveStore = defineStore("Leave", () => {
 	/** สถานะของการลา */
 	const statusOptionsMain = ref<any[]>([
 		{ id: "ALL", name: "ทั้งหมด" },
-		{ id: "NEW ", name: "ใหม่" },
-		{ id: "PENDING ", name: "กำลังดำเนินการ" },
-		{ id: "APPROVE ", name: "อนุมัติ " },
-		{ id: "REJECT ", name: "ไม่อนุมัติ" },
-		{ id: "DELETE  ", name: "ยกเลิก" },
+		{ id: "NEW", name: "ใหม่" },
+		{ id: "PENDING", name: "กำลังดำเนินการ" },
+		{ id: "APPROVE", name: "อนุมัติ " },
+		{ id: "REJECT", name: "ไม่อนุมัติ" },
+		{ id: "DELETE", name: "ยกเลิก" },
 	])
 	const statusOptions = ref<any[]>(statusOptionsMain.value)
 
@@ -240,12 +246,10 @@ export const useLeaveStore = defineStore("Leave", () => {
 	const dateAppoint = ref<Date>() //วันที่เข้ารับราชการ
 	const salary = ref<number>(0) //เงินเดือนปัจจุบัน
 	const salaryText = ref<string>("") //เงินเดือนปัจจุบัน(ภาษาไทย)
-	const leaveLast = ref<Date>()
+	const leaveLast = ref<any>()
 	const restDayCurrentTotal = ref<string>("")
-
 	//ดึงข้อมูล profile จาก API
 	async function fetchProfile() {
-		console.log("profile")
 		await http
 			.post(config.API.leaveProfile(), { type: typeId.value })
 			.then((res: any) => {
@@ -265,9 +269,8 @@ export const useLeaveStore = defineStore("Leave", () => {
 				dateAppoint.value = data.dateAppoint
 				salary.value = data.salary
 				salaryText.value = data.salaryText
-				leaveLast.value = data.leaveLast && date2Thai(data.leaveLast)
+				leaveLast.value = date2Thai(data.leaveLast) !== "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-"
 				restDayCurrentTotal.value = data.restDayCurrentTotal
-				console.log(data)
 			})
 			.catch((e: any) => {
 				messageError($q, e)
@@ -316,5 +319,6 @@ export const useLeaveStore = defineStore("Leave", () => {
 		salaryText,
 		leaveLast,
 		restDayCurrentTotal,
+		convertStatud,
 	}
 })
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 79c53d7..5a4fba2 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -3,19 +3,19 @@ import { ref, onMounted, computed } from "vue"
 import { useQuasar } from "quasar"
 import { useRouter, useRoute } from "vue-router"
 
-import FormPart2 from "@/modules/05_leave/componenst/Forms/Form.vue"
-import SickForm from "@/modules/05_leave/componenst/Forms/01_SickForm.vue"
-import FormBirth from "@/modules/05_leave/componenst/Forms/03_Birth.vue"
-import HelpWifeBirthForm from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue"
-import VacationForm from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
-import OrdinationForm from "@/modules/05_leave/componenst/Forms/06_OrdinationForm.vue"
-import HajjForm from "@/modules/05_leave/componenst/Forms/07_HajjForm.vue"
-import MilitaryForm from "@/modules/05_leave/componenst/Forms/08_MilitaryForm.vue"
-import StudyForm from "@/modules/05_leave/componenst/Forms/09_StudyForm.vue"
-import TrainForm from "@/modules/05_leave/componenst/Forms/10_TrainForm.vue"
-import WorkInternationalForm from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue"
-import FollowSpouseForm from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue"
-import RehabilitationForm from "@/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue"
+import FormPart2 from "@/modules/05_leave/components/Forms/Form.vue"
+import SickForm from "@/modules/05_leave/components/Forms/01_SickForm.vue"
+import FormBirth from "@/modules/05_leave/components/Forms/03_Birth.vue"
+import HelpWifeBirthForm from "@/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue"
+import VacationForm from "@/modules/05_leave/components/Forms/05_VacationForm.vue"
+import OrdinationForm from "@/modules/05_leave/components/Forms/06_OrdinationForm.vue"
+import HajjForm from "@/modules/05_leave/components/Forms/07_HajjForm.vue"
+import MilitaryForm from "@/modules/05_leave/components/Forms/08_MilitaryForm.vue"
+import StudyForm from "@/modules/05_leave/components/Forms/09_StudyForm.vue"
+import TrainForm from "@/modules/05_leave/components/Forms/10_TrainForm.vue"
+import WorkInternationalForm from "@/modules/05_leave/components/Forms/11_WorkInternationalForm.vue"
+import FollowSpouseForm from "@/modules/05_leave/components/Forms/12_FollowSpouseForm.vue"
+import RehabilitationForm from "@/modules/05_leave/components/Forms/13_RehabilitationForm.vue"
 import { useLeaveStore } from "@/modules/05_leave/store"
 import http from "@/plugins/http"
 import config from "@/app.config"
@@ -52,23 +52,6 @@ async function fectOptionType() {
 			messageError($q, err)
 		})
 }
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-async function FetchCheck(formData: any) {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, leaveStartDate: formData.leaveStartDate ?? null, leaveEndDate: formData.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			formData.dateStart = data.isLeave
-			formData.subject = data.sumDateWork
-			formData.leaveabsentDaySummon = data.totalDate
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
 </script>
 
 <template>
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 556a448..3c66341 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -7,8 +7,8 @@ import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
 
-import CalendarView from "@/modules/05_leave/componenst/Calendar.vue";
-import ListView from "@/modules/05_leave/componenst/ListCalendar.vue";
+import CalendarView from "@/modules/05_leave/components/Calendar.vue";
+import ListView from "@/modules/05_leave/components/ListCalendar.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
diff --git a/src/modules/06_assess/componenst/Tab1.vue b/src/modules/06_assess/componenst/Tab1.vue
deleted file mode 100644
index 362a4fe..0000000
--- a/src/modules/06_assess/componenst/Tab1.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<script setup lang="ts">
-import { onMounted } from "vue";
-import { useQuasar } from "quasar";
-
-import Stepper from "@/modules/06_assess/componenst/Stepper.vue";
-import Step1 from "@/modules/06_assess/componenst/step/step1.vue";
-import Step2 from "@/modules/06_assess/componenst/step/step2.vue";
-import Step3 from "@/modules/06_assess/componenst/step/step3.vue";
-import Step4 from "@/modules/06_assess/componenst/step/step4.vue";
-import Step5 from "@/modules/06_assess/componenst/step/step5.vue";
-import Step6 from "@/modules/06_assess/componenst/step/step6.vue";
-import Step7 from "@/modules/06_assess/componenst/step/step7.vue";
-import Step8 from "@/modules/06_assess/componenst/step/step8.vue";
-import Step9 from "@/modules/06_assess/componenst/step/step9.vue";
-
-import ViewStep1 from "@/modules/06_assess/componenst/viewstep/viewStep1.vue";
-import ViewStep3 from "@/modules/06_assess/componenst/viewstep/viewStep3.vue";
-import ViewStep7 from "@/modules/06_assess/componenst/viewstep/viewStep7.vue";
-
-import { useAssessStore } from "@/modules/06_assess/store";
-import { useCounterMixin } from "@/stores/mixin";
-
-const store = useAssessStore();
-const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
-
-const $q = useQuasar();
-
-function onCilckNextStep() {
-  store.step < 9 &&
-    dialogConfirm(
-      $q,
-      () => {
-        store.step++;
-      },
-      "ยืนยันการดำเนินการ",
-      "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-    );
-}
-
-function onCilckprPeviousStep() {
-  store.step > 1 &&
-    dialogConfirm(
-      $q,
-      () => {
-        store.step--;
-      },
-      "ยืนยันการย้อนกลับ",
-      "ต้องการย้อนกลับใช่หรือไม่?"
-    );
-}
-
-onMounted(() => {
-  store.step = 1;
-});
-</script>
-
-<template>
-  <div class="row q-col-gutter-md">
-    <div class="col-xs-12 col-sm-3">
-      <div class="toptitle">ประเมินชำนาญการ</div>
-      <Stepper />
-    </div>
-
-    <div class="col-xs-12 col-sm-9">
-      <div class="toptitle">
-        {{ store.step }}.{{ store.titel[store.step - 1] }}
-      </div>
-      <div class="row q-col-gutter-md col-12">
-        <div
-          :class="
-            store.step === 2 ||
-            store.step === 4 ||
-            store.step === 5 ||
-            store.step === 6 ||
-            store.step === 8 ||
-            store.step === 9
-              ? 'col-xs-12 col-sm-12 row'
-              : 'col-xs-12 col-sm-5 row'
-          "
-        >
-          <q-card flat bordered class="col-12 q-pa-md">
-            <q-card-section>
-              <Step1 v-if="store.step === 1" />
-              <Step2 v-if="store.step === 2" />
-              <Step3 v-if="store.step === 3" />
-              <Step4 v-if="store.step === 4" />
-              <Step5 v-if="store.step === 5" />
-              <Step6 v-if="store.step === 6" />
-              <Step7 v-if="store.step === 7" />
-              <Step8 v-if="store.step === 8" />
-              <Step9 v-if="store.step === 9" />
-            </q-card-section>
-          </q-card>
-        </div>
-        <div
-          class="col-xs-12 col-sm-7 row"
-          v-if="store.step === 1 || store.step === 3 || store.step === 7"
-        >
-          <q-card flat bordered class="col-12">
-            <q-card-section>
-              <ViewStep1 v-if="store.step === 1" />
-              <ViewStep3 v-if="store.step === 3" />
-              <ViewStep7 v-if="store.step === 7" /> </q-card-section
-          ></q-card>
-        </div>
-      </div>
-      <div class="q-mt-md q-gutter-md" align="right">
-        <q-btn
-          v-if="store.step !== 1"
-          unelevated
-          outline
-          label="ย้อนกลับ"
-          color="public"
-          @click="onCilckprPeviousStep"
-        />
-        <q-btn
-          unelevated
-          label="ดำเนินการต่อ"
-          color="public"
-          @click="onCilckNextStep"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-.q-stepper--vertical .q-stepper__step-inner {
-  padding: 0;
-}
-</style>
diff --git a/src/modules/06_assess/router.ts b/src/modules/06_assess/router.ts
deleted file mode 100644
index 3daea05..0000000
--- a/src/modules/06_assess/router.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-const assessMain = () => import("@/modules/06_assess/views/AssessMain.vue");
-
-export default [
-  {
-    path: "/assess",
-    name: "assess",
-    component: assessMain,
-    meta: {
-      Auth: true,
-      Key: [7],
-    },
-  },
-];
diff --git a/src/modules/06_assess/componenst/Stepper.vue b/src/modules/06_evaluate/components/Stepper.vue
similarity index 94%
rename from src/modules/06_assess/componenst/Stepper.vue
rename to src/modules/06_evaluate/components/Stepper.vue
index 4b12080..965245c 100644
--- a/src/modules/06_assess/componenst/Stepper.vue
+++ b/src/modules/06_evaluate/components/Stepper.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import { useAssessStore } from "@/modules/06_assess/store";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
 
-const store = useAssessStore();
+const store = useEvaluateStore();
 </script>
 
 <template>
diff --git a/src/modules/06_evaluate/components/Tab1.vue b/src/modules/06_evaluate/components/Tab1.vue
new file mode 100644
index 0000000..4267dd7
--- /dev/null
+++ b/src/modules/06_evaluate/components/Tab1.vue
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
+import Step1 from "@/modules/06_evaluate/components/step/step1.vue";
+import Step2 from "@/modules/06_evaluate/components/step/step2.vue";
+import Step3 from "@/modules/06_evaluate/components/step/step3.vue";
+import Step4 from "@/modules/06_evaluate/components/step/step4.vue";
+import Step5 from "@/modules/06_evaluate/components/step/step5.vue";
+import Step6 from "@/modules/06_evaluate/components/step/step6.vue";
+import Step7 from "@/modules/06_evaluate/components/step/step7.vue";
+import Step8 from "@/modules/06_evaluate/components/step/step8.vue";
+import Step9 from "@/modules/06_evaluate/components/step/step9.vue";
+
+import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue";
+import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue";
+import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue";
+
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
+import { useCounterMixin } from "@/stores/mixin";
+import type router from "../router";
+
+const store = useEvaluateStore();
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+
+const $q = useQuasar();
+
+const externalLink =
+  "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
+
+function onCilckNextStep() {
+  store.step < 9 &&
+    dialogConfirm(
+      $q,
+      async () => {
+        const functionCreateDoc: (() => Promise<void>) | null =
+          store.step === 1
+            ? await saveStep1
+            : store.step === 2
+            ? await saveStep2
+            : store.step === 3
+            ? await saveStep3
+            : store.step === 4
+            ? await saveStep4
+            : store.step === 5
+            ? await saveStep5
+            : store.step === 5
+            ? await saveStep5
+            : store.step === 6
+            ? await saveStep6
+            : store.step === 7
+            ? await saveStep7
+            : store.step === 8
+            ? await saveStep8
+            : store.step === 9
+            ? await saveStep9
+            : null;
+
+        functionCreateDoc?.();
+        store.step++;
+      },
+      "ยืนยันการดำเนินการ",
+      "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+    );
+}
+
+function onCilckprPeviousStep() {
+  store.step > 1 &&
+    dialogConfirm(
+      $q,
+      () => {
+        store.step--;
+      },
+      "ยืนยันการย้อนกลับ",
+      "ต้องการย้อนกลับใช่หรือไม่?"
+    );
+}
+
+function updatedFormStep2() {}
+
+async function saveStep1() {
+  console.log("Save 1");
+}
+async function saveStep2() {
+  console.log("Save 2");
+}
+async function saveStep3() {
+  console.log("Save 3");
+}
+async function saveStep4() {
+  console.log("Save 4");
+}
+async function saveStep5() {
+  console.log("Save 5");
+}
+async function saveStep6() {
+  console.log("Save 6");
+}
+async function saveStep7() {
+  console.log("Save 7");
+}
+async function saveStep8() {
+  console.log("Save 8");
+}
+async function saveStep9() {
+  console.log("Save 9");
+}
+
+onMounted(() => {
+  store.step = 1;
+});
+</script>
+
+<template>
+  <div class="row q-col-gutter-md">
+    <div class="col-xs-12 col-sm-3">
+      <div class="toptitle">ประเมินชำนาญการ</div>
+      <Stepper />
+    </div>
+
+    <div class="col-xs-12 col-sm-9">
+      <div class="col-12 row">
+        <div class="col-9">
+          <div class="toptitle">
+            {{ store.step }}.{{ store.titel[store.step - 1] }}
+          </div>
+        </div>
+        <div class="col-3 text-right">
+          <q-btn v-if="store.step === 1" :href="externalLink" target="_blank" outline color="blue" no-caps >
+            ไปยัง ก.พ. เพื่อตรวจสอบข้อมูล
+          </q-btn>
+        </div>
+      </div>
+
+      <div class="row q-col-gutter-md col-12">
+        <div
+          :class="
+            store.step === 2 ||
+            store.step === 4 ||
+            store.step === 5 ||
+            store.step === 6 ||
+            store.step === 8 ||
+            store.step === 9
+              ? 'col-xs-12 col-sm-12 row'
+              : 'col-xs-12 col-sm-5 row'
+          "
+        >
+          <q-card flat bordered class="col-12 q-pa-md">
+            <q-card-section>
+              <Step1 v-if="store.step === 1" />
+              <Step2
+                v-if="store.step === 2"
+                @update:updatedForm="updatedFormStep2"
+              />
+              <Step3 v-if="store.step === 3" />
+              <Step4 v-if="store.step === 4" />
+              <Step5 v-if="store.step === 5" />
+              <Step6 v-if="store.step === 6" />
+              <Step7 v-if="store.step === 7" />
+              <Step8 v-if="store.step === 8" />
+              <Step9 v-if="store.step === 9" />
+            </q-card-section>
+          </q-card>
+        </div>
+        <div
+          class="col-xs-12 col-sm-7 row"
+          v-if="store.step === 1 || store.step === 3 || store.step === 7"
+        >
+          <q-card flat bordered class="col-12">
+            <q-card-section>
+              <ViewStep1 v-if="store.step === 1" />
+              <ViewStep3 v-if="store.step === 3" />
+              <ViewStep7 v-if="store.step === 7" /> </q-card-section
+          ></q-card>
+        </div>
+      </div>
+      <div class="q-mt-md q-gutter-md" align="right">
+        <q-btn
+          v-if="store.step !== 1"
+          unelevated
+          outline
+          label="ย้อนกลับ"
+          color="public"
+          @click="onCilckprPeviousStep"
+        />
+        <q-btn
+          unelevated
+          label="ดำเนินการต่อ"
+          color="public"
+          @click="onCilckNextStep"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.q-stepper--vertical .q-stepper__step-inner {
+  padding: 0;
+}
+</style>
diff --git a/src/modules/06_assess/componenst/Tab2.vue b/src/modules/06_evaluate/components/Tab2.vue
similarity index 73%
rename from src/modules/06_assess/componenst/Tab2.vue
rename to src/modules/06_evaluate/components/Tab2.vue
index 855b460..7039195 100644
--- a/src/modules/06_assess/componenst/Tab2.vue
+++ b/src/modules/06_evaluate/components/Tab2.vue
@@ -2,25 +2,25 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
-import Stepper from "@/modules/06_assess/componenst/Stepper.vue";
-import Step1 from "@/modules/06_assess/componenst/step/step1.vue";
-import Step2 from "@/modules/06_assess/componenst/step/step2.vue";
-import Step3 from "@/modules/06_assess/componenst/step/step3.vue";
-import Step4 from "@/modules/06_assess/componenst/step/step4.vue";
-import Step5 from "@/modules/06_assess/componenst/step/step5.vue";
-import Step6 from "@/modules/06_assess/componenst/step/step6.vue";
-import Step7 from "@/modules/06_assess/componenst/step/step7.vue";
-import Step8 from "@/modules/06_assess/componenst/step/step8.vue";
-import Step9 from "@/modules/06_assess/componenst/step/step9.vue";
+import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
+import Step1 from "@/modules/06_evaluate/components/step/step1.vue";
+import Step2 from "@/modules/06_evaluate/components/step/step2.vue";
+import Step3 from "@/modules/06_evaluate/components/step/step3.vue";
+import Step4 from "@/modules/06_evaluate/components/step/step4.vue";
+import Step5 from "@/modules/06_evaluate/components/step/step5.vue";
+import Step6 from "@/modules/06_evaluate/components/step/step6.vue";
+import Step7 from "@/modules/06_evaluate/components/step/step7.vue";
+import Step8 from "@/modules/06_evaluate/components/step/step8.vue";
+import Step9 from "@/modules/06_evaluate/components/step/step9.vue";
 
-import ViewStep1 from "@/modules/06_assess/componenst/viewstep/viewStep1.vue";
-import ViewStep3 from "@/modules/06_assess/componenst/viewstep/viewStep3.vue";
-import ViewStep7 from "@/modules/06_assess/componenst/viewstep/viewStep7.vue";
+import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue";
+import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue";
+import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue";
 
-import { useAssessStore } from "@/modules/06_assess/store";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
 import { useCounterMixin } from "@/stores/mixin";
 
-const store = useAssessStore();
+const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 
diff --git a/src/modules/06_assess/componenst/step/step1.vue b/src/modules/06_evaluate/components/step/step1.vue
similarity index 100%
rename from src/modules/06_assess/componenst/step/step1.vue
rename to src/modules/06_evaluate/components/step/step1.vue
diff --git a/src/modules/06_assess/componenst/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
similarity index 85%
rename from src/modules/06_assess/componenst/step/step2.vue
rename to src/modules/06_evaluate/components/step/step2.vue
index 3da70da..91d7cba 100644
--- a/src/modules/06_assess/componenst/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -1,5 +1,21 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import keycloak from "@/plugins/keycloak";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReport from "@/plugins/genreport";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+const fullName = ref<string>(
+  keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
+);
 
 const fileEvaluation1 = ref<any>();
 const fileEvaluation2 = ref<any>();
@@ -31,6 +47,27 @@ function backPage() {
     page.value--;
   }
 }
+
+async function onClickDowloadFile(
+  tp: string,
+  templateName: string,
+  fileName: string
+) {
+  showLoader();
+  const data = Object.assign(
+    { fullName: fullName.value },
+    tp === "EV1_005" || tp === "EV1_007" ? { organizationName: "-" } : null,
+    tp === "EV1_007" ? { positionName: "-" } : null,
+    tp === "EV1_007" ? { positionLeaveName: "-" } : null
+  );
+  const body = {
+    template: tp,
+    reportName: templateName,
+    data: data,
+  };
+  console.log(body);
+  await genReport(body, fileName);
+}
 </script>
 
 <template>
@@ -52,6 +89,13 @@ function backPage() {
                   icon="download"
                   label="ดาวน์โหลดต้นแบบ"
                   color="primary"
+                  @click="
+                    onClickDowloadFile(
+                      'EV1_005',
+                      'template-1',
+                      'แบบพิจารณาคุณสมบัติบุคคล'
+                    )
+                  "
                 >
                   <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                 >
@@ -84,6 +128,7 @@ function backPage() {
                   </template>
                 </q-file>
               </div>
+
               <div class="col-1 self-center text-center">
                 <q-btn flat round dense color="primary" icon="mdi-upload"
                   ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
@@ -112,6 +157,13 @@ function backPage() {
                   icon="download"
                   label="ดาวน์โหลดต้นแบบ"
                   color="primary"
+                  @click="
+                    onClickDowloadFile(
+                      'EV1_006',
+                      'template-2',
+                      'แบบแสดงรายละเอียดการเสนอผลงาน'
+                    )
+                  "
                 >
                   <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                 >
@@ -171,6 +223,13 @@ function backPage() {
                   icon="download"
                   label="ดาวน์โหลดต้นแบบ"
                   color="primary"
+                  @click="
+                    onClickDowloadFile(
+                      'EV1_007',
+                      'template-3',
+                      'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล'
+                    )
+                  "
                 >
                   <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                 >
@@ -230,6 +289,13 @@ function backPage() {
                   icon="download"
                   label="ดาวน์โหลดต้นแบบ"
                   color="primary"
+                  @click="
+                    onClickDowloadFile(
+                      'EV1_008',
+                      'template-4',
+                      'แบบประเมินคุณลักษณะบุคคล'
+                    )
+                  "
                 >
                   <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                 >
@@ -289,6 +355,13 @@ function backPage() {
                   icon="download"
                   label="ดาวน์โหลดต้นแบบ"
                   color="primary"
+                  @click="
+                    onClickDowloadFile(
+                      'EV1_009',
+                      'template-5',
+                      'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก'
+                    )
+                  "
                 >
                   <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                 >
@@ -348,6 +421,13 @@ function backPage() {
                   icon="download"
                   label="ดาวน์โหลดต้นแบบ"
                   color="primary"
+                  @click="
+                    onClickDowloadFile(
+                      'EV1_010',
+                      'template-6',
+                      'ผลงานที่จะส่งประเมิน'
+                    )
+                  "
                 >
                   <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                 >
diff --git a/src/modules/06_assess/componenst/step/step3.vue b/src/modules/06_evaluate/components/step/step3.vue
similarity index 96%
rename from src/modules/06_assess/componenst/step/step3.vue
rename to src/modules/06_evaluate/components/step/step3.vue
index 35ba5b5..0e862f3 100644
--- a/src/modules/06_assess/componenst/step/step3.vue
+++ b/src/modules/06_evaluate/components/step/step3.vue
@@ -2,9 +2,9 @@
 import { reactive, ref } from "vue";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { useAssessStore } from "@/modules/06_assess/store";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
 
-const store = useAssessStore();
+const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
diff --git a/src/modules/06_assess/componenst/step/step4.vue b/src/modules/06_evaluate/components/step/step4.vue
similarity index 100%
rename from src/modules/06_assess/componenst/step/step4.vue
rename to src/modules/06_evaluate/components/step/step4.vue
diff --git a/src/modules/06_assess/componenst/step/step5.vue b/src/modules/06_evaluate/components/step/step5.vue
similarity index 100%
rename from src/modules/06_assess/componenst/step/step5.vue
rename to src/modules/06_evaluate/components/step/step5.vue
diff --git a/src/modules/06_assess/componenst/step/step6.vue b/src/modules/06_evaluate/components/step/step6.vue
similarity index 97%
rename from src/modules/06_assess/componenst/step/step6.vue
rename to src/modules/06_evaluate/components/step/step6.vue
index db5e625..9c442d5 100644
--- a/src/modules/06_assess/componenst/step/step6.vue
+++ b/src/modules/06_evaluate/components/step/step6.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import ViewPDF from "@/modules/06_assess/componenst/viewstep/viewPDF.vue";
+import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
 
 const fileEvaluation1 = ref<any>();
 
diff --git a/src/modules/06_assess/componenst/step/step7.vue b/src/modules/06_evaluate/components/step/step7.vue
similarity index 87%
rename from src/modules/06_assess/componenst/step/step7.vue
rename to src/modules/06_evaluate/components/step/step7.vue
index 77ab9a0..fcebfca 100644
--- a/src/modules/06_assess/componenst/step/step7.vue
+++ b/src/modules/06_evaluate/components/step/step7.vue
@@ -2,9 +2,9 @@
 import { reactive, ref } from "vue";
 
 import { useCounterMixin } from "@/stores/mixin";
-import { useAssessStore } from "@/modules/06_assess/store";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
 
-const store = useAssessStore();
+const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
diff --git a/src/modules/06_assess/componenst/step/step8.vue b/src/modules/06_evaluate/components/step/step8.vue
similarity index 100%
rename from src/modules/06_assess/componenst/step/step8.vue
rename to src/modules/06_evaluate/components/step/step8.vue
diff --git a/src/modules/06_assess/componenst/step/step9.vue b/src/modules/06_evaluate/components/step/step9.vue
similarity index 100%
rename from src/modules/06_assess/componenst/step/step9.vue
rename to src/modules/06_evaluate/components/step/step9.vue
diff --git a/src/modules/06_assess/componenst/viewstep/viewPDF.vue b/src/modules/06_evaluate/components/viewstep/viewPDF.vue
similarity index 100%
rename from src/modules/06_assess/componenst/viewstep/viewPDF.vue
rename to src/modules/06_evaluate/components/viewstep/viewPDF.vue
diff --git a/src/modules/06_assess/componenst/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
similarity index 100%
rename from src/modules/06_assess/componenst/viewstep/viewStep1.vue
rename to src/modules/06_evaluate/components/viewstep/viewStep1.vue
diff --git a/src/modules/06_assess/componenst/viewstep/viewStep3.vue b/src/modules/06_evaluate/components/viewstep/viewStep3.vue
similarity index 76%
rename from src/modules/06_assess/componenst/viewstep/viewStep3.vue
rename to src/modules/06_evaluate/components/viewstep/viewStep3.vue
index 6ed9c92..c83e2d6 100644
--- a/src/modules/06_assess/componenst/viewstep/viewStep3.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep3.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import ViewPDF from "@/modules/06_assess/componenst/viewstep/viewPDF.vue";
+import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
 
-import { useAssessStore } from "@/modules/06_assess/store";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
 
-const store = useAssessStore();
+const store = useEvaluateStore();
 </script>
 
 <template>
diff --git a/src/modules/06_assess/componenst/viewstep/viewStep7.vue b/src/modules/06_evaluate/components/viewstep/viewStep7.vue
similarity index 57%
rename from src/modules/06_assess/componenst/viewstep/viewStep7.vue
rename to src/modules/06_evaluate/components/viewstep/viewStep7.vue
index e1ed214..126be47 100644
--- a/src/modules/06_assess/componenst/viewstep/viewStep7.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep7.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import ViewPDF from "@/modules/06_assess/componenst/viewstep/viewPDF.vue";
+import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
 
-import { useAssessStore } from "@/modules/06_assess/store";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
 
-const store = useAssessStore();
+const store = useEvaluateStore();
 </script>
 
 <template>
diff --git a/src/modules/06_evaluate/router.ts b/src/modules/06_evaluate/router.ts
new file mode 100644
index 0000000..560cad3
--- /dev/null
+++ b/src/modules/06_evaluate/router.ts
@@ -0,0 +1,13 @@
+const evaluateMain = () => import("@/modules/06_evaluate/views/EvaluateMain.vue");
+
+export default [
+  {
+    path: "/evaluate",
+    name: "evaluate",
+    component: evaluateMain,
+    meta: {
+      Auth: true,
+      Key: [7],
+    },
+  },
+];
diff --git a/src/modules/06_assess/store.ts b/src/modules/06_evaluate/store.ts
similarity index 91%
rename from src/modules/06_assess/store.ts
rename to src/modules/06_evaluate/store.ts
index ed06a40..456e1ff 100644
--- a/src/modules/06_assess/store.ts
+++ b/src/modules/06_evaluate/store.ts
@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
-export const useAssessStore = defineStore("asses", () => {
+export const useEvaluateStore = defineStore("evaluateStore", () => {
   const tabMenu = ref<string>("1");
   const step = ref<number>(1);
   const titel = ref<string[]>([
diff --git a/src/modules/06_assess/views/AssessMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
similarity index 85%
rename from src/modules/06_assess/views/AssessMain.vue
rename to src/modules/06_evaluate/views/EvaluateMain.vue
index c328aac..70356e9 100644
--- a/src/modules/06_assess/views/AssessMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -5,12 +5,12 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import Tab1 from "@/modules/06_assess/componenst/Tab1.vue"; // ชำนาญการ
-import Tab2 from "@/modules/06_assess/componenst/Tab2.vue"; // ชำนาญการพิเศษ
+import Tab1 from "@/modules/06_evaluate/components/Tab1.vue"; // ชำนาญการ
+import Tab2 from "@/modules/06_evaluate/components/Tab2.vue"; // ชำนาญการพิเศษ
 
-import { useAssessStore } from "@/modules/06_assess/store";
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
 
-const store = useAssessStore();
+const store = useEvaluateStore();
 const router = useRouter();
 const $q = useQuasar();
 </script>
diff --git a/src/plugins/genreport.ts b/src/plugins/genreport.ts
new file mode 100644
index 0000000..5346948
--- /dev/null
+++ b/src/plugins/genreport.ts
@@ -0,0 +1,54 @@
+import axios from "axios";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+const apiGenReport =
+  "https://report-server.frappet.synology.me/api/v1/report-template/docx";
+
+async function genReport(data: any, fileName: string) {
+  showLoader();
+  await axios
+    .post(apiGenReport, data, {
+      headers: {
+        accept:
+          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        "content-Type": "application/json",
+      },
+      responseType: "arraybuffer",
+    })
+    .then((res) => {
+      const data = res.data;
+      if (data) {
+        // สร้าง Blob จาก array buffer
+        const blob = new Blob([data], {
+          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        });
+
+        // สร้าง URL สำหรับไฟล์ Blob
+        const url = URL.createObjectURL(blob);
+
+        // สร้างลิงก์เพื่อดาวน์โหลดไฟล์
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `${fileName}.docx`; // กำหนดชื่อไฟล์ที่จะดาวน์โหลด
+        document.body.appendChild(link);
+        link.click();
+
+        // ลบ URL ที่สร้างขึ้นหลังจากใช้งาน
+        URL.revokeObjectURL(url);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+export default genReport;
diff --git a/src/router/index.ts b/src/router/index.ts
index 4dc9efd..d87127d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,7 +7,7 @@ import ModuleTransfer from "@/modules/02_transfer/router";
 import ModuleRetire from "@/modules/03_retire/router";
 import ModuleCheckin from "@/modules/04_checkin/router";
 import ModuleLeave from "@/modules/05_leave/router";
-import ModuAssesss from "@/modules/06_assess/router";
+import ModuEvaluate from "@/modules/06_evaluate/router";
 import ModuAppealComplain from "@/modules/07_appealComplain/router";
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
@@ -33,7 +33,7 @@ const router = createRouter({
         ...ModuleRetire,
         ...ModuleCheckin,
         ...ModuleLeave,
-        ...ModuAssesss,
+        ...ModuEvaluate,
         ...ModuAppealComplain,
       ],
     },